:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  --bg:#09110e;
  --panel:#101b17;
  --panel2:#15231d;
  --felt:#19452f;
  --felt-dark:#0f2f21;
  --cream:#f2eee2;
  --muted:#91a097;
  --line:rgba(255,255,255,.10);
  --gold:#e4bd62;
  --red:#c6433b;
  --green:#76c893;
}

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body {
  background:
    radial-gradient(circle at 50% -10%, #1b3328 0, transparent 38%),
    var(--bg);
  color:#f7f6f0;
}
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
.hidden { display:none !important; }
.app-shell { width:min(1440px,100%); margin:auto; padding:18px; }

.landing-card {
  width:min(620px,100%);
  margin:8vh auto;
  padding:clamp(28px,6vw,58px);
  border:1px solid var(--line);
  border-radius:32px;
  background:linear-gradient(150deg,rgba(24,40,33,.98),rgba(10,18,15,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.42);
  text-align:center;
}
.brand-mark,.brand-small span {
  display:inline-grid; place-items:center;
  background:var(--cream); color:#111;
  font-family:Georgia,serif; font-weight:900;
}
.brand-mark { width:58px;height:58px;border-radius:50%;font-size:34px;margin-bottom:24px; }
.brand-small { font-weight:900;letter-spacing:.08em;display:flex;align-items:center;gap:9px; }
.brand-small span { width:28px;height:28px;border-radius:50%;font-size:16px; }
.eyebrow { color:#8aa194;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase; }
.eyebrow.gold { color:var(--gold); }
h1 { margin:6px 0 0;font-size:clamp(64px,14vw,112px);line-height:.85;letter-spacing:-.075em; }
h2 { margin:8px 0;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em; }
.sub { margin:18px 0 36px;color:#a7b3ac;font-size:18px; }

.field { display:grid;gap:8px;text-align:left;margin:0 auto 14px; }
.field span,.meta-label { font-size:10px;font-weight:900;letter-spacing:.16em;color:#899990; }
input {
  width:100%; border:1px solid var(--line);border-radius:14px;
  background:#09100d;color:white;padding:15px 16px;outline:none;
}
input:focus { border-color:#769d84;box-shadow:0 0 0 3px rgba(118,157,132,.14); }
.landing-actions { display:grid;gap:12px; }
.join-row { display:grid;grid-template-columns:1fr auto;gap:10px; }
button {
  border:0;border-radius:13px;padding:13px 17px;font-weight:900;
  transition:transform .12s ease,filter .12s ease,opacity .12s ease;
}
button:not(:disabled):hover { transform:translateY(-1px);filter:brightness(1.05); }
.primary { background:var(--cream);color:#111; }
.primary.big { padding:17px; }
.secondary { background:#24322d;color:#f1f1ed;border:1px solid var(--line); }
.danger { background:#8f2929;color:white; }
.asshole-button { background:var(--gold);color:#241b08; }
.icon-button { padding:8px 11px;background:#1c2924;color:#dce4df;border:1px solid var(--line);font-size:12px; }
.fine-print { color:#617168;font-size:12px;margin:22px 0 0; }
.error { min-height:20px;color:#ff9990;font-size:13px; }

.topbar {
  min-height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;margin-bottom:16px;padding:0 6px;
}
.room-meta { display:flex;align-items:center;gap:9px;background:#111c18;border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 14px; }
.room-meta strong { letter-spacing:.14em;font-size:15px; }
.top-actions { display:flex;justify-content:flex-end;align-items:center;gap:8px; }
.round-pill { font-size:12px;color:#c8d1cc; }

.table-wrap { padding:4px; }
.felt-table {
  min-height:545px;position:relative;overflow:hidden;border-radius:52px;
  border:11px solid #3e291d;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.045),transparent 30%),
    radial-gradient(circle at 50% 50%,var(--felt),var(--felt-dark) 72%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 80px rgba(0,0,0,.22),
    0 30px 70px rgba(0,0,0,.28);
}
.players {
  padding:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;position:relative;z-index:2;
}
.player-seat {
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:10px 12px;border:1px solid rgba(255,255,255,.11);border-radius:16px;
  background:rgba(7,17,12,.66);backdrop-filter:blur(8px);
  transition:.18s ease;
}
.player-seat.active {
  border-color:rgba(242,238,226,.8);
  box-shadow:0 0 0 3px rgba(242,238,226,.12),0 8px 24px rgba(0,0,0,.24);
  transform:translateY(-2px);
}
.player-seat.finished { opacity:.58; }
.player-seat.offline { border-style:dashed; }
.avatar {
  flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:#d9d2bd;color:#1a1a18;font-size:12px;font-weight:1000;
}
.seat-copy { min-width:0; }
.seat-name { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:900;font-size:14px; }
.seat-meta { display:flex;gap:8px;color:#9fb0a6;font-size:11px;margin-top:2px; }
.you { font-size:8px;letter-spacing:.1em;color:#92c8a4;margin-left:4px; }
.offline-dot { color:#e3a09b; }
.role { display:inline-block;margin-top:5px;padding:3px 7px;border-radius:99px;font-size:8px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase;background:#27342f;color:#dfe8e2; }
.role-president { background:#d6ae4e;color:#211806; }
.role-asshole { background:#6c2424;color:#ffe4e0; }
.role-vice-president { background:#d5d6da;color:#1b1c1f; }
.role-vice-asshole { background:#533331;color:#f2d3ce; }
.finish { margin-top:3px;font-size:10px;color:#c7d0cb; }

.center-stage {
  position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);
  width:min(560px,82%);text-align:center;z-index:1;
}
.turn-label { font-size:10px;font-weight:1000;letter-spacing:.22em;color:#a9c0b2; }
.current-play { margin-top:8px;font-size:clamp(28px,5vw,48px);font-weight:1000;letter-spacing:-.04em; }
.message { min-height:22px;margin-top:6px;color:#bed0c4;font-size:13px; }
.pile-cards {
  min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:4px 0 0;position:relative;
}
.empty-pile {
  width:116px;height:92px;border:1px dashed rgba(255,255,255,.19);border-radius:13px;
  display:grid;grid-template-columns:1fr 1fr;place-items:center;color:rgba(255,255,255,.16);font-size:24px;
}
.empty-pile span:nth-child(2),.empty-pile span:nth-child(4) { color:rgba(216,76,70,.26); }

.pile-trail {
  width:100%;min-height:118px;display:flex;align-items:center;justify-content:center;
  gap:0;position:relative;
}
.pile-play {
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:opacity .15s ease, transform .15s ease;
}
.pile-play.previous {
  opacity:.45;transform:scale(.72);margin-right:-42px;
}
.pile-play.previous:first-child { transform:scale(.64) rotate(-3deg); }
.pile-play.current {
  opacity:1;z-index:3;margin-left:10px;
}
.pile-play.previous .mini-card { box-shadow:0 6px 14px rgba(0,0,0,.18); }

.mini-card {
  width:82px;height:116px;margin-left:-25px;border-radius:10px;background:#f4f0e6;color:#161616;
  box-shadow:0 9px 20px rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:27px;font-weight:1000;transform:rotate(calc((var(--i) - 1.5) * 4deg));
}
.mini-card:first-child { margin-left:0; }
.mini-card.red { color:#bd3431; }
.mini-card span { font-size:34px; }

.pile-rank-hint {
  margin-top:2px;padding:4px 9px;border-radius:999px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);
  color:#d7e2da;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}

.player-console { padding:18px 6px 0; }
.action-row { min-height:48px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:10px; }
.hand-header { display:flex;align-items:end;justify-content:space-between;gap:10px;padding:0 5px; }
.selection-hint { display:block;color:#84958c;font-size:11px;margin-top:3px; }
.hand-count { color:#8c9d93;font-size:12px; }
.hand {
  min-height:150px;display:flex;align-items:flex-end;justify-content:center;
  overflow-x:auto;overflow-y:hidden;padding:22px 10px 28px;
  scrollbar-width:thin;
}
.card {
  position:relative;flex:0 0 80px;width:80px;height:118px;margin-left:-13px;padding:0;
  border:3px solid transparent;border-radius:11px;background:#f7f3e8;color:#131313;
  box-shadow:0 10px 25px rgba(0,0,0,.26);
  transition:transform .14s ease,border-color .14s ease,margin .14s ease;
}
.card:first-child { margin-left:0; }
.card:hover { z-index:5;transform:translateY(-8px); }
.card.selected { z-index:6;transform:translateY(-20px);border-color:var(--gold);margin-right:4px; }
.card.red { color:#bf3733; }
.corner { position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.9;font-size:14px; }
.corner span { font-size:13px; }
.corner.top { top:8px;left:8px; }
.corner.bottom { bottom:8px;right:8px;transform:rotate(180deg); }
.card .suit { font-size:34px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); }
.action-error { text-align:center; }

.phase-card {
  margin:18px auto 0;padding:26px;width:min(900px,100%);text-align:center;
  background:linear-gradient(145deg,#17261f,#101a16);border:1px solid var(--line);border-radius:24px;
}
.phase-card p { color:#a8b5ae; }
.trivia { border-color:rgba(228,189,98,.4); }
.answer-row { display:grid;grid-template-columns:minmax(0,460px) auto;justify-content:center;gap:10px;margin-top:18px; }

.hand-choices { display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px; }
.hand-choice {
  min-width:145px;padding:16px;background:#1b2924;color:white;border:1px solid var(--line);
  display:grid;justify-items:center;gap:7px;
}
.hand-choice:disabled { opacity:.3; }
.hand-choice span { color:#8ea197;font-size:9px;font-weight:900;letter-spacing:.14em; }
.hand-choice strong { font-size:17px; }
.card-back {
  width:54px;height:73px;border-radius:7px;border:3px solid #f1ead9;
  background:
    repeating-linear-gradient(45deg,#2f5a44 0 4px,#244835 4px 8px);
  box-shadow:inset 0 0 0 2px #173426;
}

.stats-panel {
  position:fixed;z-index:20;right:18px;top:76px;width:min(440px,calc(100vw - 36px));max-height:calc(100vh - 95px);
  overflow:auto;padding:22px;border:1px solid var(--line);border-radius:22px;background:#101a16;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.stats-head { display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:15px; }
.stats-head h2 { margin-top:3px; }
.stat-player {
  display:grid;grid-template-columns:28px 1fr;gap:4px 10px;padding:12px 0;border-top:1px solid var(--line);
}
.stat-rank { grid-row:1/3;color:#63746b;font-weight:1000;font-size:18px; }
.stat-name { font-weight:900; }
.stat-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:5px 8px;color:#90a097;font-size:10px; }
.stat-grid b { color:#f0f3f1;font-size:12px; }
.stats-note { color:#64756c;font-size:10px;border-top:1px solid var(--line);padding-top:14px; }

.event-flash {
  position:fixed;z-index:100;left:50%;top:20%;transform:translate(-50%,-20%) scale(.92);
  width:min(650px,calc(100vw - 34px));padding:19px 24px;text-align:center;border-radius:18px;
  background:rgba(8,14,11,.95);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.48);
  font-size:clamp(17px,3vw,26px);font-weight:1000;letter-spacing:-.025em;
  opacity:0;transition:.2s ease;pointer-events:none;
}
.event-flash.show { opacity:1;transform:translate(-50%,-20%) scale(1); }
.event-twoClear,.event-fourKind { border-color:#d35d51;box-shadow:0 0 0 5px rgba(211,93,81,.13),0 30px 80px rgba(0,0,0,.48); }
.event-skip { border-color:var(--gold); }
.event-trivia,.event-triviaWin { border-color:var(--gold);color:#ffe3a0; }
.event-finish,.event-roundOver { border-color:#d9d2bd; }

@media (max-width:800px) {
  .app-shell { padding:10px; }
  .topbar { grid-template-columns:1fr auto; }
  .room-meta { grid-column:1/-1;grid-row:2;justify-self:center; }
  .brand-small { font-size:12px; }
  .round-pill { display:none; }
  .felt-table { min-height:490px;border-width:7px;border-radius:30px; }
  .players { padding:12px;grid-template-columns:repeat(2,1fr); }
  .player-seat { padding:8px; }
  .avatar { width:32px;height:32px;flex-basis:32px; }
  .center-stage { top:62%; }
  .mini-card { width:65px;height:94px;margin-left:-22px;font-size:22px; }
  .mini-card span { font-size:27px; }
  .pile-cards { height:105px; }
  .hand { justify-content:flex-start;padding-left:16px; }
  .card { flex-basis:67px;width:67px;height:101px;margin-left:-10px; }
  .answer-row { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px) {
  .players { grid-template-columns:1fr 1fr;gap:6px; }
  .seat-meta,.finish { font-size:9px; }
  .seat-name { font-size:12px; }
  .felt-table { min-height:520px; }
  .center-stage { top:66%;width:88%; }
}

.new-question {
  margin-top:12px;
  font-size:12px;
}


/* v2.1 mobile-first polish */
body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

button,
.card,
.hand-choice {
  touch-action: manipulation;
}

.hand {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.card {
  scroll-snap-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-action-dock {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 12;
  padding: 10px;
  border-radius: 18px;
  background: rgba(9,17,14,.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.round-results {
  margin: 18px auto 0;
  width: min(760px,100%);
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg,#17261f,#101a16);
}

.round-results h2 {
  margin-bottom: 16px;
}

.round-results-list {
  display: grid;
  gap: 8px;
}

.round-result-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}

.round-place {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #26362f;
  color: #dfe8e2;
  font-weight: 1000;
}

.round-name {
  font-weight: 900;
}

.round-role {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width:800px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-shell {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  .player-console {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .mobile-action-dock {
    margin-left: -2px;
    margin-right: -2px;
  }

  .mobile-action-dock button {
    min-height: 48px;
    flex: 1 1 140px;
  }

  .hand {
    min-height: 168px;
    padding-top: 30px;
    padding-bottom: 24px;
  }

  .card {
    flex-basis: 74px;
    width: 74px;
    height: 111px;
  }

  .card.selected {
    transform: translateY(-16px);
  }

  .turn-label {
    font-size: 11px;
  }

  .current-play {
    font-size: clamp(30px,8vw,44px);
  }
}

@media (max-width:540px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    padding: 8px 4px 10px;
    background: linear-gradient(to bottom, rgba(9,17,14,.96), rgba(9,17,14,.78), transparent);
    backdrop-filter: blur(8px);
  }

  .felt-table {
    min-height: 500px;
  }

  .players {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .player-seat {
    min-width: 0;
  }

  .action-row {
    gap: 8px;
  }

  .mobile-action-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    margin: 0;
  }

  .mobile-action-dock:has(button:not(.hidden)) {
    display: flex;
  }

  .round-result-row {
    grid-template-columns: 34px 1fr;
  }

  .round-role {
    grid-column: 2;
  }

  .answer-row {
    position: sticky;
    bottom: calc(72px + env(safe-area-inset-bottom));
    background: #17261f;
    padding-top: 8px;
  }
}

@media (orientation: landscape) and (max-height:520px) {
  .felt-table {
    min-height: 360px;
  }

  .players {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }

  .center-stage {
    top: 62%;
  }

  .hand {
    min-height: 132px;
  }
}


/* v2.2.3 late-join + custom trivia */
.late-join { border-color: rgba(255,255,255,.18); }
.late-join h2 { margin-bottom: 8px; }
.trivia-owner-actions, .custom-trivia-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.custom-trivia-form { margin-top:14px; padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(0,0,0,.14); }
.custom-trivia-form .field + .field { margin-top:10px; }
.custom-trivia-form input { width:100%; }
@media (max-width:540px) {
  .trivia-owner-actions > button, .custom-trivia-actions > button { flex:1 1 100%; }
}


/* v2.2.5 room management */
.room-panel { right:18px; left:auto; }
.room-actions-stack { display:flex; flex-direction:column; gap:12px; }
.host-controls { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.host-controls .field { margin:0; }
.host-controls select { width:100%; min-height:44px; border-radius:10px; border:1px solid var(--line); background:#0c1612; color:#fff; padding:0 12px; }
.danger { background:#8f2f2f; color:#fff; }
.danger-outline { background:transparent; color:#ffd5d5; border:1px solid #814343; }
@media (max-width:700px) {
  .room-panel { left:12px; right:12px; }
  .host-controls { grid-template-columns:1fr; }
}

.game-log { max-height: 180px; overflow:auto; display:grid; gap:6px; }
.game-log-row { padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.06); font-size:.9rem; }
.game-log-row.muted { opacity:.6; }

.bot-controls { display:grid; gap:8px; padding:12px 0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.bot-button-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
@media(max-width:520px){ .bot-button-row{grid-template-columns:1fr;} }

.log-panel { z-index: 35; }
.log-panel .game-log { max-height: min(60vh, 520px); overflow:auto; }

@media(max-width:600px){
  .pile-cards { min-height:118px; }
  .pile-trail { min-height:98px; }
  .pile-play.previous { transform:scale(.60); margin-right:-50px; }
  .pile-play.previous:first-child { transform:scale(.54) rotate(-3deg); }
  .pile-play.current { transform:scale(.84); margin-left:2px; }
  .pile-rank-hint { margin-top:-4px;font-size:9px; }
}