:root {
  --bg: #0f1420;
  --panel: #1a2233;
  --panel-2: #202b40;
  --line: rgba(255, 255, 255, 0.12);
  --text: #eef1f6;
  --text-dim: #9aa6bb;
  --accent: #ffd633;
  --r: 16px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --team-0: #e0473c;
  --team-1: #3b7fe0;
  --team-2: #3fb56b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* ---------- Home ---------- */
/* justify-content:flex-start (not center) so that if a very short/zoomed viewport
   still can't fit everything, it's the bottom that scrolls off first rather than
   the top getting clipped by a centered overflow — and overflow-y:auto is a safety
   net for that case, though the sizing below is tuned to avoid ever needing it on a
   normal phone screen. */
#screen-home { align-items: center; justify-content: flex-start; overflow-y: auto; padding: 12px; padding-top: calc(12px + var(--safe-t)); padding-bottom: calc(12px + var(--safe-b)); gap: 8px; text-align: center; }
.home-logo { font-size: 26px; line-height: 1; }
.home-title { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.home-version { color: var(--text-dim); font-size: 11px; }
.home-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.home-card h3 { margin: 0; font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
input[type=text] {
  width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 16px;
}
input[type=text]:focus { outline: 2px solid var(--accent); }
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; padding: 7px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-weight: 600; font-size: 13px;
}
.seg button.active { background: var(--accent); color: #14161c; border-color: var(--accent); }
.btn {
  padding: 9px 16px; border-radius: 12px; border: none; font-weight: 700; font-size: 14.5px;
  background: var(--accent); color: #14161c;
}
.btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; }

/* ---------- Lobby ---------- */
#screen-lobby { padding: 20px; padding-top: calc(20px + var(--safe-t)); gap: 14px; }
.lobby-code { font-size: 34px; font-weight: 800; letter-spacing: 4px; text-align: center; padding: 14px; background: var(--panel); border-radius: var(--r); border: 1px solid var(--line); }
.team-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
/* Team columns: left team, right team (a third team, if any, sits between them) —
   picking a team visually moves your name into that team's column, and tapping a
   team's own color swatch (only while you're a member of it) opens the color wheel. */
.lobby-teams { display: flex; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; }
.lobby-team {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 8px; display: flex; flex-direction: column; gap: 10px;
}
.lobby-team-header { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lobby-team-swatch {
  width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.5);
}
.lobby-team-name { font-weight: 700; font-size: 13.5px; text-align: center; }
.lobby-team-players { display: flex; flex-direction: column; gap: 6px; min-height: 20px; }
.lobby-player-chip {
  background: var(--panel-2); border-radius: 10px; padding: 8px 6px;
  font-size: 12.5px; font-weight: 600; text-align: center; word-break: break-word;
}
.lobby-team-join { font-size: 12.5px; padding: 8px 6px; margin-top: auto; }
.lobby-timer-block {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.lobby-timer-block h3 { margin: 0; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.lobby-actions { display: flex; gap: 10px; }
.seg button:disabled { opacity: 0.5; }
.sheet-title { margin: 0 0 14px; text-align: center; font-size: 16px; }
.color-wheel-wrap { display: flex; justify-content: center; margin: 4px 0 18px; }
#color-wheel-canvas { border-radius: 50%; touch-action: none; }

/* ---------- Game ---------- */
#screen-game { }
/* padding-right clears the kebab button, which is position:fixed at top-right on
   every screen (z-index 70, above this bar's own 20) — without it, the room code
   sitting at this bar's right edge renders straight underneath the button. */
.game-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; padding-right: 60px; padding-top: calc(10px + var(--safe-t)); background: var(--panel); border-bottom: 1px solid var(--line); z-index: 20; }
.turn-banner { font-weight: 700; font-size: 14.5px; }
.turn-banner .team-dot { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.game-room-code {
  font-weight: 700; font-size: 13px; letter-spacing: 2px;
  color: var(--text-dim); white-space: nowrap;
}
/* Floating HUD bubble over the board, ported from HexColony's board-hud: a white
   pill with its own shadow/blur, sitting above the canvas rather than living in the
   nav strip. pointer-events: none so it never steals a tap meant for the board. */
.turn-timer {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 22; pointer-events: none;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(13, 27, 40, 0.14);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
  color: #22262e; min-width: 30px; text-align: center;
}
.turn-timer.low { color: #b8302a; animation: timer-tick 1s steps(2) infinite; }
@keyframes timer-tick { 50% { opacity: 0.45; } }
.players-strip {
  display: flex; gap: 14px; overflow-x: auto; padding: 7px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); z-index: 19;
}
.player-chip { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: var(--text-dim); padding: 3px 8px; border-radius: 999px; position: relative; }
.player-chip .team-dot { width: 9px; height: 9px; }
.player-chip .name { font-weight: 700; color: var(--text); }
.pip { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.pip + .pip { margin-left: 2px; }
/* Whose turn it is, visible to everyone at the table on the player's own name chip —
   ported from HexColony's chip-turn-pulse: a static ring plus a ::after with the
   brighter version baked in, only its opacity animating, so the pulse repaints
   nothing once it's past the first paint. */
.player-chip.up {
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .38), 0 0 10px 2px rgba(255, 255, 255, .18);
}
.player-chip.up::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px #fff, 0 0 12px 3px rgba(255, 255, 255, .5);
  opacity: 0;
  animation: chip-turn-pulse 1.15s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chip-turn-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .player-chip.up::after { animation: none; opacity: 1; }
}
#board-wrap { flex: 1; position: relative; overflow: hidden; background: #0a0e17; }
#board-canvas { display: block; width: 100%; height: 100%; }
.zoom-controls { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 15; }
.zoom-controls button { width: 40px; height: 40px; border-radius: 50%; background: rgba(20,26,38,0.85); border: 1px solid var(--line); color: var(--text); font-size: 20px; }

.hand-tray { background: var(--panel); border-top: 1px solid var(--line); padding: 10px 12px calc(10px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; position: relative; }
/* Whose turn it is, on the one part of the screen your thumbs are already resting
   on — same white, same pulse as .player-chip.up, ported from HexColony's
   tray.my-turn. Only shows on the active player's own device. */
.hand-tray.my-turn {
  z-index: 6;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .34), 0 0 18px 2px rgba(255, 255, 255, .22);
}
.hand-tray.my-turn::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 4px #fff, 0 0 22px 4px rgba(255, 255, 255, .5);
  opacity: 0;
  animation: chip-turn-pulse 1.15s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hand-tray.my-turn::after { animation: none; opacity: 1; }
}
/* Every hand is at most 7 cards (2-team game). Width/height are set inline
   by JS (measured against the tray's actual width) so every card always
   fits with no scrolling, regardless of flexbox/aspect-ratio quirks across
   browsers — these are just sane fallbacks before JS sizes them. */
.hand-scroller { display: flex; gap: 6px; justify-content: center; }
.hand-card {
  position: relative; flex: 0 0 auto; width: 52px; aspect-ratio: 0.72; border-radius: 8px; background: #f4efe4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid transparent; font-weight: 700; color: #22262e;
}
.hand-card.red { color: #b8302a; }
.hand-card .r { font-size: clamp(16px, 6.4vw, 32px); line-height: 1; }
.hand-card .s { font-size: clamp(18px, 7.2vw, 36px); line-height: 1; }
.hand-card.dead { opacity: 0.4; }
.hand-card.jack-wild { border-color: #3b7fe0; }
.hand-card.jack-remove { border-color: #e0473c; }
.hand-card.jack-wild:not(.dead) { animation: pulse-blue 1.3s ease-in-out infinite; }
.hand-card.jack-remove:not(.dead) { animation: pulse-red 1.3s ease-in-out infinite; }
@keyframes pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 127, 224, 0.6); background-color: #f4efe4; }
  50% { box-shadow: 0 0 0 8px rgba(59, 127, 224, 0); background-color: #3b7fe0; }
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 71, 60, 0.6); background-color: #f4efe4; }
  50% { box-shadow: 0 0 0 8px rgba(224, 71, 60, 0); background-color: #e0473c; }
}
.jack-badge {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800;
  color: #fff; border: 2px solid var(--panel);
}
.jack-badge.wild { background: #3b7fe0; }
.jack-badge.remove { background: #e0473c; }
.hand-footer { display: flex; align-items: center; justify-content: space-between; }
.undo-bar { display: flex; align-items: center; justify-content: space-between; background: rgba(255,214,51,0.12); border: 1px solid var(--accent); border-radius: 12px; padding: 8px 10px; }
.undo-bar span { font-weight: 700; font-size: 13.5px; }
.undo-bar .btn { padding: 8px 16px; }
.hand-footer .hint { color: var(--text-dim); font-size: 13px; }

.win-overlay { position: fixed; inset: 0; background: rgba(10,14,23,0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 100; text-align: center; padding: 24px; }
.win-overlay h2 { font-size: 30px; margin: 0; }
.stats-overlay { justify-content: flex-start; padding-top: calc(28px + var(--safe-t)); }
/* Drag this down to peek at the board underneath (the winning sequences are still
   glowing on it), drag or tap it again to bring the stats screen back up — see the
   pointer handling wired to #win-overlay-handle in app.js. */
.win-overlay-handle {
  width: 100%; padding: 4px 0 16px; display: flex; justify-content: center;
  cursor: grab; touch-action: none; flex-shrink: 0;
}
.win-overlay-handle::before { content: ''; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.35); }

/* ---------- Win celebration: winning sequences glow on the board (see
   BoardView.celebrateSequences) while this shows the winners' names over a burst of
   confetti, for the few seconds before the stats screen takes over. ---------- */
.win-celebrate {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.win-celebrate-names {
  position: relative; z-index: 2;
  padding: 18px 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(13, 27, 40, 0.14);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  font-size: clamp(22px, 7vw, 40px); font-weight: 800; color: #22262e;
  text-align: center; max-width: calc(100% - 32px);
  animation: win-names-in .32s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes win-names-in { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.confetti-field { position: absolute; inset: 0; z-index: 1; }
.confetti-piece {
  position: absolute; top: -20px; width: 9px; height: 15px;
  opacity: 0.95;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(115vh) rotate(var(--spin, 480deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .win-celebrate-names { animation: none; }
  .confetti-piece { display: none; }
}
.stats-duration { color: var(--text-dim); margin: 0; font-size: 14px; }
.stats-scroll { width: 100%; max-width: 420px; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.stats-section h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); text-align: left; }
.stats-line-row, .stats-player-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; text-align: left;
}
.stats-line-row .team-dot { width: 10px; height: 10px; flex-shrink: 0; }
.stats-line-row span:first-child, .stats-player-row span:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.stats-player-row .counts { color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.stats-votes { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.stats-overlay .sheet-actions { width: 100%; max-width: 420px; }

/* ---------- Big "X's turn" announcement ----------
   Same white pill/blur/shadow HUD language as the turn-timer bubble (ported from
   HexColony's board-hud), just larger and centered rather than a small badge, since
   this is meant to be unmissable rather than a permanent status line. */
.turn-announce {
  position: absolute; inset: 0; z-index: 35;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.turn-announce-text {
  padding: 16px 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(13, 27, 40, 0.14);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  font-size: clamp(22px, 7vw, 40px); font-weight: 800; color: #22262e;
  text-align: center;
  opacity: 0; transform: scale(0.8);
  transition: opacity .22s ease, transform .22s ease;
}
.turn-announce.show .turn-announce-text { opacity: 1; transform: scale(1); }

/* ---------- Card-played zoom: large in the center, then flies down to the
   exact board cell it landed on. Position/size are set inline in JS from the
   board's own screen coordinates (BoardView.toScreen), since only the canvas
   knows where a cell actually is on screen at the current pan/zoom. ---------- */
.card-fly {
  position: absolute; z-index: 36; left: 50%; top: 42%;
  width: min(66vw, 66vh); aspect-ratio: 0.72; border-radius: 18px; background: #f4efe4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; color: #22262e; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition: transform .6s cubic-bezier(.3,.1,.3,1), left .6s cubic-bezier(.3,.1,.3,1), top .6s cubic-bezier(.3,.1,.3,1), opacity .16s ease .44s;
  opacity: 0;
  pointer-events: none;
}
/* Spins in large and to a stop (see the appear-spin keyframes below), holds still so
   the card is actually readable, then .landing takes over — the ordinary transition
   above carries transform (now including two more full rotate() turns) and left/top
   together down to the exact cell it landed on, over a slower .6s so the spin is
   actually visible instead of being lost in a quick shrink; opacity only starts
   fading in the last stretch of that, once it's nearly at the cell. */
.card-fly.show { opacity: 1; animation: card-fly-spin-in .5s cubic-bezier(.2,.7,.3,1) forwards; }
.card-fly.landing { transform: translate(-50%, -50%) scale(0.06) rotate(-720deg); opacity: 0; }
.card-fly.red { color: #b8302a; }
.card-fly .r { font-size: min(20vw, 20vh); }
.card-fly .s { font-size: min(22vw, 22vh); }
/* A wild/removal play shows the actual illustrated jack instead of a plain rank/suit
   face — the image already looks like a full card, so the plain-card background and
   shadow this element normally draws behind the rank/suit text would just double up
   with it. */
.card-fly.image-mode { background: transparent; box-shadow: none; }
.card-fly-img { width: 100%; height: 100%; object-fit: contain; border-radius: 18px; display: block; }
@keyframes card-fly-spin-in {
  from { transform: translate(-50%, -50%) scale(0.3) rotate(720deg); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .turn-announce-text, .card-fly { transition: opacity .12s linear; }
  .card-fly.show { animation: none; }
  .card-fly.landing { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

/* ---------- Kebab menu ---------- */
.kebab-wrap { position: fixed; top: calc(var(--safe-t) + 10px); right: 12px; z-index: 70; }
.kebab-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(5,18,32,0.72); border: 1px solid var(--line); color: var(--text); backdrop-filter: blur(8px); }
.kebab-btn svg { width: 22px; height: 22px; fill: currentColor; }
.kebab-menu { position: absolute; top: 48px; right: 0; min-width: 172px; padding: 6px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; animation: kebab-in .14s ease-out; }
@keyframes kebab-in { from { opacity: 0; transform: translateY(-6px); } }
.kebab-menu button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; text-align: left; color: var(--text); background: none; border: none; }
.kebab-menu button span { font-size: 16px; width: 20px; text-align: center; }
.kebab-menu button:active { background: rgba(255,255,255,0.1); }

/* ---------- Sheets / modals ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop[hidden] { display: none; }
.sheet { background: var(--panel); border-radius: 20px 20px 0 0; padding: 22px; width: 100%; max-width: 480px; padding-bottom: calc(22px + var(--safe-b)); }
.about-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; }
.about-icon { border-radius: 22%; }
.about-name { margin: 6px 0 0; font-size: 22px; font-weight: 800; }
.about-ver { color: var(--text-dim); margin: 0; }
.about-credit { color: var(--text-dim); margin: 0; font-size: 14px; }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions .btn { flex: 1; }

/* ---------- Update / install banners ---------- */
.top-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 90; padding: 12px 16px; padding-top: calc(12px + var(--safe-t)); background: var(--accent); color: #14161c; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.top-banner[hidden] { display: none; }
.top-banner button { padding: 8px 14px; border-radius: 10px; border: none; background: #14161c; color: #fff; font-weight: 700; }

.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); background: rgba(15,20,32,0.95); border: 1px solid var(--line); color: var(--text); padding: 10px 16px; border-radius: 12px; z-index: 95; font-size: 14px; }
.toast[hidden] { display: none; }