/* ==========================================================================
   SNAKE BATTLE ROYALE — style.css
   Mobile-first, landscape-oriented, fully fluid UI layer.

   Scaling strategy
   ----------------
   The root font-size is derived from `vmin`, so in landscape it follows the
   device HEIGHT. Every size in this file is expressed in `rem`, which means
   the whole interface scales proportionally on any phone (small Android,
   iPhone with notch, tablets) without a single media query for sizing.

   Layer order (z-index)
   ---------------------
     0  canvas
    10  HUD (pointer-events: none)
    20  touch controls
    30  screens / menus
    40  modals
    50  orientation guard
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --c-bg-0: #05070f;
  --c-bg-1: #0a1020;
  --c-bg-2: #111a30;
  --c-panel: rgba(16, 24, 44, 0.82);
  --c-panel-solid: #101a2e;
  --c-stroke: rgba(126, 168, 255, 0.18);
  --c-stroke-strong: rgba(126, 168, 255, 0.42);

  --c-text: #eaf2ff;
  --c-text-dim: #8ea3c9;
  --c-text-faint: #5c6f92;

  --c-primary: #5cff9d;
  --c-primary-dark: #12a065;
  --c-cyan: #35d6ff;
  --c-gold: #ffc53d;
  --c-danger: #ff4d6d;
  --c-toxic: #b46bff;
  --c-lava: #ff7a29;

  /* Tier colors */
  --c-bronze: #cd7f32;
  --c-silver: #c9d4e3;
  --c-gold-tier: #ffc53d;
  --c-platinum: #4ae0d0;
  --c-diamond: #61b7ff;
  --c-master: #c07bff;
  --c-legend: #ff5f8f;

  /* Geometry */
  --r-sm: 0.5rem;
  --r-md: 0.9rem;
  --r-lg: 1.4rem;
  --r-pill: 999rem;

  /* Safe areas (notch / gesture bar) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* Effects */
  --glow-primary: 0 0 1.2rem rgba(92, 255, 157, 0.45);
  --glow-danger: 0 0 1.2rem rgba(255, 77, 109, 0.45);
  --shadow-panel: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.55);

  /* Typography */
  --font-ui: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-display: "Trebuchet MS", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-num: "SF Mono", "Roboto Mono", ui-monospace, monospace;

  /* Player-controlled scale for the joystick (updated from Settings) */
  --joy-scale: 1;

  /* ------------------------------------------------------------------------
     TOUCH CONTROL SIZES

     One definition per control, used by every rule that draws it. These used
     to be spread over the base rules plus four media queries in rem, vw and
     vmin, which disagreed: on a 844x390 handset BOOST measured 70px because a
     `max-height: 430px` rule quietly won, and a skill button came out 35px —
     below Apple's 44pt and Android's 48dp minimum, so it was genuinely hard
     to hit under pressure.

     Why clamp(px, vmin, px) and not rem: the root font is
     clamp(9px, 2.05vmin, 17px), which pins at 9px for every phone in
     landscape. Anything sized in rem is therefore frozen at its smallest
     value on the devices that need the largest relative targets. vmin tracks
     the short edge, which in landscape is the screen height — the axis the
     thumb actually has to reach across.

     The floors are the platform touch minimums. The ceilings stop a tablet's
     larger vmin from inflating BOOST into a quarter of the screen.
     ------------------------------------------------------------------------ */
  --btn-skill: clamp(48px, 13vmin, 72px);
  --btn-boost: clamp(78px, 24vmin, 132px);
  --joy-size: clamp(88px, 27vmin, 160px);
  --btn-gap: clamp(9px, 2.4vmin, 16px);

  /**
   * Minimap edge. Same story as the buttons: the size lived in four rules
   * across the stylesheet in rem, and rem is pinned at 9px on every landscape
   * phone, so a `max-height: 430px` block quietly held it at 77px. One token,
   * vmin-driven, roughly a fifth larger than what those rules resolved to.
   */
  --minimap-size: clamp(80px, 25vmin, 225px);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  /* Fluid root size: ~9px on tiny phones, ~17px on tablets */
  font-size: clamp(9px, 2.05vmin, 17px);
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  background: var(--c-bg-0);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.35;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  outline: none;
}

button { cursor: pointer; }
ul, ol { list-style: none; }
canvas { display: block; }

/* --------------------------------------------------------------------------
   3. APP SHELL / SCREEN ROUTER
   -------------------------------------------------------------------------- */
.app {
  position: fixed;
  inset: 0;
  /* `clip` rather than `hidden`: `hidden` still makes the shell a scroll
     container, so a tap/focus on a partly offscreen control scrolled #app and
     left every screen — game canvas included — stuck at that offset. */
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(120% 90% at 50% -10%, #14224a 0%, transparent 60%),
    radial-gradient(90% 70% at 90% 110%, #1b2a12 0%, transparent 55%),
    var(--c-bg-0);
}

/* Subtle animated grid for menu depth */
.app::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(126, 168, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 168, 255, 0.055) 1px, transparent 1px);
  background-size: 4rem 4rem;
  animation: gridDrift 24s linear infinite;
  pointer-events: none;
}

@keyframes gridDrift {
  to { transform: translate3d(4rem, 4rem, 0); }
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  padding:
    calc(var(--safe-t) + 0.8rem)
    calc(var(--safe-r) + 1.2rem)
    calc(var(--safe-b) + 0.8rem)
    calc(var(--safe-l) + 1.2rem);
}

.screen.is-active {
  display: flex;
  animation: screenIn 0.28s ease-out;
}

/* The game screen must not clip the canvas with padding */
#screen-game { padding: 0; }

@keyframes screenIn {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   4. SHARED COMPONENTS
   -------------------------------------------------------------------------- */

/* --- Buttons --- */
.btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.9rem 2rem;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.btn:active { transform: scale(0.955); }
/* display:inline-flex above beat the hidden attribute, so "Watch the victory
   moment" showed on every results screen, third place in Classic included. */
.btn[hidden] { display: none; }

.btn--sm { padding: 0.65rem 1.4rem; font-size: 0.95rem; }

.btn--play {
  background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #04240f;
  box-shadow: var(--glow-primary), inset 0 -0.25rem 0 rgba(0, 0, 0, 0.22);
}

.btn--play .btn__text { font-size: 1.6rem; }
.btn--sm .btn__text { font-size: 1.05rem; }
.btn__sub {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.72;
}

/* Sweeping shine on the play button */
.btn__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%, 65% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

.btn--ghost {
  background: var(--c-panel);
  border: 1px solid var(--c-stroke);
  color: var(--c-text);
  font-size: 0.9rem;
  padding: 0.7rem 1.2rem;
  backdrop-filter: blur(8px);
}

.btn--ghost:active { border-color: var(--c-stroke-strong); }

.btn--danger {
  background: rgba(255, 77, 109, 0.14);
  border: 1px solid rgba(255, 77, 109, 0.5);
  color: var(--c-danger);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--r-sm);
  background: var(--c-panel);
  border: 1px solid var(--c-stroke);
  font-size: 1.15rem;
  color: var(--c-text-dim);
  transition: transform 0.12s ease;
}

.icon-btn:active { transform: scale(0.92); }

/* --- Chips & pills --- */
.chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--c-panel);
  border: 1px solid var(--c-stroke);
  font-size: 0.8rem;
}

.chip__label { color: var(--c-text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.chip__value { font-weight: 700; color: var(--c-gold); }

/* --- Panels --- */
.stat-card {
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--c-panel);
  border: 1px solid var(--c-stroke);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-panel);
}

.stat-card__title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-faint);
  margin-bottom: 0.7rem;
}

.stat-list__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  padding: 0.42rem 0;
  font-size: 0.88rem;
  color: var(--c-text-dim);
  border-bottom: 1px solid rgba(126, 168, 255, 0.08);
}

.stat-list__row:last-child { border-bottom: 0; }
.stat-list__row b { color: var(--c-text); font-family: var(--font-num); }

.section-title {
  margin: 1.1rem 0 0.6rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-faint);
}

/* --- XP bar --- */
.xp { width: 100%; }

.xp__track {
  position: relative;
  height: 0.62rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--c-stroke);
  overflow: hidden;
}

.xp__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-cyan), var(--c-primary));
  box-shadow: 0 0 0.7rem rgba(53, 214, 255, 0.7);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.xp__text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  font-family: var(--font-num);
  color: var(--c-text-faint);
  text-align: center;
}

.xp--lg .xp__track { height: clamp(8px, 2.4vmin, 14px); }
.xp--lg .xp__text { font-size: clamp(11px, 3vmin, 14px); color: var(--c-text-dim); }

/* --- Tabs --- */
.tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--c-stroke);
}

.tabs__btn {
  flex: 1;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-text-faint);
  transition: background 0.18s ease, color 0.18s ease;
}

.tabs__btn.is-active {
  background: linear-gradient(140deg, rgba(92, 255, 157, 0.22), rgba(53, 214, 255, 0.18));
  color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-stroke-strong);
}

.tabs--sm .tabs__btn { font-size: 0.75rem; padding: 0.38rem 0.7rem; }

/* --- Segmented control --- */
.seg {
  display: flex;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--c-stroke);
}

.seg__btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  color: var(--c-text-faint);
  background: rgba(0, 0, 0, 0.3);
}

.seg__btn.is-active { background: rgba(92, 255, 157, 0.18); color: var(--c-primary); }

/* --- Switch --- */
.switch { position: relative; display: inline-block; width: 3.2rem; height: 1.7rem; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.switch__ui {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--c-stroke);
  transition: background 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
}

.switch__ui::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-text-faint);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}

.switch input:checked + .switch__ui { background: rgba(92, 255, 157, 0.25); border-color: var(--c-primary); }
.switch input:checked + .switch__ui::after { transform: translateX(1.45rem); background: var(--c-primary); }

/* --- Range --- */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 9rem;
  height: 0.35rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.5);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: var(--glow-primary);
}

/* --------------------------------------------------------------------------
   5. BOOT SCREEN
   -------------------------------------------------------------------------- */
.boot__inner {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}

.logo { display: flex; flex-direction: column; align-items: center; line-height: 0.95; }

.logo__snake {
  font-family: var(--font-display);
  font-size: 4.4rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--c-primary);
  text-shadow: 0 0 2rem rgba(92, 255, 157, 0.55);
}

.logo__br {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.52em;
  color: var(--c-text-dim);
  margin-left: 0.5em;
}

.boot__bar {
  width: 18rem;
  height: 0.45rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.boot__fill {
  height: 100%;
  width: 12%;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-primary));
  transition: width 0.25s ease;
}

.boot__status { font-size: 0.85rem; color: var(--c-text-faint); }
.boot__version { position: absolute; bottom: 1rem; font-size: 0.7rem; color: var(--c-text-faint); }

/* --------------------------------------------------------------------------
   6. MAIN MENU
   -------------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
}

.topbar__right { display: flex; align-items: center; gap: 0.6rem; }

.player-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.42rem 1.1rem 0.42rem 0.42rem;
  border-radius: var(--r-pill);
  background: var(--c-panel);
  border: 1px solid var(--c-stroke);
  backdrop-filter: blur(10px);
}

.player-card__avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c-primary), var(--c-primary-dark));
  font-size: 1.2rem;
}

.player-card__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.player-card__name { font-weight: 700; font-size: 0.95rem; }
.player-card__rank { font-size: 0.72rem; color: var(--c-gold); letter-spacing: 0.06em; }

.menu {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: center;
  gap: 1.4rem;
  min-height: 0;
}

.menu__col { display: flex; flex-direction: column; gap: 0.9rem; }
.menu__col--center { align-items: center; justify-content: center; }
.menu__col--left { align-items: stretch; }
.menu__col--right { align-items: stretch; }

/* League badge */
.league-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.1rem;
  border-radius: var(--r-md);
  background: var(--c-panel);
  border: 1px solid var(--c-stroke);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-panel);
}

.league-card__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.league-card__icon {
  display: grid;
  place-items: center;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  font-size: 2.4rem;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.28), transparent 60%), var(--c-bronze);
  box-shadow: 0 0 1.6rem rgba(205, 127, 50, 0.45);
}

.league-card__badge[data-tier="silver"]   .league-card__icon { background-color: var(--c-silver);   box-shadow: 0 0 1.6rem rgba(201, 212, 227, 0.45); }
.league-card__badge[data-tier="gold"]     .league-card__icon { background-color: var(--c-gold-tier); box-shadow: 0 0 1.6rem rgba(255, 197, 61, 0.45); }
.league-card__badge[data-tier="platinum"] .league-card__icon { background-color: var(--c-platinum); box-shadow: 0 0 1.6rem rgba(74, 224, 208, 0.45); }
.league-card__badge[data-tier="diamond"]  .league-card__icon { background-color: var(--c-diamond);  box-shadow: 0 0 1.6rem rgba(97, 183, 255, 0.45); }
.league-card__badge[data-tier="master"]   .league-card__icon { background-color: var(--c-master);   box-shadow: 0 0 1.6rem rgba(192, 123, 255, 0.45); }
.league-card__badge[data-tier="legend"]   .league-card__icon { background-color: var(--c-legend);   box-shadow: 0 0 1.6rem rgba(255, 95, 143, 0.45); }

.league-card__tier {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Name input */
.name-field { width: 100%; max-width: 19rem; }

.name-field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-faint);
  text-align: center;
}

.name-field__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--c-stroke);
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  /* Text inputs are the only elements allowed to receive native touch */
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
}

.name-field__input::placeholder { color: var(--c-text-faint); font-weight: 400; }
.name-field__input:focus { border-color: var(--c-primary); box-shadow: var(--glow-primary); }

.menu__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }

.menu__footer { flex: 0 0 auto; text-align: center; }
.hint { font-size: 0.72rem; color: var(--c-text-faint); }

.bug-tip {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  color: var(--c-text-faint);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   7. MATCHMAKING LOBBY
   -------------------------------------------------------------------------- */
.lobby {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: min(100%, 34rem);
  text-align: center;
}

.lobby__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.lobby__room {
  margin-top: -0.5rem;
  font-family: var(--font-num);
  /* px/vmin, not rem: rem is pinned at 9px on landscape phones. */
  font-size: clamp(12px, 3.6vmin, 17px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-text);
  opacity: 0.85;
}
.lobby__room[hidden] { display: none; }

.lobby__ring { position: relative; width: 9rem; height: 9rem; }

.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__bg { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 6; }

.ring__fg {
  fill: none;
  stroke: var(--c-primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 0.4rem rgba(92, 255, 157, 0.75));
  transition: stroke-dashoffset 0.95s linear;
}

.lobby__count {
  position: absolute;
  inset: 0;
  /* Flex, not grid: "23" and its "/50" sit side by side. */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--c-primary);
  text-shadow: var(--glow-primary);
}

.lobby__status { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.05em; }
/* "/50" under the count of players in the room. */
.lobby__cap { font-size: 0.42em; opacity: 0.7; margin-left: 0.08em; align-self: center; }
.lobby__bar[hidden] { display: none; }

.lobby__bar {
  width: 100%;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--c-stroke);
  overflow: hidden;
}

.lobby__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-primary));
  transition: width 0.3s ease;
}

.lobby__players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  max-height: 6.5rem;
  overflow: hidden;
}

.lobby__player {
  padding: 0.26rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-stroke);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-text-dim);
  animation: popIn 0.25s ease-out;
}

.lobby__player--you { background: rgba(92, 255, 157, 0.16); border-color: var(--c-primary); color: var(--c-primary); }
.lobby__player--bot { opacity: 0.75; }

@keyframes popIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   8. GAME SCREEN — CANVAS + HUD
   -------------------------------------------------------------------------- */
.game-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* No background: the WebGL ground canvas sits directly behind this one and
     would be hidden by it. That canvas carries the fallback colour instead. */
}

.hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  padding:
    calc(var(--safe-t) + 0.6rem)
    calc(var(--safe-r) + 0.9rem)
    calc(var(--safe-b) + 0.6rem)
    calc(var(--safe-l) + 0.9rem);
}

/* HUD anchors */
.hud__tl { position: absolute; top: calc(var(--safe-t) + 0.6rem); left: calc(var(--safe-l) + 0.9rem); display: flex; flex-direction: column; gap: 0.3rem; }
.hud__tc { position: absolute; top: calc(var(--safe-t) + 0.6rem); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.hud__tr { position: absolute; top: calc(var(--safe-t) + 0.6rem); right: calc(var(--safe-r) + 0.9rem); display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }

.stat-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.24rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(5, 9, 18, 0.38);
  border: 1px solid rgba(126, 168, 255, 0.18);
  font-size: 0.78rem;
  backdrop-filter: blur(4px);
}

/* 0.64rem and 0.88rem were 5.8px and 7.9px on a landscape phone, and the key
   was --c-text-faint on top of that — so the pills showed two bare numbers with
   no readable word saying which was RANK and which was KILLS. */
.stat-pill__k {
  color: var(--c-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(9px, 1.9vmin, 13px);
}
.stat-pill b { font-family: var(--font-num); font-size: clamp(13px, 2.9vmin, 20px); }
.stat-pill--lane b { color: var(--c-gold); }

.top5 {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.45rem;
  min-width: 9.5rem;
  max-width: 11.5rem;
  background: rgba(8, 14, 28, 0.32);
  border: 1px solid rgba(126, 168, 255, 0.14);
  border-radius: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  pointer-events: none;
}

.top5__row {
  display: grid;
  grid-template-columns: 1.1rem 1fr auto;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.68rem;
  color: rgba(230, 240, 255, 0.78);
  line-height: 1.2;
}

.top5__rank {
  font-family: var(--font-num);
  font-weight: 700;
  color: rgba(126, 168, 255, 0.75);
  text-align: center;
}

.top5__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top5__score {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.88);
}

.top5__row--lead .top5__rank,
.top5__row--lead .top5__name { color: #ffc53d; }
.top5__row--you {
  background: rgba(80, 170, 255, 0.16);
  border-radius: 0.25rem;
  margin: 0 -0.15rem;
  padding: 0.08rem 0.15rem;
}
.top5__row--you .top5__name { color: #9fd0ff; font-weight: 700; }


/* Phase + timer */
.phase-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(5, 9, 18, 0.38);
  border: 1px solid rgba(126, 168, 255, 0.2);
  backdrop-filter: blur(4px);
}

/* rem is pinned at 9px on every landscape phone, so 0.76rem and 1rem were
   6.8px and 9px on the device this game is built for — the gas countdown, the
   one number you have to act on, was the smallest text on screen. vmin tracks
   the short edge, which is the axis your eye has to cross. */
.phase-bar__name { font-size: clamp(10px, 2.2vmin, 15px); color: var(--c-text-dim); letter-spacing: 0.06em; }
.phase-bar__timer {
  font-family: var(--font-num);
  font-size: clamp(16px, 3.8vmin, 27px);
  font-weight: 800;
  color: var(--c-cyan);
}
.phase-bar__timer:empty { display: none; }

/* Countdown heartbeat — replaces the giant centre number that covered the snake */
.phase-bar__timer.is-tick { animation: timerTick 0.5s ease-out; }

@keyframes timerTick {
  0%   { transform: scale(1.5); color: var(--c-primary); }
  100% { transform: scale(1); color: var(--c-cyan); }
}

.hud.is-classic .phase-bar { display: none; }
.hud.is-classic .alive-bar { display: none; }
/* Classic carries TWO cards (CLASSIC.maxCards), Battle Royale three
   (CORRIDOR.maxCards) — so Classic drops the third slot rather than showing a
   home no card can ever reach. Not a hidden empty slot; a slot that is not
   there in that mode. */
#controls.is-classic #skillBtn2 { display: none !important; }
/* The slots a mode DOES have stay on screen even while empty, as faint "+"
   homes. BR used to hide those, which cost the player the one thing the row
   teaches for free: how many cards you are allowed to carry. Dim circles say
   "this many slots" without a word of tutorial. */

/* The number alone — no label, no plate. Without a background behind it the
   figure has to carry its own contrast over the bright field, so it keeps a
   dark outline and a soft drop shadow instead. */
.score-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.score-hero__v {
  font-family: var(--font-num);
  font-size: clamp(2.7rem, 10vmin, 3.7rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  -webkit-text-stroke: 0.09em rgba(8, 18, 34, 0.85);
  paint-order: stroke fill;
  text-shadow: 0 0.12em 0.3em rgba(6, 14, 28, 0.45);
}
/* Battle Royale hides the place pill while you are alive (uiManager updateHud). */
.stat-pill[hidden] { display: none; }
.stat-pill--rank b {
  color: #ffc53d;
}

/* Leave match button removed from HUD */

.studio-tabs {
  display: flex;
  gap: 0.3rem;
  width: 100%;
  margin: 0.2rem 0 0;
  padding: 0.18rem;
  border-radius: 999px;
  background: rgba(6, 18, 28, 0.55);
  border: 1px solid rgba(120, 200, 230, 0.18);
}
.studio-tabs__btn {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--home-muted);
  border-radius: 999px;
  padding: 0.38rem 0.35rem;
  font-size: clamp(0.7rem, 2.4vmin, 0.84rem);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.studio-tabs__btn.is-active {
  background: linear-gradient(180deg, #3ecf9a 0%, #2aaa72 100%);
  color: #062418;
  box-shadow:
    0 0.16rem 0 #146048,
    inset 0 0.05rem 0 rgba(255, 255, 255, 0.28);
}
.studio-tray {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.studio-tray[hidden] {
  display: none !important;
}
.studio-panel {
  width: 100%;
}
.studio-panel[hidden] {
  display: none !important;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.1rem 0;
}
.pattern-chip, .hat-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 230, 0.28);
  background: rgba(10, 28, 42, 0.72);
  font-size: clamp(0.68rem, 2.3vmin, 0.78rem);
  font-weight: 700;
  color: var(--home-ink);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 0.05rem 0 rgba(160, 220, 255, 0.1);
}
.pattern-chip.is-selected, .hat-chip.is-selected {
  border-color: rgba(180, 255, 220, 0.55);
  background: linear-gradient(180deg, rgba(40, 110, 85, 0.95) 0%, rgba(22, 70, 52, 0.95) 100%);
  box-shadow:
    0 0 0 0.12rem rgba(62, 207, 154, 0.35),
    inset 0 0.05rem 0 rgba(255, 255, 255, 0.18);
}
.pattern-chip__swatch {
  width: 1.35rem;
  height: 0.48rem;
  border-radius: 999px;
  flex: 0 0 auto;
  background: repeating-linear-gradient(90deg, #5cff9d 0 5px, #1f8f5c 5px 10px);
}
.pattern-chip__swatch[data-pat="solid"] {
  background: #5cff9d;
}
.pattern-chip__swatch[data-pat="stripe"] {
  background: repeating-linear-gradient(90deg, #5cff9d 0 8px, #1f8f5c 8px 14px);
}
.pattern-chip__swatch[data-pat="bands"] {
  background: repeating-linear-gradient(90deg, #5cff9d 0 12px, #1f8f5c 12px 18px);
}
.pattern-chip__swatch[data-pat="spark"] {
  background: linear-gradient(90deg, #5cff9d 0 70%, #1f8f5c 70% 78%, #5cff9d 78%);
}
.hat-chip__ico { font-size: 0.9rem; line-height: 1; }

/* Turns red while the gas is shrinking */
.phase-bar.is-danger { border-color: rgba(180, 107, 255, 0.6); }
.phase-bar.is-danger .phase-bar__timer { color: var(--c-toxic); }
.phase-bar.is-warn { border-color: rgba(255, 197, 61, 0.55); }
.phase-bar.is-warn .phase-bar__timer { color: var(--c-gold); }

.alive-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgba(6, 12, 24, 0.4);
  border: 1px solid rgba(92, 255, 157, 0.35);
  box-shadow: 0 0 14px rgba(92, 255, 157, 0.12);
}

.alive-bar__count {
  font-family: var(--font-num);
  font-size: 1.55rem;
  font-weight: 800;
  color: #5cff9d;
  line-height: 1;
  min-width: 2ch;
  text-align: center;
}

.alive-bar__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}

.alive-bar__label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--c-text-dim);
  font-weight: 700;
}

.alive-bar__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: var(--glow-primary);
  animation: pulse 1.8s ease-in-out infinite;
}

.alive-bar.is-low {
  border-color: rgba(255, 197, 61, 0.65);
  box-shadow: 0 0 18px rgba(255, 197, 61, 0.22);
}
.alive-bar.is-low .alive-bar__count { color: #ffc53d; }
.alive-bar.is-critical {
  border-color: rgba(255, 90, 90, 0.7);
  box-shadow: 0 0 20px rgba(255, 90, 90, 0.28);
}
.alive-bar.is-critical .alive-bar__count { color: #ff6a6a; }

@keyframes pulse {
  50% { opacity: 0.35; transform: scale(0.75); }
}

/* Minimap */
.minimap {
  position: relative;
  width: var(--minimap-size);
  height: var(--minimap-size);
  border-radius: var(--r-md);
  overflow: hidden;
  background: transparent;
}

.minimap__canvas { width: 100%; height: 100%; }

.minimap__frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-md);
  box-shadow: none;
  pointer-events: none;
}

.minimap__pop {
  position: absolute;
  left: 0.25rem;
  bottom: 0.2rem;
  font-family: var(--font-num);
  font-size: clamp(9px, 1.9vmin, 13px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* Inventory lives on the boost cluster — hide minimap copies. */
.card-slots { display: none !important; }
.card-slot[hidden] { display: none !important; }

.card-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 4.2rem;
  border-radius: var(--r-sm);
  background: rgba(5, 9, 18, 0.62);
  border: 1px dashed var(--c-stroke);
  font-size: 1.5rem;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.card-slot.is-empty { color: var(--c-text-faint); }
.card-slot.is-empty .card-slot__index { font-size: 0.85rem; font-family: var(--font-num); opacity: 0.5; }

.card-slot.is-filled {
  border-style: solid;
  border-color: var(--c-primary);
  background: linear-gradient(170deg, rgba(92, 255, 157, 0.2), rgba(5, 9, 18, 0.8));
  animation: slotFill 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-slot__glyph {
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 700;
}

.card-slot__name {
  position: absolute;
  bottom: 0.15rem;
  left: 0;
  right: 0;
  font-size: 0.5rem;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--c-text-dim);
  text-transform: uppercase;
}

.card-slot__tag {
  position: absolute;
  top: 0.12rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-slot.is-passive {
  border-color: rgba(255, 197, 61, 0.75);
  background: linear-gradient(170deg, rgba(255, 197, 61, 0.18), rgba(5, 9, 18, 0.85));
}
.card-slot.is-passive .card-slot__tag { color: #ffc53d; }

.card-slot.is-active {
  border-color: rgba(53, 214, 255, 0.85);
  background: linear-gradient(170deg, rgba(53, 214, 255, 0.22), rgba(5, 9, 18, 0.85));
}
.card-slot.is-active .card-slot__tag { color: #35d6ff; }

.card-slot.is-spent {
  opacity: 0.4;
  filter: grayscale(0.55);
  border-color: rgba(255, 255, 255, 0.2);
}
.card-slot.is-spent .card-slot__tag { color: var(--c-text-faint); }

.card-slot.is-ready {
  border-color: rgba(92, 255, 157, 0.7);
}

@keyframes slotFill {
  0%   { transform: scale(0.6) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Kill feed (hidden — clutter; deaths already show on the minimap) */
.killfeed {
  display: none;
}

.killfeed__row {
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-sm);
  background: rgba(5, 9, 18, 0.6);
  border-left: 2px solid var(--c-danger);
  font-size: 0.7rem;
  color: var(--c-text-dim);
  animation: feedIn 0.25s ease-out;
}

.killfeed__row b { color: var(--c-text); }
.killfeed__row--you { border-left-color: var(--c-primary); }
.killfeed__row--you b { color: var(--c-primary); }

@keyframes feedIn {
  from { opacity: 0; transform: translateX(-1rem); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Center announcements: "3 2 1 GO!", phase transitions */
.announce {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  pointer-events: none;
}

.announce__big {
  font-family: var(--font-display);
  /* Scales with the window so it never blankets the arena on short screens. */
  font-size: clamp(2.8rem, 9vmin, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--c-primary);
  /* The tight dark shadows are an outline: Classic's ground is pale blue, and
     a glow alone left a pale word on a pale floor. */
  text-shadow:
    0 0 0.12em rgba(0, 0, 0, 0.7), 0 0 0.3em rgba(0, 0, 0, 0.35),
    0 0 2.5rem rgba(92, 255, 157, 0.7), 0 0.4rem 0 rgba(0, 0, 0, 0.35);
}

/* The line under it. It was 11px of spaced-out pale capitals straight on the
   arena — on a phone "Marked on the map" read as "market is on". Now it is
   white, bold, sentence case, on its own dark pill, and it holds still. */
.announce__sub {
  max-width: min(86vw, 34rem);
  padding: 0.3em 0.95em;
  border-radius: 999px;
  background: rgba(6, 12, 26, 0.78);
  border: 1px solid rgba(160, 200, 255, 0.28);
  font-size: clamp(13px, 3.6vmin, 20px);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: announceSubIn 0.25s ease-out both;
}
.announce__sub:empty { display: none; }
@keyframes announceSubIn {
  from { opacity: 0; transform: translateY(0.3rem); }
  to   { opacity: 1; transform: none; }
}

/* Gas announcements are a threat, not news — purple like the gas itself. */
.announce.is-gas .announce__big {
  color: #c48bff;
  text-shadow:
    0 0 0.12em rgba(20, 0, 40, 0.8), 0 0 0.3em rgba(20, 0, 40, 0.4),
    0 0 2.5rem rgba(180, 107, 255, 0.75), 0 0.4rem 0 rgba(0, 0, 0, 0.4);
}
.announce.is-gas .announce__sub {
  color: #f3e9ff;
  background: rgba(44, 12, 78, 0.85);
  border-color: rgba(196, 139, 255, 0.6);
}

/* The gas warning FLASHES for two seconds instead of doing the one-shot pop.
   It also has to hold still while it does: the pop animation ends on scale(1.3)
   with the text still in flow, which pushed the big word down onto the subtitle
   and left the two overlapping. */
.announce.is-gas.is-pop .announce__big {
  animation: gasFlash 0.4s steps(1, end) 5 both;
}
/* Only the big word flashes; the line you have to read stays put. */

@keyframes gasFlash {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1); opacity: 0.15; }
  100% { transform: scale(1); opacity: 1; }
}

/* Breathing room so a two-line announcement never stacks on itself. */
.announce { gap: 0.55rem; }
.announce__big { margin-bottom: 0.1rem; }

.announce.is-pop .announce__big { animation: announcePop 0.9s ease-out forwards; }

@keyframes announcePop {
  0%   { transform: scale(0.4); opacity: 0; }
  25%  { transform: scale(1.12); opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Toasts sit above the pause + touch controls so they never cover them */
.toast-stack {
  position: absolute;
  bottom: calc(var(--safe-b) + 5.8rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  max-width: min(80vw, 520px);
  z-index: 15;
}

/* Sized off the screen, not rem: rem is pinned at 9px on landscape phones,
   which made a toast 7px — unreadable in the middle of a fight. */
.toast {
  padding: 0.4em 1.1em;
  border-radius: var(--r-pill);
  background: rgba(5, 9, 18, 0.86);
  border: 1px solid var(--c-stroke-strong);
  font-size: clamp(12px, 3.3vmin, 17px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  animation: toastIn 0.3s ease-out;
}

.toast--good { border-color: var(--c-primary); color: var(--c-primary); }
.toast--warn { border-color: var(--c-gold); color: var(--c-gold); }
.toast--bad  { border-color: var(--c-danger); color: var(--c-danger); }

.toast--card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-color: #5cff9d;
  color: #eaf2ff;
  font-size: clamp(13px, 3.8vmin, 19px);
  padding: 0.7em 1.1em;
  animation: toastCardPop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(8, 24, 18, 0.92);
  box-shadow: 0 0 0 2px rgba(92, 255, 157, 0.35);
}
.toast__icon { font-size: 1.6rem; line-height: 1; }
@keyframes toastCardPop {
  0%   { transform: translateY(18px) scale(0.7); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(0.8rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Screen edge feedback: gas damage, lava proximity */
.vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  box-shadow: inset 0 0 10rem rgba(180, 107, 255, 0.85);
}

/* Live audio readout (?audio). Sits under the minimap, out of the play area. */
/* Bottom-left: the only corner that is free on BOTH the menu (mode cards top
   right, profile top left) and in game (minimap top right, top-5 top left).
   It sits over the joystick zone, which is why pointer-events stays off. */
.audio-panel {
  position: fixed;
  bottom: calc(var(--safe-b) + 0.6rem);
  left: calc(var(--safe-l) + 0.6rem);
  z-index: 200;
  margin: 0;
  padding: 0.45rem 0.6rem;
  max-width: min(46vw, 22rem);
  border-radius: 0.4rem;
  background: rgba(4, 8, 16, 0.78);
  border: 1px solid rgba(126, 168, 255, 0.28);
  font-family: ui-monospace, "Roboto Mono", monospace;
  font-size: clamp(8px, 1.5vmin, 11px);
  line-height: 1.45;
  color: #bfe3ff;
  white-space: pre;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
/* TEMPORARY bug probe — see index.html. Placed on the minimap's corner by
   probe.js; px sizes so it stays tappable on a landscape phone. */
.probe-btn {
  position: fixed;
  z-index: 210;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(10, 22, 40, 0.8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.probe-btn[hidden], .probe-panel[hidden] { display: none; }
.probe-panel {
  position: fixed;
  inset: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 8px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 8px);
  z-index: 220;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(6, 12, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: auto;
}
.probe-panel__text {
  flex: 1 1 auto;
  margin: 0;
  overflow: auto;
  font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace;
  color: #dfe8f5;
  white-space: pre-wrap;
}
.probe-panel .btn { align-self: flex-end; }
.audio-panel b { color: #5cff9d; font-weight: 700; }
.audio-panel i { color: #ff8a8a; font-style: normal; font-weight: 700; }

.vignette.is-gas    { opacity: 1; animation: vignettePulse 1.4s ease-in-out infinite; }
.vignette.is-danger { opacity: 1; box-shadow: inset 0 0 10rem rgba(255, 77, 109, 0.85); }

@keyframes vignettePulse {
  50% { opacity: 0.45; }
}

.icon-btn--pause {
  position: absolute;
  bottom: calc(var(--safe-b) + 0.7rem);
  left: calc(var(--safe-l) + 0.75rem);
  top: auto;
  transform: none;
  width: 2.3rem;
  height: 2.3rem;
  font-size: 0.75rem;
  pointer-events: auto;
  background: rgba(5, 9, 18, 0.35);
  border: 1px solid rgba(126, 168, 255, 0.2);
  z-index: 16;
}

/* --------------------------------------------------------------------------
   9. TOUCH CONTROLS
   -------------------------------------------------------------------------- */
.controls {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* Left half of the screen captures joystick drags */
.joy-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 48%;
  pointer-events: auto;
  touch-action: none;
}

/* Mirrored layout when the player picks "right" in Settings */
.controls.is-flipped .joy-zone { left: auto; right: 0; }
.controls.is-flipped .action-cluster {
  right: auto;
  left: calc(var(--safe-l) + 1.6rem);
  align-items: flex-start;
}
/* Mirror BOOST's offset too, or a left-handed layout pushes it off-centre. */
.controls.is-flipped .boost-btn {
  margin-right: 0;
  margin-left: calc(var(--btn-skill) * 0.7);
}

/* Dynamic joystick: positioned by JS at the touch point */
.joystick {
  position: absolute;
  left: 20%;
  bottom: 18%;
  width: calc(var(--joy-size) * var(--joy-scale));
  height: calc(var(--joy-size) * var(--joy-scale));
  transform: translate(-50%, 50%);
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.joystick.is-active { opacity: 1; transform: translate(-50%, -50%); }

.joystick__base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 255, 157, 0.08) 0%, rgba(5, 9, 18, 0.35) 70%);
  border: 2px solid rgba(126, 168, 255, 0.28);
}

.joystick__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), rgba(92, 255, 157, 0.55) 55%, rgba(18, 160, 101, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--glow-primary);
}

/* Right side: boost raised (bigger, up+left), skills under.
   Laid out with flex instead of four absolute offsets per breakpoint, so the
   spacing stays correct at whatever size the tokens resolve to. column-reverse
   keeps the DOM order (skills, then boost) painting as boost-over-skills. */
.action-cluster {
  position: absolute;
  right: calc(var(--safe-r) + 1.6rem);
  bottom: calc(var(--safe-b) + 1.2rem);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--btn-gap);
  pointer-events: none;
}

.action-cluster > * { pointer-events: auto; }

.skill-row {
  display: flex;
  gap: var(--btn-gap);
  /* The card name hangs below its button; this keeps it off the screen edge. */
  padding-bottom: clamp(10px, 2vmin, 14px);
  pointer-events: none;
}
.skill-row > * { pointer-events: auto; }

.boost-btn {
  position: relative;
  /* Keeps the original up-and-left offset from the skill row, in proportion
     rather than as a fixed rem that only looked right on one screen. */
  margin-right: calc(var(--btn-skill) * 0.7);
  display: grid;
  place-items: center;
  width: var(--btn-boost);
  height: var(--btn-boost);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.18), rgba(53, 214, 255, 0.16) 50%, rgba(10, 60, 90, 0.22));
  border: 2px solid rgba(53, 214, 255, 0.42);
  font-family: var(--font-display);
  font-size: clamp(11px, 2.9vmin, 18px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(230, 248, 255, 0.92);
  box-shadow: 0 0 1.4rem rgba(53, 214, 255, 0.22);
  opacity: 0.72;
  backdrop-filter: blur(3px);
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.boost-btn:active,
.boost-btn.is-held {
  transform: scale(0.94);
  opacity: 0.9;
  box-shadow: 0 0 2.4rem rgba(53, 214, 255, 0.55);
}

.boost-btn__ring {
  position: absolute;
  inset: -0.4rem;
  border-radius: 50%;
  border: 2px solid rgba(53, 214, 255, 0.35);
  animation: ringPulse 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes ringPulse {
  0%   { transform: scale(0.92); opacity: 0.9; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* Skill cards: horizontal row under the raised boost button.
   Sized from --btn-skill (>= 48px) instead of 3.9rem, which resolved to 35px
   on every phone — under the platform minimum for a touch target. */
.skill-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--btn-skill);
  height: var(--btn-skill);
  border-radius: 50%;
  background: rgba(5, 9, 18, 0.45);
  border: 2px solid var(--c-stroke);
  backdrop-filter: blur(4px);
  transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Scales with the button so the glyph fills it the same way at every size. */
.skill-btn__icon { font-size: calc(var(--btn-skill) * 0.44); line-height: 1; }

.skill-btn__label {
  position: absolute;
  top: 100%;
  margin-top: 0.15em;
  /* Was 0.52rem — 4.7px on a phone, which is not a readable label. */
  font-size: clamp(8px, 1.6vmin, 11px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  white-space: nowrap;
}

/* Radial cooldown sweep, driven by the --cd custom property (0 -> 1) */
.skill-btn__cd {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(rgba(5, 9, 18, 0.82) calc(var(--cd, 0) * 360deg), transparent 0);
  pointer-events: none;
}

.skill-btn.is-locked { opacity: 0.35; }
.skill-btn.is-locked .skill-btn__icon { color: var(--c-text-faint); }

.skill-btn.is-ready {
  border-color: var(--c-primary);
  box-shadow: 0 0 1rem rgba(92, 255, 157, 0.45);
}

.skill-btn.is-passive { border-color: var(--c-gold); box-shadow: 0 0 0.8rem rgba(255, 197, 61, 0.3); }
.skill-btn.is-passive .skill-btn__label { color: var(--c-gold); }

.skill-btn.is-active-now {
  border-color: var(--c-cyan);
  box-shadow: 0 0 1.6rem rgba(53, 214, 255, 0.75);
  animation: skillActive 0.8s ease-in-out infinite;
}

.skill-btn.is-spent {
  opacity: 0.38;
  filter: grayscale(0.6);
  border-color: rgba(255, 255, 255, 0.18);
}
.skill-btn.is-spent .skill-btn__label { color: var(--c-text-faint); }

@keyframes skillActive {
  50% { box-shadow: 0 0 2.4rem rgba(53, 214, 255, 1); }
}

.skill-btn:active { transform: scale(0.9); }

.skill-btn.shape-scissors.is-ready,
.skill-btn.shape-scissors.is-active-now { border-color: #ff7a9a; }
.skill-btn.shape-burst.is-ready { border-color: #ff8a4a; }
.skill-btn.shape-titan.is-ready { border-color: #c9b28a; }

/* --------------------------------------------------------------------------
   10. MATCH END SCREEN
   -------------------------------------------------------------------------- */
/* Sized in vmin/px like the death panel: in rem (9px on a landscape phone)
   this screen came out a 360px column of 6px labels and thin buttons. */
.result {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2.4vmin, 16px);
  width: min(88vw, 660px);
}

.result__placement { display: flex; align-items: baseline; gap: 0.8rem; animation: announcePopIn 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes announcePopIn {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.result__rankNum {
  font-family: var(--font-display);
  font-size: clamp(40px, 14vmin, 92px);
  font-weight: 800;
  line-height: 1;
  color: var(--c-gold);
  text-shadow: 0 0 2.2rem rgba(255, 197, 61, 0.55);
}

.result__rankTitle {
  font-family: var(--font-display);
  font-size: clamp(14px, 4.4vmin, 26px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-text-dim);
}

/* Not a win / not a new best. uiManager toggles it on the screen element —
   the rule used to target .result, so it never applied. */
#screen-result.is-defeat .result__rankNum { color: var(--c-text); text-shadow: none; }

.result__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.8vmin, 12px);
  width: 100%;
}

.result__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding: clamp(6px, 2vmin, 12px) 0.4rem;
  border-radius: var(--r-md);
  background: var(--c-panel);
  border: 1px solid var(--c-stroke);
}

.result__k { font-size: clamp(10px, 2.8vmin, 13px); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-dim); }
.result__v { font-family: var(--font-num); font-size: clamp(17px, 5.2vmin, 28px); }

.result__cards { display: flex; gap: 0.5rem; min-height: 0.5rem; }

.result__xp { width: 100%; }

.result__xpHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  font-size: clamp(11px, 3vmin, 14px);
}

.result__xpTier { color: var(--c-text-dim); letter-spacing: 0.08em; }
.result__xpGain { color: var(--c-primary); font-weight: 700; font-family: var(--font-num); }

.rankup {
  margin-top: 0.3em;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(14px, 4.4vmin, 24px);
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  text-shadow: 0 0 1.6rem rgba(255, 197, 61, 0.7);
  animation: rankUpGlow 1.2s ease-in-out infinite;
}

@keyframes rankUpGlow {
  50% { transform: scale(1.06); }
}

.result__actions { display: flex; gap: clamp(8px, 2.4vmin, 14px); width: min(100%, 520px); }
.result__actions .btn {
  flex: 1 1 0;
  min-height: clamp(42px, 12vmin, 62px);
  padding: 0 1em;
  font-size: clamp(13px, 4vmin, 20px);
}
.result__actions .btn .btn__text { font-size: inherit; }
.result__actions .btn--play { flex-grow: 1.4; }

/* --------------------------------------------------------------------------
   11. MODALS
   -------------------------------------------------------------------------- */
.modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding:
    calc(var(--safe-t) + 0.8rem)
    calc(var(--safe-r) + 0.8rem)
    calc(var(--safe-b) + 0.8rem)
    calc(var(--safe-l) + 0.8rem);
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 10, 0.72);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal__box {
  position: relative;
  width: min(100%, 34rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-lg);
  background: var(--c-panel-solid);
  border: 1px solid var(--c-stroke-strong);
  box-shadow: var(--shadow-panel);
  overflow-y: auto;
  /* Modal content is the only scrollable region */
  touch-action: pan-y;
  overscroll-behavior: contain;
  animation: modalIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal__box--wide   { width: min(100%, 52rem); }
.modal__box--narrow { width: min(100%, 22rem); }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(1.2rem) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.modal__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modal__note { font-size: 0.7rem; color: var(--c-text-faint); text-align: center; }

/* --- Leaderboard --- */
.lb { display: flex; flex-direction: column; gap: 0.28rem; }
/* "Loading…", "No scores yet", "Can't reach the server". */
.lb__empty { list-style: none; padding: 0.7rem 0.4rem; text-align: center; color: var(--c-text-dim); font-size: clamp(12px, 3.4vmin, 15px); }
.lb-past__title[hidden] { display: none; }

.lb__row,
.lb__self {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  font-size: 0.85rem;
}

.lb__pos { font-family: var(--font-num); font-weight: 700; color: var(--c-text-faint); text-align: center; }
.lb__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__tier { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-faint); }
.lb__score { font-family: var(--font-num); color: var(--c-gold); }

.lb__row--1 { background: linear-gradient(90deg, rgba(255, 197, 61, 0.2), transparent); border-color: rgba(255, 197, 61, 0.45); }
.lb__row--2 { background: linear-gradient(90deg, rgba(201, 212, 227, 0.16), transparent); border-color: rgba(201, 212, 227, 0.35); }
.lb__row--3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.16), transparent); border-color: rgba(205, 127, 50, 0.35); }
.lb__row--1 .lb__pos { color: var(--c-gold); }

.lb__self {
  margin-top: 0.3rem;
  background: rgba(92, 255, 157, 0.12);
  border-color: var(--c-primary);
}

/* --- Skill codex grid --- */
.codex {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
}

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.7rem 0.7rem;
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.25));
  border: 1px solid var(--c-stroke);
  overflow: hidden;
}

.gcard[hidden] { display: none; }

.gcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.gcard[data-cat="attack"]::before   { background: var(--c-danger); }
.gcard[data-cat="defense"]::before  { background: var(--c-cyan); }
.gcard[data-cat="movement"]::before { background: var(--c-primary); }
.gcard[data-cat="economy"]::before  { background: var(--c-gold); }

/* px floors, not rem: rem is 9px on a landscape phone and this list came out
   at 5–6px there. */
.gcard__cat {
  font-size: clamp(10px, 2.6vmin, 12px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-faint);
}

.gcard__icon { font-size: clamp(22px, 6vmin, 30px); line-height: 1.1; }
.gcard__name { font-size: clamp(14px, 3.8vmin, 17px); font-weight: 700; letter-spacing: 0.02em; margin: 0; }

.gcard__type {
  align-self: flex-start;
  padding: 0.15em 0.55em;
  border-radius: var(--r-pill);
  font-size: clamp(10px, 2.6vmin, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gcard__type--active  { background: rgba(53, 214, 255, 0.18); color: var(--c-cyan); }
.gcard__type--passive { background: rgba(255, 197, 61, 0.18); color: var(--c-gold); }

.gcard__desc { margin: 0; font-size: clamp(12px, 3.2vmin, 14px); line-height: 1.4; color: var(--c-text-dim); }
.gcard__where { margin-top: auto; font-size: clamp(10px, 2.6vmin, 12px); font-weight: 700; color: var(--c-gold); }

/* --- Profile --- */
.profile { display: flex; align-items: center; gap: 0.9rem; }

.profile__avatar {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  font-size: 1.8rem;
  background: linear-gradient(140deg, var(--c-primary), var(--c-primary-dark));
}

.profile__info { display: flex; flex-direction: column; }
.profile__name { font-size: 1.1rem; }
.profile__tier { font-size: 0.78rem; color: var(--c-gold); letter-spacing: 0.1em; }

.skins { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.skin {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--skin-a), var(--skin-b));
  border: 2px solid transparent;
  transition: transform 0.12s ease, border-color 0.18s ease;
}

.skin:active { transform: scale(0.9); }
.skin.is-selected { border-color: #fff; box-shadow: 0 0 0.9rem rgba(255, 255, 255, 0.4); }

/* --- Settings --- */
.settings { display: flex; flex-direction: column; }

.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(126, 168, 255, 0.1);
}

.settings__row:last-child { border-bottom: 0; }
.settings__row[hidden] { display: none; }
.settings__label { font-size: 0.88rem; color: var(--c-text-dim); }

/* --- Death panel — the match keeps playing, zoomed out, behind it ---
   Sized in vmin, not rem: rem is pinned at 9px on landscape phones, which is
   why the old panel came out 190px wide with 7px text and thin buttons. */
.modal--death {
  place-items: center;
}
.modal--death .modal__backdrop {
  background: radial-gradient(ellipse at center, rgba(4, 10, 22, 0.38) 0%, rgba(4, 10, 22, 0.1) 75%);
  backdrop-filter: none;
  pointer-events: none;
}
.death-panel {
  width: min(84vw, 760px);
  max-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(12px, 4vmin, 28px);
  padding: clamp(12px, 4vmin, 26px) clamp(14px, 4.5vmin, 30px);
  border-radius: clamp(14px, 4vmin, 24px);
  /* See-through enough to watch the match go on behind it (user, 2026-09-26:
     "biraz daha transparan"). No backdrop blur: it would cost every frame. */
  background: rgba(10, 16, 30, 0.7);
  border: 1px solid rgba(120, 160, 220, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.death-panel__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1.4vmin, 10px);
  text-align: center;
  min-width: 0;
}
.death__label {
  font-size: clamp(11px, 3vmin, 15px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.death__big {
  font-family: var(--font-display);
  font-size: clamp(42px, 16vmin, 104px);
  font-weight: 800;
  line-height: 0.95;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.death__stats {
  margin: 0;
  font-size: clamp(13px, 3.8vmin, 19px);
  color: var(--c-text-dim);
}
.death__stats b { color: var(--c-text); }
.death__new { color: var(--c-gold) !important; letter-spacing: 0.08em; }
.death__why { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4em; }
.death__cause { font-size: clamp(12px, 3.4vmin, 16px); color: var(--c-text-dim); }
.death__badge {
  padding: 0.25em 0.75em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: clamp(11px, 3.2vmin, 15px);
  text-align: center;
  text-transform: uppercase;
  background: rgba(255, 70, 70, 0.2);
  color: #ff8a8a;
  border: 1px solid rgba(255, 100, 100, 0.55);
}
.death__badge--lava {
  background: rgba(255, 120, 20, 0.25);
  color: #ffd080;
  border-color: rgba(255, 140, 40, 0.7);
}
.death__badge--obstacle {
  background: rgba(255, 40, 40, 0.25);
  color: #ffb0b0;
  border-color: rgba(255, 80, 80, 0.7);
}
.death__badge--snake {
  background: rgba(255, 80, 160, 0.2);
  color: #ffb0d8;
  border-color: rgba(255, 120, 180, 0.55);
}
.death__badge--portal,
.death__badge--wall,
.death__badge--gas {
  background: rgba(100, 160, 255, 0.18);
  color: #b8d4ff;
  border-color: rgba(120, 180, 255, 0.5);
}
/* Gold this run has earned so far — paid when you leave. */
.death-gold {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(2px, 1vmin, 8px);
  padding: 0.45em 0.9em 0.45em 0.5em;
  border-radius: 999px;
  border: 1px solid var(--gold-edge, rgba(255, 206, 102, 0.5));
  background: linear-gradient(165deg, rgba(70, 50, 14, 0.9) 0%, rgba(30, 22, 8, 0.92) 100%);
  text-align: left;
}
.death-gold__coin { display: grid; place-items: center; }
.death-gold__body { display: flex; flex-direction: column; min-width: 0; }
.death-gold__v {
  font-family: var(--font-num);
  font-size: clamp(17px, 5.2vmin, 28px);
  font-weight: 800;
  line-height: 1.05;
  color: #ffe08a;
}
.death-gold__note { font-size: clamp(10px, 2.8vmin, 14px); color: #e1c68c; }
.death-gold.is-zero .death-gold__v { color: #c9b287; }
.death-gold__bal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  padding-left: 0.7em;
  border-left: 1px solid rgba(255, 206, 102, 0.3);
}
.death-gold__bal small { font-size: clamp(10px, 2.6vmin, 12px); letter-spacing: 0.12em; text-transform: uppercase; color: #cfb27a; white-space: nowrap; }
.death-gold__bal b {
  font-family: var(--font-num);
  font-size: clamp(17px, 5.2vmin, 28px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--gold-ink, #ffe08a);
  font-variant-numeric: tabular-nums;
}
/* The run's gold landing in the wallet: the earned line hands its number over
   and coins fly to the balance, which bumps as each lands (uiManager.flyCoins). */
.death-gold.is-landing .death-gold__v { animation: goldHandOver 0.9s ease-out both; }
.coin-fly { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.coin-fly__c {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: var(--coin-img, radial-gradient(circle, #ffe27a 55%, #c98a10 60%)) center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 200, 80, 0.8));
  will-change: transform;
}
/* Leaving while the gold counts in: the buttons wait for it. */
.death-panel.is-leaving .death-panel__act { pointer-events: none; opacity: 0.55; transition: opacity 0.2s; }
@keyframes goldHandOver {
  0% { opacity: 1; transform: translateX(0); }
  45% { opacity: 0.35; transform: translateX(0.5em); }
  100% { opacity: 0.6; transform: translateX(0); }
}

.death-panel__act {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.4vmin, 16px);
  min-width: 0;
}
.death-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1.8vmin, 12px);
}
.dbtn {
  min-height: clamp(38px, 11vmin, 58px);
  padding: 0 0.6em;
  border-radius: clamp(10px, 2.6vmin, 16px);
  border: 1px solid rgba(126, 168, 255, 0.35);
  background: linear-gradient(180deg, rgba(40, 60, 96, 0.95), rgba(20, 32, 56, 0.95));
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(13px, 3.8vmin, 19px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0.2em 0 rgba(5, 10, 22, 0.9);
}
.dbtn:active { transform: translateY(0.12em); box-shadow: none; }
.dbtn--play {
  border-color: rgba(140, 255, 200, 0.5);
  background: linear-gradient(180deg, #5cf0a8 0%, #22a86c 100%);
  color: #062418;
  box-shadow: 0 0.2em 0 #146048;
}
.dbtn--menu { color: #ffb3c1; border-color: rgba(255, 110, 140, 0.4); }
/* Without Continue on offer, Play again is the big button and the other
   three share one row under it. */
.death-panel:not(.has-continue) .death-actions { grid-template-columns: repeat(3, 1fr); }
.death-panel:not(.has-continue) .dbtn--play {
  grid-column: 1 / -1;
  min-height: clamp(48px, 15vmin, 80px);
  font-size: clamp(16px, 5vmin, 26px);
}
/* Duo, teammate still in: "Watch <name>" takes the big slot, Play again joins the row. */
.dbtn--mate {
  grid-column: 1 / -1;
  min-height: clamp(48px, 15vmin, 80px);
  font-size: clamp(16px, 5vmin, 26px);
  border-color: rgba(125, 255, 176, 0.6);
  background: linear-gradient(180deg, rgba(40, 150, 110, 0.95), rgba(18, 92, 66, 0.95));
  color: #eafff3;
}
.dbtn--mate[hidden] { display: none; }
.death-panel.has-mate .death-actions { grid-template-columns: repeat(4, 1fr); }
.death-panel.has-mate:not(.has-continue) .dbtn--play {
  grid-column: auto;
  min-height: clamp(38px, 11vmin, 58px);
  font-size: inherit;
}
/* Watching the teammate: who, and the way back to the death panel. */
.spectate-bar {
  position: absolute;
  left: 50%;
  bottom: clamp(64px, 17vmin, 96px);
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.5em 0.6em 0.5em 1.1em;
  border-radius: 999px;
  border: 1px solid rgba(125, 255, 176, 0.55);
  background: rgba(8, 30, 24, 0.78);
  color: #eafff3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(13px, 3.8vmin, 18px);
  letter-spacing: 0.04em;
  pointer-events: auto;
}
.spectate-bar[hidden] { display: none; }
.spectate-bar__back {
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: rgba(125, 255, 176, 0.9);
  color: #062418;
  text-transform: uppercase;
}

@media (orientation: portrait) {
  .death-panel { grid-template-columns: 1fr; width: min(92vw, 460px); }
}
.death-recap {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
  padding: 0.55rem 1.2rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(180, 20, 40, 0.72);
  border: 1px solid rgba(255, 120, 120, 0.65);
  animation: deathRecapPulse 1s ease-in-out infinite;
}
.death-recap[hidden] { display: none !important; }
@keyframes deathRecapPulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}
.pause__actions .btn { width: 100%; }

/* --------------------------------------------------------------------------
   12. ORIENTATION GUARD + FPS
   -------------------------------------------------------------------------- */
.rotate {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: var(--c-bg-0);
  text-align: center;
  padding: 2rem;
  pointer-events: auto;
}

.rotate__icon { font-size: 4rem; animation: rotateHint 2.2s ease-in-out infinite; }

@keyframes rotateHint {
  0%, 40%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

.rotate__text { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.14em; text-transform: uppercase; }
.rotate__sub { font-size: 0.85rem; color: var(--c-text-faint); }

/* Rotate gate disabled for now — it blocked Simple Browser clicks.
   Re-enable later for real phones only. */
.rotate { display: none !important; }

/* Bottom centre. It used to sit under the score, where it competed with the
   one number the player actually reads. */
.fps {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-b) + 0.4rem);
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-num);
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--c-primary);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.fps__main { display: flex; align-items: baseline; gap: 0.28rem; }
.fps__main b { font-size: 1.05rem; font-weight: 800; }
.fps__main i { font-style: normal; color: rgba(255, 255, 255, 0.62); }
.fps__detail { color: rgba(255, 255, 255, 0.5); }
/* Colour tracks the 60 FPS rule: green = locked, amber = slipping, red = bad. */
.fps.is-good b { color: var(--c-primary); }
.fps.is-warn b { color: var(--c-gold, #ffc53d); }
.fps.is-bad  b { color: var(--c-danger, #ff5470); }

.fps[hidden] { display: none; }

/* --------------------------------------------------------------------------
   13. ADAPTIVE TWEAKS
   -------------------------------------------------------------------------- */

/* Very short landscape screens (e.g. 360x640 phones rotated): tighten the HUD */
@media (orientation: landscape) and (max-height: 380px) {
  .card-slot { width: 2.8rem; height: 3.5rem; }
  /* Control sizes deliberately NOT overridden here — --btn-skill / --btn-boost
     already shrink with vmin, and this block used to fight them. */
  .toast-stack { bottom: calc(var(--safe-b) + 4.6rem); }
}

/* Menu falls back to a single column on narrow viewports */
@media (max-width: 620px) {
  .menu { grid-template-columns: 1fr; gap: 0.7rem; }
  .menu__col--left,
  .menu__col--right { display: none; }
  .result__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Respect the OS "reduce motion" preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   HOME MENU — premium arena (dark glass + free SVG mesh pattern)
   Pattern inspired by Hero Patterns / css-pattern.com (pure CSS/SVG, no assets).
   Buttons: clean 3D lip depth (game-UI style), no noisy hatch fill.
   ========================================================================== */
#screen-menu {
  padding: 0;
  overflow: hidden;
  background-color: #07141f;
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 8%, rgba(45, 180, 160, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 88% 92%, rgba(30, 110, 170, 0.25), transparent 52%),
    radial-gradient(ellipse 50% 40% at 70% 20%, rgba(255, 196, 90, 0.08), transparent 60%),
    /* Free-to-use SVG hex mesh (inline; no external download) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1' d='M28 66L0 50V16L28 0l28 16v34L28 66z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1' d='M28 0v34L0 50v34l28 16 28-16V50L28 34'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 56px 100px;
}
#screen-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 18%, transparent 72%, rgba(0,0,0,0.35) 100%),
    radial-gradient(ellipse 90% 70% at 50% 40%, transparent 35%, rgba(0, 10, 20, 0.45) 100%);
}
#screen-menu::after {
  display: none;
}

.home {
  --home-ink: #e8f4fb;
  --home-muted: #8eb0c6;
  --home-glass: rgba(14, 32, 48, 0.72);
  --home-glass-edge: rgba(140, 210, 240, 0.28);
  --home-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.35);
  --home-press: 0.22rem;
  --home-card: rgba(18, 40, 58, 0.82);
  --home-lip: #0a2030;
  --home-accent: #3ecf9a;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding:
    calc(var(--safe-t) + 2.2vh)
    calc(var(--safe-r) + 2.4vw)
    calc(var(--safe-b) + 1.8vh)
    calc(var(--safe-l) + 2.4vw);
  gap: 1.6vh;
  color: var(--home-ink);
  box-sizing: border-box;
  overflow: hidden;
}

/* --- Top bar: ~9–11% height feel --- */
.home__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.4rem, 1.5vw, 1rem);
  min-height: max(2.6rem, 10vmin);
  width: 100%;
}
.home__topLeft {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
}
.home__chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(38vw, 15rem);
  border: 1px solid var(--home-glass-edge);
  border-radius: 999rem;
  padding: 0.28rem 1rem 0.28rem 0.28rem;
  cursor: pointer;
  color: inherit;
  background: linear-gradient(165deg, rgba(30, 58, 78, 0.92) 0%, rgba(14, 32, 48, 0.88) 100%);
  box-shadow:
    0 0.32rem 0 var(--home-lip),
    0 0.55rem 1.2rem rgba(0, 0, 0, 0.35),
    inset 0 0.08rem 0 rgba(160, 220, 255, 0.18);
  backdrop-filter: blur(12px);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.home__chip:active {
  transform: translateY(0.16rem);
  box-shadow:
    0 0.06rem 0 var(--home-lip),
    inset 0 0.12rem 0.2rem rgba(0, 0, 0, 0.35);
}
.home__avatar {
  width: max(2.4rem, 9.5vmin);
  height: max(2.4rem, 9.5vmin);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #5cff9d);
  box-shadow: 0 0.15rem 0.45rem rgba(20, 60, 90, 0.22);
  flex: 0 0 auto;
}
.home__who {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  text-align: left;
  min-width: 0;
}
.home__who b {
  font-size: clamp(0.95rem, 3.4vmin, 1.15rem);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home__who small {
  font-size: clamp(0.65rem, 2.4vmin, 0.8rem);
  color: var(--home-muted);
  font-weight: 600;
}
.home__friendBtn {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: max(2.45rem, 9.4vmin);
  height: max(2.45rem, 9.4vmin);
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(100, 230, 170, 0.42);
  cursor: pointer;
  color: #c8ffe8;
  background: linear-gradient(165deg, rgba(28, 78, 62, 0.95) 0%, rgba(14, 42, 36, 0.92) 100%);
  box-shadow:
    0 0.28rem 0 #0a281e,
    0 0.45rem 0.9rem rgba(0, 0, 0, 0.32),
    inset 0 0.08rem 0 rgba(180, 255, 220, 0.2);
  backdrop-filter: blur(10px);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.home__friendBtn:active {
  transform: translateY(0.14rem);
  box-shadow:
    0 0.05rem 0 #0a281e,
    inset 0 0.1rem 0.16rem rgba(0, 0, 0, 0.3);
}
.home__friendBtn__svg {
  width: 1.28rem;
  height: 1.28rem;
  display: block;
}
.home__topRight { display: flex; gap: 0.55rem; flex: 0 0 auto; }
.home__topRight .icon-btn,
.home-icon {
  width: max(2.8rem, 11vmin);
  height: max(2.8rem, 11vmin);
  border-radius: 0.85rem;
  color: var(--home-ink);
  border: 1px solid var(--home-glass-edge);
  font-size: clamp(1rem, 3.8vmin, 1.25rem);
  font-weight: 800;
  background: linear-gradient(165deg, rgba(36, 68, 92, 0.95) 0%, rgba(16, 36, 54, 0.92) 100%);
  box-shadow:
    0 0.28rem 0 var(--home-lip),
    0 0.45rem 0.9rem rgba(0, 0, 0, 0.35),
    inset 0 0.08rem 0 rgba(160, 220, 255, 0.16);
}
.home__topRight .icon-btn:active,
.home-icon:active {
  transform: translateY(0.14rem);
  box-shadow:
    0 0.05rem 0 var(--home-lip),
    inset 0 0.1rem 0.16rem rgba(0, 0, 0, 0.35);
}

/* --- Mid: studio / daily hub / modes --- */
.home__mid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(22%, 28%) minmax(26%, 34%) minmax(30%, 40%);
  column-gap: clamp(0.7rem, 2vw, 1.5rem);
  align-items: stretch;
  justify-content: space-between;
  min-height: 0;
  width: 100%;
  max-width: 96vw;
  margin: 0 auto;
}

/* Edit Snake studio panel */
.snake-studio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: clamp(0.5rem, 1.4vmin, 0.8rem) clamp(0.6rem, 1.6vmin, 0.9rem);
  border-radius: clamp(1rem, 2.8vmin, 1.35rem);
  background: linear-gradient(165deg, rgba(22, 48, 68, 0.92) 0%, rgba(12, 28, 42, 0.9) 100%);
  border: 1px solid var(--home-glass-edge);
  box-shadow:
    0 0.5rem 1.5rem rgba(0, 0, 0, 0.4),
    inset 0 0.08rem 0 rgba(140, 210, 240, 0.14);
  backdrop-filter: blur(14px);
  /* Deliberately no max-height / overflow / min-height here. As a grid item,
     `max-height:100%` + `overflow:hidden` collapsed the row to the preview
     stage and clipped the tabs + nickname away; `min-height:0` then zeroed the
     item's minimum contribution so the row collapsed again. The default
     `min-height:auto` is what makes the row reserve the real content height.
     .home__mid owns the scrolling. */
}
.snake-studio__head {
  width: 100%;
  text-align: left;
  padding: 0 0.15rem;
}
.snake-studio__eyebrow {
  display: block;
  font-size: clamp(0.58rem, 2vmin, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7ec8e8;
}
.snake-studio__title {
  margin: 0.1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.8vmin, 1.35rem);
  font-weight: 800;
  color: var(--home-ink);
  letter-spacing: -0.02em;
}
.snake-studio__stage {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: clamp(7.2rem, 22vmin, 11rem);
}
.snake-studio__glow {
  position: absolute;
  inset: 8% 4%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120, 200, 255, 0.28), transparent 70%);
  pointer-events: none;
}
.snake-studio__floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 10%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30, 70, 110, 0.22), transparent 70%);
  pointer-events: none;
}
.snake-studio__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  text-align: center;
}
.snake-studio__skinName {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.4vmin, 1.15rem);
  font-weight: 800;
  color: var(--home-ink);
}
.snake-studio__style {
  font-size: clamp(0.62rem, 2.2vmin, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6dffb0;
}
.snake-studio__hint {
  font-size: clamp(0.58rem, 2vmin, 0.68rem);
  color: var(--home-muted);
  font-weight: 600;
}

.home__snakeCanvas {
  width: 100%;
  max-width: 100%;
  height: clamp(8.2rem, 26vmin, 12rem);
  filter: drop-shadow(0 0.45rem 0.9rem rgba(8, 22, 40, 0.45));
  position: relative;
  z-index: 1;
}

.skins--home {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.38rem;
  width: 100%;
  padding: 0.15rem 0.1rem;
  max-height: none;
  overflow: visible;
}
.skins--home .skin {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  border-radius: 0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.15rem 0.4rem rgba(20, 50, 80, 0.18);
  cursor: pointer;
}
.skins--home .skin.is-selected {
  outline: 0.16rem solid #3ecf9a;
  outline-offset: 0.08rem;
  transform: scale(1.06);
}
/* A design tile: the design's own snake, drawn by the game's bead shader, on
   the water it swims in, with its name underneath. */
.skins--home .skin--design {
  position: relative;
  aspect-ratio: 2;
  background-color: #7fbcdc;
  background-size: cover;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
.skin__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.12rem 0.1rem 0.14rem;
  font-size: clamp(0.46rem, 1.6vmin, 0.56rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(to top, rgba(6, 22, 36, 0.78), rgba(6, 22, 36, 0));
  pointer-events: none;
}
.skin--rare { box-shadow: 0 0 0 0.12rem rgba(80, 160, 255, 0.55), 0 0.15rem 0.4rem rgba(20, 50, 80, 0.18); }
.skin--epic { box-shadow: 0 0 0 0.12rem rgba(240, 180, 60, 0.7), 0 0.15rem 0.45rem rgba(180, 120, 20, 0.25); }

.name-field--home {
  width: 100%;
  max-width: min(100%, 15rem);
  margin-top: 0.1rem;
}
.name-field--home .name-field__label {
  color: var(--home-muted);
  font-size: clamp(0.58rem, 2vmin, 0.68rem);
  letter-spacing: 0.12em;
}
.name-field--home .name-field__input {
  min-height: max(2.2rem, 8vmin);
  padding: 0.4rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(6, 18, 28, 0.7);
  border: 1px solid rgba(120, 200, 230, 0.28);
  color: var(--home-ink);
  font-weight: 700;
  font-size: clamp(0.88rem, 3vmin, 1.02rem);
  box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.35);
}
.name-field--home .name-field__input:focus {
  border-color: #3ecf9a;
  box-shadow: 0 0 0 0.22rem rgba(62, 207, 154, 0.22);
}

.home-hub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
  max-width: 22rem;
  justify-self: center;
}
.home-event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "tag title time"
    "tag sub time";
  column-gap: 0.55rem;
  row-gap: 0.08rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 196, 90, 0.28);
  background: linear-gradient(165deg, rgba(70, 48, 18, 0.72) 0%, rgba(28, 22, 12, 0.88) 100%);
}
.home-event__tag {
  grid-area: tag;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd27a;
}
.home-event__title {
  grid-area: title;
  font-size: clamp(0.82rem, 2.6vmin, 0.98rem);
  color: #fff4d8;
}
.home-event__sub {
  grid-area: sub;
  font-size: 0.68rem;
  color: #d2b07a;
}
.home-event__time {
  grid-area: time;
  font-family: var(--font-num);
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffe7a8;
}
.home-login, .home-quests {
  padding: 0.55rem 0.65rem 0.6rem;
  border-radius: 0.95rem;
  border: 1px solid var(--home-glass-edge);
  background: linear-gradient(165deg, rgba(22, 48, 68, 0.92) 0%, rgba(12, 28, 42, 0.9) 100%);
  box-shadow: inset 0 0.06rem 0 rgba(140, 210, 240, 0.12);
}
.home-login__head, .home-quests__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: var(--home-ink);
}
.home-coins {
  font-family: var(--font-num);
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffe08a;
  background: rgba(80, 55, 10, 0.45);
  border: 1px solid rgba(255, 210, 110, 0.3);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}
.home-coins::before { content: "● "; color: #ffc53d; }
.home-login__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.28rem;
  margin-bottom: 0.4rem;
}
.home-login__day {
  min-height: 2.15rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(120, 200, 230, 0.22);
  background: rgba(8, 22, 34, 0.7);
  color: var(--home-muted);
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}
.home-login__day small { font-size: 0.55rem; font-weight: 700; color: #7aa0b4; }
.home-login__day.is-done {
  background: rgba(22, 80, 58, 0.85);
  color: #b8ffd8;
  border-color: rgba(120, 255, 190, 0.35);
}
.home-login__day.is-today {
  outline: 2px solid #3ecf9a;
  color: #e8fff4;
}
.home-login__claim {
  width: 100%;
  min-height: 2.15rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(140, 255, 200, 0.4);
  background: linear-gradient(180deg, #4ae0a0 0%, #2aaa72 100%);
  color: #062418;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0.22rem 0 #146048;
}
.home-login__claim:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}
.home-login__claim:not(:disabled):active {
  transform: translateY(0.12rem);
  box-shadow: 0 0.05rem 0 #146048;
}
.home-quests__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.home-quest {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.45rem;
  align-items: center;
}
.home-quest__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--home-ink);
}
.home-quest__bar {
  grid-column: 1 / -1;
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(6, 18, 28, 0.7);
  overflow: hidden;
}
.home-quest__bar > i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, #3ecf9a, #7dffc2);
}
.home-quest__btn, .home-quest__prog {
  font-size: 0.68rem;
  font-weight: 800;
}
.home-quest__btn {
  border: 0;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  background: #3ecf9a;
  color: #062418;
  cursor: pointer;
}
.home-quest__btn:disabled {
  background: rgba(80, 110, 130, 0.35);
  color: #9bb4c4;
  cursor: default;
}
.home-quest__prog { color: var(--home-muted); }

/* Mode column */
.home__modes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.55rem, 1.8vh, 0.95rem);
  width: 100%;
  max-width: min(42vw, 28rem);
  justify-self: end;
  margin-right: 0;
}
.mode-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
  min-height: max(4.6rem, 18vmin);
  padding: clamp(0.65rem, 2vmin, 1rem) clamp(0.9rem, 2.6vmin, 1.25rem);
  border: 1px solid rgba(120, 200, 230, 0.32);
  border-radius: clamp(0.95rem, 2.8vmin, 1.25rem);
  cursor: pointer;
  color: var(--home-ink);
  background: linear-gradient(155deg, rgba(36, 72, 98, 0.95) 0%, rgba(18, 42, 62, 0.95) 100%);
  box-shadow:
    0 0.38rem 0 #061018,
    0 0.7rem 1.4rem rgba(0, 0, 0, 0.4),
    inset 0 0.1rem 0 rgba(160, 220, 255, 0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}
.mode-card:active {
  transform: translateY(0.26rem);
  box-shadow:
    0 0.08rem 0 #061018,
    0 0.25rem 0.55rem rgba(0, 0, 0, 0.35),
    inset 0 0.14rem 0.25rem rgba(0, 0, 0, 0.35);
}
.mode-card--br {
  color: #e8fff4;
  border-color: rgba(80, 220, 160, 0.4);
  background: linear-gradient(155deg, rgba(28, 90, 70, 0.95) 0%, rgba(16, 52, 42, 0.96) 100%);
  box-shadow:
    0 0.38rem 0 #062018,
    0 0.7rem 1.4rem rgba(0, 0, 0, 0.4),
    inset 0 0.1rem 0 rgba(140, 255, 200, 0.22);
}
.mode-card--br:active {
  box-shadow:
    0 0.08rem 0 #062018,
    0 0.25rem 0.55rem rgba(0, 0, 0, 0.35),
    inset 0 0.14rem 0.25rem rgba(0, 0, 0, 0.35);
}
.mode-card--br .mode-card__tag { color: #7dffc0; }
.mode-card--br .mode-card__desc { color: #a8dcc4; }
.mode-card--br .mode-card__go {
  background: rgba(255, 255, 255, 0.12);
  color: #b8ffe0;
}
.mode-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.mode-card__tag {
  font-size: clamp(0.62rem, 2.2vmin, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ec8e8;
}
.mode-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.6vmin, 1.7rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.mode-card__desc {
  font-size: clamp(0.68rem, 2.4vmin, 0.85rem);
  color: var(--home-muted);
  line-height: 1.35;
  font-weight: 600;
}
.mode-card__go {
  flex: 0 0 auto;
  width: max(2.5rem, 9.5vmin);
  height: max(2.5rem, 9.5vmin);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: #9ed8f0;
  font-size: clamp(0.75rem, 2.8vmin, 0.95rem);
}
.mode-card__icon { font-size: clamp(1.4rem, 5vmin, 1.85rem); line-height: 1; }

/* Centre leaderboard — big, clear Weekly / Monthly */
.lb-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(0.7rem, 2.2vmin, 1rem) clamp(0.85rem, 2.5vmin, 1.2rem);
  border-radius: clamp(1rem, 2.8vmin, 1.3rem);
  background: linear-gradient(155deg, rgba(90, 68, 28, 0.92) 0%, rgba(48, 36, 14, 0.94) 100%);
  border: 1px solid rgba(255, 210, 120, 0.35);
  box-shadow:
    0 0.38rem 0 #1a1206,
    0 0.7rem 1.35rem rgba(0, 0, 0, 0.4),
    inset 0 0.1rem 0 rgba(255, 230, 160, 0.2);
}
.lb-card__main {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.lb-card__title { color: #ffe9b0; }
.lb-card__sub { color: #d4b878; }
.lb-card__main {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.lb-card__ico {
  width: max(2.6rem, 10vmin);
  height: max(2.6rem, 10vmin);
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  font-size: clamp(1.25rem, 4.5vmin, 1.6rem);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0.08rem 0 rgba(255,255,255,0.9);
}
.lb-card__copy { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.lb-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.2vmin, 1.55rem);
  font-weight: 800;
  /* Was #5a3d08 — dark brown on the card's dark brown, so the word
     "Leaderboard" was effectively invisible on every screen size. */
  color: #ffe9b0;
  line-height: 1.05;
}
.lb-card__sub {
  font-size: clamp(0.68rem, 2.4vmin, 0.82rem);
  font-weight: 700;
  color: #d4b878;
}
.lb-card__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.lb-card__tab {
  min-height: max(2.55rem, 10vmin);
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 210, 120, 0.3);
  background: linear-gradient(180deg, rgba(70, 52, 20, 0.95) 0%, rgba(40, 30, 12, 0.95) 100%);
  color: #ffe9b0;
  font-weight: 800;
  font-size: clamp(0.88rem, 3.2vmin, 1.05rem);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 0.26rem 0 #1a1206,
    0 0.45rem 0.8rem rgba(0, 0, 0, 0.3),
    inset 0 0.08rem 0 rgba(255, 230, 160, 0.18);
}
.lb-card__tab--primary {
  background: linear-gradient(180deg, #e8c56a 0%, #c9a038 100%);
  color: #2a1c06;
  border-color: rgba(255, 240, 180, 0.55);
  box-shadow:
    0 0.28rem 0 #7a5a10,
    0 0.5rem 0.9rem rgba(0, 0, 0, 0.3),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.45);
}
.lb-card__tab:active {
  transform: translateY(0.16rem);
  box-shadow:
    0 0.05rem 0 #1a1206,
    inset 0 0.1rem 0.18rem rgba(0, 0, 0, 0.3);
}

.home__codexBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  align-self: stretch;
  min-height: max(2.4rem, 9vmin);
  padding: 0.4rem 1rem;
  border-radius: 999rem;
  border: 1px solid var(--home-glass-edge);
  color: var(--home-ink);
  font-weight: 800;
  font-size: clamp(0.78rem, 2.8vmin, 0.92rem);
  cursor: pointer;
  background: linear-gradient(165deg, rgba(36, 72, 98, 0.95) 0%, rgba(18, 42, 62, 0.95) 100%);
  box-shadow:
    0 0.28rem 0 var(--home-lip),
    0 0.5rem 1rem rgba(0, 0, 0, 0.35),
    inset 0 0.08rem 0 rgba(160, 220, 255, 0.16);
}
/* Skill Cards and Friends Room share the last row of the right column. */
.home__btnRow { display: flex; gap: 0.45rem; align-self: stretch; }
.home__btnRow .home__codexBtn { flex: 1 1 0; min-width: 0; white-space: nowrap; }

/* Team modal (Solo / Duo, your team, friends online) and the invite prompt.
   px/vmin sizes: rem is pinned at 9px on landscape phones. */
.team { display: flex; flex-direction: column; gap: 0.55rem; }
/* A short phone screen scrolls the window; it used to squash the Solo/Duo
   switch to 18 px under the slots instead (user's screenshot, 2026-10-07). */
.team > * { flex-shrink: 0; }
.team__size { align-self: center; }
.team__start { align-self: stretch; }
.team__start:disabled { filter: grayscale(0.7); opacity: 0.6; }
.add-friend__row[hidden] { display: none; }
.team__size .seg__btn { min-width: 5.5em; font-size: clamp(12px, 3.4vmin, 15px); font-weight: 800; }
.team__size .seg__btn:disabled { opacity: 0.45; }
.team__hint { margin: 0; font-size: clamp(12px, 3.4vmin, 15px); line-height: 1.35; color: var(--c-text-dim); text-align: center; }
.team__sub { margin: 0.2rem 0 0; font-size: clamp(11px, 3vmin, 13px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-faint); }
.team__slots, .team__friends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.team__friends { max-height: 11rem; overflow-y: auto; }
.team__slot, .team__friend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-stroke);
  font-size: clamp(12px, 3.4vmin, 15px);
}
.team__slot--empty { color: var(--c-text-faint); border-style: dashed; }
.team__slot--empty .team__name { white-space: normal; font-weight: 600; }
.team__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.team__tag { font-size: clamp(10px, 2.8vmin, 12px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-faint); }
.team__tag--lead { color: #ffd45c; }
.team__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #5d6b7c; flex: none; }
.team__dot--on { background: #3ee07f; box-shadow: 0 0 0.4rem rgba(62, 224, 127, 0.7); }
.team__dot--busy { background: #ffb347; }
/* A friend request for you to answer. */
.team__dot--req { background: #ff3b4e; box-shadow: 0 0 0.4rem rgba(255, 59, 78, 0.7); }
.team__friend--req { border-color: rgba(255, 59, 78, 0.45); }
.team__friend .btn { flex: none; }
.team__row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.team__code { margin: 0; text-align: center; font-size: clamp(12px, 3.4vmin, 15px); color: var(--c-text-dim); }
.team__code b { font-family: var(--font-num); font-size: 1.25em; letter-spacing: 0.14em; color: var(--c-text); }
.team__code[hidden] { display: none; }

/* A team invite waiting on Team: a red count on the button's corner. */
#btnTeam { position: relative; }
/* A friend has the game open: a green light after "Team · Duo". */
.online-dot {
  width: max(9px, 2.2vmin);
  height: max(9px, 2.2vmin);
  flex: none;
  border-radius: 50%;
  background: #3ee07f;
  box-shadow: 0 0 0 2px rgba(12, 28, 42, 0.9), 0 0 0.55rem rgba(62, 224, 127, 0.85);
  animation: online-breathe 2.4s ease-in-out infinite;
}
.online-dot[hidden] { display: none; }
@keyframes online-breathe {
  50% { box-shadow: 0 0 0 2px rgba(12, 28, 42, 0.9), 0 0 0.95rem rgba(62, 224, 127, 1); }
}
.notify-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.2rem;
  min-width: max(18px, 4.6vmin);
  height: max(18px, 4.6vmin);
  padding: 0 0.3em;
  border-radius: 999rem;
  display: grid;
  place-items: center;
  background: #ff3b4e;
  border: 2px solid #0c1c2a;
  color: #fff;
  font-family: var(--font-num);
  font-size: clamp(11px, 3vmin, 13px);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0.6rem rgba(255, 59, 78, 0.65);
  animation: notify-pulse 1.6s ease-in-out infinite;
}
.notify-badge[hidden] { display: none; }
@keyframes notify-pulse { 50% { transform: scale(1.12); } }

/* Your Duo teammate on the home screen, under your own snake. px/vmin sizes,
   as above: rem is pinned at 9px on landscape phones. */
.studio-mate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: max(2.6rem, 11vmin);
  padding: 0.25rem 0.55rem 0.25rem 0.3rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(125, 255, 176, 0.35);
  background: rgba(6, 18, 28, 0.55);
  color: var(--home-ink);
  cursor: pointer;
  text-align: left;
}
.studio-mate[hidden] { display: none; }
.studio-mate__snake {
  flex: 0 0 42%;
  min-width: 0;
  aspect-ratio: 3 / 1;
}
.studio-mate__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 0.1rem; }
.studio-mate__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(12px, 3.4vmin, 15px);
  color: #7dffb0;
}
.studio-mate__state {
  font-size: clamp(10px, 2.8vmin, 12px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3ee07f;
}
.studio-mate[data-state="busy"] .studio-mate__state { color: #ffb347; }
.studio-mate[data-state="away"] .studio-mate__state { color: #8a98a8; }
.studio-mate--empty { border-style: dashed; border-color: rgba(160, 200, 230, 0.35); }
.studio-mate--empty .studio-mate__snake { display: none; }
.studio-mate--empty .studio-mate__name { color: var(--home-ink); }
.studio-mate--empty .studio-mate__state { color: var(--home-muted); letter-spacing: 0.04em; text-transform: none; }

.home__codexBtn:active {
  transform: translateY(0.16rem);
  box-shadow:
    0 0.05rem 0 var(--home-lip),
    inset 0 0.1rem 0.18rem rgba(0, 0, 0, 0.35);
}

/* Add Friend — modal form */
.add-friend__row {
  display: flex;
  gap: 0.45rem;
  min-width: 0;
  margin: 0.35rem 0 0.55rem;
}
.add-friend__row--modal { width: 100%; }
.add-friend__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.55rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(120, 200, 180, 0.28);
  background: rgba(6, 20, 18, 0.65);
  color: #e8fff4;
  padding: 0 0.75rem;
  font-size: 0.9rem;
  font-family: var(--font-num), ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.add-friend__input::placeholder { color: #5a8878; }
.add-friend__btn {
  flex: 0 0 auto;
  min-height: 2.55rem;
  padding: 0 1rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(140, 255, 200, 0.4);
  background: linear-gradient(180deg, #4ae0a0 0%, #2aaa72 100%);
  color: #062418;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow:
    0 0.26rem 0 #146048,
    0 0.45rem 0.8rem rgba(0, 0, 0, 0.3),
    inset 0 0.06rem 0 rgba(255, 255, 255, 0.35);
}
.add-friend__btn:active {
  transform: translateY(0.14rem);
  box-shadow:
    0 0.05rem 0 #146048,
    inset 0 0.1rem 0.16rem rgba(0, 0, 0, 0.25);
}

.ad-slot {
  min-height: 0;
  pointer-events: none;
}
.ad-slot--banner {
  min-height: 0;
  margin-top: 0.2rem;
}

.howto {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.4rem 0.2rem 0.8rem;
  margin: 0;
  color: var(--c-text);
  font-size: 0.88rem;
  line-height: 1.4;
}
.howto b { color: var(--c-primary); }

/* Short landscape phones (SE / compact) */
@media (max-height: 400px) {
  .home { gap: 1vh; padding-top: calc(var(--safe-t) + 1.2vh); }
  .home__snakeCanvas { height: clamp(5rem, 24vmin, 7.2rem); }
  .mode-card { min-height: max(3.8rem, 16vmin); padding: 0.5rem 0.85rem; }
  .mode-card__desc { display: none; }
  .lb-card { padding: 0.5rem 0.75rem; gap: 0.4rem; }
  .lb-card__tab { min-height: max(2.2rem, 8.5vmin); font-size: 0.85rem; }
  .skins--home { gap: 0.28rem; }
}

/* Narrow / stacked fallback.
   Keyed on orientation, not width: `max-width: 640px` also matched a 640x360
   phone held sideways, so a landscape handset got the stacked portrait layout
   and overflowed. Landscape is the game's primary orientation — it keeps the
   three-column home at every width. */
@media (orientation: portrait) {
  .home__mid {
    grid-template-columns: 1fr;
    row-gap: 1.2vh;
    justify-items: center;
  }
  .home__modes {
    max-width: min(92vw, 28rem);
    justify-self: center;
    margin-right: 0;
  }
  .home-hub { max-width: min(92vw, 28rem); }
  .home__snakeCanvas { height: clamp(5rem, 20vmin, 7rem); width: 100%; }
}

/* Wide tablets — keep cards from stretching too far */
@media (min-width: 1100px) {
  .home__mid { max-width: 1240px; }
  .home__modes { max-width: 420px; }
}

/* ==========================================================================
   RESPONSIVE HARDENING — phones / tablets / short landscape
   Every interactive control must stay fully on-screen with safe-area padding.
   ========================================================================== */

/* 3D patterned buttons — strong depth (home + modals) */
.btn-3d {
  position: relative;
  isolation: isolate;
}
/* Legacy light 3D overrides removed — home uses dark glass system above */
.studio-tabs__btn:active {
  transform: translateY(0.1rem);
}

.home {
  overflow: hidden;
}
.home__mid {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 0.4rem;
}
.home__modes {
  min-width: 0;
  width: 100%;
}
/* (The height clamp that used to live here is gone — see .snake-studio above.) */

/* Compact landscape phones */
@media (orientation: landscape) and (max-height: 430px) {
  .home {
    gap: 0.8vh;
    padding:
      calc(var(--safe-t) + 0.8vh)
      calc(var(--safe-r) + 1.6vw)
      calc(var(--safe-b) + 0.8vh)
      calc(var(--safe-l) + 1.6vw);
  }
  .home__top { min-height: 0; gap: 1vw; }
  .home__chip { max-width: min(26vw, 11rem); padding-right: 0.55rem; }
  /* rem is 9px here: 2.2rem made it a 20px button (the user: "add friend
     butonu biraz küçük"). A real tap target, the avatar's height. */
  .home__friendBtn { width: max(40px, 10.5vmin); height: max(40px, 10.5vmin); }
  .home__friendBtn__svg { width: 56%; height: 56%; }
  .home__who b { font-size: 0.85rem; }
  .home__pid { font-size: 0.58rem; }
  .home__topRight .icon-btn { width: 2.35rem; height: 2.35rem; }
  .snake-studio { gap: 0.28rem; padding: 0.4rem 0.5rem; }
  .home__snakeCanvas { height: clamp(5.4rem, 22vmin, 7.2rem) !important; width: 100% !important; }
  .snake-studio__stage { min-height: 0; }
  .snake-studio__meta { display: none; }
  .studio-tabs__btn { padding: 0.28rem 0.2rem; font-size: 0.68rem; }
  .studio-tray { min-height: 0; }
  .home-event__sub { display: none; }
  .home-login__claim { min-height: 1.85rem; font-size: 0.78rem; }
  .home-quests__title { margin-bottom: 0.2rem; }
  .skins--home { gap: 0.28rem; }
  .pattern-chip, .hat-chip { padding: 0.28rem 0.5rem; font-size: 0.65rem; }
  .mode-card { min-height: 3.4rem; padding: 0.45rem 0.7rem; }
  .mode-card__desc { display: none; }
  /* `.minimap { 8.6rem }`, `.boost-btn { width: 7.8rem }` and
     `.action-cluster { 12rem square }` all lived
     here and silently won on every landscape phone: the first is why BOOST
     measured 70px rather than the 112px the base rule asked for, the second
     capped the flex column so short that BOOST was squashed to an ellipse.
     --btn-boost owns the size and the cluster is sized by its contents. */
}

/* Very short */
@media (orientation: landscape) and (max-height: 360px) {
  .name-field--home { display: none; }
  /* Tighter padding on very short screens, but the type keeps its own clamp —
     shrinking it here is what made the labels unreadable in the first place. */
  .hud__tl .stat-pill { padding: 0.2rem 0.45rem; }
  /* No room for five rows plus yours: the top three and you, never a
     scrollbar (it was `max-height: 6rem; overflow: auto` — a scroll box in a
     HUD nobody can scroll mid-game; user, 2026-10-04). */
  .top5 { overflow: hidden; }
  .top5__row:nth-child(n+4):not(.top5__row--you) { display: none; }
}

@media (max-width: 420px) {
  .home__friendBtn { width: max(40px, 10.5vmin); height: max(40px, 10.5vmin); }
  .home__chip { max-width: min(58vw, 12rem); }
}

/* Tall phones / tablets portrait */
@media (orientation: portrait) {
  .home__mid {
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: 1.4vh;
  }
  .home__modes {
    max-width: min(94vw, 32rem);
    justify-self: center;
  }
  .snake-studio { width: min(94vw, 28rem); }
  .home-hub { max-width: min(94vw, 28rem); }
}

/* Tablets landscape */
@media (min-width: 900px) and (orientation: landscape) {
  .home__mid {
    grid-template-columns: minmax(22%, 28%) minmax(26%, 34%) minmax(30%, 38%);
    max-width: min(1240px, 96vw);
  }
  .mode-card { min-height: 5.2rem; }
}

/* Game HUD — keep TR clear of notch / leave */
@media (orientation: landscape) {
  .hud__tr {
    top: calc(var(--safe-t) + 0.45rem);
    right: calc(var(--safe-r) + 0.55rem);
    max-width: min(42vw, 14rem);
  }
  .hud__tl {
    max-width: min(40vw, 16rem);
  }
}

/* The cluster is flex-sized from its contents and the tokens already clamp to
   the short edge, so the old `min(42vw, 13rem)` box and its 12vw skill buttons
   (35px on a phone) are gone rather than re-tuned. */

/* --------------------------------------------------------------------------
   VICTORY — first place in Battle Royale
   Hidden unless #screen-result carries .is-victory, so a 2nd-place finish can
   never flash it for a frame on the way in.
   -------------------------------------------------------------------------- */
.victory { display: none; }

#screen-result.is-victory .victory {
  display: grid;
  place-items: center;
  position: relative;
  /* The rays circle is wider than the word, and its lower half is empty once
     the radial mask fades it out — so the block can sit tight to the row
     below without the two touching. */
  margin-bottom: clamp(2px, 1vmin, 8px);
  isolation: isolate;
}

/* Every child sits in the same grid cell so the crown lands on the rays. */
#screen-result.is-victory .victory > * { grid-area: 1 / 1; }

.victory__rays {
  width: clamp(150px, 34vmin, 320px);
  height: clamp(150px, 34vmin, 320px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 197, 61, 0.30) 0deg 12deg, transparent 12deg 30deg,
    rgba(255, 197, 61, 0.30) 30deg 42deg, transparent 42deg 60deg,
    rgba(255, 197, 61, 0.30) 60deg 72deg, transparent 72deg 90deg,
    rgba(255, 197, 61, 0.30) 90deg 102deg, transparent 102deg 120deg,
    rgba(255, 197, 61, 0.30) 120deg 132deg, transparent 132deg 150deg,
    rgba(255, 197, 61, 0.30) 150deg 162deg, transparent 162deg 180deg,
    rgba(255, 197, 61, 0.30) 180deg 192deg, transparent 192deg 210deg,
    rgba(255, 197, 61, 0.30) 210deg 222deg, transparent 222deg 240deg,
    rgba(255, 197, 61, 0.30) 240deg 252deg, transparent 252deg 270deg,
    rgba(255, 197, 61, 0.30) 270deg 282deg, transparent 282deg 300deg,
    rgba(255, 197, 61, 0.30) 300deg 312deg, transparent 312deg 330deg,
    rgba(255, 197, 61, 0.30) 330deg 342deg, transparent 342deg 360deg
  );
  /* Fades out toward the rim so the rays do not end in a hard circle. */
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 68%);
  mask-image: radial-gradient(circle, #000 12%, transparent 68%);
  animation: victoryRays 14s linear infinite;
  transform-origin: 50% 50%;
  z-index: 0;
}

.victory__crown {
  /* Lifted off centre so the word underneath has room inside the rays. */
  align-self: start;
  margin-top: clamp(8px, 3vmin, 26px);
  font-size: clamp(46px, 11vmin, 96px);
  line-height: 1;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 0.12em 0.25em rgba(0, 0, 0, 0.5));
  animation: victoryCrown 1.15s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  z-index: 2;
}

.victory__word {
  /* Sits in the lower part of the rays, NOT below them: a negative margin here
     pushed the word out of its grid cell and straight onto "#1 CHAMPION". */
  align-self: end;
  margin-bottom: clamp(4px, 1.6vmin, 14px);
  font-family: var(--font-display);
  font-size: clamp(26px, 7vmin, 58px);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #ffd76a;
  text-shadow: 0 0 1.6rem rgba(255, 197, 61, 0.75), 0 0.14em 0 rgba(90, 55, 0, 0.55);
  animation: victoryWord 0.75s 0.32s ease-out both;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   RESULT SCREEN ON A LANDSCAPE PHONE
   --------------------------------------------------------------------------
   The whole victory block is sized in vmin, and on a landscape phone vmin is
   the HEIGHT. At 832x384 every vmin figure collapses — 34vmin is 131px, 11vmin
   is 42px — so the clamp MINIMUMS take over instead, and those minimums were
   chosen for portrait, where there is height to spare. The block then costs a
   flat 150px, which is 39% of the screen, and it cannot give any of it back.

   Measured at 832x384 with a first place and a rank-up: 393px of content in a
   384px screen, and the two buttons ended at 400 — off the bottom, unreachable.
   Nothing was wrong with any single rule; they just all bottomed out at once.

   So on short landscape screens the block is allowed to shrink again, and the
   panel gets `overflow-y: auto` underneath it so that no future addition can
   ever put a button somewhere it cannot be pressed.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 480px) {
  .result {
    gap: 0.5rem;
    max-height: 100%;
    overflow-y: auto;
    /* Vertical only. Making this a scroll container let a child a few pixels
       wider than the box raise a horizontal bar across the bottom of the
       panel — there is nothing to reach sideways, so it is clipped. */
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  #screen-result.is-victory .victory { margin-bottom: 0; }
  .victory__rays {
    width: clamp(96px, 34vmin, 320px);
    height: clamp(96px, 34vmin, 320px);
  }
  .victory__crown {
    font-size: clamp(32px, 11vmin, 96px);
    margin-top: clamp(4px, 3vmin, 26px);
  }
  .victory__word { font-size: clamp(20px, 7vmin, 58px); }
  .result__stat { padding: 0.45rem 0.35rem; }
  .rankup { margin-top: 0.15rem; font-size: 1.05rem; }
}

@keyframes victoryRays { to { transform: rotate(360deg); } }

/* Drops in, overshoots, settles — the weight is what sells it as a prize. */
@keyframes victoryCrown {
  0%   { transform: translateY(-160%) scale(0.35) rotate(-22deg); opacity: 0; }
  55%  { transform: translateY(6%) scale(1.14) rotate(4deg); opacity: 1; }
  75%  { transform: translateY(0) scale(0.97) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes victoryWord {
  0%   { transform: scale(0.72); opacity: 0; letter-spacing: 0.02em; }
  100% { transform: scale(1); opacity: 1; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  .victory__rays { animation: none; }
}

/* 3D utility — used on modals / secondary actions */
.btn-3d.btn,
.btn.btn-3d {
  box-shadow:
    0 0.28rem 0 rgba(20, 55, 90, 0.35),
    0 0.5rem 1rem rgba(0, 0, 0, 0.2),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.35);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,0.07) 5px 6px);
}
.btn-3d.btn:active,
.btn.btn-3d:active {
  transform: translateY(0.16rem);
  box-shadow:
    0 0.05rem 0 rgba(20, 55, 90, 0.35),
    inset 0 0.12rem 0.2rem rgba(0, 0, 0, 0.2);
}

.home__pid,
.profile__id,
.pid-inline {
  font-family: var(--font-num), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--home-muted, #4a6d8c);
  font-weight: 700;
}
.home__pid {
  display: block;
  margin-top: 0.1rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7ec8e8;
}
.profile__idRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.profile__id {
  padding: 0.2rem 0.45rem;
  border-radius: 0.4rem;
  background: rgba(0,0,0,0.06);
}
.home__search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(40vw, 17rem);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.home__searchLabel {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--home-muted);
}
.home__searchWrap { display: flex; gap: 0.35rem; min-width: 0; }
.home__searchInput {
  flex: 1 1 auto;
  min-width: 0;
  min-height: max(2.35rem, 8.5vmin);
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.84);
  padding: 0 0.65rem;
  font-size: clamp(0.72rem, 2.5vmin, 0.88rem);
  color: var(--home-ink);
  box-shadow: inset 0 0.1rem 0.22rem rgba(20, 55, 90, 0.08);
}
.home__searchBtn {
  flex: 0 0 auto;
  min-height: max(2.35rem, 8.5vmin);
  padding: 0 0.8rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,0.08) 4px 5px),
    linear-gradient(180deg, #2a5578 0%, #1a3a58 100%);
  color: #fff;
  font-weight: 800;
  font-size: clamp(0.72rem, 2.5vmin, 0.86rem);
  cursor: pointer;
  box-shadow:
    0 0.28rem 0 #0d2438,
    0 0.5rem 0.9rem rgba(10, 30, 50, 0.35),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.25);
}
.home__searchBtn:active {
  transform: translateY(0.14rem);
  box-shadow:
    0 0.05rem 0 #0d2438,
    inset 0 0.12rem 0.2rem rgba(0, 0, 0, 0.35);
}
.search-hint { font-size: 0.82rem; color: var(--c-text-dim); margin: 0 0 0.75rem; }
.search-results {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
  max-height: min(50vh, 22rem); overflow: auto;
}
.search-results__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.65rem 0.75rem; border-radius: 0.75rem;
  background: rgba(126, 168, 255, 0.08);
  border: 1px solid rgba(126, 168, 255, 0.18);
}
.search-results__row b { display: block; }
.search-results__badge {
  margin-left: 0.35rem; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7;
}
.search-results__empty { padding: 1rem; text-align: center; color: var(--c-text-faint); }
.modal__box--sm { max-width: min(92vw, 26rem); }

/* Prevent home chip from eating search on mid widths */
@media (max-width: 820px) and (orientation: landscape) {
  .home__chip { max-width: min(30vw, 11.5rem); }
  .home__search { max-width: min(36vw, 13.5rem); }
}

/* ==========================================================================
   GOLD — wallet, free gold, store, continue, match gold, leaderboard prizes
   The coin itself is drawn by js/render/coin.js; --coin-img is its still face,
   set at boot, used by every inline price.
   ========================================================================== */
:root {
  --gold-ink: #ffe08a;
  --gold-deep: #c98a10;
  --gold-glass: linear-gradient(165deg, rgba(92, 62, 12, 0.95) 0%, rgba(44, 30, 8, 0.94) 100%);
  --gold-edge: rgba(255, 206, 102, 0.5);
}

canvas.coin3d { display: block; }

/* A number with a coin in front of it. */
.gold-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  font-family: var(--font-num);
  font-weight: 800;
  color: var(--gold-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gold-tag::before {
  content: '';
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background: var(--coin-img, radial-gradient(circle, #ffe27a 55%, #c98a10 60%)) center / contain no-repeat;
  border-radius: 50%;
}

/* --- Top bar: balance + store --- */
.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: max(2.8rem, 11vmin);
  padding: 0 0.35rem 0 0.3rem;
  border-radius: 999rem;
  border: 1px solid var(--gold-edge);
  background: var(--gold-glass);
  color: var(--gold-ink);
  cursor: pointer;
  box-shadow: 0 0.28rem 0 #2a1a02, 0 0.45rem 0.9rem rgba(0, 0, 0, 0.35), inset 0 0.08rem 0 rgba(255, 230, 160, 0.25);
}
.wallet-chip:active { transform: translateY(0.14rem); box-shadow: 0 0.05rem 0 #2a1a02; }
.wallet-chip__coin { display: grid; place-items: center; width: 26px; height: 26px; }
.wallet-chip__v {
  min-width: 3.2ch;
  font-family: var(--font-num);
  font-size: clamp(0.9rem, 3.2vmin, 1.1rem);
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wallet-chip__plus {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #7dffc2, #2aaa72);
  color: #062418;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
}
.home-store {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: max(2.8rem, 11vmin);
  padding: 0 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 196, 90, 0.45);
  background: linear-gradient(180deg, #ffd35c 0%, #f0a21a 100%);
  color: #3a2200;
  font-weight: 900;
  font-size: clamp(0.85rem, 3vmin, 1rem);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 0.28rem 0 #8a5605, 0 0.45rem 0.9rem rgba(0, 0, 0, 0.35), inset 0 0.08rem 0 rgba(255, 250, 220, 0.6);
}
.home-store:active { transform: translateY(0.14rem); box-shadow: 0 0.05rem 0 #8a5605; }
.home-store__ico { font-size: 1.05em; }

/* --- Home: Free Gold --- */
.home-gold {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem 0.55rem;
  border-radius: 0.95rem;
  border: 1px solid var(--gold-edge);
  background: linear-gradient(165deg, rgba(70, 50, 14, 0.9) 0%, rgba(30, 22, 8, 0.92) 100%);
  box-shadow: inset 0 0.06rem 0 rgba(255, 220, 140, 0.16);
}
.home-gold__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff1cc;
}
.home-gold__head small { font-size: 0.62rem; font-weight: 700; color: #d9b977; white-space: nowrap; }
.home-gold__ads { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.gold-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.05rem;
  padding: 0 0.5rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(140, 220, 255, 0.35);
  background: linear-gradient(180deg, #2f6d93 0%, #1b4461 100%);
  color: #eaf6ff;
  font-weight: 800;
  font-size: 0.74rem;
  cursor: pointer;
  box-shadow: 0 0.2rem 0 #0e2536;
}
.gold-btn--hot {
  border-color: rgba(255, 220, 120, 0.6);
  background: linear-gradient(180deg, #ffcf4d 0%, #e79a12 100%);
  color: #3a2200;
  box-shadow: 0 0.2rem 0 #8a5605;
}
.gold-btn--hot .gold-tag { color: #3a2200; }
.gold-btn:not(:disabled):active { transform: translateY(0.12rem); box-shadow: 0 0.04rem 0 #0e2536; }
.gold-btn:disabled { opacity: 0.42; cursor: default; box-shadow: none; }
.gold-btn__play { font-size: 0.62rem; opacity: 0.9; }
.home-chest {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem 0.3rem 0.45rem;
  border-radius: 0.65rem;
  background: rgba(10, 8, 2, 0.35);
  border: 1px solid rgba(255, 210, 110, 0.18);
}
.home-chest__ico { font-size: 1.1rem; }
.home-chest__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.home-chest__body b { font-size: 0.72rem; color: #fff1cc; white-space: nowrap; }
.home-chest__body b span { font-family: var(--font-num); color: var(--gold-ink); }
.home-chest__body small { font-size: 0.6rem; color: #cfb27a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-chest__btn {
  min-height: 1.8rem;
  padding: 0 0.7rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(140, 255, 200, 0.4);
  background: linear-gradient(180deg, #4ae0a0 0%, #2aaa72 100%);
  color: #062418;
  font-weight: 900;
  font-size: 0.72rem;
  cursor: pointer;
  box-shadow: 0 0.18rem 0 #146048;
}
.home-chest__btn.is-full { animation: chestPulse 1.2s ease-in-out infinite; }
.home-chest__btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; animation: none; }
@keyframes chestPulse { 50% { transform: scale(1.07); } }

.home-login__hint { font-size: 0.6rem; font-weight: 700; color: var(--home-muted); }
.home-quest .gold-tag { font-size: 0.66rem; }
.home-quest__prog { display: inline-flex; align-items: center; gap: 0.35rem; }
.home-quest__prog.is-done { color: #7dffc2; }
.home-quest__btn { display: inline-flex; align-items: center; gap: 0.25rem; }
.home-quest__btn .gold-tag { color: #062418; }
.home-quest.is-claimed .home-quest__label { opacity: 0.55; text-decoration: line-through; }
.home-quest--bonus {
  padding-top: 0.3rem;
  border-top: 1px dashed rgba(140, 210, 240, 0.22);
}
.home-quest--bonus .home-quest__label { color: #ffe08a; }

/* --- Locked cosmetics --- */
.skins--home .skin.is-locked { filter: saturate(0.55) brightness(0.8); }
.skin__price {
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  padding: 0.05rem 0.25rem;
  border-radius: 999px;
  background: rgba(20, 12, 2, 0.8);
  font-size: clamp(0.46rem, 1.6vmin, 0.56rem);
  line-height: 1.2;
  pointer-events: none;
}
.hat-chip.is-locked { opacity: 0.8; }
.hat-chip .gold-tag { font-size: 0.62rem; margin-left: 0.1rem; }

/* --- Store --- */
/* Above the death panel: Continue short of gold opens the store over it. */
.modal--store { z-index: 42; }
#modalBuy { z-index: 43; }
.modal--store .modal__box { width: min(100%, 56rem); max-height: 100%; }
.store__head { gap: 0.8rem; }
.store__head .modal__title { flex: 1 1 auto; }
.store__wallet {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem 0.2rem 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--gold-edge);
  background: var(--gold-glass);
  color: var(--gold-ink);
  font-family: var(--font-num);
  font-size: 1rem;
}
.store__coin { display: grid; place-items: center; }
.store__tabs { align-self: flex-start; }
/* No shrinking: the box scrolls instead. As a flex child the grid used to be
   squeezed to the box, and a card with overflow:hidden has no minimum height,
   so whole rows lost their price buttons. */
.store__grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
  gap: 0.55rem;
  min-height: 12rem;
}
.store__grid[data-tab="gold"],
.store__grid[data-tab="packs"] { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.55rem 0.6rem;
  border-radius: 0.9rem;
  border: 1px solid var(--c-stroke);
  background: linear-gradient(165deg, rgba(26, 42, 70, 0.95) 0%, rgba(14, 22, 40, 0.95) 100%);
  text-align: center;
  overflow: hidden;
}
.scard.is-on { border-color: var(--c-primary); box-shadow: 0 0 0 1px rgba(92, 255, 157, 0.35) inset; }
.scard__title { font-size: 0.82rem; font-weight: 800; color: var(--c-text); line-height: 1.2; }
.scard__sub { font-size: 0.64rem; color: var(--c-text-dim); line-height: 1.3; }
.scard__sub em { font-style: normal; color: #7dffc2; font-weight: 800; }
.scard__rarity { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-faint); }
.rarity--rare .scard__rarity { color: #7cb8ff; }
.rarity--epic .scard__rarity { color: #ffc25a; }
.rarity--rare { border-color: rgba(80, 160, 255, 0.35); }
.rarity--epic { border-color: rgba(240, 180, 60, 0.45); }
.scard__art {
  width: 100%;
  aspect-ratio: 2;
  border-radius: 0.6rem;
  background: #7fbcdc center 30% / cover no-repeat;
}
.scard__art--hat { aspect-ratio: 10 / 7; background-position: center; }
.scard__coin { display: grid; place-items: center; min-height: 3.2rem; }
.scard__amount { font-family: var(--font-num); font-size: 1.25rem; font-weight: 800; color: var(--gold-ink); }
.scard__ribbon {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6b86, #e0355a);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.scard__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; width: 100%; }
.scard__row .gold-btn { white-space: nowrap; }
.scard--free {
  grid-column: span 2;
  justify-content: center;
  border-color: var(--gold-edge);
  background: linear-gradient(165deg, rgba(70, 50, 14, 0.95) 0%, rgba(30, 22, 8, 0.95) 100%);
}
/* Bigger packs are a bigger pile, each coin turning at its own pace. */
.scard__pile { display: flex; justify-content: center; align-items: flex-end; min-height: 3.4rem; }
.scard__pile > span { display: grid; place-items: center; }
.scard__pile > span + span { margin-left: -0.9rem; }
.scard__pile > span:nth-child(2) { transform: translateY(-0.35rem); }
.scard--g4, .scard--g5 { background: radial-gradient(circle at 50% 30%, rgba(255, 200, 80, 0.2), transparent 60%), linear-gradient(165deg, rgba(26, 42, 70, 0.95) 0%, rgba(14, 22, 40, 0.95) 100%); }
.pack__hatimg {
  width: 2.6rem;
  aspect-ratio: 10 / 7;
  border-radius: 0.4rem;
  background: #7fbcdc center / cover no-repeat;
}
.scard--gold { border-color: rgba(255, 206, 102, 0.3); }
.scard__state {
  margin-top: auto;
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--c-text-dim);
}
.scard__state.is-on { color: var(--c-primary); }
.price-btn, .own-btn {
  margin-top: auto;
  width: 100%;
  min-height: 2rem;
  border-radius: 0.65rem;
  font-weight: 900;
  font-size: 0.82rem;
  cursor: pointer;
}
.price-btn {
  border: 1px solid rgba(140, 255, 200, 0.45);
  background: linear-gradient(180deg, #4ae0a0 0%, #2aaa72 100%);
  color: #062418;
  box-shadow: 0 0.2rem 0 #146048;
}
.price-btn--gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(255, 220, 120, 0.6);
  background: linear-gradient(180deg, #ffcf4d 0%, #e79a12 100%);
  box-shadow: 0 0.2rem 0 #8a5605;
}
.price-btn--gold .gold-tag { color: #3a2200; }
.own-btn {
  border: 1px solid var(--c-stroke-strong);
  background: rgba(126, 168, 255, 0.12);
  color: var(--c-text);
}
.price-btn:active, .own-btn:active { transform: translateY(0.1rem); box-shadow: none; }
.pack__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.4rem;
}
.pack__thumb {
  width: 3.4rem;
  aspect-ratio: 2;
  border-radius: 0.4rem;
  background: #7fbcdc center 30% / cover no-repeat;
}
.pack__hat { font-size: 1.2rem; font-style: normal; line-height: 1; }
.pack__gold { font-size: 0.8rem; }
.scard--soon { justify-content: center; opacity: 0.7; border-style: dashed; }

/* --- Buy confirmation --- */
.buy { align-items: center; text-align: center; gap: 0.45rem; }
.buy__art {
  width: min(100%, 14rem);
  aspect-ratio: 2;
  border-radius: 0.8rem;
  background: #7fbcdc center / cover no-repeat;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35);
}
.buy__name { font-family: var(--font-display); font-size: 1.3rem; }
.buy__sub { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-dim); }
.buy__short { margin: 0; font-size: 0.8rem; color: var(--c-gold); }
.buy__actions { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
.buy__go { flex-direction: row; align-items: center; gap: 0.55rem; }
.buy__go .gold-tag { color: #062418; font-size: 1rem; }
.buy__go .gold-tag[hidden] { display: none; }
.buy__short .gold-tag { color: var(--c-gold); }

/* --- Death panel: Continue — the first thing the eye lands on --- */
/* Stacked, one full-width button each. Side by side they never fitted: the
   panel stops growing at 760px while the titles keep scaling, so "CONTINUE"
   and its price needed ~240px in a 178px card — measured, the price was cut
   by 22px on small phones and 60–69px on a desktop (1280×720, 1920×1080). */
.death-continue {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(6px, 1.8vmin, 12px);
}
.death-continue__pick {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(6px, 1.8vmin, 12px);
}
/* How long Continue stays on offer: a line round both buttons that a head
   eats clockwise from the top (uiManager.drawContinueClock). No number. */
.cont-clock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.cont-clock path { fill: none; stroke-width: 3.5px; stroke-linecap: round; }
.cont-clock__track { stroke: rgba(255, 230, 160, 0.14); }
.cont-clock__run { stroke: #ffd65c; filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.75)); }
/* Run out: the offer fades and takes no more taps while the gold is paid. */
.death-continue.is-expired { opacity: 0; transform: scale(0.97); pointer-events: none; transition: opacity 0.26s ease-in, transform 0.26s ease-in; }
.continue-btn__t { white-space: nowrap; }
.continue-btn--half .continue-btn__t { font-size: clamp(14px, 4.2vmin, 24px); }
.death-continue[hidden] { display: none; }
.continue-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "t tag" "s tag";
  align-items: center;
  column-gap: 0.5em;
  min-height: clamp(54px, 17vmin, 92px);
  padding: 0.4em 0.9em;
  border-radius: clamp(12px, 3vmin, 18px);
  border: 1px solid rgba(255, 230, 140, 0.8);
  background: linear-gradient(180deg, #ffd65c 0%, #eb9d12 100%);
  color: #3a2200;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0.25em 0 #8a5605, 0 0 1.4em rgba(255, 190, 60, 0.35);
  animation: continueGlow 1.6s ease-in-out infinite;
}
@keyframes continueGlow {
  50% { box-shadow: 0 0.25em 0 #8a5605, 0 0 2.2em rgba(255, 200, 80, 0.6); }
}
.continue-btn--half {
  border-color: rgba(140, 220, 255, 0.55);
  background: linear-gradient(180deg, #4a93c4 0%, #235479 100%);
  color: #eaf6ff;
  box-shadow: 0 0.25em 0 #0e2536;
  animation: none;
}
.continue-btn__t {
  grid-area: t;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 5vmin, 28px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.05;
}
.continue-btn__s { grid-area: s; font-size: clamp(11px, 3.2vmin, 16px); font-weight: 700; opacity: 0.9; }
.continue-btn .gold-tag { grid-area: tag; font-size: clamp(16px, 4.8vmin, 26px); color: inherit; }
.continue-btn:active { transform: translateY(0.12em); box-shadow: none; }
.continue-btn.is-short { filter: saturate(0.5) brightness(0.85); animation: none; }
.death-continue__wallet {
  grid-column: 1 / -1;
  text-align: center;
  font-size: clamp(11px, 3vmin, 15px);
  color: var(--c-text-dim);
}
.death-continue__wallet .gold-tag { font-size: 1em; }

/* --- Results: gold --- */
.result__gold {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--gold-edge);
  background: linear-gradient(165deg, rgba(70, 50, 14, 0.9) 0%, rgba(30, 22, 8, 0.92) 100%);
  animation: announcePopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.result__gold[hidden] { display: none; }
.result__goldCoin { display: grid; place-items: center; }
.result__goldBody { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.result__goldTotal { font-family: var(--font-num); font-size: clamp(20px, 6vmin, 32px); font-weight: 800; color: var(--gold-ink); line-height: 1; }
.result__gold.is-zero .result__goldTotal { color: var(--c-text-dim); }
.result__goldLines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  font-size: clamp(11px, 3vmin, 14px);
  color: #e9d4a4;
}
.result__goldLines li { display: inline-flex; gap: 0.3rem; }
.result__goldLines b { font-family: var(--font-num); color: var(--gold-ink); }
.result__goldNote { font-size: clamp(11px, 2.8vmin, 13px); color: #cfb27a; }
.result__goldNote[hidden] { display: none; }
.result__goldBal { display: flex; flex-direction: column; align-items: flex-end; }
.result__goldBal small { font-size: clamp(10px, 2.6vmin, 12px); letter-spacing: 0.12em; text-transform: uppercase; color: #cfb27a; }
.result__goldBal b { font-family: var(--font-num); font-size: clamp(17px, 5vmin, 26px); color: var(--gold-ink); font-variant-numeric: tabular-nums; }

/* --- Leaderboard: prizes, podium, last winners --- */
.lb-reset { color: var(--c-text-dim); font-weight: 700; }
.lb-prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.lb-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.4rem;
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: 0.8rem;
}
.lb-prize__place { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.lb-prize--1 { border-color: rgba(255, 197, 61, 0.6); background: rgba(255, 197, 61, 0.12); color: #ffd76a; }
.lb-prize--2 { border-color: rgba(201, 212, 227, 0.5); background: rgba(201, 212, 227, 0.1); color: #dfe7f2; }
.lb-prize--3 { border-color: rgba(205, 127, 50, 0.55); background: rgba(205, 127, 50, 0.12); color: #f0a868; }
.lb__row--top { font-weight: 800; }
.lb__row--top .lb__name { font-weight: 900; font-size: 0.95rem; }
.lb__row--1 .lb__name, .lb__row--1 .lb__score { color: #ffd76a; }
.lb__row--2 .lb__name, .lb__row--2 .lb__pos { color: #e3ebf7; }
.lb__row--3 .lb__name, .lb__row--3 .lb__pos { color: #f0a868; }
.lb__crown { font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 0 0.35rem rgba(255, 197, 61, 0.7)); }
.lb__score { display: inline-flex; align-items: center; gap: 0.55rem; }
.lb__prize { font-size: 0.72rem; }
.lb-past__title {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.lb-past { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.lb-past__row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "place name" "score score" "tag tag";
  gap: 0.1rem 0.4rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-stroke);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
}
.lb-past__place { grid-area: place; font-weight: 900; }
.lb-past__name { grid-area: name; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-past__score { grid-area: score; font-family: var(--font-num); color: var(--c-text-dim); font-size: 0.7rem; }
.lb-past__row .gold-tag { grid-area: tag; font-size: 0.72rem; }
.lb-past__row--1 { border-color: rgba(255, 197, 61, 0.55); background: rgba(255, 197, 61, 0.1); }
.lb-past__row--1 .lb-past__name { color: #ffd76a; }
.lb-past__row--2 { border-color: rgba(201, 212, 227, 0.4); }
.lb-past__row--3 { border-color: rgba(205, 127, 50, 0.45); }

/* --- Toasts outside a match --- */
.toast-stack--app {
  position: absolute;
  bottom: calc(var(--safe-b) + 1.2rem);
  z-index: 46;
  pointer-events: none;
}
.toast--gold {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-color: var(--gold-edge);
  color: var(--gold-ink);
  background: rgba(40, 26, 4, 0.92);
  font-weight: 800;
}
.toast--gold::before {
  content: '';
  width: 1.1rem;
  height: 1.1rem;
  background: var(--coin-img) center / contain no-repeat;
}

/* --- Game server status (home) --- */
.net-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.45em;
  padding: 0.25em 0.8em;
  border-radius: 999px;
  background: rgba(6, 14, 26, 0.6);
  border: 1px solid rgba(140, 200, 240, 0.25);
  color: #c9dbe8;
  font-size: clamp(11px, 2.8vmin, 14px);
  font-weight: 700;
}
.net-status[hidden] { display: none; }
.net-status__dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: #8a9aa8; }
.net-status.is-on .net-status__dot { background: #3ee08c; box-shadow: 0 0 0.5em #3ee08c; }
.net-status.is-wait .net-status__dot { background: #ffc53d; animation: chestPulse 1s ease-in-out infinite; }
.net-status.is-off .net-status__dot { background: #8a9aa8; }

/* --- Frame tracker (F) --- */
.perf-track {
  position: absolute;
  top: calc(var(--safe-t) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(96vw, 720px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: rgba(4, 8, 18, 0.92);
  border: 1px solid rgba(92, 255, 157, 0.45);
  color: #d6f5e6;
  font: 11px/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace;
  pointer-events: auto;
  overflow: hidden;
}
.perf-track[hidden] { display: none; }
.perf-track__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(92, 255, 157, 0.25);
}
.perf-track__bar b { color: #5cff9d; letter-spacing: 0.08em; }
.perf-track__sum { flex: 1 1 auto; color: #9fc7b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-track__bar button {
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(92, 255, 157, 0.5);
  background: rgba(92, 255, 157, 0.12);
  color: #d6f5e6;
  font: inherit;
  cursor: pointer;
}
.perf-track__body { margin: 0; padding: 6px 8px; overflow: auto; white-space: pre; }

/* --- Test ad (until the ad SDK is in) --- */
.ad-mock {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, #243b5a 0%, #05070f 75%);
}
.ad-mock[hidden] { display: none; }
.ad-mock__box { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: min(80vw, 22rem); }
.ad-mock__tag {
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: #ffcf4d;
  color: #3a2200;
  font-weight: 900;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
}
.ad-mock__count { font-family: var(--font-num); font-size: 3.4rem; color: #fff; line-height: 1; }
.ad-mock__of, .ad-mock__hint { color: var(--c-text-dim); font-size: 0.8rem; }
.ad-mock__bar { width: 100%; height: 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ad-mock__bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffcf4d, #7dffc2); }
.ad-mock__close {
  position: absolute;
  top: calc(var(--safe-t) + 0.8rem);
  right: calc(var(--safe-r) + 0.8rem);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--c-stroke-strong);
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text);
  font-size: 1rem;
  cursor: pointer;
}

/* Short landscape phones: the hub has three cards to fit. */
@media (orientation: landscape) and (max-height: 430px) {
  .home-event { padding: 0.32rem 0.6rem; }
  .home-gold { padding: 0.4rem 0.5rem 0.45rem; gap: 0.3rem; }
  .gold-btn { min-height: 1.8rem; }
  .home-chest { padding: 0.22rem 0.3rem 0.22rem 0.4rem; }
  .home-login, .home-quests { padding: 0.42rem 0.55rem 0.45rem; }
  .home-login__day { min-height: 1.85rem; }
  .home-store { padding: 0 0.6rem; height: 2.35rem; }
  .wallet-chip { height: 2.35rem; }
}