:root {
  --bg: #f5f2ec;
  --surface: #fffdf9;
  --surface-2: #eee9df;
  --text: #1d2130;
  --muted: #676b78;
  --border: #dbd4c6;
  --accent: #2f4ad0;
  --accent-text: #ffffff;
  --danger: #c92a2a;
  --cell: #e9e4d8;
  --cell-text: #9a9587;
  --on: #2f4ad0;
  --on-text: #ffffff;
  --magic: #ae3ec9;
  --need: #f59f00;
  --card: #ffffff;
  --card-text: #1d2130;
  --prime: #ffd43b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.07);
  --p0: #2f4ad0; --p1: #e8590c; --p2: #2b8a3e; --p3: #ae3ec9; --p4: #0c8599; --p5: #c2255c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161b;
    --surface: #1d2027;
    --surface-2: #292d36;
    --text: #ebe8e2;
    --muted: #9ea2ad;
    --border: #363b46;
    --accent: #6d86ff;
    --accent-text: #0d1020;
    --danger: #ff6b6b;
    --cell: #242831;
    --cell-text: #5f6470;
    --on: #5c7cfa;
    --on-text: #0d1020;
    --magic: #cc5de8;
    --need: #fab005;
    --card: #2a2e38;
    --card-text: #f1efe9;
    --prime: #ffd43b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.35);
    --p0: #5c7cfa; --p1: #ff8a3d; --p2: #40c057; --p3: #cc5de8; --p4: #22b8cf; --p5: #f06595;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--danger); min-height: 1.4em; margin: 0.4rem 0 0; text-align: center; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.5rem); letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

button, input, select { font: inherit; color: inherit; }
button {
  border-radius: 10px; border: 1px solid transparent; padding: 0.6rem 1rem; cursor: pointer;
  font-weight: 600; transition: transform 0.06s, background 0.15s, box-shadow 0.15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--accent-text); width: 100%; }
button.secondary { background: var(--surface-2); border-color: var(--border); }
button.ghost { background: transparent; border-color: var(--border); }
button.small { padding: 0.35rem 0.75rem; font-size: 0.875rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.75rem; min-width: 0;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 16px; border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 800; display: flex; align-items: center; gap: 0.55rem; font-size: 1.1rem; white-space: nowrap; }
.logo { position: relative; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); flex: none; }
.logo i { position: absolute; width: 9px; height: 9px; border-radius: 50%; }
.logo i:first-child { background: var(--prime); left: 6px; top: 6px; }
.logo i:last-child { background: #fff; right: 6px; bottom: 6px; }
.topbar-actions { display: flex; gap: 0.5rem; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 16px 2rem; }

.hero { max-width: 660px; margin-bottom: 1.5rem; }
.hero p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.field { display: flex; flex-direction: column; gap: 0.3rem; max-width: 320px; margin-bottom: 1.25rem; }
.field span { font-weight: 600; font-size: 0.9rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.15rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;
}
.card p { margin: 0; }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.row input { flex: 1; }
#codeInput { text-transform: uppercase; letter-spacing: 0.15em; }
.divider { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.bot-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.bot-row { display: flex; gap: 0.5rem; align-items: center; }
.bot-row select { flex: 1; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--pc, var(--muted)); }
.c0 { --pc: var(--p0); } .c1 { --pc: var(--p1); } .c2 { --pc: var(--p2); }
.c3 { --pc: var(--p3); } .c4 { --pc: var(--p4); } .c5 { --pc: var(--p5); }

.leader-list { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.2rem; }
.leader-list li span { color: var(--muted); font-size: 0.85rem; }

.lobby-card { max-width: 520px; margin: 0 auto; }
.room-code-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.room-code { font-size: 2.2rem; font-weight: 800; letter-spacing: 0.25em; font-family: ui-monospace, monospace; }
.seat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.seat-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--surface-2); }
.seat-list .name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 0.75rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.host-controls { display: flex; flex-direction: column; gap: 0.75rem; }
.host-controls select { flex: 1; }

/* ---- Game ---- */
#game { padding-bottom: 210px; }
.opponents { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 1rem; scrollbar-width: thin; }
.seat {
  flex: 1 0 140px; max-width: 220px; display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.7rem;
  box-shadow: inset 4px 0 0 var(--pc);
}
.seat.turn { border-color: var(--pc); box-shadow: inset 4px 0 0 var(--pc), 0 0 0 2px var(--pc); }
.seat .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .meta { font-size: 0.8rem; color: var(--muted); display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.mini-cards { display: flex; gap: 2px; min-height: 18px; align-items: center; }
.mini-cards i { width: 11px; height: 16px; border-radius: 3px; background: var(--pc); opacity: 0.85; }
.badge { font-size: 0.7rem; font-weight: 700; padding: 0 0.4rem; border-radius: 999px; background: var(--danger); color: #fff; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .game-layout { grid-template-columns: minmax(0, 1fr); } }
.table-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.table-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.status {
  font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
}
.status.your-turn { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.tray { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.tray-stack { width: 18px; height: 24px; border-radius: 4px; background: var(--accent); box-shadow: 3px -3px 0 var(--surface-2), 3px -3px 0 1px var(--border); }

.last-play { min-height: 1.5em; font-size: 0.95rem; }
.last-play b { font-weight: 800; }

.board {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 8px;
}
.num {
  position: relative; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center;
  background: var(--cell); color: var(--cell-text); font-weight: 700; font-size: clamp(0.72rem, 2.4vw, 1rem);
  font-variant-numeric: tabular-nums;
}
.num.prime { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--prime) 60%, transparent); }
.num.need { box-shadow: inset 0 0 0 2px var(--need); color: var(--text); }
.num.on { background: var(--on); color: var(--on-text); box-shadow: none; }
.num.magic { background: var(--magic); color: #fff; }
.num.magic::after { content: '★'; position: absolute; top: 1px; right: 3px; font-size: 0.55em; }
.num.fresh { animation: pop 0.5s ease; }
@keyframes pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; }
.legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lg-on { background: var(--on); } .lg-magic { background: var(--magic); } .lg-need { box-shadow: inset 0 0 0 2px var(--need); }

.side-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.move-log { margin: 0; padding-left: 1.4rem; max-height: 260px; overflow-y: auto; font-size: 0.875rem; }
.chat-log { max-height: 180px; overflow-y: auto; font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.2rem; }
.chat-log .sys { color: var(--muted); font-style: italic; }

/* Hand dock pinned to the bottom so it's always in reach on phones. */
.hand-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); padding: 0.6rem 16px calc(0.4rem + env(safe-area-inset-bottom));
}
.hand-head { max-width: 1100px; margin: 0 auto 0.4rem; display: flex; align-items: center; gap: 0.75rem; }
.hand-label { font-weight: 700; }
.hand-head #passBtn { margin-left: auto; }
.hand { max-width: 1100px; margin: 0 auto; display: flex; gap: 0.5rem; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: thin; }
.pcard {
  position: relative; flex: none; width: 74px; height: 104px; border-radius: 12px; padding: 6px;
  background: var(--card); color: var(--card-text); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: var(--shadow);
}
.pcard .v { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.pcard .kind { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.pcard .factors { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.pcard .factors span {
  min-width: 20px; height: 20px; border-radius: 50%; font-size: 0.65rem; font-weight: 700; display: grid; place-items: center;
  border: 1.5px solid var(--muted); color: var(--muted); padding: 0 3px;
}
.pcard .factors span.have { border-color: var(--on); background: var(--on); color: var(--on-text); }
.pcard.prime { background: linear-gradient(160deg, var(--prime), color-mix(in srgb, var(--prime) 70%, #fff)); color: #2b2100; border-color: transparent; }
.pcard.prime .kind { color: #6b5600; }
.pcard.magic { background: linear-gradient(160deg, var(--magic), #7048e8); color: #fff; border-color: transparent; }
.pcard.skip { background: linear-gradient(160deg, #fa5252, #e8590c); color: #fff; border-color: transparent; }
.pcard.magic .kind, .pcard.skip .kind { color: rgba(255, 255, 255, 0.85); }
.pcard.one { background: linear-gradient(160deg, #ff922b, #f76707); color: #fff; border-color: transparent; }
.pcard.one .kind { color: rgba(255, 255, 255, 0.85); }
.pcard.playable { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.pcard.playable:hover { transform: translateY(-4px); }
.pcard:disabled { opacity: 1; cursor: default; }
.pcard.blocked { opacity: 0.5; }
.pcard.new::before { content: 'new'; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 800; background: var(--text); color: var(--bg); border-radius: 999px; padding: 0 6px; }

.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; padding: 16px; z-index: 10; }
.modal-box {
  background: var(--surface); border-radius: 18px; padding: 1.4rem; max-width: 460px; width: 100%;
  box-shadow: var(--shadow); border: 1px solid var(--border); max-height: 90vh; overflow-y: auto;
}
.modal-box.rules { max-width: 620px; }
.modal-box.rules li { margin-bottom: 0.45rem; }
.end-actions { margin-top: 1rem; }
.end-actions button { flex: 1; }
.prime-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.prime-grid button { padding: 0.6rem 0; background: var(--surface-2); border-color: var(--border); }
.prime-grid button.useful { background: var(--prime); color: #2b2100; border-color: transparent; }
.prime-grid button.on { opacity: 0.6; }
.target-list { display: flex; flex-direction: column; gap: 0.5rem; }
.target-list button { display: flex; align-items: center; gap: 0.6rem; background: var(--surface-2); border-color: var(--border); text-align: left; }
.target-list button .n { flex: 1; }
.end-list { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
.end-list li { padding: 0.25rem 0; }
.end-list .pts { float: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.end-list .left { display: block; font-size: 0.8rem; color: var(--muted); }

@media (max-width: 560px) {
  .topbar { padding: 0.5rem 12px; }
  .topbar-actions button { padding: 0.35rem 0.65rem; font-size: 0.85rem; }
  main { padding: 1rem 12px 1.5rem; }
  .hand-dock { padding-left: 12px; padding-right: 12px; }
  .pcard { width: 62px; height: 90px; }
  .pcard .v { font-size: 1.45rem; }
  .board { gap: 3px; padding: 6px; }
  .num { border-radius: 6px; }
  .seat { flex-basis: 120px; }
  .status { font-size: 0.9rem; }
  #game { padding-bottom: 190px; }
}
@media (prefers-reduced-motion: reduce) { .num.fresh { animation: none; } .pcard.playable:hover { transform: none; } }