/* =====================================================================
   Bir Kart Oyunu — Online web client styles
   Theme & table/card design reused from the local prototype, extended
   with home / name / lobby / reconnection UI. Vibrant youth-pop,
   mobile-portrait first + desktop, Turkish UI, big tap targets.
   ===================================================================== */

:root {
  --red: #ff4757;
  --red-d: #d62c3c;
  --yellow: #ffb300;
  --yellow-d: #e09400;
  --green: #2ed573;
  --green-d: #1aa856;
  --blue: #2e86ff;
  --blue-d: #1d63cc;
  --wild-a: #ff4757;
  --ink: #1b1140;
  --paper: #fff;
  --bg-1: #4a2c8f;
  --bg-2: #7b3fb5;
  --bg-3: #2b1a5e;
  --gold: #ffd93d;
  --terra: #c8643c;       /* Mangala — earthen terracotta board */
  --terra-d: #9c4a2a;
  --teal: #1f9e92;        /* Mangala — teal stones */
  --navy: #1e2a52;        /* King — navy card */
  --bordo: #8a1d34;       /* King — bordo accent */
  --shadow: 0 8px 0 rgba(0, 0, 0, 0.18), 0 12px 26px rgba(0, 0, 0, 0.28);
  --r-card: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--paper);
  background:
    radial-gradient(120% 90% at 20% 0%, var(--bg-2) 0%, transparent 55%),
    radial-gradient(120% 90% at 90% 10%, #c13ea8 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-1), var(--bg-3));
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
h1, h2, h3, .display { font-family: 'Baloo 2', cursive; }

/* Visible focus for keyboard users (accessibility) */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- App shell ---------- */
#app {
  position: relative;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  overflow: hidden;
}
/* Desktop: let the app breathe horizontally so the game isn't a thin strip.
   Menu/lobby cards stay compact (capped via .homeCard); only the in-game
   table is allowed to use the extra room (see .game / .table overrides). */
@media (min-width: 700px) {
  #app {
    max-width: 900px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 4px 2px 6px;
  flex: 0 0 auto;
}
.brand {
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 26px;
  letter-spacing: .5px; line-height: 1;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; flex: 0 1 auto; min-width: 0;
}
.brand .dot, .homeLogo .dot { color: var(--gold); }
.iconbtn {
  border: none; cursor: pointer; color: var(--ink);
  background: var(--paper); width: 40px; height: 40px; border-radius: 50%;
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 20px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18); transition: transform .08s;
  flex: 0 0 auto;
}
.iconbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }

/* ---------- Screen switching ---------- */
.screen { display: none; flex: 1; min-height: 0; flex-direction: column; }
.screen.show { display: flex; animation: fade .25s; will-change: transform, opacity; }

/* ---------- Home / Name / Lobby cards ---------- */
.home, .name, .lobby, .browse, .recent { align-items: center; justify-content: center; overflow-y: auto; }

/* =====================================================================
   HUB / GAME-SELECTION LANDING — redesign (scoped to #hubScreen)
   ---------------------------------------------------------------------
   DESIGN PLAN
   Subject: a Turkish online card-games house — playful but premium; the
   world of felt tables, four suits/colors and a freshly dealt hand.

   Palette (reuses the shipped game tokens so the hub never clashes with
   the in-game Çak brand when you click in):
     --red    #ff4757   Çak/heart accent (live card art)
     --yellow #ffb300   special-card accent
     --green  #2ed573   suit accent
     --blue   #2e86ff   suit accent
     --gold   #ffd93d   premium hairline + primary CTA
     felt vignette: existing --bg-1/2/3 purple field + a painted spotlight
                    and darkened table edge for real depth (not flat).

   Type roles (Baloo 2 + Nunito, already self-hosted):
     kicker   Nunito 800, 12px, uppercase, +2px tracking  (eyebrow)
     logo     Baloo 2 800, clamp(40–60px)                 (display)
     tagline  Nunito 700, 15–16px                          (lead)
     titles   Baloo 2 800, 26px                            (card titles)
     CTA      Baloo 2 800, gold pill                        (primary action)

   Layout: a real hero (fanned hand of cards + kicker + logo + lead) over
   a felt panel, then a disciplined card-tile grid (1-col mobile → 3-col
   desktop, centered max-width).

   SIGNATURE ELEMENT: an animated *fanned hand of four Çak-style cards*
   (.heroFan) drawn in pure CSS — red/yellow/green/blue faces with the
   tilted oval glyph + corner index that mirror the in-game .card, dealt
   out on load. This single bold moment ties the hub to the game and is
   unmistakably "card house," not a generic 3-tile template. All non-
   essential motion is gated behind prefers-reduced-motion (below).
   ===================================================================== */
.hub { align-items: center; justify-content: center; overflow-y: auto; padding: 16px 14px; }
/* When the landing is taller than the viewport (short phones), stop centering
   — anchor to the top so the logo never hides behind the top bar; the screen
   scrolls naturally instead. */
@media (max-height: 900px), (max-width: 560px) {
  .hub { justify-content: flex-start; padding-top: 8px; }
}

/* ---------------------------------------------------------------------
   SHORT-VIEWPORT SCROLL FIX (hub only)
   The app shell is built for the in-game table: body{overflow:hidden} +
   #app{height:100dvh;overflow:hidden} pin the viewport so the felt table
   never scrolls. But on the HUB that same shell turns the inner .hub
   screen into the only scroller — on short viewports the page/body can't
   scroll and only the inner container moves (a nested scroll trap).
   Scoped via :has(#hubScreen.show) (same pattern as the rules above) so
   ONLY the hub opts into natural document scroll. Every other screen
   (home / lobby / game / browse) keeps the fixed-viewport shell intact.
   --------------------------------------------------------------------- */
body:has(#hubScreen.show) {
  overflow-x: hidden; overflow-y: auto;
  /* SEAM/BAND FIX: the base `body` background is a viewport-sized gradient with
     the default `repeat`. On the hub the document grows past one viewport (now
     10+ game cards) and #app becomes height:auto, so that propagated gradient
     TILES vertically — a hard horizontal seam where linear-gradient(160deg,
     var(--bg-1), var(--bg-3)) restarts (dark bg-3 → lighter bg-1 block).
     Same failure the legal pages already solve: repaint the gradient as an
     iOS-safe position:fixed layer (below) and give the body itself the solid
     terminal color (the gradient's dark end) so there is no tiling background
     and any overflow past the fixed field is invisible. `background-attachment:
     fixed` is intentionally NOT used — it renders zoomed/janky on iOS Safari. */
  background: var(--bg-3);
}
/* iOS-safe fixed full-viewport gradient field behind the scrolling hub.
   Reuses the EXACT radial+linear stack from the base `body` rule; z-index:-1
   keeps it under the #app spotlight (::before, z-index:0) and content. */
body:has(#hubScreen.show)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--bg-2) 0%, transparent 55%),
    radial-gradient(120% 90% at 90% 10%, #c13ea8 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-1), var(--bg-3));
}
#app:has(#hubScreen.show) {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}
/* With the shell now growing to fit content, the hub screen itself must
   flow in the document (not act as its own bounded scroll region) so the
   whole page scrolls as one. Tall viewports still center via min-height
   + justify-content; short viewports simply extend the page. */
#hubScreen.hub {
  flex: 1 0 auto;
  min-height: 0;
  overflow-y: visible;
}
.hubInner {
  width: 100%; max-width: 920px; text-align: center;
  animation: rise .3s cubic-bezier(.3, 1.4, .5, 1);
  will-change: transform, opacity;
}
/* The hub is a full-bleed landing screen, not the in-game table, so let it
   use more horizontal room than the #app cap (900px) allows — scoped via
   :has() so the game table width is never affected. */
@media (min-width: 700px) {
  #app:has(#hubScreen.show) { max-width: 1040px; }
}
/* Painted depth: a soft top spotlight over the purple field so the hub
   reads as a lit felt table rather than a flat gradient. Scoped to the
   hub screen only; pointer-events:none so it never blocks taps. */
#app:has(#hubScreen.show)::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% -8%, rgba(255, 217, 61, .14), transparent 60%),
    radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, .38), transparent 60%);
}
#hubScreen .hubInner { position: relative; z-index: 1; }

/* ---- Hero ---- */
.hubHero { margin: 0 auto 22px; }
.hubKicker {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--gold); margin: 2px 0 10px; opacity: .95;
}
.hubLogo {
  font-size: clamp(40px, 9vw, 60px); line-height: .98; margin: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 10px 26px rgba(0, 0, 0, .32);
}
.hubTag {
  font-weight: 700; font-size: clamp(15px, 3.4vw, 16.5px); line-height: 1.4;
  opacity: .92; margin: 10px auto 0; max-width: 30ch; text-wrap: balance;
}
.hubTag b { color: var(--gold); font-weight: 800; }

/* ---- Signature: fanned hand of Çak-style cards (pure CSS, no images) ---- */
.heroFan {
  position: relative; height: 118px; margin: 0 auto 4px;
  width: 220px; display: flex; justify-content: center; align-items: flex-end;
}
.fanCard {
  position: absolute; bottom: 0; width: 76px; height: 110px;
  border-radius: 14px; border: 3px solid #fff;
  display: grid; place-items: center; overflow: hidden;
  background: var(--cc, #888);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .32);
  transform-origin: bottom center;
}
.fanCard.k-red    { --cc: var(--red);    --ccd: var(--red-d); }
.fanCard.k-yellow { --cc: var(--yellow); --ccd: var(--yellow-d); }
.fanCard.k-green  { --cc: var(--green);  --ccd: var(--green-d); }
.fanCard.k-blue   { --cc: var(--blue);   --ccd: var(--blue-d); }
.fanCard::before {
  content: ""; position: absolute; inset: 5px; border-radius: 10px;
  background:
    radial-gradient(ellipse at 28% 20%, rgba(255, 255, 255, .42), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .14));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
  pointer-events: none;
}
.fanGlyph {
  position: relative; z-index: 2; font-family: 'Baloo 2', cursive; font-weight: 800;
  width: 48px; height: 70px; border-radius: 50%/40%;
  background: #fff; color: var(--ccd, #333);
  display: grid; place-items: center; transform: rotate(-18deg);
  font-size: 26px; line-height: 1;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .06), 0 2px 5px rgba(0, 0, 0, .12);
}
/* Resting fan layout (also the reduced-motion final state) */
.fanCard:nth-child(1) { transform: rotate(-15deg) translateX(-58px) translateY(6px); }
.fanCard:nth-child(2) { transform: rotate(-5deg)  translateX(-20px) translateY(-4px); }
.fanCard:nth-child(3) { transform: rotate(5deg)   translateX(20px)  translateY(-4px); }
.fanCard:nth-child(4) { transform: rotate(15deg)  translateX(58px)  translateY(6px); }
/* Compact the hero on short / phone viewports so the logo always clears the
   top bar and the whole landing fits without clipping. */
@media (max-height: 740px), (max-width: 460px) {
  .heroFan { height: 96px; width: 188px; margin-bottom: 2px; }
  .fanCard { width: 64px; height: 92px; }
  .fanGlyph { width: 40px; height: 58px; font-size: 22px; }
  .fanCard:nth-child(1) { transform: rotate(-15deg) translateX(-48px) translateY(5px); }
  .fanCard:nth-child(2) { transform: rotate(-5deg)  translateX(-16px) translateY(-3px); }
  .fanCard:nth-child(3) { transform: rotate(5deg)   translateX(16px)  translateY(-3px); }
  .fanCard:nth-child(4) { transform: rotate(15deg)  translateX(48px)  translateY(5px); }
  .hubHero { margin-bottom: 16px; }
  .hubLogo { font-size: clamp(34px, 8.5vw, 46px); }
  .gameCardArt { height: 76px; }
}
/* Deal-in: cards start stacked at center, fan out staggered on load */
.fanCard { animation: dealIn .55s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.fanCard:nth-child(1) { animation-delay: .05s; }
.fanCard:nth-child(2) { animation-delay: .14s; }
.fanCard:nth-child(3) { animation-delay: .23s; }
.fanCard:nth-child(4) { animation-delay: .32s; }
@keyframes dealIn {
  from { transform: rotate(0) translateX(0) translateY(34px) scale(.92); opacity: 0; }
}

/* ---- Card-tile grid ---- */
.hubGrid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  max-width: 340px; margin: 0 auto;
}
@media (min-width: 880px) {
  .hubGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px; max-width: none;
  }
}
.gameCard {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; cursor: pointer; isolation: isolate;
  font-family: 'Baloo 2', cursive; color: var(--paper);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .07));
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 22px; padding: 26px 22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 14px 34px rgba(0, 0, 0, .34);
  transition: transform .14s cubic-bezier(.3, 1.2, .5, 1), box-shadow .18s, border-color .18s;
}
button.gameCard { width: 100%; -webkit-appearance: none; appearance: none; }
a.gameCard { width: 100%; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* The live (Çak) tile earns a gold hairline top edge — premium signal that
   distinguishes the playable game from the "Yakında" tiles. */
.gameCard.live { border-color: rgba(255, 217, 61, .4); }
.gameCard.live::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gameCard.live:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 217, 61, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 22px 46px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 217, 61, .25);
}
.gameCard.live:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px rgba(0, 0, 0, .34); }
.gameCard:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gameCardArt {
  height: 88px; display: grid; place-items: center; margin-bottom: 2px;
}
.gameCardTitle { font-weight: 800; font-size: 26px; line-height: 1.1; }
.gameCardTag {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px;
  line-height: 1.35; opacity: .85;
  max-width: 24ch; margin: 0 auto 4px; text-wrap: balance;
}
.gameCard:not(.soon) .gameCardTag { margin-bottom: 12px; }
@media (min-width: 880px) {
  .gameCard { padding-left: 20px; padding-right: 20px; }
  .gameCardTag { max-width: none; text-wrap: pretty; font-size: 13.5px; }
}
.gameCardPlay {
  margin-top: auto; font-weight: 800; font-size: 15px; color: var(--ink);
  background: linear-gradient(180deg, #ffe169, var(--gold));
  border-radius: 999px; padding: 9px 24px;
  box-shadow: 0 4px 0 var(--yellow-d), 0 8px 16px rgba(0, 0, 0, .28);
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .12s, box-shadow .12s;
}
.gameCard.live:hover .gameCardPlay { transform: translateY(-1px); box-shadow: 0 5px 0 var(--yellow-d), 0 12px 20px rgba(0, 0, 0, .3); }
.gameCard.soon { cursor: default; }
.gameCard.soon .gameCardArt { opacity: .9; }
.soonBadge {
  position: absolute; top: 12px; right: 12px;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink); background: var(--yellow);
  border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 3px 0 var(--yellow-d);
}

/* ---- Per-game card art (CSS, no image files) ---- */
/* Shared mini-card primitive used by all three tiles' art. */
.artCard {
  position: relative; width: 50px; height: 72px; border-radius: 10px;
  border: 2.5px solid #fff; display: grid; place-items: center; overflow: hidden;
  background: var(--cc, #fff);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.artCard.k-red   { --cc: var(--red);   --ccd: var(--red-d); }
.artCard.k-green { --cc: var(--green); --ccd: var(--green-d); }
.artCard.k-blue  { --cc: var(--blue);  --ccd: var(--blue-d); }
.artCard.dark    { --cc: #2a2342; }     /* Batak — dark trick-taking card */
.artCard.pale    { --cc: #fff; }        /* Pişti — paper-white pairing cards */
.artCard i {
  position: relative; z-index: 2; font-family: 'Baloo 2', cursive; font-weight: 800;
  font-style: normal; font-size: 22px; line-height: 1;
  width: 32px; height: 46px; border-radius: 50%/40%;
  background: #fff; color: var(--ccd, #2a2342);
  display: grid; place-items: center; transform: rotate(-16deg);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
}
.artCard.dark i { background: transparent; box-shadow: none; transform: none; color: #fff; font-size: 30px; }
.artCard.pale i.suit.red { background: transparent; box-shadow: none; transform: none; color: var(--red); font-size: 28px; }
.artCard i.suit { font-family: 'Nunito', sans-serif; }
/* Çak: a tight fan of three colored cards */
.artFan { position: relative; width: 96px; height: 80px; }
.artFan .artCard { position: absolute; bottom: 4px; left: 50%; margin-left: -25px; transform-origin: bottom center; }
.artFan .artCard:nth-child(1) { transform: rotate(-16deg) translateX(-22px); }
.artFan .artCard:nth-child(2) { transform: rotate(0deg)   translateY(-4px); z-index: 1; }
.artFan .artCard:nth-child(3) { transform: rotate(16deg)  translateX(22px); }
.gameCard.live:hover .artFan .artCard:nth-child(1) { transform: rotate(-22deg) translateX(-28px); }
.gameCard.live:hover .artFan .artCard:nth-child(3) { transform: rotate(22deg)  translateX(28px); }
.artFan .artCard { transition: transform .2s cubic-bezier(.3, 1.2, .5, 1); }
/* Pişti: two pale cards meeting as a matched pair */
.artPair { position: relative; width: 96px; height: 80px; }
.artPair .artCard { position: absolute; bottom: 4px; left: 50%; margin-left: -25px; }
.artPair .artCard:nth-child(1) { transform: rotate(-10deg) translateX(-14px); }
.artPair .artCard:nth-child(2) { transform: rotate(10deg)  translateX(14px); z-index: 1; }
/* Batak: a single dark spade card, centered */
.artCard.solo { width: 54px; height: 76px; }
/* King: a navy trick-taking card carrying a bordo crown "K" */
.artCard.navy { --cc: var(--navy); }
.artCard.navy i {
  background: transparent; box-shadow: none; transform: none;
  color: var(--gold); font-size: 30px; font-family: 'Baloo 2', cursive;
}
.artCard.navy i.suit { font-family: 'Nunito', sans-serif; font-size: 28px; }
.artCard.navy i.suit.red { color: #ff6b81; }   /* King — readable bordo/red heart on navy */
/* Mangala: a terracotta board of pits with teal stones (no cards) */
.artPits {
  position: relative; width: 96px; height: 64px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: center;
  padding: 9px 11px; border-radius: 14px;
  background: linear-gradient(160deg, var(--terra), var(--terra-d));
  border: 2.5px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.artPits .pit {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(0,0,0,.05), rgba(0,0,0,.32));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45);
  display: grid; place-items: center;
}
.artPits .pit b {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6fe0d4, var(--teal));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.gameCard.live:hover .artPits { transform: translateY(-2px); transition: transform .2s cubic-bezier(.3, 1.2, .5, 1); }

/* Back-to-hub affordance on the Çak home card */
.hubBack {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; cursor: pointer;
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 14px;
  color: var(--paper); background: rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 7px 16px; margin: 0 auto 14px 0;
  transition: transform .08s, background .15s;
}
.hubBack:hover { background: rgba(255, 255, 255, .22); }
.hubBack:active { transform: translateY(2px); }
.hubBack:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Room browser ---------- */
.browseHead { display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; }
.refreshBtn { font-size: 22px; }
.refreshBtn.spinning { animation: spin .7s linear infinite; }
.roomList {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto;
}
.roomRow {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .10); border-radius: 14px; padding: 10px 12px;
  border: 2px solid transparent; animation: pop .22s ease;
}
.roomRow .rAvatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff6b9d, #c13ea8); font-size: 17px;
}
.roomMeta { min-width: 0; text-align: left; }
.roomHost { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomSub { font-weight: 700; font-size: 12.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomCode { font-family: 'Baloo 2', cursive; letter-spacing: 1px; opacity: .65; font-size: 11.5px; }
.roomRow .roomJoin {
  width: auto; min-width: 84px; max-width: max-content; justify-self: end;
  white-space: nowrap; padding: 9px 18px; font-size: 16px; margin-top: 0;
}
.roomsEmpty { font-weight: 800; font-size: 15px; opacity: .9; margin: 10px 0 16px; }

/* ---------- Recent games feed ---------- */
.matchRow {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .10); border-radius: 14px; padding: 10px 12px;
  border: 2px solid transparent; animation: pop .22s ease;
}
.matchRow .mAvatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ffd93d, #ff9a3d); font-size: 18px;
}
.matchMeta { min-width: 0; text-align: left; }
.matchWho { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matchSub { font-weight: 700; font-size: 12.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Create-room options (segmented controls) ---------- */
.optGroup { text-align: left; margin: 14px 0; }
.optLabel { font-weight: 800; font-size: 13px; color: #41386a; margin-bottom: 8px; }
.optHint { font-size: 12.5px; font-weight: 700; color: #6c6494; margin: 8px 0 0; }
.segRow { display: flex; gap: 8px; flex-wrap: wrap; }
.seg {
  flex: 1 1 0; min-width: 64px; border: none; cursor: pointer;
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 15px;
  padding: 12px 8px; border-radius: 14px; color: #41386a;
  background: #eee7fb; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .05);
  transition: transform .08s, background .15s, color .15s, box-shadow .15s;
}
.seg.active {
  background: var(--bg-2); color: #fff;
  box-shadow: 0 4px 0 var(--bg-3);
}
.seg:active { transform: translateY(2px); }
.homeCard {
  background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 26px;
  padding: 26px 22px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  animation: rise .3s cubic-bezier(.3, 1.4, .5, 1);
  will-change: transform, opacity;
}
.homeCard.wide { max-width: 420px; }
.homeLogo {
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 54px;
  line-height: 1; margin-bottom: 6px;
}
.homeLogo.small { font-size: 30px; margin-bottom: 10px; }
.homeTag { font-weight: 700; font-size: 15px; opacity: .92; margin: 0 0 18px; }

.fieldLabel { display: block; font-weight: 800; font-size: 14px; opacity: .92; margin: 4px 0 8px; text-align: left; }
.orline {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 10px;
  color: rgba(255, 255, 255, .65); font-weight: 800; font-size: 13px;
}
.orline::before, .orline::after { content: ""; flex: 1; height: 2px; background: rgba(255, 255, 255, .18); border-radius: 2px; }

.joinRow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.codeInput {
  flex: 1 1 auto; min-width: 0; border: none; border-radius: 16px;
  background: #fff; color: var(--ink);
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 22px;
  padding: 12px 14px; text-align: center; letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
}
.codeInput::placeholder { color: #c9c2e0; letter-spacing: 3px; }
.nameInput { letter-spacing: normal; text-transform: none; margin-bottom: 12px; }
.nameInput::placeholder { letter-spacing: normal; }

.joinRow .joinBtn { width: auto; min-width: 96px; white-space: nowrap; padding: 12px 18px; margin-top: 0; font-size: 18px; }

.homeErr { color: #ffd1d1; font-weight: 800; font-size: 14px; min-height: 18px; margin: 12px 0 0; }

/* ---------- Lobby: invite + players ---------- */
.inviteBox {
  background: rgba(0, 0, 0, .22); border-radius: 18px; padding: 16px 14px;
  margin: 6px 0 16px; border: 2px solid rgba(255, 255, 255, .12);
}
.inviteLabel { font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .8; }
.codeBig {
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 44px;
  letter-spacing: 8px; color: var(--gold); margin: 4px 0 14px;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.copyBtn { margin-top: 8px; font-size: 16px; padding: 11px 16px; }
.inviteHint { font-size: 13px; opacity: .82; font-weight: 700; margin: 12px 0 0; }

.playersLabel { font-weight: 800; font-size: 14px; text-align: left; opacity: .9; margin: 4px 2px 8px; }
.playerList { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.playerRow {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .10); border-radius: 14px; padding: 9px 12px;
  font-weight: 800; font-size: 16px;
  border: 2px solid transparent;
  animation: pop .25s ease;
}
.playerRow.me { border-color: rgba(255, 217, 61, .5); background: rgba(255, 217, 61, .14); }
.playerRow .pAvatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff6b9d, #c13ea8); font-size: 17px; flex: 0 0 auto;
}
.playerRow.me .pAvatar { background: linear-gradient(135deg, #2e86ff, #2ed573); }
.playerRow .pName { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: var(--gold); color: var(--ink); flex: 0 0 auto;
}
.badge.off { background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); }
.badge.bot { background: linear-gradient(135deg, #2e86ff, #2ed573); color: #fff; }
.playerRow.bot { border-color: rgba(46, 134, 255, .35); }
.playerRow.bot .pAvatar { background: linear-gradient(135deg, #4a36a0, #2e86ff); }
.kickBotBtn {
  flex: 0 0 auto; border: none; cursor: pointer; color: #fff;
  background: var(--red); box-shadow: 0 3px 0 var(--red-d);
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 12px;
  padding: 5px 11px; border-radius: 999px; transition: transform .08s;
}
.kickBotBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-d); }

/* ---------- Moderation: report/block affordance + sheet ---------- */
/* "⋯" affordance on opponent rows (lobby) and opponent seats (game). */
.modBtn {
  flex: 0 0 auto; border: none; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .14);
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 16px; line-height: 1;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  transition: transform .08s, background .15s;
}
.modBtn:hover { background: rgba(255, 255, 255, .26); }
.modBtn:active { transform: scale(.9); }
.modBtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* In-game seats have pointer-events:none on the wrapper; re-enable for the tag's button. */
.seat .modBtn {
  pointer-events: auto;
  width: 22px; height: 22px; font-size: 13px;
  background: rgba(0, 0, 0, .3);
}
.seat .modBtn:hover { background: rgba(0, 0, 0, .45); }
/* Destructive "Engelle" button in the sheet (red, on-brand). */
.modSheet .modBlock { background: var(--red); box-shadow: 0 5px 0 var(--red-d); }
.modSheet .modBlock:active { box-shadow: 0 2px 0 var(--red-d); }
.modSheet .btn { margin-top: 12px; }
.addBotBtn { margin-top: 4px; }

.startBtn { margin-top: 4px; }
.waitHint { font-weight: 800; font-size: 14px; opacity: .85; margin: 10px 0 4px; }

/* ---------- Buttons ---------- */
.btn {
  border: none; cursor: pointer; font-family: 'Baloo 2', cursive; font-weight: 800;
  font-size: 20px; color: #fff; background: var(--green); padding: 14px 28px;
  border-radius: 16px; box-shadow: 0 5px 0 var(--green-d); transition: transform .08s, opacity .15s;
  width: 100%; margin-top: 10px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--green-d); }
.btn.alt { background: var(--blue); box-shadow: 0 5px 0 var(--blue-d); }
.btn.ghost {
  background: rgba(255, 255, 255, .12); box-shadow: 0 5px 0 rgba(0, 0, 0, .22);
  color: #fff;
}
.btn.ghost:active { box-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.6); }
.btn:disabled:active { transform: none; box-shadow: 0 5px 0 var(--green-d); }
.btn.pill { width: auto; padding: 9px 22px; font-size: 16px; border-radius: 999px; margin-top: 0; }

/* ---------- Table (opponents around the play area) ---------- */
.game { padding-bottom: 0; }
.table {
  position: relative; flex: 1; min-height: 0;
  margin: 2px 0 4px;
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 38%, rgba(46, 213, 115, .16), transparent 60%),
    rgba(0, 0, 0, .16);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), inset 0 8px 30px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.seats { position: absolute; inset: 0; pointer-events: none; }

/* Desktop: keep the play area compact and balanced instead of a tall empty
   box. The .table fills the row, but a centered inner wrapper bounds the seat
   coordinate system (seats are JS-positioned in % of .table) so the top seats
   and the centered pile pull together into a deliberate oval table. */
@media (min-width: 700px) {
  .game {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    /* Center the capped table + hand as a balanced group rather than pinning
       the table to the top with a void below it. */
    justify-content: center;
  }
  .table {
    /* Cap vertical sprawl: an aspect-bounded, centered table card. */
    flex: 1 1 auto;
    align-self: center;
    width: 100%;
    max-width: 760px;
    /* Keep the box from getting too tall; clamp height so seats + center
       form a compact oval rather than a void. min() vs viewport keeps it
       safe on shorter desktop windows. */
    max-height: min(64vh, 560px);
    margin: 8px auto 6px;
  }
}

.seat {
  /* Coordinates come from JS-computed ellipse points (CSS custom props set
     inline per seat). The tag is centered on its point with translate(-50%). */
  position: absolute;
  left: var(--seat-left, 50%);
  top: var(--seat-top, 6px);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: none; transition: transform .25s, left .25s, top .25s;
}

.zone { display: flex; flex-direction: column; }

.playerTag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .12); border-radius: 999px;
  padding: 4px 12px 4px 5px; font-weight: 800; font-size: 13px;
  border: 2.5px solid transparent; transition: border-color .2s, background .2s, box-shadow .25s, opacity .2s;
  position: relative; white-space: nowrap;
}
.playerTag.gone { opacity: .45; filter: grayscale(.5); }
.playerTag .cnt {
  background: rgba(0, 0, 0, .32); border-radius: 999px; min-width: 20px; text-align: center;
  padding: 0 6px; font-size: 12px; line-height: 18px;
}
.playerTag.active {
  border-color: var(--gold); background: rgba(255, 217, 61, .22);
  box-shadow: 0 0 0 4px rgba(255, 217, 61, .18), 0 0 22px rgba(255, 217, 61, .55);
}
/* Composited pulse: animate opacity/transform of a glow layer instead of box-shadow */
.playerTag.active::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  box-shadow: 0 0 0 4px rgba(255, 217, 61, .14), 0 0 26px rgba(255, 217, 61, .6);
  pointer-events: none; z-index: -1;
  will-change: transform, opacity;
  animation: turnPulse 1.5s ease-in-out infinite;
}
@keyframes turnPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff6b9d, #c13ea8); font-size: 16px; flex: 0 0 auto;
}
.avatar.me { background: linear-gradient(135deg, #2e86ff, #2ed573); }

.oppHand { display: flex; justify-content: center; min-height: 30px; }
.seat .oppHand { min-height: 26px; }
.cardback {
  width: 22px; height: 32px; border-radius: 6px; margin-left: -13px;
  background: repeating-linear-gradient(45deg, #3a2a7a, #3a2a7a 4px, #4a36a0 4px, #4a36a0 8px);
  border: 1.5px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  display: grid; place-items: center;
}
.cardback::after { content: "·"; font-family: 'Baloo 2', cursive; font-weight: 800; color: #ffd93d; font-size: 9px; opacity: .9; }
.cardback:first-child { margin-left: 0; }

.lastChip {
  display: none; background: var(--red); color: #fff; font-family: 'Baloo 2', cursive;
  font-weight: 800; font-size: 10px; padding: 2px 8px; border-radius: 999px;
  position: absolute; top: -10px; right: -6px; box-shadow: 0 2px 0 var(--red-d);
  animation: pop .3s ease;
}
.lastChip.show { display: inline-block; }
.seat .lastChip { font-size: 9px; }

/* Center: draw pile + direction arrow + discard */
.center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 12px; min-height: 0;
}
.dirWrap { display: grid; place-items: center; width: 40px; }
.dirArrow {
  font-size: 30px; color: var(--gold); line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  animation: spinHint 2.4s ease-in-out infinite;
}
.dirArrow.ccw { transform: scaleX(-1); animation: spinHintR 2.4s ease-in-out infinite; }
@keyframes spinHint { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes spinHintR { 0%, 100% { opacity: .7; transform: scaleX(-1) scale(1); } 50% { opacity: 1; transform: scaleX(-1) scale(1.12); } }
.pile { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pileLabel { font-size: 11px; font-weight: 800; opacity: .8; text-transform: uppercase; letter-spacing: 1px; }

.drawPile {
  width: 84px; height: 124px; border-radius: var(--r-card); cursor: pointer;
  background: repeating-linear-gradient(45deg, #3a2a7a, #3a2a7a 8px, #4a36a0 8px, #4a36a0 16px);
  border: 3px solid #fff; box-shadow: var(--shadow);
  display: grid; place-items: center; position: relative; transition: transform .1s;
}
/* Composited pulse: a glow ring layer scales/fades instead of animating box-shadow */
.drawPile.canDraw::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 4px rgba(255, 217, 61, .6);
  pointer-events: none; z-index: -1;
  will-change: transform, opacity;
  animation: pulseDraw 1.4s ease-in-out infinite;
}
.drawPile:active { transform: translateY(3px) scale(.98); }
.drawPile .dpText { font-family: 'Baloo 2', cursive; font-weight: 800; color: #ffd93d; font-size: 20px; transform: rotate(-18deg); }
.drawCount {
  position: absolute; bottom: -10px; background: var(--ink); color: #fff; font-size: 11px;
  font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 2px solid #fff;
}
@keyframes pulseDraw {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.22); }
}

.discardSlot { width: 96px; height: 140px; position: relative; }

/* Cards */
.card {
  width: 84px; height: 124px; border-radius: var(--r-card);
  position: relative; color: #fff; cursor: default;
  box-shadow: var(--shadow); border: 3px solid #fff;
  display: grid; place-items: center; overflow: hidden;
  background: var(--cc, #888);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s;
}
.card.k-red    { --cc: var(--red);    --ccd: var(--red-d); }
.card.k-yellow { --cc: var(--yellow); --ccd: var(--yellow-d); }
.card.k-green  { --cc: var(--green);  --ccd: var(--green-d); }
.card.k-blue   { --cc: var(--blue);   --ccd: var(--blue-d); }
.card.k-wild   { background: conic-gradient(var(--red) 0 90deg, var(--yellow) 90deg 180deg, var(--green) 180deg 270deg, var(--blue) 270deg 360deg); }
.card::before {
  content: ""; position: absolute; inset: 6px; border-radius: 11px;
  background:
    radial-gradient(ellipse at 28% 20%, rgba(255, 255, 255, .45), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .14));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
  pointer-events: none; z-index: 1;
}
.card .glyph {
  position: relative; z-index: 2; font-family: 'Baloo 2', cursive; font-weight: 800;
  width: 56px; height: 84px; border-radius: 50%/40%;
  background: #fff; color: var(--ccd, #333);
  display: grid; place-items: center; transform: rotate(-18deg);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .06), 0 2px 5px rgba(0, 0, 0, .12);
}
.card.k-wild .glyph { color: #222; background: rgba(255, 255, 255, .96); }
.card .big { font-size: 42px; line-height: 1; }
.card .sym { font-size: 26px; line-height: 1; }
.card .corner {
  position: absolute; z-index: 3; font-family: 'Baloo 2', cursive; font-weight: 800;
  font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.card .corner.tl { top: 5px; left: 8px; }
.card .corner.br { bottom: 5px; right: 8px; transform: rotate(180deg); }

.discardSlot .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); width: 96px; height: 140px; }
.discardSlot .card.land { animation: landCard .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes landCard { from { transform: translate(-50%, -64%) rotate(-12deg) scale(1.08); } to { transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }

.colorOrb {
  position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); z-index: 5;
}
.colorOrb.k-red { background: var(--red); } .colorOrb.k-yellow { background: var(--yellow); }
.colorOrb.k-green { background: var(--green); } .colorOrb.k-blue { background: var(--blue); }

.activeColor {
  display: flex; align-items: center; gap: 7px; background: rgba(0, 0, 0, .32);
  padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 12px;
  border: 2px solid rgba(255, 255, 255, .18); transition: box-shadow .3s, border-color .3s;
}
.activeColor.flash {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 217, 61, .25), 0 0 18px rgba(255, 217, 61, .6);
}
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.swatch.k-red { background: var(--red); } .swatch.k-yellow { background: var(--yellow); }
.swatch.k-green { background: var(--green); } .swatch.k-blue { background: var(--blue); }

/* Player hand */
.myzone { padding-top: 2px; flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; }
.myzone .playerTag { align-self: center; }
.actions { display: flex; justify-content: center; margin-top: 6px; min-height: 0; }
.actions.hide { display: none; }
.handScroll {
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  padding: 22px 12px 12px; scroll-padding: 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  justify-content: safe center;
  /* Bound the hand to the container width at every breakpoint so many cards
     scroll WITHIN this box instead of overflowing past the viewport edge. */
  width: 100%; max-width: 100%;
}
/* On desktop the hand row can use the wider table; keep it centered and
   capped to the table width so it never runs under the page margins. */
@media (min-width: 700px) {
  .myzone { max-width: 760px; margin-left: auto; margin-right: auto; }
}
/* The .hand wrapper must also clip/scroll within the container so a wide
   fan of cards is bounded rather than clipped by the viewport. */
.hand { width: 100%; max-width: 100%; min-width: 0; }
.handScroll.fan { gap: 0; }
.handScroll.fan .card { margin-left: -26px; }
.handScroll.fan .card:first-child { margin-left: 0; }
.handScroll::-webkit-scrollbar { display: none; }
.hand .card {
  flex: 0 0 auto; cursor: pointer; width: 76px; height: 112px;
  transition: transform .14s ease, box-shadow .14s ease, margin .14s ease, filter .14s;
}
.hand .card.playable {
  box-shadow: var(--shadow), 0 0 0 4px var(--gold), 0 0 22px rgba(255, 217, 61, .55);
  transform: translateY(-12px);
  animation: floaty 2.2s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(-12px); } 50% { transform: translateY(-18px); } }
.hand .card.playable:active { transform: translateY(-6px) scale(.97); }
.hand .card.dim { filter: brightness(.62) saturate(.7); }
.hand .card.shake { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* fly animation */
.flyer { position: fixed; z-index: 200; pointer-events: none; transition: transform .42s cubic-bezier(.4, 1.3, .6, 1), opacity .42s; }

/* status line */
.status {
  text-align: center; font-weight: 800; font-size: 15px; min-height: 22px;
  padding: 2px 8px; opacity: .95;
}

/* ---------- Modals ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 22px;
  background: rgba(20, 10, 45, .8); backdrop-filter: blur(2px);
}
.overlay.show { display: flex; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; color: var(--ink); border-radius: 26px; max-width: 380px; width: 100%;
  padding: 26px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: rise .3s cubic-bezier(.3, 1.4, .5, 1);
  will-change: transform, opacity;
}
@keyframes rise { from { transform: translateY(30px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h2 { font-size: 30px; margin: 0 0 6px; color: var(--bg-2); }
.modal p { font-size: 16px; line-height: 1.55; margin: 8px 0; color: #41386a; font-weight: 700; }
.howto { text-align: left; margin: 14px 0; display: flex; flex-direction: column; gap: 12px; padding: 0; }
.howto li { list-style: none; display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 15px; color: #41386a; }
.howto .num { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--bg-2); color: #fff; display: grid; place-items: center; font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 18px; }
.modal .btn { color: #fff; }

/* color picker */
.pickGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.pickBtn {
  border: none; cursor: pointer; height: 84px; border-radius: 18px; color: #fff;
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 18px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25); transition: transform .08s; position: relative;
}
.pickBtn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.pickBtn.k-red { background: var(--red); } .pickBtn.k-yellow { background: var(--yellow); }
.pickBtn.k-green { background: var(--green); } .pickBtn.k-blue { background: var(--blue); }

/* win */
.winBadge { font-size: 56px; line-height: 1; margin-bottom: 2px; animation: rise .4s cubic-bezier(.3, 1.6, .5, 1); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 290; overflow: hidden; }
.conf { position: absolute; width: 11px; height: 16px; top: -20px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* toast */
.toast {
  position: fixed; left: 50%; top: 16%; transform: translateX(-50%) translateY(-12px);
  background: var(--ink); color: #fff; font-weight: 800; padding: 10px 20px; border-radius: 999px;
  z-index: 250; opacity: 0; transition: opacity .25s, transform .25s; box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
  font-size: 15px; border: 2px solid rgba(255, 255, 255, .25); pointer-events: none; max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* connection-lost banner */
.connBanner {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px);
  background: var(--red); color: #fff; font-weight: 800; font-size: 14px;
  padding: 10px 18px; border-radius: 999px; z-index: 280;
  display: none; align-items: center; gap: 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45); border: 2px solid rgba(255, 255, 255, .25);
  max-width: 92%; text-align: center;
}
.connBanner.show { display: flex; animation: rise .25s; }
.connBanner.ok { background: var(--green); }
.spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
.connBanner.ok .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Responsive ---------- */
@media (max-height: 680px) {
  .card { width: 76px; height: 112px; }
  .drawPile { width: 76px; height: 112px; }
  .discardSlot .card { width: 88px; height: 128px; }
  .hand .card { width: 68px; height: 100px; }
  .brand { font-size: 22px; }
  .seat .playerTag { font-size: 12px; padding: 3px 9px 3px 4px; }
  .cardback { width: 18px; height: 26px; margin-left: -11px; }
}
/* Narrow viewports: opponents sit on a wide, shallow arc, so keep the tags +
   card fans compact enough that neighbouring seats never collide. */
@media (max-width: 560px) {
  .seat .playerTag { font-size: 11.5px; padding: 3px 8px 3px 4px; gap: 4px; }
  .seat .avatar { width: 24px; height: 24px; font-size: 13px; }
  .seat .oppHand { min-height: 20px; }
  .seat .cardback { width: 15px; height: 22px; margin-left: -9px; }
}
@media (max-width: 360px) {
  .seat .playerTag { font-size: 11px; }
}

/* ---------- Home footer (legal/support links) ----------
   Subtle, muted links shown under the home card. Kept low-contrast and
   small so they don't compete with the playful menu, but still tappable. */
.homeFooter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 10px 8px max(10px, env(safe-area-inset-bottom));
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
}
.homeFooter a {
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  padding: 4px 2px;
  border-radius: 6px;
  transition: color .15s;
}
.homeFooter a:hover { color: rgba(255, 255, 255, .92); }
.homeFooter .sep { color: rgba(255, 255, 255, .28); }

/* =====================================================================
   Static long-form pages (privacy / terms / support).
   Scoped under <body class="legal"> so the game shell rules (fixed height,
   overflow:hidden, no user-select) never apply here — these pages must
   scroll naturally and allow text selection. Reuses theme tokens/fonts.
   ===================================================================== */
body.legal {
  height: auto;
  min-height: 100%;
  overflow: auto;
  user-select: auto;
  -webkit-user-select: auto;
  touch-action: auto;
  line-height: 1.6;
  /* On these tall scrolling pages the base `body` viewport-sized gradient
     would tile vertically and band. We paint the gradient as a separate
     position:fixed pseudo-element layer (see body.legal::before) which is
     reliable on iOS Safari, unlike `background-attachment: fixed` (renders
     zoomed/janky/locked there). The body itself just gets a solid fallback
     (the gradient's dark end) so there is no second tiling background, and a
     stacking context so .legalPage content sits above the fixed layer.
     Scoped to legal pages only — the non-scrolling game/home shell is
     untouched and keeps its own background. */
  background: var(--bg-3);
  position: relative;
  z-index: 0;
}
/* iOS-safe fixed full-viewport gradient field behind the scrolling content.
   Reuses the EXACT radial+linear stack from the base `body` rule. */
body.legal::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--bg-2) 0%, transparent 55%),
    radial-gradient(120% 90% at 90% 10%, #c13ea8 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-1), var(--bg-3));
}
.legalPage {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 48px) 20px
           calc(48px + env(safe-area-inset-bottom));
}
.legalBack {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  text-decoration: none;
  margin-bottom: 22px;
}
.legalBack:hover { text-decoration: underline; }
.legalCard {
  background: rgba(255, 255, 255, .12);
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 40px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.legalCard h1 {
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.1;
  margin: 0 0 6px;
}
.legalCard h1 .dot { color: var(--gold); }
.legalCard h2 {
  font-size: clamp(19px, 4vw, 23px);
  margin: 30px 0 8px;
  color: #fff;
}
.legalCard h3 {
  font-family: 'Baloo 2', cursive;
  font-size: 16px;
  margin: 18px 0 4px;
}
.legalCard p,
.legalCard li {
  font-size: 15.5px;
  color: rgba(255, 255, 255, .92);
  margin: 8px 0;
}
.legalCard ul { padding-left: 22px; margin: 8px 0; }
.legalCard li { margin: 6px 0; }
.legalCard a { color: var(--gold); }
.legalUpdated {
  font-weight: 700;
  font-size: 13px;
  opacity: .75;
  margin: 0 0 4px;
}
.legalLead {
  font-size: 16.5px;
  font-weight: 700;
  opacity: .95;
}
.legalNote {
  margin-top: 26px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, .22);
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  font-size: 13.5px;
  opacity: .9;
}
.legalNote strong { color: var(--gold); }
.legalContact {
  font-weight: 800;
}
.legalFootLinks {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-weight: 700;
  font-size: 13.5px;
}
.legalFootLinks a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.legalFootLinks a:hover { color: #fff; }
.legalFootLinks .sep { color: rgba(255, 255, 255, .3); }
.faq { margin: 8px 0; }
.faq summary {
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "＋ "; color: var(--gold); }
.faq[open] summary::before { content: "－ "; }
.faq[open] summary { border-bottom-color: transparent; }
.faq p { padding: 0 6px 8px; }

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}