/* Robbing You Blind — blueprint theme, v2 */
:root {
  --bp: #24407e;            /* blueprint blue */
  --bp-dark: #16294f;
  --bp-deep: #0e1b36;
  --bp-line: #3d5ca8;
  --gold: #ffd117;
  --gold-dark: #d9a900;
  --red: #e02828;
  --paper: #f4f1e6;
  --ok: #58d68d;
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.06) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.06) 39px 40px),
    var(--bp);
  color: #fff;
}
.hidden { display: none !important; }
.screen { min-height: 100vh; }

/* ------------------------------------------------- home / lobby ---------- */
#home, #lobby { display: flex; align-items: center; justify-content: center; }
.home-card {
  background: var(--bp-dark);
  border: 2px solid var(--bp-line);
  border-radius: 14px;
  padding: 36px 42px;
  width: min(480px, 92vw);
  text-align: center;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.home-title {
  font-size: 2.1rem; font-weight: 900; letter-spacing: .04em;
  color: var(--gold); text-shadow: 2px 3px 0 #000;
}
.home-title span { color: #fff; }
.home-title.small { font-size: 1.5rem; }
.home-tag { color: #bcd0f7; margin: 8px 0 22px; }
#name-input, #code-input {
  background: var(--bp-deep); color: #fff; border: 2px solid var(--bp-line);
  border-radius: 8px; padding: 10px 12px; font-size: 1rem; width: 100%;
  margin-bottom: 14px; outline: none; text-align: center;
}
#code-input { width: 90px; text-transform: uppercase; letter-spacing: .25em; margin: 0; }
.home-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.home-row.center { margin-top: 18px; }
.join-group { display: flex; gap: 8px; align-items: center; }
.btn {
  border: none; border-radius: 8px; cursor: pointer;
  font-weight: 800; font-size: 1rem; padding: 11px 20px;
  transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.gold { background: var(--gold); color: #1c1c1c; box-shadow: 0 4px 0 var(--gold-dark); }
.btn.blue { background: var(--bp-line); color: #fff; box-shadow: 0 4px 0 #22366b; }
.btn.red  { background: var(--red);  color: #fff; box-shadow: 0 4px 0 #8c1212; }
.small-btn { padding: 8px 14px; font-size: .9rem; }
.link-btn { background: none; border: none; color: #9db8ec; cursor: pointer; text-decoration: underline; font-size: .9rem; }
#mute-btn { text-decoration: none; font-size: 1.05rem; }
.home-error { color: #ff9d9d; min-height: 1.2em; margin-top: 10px; }
.build-tag { color: #55688f; font-size: .68rem; margin-top: 10px; letter-spacing: .08em; }
.lobby-code { margin: 6px 0 16px; color: #bcd0f7; }
.lobby-code b { color: var(--gold); font-size: 1.3rem; letter-spacing: .25em; }
.lobby-players { list-style: none; padding: 0; margin: 0 0 18px; }
.lobby-players li {
  background: var(--bp-deep); border: 1px solid var(--bp-line); border-radius: 8px;
  padding: 9px 14px; margin-bottom: 7px; display: flex; justify-content: space-between; align-items: center;
}
.lobby-hint { color: #8aa3d6; font-size: .85rem; margin-top: 14px; }

/* ------------------------------------------------------ game shell ------- */
#game { display: flex; flex-direction: column; height: 100vh; }
#topbar {
  display: flex; align-items: center; gap: 18px;
  background: var(--bp-deep); padding: 8px 16px;
  border-bottom: 2px solid var(--bp-line);
  flex: none;
}
.brand { font-weight: 900; color: var(--gold); letter-spacing: .03em; white-space: nowrap; }
.brand span { color: #fff; }
#step-tracker { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
.step {
  font-size: .72rem; padding: 4px 9px; border-radius: 20px;
  background: var(--bp-dark); color: #8aa3d6; border: 1px solid var(--bp-line);
  white-space: nowrap;
}
.step.active { background: var(--gold); color: #1c1c1c; font-weight: 800; border-color: var(--gold); }
.step.done { color: #cfe0ff; background: #2c4a8f; }
.top-right { display: flex; align-items: center; gap: 12px; }
#room-tag { color: #9db8ec; font-size: .85rem; letter-spacing: .15em; }
.timer { font-weight: 900; font-size: 1.05rem; color: var(--gold); }
.timer.urgent { color: #ff5b5b; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .45; } }

#layout {
  flex: 1; display: grid; gap: 12px; padding: 12px;
  grid-template-columns: minmax(230px, 290px) 1fr minmax(250px, 320px);
  min-height: 0;
}
section { min-height: 0; display: flex; flex-direction: column; }
.panel-title {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: #9db8ec;
  text-transform: uppercase; margin-bottom: 6px;
}

/* --------------------------------------------------- center stage -------- */
#center-col { align-items: stretch; }
#phase-banner {
  text-align: center; background: var(--bp-deep);
  border: 1px solid var(--bp-line); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; font-weight: 600; color: #ffe9a0;
  min-height: 2.4em; flex: none;
}
#table-area {
  background: var(--bp-dark); border: 1px solid var(--bp-line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; flex: none;
}
#die-dock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 46px; }
.die {
  background: var(--paper); color: #1c1c1c; font-weight: 900;
  border-radius: 10px; padding: 8px 12px; font-size: .8rem;
  box-shadow: 0 4px 0 #b9b29a; text-align: center;
}
#roll-btn { animation: pulse-glow 1.6s infinite; }
@keyframes pulse-glow { 50% { box-shadow: 0 4px 0 var(--gold-dark), 0 0 22px 4px rgba(255,209,23,.55); } }
#played-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.played-slot { width: 58px; text-align: center; flex: none; }
.played-slot .cardface {
  width: 58px; height: 82px; border-radius: 5px; background-size: cover;
  box-shadow: 0 3px 8px rgba(0,0,0,.5); position: relative;
}
.played-slot .cardface.flipping { animation: cardflip .5s ease; }
@keyframes cardflip { 0% { transform: rotateY(90deg) scale(1.15); } 100% { transform: rotateY(0) scale(1); } }
.played-slot .cardface.ignored::after {
  content: "IGNORED"; position: absolute; inset: auto 0 6px 0; text-align: center;
  color: #fff; background: rgba(224,40,40,.92); font-size: .58rem; font-weight: 900;
  padding: 2px 0; letter-spacing: .08em;
}
.played-slot .who { font-size: .66rem; color: #bcd0f7; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.played-slot.discard .cardface { filter: grayscale(.6) brightness(.7); }
.played-slot.discard .who::after { content: " 💰"; }

#board-frame { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 0; padding: 4px 0 10px; }
#board {
  position: relative;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 6 / 9;
  max-width: 100%;
  background: var(--bp-deep);
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
#board .tile {
  position: absolute; width: 50%; height: calc(100%/3);
  background-size: cover;
}
#board .boundary {
  position: absolute; left: 0; width: 100%; height: 4px;
  background: #000; transform: translateY(-50%); z-index: 3;
}
#board .wallseg { position: absolute; background: rgba(255,209,23,.55); z-index: 4; border-radius: 2px;
  box-shadow: 0 0 5px rgba(255,209,23,.5); pointer-events: none; }
#board .wallseg.h { height: 4px; width: calc(100%/6); transform: translateY(-50%); }
#board .wallseg.v { width: 4px; height: calc(100%/9); transform: translateX(-50%); }

/* doors: slim standing bars on the boundary with a vault-wheel badge */
#board .door-bar {
  position: absolute; width: calc(100%/6 * .94); height: calc(100%/9 * .22);
  transform: translate(-50%, -50%); z-index: 6;
  background: linear-gradient(180deg, #45608f 0%, #2c3e57 45%, #17233a 100%);
  border: 2px solid #060a14; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.65);
}
#board .door-bar .door-badge {
  width: calc(100% * .34); aspect-ratio: 1; border-radius: 50%;
  background-size: cover; border: 2px solid #060a14;
  box-shadow: 0 0 8px rgba(0,0,0,.6);
  flex: none;
}
#board .door-bar .door-led {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
}
#board .door-bar.open { box-shadow: 0 0 12px 2px rgba(88,214,141,.35), 0 3px 8px rgba(0,0,0,.65); }
#board .door-bar.open .door-led { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
#board .door-bar.closed { filter: saturate(.5) brightness(.75); }
#board .door-bar.closed .door-led { background: var(--red); box-shadow: 0 0 6px var(--red); }

/* exit: slim blown-out wall bar on the top edge */
#board .exit-bar {
  position: absolute; width: calc(100%/6 * .96); height: calc(100%/9 * .3);
  transform: translate(-50%, -50%); z-index: 6;
  background: url(assets/exit-wall.png) center/cover;
  border: 2px solid #000; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px 2px rgba(255,209,23,.35);
}
#board .exit-bar span {
  font-size: .62rem; font-weight: 900; letter-spacing: .12em; color: var(--gold);
  text-shadow: 0 1px 3px #000, 0 0 6px #000; white-space: nowrap;
}

#board .gold-token {
  position: absolute; width: calc(100%/6 * .62); aspect-ratio: 1;
  transform: translate(-50%, -50%); z-index: 5;
  background: url(assets/gold.png) center/cover; border-radius: 5px;
  box-shadow: 0 0 14px 4px rgba(255,209,23,.55), 0 0 0 2px #000;
  animation: shimmer 2.2s infinite;
}
@keyframes shimmer { 50% { box-shadow: 0 0 22px 7px rgba(255,209,23,.85), 0 0 0 2px #000; } }

/* the robber: top-down figure, whole sprite rotates with facing */
#board .robber-pawn {
  position: absolute; width: calc(100%/6 * .92); aspect-ratio: 1; z-index: 10;
  transform: translate(-50%, -50%);
  transition: left .55s ease, top .55s ease;
  pointer-events: none;
}
#board .robber-pawn .rot {
  width: 100%; height: 100%;
  transition: transform .4s ease;
}
#board .robber-pawn svg { width: 100%; height: 100%; display: block; overflow: visible; }
#board .robber-pawn .gold-carried {
  position: absolute; right: -8%; bottom: -6%; width: 46%; aspect-ratio: 1;
  background: url(assets/gold.png) center/cover; border-radius: 4px;
  border: 2px solid #000; box-shadow: 0 0 8px 2px rgba(255,209,23,.7);
  z-index: 11;
}
#board .flash-ignored {
  position: absolute; z-index: 12; transform: translate(-50%,-50%);
  color: #ff7575; font-weight: 900; font-size: .8rem; text-shadow: 1px 1px 0 #000;
  animation: floatup 1.6s forwards; pointer-events: none; white-space: nowrap;
}
@keyframes floatup { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -34px; } }

/* ------------------------------------------------------- left column ----- */
#players-panel { background: var(--bp-dark); border: 1px solid var(--bp-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; flex: none; }
#players { list-style: none; margin: 0; padding: 0; }
#players li {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--bp-deep); border: 1px solid var(--bp-line); border-radius: 8px;
  padding: 7px 10px; margin-bottom: 6px; font-size: .88rem;
}
#players li.leader { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
#players .dot { width: 8px; height: 8px; border-radius: 50%; background: #777; flex: none; }
#players .dot.on { background: var(--ok); }
#players .pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#players .badge { font-size: .7rem; padding: 2px 7px; border-radius: 10px; background: var(--bp-line); white-space: nowrap; }
#players .badge.lead { background: var(--gold); color: #1c1c1c; font-weight: 800; }
#players .badge.money { background: var(--gold-dark); color: #1c1c1c; font-weight: 800; }
#players .badge.acted { background: var(--ok); color: #0c2c18; font-weight: 800; }
#players .badge.order { background: #2c4a8f; color: #cfe0ff; font-weight: 800; }
#players .badge.role-robber { background: #2e7d32; }
#players .badge.role-cop { background: var(--red); }
#players .cards-left { color: #9db8ec; font-size: .76rem; white-space: nowrap; }
#players .veto-mini { width: 13px; height: 18px; border-radius: 2px; background: url(assets/veto.png) center/cover; flex: none; }
#players .veto-mini.used { filter: grayscale(1) brightness(.45); }

#log-panel { flex: 1; background: var(--bp-dark); border: 1px solid var(--bp-line); border-radius: 10px; padding: 10px 12px; min-height: 0; display: flex; flex-direction: column; }
#log { overflow-y: auto; flex: 1; font-size: .8rem; color: #cfe0ff; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
#log div { border-left: 3px solid var(--bp-line); padding-left: 8px; }

/* ------------------------------------------------------ right column ----- */
#chat-panel { flex: 1; background: var(--bp-dark); border: 1px solid var(--bp-line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
#chat-lock { color: var(--red); font-weight: 900; margin-left: 8px; font-size: .72rem; }
#chat-list { flex: 1; overflow-y: auto; font-size: .87rem; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
#chat-list .from { color: var(--gold); font-weight: 700; }
#chat-form { display: flex; gap: 6px; margin-top: 8px; }
#chat-input { flex: 1; background: var(--bp-deep); border: 1px solid var(--bp-line); color: #fff; border-radius: 7px; padding: 8px 10px; outline: none; }
#chat-input:disabled { opacity: .5; }

/* -------------------------------------------------------- bottom bar ----- */
#bottombar {
  display: flex; align-items: center; gap: 16px;
  background: var(--bp-deep); border-top: 2px solid var(--bp-line);
  padding: 6px 16px; flex: none;
}
#role-chip { width: 60px; height: 85px; border-radius: 6px; background-size: cover; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.5); flex: none; }
#hand-wrap { flex: 1; min-width: 0; }
#hold-chip {
  display: inline-block; background: #2c4a8f; border: 1px solid var(--gold);
  color: #ffe9a0; font-size: .78rem; font-weight: 700;
  border-radius: 14px; padding: 3px 12px; margin-bottom: 4px;
}
#hand { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; }
#hand.swap-out-left { animation: swapoutL .35s ease forwards; }
#hand.swap-out-right { animation: swapoutR .35s ease forwards; }
#hand.swap-in { animation: swapin .45s ease; }
@keyframes swapoutL { to { transform: translateX(-70px); opacity: 0; } }
@keyframes swapoutR { to { transform: translateX(70px); opacity: 0; } }
@keyframes swapin { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.hand-card {
  width: 80px; height: 113px; border-radius: 7px; background-size: cover; flex: none;
  cursor: pointer; transition: transform .12s, box-shadow .12s; position: relative;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.hand-card:hover { transform: translateY(-10px) scale(1.05); }
.hand-card.selected { transform: translateY(-13px); box-shadow: 0 0 0 3px var(--gold), 0 10px 16px rgba(0,0,0,.6); }
.hand-card.disabled { cursor: default; opacity: .8; }
.hand-card.disabled:hover { transform: none; }
.hand-card .new-badge {
  position: absolute; top: -7px; right: -6px;
  background: var(--gold); color: #1c1c1c; font-size: .58rem; font-weight: 900;
  padding: 2px 6px; border-radius: 8px; letter-spacing: .06em;
  box-shadow: 0 2px 5px rgba(0,0,0,.5); border: 1.5px solid #000;
}
#actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 200px; flex: none; }
#actions .btn { width: 100%; }
#actions .note { font-size: .78rem; color: #9db8ec; text-align: center; }
#plan-timer { font-weight: 800; color: var(--gold); text-align: center; }
#plan-timer.over { color: #ff8a8a; }

/* carrier assignment */
#carrier-pick { background: var(--bp-dark); border: 1px solid var(--gold); border-radius: 8px; padding: 8px; }
#carrier-pick label { display: flex; gap: 6px; align-items: center; font-size: .85rem; padding: 3px 2px; cursor: pointer; }

/* --------------------------------------------------------- dice show ----- */
#dice-overlay { background: rgba(8, 14, 30, .78); }
.dice-stage { text-align: center; }
#dice-cube {
  width: 150px; height: 150px; margin: 0 auto;
  background: var(--paper); color: #1c1c1c;
  border-radius: 22px; box-shadow: 0 10px 0 #b9b29a, 0 24px 60px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 900; padding: 14px; text-align: center;
}
#dice-cube.tumbling { animation: tumble .5s infinite; }
@keyframes tumble {
  0%,100% { transform: rotate(-7deg) translate(-6px, 2px); }
  25% { transform: rotate(5deg) translate(5px, -5px); }
  50% { transform: rotate(-4deg) translate(3px, 5px); }
  75% { transform: rotate(8deg) translate(-4px, -3px); }
}
#dice-cube.landed { animation: land .35s ease; }
@keyframes land { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
#dice-result {
  margin-top: 22px; font-size: 1.5rem; font-weight: 900; color: var(--gold);
  text-shadow: 2px 2px 0 #000; min-height: 2em; letter-spacing: .04em;
}

/* --------------------------------------------------------- modals -------- */
.overlay {
  position: fixed; inset: 0; background: rgba(8, 14, 30, .82);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: var(--bp-dark); border: 2px solid var(--bp-line); border-radius: 14px;
  padding: 28px 34px; text-align: center; width: min(440px, 92vw);
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.modal.wide { width: min(640px, 94vw); }
.modal-title { font-size: 1.25rem; font-weight: 900; color: var(--gold); letter-spacing: .05em; margin-bottom: 14px; }
.modal-title.big { font-size: 1.7rem; }
.role-card { width: 200px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
#role-blurb { color: #cfe0ff; }
.end-roles { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 16px 0; }
.end-roles .er { width: 104px; }
.end-roles img { width: 100%; border-radius: 8px; }
.end-roles .ername { font-size: .85rem; font-weight: 700; margin-top: 4px; }
.help { text-align: left; }
.help-body { color: #dce7ff; font-size: .92rem; line-height: 1.5; }
.help-body b { color: var(--gold); }
.cheat-img { display: block; width: min(380px, 100%); margin: 14px auto 4px; border-radius: 10px; }

#toast {
  position: fixed; left: 50%; bottom: 170px; transform: translateX(-50%);
  background: var(--red); color: #fff; font-weight: 700; padding: 10px 18px;
  border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 80;
  max-width: 80vw; text-align: center;
}
#toast.show { opacity: 1; }

/* --------------------------------------------------------- responsive ---- */
@media (max-width: 1150px) {
  #layout { grid-template-columns: minmax(210px, 250px) 1fr; }
  #side-col { grid-column: 1 / -1; }
  #chat-panel { min-height: 180px; }
}
@media (max-width: 760px) {
  #layout { grid-template-columns: 1fr; }
  #board-frame { min-height: 52vh; }
  #bottombar { flex-wrap: wrap; min-height: 0; }
  #actions { min-width: 100%; }
}