/* src/styles.css part 00 — Palette/sizing tokens, dark and light app modes, base layout.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
:root {
  /* ---- Balatro-referenced palette: warm near-black panels, muted felt
     green, and four functional accents (gold / blue / red / orange) used
     consistently instead of a rainbow of competing neon colors. ---- */
  --panel: #1d1a16;
  --panel-light: #2c2822;
  --panel-edge: #0c0b09;
  --border-soft: rgba(255,255,255,0.09);

  --felt-1: #5c8a72;
  --felt-2: #3a6150;
  --felt-3: #223e33;

  --cream: #f6ecd2;
  --ink: #1a1712;

  --gold: #f0c419;
  --gold-dark: #a3800c;
  --blue: #4fa8d8;
  --blue-dark: #276e94;
  --red: #d64545;
  --red-dark: #8f2626;
  --orange: #e8963c;
  --orange-dark: #a35f1a;
  /* The ink printed on a card face. Always dark, in every app mode —
     distinct from --ink, which is a chrome surface and does flip. */
  --card-ink: #16130f;
  --card-back-dark: #23201a;
  /* Gold used as TEXT. Identical to --gold on dark, deepened on light. */
  --gold-ink: var(--gold);
  /* A recessed chip on a panel: the meld caption, inline code, the option
     rows. Hardcoded rgba(0,0,0,x) wells were the reason meld contents went
     dark-on-dark the moment the chrome text colour flipped. */
  --chip-bg: rgba(0, 0, 0, 0.58);
  --chip-ink: var(--cream);
  --range-fill: var(--accent);
  --range-track: rgba(255, 255, 255, 0.16);
  --range-thumb-ring: rgba(0, 0, 0, 0.45);
  --green-accent: #6fcf7d;
  --green-accent-dark: #2f7a3c;
  /* The table's accent. Everything that glows, pulses or labels the play
     area reads from these, so picking a felt picks a whole colour scheme
     rather than leaving green highlights stranded on a pink table. */
  --accent: #bfe3cd;
  --accent-rgb: 191, 227, 205;
  --accent-soft: rgba(191, 227, 205, 0.5);
  /* Anything printed directly onto the felt reads from this, so a light
     table can flip it without hunting down individual rules. */
  --felt-ink: #f6ecd2;


  --title-size: clamp(28px, 9vw, 52px);
  /* Menus deliberately ignore --ui-scale: that preset is about how big the
     cards on the table are, and letting it drive the settings panel too is
     what made Large blow the menu off both edges of a phone. */
  --menu-font: clamp(15px, 4.1vw, 19px);

  /* Watermark behind the pip on the zen card pack. */
  --blossom-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23d98ea2'%3E%3Cellipse cx='12' cy='6.5' rx='3.1' ry='4.4'/%3E%3Cellipse cx='12' cy='6.5' rx='3.1' ry='4.4' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3.1' ry='4.4' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3.1' ry='4.4' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3.1' ry='4.4' transform='rotate(288 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.9' fill='%23c26a86'/%3E%3C/svg%3E");
}

/* =====================================================================
   APP MODE — dark (default) and light

   Only the chrome tokens flip. --card-ink, the felts and --felt-ink are
   deliberately untouched: a card face is a printed object and should look
   the same under either mode, and the table colour is the player's own
   choice, not something an appearance setting gets to override. Keeping
   those fixed is what stops light mode turning into a second, competing
   theme system that fights the one already there.
   ===================================================================== */
body.light {
  --ink: #efe6d3;
  --card-ink: #16130f;
  --panel: #efe4cd;
  --panel-light: #fdf7e8;
  --panel-edge: #cdbfa2;
  --border-soft: rgba(60, 50, 34, 0.22);
  --cream: #37301f;          /* chrome text, now dark on light panels */
  /* --gold and --blue stay vibrant in both modes: they are the bottom stop
     of every button gradient and the colour of every glow. Darkening them
     for legibility is what turned "Pass & play" into murky mustard. Text
     that needs contrast uses --gold-ink instead. */
  --gold-ink: #85600a;
}

/* ---- sizing tokens -------------------------------------------------------
   These live on `body`, not `:root`. On `:root` the clamp() was computed
   against the `:root` value of --ui-scale before the preset class on
   <body> could change it, so Compact / Comfortable / Large silently did
   nothing. Declaring the tokens on the same element the preset class lands
   on is what makes the presets work at all.

   The curve itself is `min(vw, vh)`. On a portrait phone the vw term wins,
   and it used to win far too hard — 8.6vw on a 390px screen is a 33px
   card. The hand fits by tightening its overlap, not by shrinking the
   cards, so the cards can be much bigger than the naive width-per-card
   maths suggests. ---- */
body {
  /* The card back is the largest single block of colour on the table, so it
     follows the felt too. It must be declared HERE and not on :root — the
     theme class lands on <body>, and a gradient composed on :root would bake
     in the default green before the theme could change --accent-rgb. Same
     trap that made the card-size presets do nothing. */
  --card-back: repeating-linear-gradient(
    45deg,
    rgba(var(--accent-rgb), 0.55) 0 5px,
    var(--card-back-dark) 5px 10px);
  /* The flying card built its own background out of --cream, so a card
     pulled off the discard pile turned yellow mid-flight while every
     settled card was white. One token, read by the hand card, the table
     card and the flight layer, means they cannot drift apart again. */
  --card-stock: linear-gradient(180deg, #ffffff 0%, #fbfbfb 60%, #f2f2f2 100%);
  --card-stock-joker: linear-gradient(180deg, #fff4c9, #f2c83f 72%, #e0ae28 100%);
  --ui-scale: 1;
  /* The scale multiplies the WHOLE clamp, not the middle term. With it
     inside, the upper bound swallowed it: on any desktop the responsive
     value already sat at the 116px ceiling, so Comfortable and Large both
     clamped to 116 and the preset appeared to do nothing. Clamp first to
     get a sane responsive base for the viewport, then scale that. */
  --card-w: calc(clamp(58px, min(20vw, 16vh), 116px) * var(--ui-scale));
  --card-h: calc(var(--card-w) * 1.43);
  --card-overlap: calc(var(--card-w) * -0.36);
  --table-card-w: calc(clamp(38px, min(11.5vw, 9.2vh), 68px) * var(--ui-scale));
  --table-card-h: calc(var(--table-card-w) * 1.43);
  --table-overlap: calc(var(--table-card-w) * -0.34);
  --mini-w: calc(var(--table-card-w) * 0.72);
  --mini-h: calc(var(--mini-w) * 1.45);
  --base-font: calc(clamp(16px, min(4.3vw, 2.7vh), 24px) * var(--ui-scale));
  --pile-w: calc(var(--card-w) * 0.92);
  --pile-h: calc(var(--pile-w) * 1.4);
}
body.ui-compact { --ui-scale: 0.78; }
body.ui-large { --ui-scale: 1.3; }

body.theme-green {
  --accent: #bfe3cd; --accent-rgb: 191, 227, 205; --accent-soft: rgba(191, 227, 205, 0.5);
}
/* A light table. Cream felt means the things printed straight onto it —
   the stock count, the empty-table hint — can no longer be cream too, so
   --felt-ink flips to a warm dark and they all follow it. */
body.theme-cream {
  --felt-1: #f7eeda; --felt-2: #ebdcc0; --felt-3: #d6c5a4;
  --felt-ink: #4a3f2c;
  --accent: #6b4a13; --accent-rgb: 107, 74, 19; --accent-soft: rgba(107, 74, 19, 0.5);
}
body.theme-blue {
  --felt-1: #6e97bd; --felt-2: #486f92; --felt-3: #2d4a66;
  --accent: #bcdcf2; --accent-rgb: 188, 220, 242; --accent-soft: rgba(188, 220, 242, 0.5);
}
body.theme-red {
  --felt-1: #bf7f7b; --felt-2: #965a58; --felt-3: #653a38;
  --accent: #f7cfc2; --accent-rgb: 247, 207, 194; --accent-soft: rgba(247, 207, 194, 0.5);
}
body.theme-purple {
  --felt-1: #9c81bd; --felt-2: #715a91; --felt-3: #483a61;
  --accent: #d8c6f0; --accent-rgb: 216, 198, 240; --accent-soft: rgba(216, 198, 240, 0.5);
}
body.theme-charcoal {
  --felt-1: #6e6a62; --felt-2: #494540; --felt-3: #2b2925;
  --accent: #ded5bd; --accent-rgb: 222, 213, 189; --accent-soft: rgba(222, 213, 189, 0.5);
}
body.theme-pink {
  --felt-1: #e4a8c4; --felt-2: #c47fa0; --felt-3: #99597a;
  --accent: #f8c9e0; --accent-rgb: 248, 201, 224; --accent-soft: rgba(248, 201, 224, 0.5);
}

* { box-sizing: border-box; }

/* VT323 and Press Start 2P ship a single weight. Asking for bold makes the
   browser synthesise one by smearing the glyphs, and iOS smears harder than
   desktop Chrome — the reason the same font looked coarser on the phone. */
* { font-synthesis: none; -webkit-font-smoothing: antialiased; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: var(--cream);
  font-family: 'VT323', monospace;
  font-size: var(--base-font);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--page-edge, var(--felt-3));
}
body { position: relative; }
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

.pixel-font { font-family: 'Press Start 2P', monospace; }

/* ---------------------------------------------------------------------
   FELT BACKGROUND — a calm, static table felt (Balatro-referenced) with a
   subtle diamond weave texture, instead of a busy neon shader. Fully
   static (no continuous animation) so it costs nothing to render while
   idle. Selectable in Settings (6 color themes).
   --------------------------------------------------------------------- */
#feltBg {
  /* Keep the visual background out of Safari's `position: fixed` edge-tint
     heuristic. On recent iOS Safari a fixed opaque layer touching the top or
     bottom edge is flattened into a solid browser-chrome tint; an absolute
     underlay lets the page itself continue behind the translucent/blurred
     browser UI instead. The overscan gives Safari real pixels to sample
     beyond the visible layout viewport as its bars expand and collapse. */
  position: absolute;
  inset: -140px 0;
  z-index: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 2px, transparent 2px, transparent 26px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 2px, transparent 2px, transparent 26px),
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
}

/* ---------------------------------------------------------------------
   CRT overlay: scanlines + vignette + faint chromatic aberration fringe
   --------------------------------------------------------------------- */
.crt-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: multiply;
}
.crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.6) 100%);
}
.crt-fringe-a, .crt-fringe-b {
  position: absolute;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  mix-blend-mode: screen;
}
.crt-fringe-a { background: radial-gradient(ellipse at center, transparent 58%, rgba(255, 40, 60, 0.06) 100%); transform: translate(1.5px, 0); }
.crt-fringe-b { background: radial-gradient(ellipse at center, transparent 58%, rgba(40, 140, 255, 0.06) 100%); transform: translate(-1.5px, 0); }

/* ---------------------------------------------------------------------
   Layout scaffolding
   --------------------------------------------------------------------- */
/* A viewport-sized centred flex child gets its top clipped the moment it grows
   taller than the viewport — which is exactly what happened to the start
   screen on a phone with the room-code box open. `align-items: flex-start`
   plus `margin: auto` on the child centres it while there is room and lets
   it scroll normally once there isn't. */
.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding:
    calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
    calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
.screen > * { margin: auto; }
#screen-game { overflow: hidden; padding: 0; }
#screen-game > * { margin: 0; }
.screen.hidden { display: none; }
.hidden { display: none !important; }

.cabinet {
  font-size: var(--menu-font);
  transition: border-color 0.4s ease;
  background: linear-gradient(180deg, var(--panel-light), var(--panel));
  border-radius: 22px;
  padding: clamp(18px, 4vw, 32px) clamp(16px, 4vw, 36px);
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 0 0 4px var(--panel-edge),
    0 0 0 8px var(--panel-light),
    inset 0 2px 0 rgba(255,255,255,0.07),
    inset 0 -6px 12px rgba(0,0,0,0.5),
    0 20px 60px rgba(0,0,0,0.6);
}

.title {
  font-family: 'Press Start 2P', monospace;
  font-size: var(--title-size);
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--red-dark), 0 0 22px rgba(240,196,25,0.4);
  margin: 0 0 22px;
  letter-spacing: 4px;
}
.section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(13px, 3.6vw, 18px);
  color: var(--gold-ink);
  margin: 0 0 20px;
  /* A single line keeps its original 1.6 line box (1.15 + .225em padding
     above and below); wrapped titles no longer open a half-line gap. */
  line-height: 1.15;
  padding-block: .225em;
}
.lobby-copy { font-size: 1.1em; margin: 6px 0 18px; color: var(--cream); }

.field-label { display: block; text-align: left; color: var(--accent); font-size: 0.9em; margin-bottom: 4px; }

.text-input {
  width: 100%;
  padding: 10px 12px;
  font-family: 'VT323', monospace;
  font-size: 1.1em;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--panel-light);
  border-radius: 8px;
  margin-bottom: 16px;
  outline: none;
  user-select: text;
}
.text-input:focus { border-color: var(--blue); }
.code-input { text-align: center; letter-spacing: 10px; text-transform: uppercase; font-size: 1.5em; }

.menu-buttons { display: flex; flex-direction: column; gap: 12px; }

.btn {
  font-family: 'VT323', monospace;
  font-size: 1.05em;
  letter-spacing: 1px;
  padding: clamp(10px, 2.4vw, 14px) clamp(14px, 3vw, 20px);
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: var(--card-ink);
  position: relative;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(3px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.4); }
.btn.small { font-size: 0.82em; padding: 8px 14px; }
.btn:not(:disabled):hover { filter: brightness(1.08); }

.btn-orange { background: linear-gradient(180deg, #f4b565, var(--orange)); box-shadow: 0 5px 0 var(--orange-dark), 0 8px 14px rgba(0,0,0,0.4); }
.btn-blue { background: linear-gradient(180deg, #82c6ea, var(--blue)); box-shadow: 0 5px 0 var(--blue-dark), 0 8px 14px rgba(0,0,0,0.4); }
.btn-gold { background: linear-gradient(180deg, #f7dd6e, var(--gold)); box-shadow: 0 5px 0 var(--gold-dark), 0 8px 14px rgba(0,0,0,0.4); }
.btn-crimson { background: linear-gradient(180deg, #e57a7a, var(--red)); color: var(--cream); box-shadow: 0 5px 0 var(--red-dark), 0 8px 14px rgba(0,0,0,0.4); }
.btn-ghost { background: transparent; color: var(--cream); border: 2px solid var(--panel-light); box-shadow: none; }
.btn-orange:not(:disabled):active, .btn-blue:not(:disabled):active, .btn-gold:not(:disabled):active, .btn-crimson:not(:disabled):active { box-shadow: 0 1px 0 rgba(0,0,0,0.4); }

.btn-crimson.glow-ready { animation: discardGlow 0.8s ease-in-out infinite alternate; }
@keyframes discardGlow {
  from { box-shadow: 0 5px 0 var(--red-dark), 0 0 8px 2px rgba(214,69,69,0.5); }
  to   { box-shadow: 0 5px 0 var(--red-dark), 0 0 24px 7px rgba(214,69,69,0.9); }
}

.join-box {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px dashed var(--panel-light);
}

/* Room-code entry is deliberately a compact sheet rather than a scrolling
   extension of the start cabinet. iOS can animate its keyboard without us
   chasing visualViewport resize events, so the interaction stays smooth. */
.join-overlay {
  position: absolute;
  inset: 0;
  z-index: 12000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(env(safe-area-inset-top) + clamp(58px, 11vh, 108px)) 14px 24px;
  background: rgba(12, 10, 9, 0.56);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: joinOverlayIn 150ms ease-out both;
}
.join-overlay.hidden { display: none !important; }
.join-code-card {
  width: min(92vw, 420px);
  margin: 0;
  padding: 20px clamp(18px, 5vw, 28px) 22px;
  transform-origin: 50% 0;
  animation: joinCardIn 190ms cubic-bezier(.2,.85,.2,1) both;
}
.join-code-card .section-title { margin-bottom: 14px; }
.join-code-card .btn { margin-top: 12px; }
.join-overlay-dismiss {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 16px);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  background: var(--panel-light);
  color: var(--cream);
  font: 30px/30px 'VT323', monospace;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.code-input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .42em;
  padding-left: calc(12px + .42em);
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 6vw, 26px);
}
@keyframes joinOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes joinCardIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .join-overlay, .join-code-card { animation: none; }
}


.room-code {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(26px, 10vw, 46px);
  letter-spacing: clamp(6px, 3vw, 14px);
  color: var(--gold-ink);
  background: var(--ink);
  border-radius: 12px;
  padding: clamp(12px, 3vw, 18px) 10px;
  margin: 10px 0 20px;
  text-shadow: 0 0 16px rgba(240,196,25,0.6);
}

.spinner {
  width: 46px; height: 46px; margin: 10px auto 20px;
  border: 6px solid var(--panel-light);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  /* Feedback stays above every dialog, including nested release dialogs. */
  z-index: 12100;
  max-width: min(92vw, 460px);
  background: var(--ink);
  border: 3px solid var(--red);
  color: var(--cream);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.95em;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-12px); }

/* ---------------------------------------------------------------------
   Settings button + modal
   --------------------------------------------------------------------- */
.settings-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 200;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--panel-light);
  border: 2px solid var(--border-soft);
  color: var(--cream);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.settings-btn:hover { filter: brightness(1.15); }

.size-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.size-options .btn {
  flex: 1 1 30%;
  min-width: 0;
  font-size: 0.85em;
  letter-spacing: 0;
  padding: 10px 4px;
  white-space: nowrap;
}
.size-options .btn.active { outline: 3px solid var(--gold); }

.theme-options { display: flex; gap: 10px; justify-content: center; margin: 4px 0 8px; }
.theme-swatch {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--panel-light);
  cursor: pointer;
  padding: 0;
}
.theme-swatch.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.theme-swatch[data-theme="green"] { background: radial-gradient(circle at 35% 30%, #5c8a72, #223e33); }
.theme-swatch[data-theme="blue"] { background: radial-gradient(circle at 35% 30%, #6e97bd, #2d4a66); }
.theme-swatch[data-theme="red"] { background: radial-gradient(circle at 35% 30%, #bf7f7b, #653a38); }
.theme-swatch[data-theme="purple"] { background: radial-gradient(circle at 35% 30%, #9c81bd, #483a61); }
.theme-swatch[data-theme="charcoal"] { background: radial-gradient(circle at 35% 30%, #6e6a62, #2b2925); }
.theme-swatch[data-theme="pink"] { background: radial-gradient(circle at 35% 30%, #e4a8c4, #99597a); }
.theme-swatch[data-theme="cream"] { background: radial-gradient(circle at 35% 30%, #fbf6ea, #d6c5a4); }

/* ---------------------------------------------------------------------
   Game screen layout
   --------------------------------------------------------------------- */
.game-root {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 14px;
  gap: 6px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border-radius: 12px;
  padding: 8px 16px;
  border: 3px solid var(--panel-light);
}
.score-chip { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.score-label { font-size: 0.75em; color: var(--accent); }
.score-value { font-family: 'Press Start 2P', monospace; font-size: 22px; color: var(--gold-ink); }
.center-status { text-align: center; }
.round-label { font-size: 0.75em; color: var(--cream); opacity: 0.85; }
.phase-label { font-size: 1em; color: var(--accent); transition: color 0.4s ease; }

.opponent-row { position: relative; display: flex; justify-content: center; min-height: calc(var(--mini-h) + 12px); }
.opp-hand { display: flex; }
.opp-hand .mini-card {
  width: var(--mini-w); height: var(--mini-h); margin-left: calc(var(--mini-w) * -0.4);
  background: repeating-linear-gradient(45deg, rgba(var(--accent-rgb), 0.55) 0 4px, var(--card-back-dark) 4px 8px);
  border: 2px solid var(--card-ink);
  border-radius: 5px;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.opp-hand .mini-card:first-child { margin-left: 0; }
.opp-turn-indicator {
  position: absolute; right: 10px; top: 6px;
  color: var(--gold-ink); font-size: 0.75em;
  animation: pulseFade 1s ease-in-out infinite;
}
@keyframes pulseFade { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.table-area {
  flex: 1 1 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04), rgba(0,0,0,0.22));
  border: 3px solid var(--panel-light);
  border-radius: 14px;
  padding: 10px;
  padding-top: calc(var(--table-card-h) * 0.3 + 16px);
  overflow-y: auto;
  min-height: 90px;
  position: relative;
}
.table-empty-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--felt-ink); opacity: 0.4; font-size: 0.9em; }
.table-melds { display: flex; flex-wrap: wrap; gap: 16px; align-content: flex-start; }

.meld-group-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.meld-group {
  display: flex;
  background: var(--chip-bg);
  border-radius: 10px;
  padding: 10px 12px 10px 8px;
  border: 2px solid var(--border-soft);
  transition: box-shadow 0.15s ease, transform 0.2s ease;
  cursor: pointer;
}
.meld-group.patch-target {
  box-shadow: 0 0 0 3px var(--blue), 0 0 22px 4px rgba(79,168,216,0.7);
  animation: patchPulse 1s ease-in-out infinite;
}
@keyframes patchPulse {
  0%,100% { box-shadow: 0 0 0 3px var(--blue), 0 0 14px 2px rgba(79,168,216,0.5); }
  50% { box-shadow: 0 0 0 3px var(--blue), 0 0 26px 6px rgba(79,168,216,0.9); }
}
.meld-caption {
  font-size: calc(var(--base-font) * 0.82);
  color: var(--chip-ink);
  letter-spacing: 0.5px;
  background: var(--chip-bg);
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  border: 2px solid var(--border-soft);
}
.meld-caption .cap-type-set { color: #7fc9ee; font-weight: bold; }
.meld-caption .cap-type-run { color: #f5ac5f; font-weight: bold; }

.mini-card-slot {
  position: relative;
  width: var(--table-card-w);
  margin-left: var(--table-overlap);
  transition: transform 0.18s ease, z-index 0s;
}
.mini-card-slot:first-child { margin-left: 0; }
@media(hover:hover) and (pointer:fine){.mini-card-slot:hover { transform: translateY(-6px) scale(1.2); z-index: 30; }}
.table-card {
  width: var(--table-card-w); height: var(--table-card-h);
  background: var(--card-stock);
  border-radius: 6px;
  border: 2px solid var(--card-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: calc(var(--table-card-w) * 0.42); font-weight: bold; line-height: 0.98;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  overflow: hidden;
}
.table-card .tc-rank { font-size: 1em; }
.table-card .tc-suit { font-size: 0.86em; margin-top: 0.06em; }
.table-card.suit-red { color: var(--red); }
.table-card.suit-black { color: var(--card-ink); }
.table-card.is-joker { background: linear-gradient(160deg, var(--gold), var(--orange)); color: #4a3405; }
/* The star glyph is the card's "rank" here, so it should read at the same
   size as every other card's rank — only the "JKR" word underneath (three
   characters instead of one) still needs to be shrunk to fit. */
.table-card.is-joker .tc-rank { font-size: 1em; }
.table-card.is-joker .tc-suit { font-size: 0.5em; letter-spacing: 0.05em; }
/* Cards overlap right-over-left (see --table-overlap), so the right ~34%
   of every non-last card in a meld is painted over by its neighbour. A
   badge anchored top-right lived exactly in that hidden strip, which is
   the real reason it was "difficult to see" - it was often fully covered.
   Top-left always sits in the exposed part of the card. Sizing/contrast
   bumped up too so it reads as a clear tag rather than a faint corner. */
.joker-badge {
  position: absolute; top: 3px; left: 3px;
  background: var(--ink); color: var(--gold);
  font-size: 11px; font-weight: bold; padding: 2px 5px; border-radius: 5px;
  border: 2px solid var(--gold); white-space: nowrap;
  line-height: 1.25;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 2px 5px rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 2;
}

.piles-row { display: flex; flex: 0 0 auto; justify-content: center; gap: 30px; padding: 28px 0 8px; }
.pile { width: var(--pile-w); height: var(--pile-h); border-radius: 8px; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: transform 0.15s ease; }
.pile:active { transform: scale(0.96); }
.stock-pile {
  background: var(--card-back);
  border: 3px solid var(--card-ink);
  transition: background 0.5s ease;
}
.discard-pile { background: rgba(var(--accent-rgb), 0.05); border: 3px dashed rgba(var(--accent-rgb), 0.35); }
.discard-pile .table-card { width: calc(var(--pile-w) * 0.82); height: calc(var(--pile-h) * 0.82); font-size: calc(var(--pile-w) * 0.26); }
.pile-count { position: absolute; bottom: -20px; font-size: 0.66em; line-height: 1; color: var(--felt-ink); }
.pile-label {
  position: absolute; top: -17px;
  font-size: 0.62em;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.pile-count { transition: color 0.4s ease; }
.pile { transition: transform 0.15s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
/* Keep the draw glow on its own small opacity layer. Animating blurred box
   shadows repainted the table every frame in Safari after the deal. */
.pile.draw-pulse::after {content:'';position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--accent),0 0 26px 8px rgba(var(--accent-rgb),.62);opacity:.5;animation:drawPulse 2.1s ease-in-out infinite;will-change:opacity;}
@keyframes drawPulse {0%,100%{opacity:.48;}50%{opacity:1;}}
body.no-motion .pile.draw-pulse::after {animation:none;opacity:.6;will-change:auto;}
@media(prefers-reduced-motion:reduce){.pile.draw-pulse::after{animation:none;opacity:.6;will-change:auto;}}

.evaluator-banner {
  align-self: center;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 2.2vw, 13px);
  padding: clamp(7px, 1.8vw, 10px) clamp(10px, 3vw, 18px);
  border-radius: 10px;
  text-align: center;
  margin: 2px auto;
  background: var(--ink);
  border: 2px solid var(--panel-light);
  transition: opacity 0.15s ease;
}
.evaluator-banner.eval-invalid { color: var(--red); border-color: var(--red); }
.evaluator-banner.eval-set { color: var(--blue); border-color: var(--blue); text-shadow: 0 0 10px rgba(79,168,216,0.7); }
.evaluator-banner.eval-run { color: var(--orange); border-color: var(--orange); text-shadow: 0 0 10px rgba(232,150,60,0.7); }
.evaluator-banner.eval-swap { color: var(--gold); border-color: var(--gold); text-shadow: 0 0 10px rgba(240,196,25,0.8); animation: pulseFade 0.7s ease-in-out infinite; }
.evaluator-banner.eval-patch { color: var(--blue); border-color: var(--blue); }

.hand-row {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: flex-end;
  min-height: calc(var(--card-h) + 34px);
  padding: 20px 0 6px;
  position: relative;
}

.card {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  height: var(--card-h);
  margin-left: var(--card-overlap);
  background: var(--card-stock);
  border-radius: 8px;
  border: 2px solid var(--card-ink);
  box-shadow: 3px 4px 0 rgba(0,0,0,0.45);
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.32s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Deliberately NOT `.card:first-child`. While you drag, the lifted card is
   position:fixed but still sits in the DOM, so it keeps winning
   :first-child while contributing nothing to the flow — the real leftmost
   card then kept its negative margin and yanked the whole centred fan left.
   applyHandLayout() assigns this to the first IN-FLOW card instead. */
.card.lead-card { margin-left: 0; }
/* iOS keeps :hover latched on the last element you tapped, sometimes on
   several at once. When that rule also carried a z-index, a latched card
   jumped above every card to its right and hid them completely — which is
   exactly the gap you saw in the fan. Hover is now gated to real mice, and
   it no longer touches stacking at all: paint order is set explicitly in
   JS so it can never depend on a transient pseudo-class. */
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 4px 8px 10px rgba(0,0,0,0.5); }
}
.card.selected {
  transform: translateY(-26px) rotateX(0) rotateY(0) !important;
  box-shadow: 0 14px 0 -4px rgba(0,0,0,0.15), 4px 22px 16px rgba(0,0,0,0.55), 0 0 0 3px var(--gold);
}
.card.dragging {
  position: fixed;
  /* Beats the per-card paint order set inline on every card in the fan. */
  z-index: 900 !important;
  transition: none !important;
  box-shadow: 8px 20px 30px rgba(0,0,0,0.65), 0 0 0 3px var(--gold), 0 0 24px 4px rgba(240,196,25,0.4);
  pointer-events: none;
}
.card.ghost-slot {
  background: rgba(255,255,255,0.06);
  border: 3px dashed var(--gold);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}
.card.enter-anim { animation: cardEnter 0.32s cubic-bezier(.2,.8,.2,1); }
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(40px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card.suit-red { color: var(--red); }
.card.suit-black { color: var(--card-ink); }

/* src/styles.css part 01 — Card faces, table, piles, hand and controls.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   CARD FACE
   The face is built once, in markup that every pack restyles. Indices sit
   in absolutely-positioned corners rather than in the flex flow, which is
   what stops the bottom index sliding off the card whenever a pack
   changes the typeface or the line-height.
   ===================================================================== */
.cardface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  container-type: size;
}
.cf-idx {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cf-idx-tl { top: 5%; left: 6%; }
.cf-idx-br { bottom: 5%; right: 6%; transform: rotate(180deg); }
.cf-rank { font-size: 16cqw; }
.cf-rank.wide { font-size: 13cqw; letter-spacing: -0.06em; }
.cf-suit { font-size: 12cqw; margin-top: 0.12em; }

/* Pip field: a 3-column grid the pip coordinates are placed into. */
.cf-body { position: absolute; inset: 16% 22%; }
.cf-pip {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 23cqw;
  line-height: 1;
}
.cf-pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.cf-ace {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 52cqw;
  line-height: 1;
}

/* Court cards: the rank set large with its suit beneath it. Drawn figures
   were tried and dropped — at the size a card actually renders on a phone
   there is no room for a readable illustration, and a letter you can read
   across the table beats a portrait you can't. */
.cf-court {
  position: absolute;
  left: 50%; top: 49%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.86;
}
.cf-court .cf-court-rank { font-size: 37cqw; font-weight: 700; letter-spacing: -0.03em; }
.cf-court .cf-court-suit { font-size: 21cqw; margin-top: 0.08em; }

.cf-joker {
  position: absolute;
  left: 50%; top: 43%;
  transform: translate(-50%, -50%);
  font-size: 40cqw;
  line-height: 1;
}
.cf-joker-word {
  position: absolute;
  left: 50%; bottom: 14%;
  transform: translateX(-50%);
  font-size: 11cqw;
  letter-spacing: 0.02em;
  font-weight: 700;
  white-space: nowrap;
}

/* Container queries let every pack size type off the card itself. Older
   Safari has no cqw, so these fallbacks keep the face readable there. */
@supports not (container-type: size) {
  .cf-rank { font-size: calc(var(--card-w) * 0.16); }
  .cf-rank.wide { font-size: calc(var(--card-w) * 0.13); }
  .cf-suit { font-size: calc(var(--card-w) * 0.12); }
  .cf-pip { font-size: calc(var(--card-w) * 0.23); }
  .cf-ace { font-size: calc(var(--card-w) * 0.52); }
  .cf-joker-word { font-size: calc(var(--card-w) * 0.11); }
  .cf-joker { font-size: calc(var(--card-w) * 0.40); }
  .cf-court .cf-court-rank { font-size: calc(var(--card-w) * 0.37); }
  .cf-court .cf-court-suit { font-size: calc(var(--card-w) * 0.21); }
}

.drop-indicator {
  position: absolute;
  bottom: 6px;
  width: 5px;
  height: calc(var(--card-h) - 12px);
  background: var(--gold);
  border-radius: 3px;
  box-shadow: 0 0 10px 2px rgba(240,196,25,0.8);
  transition: left 0.15s ease;
  pointer-events: none;
  z-index: 4;
}

.action-bar {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

/* ---------------------------------------------------------------------
   Modals
   --------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(14px + env(safe-area-inset-top)) 14px
    calc(14px + env(safe-area-inset-bottom)) 14px;
}
.modal-backdrop > * { margin: auto; }
.modal { max-width: 520px; }
.help-modal { max-width: 620px; text-align: left; }
.help-body p { margin: 0 0 12px; font-size: 1.02em; line-height: 1.45; }
.help-body strong { color: var(--gold-ink); }

.round-tally-area { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 80px; align-items: center; margin-bottom: 14px; }
.round-tally-area .tally-card { width: clamp(30px, 8vw, 44px); height: clamp(43px, 11.5vw, 62px); }
.round-scoreboard { font-size: 1.05em; margin-bottom: 18px; }
.round-scoreboard .row { display: flex; justify-content: space-between; padding: 4px 10px; }
.round-scoreboard .row.winner { color: var(--green-accent); }
.running-total { font-family: 'Press Start 2P', monospace; font-size: clamp(16px, 5vw, 24px); color: var(--gold-ink); margin: 10px 0; }

.round-tally-area .tally-card { font-size: 20px; }

/* Shared face fallbacks for browsers with no container queries. */
@supports not (container-type: size) {
}

/* ---------------------------------------------------------------------
   2. FELT TEXTURES — an axis separate from felt colour, so any texture
   works with any of the six table colours.
   --------------------------------------------------------------------- */
body.felt-plain #feltBg {
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
}
body.felt-baize #feltBg {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.055) 1px, transparent 1.6px) 0 0/7px 7px,
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.07) 1px, transparent 1.6px) 3px 3px/7px 7px,
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,255,255,0.055), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
}
body.felt-linen #feltBg {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
}

/* ---------------------------------------------------------------------
   3. BLOSSOM LAYER — a pixel branch in the top corner and slow drifting
   petals, sitting between the felt and the game. Deliberately faint:
   at full strength it would compete with the cards.
   --------------------------------------------------------------------- */
#blossomLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.blossom-on #blossomLayer { opacity: 1; }
#blossomBranch {
  position: absolute;
  top: 0; left: 0;
  width: clamp(260px, 46vw, 560px);
  height: auto;
  opacity: 0.42;
  image-rendering: pixelated;
}
.petal {
  position: absolute;
  top: -14px;
  width: 6px; height: 6px;
  background: var(--petal-color, #f0c2d0);
  opacity: 0.55;
  will-change: transform;
  animation-name: petalDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.petal.wide { width: 8px; height: 6px; }
@keyframes petalDrift {
  0%   { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.6; }
  92%  { opacity: 0.5; }
  100% { transform: translate3d(var(--drift, 40px), 105vh, 0) rotate(320deg); opacity: 0; }
}

/* ---------------------------------------------------------------------
   4. STATUS BAR + PLAYER RAIL (replaces the fixed two-player topbar)
   --------------------------------------------------------------------- */
.statusbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 3px solid var(--panel-light);
  border-radius: 12px;
  padding: 5px 8px;
}
.status-center { flex: 1; text-align: center; min-width: 0; }
.status-round { font-size: 0.72em; color: var(--accent); letter-spacing: 1px; }
.status-phase {
  display: block;
  font-size: 0.95em;
  color: var(--green-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-side { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--panel-light);
  border: 2px solid var(--border-soft);
  color: var(--cream);
  font-size: 15px;
  font-family: 'VT323', monospace;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.icon-btn:hover { filter: brightness(1.2); }
.icon-btn:active { transform: translateY(2px); }
.icon-btn.off { opacity: 0.45; }
.icon-btn.off.has-badge { opacity: 1; }

.conn-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green-accent);
  flex: 0 0 auto;
  margin: 0 2px;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
}
.conn-dot.warn { background: var(--orange); box-shadow: 0 0 6px rgba(232,150,60,0.8); animation: pulseFade 0.9s ease-in-out infinite; }
.conn-dot.down { background: var(--red); box-shadow: 0 0 6px rgba(214,69,69,0.9); }
.conn-dot.solo { display: none; }

.player-rail {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.pchip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 3px solid var(--panel-light);
  border-radius: 11px;
  padding: 5px 10px 5px 6px;
  min-width: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pchip.is-turn {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(240,196,25,0.35);
}
.pchip.is-me .pchip-name { color: var(--gold-ink); }
.pchip.is-offline { opacity: 0.5; border-style: dashed; }
.pchip.is-out { opacity: 0.42; }
.pchip-out { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 0.04em; color: var(--red); }

.pchip-av {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pchip-av svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.pchip-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.pchip-name {
  font-size: 0.82em;
  color: var(--cream);
  max-width: 11ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pchip-meta { display: flex; align-items: center; gap: 6px; }
.pchip-score { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--gold-ink); }
.pchip-cards { display: flex; align-items: center; }
.pchip-cards .tiny-back {
  width: 8px; height: 12px;
  margin-left: -3px;
  border-radius: 2px;
  border: 1px solid var(--card-ink);
  background: repeating-linear-gradient(45deg, rgba(var(--accent-rgb), 0.55) 0 2px, var(--card-back-dark) 2px 4px);
}
.pchip-cards .tiny-back:first-child { margin-left: 0; }
.pchip-cards .more { font-size: 0.65em; color: var(--blue); margin-left: 4px; }
.pchip-thinking { font-size: 0.65em; color: var(--gold-ink); margin-left: 4px; animation: pulseFade 1s ease-in-out infinite; }

/* Round-win sweep across the winner's chip. */
.win-sweep { position: relative; overflow: hidden; }
.win-sweep::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: sweepAcross 1.05s cubic-bezier(.3,.7,.4,1) 2;
  pointer-events: none;
}
@keyframes sweepAcross { to { transform: translateX(130%); } }

/* ---------------------------------------------------------------------
   5. FLIGHT LAYER — cards physically travelling between piles, hand and
   table. Sits above the board but below modals.
   --------------------------------------------------------------------- */
#flightLayer {
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  overflow: hidden;
}
.flying {
  position: absolute;
  transform-origin: top left;
  will-change: transform, opacity;
  border-radius: 8px;
}
.flying .fly-face,
.flying .fly-back {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 8px;
  border: 2px solid var(--card-ink);
  box-shadow: 3px 5px 10px rgba(0,0,0,0.5);
  font-weight: bold;
  background: var(--card-stock);
  overflow: hidden;
}
.flying .fly-back {
  background: var(--card-back);
}
.flying.suit-red .fly-face { color: var(--red); }
.flying.suit-black .fly-face { color: var(--card-ink); }
.flying.is-joker .fly-face { background: var(--card-stock-joker); color: var(--card-ink); }
.anim-hide { opacity: 0 !important; }

#confettiCanvas {
  position: absolute;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   6. LOBBY — host setup, seat list, guest connection stages
   --------------------------------------------------------------------- */
.setup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.setup-row .setup-label { color: var(--accent); font-size: 0.92em; text-align: left; }
.seg { display: flex; gap: 6px; }
.seg button {
  font-family: 'VT323', monospace;
  font-size: 0.86em;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 2px solid var(--panel-light);
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
}
.seg button.active { border-color: var(--gold-ink); color: var(--gold-ink); background: rgba(240,196,25,0.1); }
.seg button:disabled { opacity: 0.35; cursor: not-allowed; }

.seat-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.seat {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.3);
  border: 2px solid var(--border-soft);
  border-radius: 10px;
  padding: 7px 12px;
  text-align: left;
}
.seat.empty { border-style: dashed; color: rgba(246,236,210,0.4); }
.seat .seat-av { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; background: rgba(0,0,0,0.4); overflow: hidden; }
.seat .seat-av svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.seat .seat-name { flex: 1; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .seat-tag { font-size: 0.72em; color: var(--accent); letter-spacing: 1px; }

.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 18px; }
.avatar-opt {
  width: 44px; height: 44px;
  padding: 3px;
  border-radius: 10px;
  border: 3px solid var(--panel-light);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
}
.avatar-opt svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.avatar-opt.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,196,25,0.4); }

.stage-line { font-size: 0.95em; color: var(--cream); opacity: 0.85; margin: 4px 0 6px; min-height: 1.4em; }
.stage-hint { font-size: 0.82em; color: var(--accent); margin: 0 0 14px; line-height: 1.4; }

.pill-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.pill {
  font-size: 0.78em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--border-soft);
  background: rgba(0,0,0,0.3);
  color: var(--cream);
}

/* Settings modal gets taller with the extra sections. */
.settings-modal { width: 100%; }
.settings-modal .lobby-copy { margin: 14px 0 6px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.toggle-row span { color: var(--cream); font-size: 0.95em; }
.switch {
  width: 54px; height: 28px;
  border-radius: 999px;
  border: 2px solid var(--panel-light);
  background: var(--ink);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--panel-light);
  transition: transform 0.18s ease, background 0.18s ease;
}
.switch.on { border-color: var(--green-accent-dark); }
.switch.on::after { transform: translateX(26px); background: var(--green-accent); }

/* ---------------------------------------------------------------------
   7. MOBILE TABLE SCROLLING — momentum, contained overscroll, and a
   vertical-only touch axis so a card drag never fights the scroller.
   --------------------------------------------------------------------- */
.table-area {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-light) transparent;
}
.table-area::-webkit-scrollbar { width: 8px; }
.table-area::-webkit-scrollbar-thumb { background: var(--panel-light); border-radius: 4px; }
.table-area::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   8. MOTION PREFERENCE — the whole effects layer is optional.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .petal { display: none; }
  .card.enter-anim { animation: none; }
  .win-sweep::after { animation: none; opacity: 0; }
}
body.no-motion .petal { display: none; }
body.no-motion .flying { display: none; }
body.no-motion .win-sweep::after { animation: none; opacity: 0; }
body.no-motion .card { transition: none; }

/* Focus visibility for keyboard users. */
.btn:focus-visible, .icon-btn:focus-visible, .seg button:focus-visible,
.avatar-opt:focus-visible, .switch:focus-visible, .theme-swatch:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* In-game the floating gear is redundant — the status bar carries it. */
body.in-game .settings-btn { display: none; }

@media (max-width: 620px) {
  .pchip-name { max-width: 9ch; font-size: 0.78em; }
  .pchip-av { width: 26px; height: 26px; }
  .pchip { padding: 4px 7px 4px 5px; gap: 6px; border-width: 2px; }
  .player-rail { gap: 6px; }
  .status-phase { font-size: 0.86em; }
  .icon-btn { width: 30px; height: 30px; font-size: 13px; }
}

/* ---------------------------------------------------------------------
   9. DEPLOYMENT NOTICES + CONNECTION CHECK
   --------------------------------------------------------------------- */
.notice {
  text-align: left;
  background: rgba(232,150,60,0.12);
  border: 2px solid var(--orange);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: 0.9em;
  line-height: 1.45;
}
.notice strong { color: var(--orange); }
.notice code {
  font-family: 'VT323', monospace;
  background: var(--chip-bg);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--gold-ink);
}
.notice.calm { background: rgba(79,168,216,0.1); border-color: var(--blue); }
.notice.calm strong { color: var(--blue); }

.invite-link {
  display: block;
  width: 100%;
  font-family: 'VT323', monospace;
  font-size: 0.85em;
  background: var(--ink);
  color: var(--blue);
  border: 2px solid var(--panel-light);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 10px 0 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diag-list { text-align: left; margin: 6px 0 16px; }
.diag-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 12px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: rgba(0,0,0,0.32);
  border-left: 4px solid var(--panel-light);
  font-size: 0.88em;
  line-height: 1.4;
}
.diag-line strong { color: var(--cream); }
.diag-line .diag-mark { font-size: 1.1em; line-height: 1.2; flex: 0 0 auto; }
.diag-line .diag-detail { display: block; color: rgba(246,236,210,0.72); margin-top: 2px; }
.diag-pass { border-left-color: var(--green-accent); }
.diag-pass .diag-mark { color: var(--green-accent); }
.diag-warn { border-left-color: var(--orange); }
.diag-warn .diag-mark { color: var(--orange); }
.diag-fail { border-left-color: var(--red); }
.diag-fail .diag-mark { color: var(--red); }
.diag-busy { border-left-color: var(--blue); }
.diag-busy .diag-mark { color: var(--blue); }

/* src/styles.css part 02 — Side panel, option chooser, compact game layout, settings.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   10. SIDE PANEL — table log and chat
   On a wide screen it docks to the right of the board and the board
   simply gets narrower. On a phone it slides in over the board as a
   drawer, because 380px of width has none to spare.
   ===================================================================== */
.game-shell { display: flex; flex: 1; min-height: 0; gap: 10px; }
.game-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; gap: 6px; }

.side-panel {
  width: 296px;
  flex: 0 0 296px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 3px solid var(--panel-light);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}
.side-panel.hidden { display: none; }
.side-tabs { display: flex; border-bottom: 2px solid var(--panel-light); flex: 0 0 auto; }
.side-tab {
  flex: 1;
  font-family: 'VT323', monospace;
  font-size: 0.92em;
  padding: 8px 4px;
  background: transparent;
  color: rgba(246,236,210,0.6);
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  letter-spacing: 1px;
}
.side-tab.active { color: var(--gold-ink); border-bottom-color: var(--gold); background: rgba(240,196,25,0.07); }
.side-tab .tab-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  margin-left: 5px;
  vertical-align: 2px;
}

/* --- More obvious chat notification -------------------------------- */
.icon-btn { position: relative; overflow: visible; }

.notif-badge {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8a5c, var(--red, #c0392b));
  border: 2px solid var(--ink, #1a1712);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  animation: badgePop 0.35s ease;
}

@keyframes badgePop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.icon-btn.notif-attn {
  animation: notifShake 0.5s ease;
}

@keyframes notifShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-3px) rotate(-6deg); }
  40% { transform: translateX(3px) rotate(6deg); }
  60% { transform: translateX(-2px) rotate(-4deg); }
  80% { transform: translateX(2px) rotate(4deg); }
}

.chat-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(0);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(90vw, 420px);
  background: var(--panel-light);
  border: 3px solid var(--gold);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
  animation: chatToastIn 0.3s ease;
}

.chat-toast.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}

@keyframes chatToastIn {
  from { transform: translateX(-50%) translateY(14px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.chat-toast-icon { font-size: 18px; flex: 0 0 auto; }
.chat-toast-body { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.chat-toast-name { font-size: 0.75em; color: var(--gold-ink); font-weight: bold; }
.chat-toast-text {
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-close { flex: 0 0 auto; width: 34px; border: none; background: transparent; color: var(--cream); font-size: 15px; cursor: pointer; }
.side-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-pane.hidden { display: none; }

.log-scroll, .chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-light) transparent;
}
.log-scroll::-webkit-scrollbar, .chat-scroll::-webkit-scrollbar { width: 7px; }
.log-scroll::-webkit-scrollbar-thumb, .chat-scroll::-webkit-scrollbar-thumb { background: var(--panel-light); border-radius: 4px; }

.log-round {
  font-size: 0.72em;
  letter-spacing: 2px;
  color: var(--accent);
  margin: 12px 0 5px;
  padding-bottom: 3px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.3);
}
.log-round:first-child { margin-top: 0; }
.log-entry {
  display: flex;
  gap: 7px;
  font-size: 0.82em;
  line-height: 1.35;
  padding: 3px 0;
  color: rgba(246,236,210,0.9);
}
.log-entry .log-mark { flex: 0 0 auto; width: 1.1em; text-align: center; opacity: 0.85; }
.log-entry .log-who { color: var(--gold-ink); }
.log-entry.log-out { color: var(--green-accent); }
.log-entry.log-meld .log-mark { color: var(--blue); }
.log-entry.log-discard .log-mark { color: var(--orange); }
.log-empty, .chat-empty { color: rgba(246,236,210,0.4); font-size: 0.85em; text-align: center; padding: 20px 8px; line-height: 1.5; }

.chat-msg { margin-bottom: 8px; font-size: 0.86em; line-height: 1.35; }
.chat-msg .chat-name { color: var(--gold-ink); margin-right: 5px; }
.chat-msg.is-me .chat-name { color: var(--blue); }
.chat-msg .chat-text { color: var(--cream); overflow-wrap: anywhere; }
.chat-msg.chat-system { color: rgba(246,236,210,0.55); font-style: italic; text-align: center; font-size: 0.8em; }
.chat-compose { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px; border-top: 2px solid var(--panel-light); }
.chat-compose input {
  flex: 1; min-width: 0;
  font-family: 'VT323', monospace;
  font-size: 0.95em;
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--panel-light);
  border-radius: 8px;
  padding: 7px 9px;
  outline: none;
  user-select: text;
}
.chat-compose input:focus { border-color: var(--blue); }
.chat-send { flex: 0 0 auto; width: 40px; border-radius: 8px; border: none; background: linear-gradient(180deg, #82c6ea, var(--blue)); color: var(--card-ink); cursor: pointer; font-size: 16px; }
.chat-send:disabled { opacity: 0.35; cursor: not-allowed; }

@media (max-width: 900px) {
  .side-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 88vw);
    flex-basis: auto;
    z-index: 600;
    border-radius: 14px 0 0 14px;
    border-right: none;
    box-shadow: -14px 0 40px rgba(0,0,0,0.55);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =====================================================================
   11. OPTION CHOOSER — picking what a Joker becomes, which meld to patch
   ===================================================================== */
.opt-list { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 16px; }
.opt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.32);
  border: 2px solid var(--border-soft);
  border-radius: 11px;
  padding: 9px 11px;
  cursor: pointer;
  text-align: left;
  color: var(--cream);
  font-family: 'VT323', monospace;
  font-size: 1em;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opt-row:hover, .opt-row:focus-visible { border-color: var(--gold); background: rgba(240,196,25,0.09); }
.opt-cards { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; gap: 3px; }
.opt-chip {
  font-size: 0.9em;
  padding: 3px 6px;
  border-radius: 5px;
  background: #f6ecd2;
  color: #1a1712;
  border: 1px solid rgba(0,0,0,0.3);
  line-height: 1.1;
  white-space: nowrap;
}
.opt-chip.red { color: #c1332f; }
.opt-chip.jkr { background: linear-gradient(160deg, var(--gold), var(--orange)); color: #4a3405; }
.opt-chip.mark { outline: 2px solid var(--blue); outline-offset: 1px; }
.opt-label { flex: 0 0 auto; font-size: 0.8em; color: var(--blue); letter-spacing: 1px; }

/* =====================================================================
   12. HAND CARD COUNT + COMPACT GAME LAYOUT
   ===================================================================== */
/* Deliberately quieter than the name above it: this is a detail you
   glance at, not the player's identity. */
.pchip-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72em;
  color: rgba(246,236,210,0.66);
  white-space: nowrap;
}
.pchip-count .pchip-cardmark {
  width: 0.5em; height: 0.72em;
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: 0.65;
}
.pchip.low-cards .pchip-count { color: var(--orange); }
.pchip.low-cards .pchip-count .pchip-cardmark { opacity: 1; }
.pchip-name { font-size: 0.92em; }
.pchip-meta { gap: 8px; }

.player-rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.player-rail::-webkit-scrollbar { display: none; }
.pchip { flex: 0 0 auto; }

.hand-row {
  flex-wrap: nowrap;
  overflow: visible;
  /* Flex items default to min-width:auto, so a row of overflowing cards can
     stretch the row itself — and then measuring the row tells you how wide
     the cards are, not how much space they have. */
  min-width: 0;
  min-height: calc(var(--card-h) + 26px);
  padding: 16px 0 4px;
}

/* Reports the current base card width no matter what the hand row has been
   overridden to, and no matter what transforms, fades or deal animations
   the real cards are in the middle of. Measuring a real card was the weak
   link: mid-deal it can be mid-flight, mid-fade or not yet laid out. */
.hand-probe {
  position: absolute;
  left: -9999px;
  top: 0;
  width: var(--card-w);
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}

.piles-row { gap: clamp(14px, 5vw, 34px); }

.game-root { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
body.in-game .statusbar { padding-top: max(5px, env(safe-area-inset-top)); }

@media (max-width: 620px) {
  .game-root { padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); gap: 4px; }
  .statusbar { padding: 4px 6px; gap: 6px; border-width: 2px; }
  .status-round { font-size: 0.66em; }
  .table-area { padding: 8px 6px; padding-top: calc(var(--table-card-h) * 0.28 + 12px); border-width: 2px; }
  .table-melds { gap: 10px; }
  .meld-group { padding: 7px 8px 7px 6px; }
  .meld-caption { font-size: 0.72em; padding: 3px 7px; }
  .evaluator-banner { font-size: 10px; padding: 7px 10px; }
  /* Four actions on one row on a phone; Rules already lives in the menu,
     so it does not need to steal a second row down here. */
  .action-bar { gap: 5px; flex-wrap: nowrap; }
  .piles-row { padding-top: 30px; }
  .action-bar .btn {
    font-size: 0.85em; padding: 11px 4px; flex: 1 1 0; min-width: 0;
    letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .action-bar #btnHelp { display: none; }
  /* Full labels don't fit four-up on a phone, and an ellipsis mid-word is
     worse than a shorter word. */
  .action-bar .btn-more { display: none; }

}
@media (max-height: 620px) {
  .hand-row { padding: 10px 0 2px; min-height: calc(var(--card-h) + 14px); }
  .piles-row { padding: 2px 0; }
}

/* The floating settings gear collides with notched status bars. */
.settings-btn { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }

/* Long lobby cabinets need their buttons reachable with one thumb. */
.menu-buttons .btn { width: 100%; }
.seg { flex-wrap: wrap; justify-content: flex-end; }
.setup-row { flex-wrap: wrap; }

/* =====================================================================
   13. MUSIC + MISC SETTINGS
   ===================================================================== */
.range-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
/* Fixed label column so the two sliders start at the same x. */
.range-row > span:first-child { flex: 0 0 5.2em; font-size: 0.92em; text-align: left; }
/* Drawn by us, not by the UA. Relying on accent-color left the unfilled
   track to the browser's own judgement, which is a dark grey in Chrome
   whatever colour-scheme says — fine on felt, wrong on a cream panel, and
   it had already flip-flopped once between builds. --pct is written by
   syncVolumeUi so the fill is exact rather than approximated. */
.range-row input[type=range] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.range-row input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--range-fill) 0 var(--pct, 50%),
    var(--range-track) var(--pct, 50%) 100%);
}
.range-row input[type=range]::-moz-range-track {
  height: 8px; border-radius: 999px; background: var(--range-track);
}
.range-row input[type=range]::-moz-range-progress {
  height: 8px; border-radius: 999px; background: var(--range-fill);
}
.range-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--range-fill);
  border: 2px solid var(--range-thumb-ring);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.range-row input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--range-fill);
  border: 2px solid var(--range-thumb-ring);
}
/* A slider at zero IS off, so the toggles were redundant controls for the
   same idea. The readout makes that unambiguous. */
.range-row .range-val {
  flex: 0 0 3.2em;
  text-align: right;
  font-size: 0.8em;
  color: var(--accent);
  letter-spacing: 1px;
}
.range-row.is-off .range-val { color: rgba(246,236,210,0.35); }

/* Shadows tuned for a dark app read as smudges on a light one. */
body.light .cabinet { box-shadow: 0 6px 0 var(--panel-edge), 0 14px 26px rgba(60, 50, 34, 0.22); }
body.light .btn { box-shadow: 0 5px 0 rgba(60, 50, 34, 0.3), 0 8px 14px rgba(60, 50, 34, 0.18); }
body.light .btn-ghost { color: var(--cream); border-color: var(--panel-edge); box-shadow: none; }
body.light .statusbar,
body.light .pchip,
body.light .side-panel,
body.light .table-area { box-shadow: 0 3px 12px rgba(60, 50, 34, 0.18); }
body.light .modal-backdrop { background: rgba(40, 33, 20, 0.45); }
body.light .toast { color: var(--cream); }
body.light .text-input,
body.light .chat-compose input,
body.light .room-code { color: var(--cream); }
/* An off switch on a cream panel should look empty, not filled with mud;
   an on switch should be unmistakably green. */
body.light .switch { background: #ffffff; border-color: #cdbfa2; }
body.light .switch::after { background: #c9bda4; }
body.light .switch.on { background: #e2f3e4; border-color: #4c9a5e; }
body.light .switch.on::after { background: #3f8f52; }
body.light .log-entry { color: rgba(55, 48, 31, 0.9); }
/* The accent is tuned to sit on felt. On a light panel it disappears, so
   anything printed on chrome uses a muted version of the chrome text
   colour instead of borrowing the table's accent. */
body.light .status-round,
body.light .setup-row .setup-label,
body.light .field-label,
body.light .seat .seat-tag,
body.light .stage-hint,
body.light .score-label,
body.light .log-round,
body.light .opt-label,
body.light .range-row .range-val { color: rgba(55, 48, 31, 0.68); }
body.light .log-round { border-bottom-color: rgba(55, 48, 31, 0.22); }
body.light .status-phase { color: #2b6b42; }

/* --- Light mode corrections found by the contrast sweep, not by eye. --- */
body.light {
  --chip-bg: rgba(255, 255, 255, 0.72);
  --chip-ink: #37301f;
  --range-fill: #e3a417;
  --range-track: rgba(60, 50, 34, 0.16);
  --range-thumb-ring: rgba(255, 255, 255, 0.9);
}
/* Accent colours tuned for a dark panel are too pale on cream. */
body.light .notice { background: rgba(196, 116, 22, 0.13); border-color: #b4681a; }
body.light .notice strong { color: #9a5410; }
body.light .notice.calm { background: rgba(31, 109, 156, 0.11); border-color: #2c6f97; }
body.light .notice.calm strong { color: #23607f; }
body.light .notice code { border: 1px solid rgba(60, 50, 34, 0.18); }
body.light .cap-type-run { color: #a55a0c; }
body.light .cap-type-set { color: #23607f; }
/* These sat between 3.4 and 4.5 against cream — legible, but not comfortably
   so. Raising the alpha rather than the darkness keeps them subordinate. */
body.light .status-round,
body.light .setup-row .setup-label,
body.light .field-label,
body.light .seat .seat-tag,
body.light .stage-hint,
body.light .score-label,
body.light .log-round,
body.light .opt-label,
body.light .range-row .range-val { color: rgba(48, 41, 25, 0.86); }
body.light .pchip-count { color: rgba(48, 41, 25, 0.78); }
/* A deep bronze reads as murk on a slider; this amber stays legible and
   still looks like a control rather than a stain. */
/* Pure white wells swallowed the paler pixel art — the frog's eyes in
   particular. A touch of warmth puts the outlines back. */
body.light .avatar-opt { background: #f2e9d6; }
body.light .pchip-av { background: #f2e9d6; }
body.light .side-tab.active { color: #7a5704; background: rgba(154, 111, 6, 0.08); }

/* THE one that was making light mode look dirty. The CRT layer paints a
   60%-black vignette and 12%-black scanlines over the entire app at
   z-index 9999. On a dark table that is the intended grain; over cream
   panels it is a grey wash, and it was responsible for all of it at once —
   the murky bottom half of every button gradient, the avatars looking like
   they were sitting in shade, and the "vignette" on the status bar. The
   texture stays, at a fraction of the strength and tinted warm rather than
   black so it reads as paper grain instead of dimming. */
body.light .crt-overlay::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(90, 74, 44, 0) 0px,
    rgba(90, 74, 44, 0) 1px,
    rgba(90, 74, 44, 0.045) 2px,
    rgba(90, 74, 44, 0) 3px
  );
}
body.light .crt-overlay::after {
  background: radial-gradient(ellipse at center, rgba(90,74,44,0) 72%, rgba(90,74,44,0.13) 100%);
}
body.light .crt-fringe-a { background: radial-gradient(ellipse at center, transparent 70%, rgba(255, 40, 60, 0.03) 100%); }
body.light .crt-fringe-b { background: radial-gradient(ellipse at center, transparent 70%, rgba(40, 140, 255, 0.03) 100%); }

/* Softer drop shadows: the dark-mode depth reads as grime on cream. */
body.light .btn-orange { box-shadow: 0 5px 0 var(--orange-dark), 0 6px 10px rgba(60, 50, 34, 0.16); }
body.light .btn-blue { box-shadow: 0 5px 0 var(--blue-dark), 0 6px 10px rgba(60, 50, 34, 0.16); }
body.light .btn-gold { box-shadow: 0 5px 0 var(--gold-dark), 0 6px 10px rgba(60, 50, 34, 0.16); }
body.light .btn-crimson { box-shadow: 0 5px 0 var(--red-dark), 0 6px 10px rgba(60, 50, 34, 0.16); }
body.light .btn { box-shadow: 0 4px 0 rgba(60, 50, 34, 0.18), 0 6px 10px rgba(60, 50, 34, 0.12); }

/* Avatar wells were a 30%-black hole punched into a cream panel. */
body.light .avatar-opt { background: rgba(255, 255, 255, 0.7); border-color: var(--panel-edge); }
body.light .avatar-opt.active { border-color: var(--gold-dark); box-shadow: 0 0 0 2px rgba(154, 111, 6, 0.35); }
body.light .pchip-av { background: rgba(255, 255, 255, 0.7); }

/* The wordmark keeps its punch: a saturated amber on cream, with a warmer
   shadow than the dark-mode maroon. */
/* Keeping the same saturated gold as dark mode and giving it a hard dark
   outline, rather than darkening the fill. Darkening the fill is what made
   it murky: on cream there is nothing for a mid-brown to contrast against,
   so it just reads as dirty. A bright fill plus an outline reads as a
   pixel logo in either mode. */
body.light .title {
  color: #ffc61a;
  text-shadow:
    -2px 0 0 #8f2d16, 2px 0 0 #8f2d16, 0 -2px 0 #8f2d16, 0 2px 0 #8f2d16,
    -2px -2px 0 #8f2d16, 2px -2px 0 #8f2d16, -2px 2px 0 #8f2d16,
    5px 5px 0 #c9421d;
}
/* Native controls (the slider track, scrollbars, focus rings) are drawn by
   the browser, not by us. color-scheme is the only way to tell it which
   palette to draw them in — without it the range tracks stayed dark on a
   cream panel. */
body { color-scheme: dark; }
body.light { color-scheme: light; }
/* The felt accent is a pastel; on a light panel the filled part of a slider
   needs the deeper chrome gold to read. */
body.light .log-empty, body.light .chat-empty { color: rgba(55, 48, 31, 0.45); }
body.light .side-tab { color: rgba(55, 48, 31, 0.55); }
body.light .opt-row { background: rgba(255, 255, 255, 0.55); }
body.light .table-card,
body.light .card { box-shadow: 3px 4px 0 rgba(60, 50, 34, 0.32); }

/* Appearance picker. */
.mode-options { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.mode-options .btn { flex: 1 1 0; min-width: 0; font-size: 0.85em; padding: 10px 4px; }
.mode-options .btn.active { outline: 3px solid var(--gold); }

/* src/styles.css part 03 — Greek type fallbacks and the original profile.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   GREEK UI
   ---------------------------------------------------------------------
   The brand/logo and card numerals keep the deliberately pixelated face.
   Greek interface copy uses a clean mono face with full Greek coverage so
   localisation does not force the entire product into a novelty pixel font.
   ===================================================================== */
html[data-lang="el"] body,
html[data-lang="el"] .text-input,
html[data-lang="el"] .btn,
html[data-lang="el"] .seg button,
html[data-lang="el"] .range-row,
html[data-lang="el"] .toggle-row,
html[data-lang="el"] .chat-compose input,
html[data-lang="el"] .opt-row {
  font-family: 'Noto Sans Mono', monospace;
}
html[data-lang="el"] .section-title,
html[data-lang="el"] .evaluator-banner,
html[data-lang="el"] .pchip-out,
html[data-lang="el"] .running-total {
  font-family: 'Noto Sans Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.01em;
}
html[data-lang="el"] .btn { letter-spacing: 0; font-size: 0.9em; }
html[data-lang="el"] .section-title { line-height: 1.15; padding-block: .15em; }
html[data-lang="el"] .evaluator-banner { font-size: clamp(9px, 2.15vw, 12px); line-height: 1.35; }
html[data-lang="el"] .field-label { line-height: 1.35; }
html[data-lang="el"] .lobby-copy { line-height: 1.42; }

/* Browser-edge fallback. The textured #feltBg is intentionally absolute so
   Safari can use the actual page pixels beneath its translucent UI. These
   root colours are only the fallback for genuine overscroll/unpainted space,
   rather than the primary surface Safari sees at the edge. */
html, body { background-color: var(--felt-3); min-height: 100%; }
@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
}

/* =====================================================================
   PLAYER PROFILE
   Kept intentionally secondary: profiles live behind Settings or a tap on
   a player in the lobby, never in the main path to starting a game.
   ===================================================================== */
.profile-settings-button { margin-top: 18px; width: 100%; }
.profile-modal { text-align: center; max-width: 430px; }
.profile-avatar {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  padding: 7px;
  border-radius: 16px;
  background: var(--ink);
  border: 3px solid var(--panel-light);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.03), 0 8px 20px rgba(0,0,0,.35);
}
.profile-avatar svg { width: 100%; height: 100%; image-rendering: pixelated; }
.profile-name { margin-bottom: 6px; }
.profile-status {
  display: inline-block;
  margin: 0 auto 18px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 2px solid var(--panel-light);
  color: var(--accent);
  font-size: .78em;
}
.profile-game-title {
  margin: 2px 0 9px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 2.8vw, 13px);
  color: var(--cream);
}
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.profile-stat {
  min-width: 0;
  padding: 12px 6px 10px;
  border-radius: 10px;
  background: var(--ink);
  border: 2px solid var(--panel-light);
}
.profile-stat strong {
  display: block;
  color: var(--gold-ink);
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(12px, 4vw, 18px);
  margin-bottom: 7px;
}
.profile-stat span { color: var(--cream); font-size: .72em; line-height: 1.15; }
.profile-hint { color: var(--cream); opacity: .72; font-size: .78em; margin: 2px 0 16px; line-height: 1.35; }
.profile-hint.hidden { display: none; }

.seat.profile-tappable, .pill.profile-tappable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .seat.profile-tappable:hover, .pill.profile-tappable:hover { filter: brightness(1.08); }
}

/* Touch-first hand selection: the lifted card keeps its visual emphasis but
   cards to its right paint above it, leaving their rank/suit edges exposed
   and tappable. Desktop keeps the dramatic selected-card top stack. */
@media (pointer: coarse) {
  .card.selected {
    transform: translateY(-24px) rotateX(0) rotateY(0) !important;
    box-shadow: 0 12px 0 -5px rgba(0,0,0,.14), 3px 16px 13px rgba(0,0,0,.45), 0 0 0 3px var(--gold);
  }
}

/* src/styles.css part 04 — v6–v9 layers: quick play, turn clock, round hands, social and reactions.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   v6: QUICK PLAY + PROFILE/OPERATOR POLISH
   ===================================================================== */
.quick-cabinet { max-width: 520px; text-align: center; }
.quick-play-btn { position: relative; overflow: hidden; }
.quick-play-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.18) 47%, transparent 60%);
  transform: translateX(-140%);
  animation: quickSheen 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes quickSheen { 0%,72% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
.quick-orbit {
  width: 92px; height: 58px; margin: 4px auto 18px; position: relative;
}
.quick-orbit span {
  position: absolute; width: 30px; height: 42px; border-radius: 5px;
  border: 2px solid var(--panel-edge); background: var(--card-stock);
  box-shadow: 2px 3px 0 rgba(0,0,0,.35);
  transform-origin: 50% 130%;
  animation: quickDeal 1.4s ease-in-out infinite alternate;
}
.quick-orbit span:nth-child(1) { left: 10px; transform: rotate(-14deg); animation-delay: -.15s; }
.quick-orbit span:nth-child(2) { left: 27px; transform: rotate(-5deg); animation-delay: -.3s; }
.quick-orbit span:nth-child(3) { left: 44px; transform: rotate(5deg); animation-delay: -.45s; }
.quick-orbit span:nth-child(4) { left: 61px; transform: rotate(14deg); animation-delay: -.6s; }
@keyframes quickDeal { to { translate: 0 -5px; } }

/* My Profile now layers over Settings instead of tearing Settings down while
   the network request runs. The profile modal is later painted above it. */
.profile-backdrop { z-index: 10030; animation: profileFade .14s ease-out both; }
.profile-backdrop .profile-modal { animation: profilePop .18s cubic-bezier(.2,.85,.25,1); }
@keyframes profileFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes profilePop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.seat.profile-tappable, .pill.profile-tappable, .pchip.profile-tappable {
  -webkit-tap-highlight-color: transparent;
}
.seat.profile-tappable:active, .pill.profile-tappable:active, .pchip.profile-tappable:active {
  filter: brightness(1.12);
}

.operator-modal { max-width: 560px; text-align: left; }
.operator-section {
  margin: 12px 0;
  padding: 12px;
  border: 2px solid var(--border-soft);
  border-radius: 11px;
  background: rgba(0,0,0,.2);
}
.operator-section .setup-label { display: block; margin-bottom: 8px; color: var(--accent); }
.operator-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.operator-select, .operator-number { margin: 0; min-width: 0; }
.operator-grid .btn { padding: 10px 14px; }
.operator-actions { margin-top: 14px; }
@media (max-width: 520px) {
  .operator-grid { grid-template-columns: 1fr 1fr; }
  .operator-grid .btn { grid-column: 1 / -1; width: 100%; }
  .operator-grid-score { grid-template-columns: 1.3fr .7fr; }
}

/* New rounds must never inherit transient transforms from cards that happened
   to reuse an id in the previous hand. JS also clears the DOM at the round
   boundary; this gives the browser no transitionable transform to retain. */
.hand-row.round-reset .card { transition: none !important; transform: none !important; }

/* =====================================================================
   v7: TURN CLOCK + CLEAN ROUND HAND REVEAL
   ===================================================================== */
.turn-clock {
  position: relative;
  min-width: 48px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  border: 2px solid var(--panel-light);
  background: rgba(0,0,0,.24);
  color: var(--cream);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.turn-clock-icon { font-family: ui-monospace, monospace; font-size: 14px; opacity: .78; }
.turn-clock-strikes {
  color: var(--orange);
  padding-left: 4px;
  border-left: 1px solid rgba(255,255,255,.16);
}
.turn-clock.urgent { color: #fff4b8; border-color: var(--orange); }
.turn-clock.critical { color: #fff; border-color: var(--red); animation: clockNudge .72s ease-in-out infinite alternate; }
.turn-clock-bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: currentColor;
  opacity: .72;
  transition: transform .18s linear;
}
@keyframes clockNudge { to { box-shadow: 0 0 12px rgba(214,48,58,.42); } }

.round-hand-groups {
  display: grid;
  gap: 9px;
  width: 100%;
  margin: 4px 0 12px;
}
.round-hand-group {
  opacity: 0;
  transform: translateY(6px);
  padding: 9px 10px 10px;
  border-radius: 10px;
  border: 2px solid var(--panel-light);
  background: rgba(0,0,0,.20);
  transition: opacity .22s ease, transform .22s ease;
}
.round-hand-group.revealed { opacity: 1; transform: translateY(0); }
.round-hand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--cream);
  font-size: .75em;
}
.round-hand-head strong { color: var(--accent); font-weight: 700; }
.round-hand-penalty {
  color: var(--gold-ink);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  white-space: nowrap;
}
.round-hand-cards {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 54px;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 5px 3px;
}
.round-result-card {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 54px;
  margin-left: -15px;
  border-radius: 5px;
  background: var(--card-stock);
  border: 2px solid var(--card-ink);
  box-shadow: 2px 3px 0 rgba(0,0,0,.35);
  font-size: 12px;
  container-type: size;
}
.round-result-card:first-child { margin-left: 0; }
.round-result-card .cardface { border-radius: 4px; }
.round-result-card.is-joker { background: var(--card-stock-joker); }
.round-scoreboard.reveal-ready { animation: profileFade .2s ease-out both; }

@media (max-width: 520px) {
  .turn-clock { min-width: 43px; height: 32px; padding: 0 6px; font-size: 8px; gap: 3px; }
  .turn-clock-icon { display: none; }
  .status-side { gap: 5px; }
  .round-result-card { width: 34px; height: 49px; margin-left: -14px; }
  .round-hand-head { font-size: .70em; }
}
.round-result-card.suit-red { color: var(--red); }
.round-result-card.suit-black { color: var(--card-ink); }

/* =====================================================================
   v8: integrated turn timing, readable round hands, reactions
   ===================================================================== */
.pchip { position: relative; }
.pchip-timer {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-left: 2px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), rgba(0,0,0,.34));
  display: grid;
  place-items: center;
  overflow: visible;
  font-family: 'Press Start 2P', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
.pchip-timer-seconds {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  transform: translateY(-1px);
}
.pchip-timer-strikes {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--orange);
  font-size: 5px;
  line-height: 1;
}
.pchip-timer-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--green-accent);
  transform-origin: left center;
  transition: transform .18s linear, background .2s ease;
}
.pchip-timer.urgent { border-color: var(--orange); }
.pchip-timer.urgent .pchip-timer-bar { background: var(--orange); }
.pchip-timer.critical { border-color: var(--red); animation: clockNudge .72s ease-in-out infinite alternate; }
.pchip-timer.critical .pchip-timer-bar { background: var(--red); }
.pchip-strikes {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  line-height: 1;
  color: var(--orange);
  white-space: nowrap;
}

.conn-alert {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  line-height: 1.25;
  color: var(--orange);
}
.conn-alert.down { color: var(--red); }
.operator-quick {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--gold-ink);
  border-color: rgba(240,196,25,.38);
}
.reaction-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: -1px;
}

.round-hand-viewer {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 2px solid var(--panel-light);
  background: rgba(0,0,0,.20);
  box-sizing: border-box;
}
.round-hand-viewer.page-flash { animation: profileFade .16s ease-out both; }
.round-hand-viewer-head { margin-bottom: 10px; }
.round-hand-cards-large {
  min-height: 94px;
  padding: 4px 8px 8px;
  overflow: visible;
}
.round-result-card {
  width: 64px;
  height: 88px;
  margin-left: -27px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: 'VT323', monospace;
  line-height: .9;
  background: var(--card-stock);
  border: 2px solid var(--card-ink);
  box-shadow: 2px 3px 0 rgba(0,0,0,.35);
  position: relative;
  flex: 0 0 auto;
}
.round-result-card:first-child { margin-left: 0; }
.round-result-card.is-joker { background: var(--card-stock-joker); }
.rr-rank { font-size: 31px; font-weight: 700; }
.rr-suit { font-size: 23px; font-weight: 700; }
.round-result-card.is-joker .rr-suit { font-size: 16px; letter-spacing: 1px; }
.round-hand-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}
.round-hand-arrow {
  width: 42px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid var(--border-soft);
  background: var(--panel-light);
  color: var(--cream);
  font-family: 'VT323', monospace;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
.round-hand-arrow:disabled { opacity: .28; cursor: default; }
.round-hand-counter {
  min-width: 52px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--accent);
}
.round-scores-btn { margin: 10px auto 0; width: min(210px, 80%); padding: 9px 12px; }
.round-empty-hand { display: flex; align-items: center; min-height: 82px; }

.reaction-picker {
  position: absolute;
  z-index: 330;
  top: 54px;
  right: 10px;
  width: min(250px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 12px;
  border: 3px solid var(--panel-light);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  animation: joinCardIn 160ms cubic-bezier(.2,.85,.2,1) both;
}
.reaction-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
}
.reaction-picker-avatar {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(0,0,0,.3);
  overflow: hidden;
}
.reaction-picker-avatar svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.reaction-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.reaction-option {
  min-height: 38px;
  border-radius: 8px;
  border: 2px solid var(--border-soft);
  background: var(--panel-light);
  color: var(--cream);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  cursor: pointer;
}
.reaction-option:active { transform: translateY(2px); }
.reaction-stage { position: fixed; inset: 0; z-index: 420; pointer-events: none; overflow: hidden; }
.reaction-pop {
  position: absolute;
  width: 70px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px;
  border-radius: 12px;
  border: 3px solid var(--panel-light);
  background: var(--panel);
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
  animation: reactionFloat 2.55s cubic-bezier(.2,.7,.2,1) forwards;
}
.reaction-pop-avatar { width: 34px; height: 34px; display: block; }
.reaction-pop-avatar svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.reaction-pop-text { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--gold-ink); white-space: nowrap; }
.reaction-laugh .reaction-pop-avatar { animation: reactionBounce .33s ease-in-out 4 alternate; }
.reaction-wow .reaction-pop-avatar { animation: reactionPulse .45s ease-in-out 3 alternate; }
.reaction-gg .reaction-pop-avatar, .reaction-nice .reaction-pop-avatar { animation: reactionNod .42s ease-in-out 3 alternate; }
.reaction-nooo .reaction-pop-avatar { animation: reactionShake .12s linear 8 alternate; }
.reaction-hmm .reaction-pop-avatar { animation: reactionTilt .7s ease-in-out 2 alternate; }
@keyframes reactionFloat { 0% { opacity:0; transform:translateY(8px) scale(.88); } 12% { opacity:1; transform:translateY(0) scale(1); } 78% { opacity:1; } 100% { opacity:0; transform:translateY(-38px) scale(.96); } }
@keyframes reactionBounce { to { transform: translateY(-5px); } }
@keyframes reactionPulse { to { transform: scale(1.14); } }
@keyframes reactionNod { to { transform: translateY(3px) rotate(2deg); } }
@keyframes reactionShake { to { transform: translateX(4px); } }
@keyframes reactionTilt { to { transform: rotate(-8deg) translateY(2px); } }

@media (max-width: 520px) {
  .pchip-timer { width: 36px; height: 36px; }
  .pchip-timer-seconds { font-size: 8px; }
  .pchip-timer-strikes { font-size: 5px; bottom:-8px; gap:3px; }
  .conn-alert { max-width: 82px; font-size: 5px; }
  .round-hand-cards-large { min-height: 82px; padding-inline: 3px; }
  .round-result-card { width: 54px; height: 76px; margin-left: -24px; }
  .round-hand-cards-large.dense .round-result-card { margin-left: -27px; }
  .round-result-card:first-child, .round-hand-cards-large.dense .round-result-card:first-child { margin-left: 0; }
  .rr-rank { font-size: 27px; }
  .rr-suit { font-size: 20px; }
  .round-result-card.is-joker .rr-suit { font-size: 14px; }
  .reaction-picker { top: 48px; right: 6px; }
}

/* =====================================================================
   v9: integrated social controls, sprite reactions, round summary polish
   ===================================================================== */
.game-social-strip {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 35;
  padding: 0 8px;
}
.social-react-btn {
  height: 36px;
  min-width: 92px;
  padding: 4px 11px 4px 7px;
  border: 2px solid rgba(240,196,25,.54);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(49,44,35,.94), rgba(25,23,20,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 0 rgba(0,0,0,.34);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1;
  text-transform: uppercase;
}
.social-react-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.34); }
.social-react-avatar { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.social-react-avatar svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.social-react-label { padding-top: 1px; }

/* Chat previews now belong to the table's social strip instead of floating
   over Safari's lower browser chrome. */
.game-social-strip .chat-toast {
  position: absolute;
  left: calc(50% + 58px);
  bottom: auto;
  top: 0;
  transform: translateX(0);
  width: min(250px, calc(50vw - 72px));
  max-width: 250px;
  min-height: 36px;
  box-sizing: border-box;
  padding: 6px 10px 6px 9px;
  gap: 7px;
  border-width: 2px;
  border-radius: 10px;
  z-index: 55;
  animation: chatBubbleIn .24s ease-out;
}
.game-social-strip .chat-toast.hidden { transform: translateX(8px); opacity: 0; }
.game-social-strip .chat-toast-icon {
  width: 16px; height: 13px; flex: 0 0 auto;
  border: 2px solid var(--gold);
  border-radius: 4px;
  position: relative;
}
.game-social-strip .chat-toast-icon::after {
  content: '';
  position: absolute;
  left: 2px; bottom: -5px;
  width: 5px; height: 5px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: skewY(-32deg);
  background: var(--panel-light);
}
.game-social-strip .chat-toast-name { font-size: 7px; }
.game-social-strip .chat-toast-text { font-size: 14px; line-height: 1.05; }
@keyframes chatBubbleIn { from { opacity:0; transform:translateX(8px) scale(.97); } to { opacity:1; transform:translateX(0) scale(1); } }

/* Actual pixel-frame reaction animation. Each 60x72 PNG contains five 12x12
   frames per reaction, in six reaction rows. Total atlas weight for all eight
   starter characters is under 5 KB. */
.reaction-pop {
  min-width: 94px;
  min-height: 92px;
  padding: 7px 9px 8px;
  border-radius: 14px;
  gap: 2px;
  flex-direction: column;
  justify-content: center;
  background: rgba(24,22,20,.95);
  border: 3px solid var(--gold);
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08);
  animation: reactionBubbleLife 3.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.reaction-sprite {
  width: 64px;
  height: 64px;
  display: block;
  flex: 0 0 auto;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 500% 600%;
  background-position-x: 0%;
  animation: reactionSpritePlay 1.05s steps(4, end) 1 forwards;
}
.reaction-sprite-fox { background-image: url('../assets/reactions/fox.png'); }
.reaction-sprite-cat { background-image: url('../assets/reactions/cat.png'); }
.reaction-sprite-frog { background-image: url('../assets/reactions/frog.png'); }
.reaction-sprite-owl { background-image: url('../assets/reactions/owl.png'); }
.reaction-sprite-bear { background-image: url('../assets/reactions/bear.png'); }
.reaction-sprite-panda { background-image: url('../assets/reactions/panda.png'); }
.reaction-sprite-penguin { background-image: url('../assets/reactions/penguin.png'); }
.reaction-sprite-axolotl { background-image: url('../assets/reactions/axolotl.png'); }
.reaction-row-laugh { background-position-y: 0%; }
.reaction-row-wow { background-position-y: 20%; }
.reaction-row-gg { background-position-y: 40%; }
.reaction-row-nice { background-position-y: 60%; }
.reaction-row-nooo { background-position-y: 80%; }
.reaction-row-hmm { background-position-y: 100%; }
.reaction-pop-text { font-size: 8px; margin-top: -2px; }
@keyframes reactionSpritePlay { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@keyframes reactionBubbleLife {
  0% { opacity: 0; transform: translateY(7px) scale(.90); }
  9% { opacity: 1; transform: translateY(0) scale(1); }
  83% { opacity: 1; transform: translateY(-3px) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(.96); }
}
/* Disable the v8 whole-character transform animations. The sprite frames now
   contain the movement themselves. */
.reaction-laugh .reaction-pop-avatar,
.reaction-wow .reaction-pop-avatar,
.reaction-gg .reaction-pop-avatar,
.reaction-nice .reaction-pop-avatar,
.reaction-nooo .reaction-pop-avatar,
.reaction-hmm .reaction-pop-avatar { animation: none !important; }

/* Keep hand browsing and scores together. The hand region is the part that
   yields vertical space on short screens, rather than leaving a dead void. */
#modal-round .modal { max-height: min(94dvh, 840px); display: flex; flex-direction: column; }
#roundTallyArea { min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.round-hand-viewer { margin-bottom: 10px; }
.round-scoreboard { flex: 0 0 auto; margin-top: 0; padding-top: 8px; border-top: 2px dashed rgba(255,255,255,.10); }
.round-scoreboard .row { padding-block: 5px; }
#btnNextRound { flex: 0 0 auto; margin-top: 10px; }

/* Persistent inactivity notice. It is deliberately modal and has no timer so
   somebody returning after being AFK cannot miss why the table disappeared. */
.inactivity-modal { max-width: 470px; }

/* Progression is deliberately profile-only: no home-screen XP chrome. */
.profile-progress {
  margin: 12px 0 4px;
  padding: 10px 11px;
  border: 2px solid var(--panel-light);
  border-radius: 10px;
  background: rgba(0,0,0,.18);
}
.profile-progress-top { display:flex; justify-content:space-between; gap:10px; font-family:'Press Start 2P',monospace; font-size:7px; color:var(--cream); }
.profile-xp-track { margin-top:8px; height:7px; border-radius:5px; overflow:hidden; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.08); }
.profile-xp-track > span { display:block; height:100%; width:0; background:var(--gold); transition:width .35s ease; }
.profile-next-unlock { margin-top:7px; font-size:.72em; color:var(--muted); }
.cosmetic-locked { opacity:.42 !important; filter:saturate(.35); position:relative; }
.cosmetic-locked::after { content:'LOCK'; position:absolute; inset:auto 2px 2px; padding:2px 3px; border-radius:3px; background:rgba(18,17,15,.88); color:var(--gold-ink); font-family:'Press Start 2P',monospace; font-size:5px; pointer-events:none; }

@media (max-width: 520px) {
  .game-social-strip { min-height: 36px; padding-inline: 4px; }
  .social-react-btn { height: 34px; min-width: 86px; padding-inline: 6px 9px; }
  .social-react-avatar { width: 24px; height: 24px; }
  .game-social-strip .chat-toast { left: calc(50% + 50px); width: min(205px, calc(50vw - 54px)); padding-inline: 7px; }
  .game-social-strip .chat-toast-text { font-size: 12px; }
  .reaction-pop { min-width: 88px; min-height: 87px; }
  .reaction-sprite { width: 60px; height: 60px; }
  #modal-round .modal { max-height: 90dvh; }
}

/* v9 final positioning refinements */
.reaction-picker { position: fixed; right: auto; }
#roundTallyArea { flex: 0 1 auto; max-height: min(48dvh, 420px); }

/* src/styles.css part 05 — v10–v11 layers: hierarchy, progression, dashboard and legibility.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   v10: unified UI hierarchy + first-class progression + social polish
   ===================================================================== */
:root {
  --ui-primary: #e9a145;
  --ui-primary-hi: #f7c774;
  --ui-primary-shadow: #9f5d1e;
  --ui-secondary: #302c27;
  --ui-secondary-hi: #3b352f;
  --ui-secondary-edge: #665845;
  --ui-utility: #25221e;
  --ui-danger: #c94945;
  --ui-danger-hi: #e57870;
  --ui-danger-shadow: #842a27;
}

/* Menus now use one hierarchy instead of independent orange/blue/yellow
   choices. Gameplay actions retain their functional colours. */
.btn-primary {
  color: var(--card-ink);
  background: linear-gradient(180deg, var(--ui-primary-hi), var(--ui-primary));
  box-shadow: 0 5px 0 var(--ui-primary-shadow), 0 8px 14px rgba(0,0,0,.36);
}
.btn-secondary {
  color: var(--cream);
  border: 2px solid var(--ui-secondary-edge);
  background: linear-gradient(180deg, var(--ui-secondary-hi), var(--ui-secondary));
  box-shadow: 0 4px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-utility {
  color: var(--cream);
  border: 2px solid var(--panel-light);
  background: rgba(19,17,15,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.btn-danger {
  color: var(--cream);
  background: linear-gradient(180deg, var(--ui-danger-hi), var(--ui-danger));
  box-shadow: 0 5px 0 var(--ui-danger-shadow), 0 8px 14px rgba(0,0,0,.36);
}
.btn-dev {
  color: var(--gold-ink);
  border: 2px dashed rgba(240,196,25,.42);
  background: rgba(240,196,25,.08);
  box-shadow: none;
}
.btn-primary:not(:disabled):active,
.btn-danger:not(:disabled):active { box-shadow: 0 1px 0 rgba(0,0,0,.42); }
.btn-secondary:not(:disabled):active { box-shadow: 0 1px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04); }

.btn-progress {
  color: var(--cream);
  overflow: hidden;
  border: 2px solid rgba(240,196,25,.36);
  background:
    linear-gradient(90deg, rgba(240,196,25,.08), transparent 36%),
    linear-gradient(180deg, #39322a, #26221e);
  box-shadow: 0 4px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-progress::before {
  content: '★';
  margin-right: 9px;
  color: var(--gold-ink);
  font-family: 'Press Start 2P', monospace;
  font-size: .72em;
}

/* Make segmented settings controls feel like one system as well. */
.seg {
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 12px;
  padding: 3px;
}
.seg button {
  border-color: transparent;
  background: transparent;
}
.seg button.active {
  border-color: rgba(240,196,25,.54);
  background: rgba(240,196,25,.11);
}

/* ------------------------ progression screen ------------------------ */
.progress-cabinet {
  width: min(760px, calc(100vw - 24px));
  max-width: 760px;
  min-height: min(86dvh, 760px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.progress-head { display:flex; align-items:center; gap:12px; }
.progress-head > div { min-width:0; }
.progress-back {
  width: 42px; height:42px; flex:0 0 auto;
  border-radius: 11px;
  border: 2px solid var(--panel-light);
  background: rgba(0,0,0,.23);
  color: var(--cream);
  font: 34px/30px 'VT323', monospace;
  cursor:pointer;
}
.progress-kicker {
  color: var(--gold-ink);
  font-family:'Press Start 2P',monospace;
  font-size:8px;
  letter-spacing:.6px;
  margin-bottom:4px;
}
.progress-title { margin:0; text-align:left; font-size:clamp(20px,4vw,30px); }
.progress-hero {
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 14px;
  border-radius:14px;
  border:2px solid rgba(240,196,25,.25);
  background:
    radial-gradient(circle at 12% 20%, rgba(240,196,25,.12), transparent 32%),
    rgba(0,0,0,.22);
}
.progress-avatar {
  width:64px; height:64px; flex:0 0 auto;
  padding:5px;
  border-radius:14px;
  border:3px solid var(--gold);
  background:rgba(0,0,0,.35);
  box-shadow:0 0 0 2px rgba(240,196,25,.12);
}
.progress-avatar svg { width:100%; height:100%; display:block; image-rendering:pixelated; }
.progress-hero-copy { flex:1; min-width:0; }
.progress-level-row { display:flex; justify-content:space-between; gap:10px; color:var(--cream); font-family:'Press Start 2P',monospace; font-size:8px; }
.progress-xp-track { height:11px; margin-top:10px; overflow:hidden; border-radius:7px; border:2px solid rgba(255,255,255,.08); background:rgba(0,0,0,.42); }
.progress-xp-track > span { display:block; height:100%; width:0; background:linear-gradient(90deg,#df922e,var(--gold)); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.progress-next { margin-top:8px; color:var(--accent); font-size:.78em; line-height:1.2; }
.progress-earn {
  align-self:flex-start;
  padding:6px 9px;
  border-radius:7px;
  color:var(--muted, rgba(246,236,210,.66));
  background:rgba(0,0,0,.15);
  font-size:.75em;
}
.progress-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--cream); font-family:'Press Start 2P',monospace; font-size:8px; }
.progress-collection-count { color:var(--gold-ink); font-family:'VT323',monospace; font-size:17px; }
.progress-track {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:9px;
  max-height:390px;
  overflow:auto;
  padding:2px 3px 5px;
  overscroll-behavior:contain;
}
.progress-node {
  position:relative;
  min-height:122px;
  padding:10px 8px 8px;
  border:2px solid var(--panel-light);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(50,45,39,.96),rgba(27,24,21,.96));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  overflow:hidden;
}
.progress-node.unlocked { border-color:rgba(240,196,25,.36); }
.progress-node.current { border-color:var(--gold); box-shadow:0 0 0 2px rgba(240,196,25,.12), 0 0 18px rgba(240,196,25,.12); }
.progress-node.locked { opacity:.58; filter:saturate(.55); }
.progress-node-level { font-family:'Press Start 2P',monospace; font-size:7px; color:var(--gold-ink); }
.progress-node.current .progress-node-level { color:var(--cream); }
.progress-node-rewards { display:flex; align-items:center; justify-content:center; min-height:48px; gap:4px; }
.progress-reward-icon {
  width:40px; height:40px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.26);
  overflow:hidden;
}
.progress-reward-icon svg { width:92%; height:92%; display:block; image-rendering:pixelated; }
.progress-reward-icon.swatch { box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.progress-reward-icon.deck { font-family:'Press Start 2P',monospace; font-size:7px; color:var(--cream); background:repeating-linear-gradient(45deg,rgba(var(--accent-rgb),.55) 0 4px,var(--card-back-dark) 4px 8px); }
.progress-reward-icon.texture { color:var(--cream); font-size:18px; }
.progress-node-name { color:var(--cream); font-size:.68em; line-height:1.15; min-height:2.3em; display:flex; align-items:center; justify-content:center; }
.progress-node-state { margin-top:auto; font-family:'Press Start 2P',monospace; font-size:5px; color:rgba(246,236,210,.48); }
.progress-node.unlocked .progress-node-state { color:var(--green-accent); }
.progress-node.current .progress-node-state { color:var(--gold-ink); }
.progress-collection { padding-top:2px; }
.progress-collection-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }
.progress-collection-card { padding:9px 7px; border-radius:10px; background:rgba(0,0,0,.18); border:2px solid rgba(255,255,255,.06); text-align:center; }
.progress-collection-card strong { display:block; color:var(--gold-ink); font-family:'Press Start 2P',monospace; font-size:10px; margin-bottom:5px; }
.progress-collection-card span { display:block; color:var(--cream); font-size:.72em; }
.profile-progress-compact { margin-bottom:8px; }
.profile-progress-link { width:100%; margin-top:8px; border:0; background:none; color:var(--gold-ink); font:14px 'VT323',monospace; text-decoration:underline; cursor:pointer; }

.gameover-progress {
  margin:12px 0 15px;
  padding:10px 12px;
  border:2px solid rgba(240,196,25,.32);
  border-radius:11px;
  background:rgba(240,196,25,.07);
  color:var(--cream);
}
.gameover-progress strong { color:var(--gold-ink); }
.gameover-progress .mini-xp-track { height:7px; margin-top:8px; overflow:hidden; border-radius:5px; background:rgba(0,0,0,.35); }
.gameover-progress .mini-xp-track span { display:block; height:100%; background:var(--gold); }

/* ---------------------- reactions and chat -------------------------- */
.game-social-dock {
  position:absolute;
  right:8px;
  top:clamp(118px, 18vh, 170px);
  bottom:auto;
  z-index:82;
  pointer-events:none;
}
.reaction-dock-btn {
  pointer-events:auto;
  height:44px;
  min-width:94px;
  padding:4px 9px 4px 6px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:14px 4px 4px 14px;
  border:2px solid rgba(240,196,25,.52);
  background:linear-gradient(180deg,rgba(48,43,36,.98),rgba(24,22,19,.98));
  box-shadow:-3px 4px 0 rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.06);
  color:var(--cream);
  font-family:'Press Start 2P',monospace;
  font-size:7px;
  cursor:pointer;
}
.reaction-dock-btn::after {
  content:'';
  position:absolute;
  right:-5px; bottom:8px;
  width:8px; height:8px;
  background:#221f1b;
  border-right:2px solid rgba(240,196,25,.52);
  border-bottom:2px solid rgba(240,196,25,.52);
  transform:rotate(-45deg);
}
.reaction-dock-avatar { width:31px; height:31px; flex:0 0 auto; }
.reaction-dock-avatar svg { width:100%; height:100%; display:block; image-rendering:pixelated; }
.reaction-dock-label { padding-top:1px; }

/* The preview no longer relies on the global .hidden utility, which used
   display:none and made Safari's short-lived table bubble brittle. */
.game-chat-preview {
  position:fixed;
  z-index:10020;
  right:max(10px, env(safe-area-inset-right));
  top:calc(env(safe-area-inset-top) + 70px);
  left:auto;
  bottom:auto;
  width:min(310px, calc(100vw - 20px));
  max-width:310px;
  box-sizing:border-box;
  transform:translateY(-7px) scale(.98);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  background:rgba(31,28,24,.97);
  border:2px solid rgba(240,196,25,.72);
  border-radius:11px;
  padding:8px 11px;
  box-shadow:0 8px 22px rgba(0,0,0,.42);
}
.game-chat-preview.is-visible {
  opacity:1;
  transform:translateY(0) scale(1);
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.game-chat-preview .chat-toast-name { font-size:7px; }
.game-chat-preview .chat-toast-text { font-size:15px; line-height:1.08; }

/* 8-frame, 32x32 reaction atlases. The animation itself communicates the
   idea: tears/laughter, shocked burst, trophy, thumbs-up, crying, question. */
.reaction-pop {
  min-width:128px;
  min-height:130px;
  padding:8px 10px 9px;
  border-radius:16px;
  border-width:3px;
  gap:1px;
  animation:reactionBubbleLifeV10 4.0s cubic-bezier(.2,.7,.2,1) forwards;
}
.reaction-sprite {
  width:104px;
  height:104px;
  background-size:800% 600%;
  animation:reactionSpritePlayV10 1.5s steps(7,end) 1 forwards;
}
.reaction-pop-text {
  font-family:'Press Start 2P',monospace;
  font-size:11px;
  line-height:1;
  margin-top:-3px;
  color:var(--gold-ink);
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
@keyframes reactionSpritePlayV10 { from { background-position-x:0%; } to { background-position-x:100%; } }
@keyframes reactionBubbleLifeV10 {
  0% { opacity:0; transform:translateY(5px) scale(.88); }
  7% { opacity:1; transform:translateY(0) scale(1); }
  84% { opacity:1; transform:translateY(-2px) scale(1); }
  100% { opacity:0; transform:translateY(-14px) scale(.96); }
}
.reaction-picker { width:min(300px,calc(100vw - 20px)) !important; }
.reaction-option { min-height:44px; font-size:8px; }

@media (max-width: 620px) {
  .progress-cabinet { width:calc(100vw - 12px); min-height:calc(100dvh - 20px); padding:15px 13px; }
  .progress-track { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; overflow:visible; }
  #screen-progress { overflow-y:auto; }
  .progress-collection-grid { grid-template-columns:repeat(2,1fr); }
  .progress-avatar { width:56px; height:56px; }
  .progress-level-row { font-size:7px; }
  .game-social-dock { right:4px; top:clamp(112px, 18vh, 148px); bottom:auto; }
  .reaction-dock-btn { height:41px; min-width:83px; padding-inline:5px 7px; font-size:6px; }
  .reaction-dock-avatar { width:28px; height:28px; }
  .reaction-pop { min-width:116px; min-height:120px; }
  .reaction-sprite { width:96px; height:96px; }
  .reaction-pop-text { font-size:10px; }
  .game-chat-preview { top:calc(env(safe-area-inset-top) + 64px); width:min(280px,calc(100vw - 16px)); }
}
.btn-progress { display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-progress::before { margin-right:0; }
.home-level-badge {
  margin-left:auto;
  padding:4px 6px;
  border-radius:6px;
  border:1px solid rgba(240,196,25,.34);
  background:rgba(240,196,25,.09);
  color:var(--gold-ink);
  font-family:'Press Start 2P',monospace;
  font-size:6px;
  white-space:nowrap;
}

/* =====================================================================
   v11: full dashboard, readable HUD scale, anchored social bubbles,
        hand-side reactions and a full-screen reward path.
   ===================================================================== */
body {
  --gui-scale: 1;
  --hud-control: calc(48px * var(--gui-scale));
  --menu-font: calc(clamp(17px, min(2.25vw, 2.35vh), 22px) * var(--gui-scale));
}
body.ui-compact { --ui-scale: .86; --gui-scale: .91; }
body.ui-large { --ui-scale: 1.17; --gui-scale: 1.16; }

/* -------------------------- home dashboard --------------------------- */
.home-screen { padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
.home-shell {
  width:min(920px, calc(100vw - 24px));
  margin:auto;
  padding:clamp(18px,3vw,30px);
  border:4px solid var(--panel-edge);
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(240,196,25,.035), transparent 34%),
    linear-gradient(180deg, rgba(45,40,34,.985), rgba(24,21,18,.99));
  box-shadow:0 0 0 5px var(--panel-light), inset 0 2px 0 rgba(255,255,255,.065), inset 0 -10px 25px rgba(0,0,0,.38), 0 26px 70px rgba(0,0,0,.52);
}
.home-brand { text-align:center; margin:0 0 18px; }
.home-logo { margin-bottom:8px; font-size:clamp(34px,7.5vw,70px); }
.home-tagline { color:var(--accent); font-size:clamp(17px,2.1vw,23px); opacity:.86; letter-spacing:.3px; }
.home-player-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:14px;
  margin-bottom:12px;
  border:2px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(0,0,0,.20);
}
.home-player-avatar {
  width:72px; height:72px; padding:6px;
  border-radius:16px;
  border:3px solid rgba(240,196,25,.55);
  background:rgba(0,0,0,.34);
  box-shadow:0 4px 0 rgba(0,0,0,.3);
}
.home-player-avatar svg { width:100%; height:100%; display:block; image-rendering:pixelated; }
.home-player-identity { min-width:0; }
.home-name-input { margin:0 0 8px; font-size:clamp(23px,3vw,31px); padding:8px 11px; }
.home-player-meta { display:grid; grid-template-columns:auto minmax(70px,1fr) auto; gap:9px; align-items:center; }
.home-level-text,.home-xp-text { color:var(--cream); font-size:clamp(15px,1.7vw,19px); white-space:nowrap; }
.home-level-text { color:var(--gold-ink); }
.home-mini-xp { height:9px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.45); border-radius:999px; overflow:hidden; }
.home-mini-xp span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--orange),var(--gold)); transition:width .35s ease; }
.home-avatar-section { padding:10px 12px 12px; margin-bottom:13px; border-radius:15px; background:rgba(0,0,0,.12); }
.home-section-label { color:var(--accent); font-size:clamp(16px,1.8vw,20px); margin-bottom:8px; }
.home-avatar-section .avatar-picker { margin:0; gap:8px; }
.home-avatar-section .avatar-opt { width:48px; height:48px; }
.home-dashboard { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.home-resume {
  grid-column:1/-1; min-height:60px; border:2px solid rgba(111,207,125,.5); border-radius:15px;
  color:var(--cream); background:rgba(111,207,125,.10); display:flex; gap:13px; align-items:center; padding:10px 15px; cursor:pointer; text-align:left;
}
.home-resume-icon { font:28px 'VT323',monospace; color:var(--green-accent); }
.home-resume strong,.home-resume small { display:block; }
.home-resume strong { font:10px/1.3 'Press Start 2P',monospace; color:var(--green-accent); }
.home-resume small { font-size:18px; color:var(--cream); margin-top:3px; opacity:.8; }
.home-tile {
  min-height:118px;
  border:2px solid rgba(255,255,255,.075);
  border-radius:18px;
  color:var(--cream);
  background:linear-gradient(180deg,rgba(58,52,45,.96),rgba(31,28,24,.98));
  box-shadow:0 5px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.055);
  padding:15px;
  text-align:left;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  cursor:pointer;
  transition:transform .09s ease,filter .14s ease,border-color .14s ease;
}
.home-tile:hover { filter:brightness(1.08); border-color:rgba(255,255,255,.13); }
.home-tile:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.home-tile-mark {
  width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:rgba(0,0,0,.24); border:2px solid rgba(255,255,255,.07);
  color:var(--gold-ink); font:25px/1 'Press Start 2P',monospace;
}
.home-tile-copy { min-width:0; }
.home-tile-copy strong { display:block; font:clamp(12px,1.35vw,15px)/1.45 'Press Start 2P',monospace; color:var(--cream); }
.home-tile-copy small { display:block; margin-top:6px; color:rgba(246,236,210,.72); font-size:clamp(17px,1.75vw,21px); line-height:1.08; }
.home-tile-arrow { font:38px/1 'VT323',monospace; color:var(--gold-ink); }
.home-quick { grid-column:1/-1; min-height:132px; border-color:rgba(240,196,25,.5); background:radial-gradient(circle at 82% 20%,rgba(240,196,25,.16),transparent 34%),linear-gradient(180deg,#493d24,#2d281e); }
.home-quick .home-tile-mark { width:66px;height:66px;background:var(--gold);color:var(--card-ink);border-color:#ffe56a;box-shadow:0 4px 0 var(--gold-dark); }
.home-quick .home-tile-copy strong { color:var(--gold); font-size:clamp(14px,1.8vw,19px); }
.home-private { cursor:default; grid-template-columns:auto minmax(0,1fr); }
.home-private:active { transform:none; box-shadow:0 5px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.055); }
.home-private-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:1px; }
.home-mini-action { min-height:44px; border-radius:11px; border:2px solid #665845; color:var(--cream); background:#302b26; font:20px 'VT323',monospace; cursor:pointer; }
.home-mini-action:hover { filter:brightness(1.13); }
.home-progress { border-color:rgba(240,196,25,.30); background:radial-gradient(circle at 10% 12%,rgba(240,196,25,.11),transparent 40%),linear-gradient(180deg,#3b3429,#29251f); }
.home-star { color:var(--gold); }
.home-progress-side { display:flex;flex-direction:column;align-items:flex-end;gap:7px; }
.home-progress-side b { color:var(--gold); font:10px 'Press Start 2P',monospace; white-space:nowrap; }
.home-progress-chevron { color:var(--gold); font:30px 'VT323',monospace; }
.home-connection { display:flex; align-items:center; justify-content:center; gap:8px; margin:14px auto 0; padding:8px 13px; border:0; background:transparent; color:rgba(246,236,210,.62); font:18px 'VT323',monospace; cursor:pointer; }
.home-connection:hover { color:var(--cream); }
.home-connection-dot { width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px var(--accent-soft); }

/* -------------------------- readable game HUD ------------------------ */
.statusbar { min-height:calc(58px * var(--gui-scale)); padding:6px 8px; gap:8px; }
.status-side { gap:6px; }
.icon-btn.hud-btn {
  width:var(--hud-control); height:var(--hud-control); min-width:var(--hud-control);
  border-radius:12px; font-size:calc(21px * var(--gui-scale));
  background:linear-gradient(180deg,#38332d,#28241f); border-color:#51483d;
}
.hud-btn .hud-glyph { display:flex;align-items:center;justify-content:center;line-height:1; }
.hud-btn .hud-label { display:none; font:calc(9px * var(--gui-scale))/1 'Press Start 2P',monospace; }
.hud-chat-glyph { position:relative; width:22px;height:17px;border:2px solid currentColor;border-radius:6px; }
.hud-chat-glyph::after { content:''; position:absolute; left:3px; bottom:-5px; width:6px;height:6px; border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:skewY(-35deg); }
.status-round { font-size:calc(.78em * var(--gui-scale)); }
.status-phase { font-size:calc(1em * var(--gui-scale)); }
.pchip { min-height:calc(48px * var(--gui-scale)); }
.pchip-name { font-size:calc(.86em * var(--gui-scale)); }

/* Chat is a player speech bubble, not a detached toast. */
.chat-bubble-stage { position:fixed; inset:0; z-index:410; pointer-events:none; }
.table-chat-bubble {
  position:fixed; max-width:min(290px,70vw); min-width:88px;
  padding:8px 11px 9px; border-radius:12px; border:2px solid rgba(240,196,25,.58);
  background:rgba(31,28,24,.97); color:var(--cream); box-shadow:0 7px 18px rgba(0,0,0,.38);
  font-size:20px; line-height:1.05; pointer-events:auto; cursor:pointer;
  animation:tableChatIn .18s ease-out both;
}
.table-chat-bubble strong { display:block; color:var(--gold-ink); font-size:15px; margin-bottom:2px; }
.table-chat-bubble::before { content:''; position:absolute; top:-8px; left:var(--tail-x,22px); width:13px;height:13px; background:rgba(31,28,24,.97); border-left:2px solid rgba(240,196,25,.58); border-top:2px solid rgba(240,196,25,.58); transform:rotate(45deg); }
.table-chat-bubble.fade-out { opacity:0; transform:translateY(-5px); transition:opacity .22s ease,transform .22s ease; }
@keyframes tableChatIn { from{opacity:0;transform:translateY(-6px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

/* The reaction control lives with your hand, where social actions belong. */
.hand-zone { position:relative; flex:0 0 auto; padding-right:82px; min-width:0; }
.hand-zone .hand-row { width:100%; }
.hand-react-btn {
  position:absolute; right:8px; top:50%; transform:translateY(-46%);
  width:70px; min-height:72px; padding:6px 5px;
  border:2px solid rgba(240,196,25,.52); border-radius:15px;
  background:linear-gradient(180deg,#443a29,#28231d); color:var(--cream);
  box-shadow:0 4px 0 rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06);
  cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; z-index:25;
}
.hand-react-btn:active { transform:translateY(calc(-46% + 2px)); box-shadow:0 2px 0 rgba(0,0,0,.38); }
.hand-react-avatar { width:38px;height:38px; }
.hand-react-avatar svg { width:100%;height:100%;display:block;image-rendering:pixelated; }
.hand-react-label { font:9px/1 'Press Start 2P',monospace; color:var(--gold); }

/* Reaction animation v11: 12 frames per row at 64x64 source resolution. */
.reaction-pop { min-width:160px; min-height:174px; padding:9px 12px 11px; border-radius:18px; border-width:3px; gap:2px; animation:reactionBubbleLifeV11 4.35s cubic-bezier(.2,.7,.2,1) forwards; }
.reaction-sprite { width:136px; height:136px; background-size:1200% 600%; animation:reactionSpritePlayV11 2.15s steps(11,end) 1 forwards; image-rendering:pixelated; }
.reaction-pop-text { font-size:13px; line-height:1.25; margin-top:-4px; letter-spacing:.3px; }
@keyframes reactionSpritePlayV11 { from{background-position-x:0%} to{background-position-x:100%} }
@keyframes reactionBubbleLifeV11 { 0%{opacity:0;transform:translateY(5px) scale(.88)} 6%{opacity:1;transform:translateY(0) scale(1)} 88%{opacity:1} 100%{opacity:0;transform:translateY(-13px) scale(.97)} }
.reaction-option { min-height:58px; font-size:10px; }
.reaction-picker-head { font-size:20px; }

/* --------------------- progression: full game screen ----------------- */
.progress-screen { padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); }
.progress-page {
  width:min(1180px,100%); min-height:min(860px,calc(100dvh - 22px)); margin:auto;
  padding:clamp(18px,2.4vw,30px); border:4px solid var(--panel-edge); border-radius:26px;
  background:radial-gradient(circle at 82% 4%,rgba(240,196,25,.09),transparent 30%),linear-gradient(180deg,rgba(47,42,35,.99),rgba(25,22,19,.99));
  box-shadow:0 0 0 5px var(--panel-light),inset 0 2px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.48);
  display:flex; flex-direction:column; gap:20px;
}
.progress-topbar { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px; }
.progress-back { width:52px;height:52px;border-radius:13px;font-size:40px; }
.progress-heading { min-width:0; }
.progress-kicker { font-size:11px;margin-bottom:6px; }
.progress-title { font:clamp(17px,2.2vw,28px)/1.3 'Press Start 2P',monospace; color:var(--gold); margin:0; }
.progress-total { padding:9px 12px;border-radius:10px;background:rgba(240,196,25,.08);border:2px solid rgba(240,196,25,.26);color:var(--gold);font:20px 'VT323',monospace;white-space:nowrap; }
.progress-overview { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:15px; }
.progress-hero { min-height:124px; padding:18px; }
.progress-avatar { width:88px;height:88px;border-radius:19px;padding:7px; }
.progress-level-row { font-size:11px; }
.progress-xp-track { height:16px;border-radius:9px;margin-top:13px; }
.progress-next { font-size:21px; line-height:1.15; margin-top:10px; color:var(--accent); }
.progress-how { border:2px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(0,0,0,.18);padding:15px;display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:center; }
.progress-how-title { grid-column:1/-1;color:var(--cream);font:10px/1.4 'Press Start 2P',monospace;margin-bottom:2px; }
.progress-xp-chip { padding:11px 10px;border-radius:12px;background:rgba(240,196,25,.075);border:1px solid rgba(240,196,25,.20);text-align:center; }
.progress-xp-chip strong { display:block;color:var(--gold);font:17px 'Press Start 2P',monospace;margin-bottom:7px; }
.progress-xp-chip span { color:var(--cream);font-size:18px;line-height:1.05; }
.progress-path-section,.progress-collection { padding:15px;border-radius:17px;border:2px solid rgba(255,255,255,.065);background:rgba(0,0,0,.13); }
.progress-section-head { font-size:11px;margin-bottom:12px; }
.progress-section-head > div > span { display:block;color:var(--cream);font:11px 'Press Start 2P',monospace; }
.progress-section-head small { display:block;margin-top:7px;color:rgba(246,236,210,.66);font:18px/1.15 'VT323',monospace; }
.progress-track {
  display:flex; gap:13px; overflow-x:auto; overflow-y:hidden; max-height:none; padding:7px 4px 14px; scroll-snap-type:x proximity; scrollbar-width:thin;
}
.progress-track::before { content:''; position:absolute; }
.progress-node {
  flex:0 0 176px; min-height:205px; padding:14px 11px 11px; gap:9px; border-radius:16px; scroll-snap-align:center;
}
.progress-node-level { font-size:11px; }
.progress-node-rewards { min-height:70px;gap:6px; }
.progress-reward-icon { width:58px;height:58px;border-radius:12px; }
.progress-reward-icon.deck { font-size:10px; }
.progress-reward-icon.texture { font-size:25px; }
.progress-node-name { font-size:18px;line-height:1.06;min-height:3em; }
.progress-node-state { font-size:9px;line-height:1.35; }
.progress-collection-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:0; }
.progress-collection-card { min-height:92px;padding:14px 10px;border-radius:14px;display:flex;flex-direction:column;justify-content:center; }
.progress-collection-card strong { font-size:13px;margin-bottom:9px; }
.progress-collection-card span { font-size:20px; }
.progress-done { align-self:center; min-width:220px; font-size:22px; }

@media (min-width: 780px) {
  .hud-menu,.hud-chat { width:auto !important; min-width:calc(92px * var(--gui-scale)) !important; padding:0 13px !important; gap:8px; }
  .hud-menu .hud-label,.hud-chat .hud-label { display:block; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  body { --hud-control:calc(52px * var(--gui-scale)); }
}
@media (max-width: 700px) {
  .home-shell { width:calc(100vw - 12px); padding:16px 13px 18px; border-radius:23px; }
  .home-logo { font-size:clamp(35px,12vw,52px); }
  .home-tagline { font-size:17px; }
  .home-player-card { grid-template-columns:60px minmax(0,1fr);gap:10px;padding:10px; }
  .home-player-avatar { width:60px;height:60px;padding:5px; }
  .home-name-input { font-size:23px;padding:7px 9px; }
  .home-player-meta { grid-template-columns:auto 1fr;gap:6px 8px; }
  .home-xp-text { display:none; }
  .home-avatar-section .avatar-opt { width:44px;height:44px; }
  .home-dashboard { gap:9px; }
  .home-tile { min-height:104px;padding:12px;gap:9px;border-radius:15px; }
  .home-quick { min-height:118px; }
  .home-tile-mark { width:45px;height:45px;font-size:20px;border-radius:11px; }
  .home-quick .home-tile-mark { width:54px;height:54px; }
  .home-tile-copy strong { font-size:11px; }
  .home-quick .home-tile-copy strong { font-size:13px; }
  .home-tile-copy small { font-size:16px; }
  .home-private { grid-column:1/-1; grid-template-columns:auto 1fr; }
  .home-private-actions { grid-column:1/-1; }
  .home-progress,.home-local,.home-rules { grid-column:auto; }
  .home-progress { grid-column:1/-1; }
  .home-progress-side b { font-size:9px; }
  .statusbar { gap:4px;padding:5px; }
  .status-side { gap:3px; }
  .icon-btn.hud-btn { width:44px;height:44px;min-width:44px;font-size:20px;border-radius:11px; }
  .status-center { min-width:84px; }
  .status-round { font-size:.72em; }
  .status-phase { font-size:.84em; }
  .hand-zone { padding-right:61px; }
  .hand-react-btn { width:56px;min-height:61px;right:2px;border-radius:13px;padding:4px 3px; }
  .hand-react-avatar { width:32px;height:32px; }
  .hand-react-label { font-size:9px; }
  .reaction-pop { min-width:148px;min-height:162px; }
  .reaction-sprite { width:126px;height:126px; }
  .reaction-pop-text { font-size:12px; }
  .progress-page { width:calc(100vw - 10px);min-height:calc(100dvh - 16px);padding:15px 12px 18px;border-radius:21px;gap:15px; }
  .progress-topbar { grid-template-columns:auto 1fr; }
  .progress-total { grid-column:2;justify-self:start;font-size:17px;padding:5px 8px; }
  .progress-back { width:46px;height:46px;grid-row:1/3; }
  .progress-kicker { font-size:10px; }
  .progress-title { font-size:15px; }
  .progress-overview { grid-template-columns:1fr;gap:10px; }
  .progress-hero { min-height:108px;padding:13px;gap:11px; }
  .progress-avatar { width:70px;height:70px; }
  .progress-level-row { font-size:9px; }
  .progress-next { font-size:18px; }
  .progress-how { padding:11px; }
  .progress-how-title { font-size:8px; }
  .progress-xp-chip strong { font-size:13px; }
  .progress-xp-chip span { font-size:17px; }
  .progress-path-section,.progress-collection { padding:12px 10px; }
  .progress-section-head > div > span { font-size:10px; }
  .progress-section-head small { font-size:17px; }
  .progress-node { flex-basis:158px;min-height:190px; }
  .progress-node-name { font-size:17px; }
  .progress-collection-grid { grid-template-columns:repeat(2,1fr); }
  .progress-collection-card span { font-size:19px; }
}
.progress-collection-preview { display:flex;justify-content:center;gap:5px;margin-top:10px;min-height:38px; }
.progress-collection-preview .progress-reward-icon { width:36px;height:36px;border-radius:8px; }
.reaction-option { display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px;text-align:left;padding:6px 9px; }
.reaction-option-mini { width:44px;height:44px;display:block;background-size:1200% 600%;background-position-x:0%;image-rendering:pixelated; }
.hand-zone { padding-right:0; }
.hand-zone.has-reaction { padding-right:82px; }
@media (max-width:700px){ .hand-zone.has-reaction{padding-right:61px;} }

/* =====================================================================
   v11 final legibility guardrails
   No interactive or explanatory UI should collapse into micro-text when
   macOS is using a dense "More Space" scale or on small phones.
   ===================================================================== */
.settings-btn {
  width:calc(48px * var(--gui-scale)); height:calc(48px * var(--gui-scale));
  min-width:44px; min-height:44px; font-size:calc(21px * var(--gui-scale));
  border-width:2px; box-shadow:0 4px 0 rgba(0,0,0,.28);
}
.pchip-out { font-size:max(9px,calc(8px * var(--gui-scale))); }
.pchip-timer-seconds { font-size:max(10px,calc(9px * var(--gui-scale))); }
.pchip-timer-strikes,.pchip-strikes { font-size:max(8px,calc(7px * var(--gui-scale))); }
.conn-alert { max-width:150px; font-size:max(9px,calc(8px * var(--gui-scale))); }
.operator-quick { font-size:max(9px,calc(8px * var(--gui-scale))); }
.profile-progress-top { font-size:10px; line-height:1.45; }
.cosmetic-locked::after { font-size:7px; padding:3px 4px; }
.progress-how-title { font-size:11px; }
.progress-node-state { font-size:10px; }
.reaction-option { font-size:11px; }

.home-resume-icon { font-size:30px; color:var(--gold); line-height:1; }
.home-resume-copy { display:flex; flex-direction:column; gap:5px; min-width:0; text-align:left; }
.home-resume-copy strong { font:11px/1.35 'Press Start 2P',monospace; color:var(--cream); }
.home-resume-copy small { font:18px/1 'VT323',monospace; color:rgba(246,236,210,.7); }

@media (max-width:700px) {
  .settings-btn { width:46px;height:46px;font-size:20px; }
  .progress-how-title { font-size:10px; }
  .progress-level-row { font-size:10px; }
  .progress-node-state { font-size:9px; }
  .progress-section-head > div > span { font-size:11px; }
  .home-resume-copy strong { font-size:9px; }
}

/* ------------------- progression locker / loadout ------------------- */
.progress-locker {
  padding:15px; border-radius:17px; border:2px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg,rgba(240,196,25,.035),rgba(0,0,0,.15));
}
.progress-locker-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 13px; }
.progress-locker-tabs button {
  min-height:42px; padding:8px 12px; border:2px solid rgba(255,255,255,.10); border-radius:10px;
  background:#28241f; color:rgba(246,236,210,.76); cursor:pointer;
  font:10px/1.35 'Press Start 2P',monospace;
}
.progress-locker-tabs button.active { color:var(--gold); border-color:rgba(240,196,25,.62); background:rgba(240,196,25,.09); box-shadow:inset 0 0 0 1px rgba(240,196,25,.12); }
.progress-locker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.progress-locker-item {
  position:relative; min-height:138px; padding:13px 11px 11px; border:2px solid rgba(255,255,255,.08); border-radius:14px;
  background:rgba(12,11,10,.28); color:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
.progress-locker-item:not(.locked):hover { transform:translateY(-2px); border-color:rgba(240,196,25,.42); background:rgba(240,196,25,.055); }
.progress-locker-item .progress-reward-icon { width:66px;height:66px; }
.progress-locker-name { font-size:20px;line-height:1;text-align:center; }
.progress-locker-state { min-height:1.4em; font:9px/1.45 'Press Start 2P',monospace;color:rgba(246,236,210,.58);text-align:center; }
.progress-locker-item.equipped { border-color:var(--gold); box-shadow:0 0 0 2px rgba(240,196,25,.11),inset 0 0 24px rgba(240,196,25,.04); }
.progress-locker-item.equipped .progress-locker-state { color:var(--gold); }
.progress-locker-item.locked { opacity:.42; cursor:not-allowed; filter:saturate(.45); }
@media (max-width:700px) {
  .progress-locker { padding:12px 10px; }
  .progress-locker-tabs { display:grid;grid-template-columns:repeat(2,1fr); }
  .progress-locker-tabs button { font-size:9px;padding:8px 5px; }
  .progress-locker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .progress-locker-item { min-height:125px;padding:10px 7px; }
  .progress-locker-item .progress-reward-icon { width:58px;height:58px; }
  .progress-locker-name { font-size:18px; }
  .progress-locker-state { font-size:8px; }
}

/* Final readability floor for the redesigned dashboard. */
.home-tile-copy strong { font-size:max(12px,calc(11px * var(--gui-scale))); line-height:1.45; }
.home-quick .home-tile-copy strong { font-size:max(14px,calc(13px * var(--gui-scale))); }
.home-progress-side b { font-size:10px; }
.cosmetic-locked::after { font-size:8px; }
.progress-locker-state { font-size:10px; }
@media (max-width:700px) {
  .home-tile-copy strong { font-size:12px; }
  .home-quick .home-tile-copy strong { font-size:14px; }
  .home-progress-side b { font-size:10px; }
  .progress-locker-state { font-size:9px; }
}

/* src/styles.css part 06 — v12–v13 layers: art direction and identity polish.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   v12 ART-DIRECTION PASS
   One readable pixel-led type system, authored icons, a real title screen,
   wide reward path, and a more intentional HUD/social layer.
   ===================================================================== */
:root {
  --ui-font: 'Pixelify Sans', 'Noto Sans Mono', monospace;
  --ui-display: 'Pixelify Sans', 'Noto Sans Mono', monospace;
  --ui-logo: 'Press Start 2P', monospace;
  --ui-cream: #fff1cf;
  --ui-gold: #f5c62d;
  --ui-gold-hot: #ffe266;
  --ui-brass: #8a6617;
  --ui-blue: #4ba7d7;
  --ui-ink: #171411;
  --ui-panel: rgba(26,22,19,.965);
  --ui-panel-2: rgba(45,38,31,.965);
}
html, body, button, input, textarea, select { font-family: var(--ui-font); }
body { font-weight: 500; letter-spacing: .01em; }
.btn, .section-title, .lobby-copy, .field-label, .stage-line, .stage-hint,
.pchip-name, .pchip-score, .pchip-count, .status-round, .status-phase,
.menu-buttons button, .seg button, .toggle-row, .range-row, .profile-modal,
.settings-modal, .round-overlay, .room-code, .invite-link { font-family: var(--ui-font) !important; }
.title, .title-logo-v12 { font-family: var(--ui-logo) !important; }
.pixel-font { font-family: var(--ui-font) !important; }

/* Authored raster icons always render crisply. */
img[src*="assets/ui/"] { image-rendering: pixelated; image-rendering: crisp-edges; }
.hud-icon-img { width: 28px; height: 28px; display:block; object-fit:contain; }
.settings-btn img { width:26px;height:26px;display:block;margin:auto; }
body[data-screen="start"] > #btnSettings { display:none; }

/* --------------------------- TITLE SCREEN --------------------------- */
.title-screen {
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  display:block;
  padding:0;
  isolation:isolate;
}
.title-screen::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 23% 42%, rgba(255,230,111,.10), transparent 21%),
    radial-gradient(circle at 70% 22%, rgba(var(--accent-rgb),.12), transparent 27%),
    linear-gradient(180deg, rgba(7,6,9,.12), rgba(8,6,10,.38));
}
.title-menu-vortex { position:absolute; inset:-18%; z-index:0; pointer-events:none; opacity:.48; filter:saturate(1.12); }
.title-menu-vortex i { position:absolute; border-radius:45% 55% 48% 52%; mix-blend-mode:screen; filter:blur(5px); }
.title-menu-vortex i:nth-child(1){ width:70vw;height:34vw;left:-8vw;top:12vh;background:radial-gradient(ellipse at 30% 50%,rgba(240,196,25,.13),transparent 62%);transform:rotate(-16deg); }
.title-menu-vortex i:nth-child(2){ width:58vw;height:58vw;right:-12vw;top:-4vw;background:conic-gradient(from 20deg,rgba(255,255,255,.02),rgba(var(--accent-rgb),.15),transparent 42%,rgba(240,196,25,.08),transparent 75%);animation:v12Vortex 20s linear infinite; }
.title-menu-vortex i:nth-child(3){ width:52vw;height:24vw;right:10vw;bottom:3vh;background:radial-gradient(ellipse,rgba(198,70,113,.16),transparent 70%);transform:rotate(18deg); }
@keyframes v12Vortex { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .title-menu-vortex i:nth-child(2){animation:none;} }

.title-card-fan { position:absolute; z-index:2; left:9vw; top:31vh; width:min(42vw,590px); height:min(42vw,590px); pointer-events:none; filter:drop-shadow(0 28px 28px rgba(0,0,0,.36)); }
.title-card { position:absolute; width:42%; aspect-ratio:.71; border-radius:clamp(12px,1.4vw,22px); background:linear-gradient(180deg,#fffdf5,#eee8dc); border:clamp(4px,.45vw,7px) solid #1a1714; color:#171411; box-shadow:inset 0 0 0 3px rgba(255,255,255,.8),0 8px 0 rgba(0,0,0,.18); display:flex;flex-direction:column;justify-content:space-between;padding:8%; font:700 clamp(26px,4vw,60px)/1 var(--ui-display); }
.title-card b { align-self:center;font-size:1.7em;line-height:.8; }
.title-card-a { left:5%;top:17%;transform:rotate(-17deg); }
.title-card-b { left:28%;top:3%;transform:rotate(2deg);color:#bb3137; }
.title-card-c { left:51%;top:21%;transform:rotate(19deg); }
.title-card::after { content:''; position:absolute; inset:0; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 3px,#555 4px 5px); border-radius:inherit; }

.title-brand-block { position:absolute; z-index:5; left:7vw; top:8vh; width:min(57vw,780px); text-align:left; }
.title-kicker { color:var(--accent); font:700 clamp(15px,1.5vw,22px)/1 var(--ui-display); letter-spacing:.18em; text-shadow:0 2px 0 rgba(0,0,0,.45); }
.title-logo-v12 { margin:12px 0 5px; font-size:clamp(56px,8.8vw,132px); line-height:1; color:var(--gold); letter-spacing:.025em; text-shadow:0 5px 0 #a93425,0 10px 0 rgba(0,0,0,.24),0 0 28px rgba(240,196,25,.19); }
.title-rule { display:flex;align-items:center;gap:10px;width:min(480px,78%);color:var(--gold);margin:10px 0; }
.title-rule span { flex:1;height:3px;background:linear-gradient(90deg,transparent,var(--gold));box-shadow:0 1px 0 rgba(0,0,0,.35); }
.title-rule span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.title-rule b{font-size:16px;}
.title-tagline-v12 { font-size:clamp(19px,1.9vw,28px); color:rgba(255,241,207,.86); text-shadow:0 2px 0 rgba(0,0,0,.45); }

.title-main-menu { position:absolute; z-index:6; right:6vw; bottom:12vh; width:min(32vw,420px); display:grid; gap:11px; }
.title-menu-button { position:relative; min-height:72px; padding:9px 20px 9px 84px; border:4px solid #0d0b09; border-radius:13px; background:linear-gradient(180deg,#4a4338,#2b2721); color:var(--ui-cream); box-shadow:0 6px 0 #100e0c,inset 0 2px 0 rgba(255,255,255,.11); display:flex;align-items:center;justify-content:flex-start; gap:10px; cursor:pointer; transition:transform .08s ease,filter .12s ease; font:700 clamp(23px,2.35vw,34px)/1 var(--ui-display); text-align:left; text-shadow:0 2px 0 rgba(0,0,0,.4); }
.title-menu-button::before { content:''; position:absolute; left:58px; top:10px; bottom:10px; width:2px; background:rgba(255,255,255,.09); }
.title-menu-button > img { position:absolute;left:10px;top:50%;transform:translateY(-50%);width:42px;height:42px; }
.title-menu-button small { margin-left:auto; font-size:15px;color:var(--gold);padding:5px 7px;border:2px solid rgba(240,196,25,.34);border-radius:7px; }
.title-menu-button:hover{filter:brightness(1.11)} .title-menu-button:active{transform:translateY(4px);box-shadow:0 2px 0 #100e0c;}
.title-menu-primary { min-height:90px; background:linear-gradient(180deg,#f5cb41,#d9952d); color:#1b1611; border-color:#3a2915; box-shadow:0 7px 0 #8d5619,inset 0 2px 0 #fff1a0; font-size:clamp(31px,3vw,42px); text-shadow:none; }
.title-menu-primary::before{background:rgba(41,26,12,.18)}

.title-profile-plaque { position:absolute; z-index:7; left:4vw; bottom:4.6vh; display:grid;grid-template-columns:auto minmax(150px,240px) auto;align-items:center;gap:10px; padding:9px 10px; border:3px solid #0e0c0a;border-radius:14px;background:rgba(29,26,22,.93);box-shadow:0 5px 0 rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.08); }
.title-profile-avatar { width:58px;height:58px;padding:6px;border:2px solid rgba(240,196,25,.42);border-radius:10px;background:#15120f;cursor:pointer; }
.title-profile-avatar span,.title-profile-avatar svg{width:100%;height:100%;display:block;image-rendering:pixelated;}
.title-profile-copy label{display:block;color:var(--gold);font-size:13px;line-height:1;margin-bottom:2px;}
.title-name-input{width:100%;height:30px;padding:0;border:0;border-bottom:2px solid rgba(255,255,255,.14);background:transparent;color:var(--cream);font:700 24px/1 var(--ui-display);outline:0;}
.title-name-input:focus{border-color:var(--gold)}
.title-profile-level{display:flex;justify-content:space-between;gap:10px;color:rgba(246,236,210,.78);font-size:13px;margin-top:4px;}
.title-profile-level #homeLevelText{color:var(--gold)}
.title-profile-xp{height:5px;margin-top:3px;background:#0d0b09;border-radius:4px;overflow:hidden;}
.title-profile-xp span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--gold));}
.title-profile-edit{width:38px;height:38px;padding:4px;border:0;border-radius:8px;background:#3a332b;cursor:pointer;}.title-profile-edit img{width:100%;height:100%;}
.title-avatar-popover{position:absolute;z-index:40;left:4vw;bottom:calc(4.6vh + 86px);width:min(500px,92vw);padding:12px;border:3px solid #0c0a09;border-radius:15px;background:rgba(31,27,23,.985);box-shadow:0 14px 35px rgba(0,0,0,.55);}
.title-avatar-popover-head{color:var(--gold);font:700 18px/1 var(--ui-display);margin-bottom:9px}.title-avatar-popover .avatar-picker{margin:0;gap:8px;justify-content:flex-start}.title-avatar-popover .avatar-opt{width:48px;height:48px;}
.title-utility-row{position:absolute;z-index:7;right:4vw;top:calc(18px + env(safe-area-inset-top));display:flex;gap:8px;}
.title-utility-row button{display:flex;align-items:center;gap:7px;height:44px;padding:5px 10px;border:2px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(22,19,16,.72);color:rgba(246,236,210,.68);font:600 16px/1 var(--ui-display);cursor:pointer;}.title-utility-row img{width:25px;height:25px;}
.title-resume{position:absolute;z-index:8;right:6vw;bottom:calc(12vh + 315px);width:min(32vw,420px);min-height:58px;border:3px solid rgba(111,207,125,.55);border-radius:12px;background:rgba(22,45,30,.9);color:var(--cream);display:flex;align-items:center;gap:10px;padding:8px 11px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.4);}.title-resume-icon{width:38px;height:38px}.title-resume .home-resume-copy strong{font:700 18px/1 var(--ui-display);color:#8ee69b}.title-resume .home-resume-copy small{font:500 15px/1 var(--ui-display);color:rgba(246,236,210,.72)}
.title-notice{position:absolute;z-index:50;left:50%;top:10px;transform:translateX(-50%);width:min(680px,92vw);}

/* ----------------------------- PLAY HUB ------------------------------ */
.play-hub-overlay{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,7,9,.72);backdrop-filter:blur(5px);}
.play-hub-panel{position:relative;width:min(850px,94vw);padding:26px;border:5px solid #0d0b09;border-radius:24px;background:linear-gradient(180deg,#312b24,#1b1815);box-shadow:0 0 0 4px #51483d,0 28px 80px rgba(0,0,0,.65),inset 0 2px rgba(255,255,255,.08);}
.play-hub-kicker{color:var(--gold);font:700 15px/1 var(--ui-display);letter-spacing:.18em;text-align:center}.play-hub-panel h2{margin:6px 0 22px;text-align:center;color:var(--cream);font:700 clamp(30px,4vw,46px)/1 var(--ui-display);}.play-hub-close{position:absolute;right:10px;top:10px;width:44px;height:44px;padding:8px;border:0;border-radius:10px;background:#201c18;cursor:pointer}.play-hub-close img{width:100%;height:100%}
.play-hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.play-mode-card{min-height:148px;padding:18px;border:3px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(180deg,#463e34,#2b2621);box-shadow:0 5px 0 rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06);color:var(--cream);cursor:pointer;text-align:left;display:grid;grid-template-columns:66px 1fr;grid-template-rows:auto auto;column-gap:15px;align-items:center}.play-mode-card img{width:64px;height:64px;grid-row:1/3}.play-mode-card strong{font:700 28px/1 var(--ui-display)}.play-mode-card small{font:500 18px/1.05 var(--ui-display);color:rgba(246,236,210,.72)}.play-mode-card:hover{filter:brightness(1.1)}.play-mode-card:active{transform:translateY(3px)}.play-mode-primary{border-color:rgba(240,196,25,.46);background:linear-gradient(180deg,#5b4920,#342a18)}.play-mode-primary strong{color:var(--gold-hot)}

/* --------------------------- SETTINGS V12 ---------------------------- */
.settings-v12{width:min(860px,94vw);max-height:min(760px,90dvh);padding:0;overflow:hidden;border-radius:22px}.settings-v12-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:2px solid rgba(255,255,255,.08)}.settings-v12-head span{color:var(--gold);font:700 13px/1 var(--ui-display);letter-spacing:.16em}.settings-v12-head h2{margin:4px 0 0;font:700 34px/1 var(--ui-display);color:var(--cream)}.settings-close-v12{width:46px;height:46px;padding:8px;border:0;border-radius:10px;background:#231f1b;cursor:pointer}.settings-close-v12 img{width:100%;height:100%}
.settings-tabs-v12{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:12px;background:rgba(0,0,0,.18)}.settings-tabs-v12 button{min-height:58px;padding:7px 10px;border:3px solid transparent;border-radius:10px;background:#312b25;color:rgba(246,236,210,.75);display:flex;align-items:center;justify-content:center;gap:9px;font:700 19px/1 var(--ui-display);cursor:pointer}.settings-tabs-v12 img{width:38px;height:38px;image-rendering:pixelated;object-fit:contain}.settings-tabs-v12 button.active{border-color:rgba(240,196,25,.55);background:#4a3c20;color:var(--gold-hot);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.settings-pane-v12{padding:18px 22px 22px;overflow-y:auto;max-height:calc(min(760px,90dvh) - 150px)}.settings-group-v12{padding:15px;border:2px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(0,0,0,.15);margin-bottom:12px}.settings-group-v12 h3{margin:0 0 12px;color:var(--gold);font:700 21px/1 var(--ui-display)}.settings-pane-v12 .seg{justify-content:center;flex-wrap:wrap}.settings-pane-v12 .seg button,.settings-pane-v12 .btn{font:600 18px/1 var(--ui-display);min-height:46px}.settings-three-v12,.settings-two-v12{display:grid;gap:8px}.settings-three-v12{grid-template-columns:repeat(3,1fr)}.settings-two-v12{grid-template-columns:repeat(2,1fr)}.settings-wrap-v12{display:flex}.settings-profile-v12{width:100%;min-height:58px;border:3px solid rgba(240,196,25,.28);border-radius:12px;background:#302a24;color:var(--cream);display:flex;align-items:center;justify-content:center;gap:12px;font:700 22px/1 var(--ui-display);cursor:pointer}.settings-profile-v12 img{width:34px;height:34px}.settings-volume-v12 .range-row{font-size:20px}.settings-volume-v12 .range-val{font-size:18px}

/* -------------------------- PROGRESSION V12 -------------------------- */
.progress-screen-v12{padding:clamp(10px,2vw,22px);overflow:hidden;}
.progress-stage-v12{position:relative;isolation:isolate;width:min(1460px,96vw);height:min(900px,94dvh);margin:auto;padding:18px 22px 16px;border:5px solid #0d0b09;border-radius:28px;background:radial-gradient(circle at 78% 12%,rgba(240,196,25,.08),transparent 26%),linear-gradient(180deg,rgba(46,40,33,.985),rgba(22,19,16,.99));box-shadow:0 0 0 5px #4a4238,0 30px 90px rgba(0,0,0,.56),inset 0 2px rgba(255,255,255,.07);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:13px;overflow:hidden;}
.progress-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(22px);opacity:.34}.progress-glow-a{width:420px;height:260px;right:-100px;top:-100px;background:rgba(240,196,25,.26)}.progress-glow-b{width:380px;height:300px;left:-150px;bottom:-120px;background:rgba(var(--accent-rgb),.20)}
.progress-header-v12{display:grid;grid-template-columns:auto 1fr minmax(300px,420px);align-items:center;gap:15px}.progress-back-v12{width:56px;height:56px;padding:10px;border:3px solid #15110d;border-radius:12px;background:#3a322a;box-shadow:0 4px 0 #0e0c0a;cursor:pointer}.progress-back-v12 img{width:100%;height:100%}.progress-title-v12 span{color:var(--gold);font:700 14px/1 var(--ui-display);letter-spacing:.14em}.progress-title-v12 h2{margin:4px 0 0;font:700 clamp(31px,3.5vw,50px)/.95 var(--ui-display);color:var(--cream)}.progress-profile-v12{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:8px 11px;border:2px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(0,0,0,.17)}.progress-avatar-v12{width:68px;height:68px;padding:5px;border:2px solid rgba(240,196,25,.42);border-radius:12px;background:#15120f}.progress-avatar-v12 svg{width:100%;height:100%;display:block}.progress-level-row-v12{display:flex;justify-content:space-between;gap:8px;font-size:18px;color:var(--cream)}.progress-level-row-v12 strong{color:var(--gold)}.progress-xp-track-v12{height:11px;margin-top:8px;background:#0d0b09;border:2px solid rgba(255,255,255,.08);border-radius:7px;overflow:hidden}.progress-xp-track-v12 span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--gold-hot));box-shadow:0 0 10px rgba(240,196,25,.35)}
.progress-tabs-v12{display:flex;gap:8px}.progress-tabs-v12 button{min-width:190px;height:54px;padding:7px 16px;border:3px solid rgba(255,255,255,.08);border-radius:11px;background:#302a24;color:rgba(246,236,210,.72);display:flex;align-items:center;justify-content:center;gap:9px;font:700 21px/1 var(--ui-display);cursor:pointer}.progress-tabs-v12 img{width:31px;height:31px}.progress-tabs-v12 button.active{color:var(--gold-hot);border-color:rgba(240,196,25,.5);background:#4a3b1f;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.progress-content-v12{min-height:0;overflow:hidden}.progress-view-v12{height:100%;min-height:0}.progress-next-v12{height:86px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:11px 16px;margin-bottom:10px;border:2px solid rgba(240,196,25,.24);border-radius:13px;background:linear-gradient(90deg,rgba(240,196,25,.09),rgba(0,0,0,.13))}.progress-next-label{padding:7px 9px;border-radius:7px;background:var(--gold);color:#1a1510;font:800 15px/1 var(--ui-display)}.progress-next-copy{font:700 24px/1 var(--ui-display);color:var(--cream)}.progress-earn-v12{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.progress-earn-v12 span{padding:6px 9px;border:2px solid rgba(255,255,255,.07);border-radius:8px;background:#2b2621;color:rgba(246,236,210,.76);font-size:16px}.progress-earn-v12 b{color:var(--gold-hot)}
.progress-path-frame-v12{position:relative;height:calc(100% - 96px);min-height:0;padding:12px 58px;border:3px solid rgba(255,255,255,.07);border-radius:18px;background:radial-gradient(circle at 50% 125%,rgba(var(--accent-rgb),.14),transparent 50%),rgba(0,0,0,.14);overflow:hidden}.progress-track-v12{height:100%;display:flex;gap:24px;align-items:center;overflow-x:auto;overflow-y:hidden;padding:20px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}.progress-track-v12::-webkit-scrollbar{display:none}.progress-track-v12::before{content:'';position:absolute;left:80px;right:80px;top:50%;height:7px;transform:translateY(-50%);background:linear-gradient(90deg,#6d5517,var(--gold),#6d5517);box-shadow:0 2px 0 rgba(0,0,0,.35);opacity:.54;z-index:0}.progress-path-arrow{position:absolute;z-index:10;top:50%;transform:translateY(-50%);width:46px;height:74px;border:3px solid rgba(255,255,255,.08);border-radius:11px;background:#2c2722;color:var(--gold);font:700 48px/1 var(--ui-display);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.3)}.progress-path-prev{left:8px}.progress-path-next{right:8px}
.progress-node{position:relative;z-index:2;flex:0 0 244px;min-height:330px;padding:18px 15px 15px;border:4px solid #0d0b09;border-radius:18px;background:linear-gradient(180deg,#413931,#27231e);box-shadow:0 7px 0 rgba(0,0,0,.38),inset 0 2px rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;gap:12px;scroll-snap-align:center;opacity:1!important;filter:none!important}.progress-node.current{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,196,25,.16),0 8px 0 #80600f,0 0 28px rgba(240,196,25,.15)}.progress-node.locked{opacity:.72!important;filter:saturate(.55)!important}.progress-node-level{font:800 22px/1 var(--ui-display);color:var(--gold-hot)}.progress-node-rewards{display:flex;align-items:center;justify-content:center;gap:7px;min-height:105px}.progress-reward-icon{width:88px;height:88px;border-radius:15px;background:#171411;border:3px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.28)}.progress-reward-icon svg{width:90%;height:90%;display:block}.progress-reward-icon.swatch{box-shadow:inset 0 0 0 3px rgba(255,255,255,.12),0 4px 0 rgba(0,0,0,.28)}.progress-reward-icon.deck{font:700 18px/1 var(--ui-display);color:var(--cream)}.progress-reward-icon.texture{font-size:34px}.progress-node-name{font:700 23px/1.02 var(--ui-display);color:var(--cream);text-align:center;min-height:52px;display:flex;align-items:center}.progress-node-state{margin-top:auto;padding:6px 9px;border-radius:7px;background:#171411;color:rgba(246,236,210,.6);font:700 14px/1 var(--ui-display)}.progress-node.unlocked .progress-node-state{color:#8ee69b}.progress-node.current .progress-node-state{background:var(--gold);color:#1b1610}
.locker-top-v12{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:10px 4px 14px}.locker-kicker-v12{color:var(--gold);font:700 13px/1 var(--ui-display);letter-spacing:.14em}.locker-top-v12 h3{margin:4px 0 3px;font:700 36px/1 var(--ui-display);color:var(--cream)}.locker-top-v12 p{margin:0;color:rgba(246,236,210,.67);font-size:18px}.locker-count-v12{font:700 24px/1 var(--ui-display);color:var(--gold);padding:8px 11px;border:2px solid rgba(240,196,25,.3);border-radius:9px;background:rgba(240,196,25,.06)}
.progress-collection-grid-v12{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.progress-collection-card{min-height:76px;padding:10px;border:2px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(0,0,0,.14);display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:9px;text-align:left}.progress-collection-card strong{font:800 23px/1 var(--ui-display);color:var(--gold);margin:0}.progress-collection-card>span{font-size:18px}.progress-collection-preview{grid-column:1/-1;justify-content:flex-start;margin-top:6px}.progress-collection-preview .progress-reward-icon{width:32px;height:32px;border-radius:6px;border-width:1px}
.progress-locker-tabs-v12{display:flex;gap:7px;margin:0 0 10px}.progress-locker-tabs-v12 button{min-height:44px;padding:7px 13px;border:2px solid rgba(255,255,255,.08);border-radius:9px;background:#2c2722;color:rgba(246,236,210,.72);font:700 17px/1 var(--ui-display);cursor:pointer}.progress-locker-tabs-v12 button.active{color:var(--gold-hot);border-color:rgba(240,196,25,.48);background:#46391e}.progress-locker-grid-v12{height:calc(100% - 185px);min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px;padding-right:4px}.progress-locker-item{min-height:145px;border-width:3px;font-family:var(--ui-display)}.progress-locker-name{font:700 20px/1 var(--ui-display)}.progress-locker-state{font:700 14px/1 var(--ui-display)}
.progress-done-v12{justify-self:center;min-width:190px;height:48px;padding:6px 16px;border:3px solid #0d0b09;border-radius:10px;background:#342e28;color:var(--cream);display:flex;align-items:center;justify-content:center;gap:9px;font:700 18px/1 var(--ui-display);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35)}.progress-done-v12 img{width:28px;height:28px}

/* ------------------------------ HUD V12 ------------------------------ */
body { --hud-control:calc(54px * var(--gui-scale)); }
.statusbar{min-height:calc(68px * var(--gui-scale));padding:7px 9px;border-radius:0 0 16px 16px}.icon-btn.hud-btn{width:var(--hud-control);height:var(--hud-control);min-width:var(--hud-control);padding:8px;border-radius:13px}.hud-icon-img{width:calc(29px * var(--gui-scale));height:calc(29px * var(--gui-scale))}.hud-btn .hud-label{font:700 calc(15px * var(--gui-scale))/1 var(--ui-display)}.status-round{font-size:calc(18px * var(--gui-scale));}.status-phase{font-size:calc(24px * var(--gui-scale));font-weight:700}.pchip-name{font-size:calc(20px * var(--gui-scale));font-weight:700}.pchip-score{font:700 calc(17px * var(--gui-scale))/1 var(--ui-display)}.pchip-count,.pchip-timer-seconds{font-family:var(--ui-display)!important}.pchip{min-height:calc(58px * var(--gui-scale));padding:7px 12px 7px 7px}.pchip-av{width:calc(40px * var(--gui-scale));height:calc(40px * var(--gui-scale))}
.icon-btn.hud-sound.off{position:relative;opacity:.68}.icon-btn.hud-sound.off::after{content:'';position:absolute;width:32px;height:3px;background:var(--red);transform:rotate(-38deg);border-radius:2px;}

/* Chat speech bubble remains anchored to the player even while panels alter
   game width. Position is updated by JS every animation frame for 6 sec. */
.table-chat-bubble{font-family:var(--ui-display);font-size:22px;max-width:min(320px,76vw);border-radius:12px}.table-chat-bubble strong{font-size:17px}.table-chat-bubble.tail-bottom::before{top:auto;bottom:-8px;transform:rotate(225deg)}

/* Reactions live next to the hand, but read as a deliberate social control. */
.hand-zone.has-reaction{padding-right:96px}.hand-react-btn{right:8px;width:82px;min-height:84px;border:3px solid rgba(240,196,25,.66);background:linear-gradient(180deg,#514324,#2c261f);box-shadow:0 5px 0 rgba(0,0,0,.4),0 0 18px rgba(240,196,25,.08);border-radius:16px}.hand-react-avatar{width:46px;height:46px}.hand-react-label{font:700 15px/1 var(--ui-display);color:var(--gold-hot);text-shadow:0 2px rgba(0,0,0,.45)}
.reaction-picker{position:fixed!important;width:min(420px,calc(100vw - 20px))!important;max-height:min(420px,calc(100dvh - 20px));padding:13px;border-radius:16px;border:4px solid #0d0b09;background:linear-gradient(180deg,#383129,#201c18);box-shadow:0 18px 55px rgba(0,0,0,.58),inset 0 0 0 2px #51473b;overflow:auto}.reaction-picker-head{font:700 22px/1 var(--ui-display);color:var(--gold);}.reaction-picker-avatar{width:44px;height:44px}.reaction-options{grid-template-columns:repeat(2,1fr);gap:8px}.reaction-option{min-height:64px;padding:7px 9px;border:3px solid rgba(255,255,255,.08);border-radius:11px;background:#2c2722;color:var(--cream);font:700 19px/1 var(--ui-display)}.reaction-option-mini{width:54px;height:54px;background-size:1600% 600%;animation:reactionSpritePlayV12 1.75s steps(15,end) infinite}.reaction-sprite{background-size:1600% 600%;animation:reactionSpritePlayV12 1.75s steps(15,end) 1 forwards}.reaction-pop{min-width:170px;min-height:188px;padding:8px 10px 10px}.reaction-pop .reaction-sprite{width:148px;height:148px}.reaction-pop-text{font:800 19px/1 var(--ui-display);color:var(--gold-hot);margin-top:-5px}.reaction-pop{animation:reactionBubbleLifeV10 4.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes reactionSpritePlayV12{from{background-position-x:0%}to{background-position-x:100%}}

/* ------------------------ GENERAL UI COHESION ------------------------ */
.section-title{font-weight:700!important;font-size:clamp(29px,4vw,42px)!important}.lobby-copy,.stage-line,.stage-hint{font-size:clamp(19px,2.2vw,24px)!important}.btn{font-weight:700!important;font-size:clamp(20px,2vw,25px)!important}.seg button{font-weight:700!important;font-size:18px!important}.field-label{font-size:18px!important}.text-input{font-family:var(--ui-display)!important;font-size:24px!important}.room-code{font-family:var(--ui-display)!important;font-size:clamp(46px,7vw,70px)!important;letter-spacing:.18em}.operator-quick{font-family:var(--ui-display)!important;font-size:15px!important}.toast{font-family:var(--ui-display)!important;font-size:20px!important}.menu-buttons .btn-dev{border-style:dashed}

/* Mobile composition */
@media(max-width:760px){
  .title-brand-block{left:50%;top:calc(6.5vh + env(safe-area-inset-top));transform:translateX(-50%);width:94vw;text-align:center}.title-kicker{font-size:12px}.title-logo-v12{font-size:clamp(46px,14vw,66px);margin-top:8px}.title-rule{margin:8px auto;width:70%}.title-tagline-v12{font-size:17px}.title-card-fan{left:50%;top:25vh;transform:translateX(-50%);width:76vw;height:76vw;opacity:.82}.title-main-menu{left:10px;right:10px;bottom:calc(116px + env(safe-area-inset-bottom));width:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}.title-menu-button{min-height:65px;padding:7px 8px 7px 57px;border-width:3px;border-radius:11px;font-size:22px}.title-menu-button::before{left:48px;top:8px;bottom:8px}.title-menu-button>img{left:8px;width:34px;height:34px}.title-menu-primary{grid-column:1/-1;min-height:76px;font-size:31px}.title-menu-button small{font-size:11px;padding:3px 5px}.title-profile-plaque{left:8px;right:8px;bottom:calc(12px + env(safe-area-inset-bottom));grid-template-columns:48px 1fr 34px;padding:7px 8px}.title-profile-avatar{width:46px;height:46px}.title-name-input{font-size:20px;height:25px}.title-profile-copy label{font-size:11px}.title-profile-level{font-size:11px}.title-profile-edit{width:32px;height:32px}.title-avatar-popover{left:8px;bottom:calc(104px + env(safe-area-inset-bottom));}.title-utility-row{right:8px;top:calc(7px + env(safe-area-inset-top));}.title-utility-row button span{display:none}.title-utility-row button{width:40px;padding:5px}.title-utility-row img{width:27px;height:27px}.title-resume{left:10px;right:10px;bottom:calc(352px + env(safe-area-inset-bottom));width:auto;min-height:50px}.title-notice{top:calc(4px + env(safe-area-inset-top))}
  .play-hub-panel{padding:19px 14px 15px;border-radius:20px}.play-hub-panel h2{font-size:32px;margin-bottom:15px}.play-hub-grid{grid-template-columns:1fr;gap:8px}.play-mode-card{min-height:86px;padding:10px 12px;grid-template-columns:50px 1fr;column-gap:10px}.play-mode-card img{width:48px;height:48px}.play-mode-card strong{font-size:23px}.play-mode-card small{font-size:16px}.play-hub-close{width:40px;height:40px}
  .settings-v12{width:calc(100vw - 10px);max-height:calc(100dvh - 12px)}.settings-v12-head{padding:13px 14px 10px}.settings-v12-head h2{font-size:29px}.settings-tabs-v12{gap:4px;padding:7px}.settings-tabs-v12 button{min-height:52px;padding:5px;font-size:14px;gap:4px;flex-direction:column}.settings-tabs-v12 img{width:28px;height:28px;image-rendering:pixelated;object-fit:contain}.settings-pane-v12{padding:12px;max-height:calc(100dvh - 135px)}.settings-group-v12{padding:12px}.settings-group-v12 h3{font-size:19px}.settings-pane-v12 .seg button,.settings-pane-v12 .btn{font-size:17px}.settings-three-v12{grid-template-columns:1fr}.settings-volume-v12 .range-row{font-size:18px}
  .progress-screen-v12{padding:4px}.progress-stage-v12{width:calc(100vw - 8px);height:calc(100dvh - 8px);padding:11px 9px 10px;border-radius:19px;border-width:3px;gap:9px}.progress-header-v12{grid-template-columns:44px 1fr;gap:8px}.progress-back-v12{width:42px;height:42px;padding:7px;grid-row:1/3}.progress-title-v12 span{font-size:10px}.progress-title-v12 h2{font-size:27px}.progress-profile-v12{grid-column:2;grid-template-columns:48px 1fr;padding:6px 8px}.progress-avatar-v12{width:46px;height:46px}.progress-level-row-v12{font-size:14px}.progress-tabs-v12{display:grid;grid-template-columns:1fr 1fr}.progress-tabs-v12 button{min-width:0;height:48px;font-size:17px;padding:5px 8px}.progress-tabs-v12 img{width:27px;height:27px}.progress-next-v12{height:auto;min-height:77px;grid-template-columns:auto 1fr;padding:9px;gap:8px}.progress-next-label{font-size:12px}.progress-next-copy{font-size:19px}.progress-earn-v12{grid-column:1/-1;justify-content:flex-start}.progress-earn-v12 span{font-size:13px;padding:4px 6px}.progress-path-frame-v12{height:calc(100% - 98px);padding:7px 36px}.progress-path-arrow{width:34px;height:62px;font-size:38px}.progress-path-prev{left:3px}.progress-path-next{right:3px}.progress-track-v12{gap:13px;padding:13px 9px}.progress-node{flex-basis:190px;min-height:280px;padding:13px 10px}.progress-node-level{font-size:18px}.progress-node-rewards{min-height:88px}.progress-reward-icon{width:70px;height:70px}.progress-node-name{font-size:20px}.progress-node-state{font-size:12px}.locker-top-v12{align-items:flex-start;padding:5px 2px 9px}.locker-top-v12 h3{font-size:27px}.locker-top-v12 p{font-size:15px}.locker-count-v12{font-size:18px}.progress-collection-grid-v12{grid-template-columns:repeat(2,1fr);}.progress-collection-card{min-height:64px}.progress-locker-tabs-v12{display:grid;grid-template-columns:repeat(2,1fr)}.progress-locker-tabs-v12 button{font-size:15px}.progress-locker-grid-v12{height:calc(100% - 235px);grid-template-columns:repeat(2,minmax(0,1fr))}.progress-done-v12{height:44px;font-size:16px}
  body{--hud-control:calc(49px * var(--gui-scale))}.statusbar{min-height:calc(61px * var(--gui-scale));padding:5px}.hud-icon-img{width:26px;height:26px}.status-round{font-size:15px}.status-phase{font-size:20px}.pchip-name{font-size:18px}.pchip-score{font-size:14px}.pchip{min-height:52px}.pchip-av{width:36px;height:36px}.hand-zone.has-reaction{padding-right:74px}.hand-react-btn{width:66px;min-height:72px;right:2px}.hand-react-avatar{width:38px;height:38px}.hand-react-label{font-size:12px}.reaction-picker{width:min(350px,calc(100vw - 12px))!important;padding:10px}.reaction-picker-head{font-size:19px}.reaction-options{gap:6px}.reaction-option{min-height:57px;font-size:16px}.reaction-option-mini{width:47px;height:47px}.reaction-pop{min-width:150px;min-height:164px}.reaction-pop .reaction-sprite{width:126px;height:126px}.reaction-pop-text{font-size:17px}.table-chat-bubble{font-size:19px}.table-chat-bubble strong{font-size:15px}
}

@media(min-width:761px) and (max-height:760px){
  .title-brand-block{top:5vh}.title-card-fan{top:26vh;transform:scale(.86);transform-origin:left top}.title-main-menu{bottom:6vh}.title-profile-plaque{bottom:2.5vh}.title-resume{bottom:calc(6vh + 315px)}
}
@media(min-width:1200px){
  .title-main-menu{width:390px}.title-profile-plaque{left:3vw}.title-card-fan{left:11vw}.progress-node{flex-basis:260px}.progress-locker-grid-v12{grid-template-columns:repeat(5,1fr)}
  .hud-menu,.hud-chat{min-width:calc(104px * var(--gui-scale))!important}.hud-menu .hud-label,.hud-chat .hud-label{display:block}
}
.progress-path-arrow{font-size:0;padding:7px}.progress-path-arrow img{width:100%;height:100%;object-fit:contain}.progress-path-next img{transform:scaleX(-1)}
.join-overlay-dismiss{display:flex;align-items:center;justify-content:center;padding:7px}.join-overlay-dismiss img{width:26px;height:26px;image-rendering:pixelated}
.reward-ui-icon{width:76%;height:76%;object-fit:contain;image-rendering:pixelated}
.progress-reward-icon.deck-classic{background:linear-gradient(145deg,#f7f2e7,#d8d0c0)}
.progress-reward-icon.deck-minimal{background:linear-gradient(145deg,#eef4ef,#d0ddd3)}
.progress-reward-icon.deck-ink{background:linear-gradient(145deg,#f4eadb,#d9c7ad)}
.progress-reward-icon.deck-zen{background:linear-gradient(145deg,#f1efe3,#d8dbc8)}
.texture-preview-pixel{width:72%;height:72%;display:block;border-radius:8px;border:2px solid rgba(255,255,255,.14);background:#564d42}.texture-weave .texture-preview-pixel{background:repeating-linear-gradient(45deg,#7a6a58 0 4px,#3d362f 4px 8px)}.texture-baize .texture-preview-pixel{background:radial-gradient(circle at 2px 2px,#8c7c67 0 1px,#4d4439 1px 4px)}.texture-linen .texture-preview-pixel{background:repeating-linear-gradient(0deg,#736453 0 2px,#51463a 2px 5px)}.texture-plain .texture-preview-pixel{background:#6a5c4c}
body[data-screen="progress"] > #btnSettings{display:none}.progress-more-rewards{width:54px;height:54px;border-radius:12px;border:3px solid rgba(240,196,25,.3);background:#1b1713;color:var(--gold-hot);display:flex;align-items:center;justify-content:center;font:800 21px/1 var(--ui-display);box-shadow:0 4px 0 rgba(0,0,0,.28)}
@media(max-width:760px){#btnHomeOptions{grid-column:1/-1}.progress-title-v12 h2{font-size:22px;white-space:nowrap}.progress-more-rewards{width:48px;height:48px;font-size:19px}.progress-reward-icon{width:68px;height:68px}}

/* =====================================================================
   v13 IDENTITY + UX POLISH
   Readable pixel typography, predictable profile entry, real GUI scaling,
   reward inspection, single-scroll locker, and interaction fixes.
   ===================================================================== */
:root {
  --ui-font: 'Silkscreen', 'IBM Plex Mono', monospace;
  --ui-display: 'Silkscreen', 'IBM Plex Mono', monospace;
  --ui-logo: 'Press Start 2P', monospace;
}
html[data-lang="el"] body,
html[data-lang="el"] .text-input,
html[data-lang="el"] .btn,
html[data-lang="el"] .seg button,
html[data-lang="el"] .range-row,
html[data-lang="el"] .toggle-row,
html[data-lang="el"] .chat-compose input,
html[data-lang="el"] .opt-row,
html[data-lang="el"] .section-title,
html[data-lang="el"] .evaluator-banner,
html[data-lang="el"] .pchip-out,
html[data-lang="el"] .running-total {
  font-family:'IBM Plex Mono', monospace !important;
  font-weight:700;
}

/* Logo stands alone. No invented slogan or club label. */
.title-brand-block { top:10vh; }
.title-logo-v12 { margin:0; }
.title-rule { margin-top:16px; }

/* One predictable profile target. Everything inside is presentation only. */
.title-profile-plaque {
  appearance:none;
  width:min(360px,36vw);
  grid-template-columns:58px minmax(0,1fr) 38px;
  text-align:left;
  color:var(--cream);
  cursor:pointer;
  transition:transform .1s ease,filter .12s ease,border-color .12s ease;
}
.title-profile-plaque:hover { filter:brightness(1.08); border-color:rgba(240,196,25,.5); }
.title-profile-plaque:active { transform:translateY(3px); }
.title-profile-avatar { pointer-events:none; display:block; }
.title-profile-copy { display:block; min-width:0; }
.title-profile-copy small { display:block; color:var(--gold); font-size:13px; line-height:1; margin-bottom:3px; }
.title-profile-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:24px; line-height:1.05; color:var(--cream); }
.title-profile-level { display:flex; }
.title-profile-open { width:36px;height:36px;padding:5px;border-radius:8px;background:#3a332b;display:flex;align-items:center;justify-content:center; }
.title-profile-open img { width:100%;height:100%;image-rendering:pixelated; }
.title-name-input,.title-profile-edit,.title-avatar-popover { display:none !important; }

/* Profile is the single identity editor. */
.profile-modal { width:min(620px,94vw); }
.profile-identity-edit { margin:14px 0 18px; padding:14px; border:2px solid rgba(240,196,25,.18); border-radius:14px; background:rgba(0,0,0,.16); text-align:left; }
.profile-edit-field { display:block; margin-bottom:14px; }
.profile-edit-field:last-child { margin-bottom:0; }
.profile-edit-field>span { display:block; color:var(--gold); font-size:17px; margin-bottom:8px; }
.profile-name-input { width:100%; }
.profile-avatar-picker { justify-content:flex-start; margin:0; gap:8px; }
.profile-avatar-picker .avatar-opt { width:54px; height:54px; }

/* Interface Size now changes obvious, high-level GUI geometry on desktop. */
body.ui-compact { --gui-scale:.86; }
body.ui-large { --gui-scale:1.18; }
@media (min-width:761px) {
  body.ui-compact .title-main-menu { width:min(29vw,370px); gap:8px; }
  body.ui-large .title-main-menu { width:min(38vw,500px); gap:14px; }
  body.ui-compact .title-menu-button { min-height:62px; font-size:24px; }
  body.ui-large .title-menu-button { min-height:86px; font-size:36px; }
  body.ui-compact .title-menu-primary { min-height:76px; font-size:31px; }
  body.ui-large .title-menu-primary { min-height:106px; font-size:45px; }
  body.ui-compact .title-profile-plaque { width:min(320px,32vw); }
  body.ui-large .title-profile-plaque { width:min(410px,40vw); }
  body.ui-compact .settings-v12 { width:min(750px,92vw); }
  body.ui-large .settings-v12 { width:min(980px,96vw); }
  body.ui-compact .settings-tabs-v12 button { min-height:50px; font-size:17px; }
  body.ui-large .settings-tabs-v12 button { min-height:68px; font-size:22px; }
  body.ui-compact .settings-pane-v12 .seg button, body.ui-compact .settings-pane-v12 .btn { font-size:16px; min-height:42px; }
  body.ui-large .settings-pane-v12 .seg button, body.ui-large .settings-pane-v12 .btn { font-size:21px; min-height:54px; }
  body.ui-compact .progress-stage-v12 { width:min(1180px,95vw); }
  body.ui-large .progress-stage-v12 { width:min(1540px,98vw); }
}

/* Settings hierarchy and overflow. Headings always outrank controls. */
.settings-tabs-v12 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.settings-tabs-v12 button { min-width:0; overflow:hidden; }
.settings-tabs-v12 button span { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-group-v12 h3 { font-size:24px !important; line-height:1.15; margin-bottom:14px; }
.settings-pane-v12 .seg button,.settings-pane-v12 .btn { font-size:17px !important; }
.settings-wrap-v12 { justify-content:center !important; width:100%; }
.settings-wrap-v12 button { flex:1 1 135px; max-width:210px; }
.size-options button { min-width:0; overflow-wrap:anywhere; line-height:1.15; padding-inline:8px; }

/* Side panel inherits KOUNGA type, including Table log / Chat headers. */
.side-panel,.side-panel *,.panel-tab,.chat-msg,.log-entry,.chat-compose input,.chat-send { font-family:var(--ui-font) !important; }
.panel-tab,.side-title { font-size:18px !important; }

/* Play hub artwork is more prominent and text rhythm is tighter. */
.play-mode-card { grid-template-columns:78px 1fr; grid-template-rows:auto auto; column-gap:16px; row-gap:2px; }
.play-mode-card img { width:72px;height:72px; }
.play-mode-card strong { align-self:end; line-height:.95; }
.play-mode-card small { align-self:start; margin-top:0; line-height:1.1; }

/* Hand ordering is cosmetic and should remain usable. A card drag itself
   owns the pointer, while the face is never allowed to intercept it. */
.hand-row { touch-action:none; }
.hand-row .card { touch-action:none; }
.hand-row .cardface,.hand-row .cardface * { pointer-events:none !important; }

/* Round result uses the player's actual deck skin. */
.round-result-card.card {
  width:74px; height:106px; margin-left:-31px; flex:0 0 auto;
  cursor:default; pointer-events:none; transform:none !important;
  transition:none !important; z-index:auto !important;
}
.round-result-card.card:first-child { margin-left:0; }
.round-hand-cards-large.dense .round-result-card.card { margin-left:-36px; }
.round-hand-cards-large.dense .round-result-card.card:first-child { margin-left:0; }

/* Reactions keep breathing room from the viewport edge. */
.hand-zone.has-reaction { padding-right:108px; }
.hand-react-btn { right:18px; }
.reaction-picker { box-sizing:border-box; overflow:auto; }

/* ------------------------ COSMETIC PREVIEW ------------------------- */
.cosmetic-preview-backdrop { z-index:12050; padding:18px; }
.cosmetic-preview-shell {
  position:relative;
  width:min(1040px,96vw); max-height:min(820px,94dvh);
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,.72fr);
  grid-template-rows:auto minmax(340px,1fr) auto auto;
  gap:14px; padding:22px;
  border:5px solid #0d0b09; border-radius:26px;
  background:
    radial-gradient(circle at 20% 15%,rgba(var(--accent-rgb),.13),transparent 30%),
    linear-gradient(180deg,#3a3229,#1d1915 70%);
  box-shadow:0 0 0 4px #5a4b3d,inset 0 2px rgba(255,255,255,.08),0 28px 80px rgba(0,0,0,.65);
  overflow:hidden;
}
.cosmetic-preview-close { position:absolute; right:14px;top:14px;z-index:4;width:46px;height:46px;padding:8px;border:3px solid #0e0c0a;border-radius:11px;background:#2b251f;cursor:pointer; }
.cosmetic-preview-close img { width:100%;height:100%;image-rendering:pixelated; }
.cosmetic-preview-copy { grid-column:2;grid-row:1;align-self:end;padding-right:48px; }
.cosmetic-preview-kicker { color:var(--gold);font-size:15px;letter-spacing:.08em; }
.cosmetic-preview-copy h2 { margin:5px 0 3px;color:var(--cream);font-size:38px;line-height:1; }
.cosmetic-preview-copy p { margin:0;color:rgba(246,236,210,.68);font-size:18px; }
.cosmetic-preview-stage { grid-column:1;grid-row:1/3;min-height:470px;border:3px solid rgba(255,255,255,.075);border-radius:20px;background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.12),transparent 52%),#17130f;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative; }
.cosmetic-preview-stage::after { content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.018) 5px 6px); }
.cosmetic-stage-inner { position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.cosmetic-preview-rail { grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(3,1fr);align-content:start;gap:8px;overflow:auto;padding:6px; }
.cosmetic-preview-rail-item { min-width:0;aspect-ratio:1;border:3px solid rgba(255,255,255,.08);border-radius:12px;background:#2b251f;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.cosmetic-preview-rail-item.active { border-color:var(--gold);background:#4a3a1e;box-shadow:0 0 0 2px rgba(240,196,25,.15); }
.cosmetic-preview-rail-item .progress-reward-icon { width:74%;height:74%;border:0;box-shadow:none; }
.cosmetic-preview-actions { grid-column:2;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.cosmetic-preview-actions .btn { min-height:54px;font-size:20px !important; }

.cosmetic-character-card { width:min(560px,84%);min-height:190px;padding:24px;display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center;border:4px solid #0e0c0a;border-radius:20px;background:linear-gradient(135deg,#4b402f,#25201b);box-shadow:0 12px 0 rgba(0,0,0,.28),inset 0 2px rgba(255,255,255,.07); }
.cosmetic-character-avatar { width:150px;height:150px;padding:12px;border:4px solid var(--gold);border-radius:18px;background:#16120f; }
.cosmetic-character-avatar svg { width:100%;height:100%; }
.cosmetic-character-card span { display:block;color:var(--gold);font-size:15px; }
.cosmetic-character-card strong { display:block;color:var(--cream);font-size:36px;line-height:1;margin:7px 0; }
.cosmetic-character-card small { color:rgba(246,236,210,.65);font-size:16px; }
.cosmetic-character-reactions { position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:10px; }
.cosmetic-reaction-sample { width:78px;height:78px;background-size:1600% 600%;image-rendering:pixelated;background-repeat:no-repeat;animation:reactionSpritePlayV12 2.1s steps(15,end) infinite; }

.cosmetic-deck-fan { position:relative;width:520px;height:390px; }
.cosmetic-preview-card,.cosmetic-preview-back { position:absolute;width:180px;height:258px;border:5px solid #17130f;border-radius:18px;box-shadow:0 14px 0 rgba(0,0,0,.25);background:#fffdf6;color:#17130f;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:18px;font-size:42px; }
.cosmetic-preview-card .cp-suit { font-size:64px;align-self:center;margin-top:28px; }
.cosmetic-preview-card.suit-red { color:#c53e48; }
.cosmetic-preview-card.card-0 { left:30px;top:88px;transform:rotate(-16deg); }
.cosmetic-preview-card.card-1 { left:165px;top:42px;transform:rotate(1deg); }
.cosmetic-preview-card.card-2 { left:300px;top:90px;transform:rotate(16deg); }
.cosmetic-preview-back { left:190px;top:105px;transform:translateY(50px);background:repeating-linear-gradient(45deg,var(--accent) 0 9px,#252018 9px 18px); }
.preview-pack-minimal .cosmetic-preview-card { border-color:#7699aa;background:#eef7fa;box-shadow:inset 0 0 0 3px #b7d0da,0 14px 0 rgba(0,0,0,.25); }
.preview-pack-ink .cosmetic-preview-card { background:#f1dfc5;border-color:#59422e;filter:saturate(.9); }
.preview-pack-zen .cosmetic-preview-card { background:#f8edf1;border-color:#c98aa1;box-shadow:inset 0 0 20px rgba(216,142,166,.16),0 14px 0 rgba(0,0,0,.25); }

.cosmetic-table-preview { width:min(680px,88%);height:min(390px,72%);min-height:290px;border:12px solid #17130f;border-radius:34px;background:var(--preview-felt,#5c8a72);box-shadow:0 14px 0 rgba(0,0,0,.32),inset 0 0 0 5px rgba(255,255,255,.08),inset 0 0 55px rgba(0,0,0,.25);position:relative;overflow:hidden; }
.cosmetic-table-preview.preview-tableTextures-weave { background:repeating-linear-gradient(45deg,#7c6c5a 0 8px,#51463b 8px 16px); }
.cosmetic-table-preview.preview-tableTextures-baize { background:radial-gradient(circle at 4px 4px,#8c7c67 0 2px,#4d4439 2px 7px); }
.cosmetic-table-preview.preview-tableTextures-linen { background:repeating-linear-gradient(0deg,#786957 0 3px,#52473b 3px 8px); }
.cosmetic-table-preview.preview-tableTextures-plain { background:#6a5c4c; }
.cosmetic-mini-meld { position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex; }
.cosmetic-mini-meld i { width:76px;height:108px;margin-left:-18px;border:3px solid #17130f;border-radius:8px;background:#fff;color:#17130f;font-style:normal;font-size:24px;padding:8px;box-shadow:3px 4px rgba(0,0,0,.25); }
.cosmetic-mini-meld i:first-child { margin-left:0; }
.cosmetic-mini-pile { position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:72px;height:100px;border:4px solid #17130f;border-radius:8px;background:repeating-linear-gradient(45deg,var(--gold) 0 7px,#252018 7px 14px); }

/* Reward cards are inspectable, not dead summaries. */
.progress-node { cursor:pointer; }
.progress-node:hover { filter:brightness(1.07) !important; }
.progress-node:focus-visible,.progress-locker-item:focus-visible,.progress-collection-card:focus-visible { outline:3px solid var(--gold);outline-offset:3px; }
.progress-more-rewards { pointer-events:none; }
.progress-collection-card { cursor:pointer; }
.progress-locker-item[aria-disabled="true"] { cursor:pointer; }

/* Single vertical scroller in Locker. The item grid itself never clips a row. */
#progressLockerView { overflow-y:auto; overflow-x:hidden; padding-right:5px; }
.progress-locker-grid-v12 { height:auto !important; min-height:0; overflow:visible !important; padding-bottom:20px; }
.progress-collection-grid-v12 { position:sticky;top:0;z-index:4;background:linear-gradient(180deg,#221d18 75%,rgba(34,29,24,0));padding-bottom:8px; }

@media (max-width:760px) {
  .title-brand-block { top:calc(8vh + env(safe-area-inset-top)); }
  .title-profile-plaque { left:8px;right:8px;width:auto;grid-template-columns:48px minmax(0,1fr) 34px; }
  .title-profile-copy strong { font-size:20px; }
  .title-profile-copy small { font-size:11px; }
  .title-profile-open { width:32px;height:32px; }
  .settings-tabs-v12 { gap:3px;padding:6px; }
  .settings-tabs-v12 button { font-size:clamp(11px,3vw,14px) !important;padding:4px 2px; }
  .settings-tabs-v12 button span { white-space:normal;line-height:1.05;text-align:center; }
  .settings-group-v12 h3 { font-size:20px !important; }
  .settings-pane-v12 .seg button,.settings-pane-v12 .btn { font-size:15px !important; }
  .settings-three-v12 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .size-options button { min-height:52px; font-size:13px !important; }
  .play-mode-card { grid-template-columns:58px 1fr; min-height:82px; padding:9px 11px; row-gap:0; }
  .play-mode-card img { width:54px;height:54px; }
  .play-mode-card strong { font-size:21px; }
  .play-mode-card small { font-size:14px; }
  .hand-zone.has-reaction { padding-right:86px; }
  .hand-react-btn { right:12px; width:68px; min-height:72px; }
  .round-result-card.card { width:60px;height:86px;margin-left:-25px; }
  .round-hand-cards-large.dense .round-result-card.card { margin-left:-29px; }
  .cosmetic-preview-backdrop { padding:6px; }
  .cosmetic-preview-shell { width:calc(100vw - 12px);max-height:calc(100dvh - 12px);grid-template-columns:1fr;grid-template-rows:auto minmax(300px,1fr) auto auto;padding:14px;border-radius:20px;overflow-y:auto; }
  .cosmetic-preview-copy { grid-column:1;grid-row:1;padding-right:44px; }
  .cosmetic-preview-copy h2 { font-size:30px; }
  .cosmetic-preview-stage { grid-column:1;grid-row:2;min-height:330px; }
  .cosmetic-preview-rail { grid-column:1;grid-row:3;display:flex;overflow-x:auto;overflow-y:hidden; }
  .cosmetic-preview-rail-item { flex:0 0 72px;width:72px;height:72px;aspect-ratio:auto; }
  .cosmetic-preview-actions { grid-column:1;grid-row:4; }
  .cosmetic-character-card { width:90%;grid-template-columns:104px 1fr;gap:14px;padding:16px;min-height:150px; }
  .cosmetic-character-avatar { width:100px;height:100px; }
  .cosmetic-character-card strong { font-size:27px; }
  .cosmetic-character-reactions { bottom:16px;gap:4px; }
  .cosmetic-reaction-sample { width:58px;height:58px; }
  .cosmetic-deck-fan { transform:scale(.66); }
  .cosmetic-table-preview { width:92%;height:260px;min-height:260px; }
  #progressLockerView { padding-bottom:10px; }
  .progress-collection-grid-v12 { position:static; }
}


/* src/styles.css part 07 — v14 layers: account foundation, GUI scaling and the shared type family.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   v14 POLISH + ACCOUNT FOUNDATION
   Critical small text prioritises legibility; display text keeps KOUNGA's
   pixel voice. GUI size controls geometry, not only cards.
   ===================================================================== */
:root{
  --ui-font:'IBM Plex Mono',ui-monospace,monospace;
  --ui-display:'Silkscreen','IBM Plex Mono',monospace;
  --ui-logo:'Press Start 2P',monospace;
}
body{font-family:var(--ui-font);font-weight:600;}
.btn,.title-menu-button,.play-mode-card strong,.section-title,.settings-group-v12 h3,
.progress-node-name,.profile-game-title,.action-react-label{font-family:var(--ui-display)!important;}
/* Tiny text and card glyphs must never use the stylised display face. */
.cf-rank,.cf-suit,.tc-rank,.tc-suit,.pile-count,.pchip-score,.pchip-count,.pchip-timer-seconds,
.status-round,.status-phase,.round-hand-counter,.diag-line,.side-tab,.chat-msg,.log-entry,
.cosmetic-preview-copy p,.cosmetic-preview-meta,.range-val{font-family:var(--ui-font)!important;}
.cf-rank,.tc-rank,.pile-count{font-weight:700;letter-spacing:0;}
html[data-lang="el"] body,html[data-lang="el"] button,html[data-lang="el"] input,
html[data-lang="el"] textarea,html[data-lang="el"] select{font-family:'IBM Plex Mono',monospace!important;}
html[data-lang="el"] .section-title,html[data-lang="el"] .settings-group-v12 h3,
html[data-lang="el"] .title-menu-button,html[data-lang="el"] .play-mode-card strong{font-family:'IBM Plex Mono',monospace!important;font-weight:700;}

/* Resume is part of the menu flow, never a floating layer that can cover PLAY. */
.title-main-menu .title-resume{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;grid-column:1/-1;width:100%!important;min-height:54px;margin:0 0 2px;z-index:auto;}
.title-main-menu .title-resume.hidden{display:none!important;}

/* One truly centred game status, independent of different left/right HUD widths. */
.statusbar{position:relative;}
.status-center{position:absolute;left:50%;transform:translateX(-50%);width:min(52vw,620px);z-index:0;pointer-events:none;text-align:center;}
.statusbar>.hud-menu,.status-side{position:relative;z-index:2;}
@media(max-width:700px){.status-center{width:min(48vw,280px)}.status-phase{font-size:calc(18px * var(--gui-scale))!important}.status-round{font-size:calc(13px * var(--gui-scale))!important}}

/* The hand itself is always centred. Social controls no longer steal its width. */
.hand-zone,.hand-zone.has-reaction{padding-right:0!important;padding-left:0!important;}
.hand-row{width:100%;justify-content:center;}
.action-bar{align-items:stretch;}
.action-bar .btn-react{display:flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-width:96px;padding-inline:10px;border-color:rgba(240,196,25,.62);background:linear-gradient(180deg,#4c4025,#29231d);color:var(--gold-hot);}
.action-react-avatar{width:34px;height:34px;display:block;flex:0 0 auto}.action-react-avatar svg{width:100%;height:100%;display:block}.action-react-label{font-size:15px;line-height:1;}
@media(max-width:700px){.action-bar{gap:4px}.action-bar .btn{font-size:clamp(13px,3.6vw,17px)!important;padding:10px 3px}.action-bar .btn-react{min-width:64px;padding:5px 4px;flex:0 0 64px;flex-direction:column;gap:2px}.action-react-avatar{width:28px;height:28px}.action-react-label{font-size:11px}.action-bar #btnHelp{display:none!important}}

/* Reaction picker is positioned from the real viewport by JS; CSS never shoves it to an edge. */
.reaction-picker{right:auto!important;bottom:auto!important;max-width:calc(100vw - 28px)!important;box-sizing:border-box;}

/* Settings: readable tabs, real size changes, no clipped labels. */
.settings-v12{width:min(calc(860px * var(--gui-scale)),96vw)!important;}
.settings-tabs-v12{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.settings-tabs-v12 button{overflow:visible!important;min-width:0!important;min-height:calc(58px * var(--gui-scale))!important;padding:7px 8px!important;font-family:var(--ui-font)!important;font-size:calc(17px * var(--gui-scale))!important;}
.settings-tabs-v12 button span{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;line-height:1.1;}
.settings-tabs-v12 img{width:calc(29px * var(--gui-scale))!important;height:calc(29px * var(--gui-scale))!important;flex:0 0 auto;}
.settings-group-v12 h3{font-size:calc(22px * var(--gui-scale))!important;}
.settings-pane-v12 .seg button,.settings-pane-v12 .btn{font-size:calc(15px * var(--gui-scale))!important;min-height:calc(46px * var(--gui-scale))!important;}
.size-options{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.size-options button{font-family:var(--ui-font)!important;font-size:calc(14px * var(--gui-scale))!important;line-height:1.05!important;white-space:normal!important;overflow:visible!important;overflow-wrap:normal!important;word-break:normal!important;padding-inline:5px!important;}
.settings-diagnostic-button{width:100%;min-height:62px;border:3px solid rgba(255,255,255,.08);border-radius:12px;background:#2c2722;color:var(--cream);display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;text-align:left;padding:9px 13px;cursor:pointer;}
.settings-diagnostic-button img{width:46px;height:46px;image-rendering:pixelated;object-fit:contain}.settings-diagnostic-button strong{display:block;font-family:var(--ui-display);font-size:18px}.settings-diagnostic-button small{display:block;margin-top:4px;font-family:var(--ui-font);font-size:14px;color:rgba(246,236,210,.65)}
@media(max-width:620px){.settings-tabs-v12{grid-template-columns:repeat(2,minmax(0,1fr))!important}.settings-tabs-v12 button{flex-direction:row!important;font-size:16px!important;min-height:52px!important}.settings-v12{width:calc(100vw - 10px)!important}.settings-three-v12,.size-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}.size-options button{font-size:12px!important}}

/* Diagnostics live in Settings and long URLs wrap safely. */
.diag-line{min-width:0;align-items:flex-start}.diag-line>span:last-child{min-width:0;overflow-wrap:anywhere;word-break:break-word}.diag-detail{overflow-wrap:anywhere;word-break:break-word;}

/* Account surface inside My Profile. */
.profile-account{margin:14px 0;padding:14px;border:3px solid rgba(75,167,215,.24);border-radius:14px;background:linear-gradient(180deg,rgba(75,167,215,.10),rgba(0,0,0,.14));text-align:left;}
.profile-account-head{display:grid;grid-template-columns:44px 1fr;gap:11px;align-items:center}.profile-account-head img{width:42px;height:42px;image-rendering:pixelated}.profile-account-head strong{display:block;font-family:var(--ui-display);font-size:19px;color:var(--cream)}.profile-account-head span{display:block;margin-top:3px;font-size:14px;color:var(--gold)}
.profile-account-state{margin-top:11px}.profile-account-state p{margin:0 0 10px;font-size:14px;line-height:1.35;color:rgba(246,236,210,.76)}.google-signin-mount{min-height:44px;display:flex;align-items:center;justify-content:flex-start}.account-connected-row{display:flex;align-items:center;gap:9px}.account-connected-dot{width:12px;height:12px;border-radius:50%;background:#67d47d;box-shadow:0 0 12px rgba(103,212,125,.6)}.account-connected-row strong{display:block;font-size:16px;color:var(--cream)}.account-connected-row small{display:block;margin-top:2px;font-size:13px;color:rgba(246,236,210,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38ch}.account-setup-help{width:100%;font-size:13px!important;}
@media(max-width:700px){.cosmetic-preview-stage{overflow:hidden}}

/* Round-over cards use the same actual card skin without legacy typography overrides. */
.round-result-card.card{font-family:inherit!important;background:var(--card-stock)!important;}
.round-result-card.card .cardface{font-family:inherit!important;}

/* Small critical card ranks use a highly legible mono face. */
.card .cf-rank,.table-card .tc-rank,.discard-pile .table-card .tc-rank{font-family:'IBM Plex Mono',monospace!important;font-weight:700!important;}
.pile-count{font-size:max(12px,calc(var(--base-font) * .56))!important;}

/* Full viewport settings scale. */
body.ui-compact{--gui-scale:.86;}
body.ui-comfortable{--gui-scale:1;}
body.ui-large{--gui-scale:1.18;}


/* =====================================================================
   v14 FINAL POLISH: legibility, true GUI scaling, centred playfield,
   account surface, diagnostics, WYSIWYG cosmetics.
   ===================================================================== */
:root{
  --ui-font:'Azeret Mono','IBM Plex Mono',ui-monospace,monospace;
  --ui-display:'Jersey 15','Azeret Mono','IBM Plex Mono',monospace;
  --ui-logo:'Press Start 2P',monospace;
}
body{font-family:var(--ui-font);font-weight:600;}
.btn,.title-menu-button,.play-mode-card strong,.section-title,.settings-group-v12 h3,
.progress-node-name,.profile-game-title,.action-react-label,.profile-account-head strong{
  font-family:var(--ui-display)!important;
  letter-spacing:.015em;
}
/* Greek gets a monospaced, retro-tech face rather than a generic proportional sans. */
html[data-lang="el"] body,html[data-lang="el"] button,html[data-lang="el"] input,
html[data-lang="el"] textarea,html[data-lang="el"] select{font-family:'Azeret Mono','IBM Plex Mono',monospace!important;}
html[data-lang="el"] .section-title,html[data-lang="el"] .settings-group-v12 h3,
html[data-lang="el"] .title-menu-button,html[data-lang="el"] .play-mode-card strong,
html[data-lang="el"] .profile-account-head strong{font-family:'Azeret Mono','IBM Plex Mono',monospace!important;font-weight:700;}

/* Tiny/critical glyphs use the most legible face in the stack. */
.cf-rank,.cf-suit,.tc-rank,.tc-suit,.pile-count,.pchip-score,.pchip-count,.pchip-timer-seconds,
.status-round,.status-phase,.round-hand-counter,.diag-line,.chat-msg,.log-entry,.range-val{
  font-family:'Azeret Mono','IBM Plex Mono',monospace!important;
}
.card .cf-rank,.table-card .tc-rank,.discard-pile .table-card .tc-rank{
  font-weight:700!important;letter-spacing:-.02em!important;
}
.pile-count{font-size:max(14px,calc(var(--base-font) * .62))!important;font-weight:700!important;}

/* GUI size is an actual application-wide scale, not just a card preset. */
body.ui-compact{--gui-scale:.82;--ui-scale:.82;}
body.ui-comfortable{--gui-scale:1;--ui-scale:1;}
body.ui-large{--gui-scale:1.24;--ui-scale:1.22;}
@media (min-width:761px){
  body.ui-compact .settings-v12{width:min(720px,91vw)!important;}
  body.ui-comfortable .settings-v12{width:min(860px,94vw)!important;}
  body.ui-large .settings-v12{width:min(1040px,97vw)!important;}
  body.ui-compact .modal:not(.settings-v12){font-size:14px;}
  body.ui-large .modal:not(.settings-v12){font-size:18px;}
  body.ui-compact .hud-btn{transform:scale(.92);transform-origin:center;}
  body.ui-large .hud-btn{transform:scale(1.08);transform-origin:center;}
}

/* Settings: tabs read as full labels. Nothing gets abbreviated/clipped. */
.settings-tabs-v12{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;padding:10px!important;}
.settings-tabs-v12 button{
  min-width:0!important;min-height:calc(76px * var(--gui-scale))!important;
  padding:8px 5px!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:6px!important;
  overflow:visible!important;font-family:var(--ui-font)!important;
  font-size:calc(15px * var(--gui-scale))!important;line-height:1.05!important;
}
.settings-tabs-v12 button span{display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:center!important;line-height:1.05!important;}
.settings-tabs-v12 img{width:calc(36px * var(--gui-scale))!important;height:calc(36px * var(--gui-scale))!important;}
.settings-group-v12 h3{font-size:calc(27px * var(--gui-scale))!important;line-height:1!important;margin:0 0 calc(14px * var(--gui-scale))!important;color:var(--gold-hot)!important;}
.settings-pane-v12 .seg button,.settings-pane-v12 .btn{font-size:calc(15px * var(--gui-scale))!important;min-height:calc(48px * var(--gui-scale))!important;}
.size-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;}
.size-options button{font-family:var(--ui-font)!important;font-size:calc(12.5px * var(--gui-scale))!important;white-space:normal!important;line-height:1.1!important;padding:7px 4px!important;min-width:0!important;overflow:visible!important;}
@media(max-width:620px){
  .settings-tabs-v12{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .settings-tabs-v12 button{min-height:62px!important;flex-direction:row!important;font-size:15px!important;gap:9px!important;}
  .settings-tabs-v12 img{width:27px!important;height:27px!important;}
  .settings-group-v12 h3{font-size:22px!important;}
  .size-options button{font-size:11.5px!important;min-height:48px!important;}
}

/* Resume belongs to the same menu flow and can never cover PLAY. */
.title-main-menu .title-resume{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;grid-column:1/-1;width:100%!important;margin:0 0 3px!important;z-index:auto!important;}

/* True geometric centring, independent of the HUD's asymmetrical controls. */
.statusbar{position:relative!important;}
.status-center{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;width:min(54vw,680px)!important;text-align:center!important;pointer-events:none!important;z-index:0!important;}
.statusbar>.hud-menu,.status-side{position:relative!important;z-index:2!important;}
.player-rail{justify-content:center!important;}
.hand-zone,.hand-zone.has-reaction{padding-left:0!important;padding-right:0!important;}
.hand-row{width:100%!important;justify-content:center!important;margin-inline:auto!important;}
.action-bar{width:100%!important;margin-inline:auto!important;justify-content:center!important;}
.piles-area{justify-content:center!important;margin-inline:auto!important;}

/* React is part of the action bar, while the picker opens inward and always
   preserves a real viewport gutter. */
.action-bar .btn-react{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;flex:0 0 auto!important;min-width:102px!important;border-color:rgba(240,196,25,.65)!important;background:linear-gradient(180deg,#4c4025,#29231d)!important;color:var(--gold-hot)!important;}
.action-react-avatar{width:34px;height:34px;flex:0 0 auto}.action-react-avatar svg{width:100%;height:100%;display:block}.action-react-label{font-size:18px!important;}
.reaction-picker{right:auto!important;bottom:auto!important;max-width:calc(100vw - 40px)!important;box-sizing:border-box!important;overflow:auto!important;}
@media(max-width:700px){
  .status-center{width:min(52vw,300px)!important;}
  .action-bar .btn-react{min-width:68px!important;flex:0 0 68px!important;padding:5px 4px!important;flex-direction:column!important;gap:2px!important;}
  .action-react-avatar{width:29px;height:29px}.action-react-label{font-size:12px!important;}
}

/* Diagnostics live under Settings and long deployment addresses wrap. */
.settings-diagnostic-button{width:100%;min-height:68px;border:3px solid rgba(255,255,255,.08);border-radius:13px;background:#2c2722;color:var(--cream);display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;text-align:left;padding:10px 14px;cursor:pointer;}
.settings-diagnostic-button img{width:50px;height:50px;image-rendering:pixelated;object-fit:contain}.settings-diagnostic-button strong{display:block;font-family:var(--ui-display);font-size:22px}.settings-diagnostic-button small{display:block;margin-top:2px;font-family:var(--ui-font);font-size:14px;color:rgba(246,236,210,.65)}
.diag-line{min-width:0!important;align-items:flex-start!important}.diag-line>span:last-child,.diag-detail{min-width:0!important;overflow-wrap:anywhere!important;word-break:break-word!important;}

/* Account identity is a contained section of My Profile, not a login wall. */
.profile-account{margin:14px 0;padding:15px;border:3px solid rgba(75,167,215,.24);border-radius:14px;background:linear-gradient(180deg,rgba(75,167,215,.10),rgba(0,0,0,.14));text-align:left;}
.profile-account-head{display:grid;grid-template-columns:46px 1fr;gap:11px;align-items:center}.profile-account-head img{width:44px;height:44px;image-rendering:pixelated}.profile-account-head strong{display:block;font-size:23px;color:var(--cream)}.profile-account-head span{display:block;margin-top:1px;font-size:14px;color:var(--gold)}
.profile-account-state{margin-top:12px}.profile-account-state p{margin:0 0 11px;font-size:14px;line-height:1.4;color:rgba(246,236,210,.77)}.google-signin-mount{min-height:44px;display:flex;align-items:center;justify-content:flex-start}.google-signin-mount.is-busy{opacity:.55;pointer-events:none}.account-connected-row{display:flex;align-items:center;gap:9px}.account-connected-dot{width:12px;height:12px;border-radius:50%;background:#67d47d;box-shadow:0 0 12px rgba(103,212,125,.6)}.account-connected-row strong{display:block;font-size:16px;color:var(--cream)}.account-connected-row small{display:block;margin-top:2px;font-size:13px;color:rgba(246,236,210,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42ch}.account-setup-help{width:100%;font-size:13px!important;}
@media(max-width:700px){.cosmetic-preview-stage{overflow:hidden}}

/* Round over cards inherit the selected deck skin exactly. */
.round-result-card.card{font-family:inherit!important;background:var(--card-stock)!important;container-type:size!important;}
.round-result-card.card .cardface{font-family:inherit!important;}

/* Existing decorative effects are part of the visual identity; no separate
   performance toggle is needed for confetti. */
#swEffects{display:none!important;}
.reaction-row-clap { background-position-y:60%; }
.reaction-row-nice { background-position-y:60%; } /* backwards compatibility */


/* =====================================================================
   v14 RELEASE OVERRIDES: one legible KOUNGA type family + richer emotes.
   Tektur covers both Latin and Greek, keeping the two languages visually
   related instead of falling back to an unrelated web sans.
   ===================================================================== */
:root{
  --ui-font:'Tektur',system-ui,sans-serif;
  --ui-display:'Tektur',system-ui,sans-serif;
  --ui-logo:'Press Start 2P',monospace;
}
body,button,input,textarea,select{font-family:var(--ui-font)!important;font-variation-settings:'wdth' 92;font-weight:600;}
.title,.title-logo-v12{font-family:var(--ui-logo)!important;}
.btn,.title-menu-button,.play-mode-card strong,.section-title,.settings-group-v12 h3,
.progress-node-name,.profile-game-title,.action-react-label,.profile-account-head strong,
.progress-title-v12 h2,.progress-title-v12>span{font-family:var(--ui-display)!important;font-weight:750!important;font-variation-settings:'wdth' 88;letter-spacing:.025em;}
html[data-lang="el"] body,html[data-lang="el"] button,html[data-lang="el"] input,
html[data-lang="el"] textarea,html[data-lang="el"] select,
html[data-lang="el"] .section-title,html[data-lang="el"] .settings-group-v12 h3,
html[data-lang="el"] .title-menu-button,html[data-lang="el"] .play-mode-card strong,
/* The older Greek monospace list (never self-hosted) must not outrank Tektur. */
html[data-lang="el"] .btn,html[data-lang="el"] .seg button,html[data-lang="el"] .text-input,
html[data-lang="el"] .range-row,html[data-lang="el"] .toggle-row,html[data-lang="el"] .chat-compose input,
html[data-lang="el"] .opt-row,html[data-lang="el"] .evaluator-banner,html[data-lang="el"] .pchip-out,
html[data-lang="el"] .running-total{
  font-family:'Tektur',system-ui,sans-serif!important;font-variation-settings:'wdth' 94;font-weight:650!important;
}
/* Dense card numerals are still Tektur, but never allowed to collapse below a
   legible optical size. 4/W/2/5 were manually checked at these floors. */
.cf-rank,.cf-suit,.tc-rank,.tc-suit,.pile-count,.pchip-score,.pchip-count,.pchip-timer-seconds,
.status-round,.status-phase,.round-hand-counter,.diag-line,.chat-msg,.log-entry,.range-val{
  font-family:'Tektur',system-ui,sans-serif!important;font-variation-settings:'wdth' 96;font-weight:700!important;
}
.pile-count{font-size:max(15px,calc(var(--base-font) * .68))!important;letter-spacing:.02em!important;}
.card .cf-rank,.table-card .tc-rank,.discard-pile .table-card .tc-rank{font-family:'Tektur',system-ui,sans-serif!important;font-weight:800!important;letter-spacing:0!important;}

/* 24-frame, 112px reaction performances. */
.reaction-option-mini,.reaction-sprite,.cosmetic-reaction-sample{background-size:2400% 600%!important;image-rendering:pixelated!important;}
.reaction-option-mini{animation:reactionSpritePlayV14 2.35s steps(23,end) infinite!important;}
.reaction-sprite{animation:reactionSpritePlayV14 2.35s steps(23,end) 1 forwards!important;}
.cosmetic-reaction-sample{animation:reactionSpritePlayV14 2.35s steps(23,end) infinite!important;}
@keyframes reactionSpritePlayV14{from{background-position-x:0%}to{background-position-x:100%}}

/* v14.1: Interface-size presets must visibly change the actual settings
   cabinet, not be silently capped by the legacy generic modal width. */
.settings-v12{max-width:none!important;}
@media (min-width:761px){
  body.ui-compact .settings-v12{width:min(700px,90vw)!important;}
  body.ui-comfortable .settings-v12{width:min(860px,94vw)!important;}
  body.ui-large .settings-v12{width:min(1030px,96vw)!important;}
  body.ui-compact .title-menu-button{transform-origin:right center;}
  body.ui-large .title-menu-button{transform-origin:right center;}
  body.ui-compact .play-hub-panel{width:min(810px,88vw)!important;}
  body.ui-comfortable .play-hub-panel{width:min(900px,92vw)!important;}
  body.ui-large .play-hub-panel{width:min(1020px,95vw)!important;}
  body.ui-compact .play-mode-card{min-height:118px!important;}
  body.ui-large .play-mode-card{min-height:172px!important;}
  body.ui-compact .play-mode-card strong{font-size:24px!important;}
  body.ui-large .play-mode-card strong{font-size:33px!important;}
  body.ui-compact .play-mode-card small{font-size:15px!important;}
  body.ui-large .play-mode-card small{font-size:20px!important;}
}

/* v14 account UX polish */
.account-local-note{
  width:100%; padding:11px 12px; border:2px solid rgba(240,196,25,.24);
  border-radius:10px; background:rgba(20,17,14,.72); color:rgba(255,241,207,.82);
  font:600 14px/1.35 var(--ui-font); text-align:left;
}
.google-signin-mount > div:not(.account-local-note){max-width:100%!important;}
@media (max-width:600px){
  .profile-account{padding:12px!important}
  .profile-account-head{grid-template-columns:40px 1fr!important}
  .profile-account-head img{width:38px!important;height:38px!important}
  .profile-account-head strong{font-size:20px!important}
  .profile-account-state p,.account-local-note{font-size:13px!important}
}

/* src/styles.css part 08 — v15–v17 layers: mobile composition and refinements.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   v15 MOBILE COMPOSITION
   Phones get a purpose-built layout rather than a scaled-down desktop.
   Everything below is mobile-only so the approved desktop composition is
   deliberately left untouched.
   ===================================================================== */
@media (max-width:700px){
  /* ---------- Settings: fixed cabinet chrome, independently scrollable body ---------- */
  #modal-settings{
    align-items:stretch!important;
    padding:max(6px,env(safe-area-inset-top)) 5px max(6px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }
  .settings-v12{
    width:100%!important;
    height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    max-height:none!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-width:3px!important;
    border-radius:18px!important;
  }
  .settings-v12-head{
    flex:0 0 auto!important;
    min-height:52px!important;
    padding:7px 9px!important;
  }
  .settings-v12-head h2{font-size:26px!important;line-height:1!important;margin:0!important;}
  .settings-close-v12{width:39px!important;height:39px!important;padding:7px!important;}
  .settings-tabs-v12{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    padding:5px 6px 6px!important;
  }
  .settings-tabs-v12 button{
    min-height:58px!important;
    padding:5px 2px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    justify-content:center!important;
    font-size:11px!important;
    line-height:1.05!important;
    overflow:hidden!important;
  }
  .settings-tabs-v12 button span{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-align:center!important;
  }
  .settings-tabs-v12 img{width:24px!important;height:24px!important;}
  .settings-pane-v12{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    overscroll-behavior:contain!important;
    padding:10px 9px calc(18px + env(safe-area-inset-bottom))!important;
  }
  .settings-group-v12{padding:11px!important;margin-bottom:9px!important;border-radius:11px!important;}
  .settings-group-v12 h3{font-size:18px!important;margin-bottom:9px!important;}
  .settings-pane-v12 .seg button,.settings-pane-v12 .btn{
    min-height:42px!important;
    font-size:14px!important;
  }
  .size-options button{font-size:11px!important;padding-inline:3px!important;}
  .settings-diagnostic-button{min-height:56px!important;grid-template-columns:38px 1fr!important;padding:7px 9px!important;}
  .settings-diagnostic-button img{width:38px!important;height:38px!important;object-fit:contain!important;}
  .settings-diagnostic-button strong{font-size:16px!important;}
  .settings-diagnostic-button small{font-size:12px!important;}

  /* ---------- Founder's Path: mobile becomes a calm vertical collection ---------- */
  .progress-screen-v12{
    padding:max(4px,env(safe-area-inset-top)) 4px max(8px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .progress-screen-v12 > *{margin:0 auto!important;}
  .progress-stage-v12{
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    padding:8px!important;
    border-width:3px!important;
    border-radius:18px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .progress-header-v12{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:6px 8px!important;
    align-items:center!important;
  }
  .progress-back-v12{
    width:40px!important;height:40px!important;padding:7px!important;
    grid-column:1!important;grid-row:1!important;
  }
  .progress-title-v12{grid-column:2!important;grid-row:1!important;min-width:0!important;}
  .progress-title-v12 span{font-size:10px!important;letter-spacing:.09em!important;}
  .progress-title-v12 h2{font-size:21px!important;line-height:1!important;margin-top:2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .progress-profile-v12{
    grid-column:1/-1!important;grid-row:2!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:8px!important;padding:5px 7px!important;border-radius:11px!important;
  }
  .progress-avatar-v12{width:40px!important;height:40px!important;padding:3px!important;border-radius:9px!important;}
  .progress-level-row-v12{font-size:13px!important;gap:6px!important;}
  .progress-xp-track-v12{height:8px!important;margin-top:5px!important;}
  .progress-tabs-v12{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;}
  .progress-tabs-v12 button{height:43px!important;min-width:0!important;padding:4px 7px!important;font-size:14px!important;gap:6px!important;border-width:2px!important;}
  .progress-tabs-v12 img{width:23px!important;height:23px!important;}
  .progress-content-v12{min-height:0!important;overflow:visible!important;}
  .progress-view-v12{height:auto!important;min-height:0!important;overflow:visible!important;}
  .progress-next-v12{
    min-height:0!important;height:auto!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:6px 8px!important;padding:8px!important;margin-bottom:7px!important;border-radius:10px!important;
  }
  .progress-next-label{font-size:10px!important;padding:5px 6px!important;}
  .progress-next-copy{font-size:16px!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .progress-earn-v12{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;justify-content:stretch!important;}
  .progress-earn-v12 span{font-size:11px!important;padding:4px 5px!important;text-align:center!important;}
  .progress-path-frame-v12{
    height:auto!important;min-height:0!important;
    padding:7px!important;border-width:2px!important;border-radius:13px!important;
    overflow:visible!important;
  }
  .progress-path-arrow{display:none!important;}
  .progress-track-v12{
    height:auto!important;display:flex!important;flex-direction:column!important;
    align-items:stretch!important;gap:7px!important;
    overflow:visible!important;padding:0!important;
    scroll-snap-type:none!important;
  }
  .progress-track-v12::before{display:none!important;}
  .progress-node{
    width:100%!important;min-width:0!important;max-width:none!important;
    flex:0 0 auto!important;min-height:96px!important;
    padding:8px!important;border-width:3px!important;border-radius:12px!important;
    display:grid!important;
    grid-template-columns:80px minmax(0,1fr) auto!important;
    grid-template-rows:auto 1fr!important;
    gap:3px 9px!important;
    align-items:center!important;
    text-align:left!important;
    box-shadow:0 4px 0 rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06)!important;
  }
  .progress-node-level{
    grid-column:2!important;grid-row:1!important;
    font-size:14px!important;align-self:end!important;text-align:left!important;
  }
  .progress-node-rewards{
    grid-column:1!important;grid-row:1/3!important;
    min-height:0!important;height:74px!important;
    display:flex!important;gap:4px!important;justify-content:flex-start!important;align-items:center!important;
  }
  .progress-reward-icon{width:38px!important;height:38px!important;border-radius:8px!important;border-width:2px!important;flex:0 0 38px!important;}
  .progress-node-rewards .progress-reward-icon:nth-child(n+3){display:none!important;}
  .progress-more-rewards{font-size:11px!important;}
  .progress-node-name{
    grid-column:2!important;grid-row:2!important;
    min-height:0!important;font-size:16px!important;line-height:1.05!important;text-align:left!important;align-self:start!important;
  }
  .progress-node-state{
    grid-column:3!important;grid-row:1/3!important;
    margin:0!important;padding:5px 6px!important;font-size:10px!important;white-space:nowrap!important;align-self:center!important;
  }
  .locker-top-v12{padding:4px 2px 7px!important;gap:7px!important;}
  .locker-kicker-v12{font-size:10px!important;}
  .locker-top-v12 h3{font-size:21px!important;margin:2px 0!important;}
  .locker-top-v12 p{font-size:12px!important;line-height:1.25!important;margin:0!important;}
  .locker-count-v12{font-size:14px!important;padding:6px 7px!important;}
  .progress-collection-grid-v12{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-bottom:7px!important;}
  .progress-collection-card{min-height:58px!important;padding:7px!important;border-radius:9px!important;column-gap:6px!important;}
  .progress-collection-card strong{font-size:17px!important;}
  .progress-collection-card>span{font-size:13px!important;}
  .progress-collection-preview{display:none!important;}
  .progress-locker-tabs-v12{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;margin-bottom:7px!important;}
  .progress-locker-tabs-v12 button{min-height:38px!important;padding:5px 6px!important;font-size:12px!important;}
  .progress-locker-grid-v12{
    height:auto!important;min-height:0!important;overflow:visible!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:0 0 8px!important;
  }
  .progress-locker-item{min-height:112px!important;padding:8px!important;border-width:2px!important;}
  .progress-locker-item .progress-reward-icon{width:51px!important;height:51px!important;}
  .progress-locker-name{font-size:15px!important;}
  .progress-locker-state{font-size:10px!important;}
  .progress-done-v12{width:100%!important;min-width:0!important;height:42px!important;font-size:14px!important;margin-top:1px!important;}
  .progress-done-v12 img{width:23px!important;height:23px!important;}

  /* ---------- Game HUD: two clean rows, all players visible, no horizontal rail ---------- */
  #screen-game{overflow:hidden!important;}
  .game-root{
    padding:3px 4px calc(5px + env(safe-area-inset-bottom))!important;
    gap:4px!important;
  }
  body.in-game .statusbar{
    padding:max(4px,env(safe-area-inset-top)) 5px 5px!important;
  }
  .statusbar{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-areas:'menu controls' 'status status'!important;
    gap:3px 5px!important;
    align-items:center!important;
    border-width:2px!important;
    border-radius:0 0 12px 12px!important;
  }
  .statusbar>.hud-menu{
    grid-area:menu!important;
    position:static!important;
    width:40px!important;height:40px!important;min-width:40px!important;padding:6px!important;
    justify-self:start!important;
  }
  .status-side{
    grid-area:controls!important;
    position:static!important;
    justify-self:end!important;
    display:flex!important;
    gap:3px!important;
    min-width:0!important;
    z-index:auto!important;
  }
  .status-side .hud-btn,.status-side .operator-quick{
    width:40px!important;height:40px!important;min-width:40px!important;padding:6px!important;border-radius:10px!important;
  }
  .hud-icon-img{width:25px!important;height:25px!important;}
  .hud-btn .hud-label{display:none!important;}
  .status-center{
    grid-area:status!important;
    position:static!important;
    left:auto!important;transform:none!important;
    width:100%!important;max-width:none!important;
    z-index:auto!important;pointer-events:none!important;
    display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;justify-content:center!important;
    gap:8px!important;
    min-height:31px!important;
    padding:4px 7px 2px!important;
    border-top:1px solid rgba(255,255,255,.06)!important;
  }
  .status-round{font-size:11px!important;line-height:1!important;white-space:nowrap!important;letter-spacing:.05em!important;}
  .status-phase{font-size:15px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .game-shell{gap:4px!important;min-height:0!important;}
  .game-main{gap:4px!important;min-height:0!important;}
  .player-rail{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
    padding:0!important;
    overflow:visible!important;
    flex-wrap:initial!important;
  }
  .pchip{
    width:100%!important;min-width:0!important;max-width:none!important;
    min-height:48px!important;
    padding:4px 3px!important;gap:3px!important;border-width:2px!important;border-radius:9px!important;
    flex:initial!important;
  }
  .pchip-av{width:30px!important;height:30px!important;border-radius:6px!important;}
  .pchip-body{min-width:0!important;flex:1 1 auto!important;}
  .pchip-name{font-size:11px!important;line-height:1!important;max-width:100%!important;}
  .pchip-meta{gap:3px!important;min-width:0!important;}
  .pchip-score,.pchip-count,.pchip-timer-seconds{font-size:9px!important;line-height:1!important;}
  .pchip-cards{display:none!important;}
  .pchip-timer-track{height:3px!important;margin-top:3px!important;}
  .pchip-strikes{font-size:8px!important;}
  .table-area{
    flex:1 1 0!important;min-height:86px!important;
    padding:5px!important;padding-top:calc(var(--table-card-h) * .22 + 8px)!important;
    border-width:2px!important;border-radius:11px!important;
  }
  .table-empty-hint{font-size:12px!important;}
  .table-melds{gap:6px!important;}
  .meld-group{padding:5px 6px 5px 4px!important;border-radius:7px!important;}
  .meld-caption{font-size:9px!important;padding:2px 5px!important;}
  .piles-row{gap:34px!important;padding:15px 0 2px!important;}
  .pile{transform:scale(.88);transform-origin:center!important;}
  .pile:active{transform:scale(.84)!important;}
  .pile-label{top:-15px!important;font-size:9px!important;letter-spacing:1px!important;}
  .pile-count{bottom:-15px!important;font-size:12px!important;}
  .hand-zone,.hand-zone.has-reaction{padding:0!important;min-width:0!important;}
  .hand-row{min-height:calc(var(--card-h) + 13px)!important;padding:7px 0 2px!important;}
  .action-bar{width:100%!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;padding:0 0 2px!important;}
  .action-bar .btn{
    min-width:0!important;min-height:51px!important;
    padding:5px 2px!important;font-size:12px!important;line-height:1!important;
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
    border-radius:10px!important;
  }
  .action-bar .btn-react{
    min-width:0!important;width:auto!important;flex:initial!important;
    padding:3px 2px!important;gap:1px!important;flex-direction:column!important;
  }
  .action-react-avatar{width:27px!important;height:27px!important;}
  .action-react-label{font-size:9px!important;}
  .evaluator-banner{font-size:9px!important;padding:5px 7px!important;margin:0 auto!important;}
  .side-panel{
    top:max(4px,env(safe-area-inset-top))!important;
    right:4px!important;bottom:max(4px,env(safe-area-inset-bottom))!important;
    width:calc(100vw - 8px)!important;
    max-width:none!important;
    border:3px solid var(--panel-light)!important;
    border-radius:13px!important;
    padding-top:0!important;padding-bottom:0!important;
    box-shadow:0 14px 48px rgba(0,0,0,.65)!important;
  }
}

/* Very narrow phones need a slightly tighter four-seat rail, never a
   horizontally scrolling one. */
@media (max-width:360px){
  .pchip{padding:3px 2px!important;gap:2px!important;}
  .pchip-av{width:26px!important;height:26px!important;}
  .pchip-name{font-size:10px!important;}
  .pchip-score,.pchip-count,.pchip-timer-seconds{font-size:8px!important;}
  .status-side .hud-btn,.status-side .operator-quick,.statusbar>.hud-menu{width:37px!important;height:37px!important;min-width:37px!important;}
  .hud-icon-img{width:23px!important;height:23px!important;}
  .status-phase{font-size:14px!important;}
  .action-bar .btn{font-size:11px!important;}
}

/* =====================================================================
   v16 polish pass
   ===================================================================== */

/* Top notices default to a neutral/gold rail. Only explicit failures should
   read red; successes get a green rail so account-link feedback feels right. */
.toast {
  border-color: rgba(240,196,25,.62);
  background: rgba(29,26,22,.96);
}
.toast.toast-neutral { border-color: rgba(240,196,25,.62); box-shadow: 0 6px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(240,196,25,.10) inset; }
.toast.toast-success { border-color: var(--green-accent); box-shadow: 0 6px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(111,207,125,.12) inset; }
.toast.toast-warn { border-color: var(--orange); }
.toast.toast-error { border-color: var(--red); }

/* Google sign-in should feel like a Kounga control, while the official GIS
   button remains mounted invisibly behind the scenes to preserve the flow. */
.google-signin-mount { width: 100%; }
.account-google-shell { position: relative; width: min(100%, 360px); }
.account-google-btn {
  width: 100%;
  min-height: 58px;
  padding: 10px 13px;
  border: 2px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: linear-gradient(180deg, #35302a, #211d19);
  color: var(--cream);
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.account-google-btn:hover { filter: brightness(1.06); border-color: rgba(240,196,25,.28); }
.account-google-btn:active { transform: translateY(2px); box-shadow: 0 4px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); }
.account-google-mark {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fff6df, #ead7a4);
  color: #1a1712;
  font: 800 19px/1 var(--ui-display);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
.account-google-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.account-google-copy strong { font: 700 19px/1 var(--ui-display); color: var(--cream); }
.account-google-copy small { color: rgba(246,236,210,.67); font-size: 13px; line-height: 1.2; }
.account-google-arrow { color: var(--gold-hot, var(--gold)); font: 700 24px/1 var(--ui-display); padding-left: 4px; }
.account-google-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.google-signin-mount.is-busy .account-google-btn { opacity: .58; pointer-events: none; }

/* Give the home fan more presence and keep the resume affordance inside the
   menu stack so it no longer sits on top of the flair. */
.title-card-fan {
  left: max(-2vw, -36px);
  top: 12vh;
  width: min(50vw, 660px);
  height: min(50vw, 660px);
  filter: drop-shadow(0 34px 26px rgba(0,0,0,.42));
}
.title-card-fan::before {
  content: '';
  position: absolute;
  inset: 16% 18% 20% 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(240,196,25,.18), rgba(240,196,25,.06) 40%, transparent 72%);
  filter: blur(12px);
}
.title-card {
  border-width: clamp(4px, .48vw, 8px);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.86), 0 11px 0 rgba(0,0,0,.2), 0 22px 36px rgba(0,0,0,.22);
}
.title-card-a { left: 0; top: 20%; transform: rotate(-22deg) scale(1.03); }
.title-card-b { left: 27%; top: 0; transform: rotate(-2deg) scale(1.08); }
.title-card-c { left: 56%; top: 19%; transform: rotate(20deg) scale(1.03); }
.title-main-menu .title-resume {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  grid-column: 1 / -1;
  margin: 0 0 2px !important;
  z-index: auto !important;
}
.title-resume {
  min-height: 60px;
  border-color: rgba(111,207,125,.44);
  background: linear-gradient(180deg, rgba(23,49,31,.92), rgba(20,35,27,.92));
}
@media (max-width: 900px) {
  .title-card-fan {
    left: 50%;
    top: 23vh;
    width: 82vw;
    height: 82vw;
    transform: translateX(-50%);
  }
}
@media (max-width: 700px) {
  .title-card-a { left: 2%; top: 18%; }
  .title-card-b { left: 27%; top: 2%; }
  .title-card-c { left: 54%; top: 20%; }
}

/* On phones keep chat/log as an inset drawer so the board still peeks around
   it rather than losing the whole screen. */
@media (max-width: 900px) {
  .side-panel {
    top: calc(env(safe-area-inset-top) + 72px);
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom) + 86px);
    width: min(340px, 86vw);
    border-radius: 18px;
    border-right: 3px solid var(--panel-light);
    box-shadow: 0 18px 40px rgba(0,0,0,.58);
  }
}
@media (max-width: 620px) {
  .side-panel {
    top: calc(env(safe-area-inset-top) + 66px);
    bottom: calc(env(safe-area-inset-bottom) + 78px);
    width: min(326px, 88vw);
  }
}

/* Founder’s Path declutter pass. */
.progress-earn-v12 > span {
  padding: 6px 9px;
  border: 2px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: #2b2621;
  color: rgba(246,236,210,.76);
  font-size: 16px;
}
.progress-earn-v12 > span > span {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}
.locker-kicker-v12 { display: none; }
.locker-top-v12 { align-items: center; padding-top: 4px; }
.locker-top-v12 h3 { margin-top: 0; }
.progress-collection-grid-v12 {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.progress-collection-card {
  min-height: 78px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(49,43,36,.96), rgba(30,27,23,.96));
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.progress-collection-card:hover { border-color: rgba(240,196,25,.26); transform: translateY(-1px); }
.progress-collection-card.active {
  border-color: rgba(240,196,25,.55);
  background: linear-gradient(180deg, rgba(74,58,30,.96), rgba(45,35,21,.96));
  box-shadow: 0 0 0 2px rgba(240,196,25,.12);
}
.progress-collection-card strong { align-self: start; }
.progress-locker-tabs-v12 { display: none !important; }
.progress-locker-grid-v12 { height: calc(100% - 162px); }
@media (max-width: 700px) {
  .progress-collection-grid-v12 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .progress-collection-card { min-height: 68px; padding: 8px 9px; }
  .progress-locker-grid-v12 { height: calc(100% - 176px); }
  .progress-earn-v12 > span { font-size: 12px; padding: 4px 6px; }
}

/* Make reward icons for table textures actually resemble in-game felts. */
.texture-preview-pixel {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.08), transparent 54%),
    radial-gradient(ellipse at 50% 50%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
.texture-weave .texture-preview-pixel {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 14px),
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.08), transparent 54%),
    radial-gradient(ellipse at 50% 50%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
.texture-baize .texture-preview-pixel {
  background:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.05) 0 1px, transparent 1px 5px) 0 0/7px 7px,
    radial-gradient(circle at 2px 2px, rgba(0,0,0,.09) 0 1px, transparent 1px 5px) 3px 3px/7px 7px,
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.08), transparent 54%),
    radial-gradient(ellipse at 50% 50%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
.texture-linen .texture-preview-pixel {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.08), transparent 54%),
    radial-gradient(ellipse at 50% 50%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
.texture-plain .texture-preview-pixel {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.08), transparent 54%),
    radial-gradient(ellipse at 50% 50%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
.cosmetic-table-preview.preview-tableTextures-weave {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 26px),
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
.cosmetic-table-preview.preview-tableTextures-baize {
  background:
    radial-gradient(circle at 4px 4px, rgba(255,255,255,.05) 0 2px, transparent 2px 7px) 0 0/7px 7px,
    radial-gradient(circle at 4px 4px, rgba(0,0,0,.07) 0 2px, transparent 2px 7px) 3px 3px/7px 7px,
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
.cosmetic-table-preview.preview-tableTextures-linen {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
.cosmetic-table-preview.preview-tableTextures-plain {
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--preview-felt, #5c8a72) 0%, color-mix(in srgb, var(--preview-felt, #5c8a72) 68%, #18231d 32%) 55%, color-mix(in srgb, var(--preview-felt, #5c8a72) 40%, #10100f 60%) 100%);
}
@media (max-width: 700px) {
}

/* =====================================================================
   v17 refinements
   ===================================================================== */

/* Home card flair: keep it dramatic but actually composed. */
.title-card-fan{
  left:-34px;
  top:72px;
  width:min(35vw,540px);
  height:min(35vw,540px);
  filter:drop-shadow(0 28px 24px rgba(0,0,0,.34));
}
.title-card-fan::before{
  inset:10% 0 8% 0;
  background:radial-gradient(circle at 28% 30%, rgba(240,196,25,.16), rgba(240,196,25,.05) 42%, transparent 72%);
}
.title-card{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9), 0 8px 0 rgba(0,0,0,.18), 0 18px 28px rgba(0,0,0,.24)}
.title-card-a{left:4px;top:26%;transform:rotate(-18deg) scale(1.02)}
.title-card-b{left:22%;top:7%;transform:rotate(-2deg) scale(1.06)}
.title-card-c{left:45%;top:25%;transform:rotate(16deg) scale(1.01)}
@media (max-width: 900px){
  .title-card-fan{left:50%;top:21vh;width:68vw;height:68vw;transform:translateX(-50%)}
  .title-card-a{left:2%;top:24%}.title-card-b{left:24%;top:6%}.title-card-c{left:49%;top:24%}
}

/* Desktop in-game header: menu left, utility controls right, cleaner center. */
@media (min-width: 901px){
  .statusbar{
    display:grid!important;
    grid-template-columns:auto minmax(280px,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    min-height:64px!important;
  }
  .statusbar>.hud-menu{justify-self:start!important;order:0}
  .status-center{
    position:static!important;
    left:auto!important;transform:none!important;
    width:auto!important;max-width:none!important;
    justify-self:center!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    text-align:center!important;
    pointer-events:none!important;
  }
  .status-side{justify-self:end!important;display:flex!important;align-items:center!important;gap:8px!important;}
}

/* Profile sheet: use the horizontal space on desktop. */
.profile-modal{max-width:720px;width:min(720px,calc(100vw - 34px));}
@media (min-width: 760px){
  .profile-modal{
    display:grid;
    grid-template-columns:126px minmax(0,1fr);
    grid-template-areas:
      'avatar name'
      'avatar status'
      'identity identity'
      'socialActions socialActions'
      'account account'
      'title title'
      'stats stats'
      'friends friends'
      'activity activity'
      'progress progress'
      'hint hint'
      'done done';
    column-gap:18px;
    row-gap:8px;
    text-align:left;
    align-items:start;
  }
  .profile-avatar{grid-area:avatar;margin:6px auto 0 0;width:92px;height:92px}
  .profile-name{grid-area:name;align-self:end;margin:8px 0 0}
  .profile-status{grid-area:status;margin:0 auto 0 0}
  #profileIdentityEdit{grid-area:identity}
  #profileSocialActions{grid-area:socialActions}
  #profileAccount{grid-area:account}
  .profile-game-title{grid-area:title}
  .profile-stats-grid{grid-area:stats}
  #profileFriendsSection{grid-area:friends}
  #profileActivity{grid-area:activity}
  #profileProgress{grid-area:progress}
  #profileHint{grid-area:hint}
  #btnCloseProfile{grid-area:done;justify-self:end;min-width:180px}
}

/* Locker cleanup: remove odd seams and center item art. */
.progress-collection-grid-v12{
  gap:12px;
  margin-bottom:12px;
}
.progress-collection-card{
  position:relative;
  overflow:hidden;
  align-content:start;
  background:linear-gradient(180deg, rgba(41,36,31,.98), rgba(29,25,22,.98));
  box-shadow:none;
}
.progress-collection-card::after{display:none!important;content:none!important}
.progress-locker-item{
  overflow:hidden;
  background:linear-gradient(180deg, rgba(45,39,34,.96), rgba(28,24,21,.96));
}
.progress-reward-icon,
.progress-locker-item .progress-reward-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto 10px!important;
}
.progress-locker-item .progress-reward-icon svg,
.progress-locker-item .progress-reward-icon img,
.progress-collection-card .progress-reward-icon svg,
.progress-collection-card .progress-reward-icon img{
  display:block;
  margin:auto;
}
.progress-collection-card .avatar-mini,
.progress-locker-item .avatar-mini{display:flex;align-items:center;justify-content:center}

/* Background effects: per-table atmosphere families. */
#blossomLayer.theme-effects{opacity:0;transition:opacity .55s ease}
body.effects-on #blossomLayer.theme-effects,
body.blossom-on #blossomLayer.theme-effects{opacity:1}
.effect-accent{position:absolute;pointer-events:none;opacity:.44}
.effect-accent svg{width:100%;height:auto;display:block;image-rendering:pixelated}
#blossomLayer.effects-pink .effect-accent{top:0;left:0;width:clamp(260px,46vw,560px)}
#blossomLayer.effects-green .effect-accent,
#blossomLayer.effects-red .effect-accent,
#blossomLayer.effects-purple .effect-accent,
#blossomLayer.effects-blue .effect-accent,
#blossomLayer.effects-charcoal .effect-accent,
#blossomLayer.effects-cream .effect-accent{top:0;right:0;width:clamp(220px,34vw,460px);height:clamp(160px,24vw,320px)}
.effect-accent.accent-olive{
  background:
    radial-gradient(circle at 80% 16%, rgba(196,220,155,.42) 0 8px, transparent 9px),
    radial-gradient(circle at 74% 24%, rgba(130,154,92,.55) 0 8px, transparent 9px),
    radial-gradient(circle at 88% 30%, rgba(168,194,122,.45) 0 7px, transparent 8px),
    radial-gradient(ellipse at 84% 22%, rgba(255,255,255,.1), transparent 48%),
    linear-gradient(135deg, transparent 26%, rgba(90,72,42,.45) 26% 28%, transparent 28%),
    radial-gradient(ellipse at 78% 20%, rgba(86,114,64,.72) 0 14%, transparent 15%),
    radial-gradient(ellipse at 69% 28%, rgba(104,135,78,.68) 0 12%, transparent 13%),
    radial-gradient(ellipse at 92% 33%, rgba(91,120,67,.7) 0 12%, transparent 13%);
}
.effect-accent.accent-glint{
  background:
    radial-gradient(circle at 78% 26%, rgba(195,233,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 14%, rgba(232,247,255,.8) 0 3px, transparent 4px),
    radial-gradient(circle at 66% 24%, rgba(168,214,255,.7) 0 2px, transparent 3px),
    radial-gradient(ellipse at 84% 18%, rgba(180,220,255,.22), transparent 50%),
    linear-gradient(160deg, transparent 0 53%, rgba(156,205,255,.14) 54%, transparent 56%);
}
.effect-accent.accent-smoke{
  background:
    radial-gradient(ellipse at 85% 16%, rgba(255,255,255,.08), transparent 50%),
    radial-gradient(ellipse at 90% 18%, rgba(214,208,200,.13), transparent 36%),
    radial-gradient(ellipse at 74% 28%, rgba(201,196,188,.11), transparent 32%),
    radial-gradient(ellipse at 92% 36%, rgba(175,170,164,.09), transparent 34%);
  filter:blur(1px);
}
.effect-accent.accent-paper{
  background:
    linear-gradient(90deg, transparent 72%, rgba(241,227,193,.25) 72% 73%, transparent 73%),
    linear-gradient(180deg, transparent 18%, rgba(236,216,171,.24) 18% 19%, transparent 19%),
    radial-gradient(circle at 82% 18%, rgba(255,247,230,.46) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 30%, rgba(233,210,158,.38) 0 2px, transparent 3px),
    radial-gradient(ellipse at 84% 21%, rgba(255,247,230,.1), transparent 44%);
}
.effect-accent.accent-ember{
  background:
    radial-gradient(circle at 86% 20%, rgba(255,195,124,.65) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 30%, rgba(255,146,80,.62) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 36%, rgba(255,214,167,.6) 0 3px, transparent 4px),
    radial-gradient(ellipse at 85% 20%, rgba(255,118,66,.14), transparent 45%);
}
.effect-accent.accent-arcade{
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 30%, rgba(201,171,255,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 94% 32%, rgba(176,144,255,.75) 0 3px, transparent 4px),
    linear-gradient(135deg, transparent 42%, rgba(161,130,255,.26) 42% 43%, transparent 43%),
    radial-gradient(ellipse at 84% 18%, rgba(173,145,255,.12), transparent 48%);
}
.petal{border-radius:50%; transform:scale(var(--scale,1));}
.fx-leaf{width:10px;height:6px;border-radius:70% 30% 70% 30%/55% 45% 55% 45%; animation-name:leafDrift}
.fx-glint{width:4px;height:4px;background:transparent!important; box-shadow:0 0 0 1px var(--petal-color),0 0 8px rgba(210,235,255,.32); transform:rotate(45deg) scale(var(--scale,1)); animation-name:glintDrift}
.fx-dust{width:5px;height:5px;border-radius:50%; filter:blur(.4px); animation-name:dustFloat}
.fx-fleck{width:8px;height:6px;border-radius:2px; animation-name:paperDrift}
.fx-ember{width:6px;height:6px;border-radius:50% 50% 60% 60%; box-shadow:0 0 10px rgba(255,153,84,.24); animation-name:emberDrift}
.fx-star{width:4px;height:4px;background:transparent!important; box-shadow:0 0 0 1px var(--petal-color), 0 0 10px rgba(192,170,255,.28); transform:rotate(45deg) scale(var(--scale,1)); animation-name:glintDrift}
@keyframes leafDrift{0%{transform:translate3d(0,-18px,0) rotate(-10deg) scale(var(--scale,1));opacity:0}10%{opacity:.65}90%{opacity:.48}100%{transform:translate3d(var(--drift,40px),105vh,0) rotate(160deg) scale(var(--scale,1));opacity:0}}
@keyframes glintDrift{0%{transform:translate3d(0,-10px,0) rotate(45deg) scale(.6);opacity:0}10%{opacity:.7}50%{opacity:.35}100%{transform:translate3d(var(--drift,20px),105vh,0) rotate(135deg) scale(1);opacity:0}}
@keyframes dustFloat{0%{transform:translate3d(0,100vh,0) scale(.8);opacity:0}8%{opacity:.34}100%{transform:translate3d(var(--drift,10px),calc(100vh - var(--rise,50px) - 100vh),0) scale(1.12);opacity:0}}
@keyframes paperDrift{0%{transform:translate3d(0,-10px,0) rotate(0deg) scale(.8);opacity:0}8%{opacity:.48}100%{transform:translate3d(var(--drift,22px),105vh,0) rotate(180deg) scale(1.05);opacity:0}}
@keyframes emberDrift{0%{transform:translate3d(0,102vh,0) scale(.7);opacity:0}8%{opacity:.75}100%{transform:translate3d(var(--drift,18px),calc(100vh - var(--rise,70px) - 100vh),0) scale(1);opacity:0}}

/* Make the chat/log icon button read correctly on desktop while leaving mobile alone. */
.hud-chat .hud-icon-img{object-fit:contain}


/* src/styles.css part 09 — v18–v39 layers: visual correction, reactions, activity, social, icons.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   v18 visual correction pass
   ===================================================================== */

/* ---------- Home composition: large hero cards, but below the wordmark ---------- */
.title-card-fan{
  left:-4.2vw!important;
  top:22vh!important;
  width:min(46vw,650px)!important;
  height:min(46vw,650px)!important;
  transform:none!important;
  filter:drop-shadow(0 30px 26px rgba(0,0,0,.34))!important;
}
.title-card-fan::before{
  inset:14% 10% 16% 0!important;
  background:radial-gradient(circle at 34% 38%,rgba(240,196,25,.12),rgba(240,196,25,.035) 46%,transparent 72%)!important;
  filter:blur(10px)!important;
}
.title-card-a{left:3%!important;top:19%!important;transform:rotate(-17deg) scale(1.02)!important}
.title-card-b{left:27%!important;top:4%!important;transform:rotate(-1deg) scale(1.06)!important}
.title-card-c{left:53%!important;top:21%!important;transform:rotate(17deg) scale(1.01)!important}
@media(max-width:900px){
  .title-card-fan{left:50%!important;top:24vh!important;width:74vw!important;height:74vw!important;transform:translateX(-50%)!important}
}

/* ---------- Locker: no sticky fade, no inter-card shading, truly centred art ---------- */
.progress-collection-grid-v12{
  position:static!important;
  z-index:auto!important;
  background:none!important;
  padding:0!important;
  margin:0 0 12px!important;
  isolation:isolate;
}
.progress-collection-card{
  background:rgba(0,0,0,.14)!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:hidden!important;
}
.progress-collection-card.active{
  background:rgba(240,196,25,.08)!important;
  border-color:rgba(240,196,25,.58)!important;
  box-shadow:inset 0 0 0 1px rgba(240,196,25,.05)!important;
}
.progress-collection-card::before,
.progress-collection-card::after{content:none!important;display:none!important}
.progress-collection-preview{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:100%!important;
  min-height:38px!important;
  margin:8px 0 0!important;
  padding:0!important;
}
.progress-collection-preview .progress-reward-icon{
  flex:0 0 36px!important;
  width:36px!important;
  height:36px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.progress-collection-preview .progress-reward-icon svg,
.progress-locker-item .progress-reward-icon svg{
  width:86%!important;
  height:86%!important;
  margin:auto!important;
  display:block!important;
  transform:none!important;
}
.progress-locker-item .progress-reward-icon{
  margin:0 auto 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* ---------- Table atmosphere art ---------- */
.effect-accent{background:none!important;filter:none!important;opacity:1!important;overflow:visible!important}
.effect-accent:not(.accent-branch){top:0!important;right:0!important;left:auto!important;width:min(52vw,760px)!important;height:auto!important;}
.theme-overlay-art{display:block;width:100%;height:auto;image-rendering:pixelated;opacity:.54;pointer-events:none;}
#blossomLayer.effects-green .theme-overlay-art{opacity:.60}
#blossomLayer.effects-blue .theme-overlay-art{opacity:.56}
#blossomLayer.effects-charcoal .theme-overlay-art{opacity:.40}
#blossomLayer.effects-cream .theme-overlay-art{opacity:.52}
#blossomLayer.effects-red .effect-accent{left:0!important;right:auto!important;top:auto!important;bottom:0!important;transform:scaleY(-1)}
#blossomLayer.effects-red .theme-overlay-art{opacity:.55}
#blossomLayer.effects-purple .theme-overlay-art{opacity:.60}
#blossomLayer.effects-pink #blossomBranch{top:0!important;left:0!important;width:clamp(260px,46vw,560px)!important;height:auto!important;opacity:.42!important}
#blossomLayer.effects-pink #blossomBranch svg{width:100%;height:auto}
/* no opaque wash in the effects layer: only art + individual particles */
#blossomLayer.theme-effects{background:transparent!important;box-shadow:none!important;}

/* ---------- Semantic chrome tokens ---------- */
:root{
  --chrome-surface:var(--panel);
  --chrome-raised:var(--panel-light);
  --chrome-raised-2:#373129;
  --chrome-well:rgba(0,0,0,.18);
  --chrome-button:#302a24;
  --chrome-button-hi:#3b352f;
  --chrome-border:rgba(255,255,255,.09);
  --chrome-border-strong:#665845;
  --chrome-muted:rgba(246,236,210,.70);
  --chrome-shadow:rgba(0,0,0,.42);
  --chrome-icon:#171411;
}
body.light{
  --chrome-surface:#ede2cb;
  --chrome-raised:#fff8e9;
  --chrome-raised-2:#f5ead5;
  --chrome-well:rgba(96,75,40,.07);
  --chrome-button:#e9ddc5;
  --chrome-button-hi:#fbf3e2;
  --chrome-border:rgba(72,57,33,.20);
  --chrome-border-strong:#b7a47b;
  --chrome-muted:rgba(55,48,31,.68);
  --chrome-shadow:rgba(78,59,30,.18);
  --chrome-icon:#e0d0ae;
  --ui-secondary:#e9ddc5;
  --ui-secondary-hi:#fff8e9;
  --ui-secondary-edge:#b7a47b;
  --ui-utility:#eee3cd;
  --ui-cream:#37301f;
}

/* Core surfaces inherit the semantic chrome system. */
body.light .cabinet,
body.light .side-panel,
body.light .statusbar,
body.light .pchip,
body.light .play-hub-panel,
body.light .settings-v12,
body.light .profile-modal,
body.light .operator-modal,
body.light .cosmetic-preview-shell,
body.light .progress-stage-v12{
  color:var(--cream)!important;
  background:linear-gradient(180deg,var(--chrome-raised),var(--chrome-surface))!important;
  border-color:var(--panel-edge)!important;
  box-shadow:0 0 0 3px var(--panel-edge),inset 0 1px 0 rgba(255,255,255,.68),0 12px 30px var(--chrome-shadow)!important;
}
body.light .settings-v12-head,
body.light .side-tabs{border-color:var(--chrome-border)!important}
body.light .settings-tabs-v12{background:rgba(93,70,37,.055)!important}
body.light .settings-tabs-v12 button,
body.light .seg button,
body.light .icon-btn,
body.light .settings-profile-v12,
body.light .settings-diagnostic-button,
body.light .progress-tabs-v12 button,
body.light .progress-done-v12,
body.light .progress-back-v12,
body.light .cosmetic-preview-close,
body.light .cosmetic-preview-rail-item,
body.light .play-mode-card,
body.light .title-menu-button:not(.title-menu-primary),
body.light .title-profile-open,
body.light .title-profile-edit{
  color:var(--cream)!important;
  background:linear-gradient(180deg,var(--chrome-button-hi),var(--chrome-button))!important;
  border-color:var(--chrome-border-strong)!important;
  box-shadow:0 3px 0 rgba(93,70,37,.18),inset 0 1px 0 rgba(255,255,255,.72)!important;
  text-shadow:none!important;
}
body.light .btn-secondary,
body.light .btn-utility,
body.light .btn-ghost{
  color:var(--cream)!important;
  background:linear-gradient(180deg,var(--chrome-button-hi),var(--chrome-button))!important;
  border:2px solid var(--chrome-border-strong)!important;
  box-shadow:0 3px 0 rgba(93,70,37,.16),inset 0 1px 0 rgba(255,255,255,.68)!important;
}
body.light .settings-group-v12,
body.light .operator-section,
body.light .progress-next-v12,
body.light .progress-path-frame-v12,
body.light .progress-profile-v12,
body.light .progress-collection-card,
body.light .progress-locker-item,
body.light .profile-stat,
body.light .profile-account,
body.light .account-google-btn{
  color:var(--cream)!important;
  background:var(--chrome-well)!important;
  border-color:var(--chrome-border)!important;
  box-shadow:none!important;
}
body.light .progress-collection-card.active,
body.light .settings-tabs-v12 button.active,
body.light .progress-tabs-v12 button.active,
body.light .seg button.active{
  color:#6f5205!important;
  background:rgba(214,164,30,.13)!important;
  border-color:rgba(160,115,12,.46)!important;
}
body.light .text-input,
body.light .chat-compose input{
  color:var(--cream)!important;
  background:#fffaf0!important;
  border-color:var(--chrome-border-strong)!important;
}
body.light .play-mode-card small,
body.light .settings-diagnostic-button small,
body.light .locker-top-v12 p,
body.light .profile-account-state p,
body.light .account-google-copy small,
body.light .title-profile-level,
body.light .progress-node-state,
body.light .chat-msg .chat-text,
body.light .log-entry{
  color:var(--chrome-muted)!important;
}
body.light .title-profile-plaque,
body.light .title-avatar-popover{
  background:rgba(255,248,233,.96)!important;
  color:var(--cream)!important;
  border-color:var(--panel-edge)!important;
  box-shadow:0 5px 0 rgba(93,70,37,.18),inset 0 1px rgba(255,255,255,.7)!important;
}
body.light .title-profile-avatar,
body.light .progress-avatar-v12,
body.light .progress-reward-icon,
body.light .cosmetic-character-avatar{
  background:var(--chrome-icon)!important;
  border-color:rgba(139,103,19,.36)!important;
}
body.light .title-profile-xp,
body.light .progress-xp-track-v12,
body.light .profile-xp-track{background:rgba(77,59,31,.18)!important}
body.light .modal-backdrop,
body.light .play-hub-overlay{background:rgba(69,52,28,.32)!important;backdrop-filter:blur(4px)}
/* gameplay functional colours remain functional; only dark chrome is normalised */
body.light .btn-primary,
body.light .title-menu-primary{color:#1b1611!important}
body.light .btn-danger{color:#fff8ef!important}


/* Light-mode normalization for secondary game surfaces. These all route
   through the same semantic chrome tokens so future additions inherit the
   palette by using the existing surface/button classes instead of new hexes. */
body.light .progress-node,
body.light .round-hand-group,
body.light .opt-row,
body.light .gameover-progress,
body.light .reaction-picker,
body.light .reaction-option,
body.light .table-chat-bubble,
body.light .chat-toast,
body.light .game-chat-preview,
body.light .account-google-btn{
  color:var(--cream)!important;
  background:linear-gradient(180deg,var(--chrome-raised),var(--chrome-surface))!important;
  border-color:var(--chrome-border-strong)!important;
  box-shadow:0 3px 0 rgba(93,70,37,.14),inset 0 1px 0 rgba(255,255,255,.62)!important;
}
body.light .progress-node-state,
body.light .progress-more-rewards{
  color:var(--chrome-muted)!important;
  background:rgba(87,66,34,.08)!important;
  border-color:var(--chrome-border)!important;
}
body.light .progress-node.current{
  border-color:rgba(159,116,14,.7)!important;
  background:linear-gradient(180deg,#fff8e9,#ead9b8)!important;
}
body.light .progress-node.current .progress-node-state{
  color:#4a3708!important;
  background:#e8b939!important;
}
body.light .hand-react-btn,
body.light .action-bar .btn-react{
  color:#6b5008!important;
  background:linear-gradient(180deg,#fff2c5,#e5c879)!important;
  border-color:#b59232!important;
  box-shadow:0 4px 0 rgba(91,66,15,.20),inset 0 1px 0 rgba(255,255,255,.8)!important;
}
body.light .reaction-picker-head,
body.light .reaction-pop-text,
body.light .progress-node-level,
body.light .profile-account-head span{color:#8b6607!important}
body.light .progress-reward-icon{
  box-shadow:0 3px 0 rgba(93,70,37,.15)!important;
}

body.light .title-profile-copy small,
body.light .profile-edit-field>span,
body.light .profile-account-head span,
body.light .profile-activity-label,
body.light .settings-v12-head span,
body.light .settings-group-v12 h3,
body.light .progress-title-v12 span,
body.light .progress-next-label,
body.light .progress-node-level,
body.light .progress-collection-card strong,
body.light .home-quick .home-tile-copy strong,
body.light .home-star,
body.light .home-progress-side b,
body.light .home-progress-chevron,
body.light .profile-game-title,
body.light .social-tab small{
  color:var(--gold-ink)!important;
}
body.light .settings-tabs-v12 button.active,
body.light .progress-tabs-v12 button.active,
body.light .seg button.active,
body.light .progress-locker-tabs button.active,
body.light .progress-collection-card.active,
body.light .progress-locker-item.equipped .progress-locker-state{
  color:var(--gold-ink)!important;
}
body.light .side-tab{color:var(--chrome-muted)!important}
body.light .side-tab.active{color:#7b5907!important;background:rgba(210,160,27,.10)!important;border-bottom-color:#a77a0d!important}
body.light .chat-compose{border-color:var(--chrome-border)!important;background:rgba(92,70,37,.035)!important}
body.light .title-utility-row button{
  color:var(--cream)!important;
  background:rgba(255,248,233,.88)!important;
  border-color:var(--chrome-border)!important;
}

/* -------------------------- v19 polish pass -------------------------- */
/* Revert the title-screen hero cards to the cleaner v14 composition.
   The fan sits lower-left and the KOUNGA wordmark remains fully readable. */
.title-card-fan{
  position:absolute!important;
  z-index:2!important;
  left:9vw!important;
  top:31vh!important;
  width:min(42vw,590px)!important;
  height:min(42vw,590px)!important;
  pointer-events:none!important;
  filter:drop-shadow(0 28px 28px rgba(0,0,0,.36))!important;
  transform:none!important;
}
.title-card-fan::before{content:none!important;display:none!important}
.title-card{width:42%!important;border-radius:clamp(12px,1.4vw,22px)!important}
.title-card-a{left:5%!important;top:17%!important;transform:rotate(-17deg)!important}
.title-card-b{left:28%!important;top:3%!important;transform:rotate(2deg)!important}
.title-card-c{left:51%!important;top:21%!important;transform:rotate(19deg)!important}
@media(max-width:760px){
  .title-card-fan{left:50%!important;top:25vh!important;transform:translateX(-50%)!important;width:76vw!important;height:76vw!important}
}
@media(min-width:761px) and (max-width:1199px){
  .title-card-fan{left:11vw!important;top:26vh!important;width:min(42vw,590px)!important;height:min(42vw,590px)!important}
}

/* Remove the sticky locker wash entirely: the category cards should sit on one
   clean surface with no dark bands or faux shading between them. */
.progress-collection-grid-v12{
  position:static!important;
  background:transparent!important;
  box-shadow:none!important;
  padding-bottom:0!important;
}
.progress-collection-grid-v12::before,
.progress-collection-grid-v12::after,
.progress-collection-card::before,
.progress-collection-card::after{content:none!important;display:none!important}

/* Reaction atlases are full 24-frame sheets again. Use the whole strip for the
   picker previews and the in-table bubble animation. */
.reaction-option-mini{
  background-size:2400% 600%!important;
  animation:reactionSpritePlayV19 2.1s steps(23,end) infinite!important;
}
.reaction-sprite{
  background-size:2400% 600%!important;
  animation:reactionSpritePlayV19 2.1s steps(23,end) 1 forwards!important;
}
@keyframes reactionSpritePlayV19{from{background-position-x:0%}to{background-position-x:100%}}

/* Slightly richer presence for the two weaker atmosphere families. */
#blossomLayer.effects-charcoal .theme-overlay-art{opacity:.54!important}
#blossomLayer.effects-cream .theme-overlay-art{opacity:.62!important}

/* -------------------------- v20 targeted pass -------------------------- */
/* Hero cards: a touch bigger and with a livelier north-east sweep. */
.title-card-fan{
  left:7.6vw!important;
  top:28.5vh!important;
  width:min(46vw,640px)!important;
  height:min(46vw,640px)!important;
  transform:none!important;
  filter:drop-shadow(0 30px 28px rgba(0,0,0,.34))!important;
}
.title-card-a{left:2%!important;top:24%!important;transform:rotate(-24deg) scale(1.05)!important}
.title-card-b{left:30%!important;top:6%!important;transform:rotate(-6deg) scale(1.09)!important}
.title-card-c{left:57%!important;top:16%!important;transform:rotate(14deg) scale(1.04)!important}
@media(max-width:900px){
  .title-card-fan{left:50%!important;top:24vh!important;width:76vw!important;height:76vw!important;transform:translateX(-50%)!important}
  .title-card-a{left:4%!important;top:22%!important;transform:rotate(-22deg) scale(1.03)!important}
  .title-card-b{left:31%!important;top:6%!important;transform:rotate(-4deg) scale(1.08)!important}
  .title-card-c{left:56%!important;top:19%!important;transform:rotate(13deg) scale(1.02)!important}
}

/* Atmosphere art: soften/fade the edges and give each family a local glow so
   the art sits inside the table mood instead of reading like a pasted sticker. */
.effect-accent:not(.accent-branch){
  width:min(54vw,780px)!important;
  top:-1.4vw!important;
  right:-1.8vw!important;
  overflow:visible!important;
  filter:saturate(.94) brightness(.97)!important;
}
.theme-overlay-art{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:saturate(.92) brightness(.98);
  opacity:.46;
  -webkit-mask-image:radial-gradient(circle at 88% 18%, rgba(0,0,0,1) 0 26%, rgba(0,0,0,.95) 42%, rgba(0,0,0,.72) 56%, rgba(0,0,0,.28) 72%, transparent 86%);
          mask-image:radial-gradient(circle at 88% 18%, rgba(0,0,0,1) 0 26%, rgba(0,0,0,.95) 42%, rgba(0,0,0,.72) 56%, rgba(0,0,0,.28) 72%, transparent 86%);
}
#blossomLayer.effects-pink #blossomBranch{opacity:.46!important;filter:saturate(1.02) brightness(.98)!important}
#blossomLayer.effects-blue .effect-accent{background:radial-gradient(circle at 86% 16%, rgba(170,214,255,.14), transparent 56%)!important}
#blossomLayer.effects-blue .theme-overlay-art{opacity:.42!important;mix-blend-mode:screen!important}
#blossomLayer.effects-charcoal .effect-accent{background:radial-gradient(circle at 84% 20%, rgba(232,228,220,.08), transparent 58%)!important}
#blossomLayer.effects-charcoal .theme-overlay-art{opacity:.30!important;mix-blend-mode:soft-light!important;filter:blur(.2px) saturate(.74) brightness(.95)!important}
#blossomLayer.effects-cream .effect-accent{background:radial-gradient(circle at 84% 18%, rgba(255,241,214,.16), transparent 60%)!important}
#blossomLayer.effects-cream .theme-overlay-art{opacity:.40!important;mix-blend-mode:overlay!important;filter:saturate(.9) brightness(.99)!important}
#blossomLayer.effects-red .effect-accent{background:radial-gradient(circle at 16% 84%, rgba(255,157,111,.16), transparent 56%)!important}
#blossomLayer.effects-red .theme-overlay-art{opacity:.40!important;mix-blend-mode:screen!important;filter:saturate(.96) brightness(.96)!important}
#blossomLayer.effects-purple .effect-accent{background:radial-gradient(circle at 84% 18%, rgba(184,154,255,.16), transparent 58%)!important}
#blossomLayer.effects-purple .theme-overlay-art{opacity:.42!important;mix-blend-mode:screen!important;filter:saturate(.96) brightness(.98)!important}

/* -------------------------- v21 follow-up pass -------------------------- */
/* Hero cards: rotate clockwise so the fan reads north-east rather than north-west. */
.title-card-a{transform:rotate(-12deg) scale(1.06)!important;left:4%!important;top:26%!important}
.title-card-b{transform:rotate(5deg) scale(1.10)!important;left:30%!important;top:7%!important}
.title-card-c{transform:rotate(22deg) scale(1.05)!important;left:56%!important;top:12%!important}
@media(max-width:900px){
  .title-card-a{transform:rotate(-10deg) scale(1.04)!important;left:6%!important;top:24%!important}
  .title-card-b{transform:rotate(6deg) scale(1.08)!important;left:31%!important;top:7%!important}
  .title-card-c{transform:rotate(20deg) scale(1.03)!important;left:55%!important;top:15%!important}
}

/* Red atmosphere: move it into the top corner, make it clearer, and remove the abrupt dark band. */
#blossomLayer.effects-red .effect-accent{
  left:auto!important;
  right:-1.4vw!important;
  top:-1.2vw!important;
  bottom:auto!important;
  transform:none!important;
  width:min(56vw,800px)!important;
  height:auto!important;
  overflow:visible!important;
  background:radial-gradient(circle at 88% 14%, rgba(255,155,90,.22), rgba(255,124,72,.11) 22%, rgba(255,84,52,.03) 42%, transparent 67%)!important;
}
#blossomLayer.effects-red .theme-overlay-art{
  opacity:.66!important;
  mix-blend-mode:screen!important;
  filter:saturate(1.08) brightness(1.03)!important;
  -webkit-mask-image:radial-gradient(circle at 88% 14%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,.93) 48%, rgba(0,0,0,.62) 64%, rgba(0,0,0,.22) 79%, transparent 90%)!important;
          mask-image:radial-gradient(circle at 88% 14%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,.93) 48%, rgba(0,0,0,.62) 64%, rgba(0,0,0,.22) 79%, transparent 90%)!important;
}

/* -------------------------- v22 corrective pass -------------------------- */
/* Revert to the v20 card grouping/positions, then rotate the whole fan a bit clockwise. */
.title-card-a{left:2%!important;top:24%!important;transform:rotate(-14deg) scale(1.05)!important}
.title-card-b{left:30%!important;top:6%!important;transform:rotate(4deg) scale(1.09)!important}
.title-card-c{left:57%!important;top:16%!important;transform:rotate(24deg) scale(1.04)!important}
@media(max-width:900px){
  .title-card-a{left:4%!important;top:22%!important;transform:rotate(-12deg) scale(1.03)!important}
  .title-card-b{left:31%!important;top:6%!important;transform:rotate(6deg) scale(1.08)!important}
  .title-card-c{left:56%!important;top:19%!important;transform:rotate(23deg) scale(1.02)!important}
}

/* Red table atmosphere: visible ember family in the top corner, with built-in
   transparency rather than a harsh mask so it reads as part of the felt. */
#blossomLayer.effects-red .effect-accent{
  left:auto!important;
  right:-1.2vw!important;
  top:-0.6vw!important;
  bottom:auto!important;
  transform:none!important;
  width:min(58vw,820px)!important;
  height:auto!important;
  background:radial-gradient(circle at 88% 16%, rgba(255,170,92,.12), rgba(255,112,58,.08) 22%, rgba(255,86,48,.03) 38%, transparent 62%)!important;
}
#blossomLayer.effects-red .theme-overlay-art{
  opacity:.82!important;
  mix-blend-mode:screen!important;
  filter:saturate(1.04) brightness(1.02)!important;
  -webkit-mask-image:none!important;
          mask-image:none!important;
}

/* -------------------------- v23 hero flair + sprite pass -------------------------- */
/* Put the home-page three-card flair back into a coherent fan and rotate the
   whole grouping further clockwise so it reads as one dramatic north-east sweep. */
.title-card-fan{
  left:7.2vw!important;
  top:27.2vh!important;
  width:min(48vw,660px)!important;
  height:min(48vw,660px)!important;
  transform:none!important;
  filter:drop-shadow(0 32px 28px rgba(0,0,0,.34))!important;
}
.title-card-a{left:4%!important;top:12%!important;transform:rotate(-12deg) scale(1.07)!important}
.title-card-b{left:29%!important;top:15%!important;transform:rotate(7deg) scale(1.10)!important}
.title-card-c{left:53%!important;top:22%!important;transform:rotate(26deg) scale(1.05)!important}
@media(max-width:900px){
  .title-card-fan{left:50%!important;top:22vh!important;width:78vw!important;height:78vw!important;transform:translateX(-50%)!important}
  .title-card-a{left:5%!important;top:14%!important;transform:rotate(-10deg) scale(1.05)!important}
  .title-card-b{left:30%!important;top:17%!important;transform:rotate(8deg) scale(1.08)!important}
  .title-card-c{left:54%!important;top:23%!important;transform:rotate(24deg) scale(1.03)!important}
}

/* =====================================================================
   v24 REACTION ASSETS
   Each reaction now plays its authored 10-frame 5x2 PNG sheet directly.
   No procedural character movement, atlas row synthesis, or forced pixel
   scaling is applied to the reaction artwork.
   ===================================================================== */
.reaction-option-mini,
.reaction-sprite,
.cosmetic-reaction-sample{
  background-repeat:no-repeat!important;
  background-size:500% 200%!important;
  image-rendering:auto!important;
  will-change:background-position;
}
.reaction-row-laugh{--reaction-duration:1.18s}
.reaction-row-wow{--reaction-duration:1.16s}
.reaction-row-gg{--reaction-duration:1.24s}
.reaction-row-clap{--reaction-duration:1.12s}
.reaction-row-nooo{--reaction-duration:1.30s}
.reaction-row-hmm{--reaction-duration:1.28s}
.reaction-option-mini,
.cosmetic-reaction-sample{
  animation:reactionSpritePlayV24 var(--reaction-duration,1.2s) linear infinite!important;
}
.reaction-sprite{
  animation:reactionSpritePlayV24 var(--reaction-duration,1.2s) linear 1 forwards!important;
}
@keyframes reactionSpritePlayV24{
  0%,9.99%{background-position:0% 0%}
  10%,19.99%{background-position:25% 0%}
  20%,29.99%{background-position:50% 0%}
  30%,39.99%{background-position:75% 0%}
  40%,49.99%{background-position:100% 0%}
  50%,59.99%{background-position:0% 100%}
  60%,69.99%{background-position:25% 100%}
  70%,79.99%{background-position:50% 100%}
  80%,89.99%{background-position:75% 100%}
  90%,100%{background-position:100% 100%}
}
.reaction-pop{
  animation:reactionBubbleLifeV24 2.8s cubic-bezier(.2,.7,.2,1) forwards!important;
}
@keyframes reactionBubbleLifeV24{
  0%{opacity:0;transform:translateY(5px) scale(.9)}
  8%{opacity:1;transform:translateY(0) scale(1)}
  82%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-10px) scale(.98)}
}

/* =====================================================================
   v25 PLATFORM FOUNDATION: private recent activity inside My Profile.
   Keeps social context secondary to play while giving the profile a useful
   platform role beyond stats and cosmetics.
   ===================================================================== */
.profile-modal{max-height:min(92dvh,900px);overflow:auto;overscroll-behavior:contain;}
.profile-activity{
  margin-top:10px;
  padding:13px;
  border:3px solid rgba(240,196,25,.16);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(27,24,21,.74),rgba(17,15,13,.74));
  text-align:left;
}
.profile-activity-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.profile-activity-head strong{font-family:var(--ui-display);font-size:20px;color:var(--cream);font-weight:800;}
.profile-activity-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;}
.profile-social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.profile-activity-column{min-width:0;}
.profile-activity-label{display:block;margin:0 0 7px;color:var(--gold);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.profile-social-actions{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px;}
.profile-social-actions .btn{min-height:38px;padding:9px 12px;font-size:14px;}
.profile-social-actions .btn[disabled]{opacity:.58;filter:saturate(.74);cursor:not-allowed;}
.profile-social-list{display:grid;gap:7px;}
.profile-social-card{
  min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:center;
  padding:8px;border:2px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.035);
}
.profile-social-card.is-clickable{cursor:pointer;}
.profile-social-card.is-clickable:hover{border-color:rgba(240,196,25,.34);background:rgba(240,196,25,.06);}
.profile-social-card.is-clickable:active{transform:translateY(1px);}
.profile-social-avatar{position:relative;width:34px;height:34px;display:block;}
.profile-social-avatar svg{width:100%;height:100%;display:block;image-rendering:pixelated;}
.profile-social-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:999px;border:2px solid rgba(12,10,8,.95);background:#7a7367;box-shadow:0 0 0 1px rgba(255,255,255,.08);}
.profile-social-dot.is-online{background:#6fd987;}
.profile-social-dot.is-room{background:#f0c419;}
.profile-social-main{min-width:0;display:flex;flex-direction:column;gap:4px;}
.profile-social-headline{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.profile-social-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream);font:700 14px/1 var(--ui-font);}
.profile-social-meta{color:rgba(246,236,210,.64);font-size:11px;line-height:1.2;}
.profile-social-row{display:flex;flex-wrap:wrap;gap:6px;}
.profile-social-mini{appearance:none;border:none;border-radius:8px;background:#332a22;color:var(--cream);padding:6px 8px;font:700 12px/1 var(--ui-font);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.28);}
.profile-social-mini:hover{filter:brightness(1.06);}
.profile-social-mini.alt{background:#1f1b18;color:rgba(246,236,210,.92);}
.profile-social-mini.ghost{background:rgba(255,255,255,.06);color:rgba(246,236,210,.82);}
.profile-social-mini[disabled]{opacity:.58;cursor:not-allowed;filter:saturate(.75);}
.profile-recent-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.profile-recent-player{
  min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:7px;
  padding:6px 8px;border:2px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.035);
  color:var(--cream);font:700 14px/1 var(--ui-font);text-align:left;cursor:pointer;
}
.profile-recent-player:hover{border-color:rgba(240,196,25,.34);background:rgba(240,196,25,.06);}
.profile-recent-player:active{transform:translateY(1px);}
.profile-recent-player>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-recent-avatar{width:32px;height:32px;display:block;}
.profile-recent-avatar svg{width:100%;height:100%;display:block;image-rendering:pixelated;}
.profile-recent-matches{display:grid;gap:6px;}
.profile-recent-match{
  display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:8px;
  padding:7px 9px;border:2px solid rgba(255,255,255,.065);border-radius:10px;background:rgba(255,255,255,.03);
}
.profile-match-result{font-family:var(--ui-display);font-size:14px;color:#d78a7d;}
.profile-recent-match.is-win .profile-match-result{color:#78d58b;}
.profile-recent-match>span{min-width:0;display:block;}
.profile-recent-match b{display:block;color:var(--cream);font-size:14px;line-height:1.05;}
.profile-recent-match small{display:block;margin-top:2px;color:rgba(246,236,210,.62);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-activity-empty{padding:9px;border:2px dashed rgba(255,255,255,.07);border-radius:9px;color:rgba(246,236,210,.5);font-size:12px;line-height:1.3;}
@media (min-width:760px){
  .profile-modal{grid-template-areas:
      'avatar name'
      'avatar status'
      'identity identity'
      'socialActions socialActions'
      'account account'
      'title title'
      'stats stats'
      'friends friends'
      'activity activity'
      'progress progress'
      'hint hint'
      'done done';}
  #profileSocialActions{grid-area:socialActions;}
  #profileFriendsSection{grid-area:friends;}
  #profileActivity{grid-area:activity;}
}
@media (max-width:620px){
  .profile-activity{padding:10px;}
  .profile-activity-grid,.profile-social-grid{grid-template-columns:1fr;}
  .profile-recent-players{grid-template-columns:repeat(2,minmax(0,1fr));}
  .profile-activity-head strong{font-size:18px;}
}
@media (max-width:380px){
  .profile-recent-players{grid-template-columns:1fr;}
}
body.light .profile-activity{background:rgba(255,255,255,.48);border-color:rgba(94,65,24,.18);}
body.light .profile-recent-player,body.light .profile-recent-match,body.light .profile-social-card{background:rgba(255,255,255,.42);border-color:rgba(62,42,21,.1);}
body.light .profile-recent-player>span:last-child,body.light .profile-recent-match b{color:var(--ink,#2b241c);}
body.light .profile-social-name{color:var(--ink,#2b241c);}
body.light .profile-social-meta,body.light .profile-recent-match small,body.light .profile-activity-empty{color:rgba(43,36,28,.6);}
body.light .profile-social-mini.alt{background:rgba(74,57,37,.1);color:var(--ink,#2b241c);}
body.light .profile-social-mini.ghost{background:rgba(74,57,37,.08);color:rgba(43,36,28,.84);}

/* ---------- v27 social shell + username claim ---------- */
.profile-username-row{display:flex;gap:10px;align-items:center}
.profile-username-row .text-input{flex:1}
.profile-username-claim{white-space:nowrap}
.profile-username-hint{display:block;opacity:.8;margin-top:4px;font-size:.78rem}
.social-modal{width:min(1040px,94vw);max-height:min(90vh,980px);display:flex;flex-direction:column;gap:16px;padding:22px}
.social-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.social-head h2{margin:0}
.social-head p{margin:6px 0 0;opacity:.82;font-size:.92rem}
.social-panel{background:rgba(9,8,7,.58);border:1px solid rgba(255,198,68,.24);border-radius:18px;padding:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.social-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:10px}
.social-panel-head small{opacity:.72}
.social-search-row{display:flex;gap:10px;margin-bottom:10px}
.social-search-row .text-input{flex:1}
.social-grid-main{display:grid;grid-template-columns:1.1fr 1.1fr;gap:14px;min-height:0}
.social-friends-panel{grid-column:span 2}
.social-foot{display:flex;justify-content:flex-end}
#socialFriendsList,#socialRequestsList,#socialInvitesList,#socialSearchResults,#socialRecentPlayers{display:flex;flex-direction:column;gap:10px;max-height:230px;overflow:auto;padding-right:4px}
#socialFriendsList{max-height:280px}
@media (max-width: 820px){
  .social-modal{padding:18px;width:min(96vw,96vw)}
  .social-grid-main{grid-template-columns:1fr}
  .social-friends-panel{grid-column:span 1}
  .social-search-row,.profile-username-row{flex-direction:column;align-items:stretch}
}

/* ---------- v27 atmosphere art pass ---------- */
#blossomLayer .effect-accent{overflow:visible}
#blossomLayer .theme-overlay-art{image-rendering:pixelated;opacity:.62;filter:none!important;mix-blend-mode:normal!important}
#blossomLayer.effects-green #blossomBranch{top:-2.6rem;right:-1.2rem;width:min(38vw,470px)}
#blossomLayer.effects-green .theme-overlay-art{opacity:.72}
#blossomLayer.effects-blue #blossomBranch{top:-2.8rem;right:-1.4rem;width:min(40vw,500px)}
#blossomLayer.effects-blue .theme-overlay-art{opacity:.72}
#blossomLayer.effects-red #blossomBranch{top:-2.4rem;right:-1.4rem;width:min(36vw,430px)}
#blossomLayer.effects-red .theme-overlay-art{opacity:.66}
#blossomLayer.effects-purple #blossomBranch{top:-2.8rem;right:-1.4rem;width:min(39vw,470px)}
#blossomLayer.effects-purple .theme-overlay-art{opacity:.69}
#blossomLayer.effects-charcoal #blossomBranch{top:-2.4rem;right:-1.4rem;width:min(37vw,450px)}
#blossomLayer.effects-charcoal .theme-overlay-art{opacity:.6}
#blossomLayer.effects-cream #blossomBranch{top:-2.8rem;right:-1.4rem;width:min(40vw,520px)}
#blossomLayer.effects-cream .theme-overlay-art{opacity:.74}

/* ---------- v28 polish: theme art, cream felt, unified social shell ---------- */
body.theme-cream{
  --felt-1:#f3f2ed;
  --felt-2:#e4e1d8;
  --felt-3:#cbc6ba;
  --felt-ink:#473d33;
  --accent:#5f4c37;
  --accent-rgb:95,76,55;
  --accent-soft:rgba(95,76,55,.28);
}

#blossomLayer .theme-overlay-art{image-rendering:pixelated;filter:none!important;mix-blend-mode:normal!important}
#blossomLayer.effects-green #blossomBranch,
#blossomLayer.effects-blue #blossomBranch,
#blossomLayer.effects-red #blossomBranch,
#blossomLayer.effects-purple #blossomBranch,
#blossomLayer.effects-charcoal #blossomBranch,
#blossomLayer.effects-cream #blossomBranch{top:-2.3rem;right:-1.2rem;left:auto!important;height:auto!important;width:clamp(340px,43vw,640px)!important}
#blossomLayer.effects-green .theme-overlay-art{opacity:.56}
#blossomLayer.effects-blue .theme-overlay-art{opacity:.58}
#blossomLayer.effects-red .theme-overlay-art{opacity:.54}
#blossomLayer.effects-purple .theme-overlay-art{opacity:.56}
#blossomLayer.effects-charcoal .theme-overlay-art{opacity:.52}
#blossomLayer.effects-cream .theme-overlay-art{opacity:.6}
#blossomLayer.effects-pink #blossomBranch{top:0!important;left:0!important;right:auto!important;width:clamp(290px,46vw,560px)!important;opacity:.46!important}

.profile-username-row{display:flex;gap:10px;align-items:center}
.profile-username-row .text-input{flex:1}
.profile-username-hint{display:block;opacity:.78;margin-top:5px;font-size:.78rem;line-height:1.35}
input.profile-name-input:disabled{opacity:.78;cursor:not-allowed}

.social-modal-v2{width:min(960px,94vw);max-height:min(90vh,960px);display:flex;flex-direction:column;gap:14px;padding:22px;background:linear-gradient(180deg,rgba(43,36,29,.98),rgba(25,22,19,.98));border-radius:28px}
.social-head-v2 h2{margin:0 0 4px}
.social-head-v2 p{margin:0;opacity:.8;line-height:1.45}
.social-tabbar{display:flex;flex-wrap:wrap;gap:10px}
.social-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:140px;padding:12px 14px;border-radius:16px;border:2px solid rgba(255,198,68,.18);background:linear-gradient(180deg,#3b3228,#28221d);color:var(--cream);font:18px 'VT323',monospace;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.social-tab small{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:rgba(0,0,0,.24);font:16px 'Press Start 2P',monospace;color:#f0c85a}
.social-tab.active{border-color:rgba(255,198,68,.56);background:linear-gradient(180deg,#58462f,#362a1e);box-shadow:0 0 0 1px rgba(255,210,108,.08),0 10px 22px rgba(0,0,0,.24)}
.social-stage{min-height:420px;background:radial-gradient(circle at top right,rgba(245,197,96,.08),transparent 36%),linear-gradient(180deg,rgba(19,17,15,.76),rgba(9,8,8,.62));border:1px solid rgba(255,198,68,.18);border-radius:22px;padding:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.social-view{display:flex;flex-direction:column;gap:14px;height:100%}
.social-panel-head-v2{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,198,68,.12)}
.social-panel-head-v2 small{max-width:420px;text-align:right;opacity:.72;line-height:1.4}
.social-search-row{display:flex;gap:12px}
.social-search-row .text-input{flex:1}
.social-list{display:flex;flex-direction:column;gap:12px;min-height:0;max-height:52vh;overflow:auto;padding-right:4px}
.social-foot{display:flex;justify-content:flex-end}
@media (max-width: 820px){
  .social-modal-v2{padding:16px;width:min(96vw,96vw)}
  .social-tab{min-width:0;flex:1 1 calc(50% - 10px)}
  .social-stage{min-height:360px;padding:14px}
  .social-panel-head-v2{flex-direction:column;align-items:flex-start}
  .social-panel-head-v2 small{text-align:left}
  .social-search-row,.profile-username-row{flex-direction:column;align-items:stretch}
}

/* ---------- v29 settings proportion + light-mode contrast ---------- */
.settings-language-compact .language-options{display:grid!important;grid-template-columns:repeat(2,minmax(120px,190px))!important;justify-content:start!important;gap:8px!important;width:max-content;max-width:100%;}
.settings-language-compact .language-options button{min-width:0!important;}
.settings-appearance-compact .mode-options{display:grid!important;grid-template-columns:repeat(2,minmax(120px,190px))!important;justify-content:start!important;gap:8px!important;width:max-content;max-width:100%;}
.theme-swatch[data-theme="cream"]{background:radial-gradient(circle at 35% 30%,#ffffff,#d9dce0)!important;border-color:#a9adb3!important;}

body.light .settings-tabs-v12 img,
body.light .title-menu-button:not(.title-menu-primary)>img,
body.light .title-profile-open img,
body.light .progress-tabs-v12 img,
body.light .progress-back-v12 img,
body.light .progress-done-v12 img,
body.light .hud-icon-img,
body.light .icon-btn img,
body.light .settings-diagnostic-button img,
body.light .play-mode-card img{
  filter:brightness(.26) saturate(.6) contrast(1.45)!important;
  opacity:.98!important;
}
body.light .title-menu-primary>img{filter:brightness(.22) saturate(.65) contrast(1.45)!important;}
body.light .settings-tabs-v12 button.active img,
body.light .progress-tabs-v12 button.active img{filter:brightness(.34) sepia(.3) saturate(1.1) contrast(1.5)!important;}
body.light .hud-btn,
body.light .hud-menu,
body.light .operator-quick{
  background:linear-gradient(180deg,#fffaf0,#e8dcc4)!important;
  border-color:#9f8963!important;
  box-shadow:0 3px 0 rgba(86,61,28,.18),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
body.light .hud-btn:hover,body.light .hud-menu:hover{background:#fffdf7!important;}
body.light .progress-locker-state{color:#56472f!important;font-weight:800!important;}
body.light .progress-locker-item.equipped .progress-locker-state{color:#6d4f00!important;}
body.light .progress-locker-item .progress-reward-icon.swatch{border:3px solid rgba(70,54,35,.62)!important;box-shadow:0 2px 0 rgba(70,54,35,.16)!important;}
body.light .progress-locker-item{border-color:rgba(75,58,35,.26)!important;}
body.light .progress-locker-name{color:#30281f!important;}
body.light .progress-locker-tabs-v12 button{color:#3e3428!important;background:#eee2ca!important;border-color:#b7a47b!important;}
body.light .progress-locker-tabs-v12 button.active{color:#5c4304!important;background:#f7e7b4!important;border-color:#a77a0d!important;}
body.light .title-logo-v12{color:#d39414!important;-webkit-text-stroke:2px #4a2d16;text-shadow:0 4px 0 #8a3b22,0 8px 0 rgba(72,43,22,.2)!important;}
body:not(.light).theme-cream .title-logo-v12{-webkit-text-stroke:2px rgba(48,32,20,.88);text-shadow:0 4px 0 #a93425,0 8px 0 rgba(0,0,0,.34),0 0 24px rgba(240,196,25,.18)!important;}
@media(max-width:620px){
  .settings-language-compact .language-options,.settings-appearance-compact .mode-options{width:100%;grid-template-columns:1fr 1fr!important;}
}

/* ---------- v29 How to Play: wide, visual, scan-friendly ---------- */
.help-modal-v29{width:min(1120px,94vw)!important;max-height:min(90vh,900px)!important;padding:20px 22px!important;display:flex;flex-direction:column;gap:14px;}
.help-head-v29{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.help-head-v29 .section-title{margin:0;text-align:left;}
.help-flow-v29{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.help-flow-step{position:relative;min-height:150px;padding:14px 14px 13px;border:2px solid rgba(240,196,25,.18);border-radius:16px;background:linear-gradient(180deg,rgba(62,52,41,.76),rgba(28,24,20,.84));display:grid;grid-template-columns:auto 1fr;grid-template-areas:'num visual' 'title title' 'copy copy';gap:7px 10px;align-items:center;}
.help-step-num{grid-area:num;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold);color:#1b1611;font:700 15px/1 var(--ui-display);box-shadow:0 3px 0 rgba(0,0,0,.26);}
.help-step-visual{grid-area:visual;justify-self:end;height:58px;display:flex;align-items:center;gap:5px;}
.help-flow-step>strong{grid-area:title;color:var(--cream);font:700 20px/1 var(--ui-display);}
.help-flow-step>small{grid-area:copy;color:rgba(246,236,210,.72);font-size:14px;line-height:1.35;}
.help-step-visual i{font-style:normal;display:flex;align-items:center;justify-content:center;width:38px;height:52px;border-radius:6px;background:#fffaf0;border:2px solid #1a1714;color:#1a1714;font:700 13px/1 'IBM Plex Mono',monospace;box-shadow:0 3px 0 rgba(0,0,0,.2);}
.help-card-back,.help-discard-pile{background:repeating-linear-gradient(45deg,#845b9f 0 4px,#4d355e 4px 8px)!important;}
.help-discard-pile{transform:rotate(6deg)}
.help-meld-visual i:nth-child(2){margin-left:-12px;transform:translateY(-3px)}
.help-meld-visual i:nth-child(3){margin-left:-12px;transform:translateY(2px)}
.help-grid-v29{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:auto;min-height:0;}
.help-rule-card{padding:12px 13px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(0,0,0,.14);}
.help-rule-card p{margin:0;color:rgba(246,236,210,.84);font-size:14px;line-height:1.42;}
.help-rule-card strong{color:var(--gold-hot)}
.help-score-card{grid-column:span 3;}
.help-done-v29{align-self:flex-end;min-width:150px;}
body.light .help-flow-step,body.light .help-rule-card{background:var(--chrome-well)!important;border-color:var(--chrome-border)!important;}
body.light .help-flow-step>strong,body.light .help-rule-card p{color:var(--cream)!important;}
body.light .help-flow-step>small{color:var(--chrome-muted)!important;}
@media(max-width:820px){
  .help-modal-v29{width:96vw!important;padding:15px!important;}
  .help-flow-v29{grid-template-columns:1fr;}
  .help-flow-step{min-height:0;grid-template-columns:auto 90px 1fr;grid-template-areas:'num visual title' 'num visual copy';}
  .help-step-visual{justify-self:start;}
  .help-grid-v29{grid-template-columns:1fr 1fr;}
  .help-score-card{grid-column:span 2;}
}
@media(max-width:520px){.help-grid-v29{grid-template-columns:1fr}.help-score-card{grid-column:span 1}.help-flow-step{grid-template-columns:auto 80px 1fr}.help-step-visual{transform:scale(.88);transform-origin:left center}}

/* v29 social coherence: one header, one tab bar, one content plane */
.social-head-v2{align-items:center!important;min-height:50px;padding:0 2px 6px;border-bottom:1px solid rgba(240,196,25,.14);}
.social-head-v2 h2{font:700 clamp(30px,3vw,42px)/1 var(--ui-display)!important;letter-spacing:.01em;color:var(--cream)!important;}
.social-head-v2 p{display:none!important;}
.social-tabbar{gap:8px!important;}
.social-tab{font:700 17px/1 var(--ui-display)!important;letter-spacing:0!important;min-height:50px!important;border-radius:11px!important;}
.social-tab small{font:700 11px/1 var(--ui-display)!important;min-width:24px;height:24px;}
/* Long Greek labels (Προσκλήσεις παιχνιδιού) keep their count badge inside the tab on small phones. */
.social-tab small{flex-shrink:0;}
@media(max-width:380px){html[data-lang="el"] .social-tab{padding-inline:10px!important;gap:6px!important;font-size:15px!important;}}
.social-stage{min-height:360px!important;padding:14px!important;border-radius:14px!important;}
.social-view{gap:10px!important;}
.social-view>.social-panel-head{display:none!important;}
.social-list{max-height:55vh!important;}
.social-search-row{margin:0 0 4px!important;}
.social-search-row .text-input{height:48px;font:600 16px/1 var(--ui-display);}
.social-search-row .btn{min-height:48px;font:700 16px/1 var(--ui-display)!important;}
.profile-social-card{border-radius:11px!important;padding:10px!important;background:rgba(255,255,255,.035)!important;}
.profile-social-name{font:700 16px/1 var(--ui-display)!important;}
.profile-social-meta{font:500 13px/1.25 var(--ui-font)!important;}
.profile-social-mini{font:700 13px/1 var(--ui-display)!important;}
body.light .social-modal-v2{background:linear-gradient(180deg,var(--chrome-raised),var(--chrome-surface))!important;color:var(--cream)!important;border-color:var(--panel-edge)!important;}
body.light .social-tab{color:#3a3024!important;background:linear-gradient(180deg,#fff9ed,#e9dec7)!important;border-color:#b7a47b!important;box-shadow:0 3px 0 rgba(93,70,37,.12),inset 0 1px 0 rgba(255,255,255,.82)!important;}
body.light .social-tab.active{color:#654800!important;background:#f8e8b4!important;border-color:#a77a0d!important;}
body.light .social-stage{background:#f3ead7!important;border-color:#b7a47b!important;}
body.light .profile-social-card{background:#fff9ed!important;border-color:rgba(87,66,34,.16)!important;}
body.light .profile-social-name{color:#30281f!important;}
body.light .profile-social-meta{color:#675943!important;}
.social-modal-v2{max-width:960px!important;}
.help-modal-v29{max-width:1120px!important;}
@media(min-width:721px){
  .settings-pane-v12[data-settings-pane="game"]:not(.hidden){display:grid!important;grid-template-columns:minmax(250px,.8fr) minmax(360px,1.2fr);gap:12px!important;align-items:start;}
  .settings-pane-v12[data-settings-pane="game"]>.settings-group-v12{margin:0!important;height:100%;}
  .settings-pane-v12[data-settings-pane="game"]>.settings-group-v12:nth-child(3){grid-column:1/-1;}
  .settings-language-compact .language-options{width:100%!important;grid-template-columns:1fr 1fr!important;}
}
.progress-reward-icon.swatch{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.24),var(--reward-swatch-color,#555))!important;}
body.light .progress-reward-icon.swatch{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.30),var(--reward-swatch-color,#555))!important;}


/* v39 polish: clearer raster icons, stronger alignment, softer light-mode contrast */
.play-mode-card img{width:80px!important;height:80px!important;image-rendering:pixelated!important;}
.settings-tabs-v12 img,.progress-tabs-v12 img,.settings-profile-v12 img,.profile-account-head img{width:38px!important;height:38px!important;image-rendering:pixelated!important;}
.title-menu-button>img{width:42px!important;height:42px!important;image-rendering:pixelated!important;}
.title-profile-open img,.title-utility-row img,.play-hub-close img,.settings-close-v12 img,.progress-back-v12 img,.progress-done-v12 img{image-rendering:pixelated!important;}
.hud-icon-img{width:34px!important;height:34px!important;image-rendering:pixelated!important;}
.pchip{padding:6px 10px 6px 6px!important;max-width:260px;}
.pchip.has-clock{padding-right:52px!important;}
.pchip-name{font-size:calc(18px * var(--gui-scale))!important;}
.pchip-meta{gap:8px!important;}
.pchip-timer{width:38px!important;height:38px!important;right:8px!important;top:50%!important;transform:translateY(-50%)!important;border-width:2px!important;display:block!important;}
.pchip-timer-seconds{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-54%)!important;width:auto!important;height:auto!important;font-size:14px!important;line-height:1!important;text-align:center!important;}
.pchip-timer-strikes{bottom:-8px!important;left:50%!important;transform:translateX(-50%)!important;gap:5px!important;padding:2px 5px!important;background:rgba(24,21,17,.88)!important;}
.pchip-timer-strikes i,.pchip-missed i{width:8px!important;height:8px!important;flex-basis:8px!important;}
.pchip-missed{margin-left:4px!important;gap:5px!important;}
body.light .title-profile-copy label,
body.light .profile-activity-label,
body.light .profile-status,
body.light .home-section-label,
body.light .title-kicker,
body.light .progress-title-v12 span,
body.light .settings-v12 h3,
body.light .settings-group-v12 h3{color:#8c6315!important;}
body.light .play-mode-primary strong,
body.light .settings-tabs-v12 button.active,
body.light .progress-tabs-v12 button.active{color:#6f4b08!important;}
@media (max-width:700px){
  .play-mode-card img{width:58px!important;height:58px!important;}
  .settings-tabs-v12 img,.progress-tabs-v12 img{width:30px!important;height:30px!important;}
  .title-menu-button>img{width:36px!important;height:36px!important;}
  .hud-icon-img{width:28px!important;height:28px!important;}
  .pchip{max-width:none!important;}
}

/* src/styles.css part 10 — v42–v43 layers: icon clarity, locker and artwork scale.
   tools/build.mjs joins src/styles/*.css in filename order; later rules win. */
/* =====================================================================
   v42 icon clarity + locker preview fidelity refinements
   ===================================================================== */
.settings-tabs-v12 img,
.settings-profile-v12 img,
.profile-account-head img,
.title-profile-open img {
  object-fit: contain !important;
  image-rendering: pixelated !important;
}
.settings-tabs-v12 img,
.settings-profile-v12 img,
.profile-account-head img { width: 42px !important; height: 42px !important; }
@media (max-width: 620px){
  .settings-tabs-v12 img,
  .settings-profile-v12 img,
  .profile-account-head img { width: 34px !important; height: 34px !important; }
}

.progress-reward-icon.deck{
  width:78px !important;
  height:88px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.progress-locker-item .progress-reward-icon.deck{
  width:84px !important;
  height:96px !important;
  margin-bottom:4px !important;
}
.reward-ui-icon{
  width:90% !important;
  height:96% !important;
  object-fit:contain !important;
  image-rendering:pixelated !important;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.28));
}

.progress-reward-icon.table-preview{
  width:98px !important;
  height:58px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.progress-locker-item .progress-reward-icon.table-preview{
  width:106px !important;
  height:64px !important;
  margin-bottom:8px !important;
}
.locker-table-preview{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  line-height:0;
  overflow:hidden;
  border-radius:11px;
  border:3px solid rgba(255,255,255,.16);
  box-shadow:0 3px 0 rgba(0,0,0,.26), inset 0 2px rgba(255,255,255,.08);
}
.locker-table-preview.preview-tableTextures-weave{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 11px),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--preview-felt, #5c8a72) 0%, var(--preview-felt, #5c8a72) 58%, rgba(0,0,0,.18) 100%);
}
.locker-table-preview.preview-tableTextures-plain{
  background:
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--preview-felt, #5c8a72) 0%, var(--preview-felt, #5c8a72) 58%, rgba(0,0,0,.18) 100%);
}
.locker-table-preview.preview-tableTextures-baize{
  background:
    radial-gradient(circle at 3px 3px, rgba(255,255,255,.05) 0 1.5px, transparent 1.5px 5px) 0 0/6px 6px,
    radial-gradient(circle at 3px 3px, rgba(0,0,0,.07) 0 1.5px, transparent 1.5px 5px) 2px 2px/6px 6px,
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--preview-felt, #5c8a72) 0%, var(--preview-felt, #5c8a72) 58%, rgba(0,0,0,.18) 100%);
}
.locker-table-preview.preview-tableTextures-linen{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--preview-felt, #5c8a72) 0%, var(--preview-felt, #5c8a72) 58%, rgba(0,0,0,.18) 100%);
}
.locker-table-preview .cosmetic-mini-meld{
  left: 39% !important;
  top: 46% !important;
  transform: translate(-50%,-50%) scale(.24) !important;
  transform-origin: center center;
}
.locker-table-preview .cosmetic-mini-meld i{
  box-shadow: 2px 2px rgba(0,0,0,.24) !important;
}
.locker-table-preview .cosmetic-mini-pile{
  left:auto !important;
  right:8px !important;
  bottom:8px !important;
  transform: none !important;
  width:14px !important;
  height:19px !important;
  border-width:2px !important;
  border-radius:4px !important;
  background:repeating-linear-gradient(45deg,#f0c419 0 3px,#252018 3px 6px) !important;
}
.locker-table-overlay{
  position:absolute;
  top:5px;
  right:5px;
  width:32px;
  height:22px;
  opacity:.72;
  image-rendering:pixelated;
  pointer-events:none;
}
.locker-overlay-pink{
  background:
    radial-gradient(circle at 6px 6px, #ffd5e9 0 3px, transparent 3px),
    radial-gradient(circle at 11px 6px, #ff98c8 0 2px, transparent 2px),
    radial-gradient(circle at 20px 10px, #ffd5e9 0 3px, transparent 3px),
    radial-gradient(circle at 25px 10px, #ff98c8 0 2px, transparent 2px),
    linear-gradient(130deg, transparent 0 38%, #8f5f75 38% 42%, transparent 42% 100%);
}
.locker-overlay-green{
  background:
    radial-gradient(ellipse at 8px 6px, #d8efb7 0 3px, transparent 3px),
    radial-gradient(ellipse at 14px 11px, #bfd98c 0 3px, transparent 3px),
    radial-gradient(ellipse at 22px 8px, #d8efb7 0 3px, transparent 3px),
    linear-gradient(145deg, transparent 0 36%, #7a5a2b 36% 42%, transparent 42% 100%);
}
.locker-overlay-blue{
  background:
    radial-gradient(circle at 7px 6px, #fff6b2 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 16px 9px, #ffffff 0 2px, transparent 2px),
    radial-gradient(circle at 25px 5px, #d8edff 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 22px 15px, #ffffff 0 1.5px, transparent 1.5px);
}
.locker-overlay-red{
  background:
    radial-gradient(circle at 7px 5px, #f7d4a3 0 2px, transparent 2px),
    radial-gradient(circle at 14px 12px, #ffb873 0 2px, transparent 2px),
    radial-gradient(circle at 24px 6px, #f7d4a3 0 2px, transparent 2px),
    linear-gradient(150deg, transparent 0 42%, rgba(110,65,33,.85) 42% 46%, transparent 46% 100%);
}
.locker-overlay-charcoal{
  background:
    radial-gradient(circle at 7px 6px, rgba(255,255,255,.55) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 16px 10px, rgba(255,255,255,.45) 0 2px, transparent 2px),
    radial-gradient(circle at 25px 7px, rgba(255,255,255,.5) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 21px 16px, rgba(255,255,255,.35) 0 1.5px, transparent 1.5px);
}
.locker-overlay-purple{
  background:
    radial-gradient(circle at 8px 6px, #fff0a9 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 18px 10px, #d8c6ff 0 2px, transparent 2px),
    radial-gradient(circle at 24px 5px, #fff0a9 0 1.5px, transparent 1.5px),
    linear-gradient(135deg, transparent 0 42%, rgba(155,131,229,.65) 42% 46%, transparent 46% 100%);
}
.locker-overlay-cream{
  background:
    radial-gradient(circle at 8px 6px, rgba(255,255,255,.9) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 16px 11px, rgba(255,255,255,.9) 0 2px, transparent 2px),
    radial-gradient(circle at 25px 7px, rgba(255,255,255,.9) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 22px 15px, rgba(255,255,255,.9) 0 1.5px, transparent 1.5px);
}
@media (max-width: 760px){
  .progress-locker-item .progress-reward-icon.deck{ width:70px !important; height:82px !important; }
  .progress-locker-item .progress-reward-icon.table-preview{ width:88px !important; height:54px !important; }
}


/* v43 cleanup: remove extra profile glyph, soften close buttons, intentional boot */
.title-profile-plaque{grid-template-columns:58px minmax(0,1fr) !important;}
.title-profile-open{display:none !important;}
.play-hub-close,.settings-close-v12{
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.play-hub-close img,.settings-close-v12 img{
  width:34px !important;
  height:34px !important;
  object-fit:contain !important;
}
.settings-tabs-v12 img,.settings-profile-v12 img,.settings-diagnostic-button img,
.profile-account-head img,.hud-icon-img{
  image-rendering:pixelated !important;
  object-fit:contain !important;
}
.settings-diagnostic-button img{ width:40px !important; height:40px !important; }
body.booting *{ transition:none !important; }

.cosmetic-table-preview > .locker-table-overlay{top:16px;right:16px;width:78px;height:54px;opacity:.88;}

/* =====================================================================
   v43.2 locker/icon correction pass
   ===================================================================== */
.progress-tabs-v12 img,
.settings-tabs-v12 img,
.settings-profile-v12 img,
.profile-account-head img,
.settings-diagnostic-button img{
  object-fit:contain !important;
  image-rendering:pixelated !important;
}

/* Make the category count and label read as one clear line item. */
.progress-collection-card{
  grid-template-columns:auto 1fr !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:4px !important;
}
.progress-collection-card strong,
.progress-collection-card > span{
  font:700 23px/1 var(--ui-display) !important;
  margin:0 !important;
  align-self:center !important;
}
.progress-collection-card > span{
  white-space:nowrap;
}
.progress-collection-preview{
  grid-column:1/-1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:56px !important;
  margin-top:8px !important;
}
.progress-collection-preview .progress-reward-icon{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.progress-collection-preview .progress-reward-icon:not(.deck):not(.table-preview){
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
}
.progress-collection-preview .progress-reward-icon.deck{
  width:34px !important;
  height:48px !important;
  flex:0 0 34px !important;
}
.progress-collection-preview .progress-reward-icon.table-preview{
  width:58px !important;
  height:40px !important;
  flex:0 0 58px !important;
}
.progress-collection-preview .progress-reward-icon svg,
.progress-locker-item .progress-reward-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.progress-reward-icon .reward-ui-icon{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  image-rendering:pixelated !important;
}

/* Consistent locker card icon sizing. */
.progress-locker-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.progress-locker-item .progress-reward-icon:not(.deck):not(.table-preview){
  width:72px !important;
  height:72px !important;
  flex:0 0 72px !important;
}
.progress-locker-item .progress-reward-icon.deck{
  width:56px !important;
  height:80px !important;
  flex:0 0 80px !important;
  margin-bottom:10px !important;
}
.progress-locker-item .progress-reward-icon.table-preview{
  width:118px !important;
  height:72px !important;
  flex:0 0 72px !important;
  margin-bottom:10px !important;
}
.progress-locker-name{margin-top:0 !important; text-align:center !important;}

/* Table preview tiles: render as proper miniature tables, not strips. */
.progress-reward-icon.table-preview{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.locker-table-preview{
  width:100% !important;
  height:100% !important;
  border-radius:12px !important;
  border:2px solid rgba(255,255,255,.15) !important;
  overflow:hidden !important;
  position:relative !important;
  box-shadow:0 3px 0 rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.locker-table-preview .locker-table-overlay{
  position:absolute !important;
  top:4px !important;
  right:4px !important;
  width:28px !important;
  height:18px !important;
  object-fit:contain !important;
  image-rendering:pixelated !important;
  opacity:.9 !important;
  pointer-events:none !important;
  background:none !important;
}
.cosmetic-table-preview > .locker-table-overlay{
  top:14px !important;
  right:14px !important;
  width:92px !important;
  height:54px !important;
}

/* Smaller but still readable table props inside summary cards. */
.progress-collection-preview .locker-table-preview .cosmetic-mini-meld{
  left:44% !important;
  top:52% !important;
  transform:translate(-50%,-50%) scale(.19) !important;
}
.progress-collection-preview .locker-table-preview .cosmetic-mini-pile{
  right:5px !important;
  bottom:5px !important;
  width:12px !important;
  height:16px !important;
}
.progress-locker-item .locker-table-preview .cosmetic-mini-meld{
  left:42% !important;
  top:50% !important;
  transform:translate(-50%,-50%) scale(.27) !important;
}
.progress-locker-item .locker-table-preview .cosmetic-mini-pile{
  right:8px !important;
  bottom:7px !important;
  width:14px !important;
  height:18px !important;
}

/* Better visual balance for the two Progress & Rewards top-tab icons. */
#progressTabPath img,
#progressTabLocker img{
  width:34px !important;
  height:34px !important;
}

/* Mobile re-balance. */
@media (max-width: 760px){
  .progress-collection-card strong,
  .progress-collection-card > span{font-size:17px !important;}
  .progress-collection-preview{min-height:44px !important; gap:6px !important;}
  .progress-collection-preview .progress-reward-icon:not(.deck):not(.table-preview){width:34px !important;height:34px !important;flex-basis:34px !important;}
  .progress-collection-preview .progress-reward-icon.deck{width:26px !important;height:38px !important;flex-basis:26px !important;}
  .progress-collection-preview .progress-reward-icon.table-preview{width:46px !important;height:32px !important;flex-basis:46px !important;}
  .progress-locker-item .progress-reward-icon:not(.deck):not(.table-preview){width:58px !important;height:58px !important;flex-basis:58px !important;}
  .progress-locker-item .progress-reward-icon.deck{width:44px !important;height:64px !important;flex-basis:64px !important;}
  .progress-locker-item .progress-reward-icon.table-preview{width:92px !important;height:58px !important;flex-basis:58px !important;}
}

/* =====================================================================
   v43.3 clarity pass: flatter settings icons + cleaner founder previews
   ===================================================================== */
/* Game / network bespoke raster assets: keep sharp and centered */
.settings-tabs-v12 img,
.settings-diagnostic-button img{
  image-rendering: pixelated !important;
  object-fit: contain !important;
}

/* Bigger, more legible deck icons in locker summaries and deck cards */
.progress-collection-preview .progress-reward-icon.deck{
  width:44px !important;
  height:62px !important;
  flex:0 0 44px !important;
}
.progress-locker-item .progress-reward-icon.deck{
  width:84px !important;
  height:120px !important;
  flex:0 0 120px !important;
  margin-bottom:0 !important;
}
.progress-locker-item .progress-reward-icon.deck .reward-ui-icon,
.progress-collection-preview .progress-reward-icon.deck .reward-ui-icon{
  width:100% !important;
  height:100% !important;
}

/* Remove corner overlay art from Founder’s Path / locker / preview modal. */
.locker-table-overlay{display:none !important;}

/* Replace tiny busy CSS props with flat raster prop images. */
.locker-table-preview .cosmetic-mini-meld,
.locker-table-preview .cosmetic-mini-pile,
.cosmetic-table-preview .cosmetic-mini-meld,
.cosmetic-table-preview .cosmetic-mini-pile{display:none !important;}
.locker-prop-meld,
.locker-prop-pile{
  position:absolute !important;
  display:block !important;
  object-fit:contain !important;
  image-rendering:pixelated !important;
  pointer-events:none !important;
}
.locker-table-preview .locker-prop-meld{
  left:6px !important;
  bottom:5px !important;
  width:24px !important;
  height:18px !important;
}
.locker-table-preview .locker-prop-pile{
  right:6px !important;
  bottom:5px !important;
  width:16px !important;
  height:20px !important;
}
.cosmetic-table-preview .locker-prop-meld{
  left:50% !important;
  top:44% !important;
  transform:translate(-50%,-50%) !important;
  width:196px !important;
  height:122px !important;
}
.cosmetic-table-preview .locker-prop-pile{
  left:50% !important;
  top:68% !important;
  transform:translate(-50%,-50%) !important;
  width:86px !important;
  height:112px !important;
}

@media (max-width:760px){
  .progress-collection-preview .progress-reward-icon.deck{
    width:34px !important;
    height:48px !important;
    flex-basis:34px !important;
  }
  .progress-locker-item .progress-reward-icon.deck{
    width:62px !important;
    height:92px !important;
    flex-basis:92px !important;
  }
  .locker-table-preview .locker-prop-meld{width:20px !important;height:15px !important;left:5px !important;bottom:4px !important;}
  .locker-table-preview .locker-prop-pile{width:13px !important;height:17px !important;right:5px !important;bottom:4px !important;}
  .cosmetic-table-preview .locker-prop-meld{width:142px !important;height:90px !important;}
  .cosmetic-table-preview .locker-prop-pile{width:64px !important;height:84px !important;}
}

/* v43.4 icon clarity pass */
.locker-table-preview .locker-prop-meld{left:4px !important;bottom:3px !important;width:28px !important;height:20px !important;}
.locker-table-preview .locker-prop-pile{right:5px !important;bottom:3px !important;width:18px !important;height:24px !important;}
.cosmetic-table-preview .locker-prop-meld{left:50% !important;top:42% !important;transform:translate(-50%,-50%) !important;width:220px !important;height:140px !important;}
.cosmetic-table-preview .locker-prop-pile{left:50% !important;top:66% !important;transform:translate(-50%,-50%) !important;width:90px !important;height:120px !important;}
@media (max-width:760px){ .locker-table-preview .locker-prop-meld{width:22px !important;height:16px !important;} .locker-table-preview .locker-prop-pile{width:14px !important;height:18px !important;} .cosmetic-table-preview .locker-prop-meld{width:150px !important;height:96px !important;} .cosmetic-table-preview .locker-prop-pile{width:64px !important;height:84px !important;} }

/* =====================================================================
   v43.5 final icon sizing / centering corrections
   - enlarge Game / Your locker / connection icons
   - center back arrow correctly
   - make deck rewards in Founder's Path comparable to character rewards
   ===================================================================== */

/* Settings tab icons: the bespoke pixel-art assets should read at a glance. */
.settings-tabs-v12 img{
  width:44px !important;
  height:44px !important;
  object-fit:contain !important;
}
.settings-diagnostic-button{
  grid-template-columns:56px 1fr !important;
}
.settings-diagnostic-button img{
  width:48px !important;
  height:48px !important;
  object-fit:contain !important;
}

/* Progress top tabs: make the Reward path / Your locker icons clearly readable. */
#progressTabPath img,
#progressTabLocker img{
  width:42px !important;
  height:42px !important;
  object-fit:contain !important;
}

/* Founder's Path reward cards: deck reward art should not look undersized. */
.progress-node-rewards{
  gap:10px !important;
}
.progress-node-rewards .progress-reward-icon.deck,
.progress-collection-preview .progress-reward-icon.deck{
  width:56px !important;
  height:78px !important;
  flex:0 0 56px !important;
}
.progress-node-rewards .progress-reward-icon.deck .reward-ui-icon,
.progress-collection-preview .progress-reward-icon.deck .reward-ui-icon,
.progress-locker-item .progress-reward-icon.deck .reward-ui-icon{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

/* Properly center the back arrow button/icon. */
.progress-back-v12,
.progress-path-arrow,
.progress-done-v12{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.progress-back-v12 img{
  width:26px !important;
  height:26px !important;
  display:block !important;
  margin:0 auto !important;
  object-fit:contain !important;
}
.progress-path-arrow img{
  width:22px !important;
  height:22px !important;
  display:block !important;
  margin:0 auto !important;
  object-fit:contain !important;
}
.progress-done-v12 img{
  width:20px !important;
  height:20px !important;
  display:block !important;
  object-fit:contain !important;
}

@media (max-width:760px){
  .settings-tabs-v12 img{width:34px !important;height:34px !important;}
  .settings-diagnostic-button{grid-template-columns:46px 1fr !important;}
  .settings-diagnostic-button img{width:40px !important;height:40px !important;}
  #progressTabPath img,
  #progressTabLocker img{width:34px !important;height:34px !important;}
  .progress-node-rewards .progress-reward-icon.deck,
  .progress-collection-preview .progress-reward-icon.deck{
    width:42px !important;
    height:58px !important;
    flex-basis:42px !important;
  }
  .progress-back-v12 img{width:22px !important;height:22px !important;}
}


/* =====================================================================
   v43.6 targeted artwork-scale and alignment adjustments
   Replaces transparent-padding workarounds with accurately cropped assets.
   All four collection previews use identical alignment slots.
   ===================================================================== */

/* The header exit control is symmetric, including on phones. */
#btnProgressBack {
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  padding:0 !important;
}
#btnProgressBack img {
  display:block !important;
  width:34px !important;
  height:23px !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  image-rendering:pixelated !important;
}

/* Match the apparent artwork size instead of scaling empty PNG margins. */
#progressTabLocker img {
  width:45px !important;
  height:45px !important;
  flex:0 0 45px !important;
}
#progressTabPath img {
  width:43px !important;
  height:43px !important;
  flex:0 0 43px !important;
}
.settings-tabs-v12 button[data-settings-tab="game"] img {
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
}
#btnDiag {
  grid-template-columns:56px minmax(0,1fr) !important;
  align-items:center !important;
}
#btnDiag img {
  width:48px !important;
  height:48px !important;
  justify-self:center !important;
  align-self:center !important;
  object-fit:contain !important;
}

/* Collection overview: the four categories share one icon rhythm. */
#progressCollection .progress-collection-preview {
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:7px !important;
  min-height:80px !important;
  overflow:hidden !important;
}
#progressCollection .progress-collection-preview > .progress-reward-icon {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  max-width:62px !important;
  width:auto !important;
  height:72px !important;
  margin:0 !important;
  border:0 !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}
#progressCollection .progress-collection-preview > .progress-reward-icon.deck .reward-ui-icon {
  display:block !important;
  width:100% !important;
  height:69px !important;
  max-height:100% !important;
  object-fit:contain !important;
}
#progressCollection .progress-collection-preview > .progress-reward-icon.table-preview .locker-table-preview {
  width:100% !important;
  height:45px !important;
  flex:0 0 auto !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
#progressCollection .progress-collection-preview > .progress-reward-icon:not(.deck):not(.table-preview) svg {
  display:block !important;
  width:92% !important;
  height:60px !important;
  max-height:100% !important;
  object-fit:contain !important;
}

/* Selected collection: cards align their artwork and labels on matching rows.
   Portrait decks and landscape tables keep their natural aspect ratios. */
#progressLocker .progress-locker-item {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
#progressLocker .progress-locker-item > .progress-reward-icon {
  width:100% !important;
  height:108px !important;
  min-height:108px !important;
  flex:0 0 108px !important;
  margin:0 auto 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#progressLocker .progress-locker-item > .progress-reward-icon.deck .reward-ui-icon {
  width:100% !important;
  height:100px !important;
  object-fit:contain !important;
}
#progressLocker .progress-locker-item > .progress-reward-icon.table-preview .locker-table-preview {
  width:min(100%,142px) !important;
  height:88px !important;
  flex:0 0 auto !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
#progressLocker .progress-locker-item > .progress-reward-icon:not(.deck):not(.table-preview) svg {
  display:block !important;
  width:88px !important;
  height:88px !important;
  max-width:100% !important;
  max-height:100% !important;
}

@media (max-width:760px) {
  #btnProgressBack img { width:26px !important; height:18px !important; }
  #progressTabLocker img { width:34px !important; height:34px !important; flex-basis:34px !important; }
  #progressTabPath img { width:31px !important; height:31px !important; flex-basis:31px !important; }
  .settings-tabs-v12 button[data-settings-tab="game"] img {
    width:36px !important; height:36px !important; flex-basis:36px !important;
  }
  #btnDiag { grid-template-columns:44px minmax(0,1fr) !important; }
  #btnDiag img { width:43px !important; height:43px !important; }
  #progressCollection .progress-collection-preview {
    gap:3px !important;
    min-height:52px !important;
  }
  #progressCollection .progress-collection-preview > .progress-reward-icon {
    height:49px !important;
    max-width:43px !important;
  }
  #progressCollection .progress-collection-preview > .progress-reward-icon.deck .reward-ui-icon {
    height:47px !important;
  }
  #progressCollection .progress-collection-preview > .progress-reward-icon.table-preview .locker-table-preview {
    height:32px !important;
    border-radius:7px !important;
  }
  #progressCollection .progress-collection-preview > .progress-reward-icon:not(.deck):not(.table-preview) svg {
    height:44px !important;
  }
  #progressLocker .progress-locker-item > .progress-reward-icon {
    height:78px !important;
    min-height:78px !important;
    flex-basis:78px !important;
    margin-bottom:7px !important;
  }
  #progressLocker .progress-locker-item > .progress-reward-icon.deck .reward-ui-icon {
    height:75px !important;
  }
  #progressLocker .progress-locker-item > .progress-reward-icon.table-preview .locker-table-preview {
    width:min(100%,112px) !important;
    height:68px !important;
  }
  #progressLocker .progress-locker-item > .progress-reward-icon:not(.deck):not(.table-preview) svg {
    width:71px !important; height:71px !important;
  }
}