/* =============================================================================
   TableClash — consolidated stylesheet (mobile-first)

   Consolidated from the former styles.css + responsive-v2.css + responsive-v3.css
   + responsive-v4.css (the three responsive files have since been removed).

   BREAKPOINT SCALE — literal px; CSS custom properties cannot be used in @media.
     base                             phone / small tablet        (< 768)
     @media (min-width: 768px)   md   tablet portrait
     @media (min-width: 1024px)  lg   tablet landscape / laptop; primary nav returns
     @media (min-width: 1181px)  xl   desktop one-screen locked layout
   Two deliberate max-width exceptions (things that are not part of the
   mobile-first hub flow, so inverting them buys nothing):
     @media (max-width: 560px)        small-phone hub density
     @media (max-width: 760px)        narrow match view (arena is viewport-fit)
     @media (max-height: 760px)       short-viewport tweaks (arena + home hub)

   Structure: component rules first (authored at the mobile size), then all
   responsive rules together in the RESPONSIVE LAYERS section, ascending, so the
   cascade reads top-to-bottom.
   ========================================================================== */

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  /* ---- Surfaces: a five-step dark depth ladder ------------------------------
     bg (page) < surface-1 (outer panel) < surface-2 (card) < surface-3
     (raised / selected) ; surface-inset is for wells, tracks and recesses. */
  --bg: #090b0d;
  --surface-1: #10161a;
  --surface-2: #141c20;
  --surface-3: #1b2530;
  --surface-inset: #0b1013;
  --panel: var(--surface-1);   /* legacy alias */
  --panel2: var(--surface-2);  /* legacy alias */

  --text: #f4f1e8;
  --text-dim: #cdd3d2;
  --muted: #93a0a4;
  --faint: #6c777b;

  /* ---- Accents: gold + teal, kept restrained ---------------------------- */
  --teal: #5fe0c0;
  --teal-strong: #79e8cd;
  --amber: #f0b35c;            /* legacy alias, kept for existing rules */
  --gold: #d9ad57;            /* calmer working gold for refined surfaces */
  --gold-bright: #e6c07a;
  --red: #ff6b6b;

  /* ---- Hairlines ------------------------------------------------------------ */
  --line: #263238;
  --line-soft: rgba(255, 255, 255, .06);
  --line-strong: #33434a;
  --hair-gold: rgba(217, 173, 87, .20);
  --hair-teal: rgba(95, 224, 192, .22);
  --border: var(--line);       /* legacy alias */
  --accent: var(--teal);       /* legacy alias */

  /* ---- Radii ------------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 26px;
  --r-pill: 999px;

  /* ---- Spacing scale --------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ---- Elevation ------------------------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, .32);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .42);
  --shadow: var(--shadow-lg);  /* legacy alias */
  --glow-teal: 0 0 24px rgba(95, 224, 192, .16);
  --glow-gold: 0 0 22px rgba(217, 173, 87, .15);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(95, 224, 192, .6);

  /* ---- Icon / graphic scale (perceived, not box, sizes) ---------------- */
  --icon-nav: 20px;
  --icon-hud: 25px;
  --emblem-sm: 46px;

  /* ---- Header / sub-header control sizing -----------------------------------
     One shared box for every action control in a header row so the language
     picker, sign-in button and account menu button line up on a common centre
     line with matching height, radius and border. --tap-min keeps the touch
     target accessible even where the visible control is smaller. */
  --hdr-ctl-h: 44px;
  --hdr-ctl-r: 11px;
  --hdr-ctl-bw: 1px;
  --hdr-ctl-gap: 8px;
  --tap-min: 44px;

  /* ---- Horizontal rails --------------------------------------------------- */
  --rail-peek: 82%;      /* one full card + a slice of the next */
  --rail-gap: 12px;

  /* ---- Typography ------------------------------------------------------------ */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, "Times New Roman", serif;
  --tracking-eyebrow: .16em;

  /* ---- Inline icon (padlock) — used for locked / coming-soon markers ---- */
  --lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E");
}

.lock-badge {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: currentcolor;
  -webkit-mask: var(--lock-svg) center / contain no-repeat;
  mask: var(--lock-svg) center / contain no-repeat;
}

/* =========================================================
   1b. SELF-HOSTED FONTS  (variable: Fraunces display serif, Inter UI sans)
   Latin + Latin-Ext only; other scripts fall back to system-ui.
   ========================================================= */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/frontend/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/frontend/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/frontend/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/frontend/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   2. RESET / BASE ELEMENTS
   ========================================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at 70% 10%, #17251f 0, #0b1012 34%, #090b0d 70%);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

button { font: inherit; cursor: pointer; border: 0; }

h1, h2, h3, h4 { font-optical-sizing: auto; text-wrap: balance; font-weight: 500; }

/* Visible keyboard focus everywhere — the product had none. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
::selection { background: rgba(95, 224, 192, .26); color: var(--text); }

.ghost, .secondary, .primary {
  border-radius: var(--r-sm);
  padding: 11px 16px;
  font-weight: 700;
  letter-spacing: .005em;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.ghost, .secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
.ghost:hover, .secondary:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .035); }
.ghost:active, .secondary:active { transform: translateY(1px); }
.primary { background: var(--teal); color: #06110e; box-shadow: 0 10px 26px rgba(95, 224, 192, .16); }
.primary:hover { background: var(--teal-strong); box-shadow: 0 12px 30px rgba(95, 224, 192, .26); transform: translateY(-1px); }
.primary:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(95, 224, 192, .2); }
.ghost:disabled, .secondary:disabled, .primary:disabled,
.ghost[disabled], .secondary[disabled], .primary[disabled] {
  opacity: .5;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

.eyebrow {
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
.mini-label { font-size: 10px; letter-spacing: .16em; color: var(--muted); margin-bottom: 30px; }
.form-message { min-height: 18px; color: var(--amber); font-size: 11px; }
.route-view[hidden] { display: none !important; }
.runtime-diagnostics { display: none !important; }

/* =========================================================
   3. TOP BAR  (authored mobile: compact, nav in the account menu)
   ========================================================= */
.topbar {
  height: 64px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  gap: 8px;
  position: sticky;
  top: 0;
  background: rgba(9, 11, 13, .78);
  backdrop-filter: blur(18px);
  z-index: 5;
}
.app-topbar { gap: 8px; }

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.02em;
  flex: 0 0 auto;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #416f64;
  border-radius: 10px;
  color: var(--teal);
  font-size: 12px;
}
.premium-brand { gap: 10px; }
.premium-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(231, 190, 94, .16));
}
.premium-brand span {
  display: none;
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: .01em;
}

.top-actions { display: flex; gap: var(--hdr-ctl-gap); align-items: center; margin-left: auto; min-width: 0; }
/* Every action control in the header row shares one box. */
.top-actions .ghost,
.top-actions .language-control,
.top-actions .account-menu-button {
  height: var(--hdr-ctl-h);
  min-height: var(--tap-min);
  border-radius: var(--hdr-ctl-r);
  border-width: var(--hdr-ctl-bw);
  box-sizing: border-box;
}
.top-actions .ghost { display: inline-flex; align-items: center; padding: 0 15px; }

.pill { border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; font-size: 12px; color: var(--muted); display: none; }
.pill.online { color: var(--teal); border-color: #315f54; }
.pill.offline { color: var(--amber); }

/* Primary platform nav: hidden on mobile, lives in the account menu. */
.top-nav { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.top-nav a.nav-link { text-decoration: none; }
.nav-link {
  background: transparent;
  color: var(--muted);
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--text); background: rgba(255, 255, 255, .045); }
.platform-nav { gap: 4px; flex: 1; justify-content: center; min-width: 0; display: none; }

.mobile-platform-nav {
  display: grid;
  gap: 4px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.mobile-platform-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
}
.mobile-platform-nav a:hover, .mobile-platform-nav a.active { background: rgba(95, 224, 192, .08); color: var(--teal); }

.top-resource {
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
  color: var(--text);
  font-size: 12px;
}
.resource-icon { color: var(--amber); }

.icon-button {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}
.icon-button:hover { color: var(--text); border-color: #3c5058; }

/* Language control — mobile: 38px icon button with the native <select> laid
   transparently on top so it stays the real, accessible picker. */
.language-control {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--hdr-ctl-h);
  min-width: var(--hdr-ctl-h);
  height: var(--hdr-ctl-h);
  min-height: var(--tap-min);
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: var(--hdr-ctl-bw) solid rgba(95, 224, 192, .28);
  border-radius: var(--hdr-ctl-r);
  background: linear-gradient(145deg, rgba(95, 224, 192, .10), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  color: var(--text);
}
.language-control .language-icon { display: block; font-size: 15px; line-height: 1; filter: saturate(.8); }
.language-control::after {
  content: 'EN';
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 6px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--teal);
  pointer-events: none;
}
.language-control select {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.language-control select option { background: #11181b; color: var(--text); }

/* Account menu button — mobile: a single ⋮ glyph. */
.play-menu-wrap, .account-menu-wrap { position: relative; }
.play-menu-wrap { display: flex; }
.account-menu-button {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--hdr-ctl-h);
  height: var(--hdr-ctl-h);
  min-height: var(--tap-min);
  padding: 0;
  box-sizing: border-box;
  border: var(--hdr-ctl-bw) solid var(--line);
  border-radius: var(--hdr-ctl-r);
  background: rgba(255, 255, 255, .035);
}
.account-menu-button span { display: none; width: 4px; height: 4px; border-radius: 50%; background: var(--text); }
.account-menu-button::before { content: '⋮'; color: var(--text); font-size: 27px; line-height: 1; transform: translateY(-1px); }
.account-menu-button:hover, .account-menu-button[aria-expanded="true"] { border-color: #4c655f; background: rgba(95, 224, 192, .05); }

.play-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  padding: 10px;
  background: rgba(12, 18, 20, .98);
  border: 1px solid #344147;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .48);
  display: grid;
  gap: 4px;
}
.play-menu[hidden], .account-menu[hidden] { display: none; }
.play-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #0d1315;
  border-left: 1px solid #344147;
  border-top: 1px solid #344147;
  transform: translateX(-50%) rotate(45deg);
}
.play-menu a, .play-menu > span {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
.play-menu a:hover { background: rgba(95, 224, 192, .08); }
.play-menu small { color: var(--muted); font-size: 10px; }
.play-menu a small { color: var(--teal); }
.play-menu > span { opacity: .48; }

.account-menu {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(280px, calc(100vw - 24px));
  max-height: calc(100dvh - 80px);
  overflow: auto;
  padding: 8px;
  background: rgba(12, 18, 20, .99);
  border: 1px solid #344147;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .48);
  display: grid;
  z-index: 20;
}
.account-menu-identity { padding: 12px 12px 14px; display: grid; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account-menu-identity small { color: var(--muted); font-size: 10px; }
.account-menu button { border-radius: 9px; background: transparent; color: var(--text); text-align: left; padding: 11px 12px; }
.account-menu button:hover { background: rgba(255, 255, 255, .05); }
.account-menu .danger-menu-item { color: #ff9595; }

.profile-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  min-height: 42px;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  border-radius: 13px;
  text-align: left;
}
.profile-chip > span:last-child { display: grid; gap: 1px; }
.profile-chip small { color: var(--muted); font-size: 10px; }

/* =========================================================
   4. SHELL / GENERIC LAYOUT
   ========================================================= */
.shell { width: min(100% - 18px, 1180px); margin: 0 auto; padding: 45px 0 50px; }
.product-shell { width: min(100% - 16px, 720px); padding-top: 10px; }
.clean-product-shell { display: grid; gap: 48px; padding-top: 18px; padding-bottom: 42px; }

.hero { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: end; }
.hero h1 { font-size: 46px; line-height: .9; letter-spacing: -.075em; margin: 18px 0 28px; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero p { max-width: 610px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.hero-card { display: none; background: linear-gradient(160deg, #18211f, #0f1417); border: 1px solid #2b3b3a; border-radius: 24px; padding: 28px; box-shadow: var(--shadow); }

.metric { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid var(--line); padding: 18px 0; }
.metric strong { font-size: 22px; }
.metric span { font-size: 11px; color: var(--muted); }

.feature-grid { display: none; grid-template-columns: 1fr; gap: 14px; margin-top: 90px; }
.feature-grid article { padding: 26px; border: 1px solid var(--line); background: rgba(17, 22, 26, .7); border-radius: 20px; }
.feature-grid span { color: var(--amber); font-size: 11px; }
.feature-grid h3 { font-size: 20px; margin: 16px 0 10px; }
.feature-grid p { color: var(--muted); line-height: 1.6; margin: 0; }

/* =========================================================
   5. HOME LAUNCHER  (data-route="home")
   ========================================================= */
.launcher-hero {
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 60px;
  padding: 34px 24px;
  border: 1px solid rgba(207, 168, 78, .17);
  border-radius: 22px;
  background: radial-gradient(circle at 82% 35%, rgba(7, 100, 88, .22), transparent 38%), linear-gradient(145deg, rgba(18, 25, 27, .97), rgba(8, 12, 14, .98));
  overflow: hidden;
  position: relative;
}
.launcher-copy { position: relative; z-index: 1; max-width: 680px; }
.launcher-copy h1 {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 440;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 18px 0 24px;
  color: var(--text);
}
.launcher-copy p { max-width: 630px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.hero-action { margin-top: 28px; min-width: 190px; }
.launcher-emblem { display: grid; place-items: center; position: relative; grid-row: 1; max-width: 210px; margin: auto; }
.launcher-emblem::before { content: ""; position: absolute; width: 88%; aspect-ratio: 1; border-radius: 50%; background: rgba(221, 177, 76, .1); filter: blur(50px); }
.launcher-emblem img { width: min(100%, 430px); position: relative; filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .45)); }
.launcher-copy .runtime-diagnostics { margin-top: 30px; opacity: .42; }

.games-launcher { scroll-margin-top: 110px; }
.game-launch-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
/* One consistent card family. Active vs coming-soon differ only in border,
   glow and CTA colour — never in box size. */
.game-launch-card {
  min-height: 104px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(22, 31, 34, .92), rgba(11, 16, 18, .96));
  color: var(--text);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .2s, border-color .2s, background .2s;
}
.game-launch-card span:last-child { display: grid; gap: 4px; min-width: 0; }
.game-launch-card small { font-size: 10px; letter-spacing: .16em; color: var(--muted); font-style: normal; }
.game-launch-card strong { font-family: var(--font-serif); font-size: 20px; font-weight: 500; }
.game-launch-card em { font-style: normal; font-size: 12px; color: var(--muted); }
button.game-launch-card { cursor: pointer; font: inherit; }
.game-launch-card:focus-visible { box-shadow: var(--focus-ring); }
.game-launch-card.available {
  border-color: rgba(95, 224, 192, .34);
  background:
    radial-gradient(120% 80% at 82% -20%, rgba(20, 132, 113, .28), transparent 55%),
    linear-gradient(150deg, #14201f, #0b1113);
  box-shadow: inset 0 1px 0 rgba(95, 224, 192, .09), var(--shadow-md);
}
.game-launch-card.available small { color: var(--teal); }
.game-launch-card.available em { color: var(--gold-bright); }
.game-launch-card.available:hover { transform: translateY(-4px); border-color: rgba(95, 224, 192, .6); box-shadow: var(--glow-teal), var(--shadow-md); }
.game-launch-card.coming { opacity: .62; }
.game-launch-card.coming:hover { opacity: .82; border-color: var(--line-strong); }
.game-launch-card.coming .game-symbol { color: var(--muted); background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .06), transparent 70%); }

/* Icon integrated into the card — no hard UI square, just a soft radial halo. */
.game-symbol {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(217, 173, 87, .16), rgba(217, 173, 87, .02) 62%, transparent 78%);
  border: 0;
  font-size: 27px;
  line-height: 1;
  color: var(--gold-bright);
}
.game-launch-card.available .game-symbol {
  background: radial-gradient(circle at 50% 45%, rgba(95, 224, 192, .22), rgba(95, 224, 192, .03) 62%, transparent 78%);
  color: var(--teal-strong);
}

.game-lobby {
  scroll-margin-top: 120px;
  border: 1px solid rgba(207, 168, 78, .22);
  border-radius: 20px;
  padding: 26px 20px;
  background: linear-gradient(145deg, rgba(19, 28, 30, .97), rgba(9, 14, 16, .98));
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.game-lobby[hidden] { display: none; }
.lobby-heading { max-width: 670px; }
.lobby-heading h2 { font-family: var(--font-serif); font-size: 44px; margin: 12px 0; }
.lobby-heading p { color: var(--muted); }
.back-link { border: 0; background: transparent; color: var(--muted); padding: 0 0 28px; cursor: pointer; }
.lobby-actions { display: flex; gap: 10px; align-items: center; width: 100%; flex-direction: column; }
.lobby-actions button { width: 100%; }
.game-lobby .player-season-card { grid-column: 1 / -1; margin-top: 10px; max-width: none; }
.game-wrap { scroll-margin-top: 110px; margin-top: 48px; }
.game-wrap[hidden] { display: none; }
.guest-continue { width: 100%; min-height: 46px; }

/* Compact routed launcher */
.compact-launcher { min-height: 0; display: block; padding: 0; border-radius: 26px; }
.launcher-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 38px;
  align-items: center;
  padding: 28px 20px 22px;
}
.compact-launcher .launcher-copy h1 { font-size: 42px; line-height: 1.04; margin: 13px 0 18px; }
.compact-launcher .launcher-copy p { font-size: 15px; line-height: 1.62; max-width: 46ch; }
.compact-launcher .runtime-diagnostics { margin-top: 16px; }
.launcher-brand-note {
  display: none;
  align-self: stretch;
  border-left: 1px solid var(--hair-gold);
  padding-left: 30px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.launcher-brand-note img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45)) drop-shadow(0 0 20px rgba(217, 173, 87, .12));
}
.launcher-brand-note strong { font-family: var(--font-serif); font-size: 17px; font-weight: 500; letter-spacing: .01em; }
.launcher-brand-note span { font-size: 11px; line-height: 1.5; color: var(--muted); max-width: 20ch; }

.trust-points { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 24px; }
.trust-points div {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .02);
  display: grid;
  gap: 3px;
}
.trust-points strong { font-size: 11.5px; font-weight: 650; letter-spacing: .02em; color: var(--gold-bright); }
.trust-points span { font-size: 11px; line-height: 1.5; color: var(--muted); }

.inline-game-selector { border-top: 1px solid var(--hair-gold); padding: 22px 20px 24px; }
.inline-game-selector .section-heading { gap: 6px; margin: 0 0 16px; }
.inline-game-selector .section-heading.compact { align-items: flex-start; }
.inline-game-selector .game-launch-grid { margin: 0; grid-template-columns: 1fr; gap: 10px; }
.inline-game-selector .game-launch-card { min-height: 92px; padding: 14px 16px; }
.inline-game-selector .game-symbol { width: 44px; height: 44px; font-size: 24px; }
.inline-game-selector .game-launch-card strong { font-size: 19px; font-weight: 500; }

.platform-route-page {
  min-height: 440px;
  padding: 34px 24px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(19, 28, 30, .96), rgba(9, 14, 16, .98));
}
.platform-route-page h1 { font-family: var(--font-serif); font-size: clamp(42px, 6vw, 72px); max-width: 800px; margin: 18px 0; }
.platform-route-page > p { max-width: 720px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.page-placeholder { margin-top: 40px; max-width: 620px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 8px; }
.page-placeholder span { color: var(--muted); font-size: 13px; }
.inline-link { display: inline-block; text-decoration: none; margin-top: 24px; }

/* ---- Long-form route content (Learn / About) ---------------------------- */
.route-doc { margin-top: 44px; max-width: 680px; display: flex; flex-direction: column; gap: 40px; }
.route-step { display: flex; flex-direction: column; gap: 4px; }
.route-step h2 {
  font-family: var(--font-serif);
  font-size: clamp(21px, 3.4vw, 27px);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.route-n { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .62em; font-weight: 600; color: var(--amber); flex: none; }
.route-step h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 20px 0 2px; }
.route-doc p { max-width: 66ch; color: var(--muted); font-size: 16px; line-height: 1.72; margin: 8px 0; }
.route-doc strong { color: var(--text); font-weight: 600; }
.route-doc em { color: var(--text); font-style: italic; }
.route-doc ul { list-style: none; padding: 0; margin: 10px 0; max-width: 66ch; }
.route-doc ul li { position: relative; padding-left: 20px; margin: 7px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.route-doc ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--amber); transform: rotate(45deg); }
.term {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .85em;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  color: var(--text);
}
.cl-teal { color: var(--teal); font-weight: 600; }
.cl-amber { color: var(--amber); font-weight: 600; }

.learn-board { margin: 18px 0 6px; max-width: 100%; }
.learn-board-frame {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 16px;
  overflow-x: auto;
}
.learn-board-frame svg { display: block; width: 100%; height: auto; min-width: 460px; }
.learn-board figcaption { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--muted); }

.route-engine {
  margin-top: 8px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(95, 224, 192, .07), transparent 62%), var(--panel);
}
.route-engine .eyebrow { color: var(--teal); }
.route-engine h3 { margin: 10px 0 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.route-engine p { font-size: 15px; }

.about-pillars { display: grid; gap: 12px; margin: 14px 0 2px; max-width: 66ch; }
.about-pillar { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.about-pillar h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 9px; }
.about-pillar h3::before { content: ""; width: 7px; height: 7px; background: var(--teal); transform: rotate(45deg); flex: none; }
.about-pillar p { margin: 0; font-size: 14.5px; }

.about-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.about-chip {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.about-chip.is-live { color: var(--teal); border-color: var(--teal); }

/* Game-hub hero (older lobby surface still used on some routes) */
.game-hub-hero { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; margin: 4px 0 42px; }
.game-hub-hero.signed-out { grid-template-columns: minmax(0, 1fr); }
.game-hub-copy, .player-season-card, .platform-info-section {
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(18, 27, 29, .96), rgba(10, 15, 17, .96));
  box-shadow: var(--shadow);
}
.game-hub-copy { border-radius: 20px; padding: 20px 16px; overflow: hidden; position: relative; }
.game-hub-copy::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  right: -110px;
  top: -130px;
  background: radial-gradient(circle, rgba(95, 224, 192, .17), rgba(95, 224, 192, 0) 68%);
  pointer-events: none;
}
.game-title-row { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.game-title-row h1 { margin: 10px 0 12px; font-size: 38px; letter-spacing: -.055em; line-height: .95; }
.game-title-row p { margin: 0; max-width: 680px; color: var(--muted); line-height: 1.65; font-size: 14px; }
.game-live-badge { border: 1px solid #3d7769; color: var(--teal); background: rgba(95, 224, 192, .07); padding: 6px 8px; border-radius: 999px; font-size: 9px; letter-spacing: .15em; font-weight: 900; }
.game-library-strip { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
.library-game { display: flex; align-items: center; gap: 11px; min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, .018); }
.library-game.active { border-color: #3b7569; background: linear-gradient(150deg, rgba(42, 84, 74, .3), rgba(14, 24, 24, .55)); }
.library-game.coming { opacity: .58; }
.library-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; border: 1px solid #314247; color: var(--teal); font-size: 18px; }
.library-game > div { display: grid; gap: 3px; min-width: 0; }
.library-game strong { font-size: 12px; }
.library-game small { color: var(--muted); font-size: 9px; }
.player-season-card { border-radius: 26px; }
.player-season-card[hidden] { display: none !important; }
.player-season-card .mini-label { margin-bottom: 5px; }
.player-season-card .rank-block small { line-height: 1.55; }
.platform-info-section { border-radius: 22px; padding: 20px 16px; margin-top: 18px; }
.platform-info-section h2 { margin: 7px 0 8px; font-size: clamp(22px, 3vw, 32px); }
.platform-info-section p { margin: 0; max-width: 760px; color: var(--muted); line-height: 1.6; font-size: 13px; }

.player-hub-resources { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.player-hub-resources > div { min-width: 0; padding: 10px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 12px; background: rgba(255, 255, 255, .02); display: grid; gap: 5px; }
.player-hub-resources span:first-child { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.player-hub-resources strong { color: var(--text); font-size: 12px; white-space: nowrap; }
.player-status { color: var(--muted); }
.player-status.online { color: var(--teal); }
.player-status.offline { color: var(--amber); }
.player-hub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.player-hub-actions .secondary { min-height: 38px; }

/* =========================================================
   6. SECTION HEADINGS / MODE CARDS (legacy hub surface)
   ========================================================= */
.section-heading { display: flex; align-items: start; flex-direction: column; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.section-heading h2 { margin: 4px 0 0; font-size: 30px; }
.section-heading > p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; text-align: left; }
.section-heading.compact { align-items: center; }
.section-heading.compact h2 { font-size: 24px; }

.mode-section { margin: 20px 0 76px; border-top: 1px solid rgba(255, 255, 255, .035); padding-top: 12px; }
.mode-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.identity-card, .mode-card, .hub-card, .modal-card {
  background: linear-gradient(155deg, rgba(22, 29, 33, .98), rgba(12, 16, 19, .98));
  border: 1px solid #29363c;
  box-shadow: var(--shadow);
}
.mode-card { border-radius: 18px; padding: 20px; min-height: 0; display: flex; flex-direction: column; }
.mode-card.featured { border-color: #397568; background: linear-gradient(155deg, rgba(27, 55, 49, .96), rgba(12, 19, 20, .98)); }
.mode-card h3 { margin: 8px 0 10px; font-size: 25px; }
.mode-card p { color: var(--muted); line-height: 1.55; font-size: 13px; flex: 1; }
.mode-kicker { color: var(--teal); font-size: 9px; letter-spacing: .17em; font-weight: 900; }
.stake-card .mode-kicker { color: var(--amber); }
.mode-cost { display: flex; gap: 8px; margin: 14px 0; }
.mode-cost span { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); padding: 6px 8px; border-radius: 9px; font-size: 11px; }
.mode-card button { width: 100%; }
.mode-card button:disabled { opacity: .55; cursor: not-allowed; }
.mode-foot { display: flex; align-items: start; flex-direction: column; justify-content: space-between; gap: 18px; margin-top: 14px; color: var(--muted); font-size: 11px; }

.identity-card { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }
.identity-head { display: flex; gap: 14px; align-items: center; }
.identity-head > div { display: grid; gap: 3px; }
.identity-head .mini-label, .rank-block .mini-label { margin: 0; }
.identity-head strong { font-size: 18px; }
.identity-head small { color: var(--muted); }
.level-line { margin: 24px 0; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.level-line > div:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.level-line span, .level-line small { color: var(--muted); font-size: 11px; }
.level-line strong { font-size: 22px; }
.level-track { height: 6px; background: #202a2f; border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
.level-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), #85f0d6); transition: width .25s ease; }
.rank-block { display: grid; gap: 7px; }
.rank-block > strong { font-size: 22px; }
.rank-block small { color: var(--muted); }
.stars { color: var(--amber); letter-spacing: .14em; font-size: 18px; }

.hub-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 72px; }
.hub-card { border-radius: 22px; padding: 22px; min-height: 420px; }
.hub-note { color: var(--muted); font-size: 12px; line-height: 1.55; margin: -4px 0 18px; }
.segmented { display: flex; border: 1px solid var(--line-soft); padding: 3px; border-radius: var(--r-sm); background: var(--surface-inset); }
.segmented button { background: transparent; color: var(--muted); padding: 7px 10px; border-radius: var(--r-xs); font-size: 11px; font-weight: 650; transition: color .16s ease, background .16s ease; }
.segmented button:hover { color: var(--text-dim); }
.segmented button.active { background: var(--surface-3); color: var(--text); }
.segmented button:focus-visible { box-shadow: var(--focus-ring); }

.leaderboard-list, .achievement-list { display: grid; gap: 8px; }
.leaderboard-entry {
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #202c31;
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.leaderboard-entry .position { color: var(--amber); font-size: 12px; }
.leaderboard-entry > div { display: grid; gap: 2px; }
.leaderboard-entry small { color: var(--muted); font-size: 10px; }
.leader-rate { text-align: left; grid-column: 3; }
.leader-rate strong { color: var(--teal); }
.leaderboard-empty { color: var(--muted); border: 1px solid var(--line-soft); background: var(--surface-inset); border-radius: var(--r-md); padding: 18px; text-align: center; font-size: 12px; }
.leaderboard-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.leaderboard-tabs::-webkit-scrollbar { display: none; }
.leaderboard-tabs button { white-space: nowrap; }

.achievement-item { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #202c31; border-radius: 12px; opacity: .72; }
.achievement-item.unlocked { opacity: 1; border-color: #315f54; background: rgba(95, 224, 192, .035); }
.achievement-mark { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #182125; color: var(--muted); }
.achievement-item.unlocked .achievement-mark { color: var(--teal); }
.achievement-item > div { display: grid; gap: 2px; }
.achievement-item small { color: var(--muted); font-size: 10px; }
.subtle-badge { border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; color: var(--muted); font-size: 10px; }

.legend-podium { position: relative; overflow: hidden; border-width: 1px; }
.legend-podium::before { content: "LEGEND"; position: absolute; right: 8px; top: 4px; font-size: 7px; letter-spacing: .16em; opacity: .55; }
.podium-1 { border-color: #b99042; background: linear-gradient(90deg, rgba(240, 179, 92, .12), rgba(255, 255, 255, .015)); }
.podium-2 { border-color: #75848b; background: linear-gradient(90deg, rgba(188, 202, 208, .09), rgba(255, 255, 255, .015)); }
.podium-3 { border-color: #8b6345; background: linear-gradient(90deg, rgba(181, 118, 72, .09), rgba(255, 255, 255, .015)); }
.podium-1 .position { color: #ffd477; }
.podium-2 .position { color: #d5e0e5; }
.podium-3 .position { color: #d49a71; }

.opponent-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; }
.player-identity { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* =========================================================
   7. BACKGAMMON BOARD (shared board primitive + legal-move states)
   ========================================================= */
.board {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  background: radial-gradient(ellipse at center, #162528 0, #0b1417 58%, #05090b 100%);
  border: 10px solid #171d20;
  outline: 2px solid rgba(213, 169, 70, .55);
  outline-offset: -6px;
  border-radius: 12px;
  padding: 8px;
  min-height: min(64vh, 520px);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #050708, inset 0 0 45px rgba(0, 0, 0, .82), 0 18px 34px rgba(0, 0, 0, .42);
}
.board-card {
  background: radial-gradient(circle at 50% 42%, rgba(30, 112, 101, .12), transparent 45%), linear-gradient(145deg, #11191c, #070b0d);
  border: 1px solid rgba(218, 174, 79, .34);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .025);
}

.point {
  position: relative;
  min-height: min(58vh, 480px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: default;
  border-radius: 8px;
  outline: none;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.point:nth-child(n+13) { align-items: flex-end; }

.triangle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: min(47vh, 390px) solid rgba(219, 174, 76, .3);
  filter: drop-shadow(0 0 7px rgba(219, 174, 76, .08));
  pointer-events: none;
}
.point:nth-child(n+13) .triangle { border-top: 0; border-bottom: min(47vh, 390px) solid rgba(53, 178, 151, .26); }

.checker-stack { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; align-items: center; pointer-events: none; }
.point:nth-child(n+13) .checker-stack { flex-direction: column-reverse; }
.checker {
  width: clamp(18px, 5.2vw, 26px);
  height: clamp(18px, 5.2vw, 26px);
  border-radius: 50%;
  border: 2px solid #d8d0bf;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.checker.p1 {
  background: radial-gradient(circle at 36% 28%, #ffe7a5, #cc9740 43%, #5f3b13 100%);
  border-color: #f0cb70;
  box-shadow: inset 0 0 0 3px rgba(50, 25, 5, .2), 0 5px 12px rgba(0, 0, 0, .55), 0 0 8px rgba(225, 177, 76, .18);
}
.checker.p2 {
  background: radial-gradient(circle at 36% 28%, #a8ffec, #36aa93 43%, #0d4e45 100%);
  border-color: #8af4dc;
  box-shadow: inset 0 0 0 3px rgba(0, 32, 28, .22), 0 5px 12px rgba(0, 0, 0, .55), 0 0 8px rgba(95, 224, 192, .18);
}
/* "You" stays teal from every orientation. */
.checker.you { background: #4bbfa6; }
.checker.opponent { background: #e5b86d; }

.point-index { position: absolute; bottom: 5px; font-size: 7px; color: #aa8a67; z-index: 3; pointer-events: none; }
.point:nth-child(n+13) .point-index { top: 5px; bottom: auto; }

.point.legal-source { cursor: pointer; background: rgba(95, 224, 192, .055); }
.point.legal-source:hover { background: rgba(95, 224, 192, .13); box-shadow: inset 0 0 0 2px rgba(95, 224, 192, .28); }
.point.legal-source:hover .checker { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .48), 0 0 0 2px rgba(95, 224, 192, .18); }
.point.selected { cursor: pointer; background: rgba(240, 179, 92, .16); box-shadow: inset 0 0 0 2px rgba(240, 179, 92, .8), 0 0 20px rgba(240, 179, 92, .14); }
.point.selected .checker { box-shadow: 0 5px 16px rgba(0, 0, 0, .5), 0 0 0 3px rgba(240, 179, 92, .5); }
.point.legal-destination { cursor: pointer; background: rgba(95, 224, 192, .14); box-shadow: inset 0 0 0 2px rgba(95, 224, 192, .72); }
.point.legal-destination::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(95, 224, 192, .92);
  box-shadow: 0 0 0 6px rgba(95, 224, 192, .12), 0 0 20px rgba(95, 224, 192, .45);
  pointer-events: none;
}
.point.legal-destination:hover { background: rgba(95, 224, 192, .22); }
.point:focus-visible { box-shadow: inset 0 0 0 2px var(--text); }
.point.legal-hit { background: rgba(255, 107, 107, .12); box-shadow: inset 0 0 0 2px rgba(255, 107, 107, .8); }
.point.legal-hit::after { background: rgba(255, 107, 107, .95); box-shadow: 0 0 0 6px rgba(255, 107, 107, .14), 0 0 22px rgba(255, 107, 107, .48); }
.point.last-from, .point.last-to { position: relative; }
.point.last-from { box-shadow: inset 0 0 0 2px rgba(240, 179, 92, .28); }
.point.last-to { box-shadow: inset 0 0 0 2px rgba(95, 224, 192, .30); }
.point.last-from::before, .point.last-to::before {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 6;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  pointer-events: none;
  opacity: .72;
}
.point.last-from::before { content: 'LAST FROM'; color: var(--amber); background: rgba(240, 179, 92, .10); }
.point.last-to::before { content: 'LAST TO'; color: var(--teal); background: rgba(95, 224, 192, .10); }
.point.legal-source.last-from::before, .point.legal-destination.last-to::before { opacity: .45; }
.legal-special { border-color: rgba(95, 224, 192, .55) !important; box-shadow: 0 0 0 2px rgba(95, 224, 192, .08); }
.selected-special { border-color: rgba(240, 179, 92, .8) !important; background: rgba(240, 179, 92, .12) !important; }

.resume-control { border-color: rgba(240, 179, 92, .55) !important; background: rgba(240, 179, 92, .10) !important; color: var(--amber) !important; }
.resume-control[hidden] { display: none !important; }

/* Dice / turn */
.dice-row { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 4px; min-height: 92px; flex-wrap: wrap; }
.dice { display: flex; gap: 8px; }
.dice-block { display: grid; justify-items: center; gap: 7px; }
.dice-remaining { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.die {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #f4f1e8;
  color: #121719;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  padding: 7px;
  font-size: 0;
  transform-origin: center;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  animation: diceSettle .34s cubic-bezier(.2, .8, .2, 1);
}
@keyframes diceSettle {
  0% { transform: rotate(-18deg) scale(.65); opacity: .25; }
  70% { transform: rotate(5deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
.die.consumed { opacity: .24; transform: scale(.84); filter: grayscale(1); }
.pip { width: 7px; height: 7px; border-radius: 50%; place-self: center; }
.pip.on { background: #121719; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .16); }
.turn-text { font-size: 13px; color: var(--muted); }
.turn-center { display: flex; align-items: center; gap: 15px; }
.turn-timer {
  --timer-progress: 0deg;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--teal) var(--timer-progress), rgba(255, 255, 255, .08) 0);
}
.turn-timer::before { content: ''; position: absolute; inset: 4px; border-radius: inherit; background: #11171a; }
.turn-timer strong, .turn-timer span { position: relative; z-index: 1; }
.turn-timer strong { font-size: 14px; line-height: 1; }
.turn-timer span { position: absolute; bottom: 9px; font-size: 6px; letter-spacing: .13em; color: var(--muted); }
.turn-timer.urgent { background: conic-gradient(var(--red) var(--timer-progress), rgba(255, 255, 255, .08) 0); }
.turn-timer.urgent strong { color: var(--red); }

.board-controls, .board-special-controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.board-special-controls { padding: 0 18px 10px; }
.board-special-controls button:disabled, .board-controls button:disabled, .hero-actions button:disabled { opacity: .45; cursor: not-allowed; }

.presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 3px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.presence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.presence.online { color: var(--teal); border-color: rgba(95, 224, 192, .3); }
.presence.online .presence-dot { background: var(--teal); box-shadow: 0 0 10px rgba(95, 224, 192, .7); }
.presence.reconnecting { color: var(--amber); border-color: rgba(240, 179, 92, .34); }
.presence.reconnecting .presence-dot { background: var(--amber); animation: presencePulse 1s infinite; }
.presence.unknown { color: var(--muted); }
@keyframes presencePulse { 50% { opacity: .3; transform: scale(.72); } }

.player-row { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-weight: 750; padding: 4px 4px 14px; font-size: 12px; }
.player-row.bottom { padding: 14px 4px 4px; }
.dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; margin-right: 8px; }
.dot.amber { background: var(--amber); }
.dot.teal { background: var(--teal); }

.match-console { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.match-console-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.match-console-head > div { display: grid; gap: 3px; }
.match-console-head .mini-label { margin: 0; }
.log-hint { color: var(--muted); font-size: 10px; }
.game-log { list-style: none; padding: 0; margin: 0; max-height: 118px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(7, 10, 12, .45); }
.game-log li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .045); color: var(--muted); font-size: 11px; }
.game-log li:last-child { border-bottom: 0; }
.game-log time { font-variant-numeric: tabular-nums; opacity: .55; }
.game-log .log-move span { color: var(--text); }
.game-log .log-hit span { color: var(--red); }
.game-log .log-dice span { color: var(--amber); }
.game-log .log-success span { color: var(--teal); }
.game-log .log-warning span { color: var(--amber); }
.empty-log { display: block !important; }
.sound-toggle[aria-pressed="false"] { opacity: .65; }

.opening-roll-panel { margin: 0 auto 16px; max-width: 520px; padding: 13px 18px; border: 1px solid #3c5d58; border-radius: 14px; background: rgba(17, 30, 29, .92); text-align: center; }
.opening-roll-panel .mini-label { margin: 0 0 9px; }
.opening-roll-dice { display: flex; align-items: center; justify-content: center; gap: 18px; }
.opening-roll-dice > div { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.opening-die { margin: 0; }
.opening-roll-panel small { display: block; color: var(--muted); margin-top: 8px; }

/* Settings-driven presentation */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
.hide-legal-highlights .point.legal-source,
.hide-legal-highlights .point.legal-destination,
.hide-legal-highlights .point.legal-hit { box-shadow: none !important; background: transparent !important; }
.hide-checker-highlights .checker.selected-checker { box-shadow: 0 4px 10px rgba(0, 0, 0, .4) !important; }

/* =========================================================
   8. BACKGAMMON HUB  (data-route="backgammon")
   Authored mobile: single column, 2x2 status HUD, stacked dashboard.
   ========================================================= */
body[data-route="backgammon"] { min-height: 100vh; overflow-x: hidden; }
body[data-route="backgammon"] .site-footer { display: none; }
body[data-route="backgammon"] .app-topbar { height: 62px; }
body[data-route="backgammon"] .product-shell { width: min(100% - 16px, 720px); padding: 10px 0 16px; gap: 0; }

.backgammon-hub { display: grid; gap: 10px; }
.backgammon-hub[hidden] { display: none; }
/* Grid/flex children default to min-width:auto and would let the horizontal
   mode / season rails push the whole hub wider than the viewport — pin them. */
.backgammon-hub > *,
.backgammon-dashboard > * { min-width: 0; }
.hub-mode-grid, .season-rail-track { min-width: 0; }

.backgammon-hub-head {
  display: grid;
  grid-template-columns: var(--tap-min) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  position: relative;
}
.backgammon-hub-head > div { display: grid; gap: 3px; min-width: 0; }
.backgammon-hub-head > div strong { font-family: var(--font-serif); font-size: 22px; }
/* Explicit track placement for the three head slots. Without this the brand
   line's absolute positioning at xl would pull it out of flow and let the
   Friends button fall into the CENTRE track; pinning each child to its own
   column keeps back-link / title / Friends symmetric at every width. */
.backgammon-hub-head > .back-link { grid-column: 1; justify-self: start; }
.backgammon-hub-head > .game-brand-line { grid-column: 2; }
.backgammon-hub-head > .hub-head-action { grid-column: 3; justify-self: end; }
.backgammon-hub-head .back-link {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
  padding: 0;
}
.backgammon-hub-head .back-link::before { content: '‹'; font-size: 30px; line-height: 1; }
/* Title never collides with the back arrow or the status pill. */
.backgammon-hub-head .game-brand-line { overflow: hidden; }
.backgammon-hub-head .game-brand-line > strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
.backgammon-hub-head .player-status { flex: 0 0 auto; }

.game-brand-line {
  position: static;
  transform: none;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
  font-size: 12px;
}
.game-brand-line > span { font-size: 9px; letter-spacing: .16em; color: var(--teal); font-weight: 900; }
.game-brand-line > i { font-style: normal; color: #6c797c; }
.game-brand-line > strong { font-size: 18px !important; }
.connection-pill { font-size: 10px; }

/* Status HUD — a deliberate two-row mobile composition:
   row 1  = profile (avatar + restored name) · Level
   row 2  = VIP · Table Points · Table Coins  (one .hud-stat family)
   Not the desktop bar shrunk — the rows are authored here and the xl HUD
   expands from them. */
.game-status-bar {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  min-height: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--surface-2), #0b1013);
  box-shadow: var(--shadow-sm);
}
.status-cluster { display: flex; align-items: center; gap: 10px; padding: 14px; }
/* Row 1 of the two-row mobile HUD: profile (avatar + name) · Level. */
.status-left {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 0;
  padding: 0 9px 7px;
  border: 0 !important;
  overflow: hidden;
}
/* Row 2: VIP · Table Points · Table Coins. */
.status-center {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  overflow: hidden;
}
.status-icon-button, .status-avatar-button {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.status-icon-button:hover, .status-avatar-button:hover { border-color: var(--teal); }
.status-avatar-button { padding: 0; }
.status-avatar-button .profile-avatar { width: 38px; height: 38px; }
.friends-icon-button { width: 34px; height: 34px; border-radius: 9px; font-size: 18px; }
.friends-icon-button span { font-size: 21px; color: #dfb45a; }

/* Mobile HUD hides the space-heavy identity controls; Level/XP stays. */
/* The old duplicate status-bar gear + its divider were removed; the profile
   button (avatar + restored name) and the Level cell stay visible. */
.game-status-bar .status-left #settingsBtn,
.game-status-bar .status-left .hud-vertical-divider { display: none; }

.level-status {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 6px;
}
.level-status > span { font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; color: var(--muted); }
.level-status > span strong { font-size: 14px; }
.level-status > small { font-size: 8px; white-space: nowrap; text-align: right; color: var(--muted); }
.level-status .level-track { grid-column: auto; min-width: 0; height: 6px; }

.resource-segment {
  display: flex;
  min-width: 0;
  min-height: 56px;
  padding: 4px 3px;
  gap: 5px;
  justify-content: center;
  align-items: center;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .06) !important;
  overflow: hidden;
  background: rgba(255, 255, 255, .018);
  color: var(--text);
  text-align: left;
}
.resource-segment:last-child { border-right: 0 !important; }
.resource-segment > span:last-child { display: grid; gap: 1px; }
.resource-segment strong { font-size: 10px; line-height: 1; white-space: nowrap; }
.resource-segment small { display: none; font-size: 8px; color: var(--muted); white-space: nowrap; }
.resource-progress-copy, .energy-copy, .chips-resource > span:last-child { min-width: 0; display: grid; gap: 1px; }
.resource-progress, .energy-meter { height: 3px; }
.resource-rail .vip-resource { background: radial-gradient(circle at 28% 50%, rgba(36, 203, 187, .13), transparent 40%), rgba(221, 180, 90, .025); }
.resource-capsule { min-width: 104px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); display: grid; gap: 2px; }
.resource-capsule > span, .hud-action small { font-size: 8px; letter-spacing: .12em; color: var(--muted); }
.resource-capsule strong { font-size: 14px; }
.resource-capsule small { font-size: 8px; color: var(--muted); }
.resource-capsule.locked-feature { opacity: .55; color: var(--text); text-align: left; }
.hud-action { min-width: 82px; padding: 8px; border-radius: 12px; background: transparent; color: var(--text); display: grid; place-items: center; gap: 2px; }
.hud-action > span { font-size: 19px; color: #dfb45a; }
.hud-action strong { font-size: 10px; }
.hud-action.locked-feature { opacity: .55; }

.energy-resource { position: relative; overflow: hidden; }
.energy-resource::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(86, 230, 206, .12) 46%, transparent 70%);
  transform: translateX(-120%);
  animation: energy-sweep 2.8s linear infinite;
  pointer-events: none;
}
.energy-bolt { font-size: 28px; color: #65ebce; text-shadow: 0 0 12px rgba(75, 235, 206, .55); animation: energy-pulse 1.8s ease-in-out infinite; }
.energy-copy { min-width: 76px; }
.energy-meter { display: block; width: 76px; margin-top: 3px; border-radius: 99px; background: #213036; overflow: hidden; }
.energy-meter b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d5aa4e, #5fe0c0); box-shadow: 0 0 9px rgba(95, 224, 192, .6); transition: width .45s ease; }
@keyframes energy-sweep { to { transform: translateX(120%); } }
@keyframes energy-pulse { 50% { transform: scale(1.08); filter: brightness(1.25); } }

.vip-capsule { min-width: 126px; padding: 6px 11px; border-radius: 12px; border: 1px solid rgba(221, 180, 90, .25); background: radial-gradient(circle at 25% 35%, rgba(38, 195, 181, .1), transparent 38%), rgba(221, 180, 90, .035); color: var(--text); display: flex; align-items: center; gap: 8px; text-align: left; }
.vip-capsule > span:last-child { display: grid; gap: 1px; }
.vip-capsule small { font-size: 8px; color: var(--muted); }
/* Currency marks — individually cropped, centred assets (split from the old
   clash-crystal-icons-v1 sprite, which distorted them). background-size:contain
   keeps them undistorted; the source art is trimmed so it fills its box. */
.clash-crystal-icon {
  display: inline-block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4));
}
.vip-crystal-icon { width: 42px; height: 42px; background-image: url('/frontend/assets/economy/crystal-vip-v1.png'); }
.clash-chip-icon { width: 24px; height: 24px; background-image: url('/frontend/assets/economy/chip-clash-v1.png'); }
.chips-capsule strong { display: flex; align-items: center; gap: 4px; }
.chips-capsule .clash-chip-icon { margin-left: -3px; }
.chip-price { display: inline-flex; align-items: center; gap: 3px; }
.chip-price .clash-chip-icon { width: 15px; height: 15px; }
.vip-capsule:not(:disabled) .vip-crystal-icon { animation: vip-crystal-pulse 3.8s ease-in-out infinite; }
@keyframes vip-crystal-pulse { 0%, 100% { filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .42)) brightness(1); } 50% { filter: drop-shadow(0 5px 11px rgba(43, 218, 202, .3)) brightness(1.12); } }

/* Dashboard */
.backgammon-dashboard { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
.dashboard-side, .mode-stage {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: linear-gradient(158deg, var(--surface-1), #0b1114);
  box-shadow: var(--shadow-sm);
}
.dashboard-side { padding: 14px; }
.rank-showcase { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
.rank-frame { width: 100%; padding: 18px 10px; border: 1px solid rgba(221, 180, 90, .35); border-radius: 18px; background: radial-gradient(circle at 50% 15%, rgba(219, 174, 72, .15), transparent 62%); display: grid; place-items: center; gap: 10px; }
.rank-frame > div { display: grid; gap: 3px; }
.rank-frame small, .rank-showcase > small { color: var(--muted); font-size: 10px; }
.rank-title { font-family: var(--font-serif); font-size: 22px; }

/* Seasonal Rank + Seasonal Achievement — mobile-first: two compact summary
   cards side by side so the pair costs ~one third of a phone screen instead
   of two full screens. Badge art stays large enough to read; glow is never
   clipped. md restacks / re-expands, xl is the locked split panel. */
.split-season-panel {
  /* One shared artwork box for BOTH emblems, so the rank crest and the
     achievement crest can never drift to different sizes again. Retuned
     per breakpoint in the PC-T1C2 section at the end of this file. */
  --season-art: 104px;
  /* One reserved lower-text region for BOTH halves at every breakpoint, so
     the rank title + stars and the achievement title occupy the same band. */
  --season-foot: 46px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: none !important;
  /* Equal tracks, and halves that FILL their track. align-items:center comes
     in from the .rank-showcase flex model this panel also carries; as a grid
     container that centred each half instead of stretching it, which is what
     used to make the two halves measure differently. */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
}
.season-panel-half {
  min-height: 0;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  overflow: visible;
}
.season-panel-half + .season-panel-half { border-left: 1px solid rgba(221, 180, 90, .18); }
.split-season-panel .rank-emblem { width: var(--season-art) !important; height: var(--season-art) !important; margin: 0 auto !important; transform: none; }
.achievement-legend-emblem {
  width: var(--season-art) !important;
  height: var(--season-art) !important;
  margin: 0 auto;
  background-image: url('/frontend/assets/ranks/badges/legend.png');
  background-repeat: no-repeat;
  /* Perceived-scale balance against the rank emblem, in an identical box.
     Measured opaque bounds of the two 512px sources: the rank badge fills
     443x429 (area 0.725) and the achievement crest 436x490 (area 0.815), so
     at background-size:contain the achievement art reads ~14% taller and
     ~12% heavier. Filling 90% of the same box matches them. The rank
     emblem's own sizing and its effect-escalation transform are untouched. */
  background-size: 90%;
  background-position: center;
  filter: drop-shadow(0 10px 16px rgba(221, 180, 90, .24));
  animation: rank-legend 4.2s ease-in-out infinite;
}
.season-achievement-panel {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(221, 180, 90, .25);
  border-radius: 14px;
  background: radial-gradient(circle at 100% 0, rgba(23, 119, 102, .12), transparent 48%), rgba(255, 255, 255, .02);
  text-align: left;
  display: grid;
  gap: 7px;
}
.season-achievement-head { display: flex; justify-content: space-between; gap: 8px; }
.season-achievement-head span { font-size: 8px; letter-spacing: .13em; color: #e1b85d; }
.season-achievement-head small { font-size: 8px; color: var(--teal); }
.season-achievement-panel > strong { font-family: var(--font-serif); font-size: 15px; }
.season-achievement-panel p { margin: 0; min-height: 30px; font-size: 9px; line-height: 1.45; color: var(--muted); }
.season-achievement-panel > small { font-size: 8px; color: var(--muted); }
.season-achievement-track { height: 6px; border-radius: 999px; background: #202c30; overflow: hidden; }
.season-achievement-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #d9ab4d, #5fe0c0); transition: width .45s ease; }
.rank-progress-note { width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-inset); text-align: left; display: grid; gap: 4px; }
.rank-progress-note span { font-size: 8px; letter-spacing: .14em; color: var(--muted); }
.rank-progress-note strong { font-size: 11px; }
.rank-progress-note small { font-size: 9px; color: var(--muted); }
.cosmetic-slot { width: 100%; margin-top: auto; padding: 13px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-inset); text-align: left; display: grid; gap: 4px; }
.cosmetic-slot span { font-size: 8px; letter-spacing: .14em; color: var(--muted); }
.cosmetic-slot strong { font-size: 11px; }
.cosmetic-slot small { font-size: 9px; color: var(--muted); line-height: 1.4; }

.mode-stage { padding: 16px 12px; }

/* CHOOSE GAME — mobile-first: a horizontal scroll-snap rail. One full card
   plus a slice of the next signals swipeability; the scrollbar is hidden but
   scrolling (touch, wheel/trackpad, and keyboard on the focusable rail) still
   works. Casual + Ranked come first in the DOM, then the locked modes.
   md turns this back into a 2-up grid (rail kept in portrait), xl into the
   fixed 2x2 arena console. */
.hub-mode-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-peek);
  grid-template-columns: none;
  gap: var(--rail-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.hub-mode-grid::-webkit-scrollbar { display: none; }
.hub-mode-grid:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }
.hub-mode-card {
  position: relative;
  min-height: 0;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .018);
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: 2px;
  scroll-snap-align: start;
}
.hub-mode-card.featured { border-color: rgba(221, 180, 90, .48); background: radial-gradient(circle at 50% 0, rgba(25, 130, 111, .17), transparent 48%), rgba(255, 255, 255, .025); }
.hub-mode-card.locked { opacity: .55; }
.hub-mode-card.unlocked { opacity: 1; border-color: rgba(95, 224, 192, .3); }
.mode-status { min-height: 16px; font-size: 8px; letter-spacing: .12em; color: var(--muted); }
.mode-status.available { color: var(--teal); }
.mode-art { width: 88px; height: 88px; margin: 6px auto 10px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(221, 180, 90, .35); background: rgba(221, 180, 90, .07); color: #e1b85d; font-size: 25px; }
.hub-mode-card h2 { font-family: var(--font-serif); font-size: 20px; margin: 0; }

.central-arena-grid .mode-art {
  background-image: url('/frontend/assets/game-mode-medallions-v1.png') !important;
  background-repeat: no-repeat !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
}
.central-arena-grid .mode-casual .mode-art { background-position: 0 0 !important; }
.central-arena-grid .mode-ranked .mode-art { background-position: 100% 0 !important; }
.central-arena-grid .mode-stakes .mode-art { background-position: 0 100% !important; }
.central-arena-grid .mode-tournament .mode-art { background-position: 100% 100% !important; }

/* SEASON & EVENTS — mobile-first: the heading stays put and the three locked
   cards become a compact horizontal rail (.season-rail-track) so the section
   costs a fraction of a screen. Lock badges + requirement text are preserved
   on each card. md/xl restore the 3-up / vertical stack. */
.season-rail { display: block; align-content: start; }
.season-rail > .eyebrow { display: block; margin-bottom: 10px; }
.season-rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64%;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.season-rail-track::-webkit-scrollbar { display: none; }
.season-rail-track:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }
.rail-card {
  position: relative;
  min-height: 0;
  padding: 14px 14px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .012));
  display: grid;
  align-content: start;
  gap: 6px;
  scroll-snap-align: start;
}
.rail-card > span { font-size: 8.5px; letter-spacing: .16em; color: var(--teal); font-weight: 700; }
.rail-card strong { font-family: var(--font-serif); font-size: 16px; font-weight: 500; }
.rail-card small { font-size: 9.5px; line-height: 1.45; color: var(--muted); }
.rail-card .lock-badge { position: absolute; right: 13px; top: 13px; width: 12px; height: 12px; color: var(--faint); }
.rail-card.locked { opacity: 1; }
.rail-card.locked strong { color: var(--text-dim); }

.backgammon-bottom-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-1), #0b1013);
  box-shadow: var(--shadow-sm);
  margin-bottom: env(safe-area-inset-bottom);
}
.backgammon-bottom-bar button { min-height: 58px; background: transparent; color: var(--text); display: grid; grid-template-columns: auto auto; place-content: center; align-items: center; gap: 2px 8px; transition: background .16s ease, color .16s ease; }
.backgammon-bottom-bar button + button { border-left: 1px solid var(--line); }
.backgammon-bottom-bar button:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
.backgammon-bottom-bar button:nth-child(4) { border-top: 1px solid var(--line); }
.backgammon-bottom-bar button > span { grid-row: 1 / 3; color: var(--gold-bright); font-size: 20px; transition: transform .16s ease; }
.backgammon-bottom-bar strong { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.backgammon-bottom-bar small { font-size: 8px; color: var(--muted); }
.backgammon-bottom-bar button:not(:disabled):hover { background: rgba(95, 224, 192, .06); }
.backgammon-bottom-bar button:not(:disabled):hover > span { transform: translateY(-1px); }
.backgammon-bottom-bar button:not(:disabled):hover strong { color: var(--text); }
.backgammon-bottom-bar button:not(:disabled):active { background: rgba(95, 224, 192, .1); }
.backgammon-bottom-bar button:focus-visible { box-shadow: var(--focus-ring); }
.backgammon-bottom-bar .locked { opacity: .55; }

/* =========================================================
   9. RANK EMBLEM — art atlas + reactive aura
   ========================================================= */
.rank-emblem {
  position: relative;
  width: 184px;
  height: 184px;
  margin: 2px auto 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  --rank-aura: rgba(194, 126, 51, .42);
  --rank-spark: rgba(240, 177, 76, .7);
  /* Tier-band escalation (BG-PC17): only these three custom properties vary
     per rank below — the keyframe shapes stay shared (rank-breathe covers
     Novice through Mythical Honor) so nine ranks never need nine
     independent animations. Defaults here are exactly the pre-BG-PC17
     Novice/band-1 values, so Novice itself is visually unchanged. */
  --rank-glow: rgba(14, 199, 178, .16);
  --rank-brightness: 1.05;
  --rank-scale: 1.012;
}
.rank-emblem-art {
  position: absolute;
  inset: 0;
  /* Painted per-rank badges (V3) — transparent RGBA, own restrained rim-glow.
     No CSS aura layered on top (the old ::before / ::after are gone). */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .38));
  animation: rank-breathe 5.6s ease-in-out infinite;
}
.rank-emblem.rank-novice .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/novice.png'); animation: rank-breathe 7.2s ease-in-out infinite !important; }
.rank-emblem.rank-elite { --rank-glow: rgba(14, 199, 178, .21); --rank-brightness: 1.058; --rank-scale: 1.014; }
.rank-emblem.rank-elite .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/elite.png'); animation-duration: 7s; }
.rank-emblem.rank-master { --rank-glow: rgba(14, 199, 178, .27); --rank-brightness: 1.065; --rank-scale: 1.016; }
.rank-emblem.rank-master .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/master.png'); animation-duration: 6.4s; }
.rank-emblem.rank-grandmaster { --rank-glow: rgba(212, 172, 96, .24); --rank-brightness: 1.07; --rank-scale: 1.017; }
.rank-emblem.rank-grandmaster .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/grandmaster.png'); animation-duration: 5.8s; }
.rank-emblem.rank-champion { --rank-glow: rgba(230, 191, 112, .32); --rank-brightness: 1.078; --rank-scale: 1.019; }
.rank-emblem.rank-champion .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/champion.png'); animation-duration: 5.2s; }
.rank-emblem.rank-mythic { --rank-glow: rgba(64, 208, 255, .3); --rank-brightness: 1.085; --rank-scale: 1.02; }
.rank-emblem.rank-mythic .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/mythic.png'); animation-duration: 4.8s; }
.rank-emblem.rank-mythical_honor { --rank-glow: rgba(96, 226, 255, .4); --rank-brightness: 1.095; --rank-scale: 1.022; }
.rank-emblem.rank-mythical_honor .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/mythical_honor.png'); animation-duration: 4.4s; }
.rank-emblem.rank-mythical_glory .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/mythical_glory.png'); animation: rank-celestial 4.6s ease-in-out infinite; }
.rank-emblem.rank-legend .rank-emblem-art { background-image: url('/frontend/assets/ranks/badges/legend.png'); animation: rank-legend 3.6s ease-in-out infinite; }
@keyframes rank-breathe {
  0%, 100% { transform: scale(.985); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .42)) brightness(.98); }
  50% { transform: scale(var(--rank-scale, 1.012)); filter: drop-shadow(0 17px 25px var(--rank-glow, rgba(14, 199, 178, .16))) brightness(var(--rank-brightness, 1.05)); }
}
/* Mythical Glory only — a distinct celestial treatment (teal + a faint
   violet accent) rather than another step of the shared cyan-energy band,
   using a second drop-shadow() layer in the same filter (no extra DOM,
   no extra composited pseudo-element). The 0% frame keeps the violet
   layer present at zero blur/alpha so it interpolates smoothly instead of
   popping in. */
@keyframes rank-celestial {
  0%, 100% { transform: scale(.985); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .4)) drop-shadow(0 0 0 rgba(198, 158, 255, 0)) brightness(1); }
  50% { transform: scale(1.024); filter: drop-shadow(0 18px 26px rgba(110, 226, 255, .34)) drop-shadow(0 0 20px rgba(198, 158, 255, .24)) brightness(1.1); }
}
@keyframes rank-legend {
  0%, 100% { transform: scale(.985); filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .46)) drop-shadow(0 0 0 rgba(90, 220, 255, 0)) brightness(1); }
  50% { transform: scale(1.02); filter: drop-shadow(0 18px 32px rgba(229, 184, 74, .3)) drop-shadow(0 0 16px rgba(90, 220, 255, .18)) brightness(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .rank-emblem-art { animation: none; }
}
.reduced-motion .rank-emblem-art { animation: none !important; }

/* =========================================================
   9b. RANK AVATAR FRAME — painted ring around a player avatar
   Nine per-rank PNGs (assets/ranks/frames/<code>.png): transparent
   centre, opening ~= 60.5% of the square canvas. The frame renders at
   100 / 60.5 ~= 165% of the avatar, centred on it, so the avatar circle
   fills the opening. A `rank-<code>` class next to the avatar (set by
   state.js#setAvatarRank, called from profile.js / arena.js) switches it
   on; with no class there is no ::after, so unranked / guest avatars stay
   bare. Slots: lobby HUD (.profile-avatar), profile modal
   (.profile-avatar.large), arena player cards (.arena-avatar, where the
   avatar drops into the opening and the conic turn-timer ring stays as
   the outer sweep).
   ========================================================= */
.profile-avatar[class*="rank-"],
.arena-avatar[class*="rank-"] { position: relative; overflow: visible; }

.profile-avatar[class*="rank-"]::after,
.arena-avatar[class*="rank-"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 165%;
  height: 165%;
  transform: translate(-50%, -50%);
  background: center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

.profile-avatar.rank-novice::after,         .arena-avatar.rank-novice::after         { background-image: url('/frontend/assets/ranks/frames/novice.png'); }
.profile-avatar.rank-elite::after,          .arena-avatar.rank-elite::after          { background-image: url('/frontend/assets/ranks/frames/elite.png'); }
.profile-avatar.rank-master::after,         .arena-avatar.rank-master::after         { background-image: url('/frontend/assets/ranks/frames/master.png'); }
.profile-avatar.rank-grandmaster::after,    .arena-avatar.rank-grandmaster::after    { background-image: url('/frontend/assets/ranks/frames/grandmaster.png'); }
.profile-avatar.rank-champion::after,       .arena-avatar.rank-champion::after       { background-image: url('/frontend/assets/ranks/frames/champion.png'); }
.profile-avatar.rank-mythic::after,         .arena-avatar.rank-mythic::after         { background-image: url('/frontend/assets/ranks/frames/mythic.png'); }
.profile-avatar.rank-mythical_honor::after, .arena-avatar.rank-mythical_honor::after { background-image: url('/frontend/assets/ranks/frames/mythical_honor.png'); }
.profile-avatar.rank-mythical_glory::after, .arena-avatar.rank-mythical_glory::after { background-image: url('/frontend/assets/ranks/frames/mythical_glory.png'); }
.profile-avatar.rank-legend::after,         .arena-avatar.rank-legend::after         { background-image: url('/frontend/assets/ranks/frames/legend.png'); }

/* Lobby HUD: the compact two-row mobile bar clips (overflow:hidden) and its
   identity row is short, so the framed avatar is held back here — but only
   here. The md/xl status bars have real vertical room, so they scale the same
   selector up (see the 768px and 1181px blocks) instead of leaving the whole
   lobby pinned to the phone-sized 34px. The route-scoped selector carries the
   [class*="rank-"] attr so it outweighs the plain 52px sizing rule below. */
.status-avatar-button .profile-avatar[class*="rank-"],
body[data-route="backgammon"] .profile-identity-button .profile-avatar[class*="rank-"] {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 13px;
}

/* Arena: avatar drops into the frame opening; .arena-avatar-ring's conic
   turn-timer background stays as the outer sweep. */
.arena-avatar[class*="rank-"] { width: 62%; height: 62%; border-width: 1px; }

/* =========================================================
   9c. RESOURCE ICONS — Direction B "Celestial Prestige" PNGs
   Static artwork lives in the <img>; every animation is a decorative
   ::fx layer that touches only opacity + transform. The three icons keep
   equal visible height and a shared vertical centre. The PNGs already
   carry their own celestial glow inside transparent bounds, so the host
   never clips (overflow:visible) and object-fit:contain shows it whole.
   ========================================================= */
.res-icon {
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  isolation: isolate;
  border: 0;
  /* Shared idle-family accent tokens; see the effect block below. */
  --res-accent: rgba(95, 224, 192, .28);
  --res-accent-soft: rgba(230, 192, 122, .10);
}
/* Neutralise the former CSS-drawn / sprite icons — the PNG carries the art now. */
.res-icon.vip-crystal-icon,
.res-icon.clash-chip-icon { background-image: none; }
.res-icon.ap-regen-ring { background: none; box-shadow: none; animation: none; }
.res-icon.ap-regen-ring::before,
.res-icon.ap-regen-ring::after { content: none; }
.res-icon__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* One shared base drop-shadow for all three tokens — no keyframe overrides
     it any more, so their visual weight matches despite different source art. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .38));
  animation: res-idle-lift 5.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* ONE shared idle-effect family for VIP / Table Points / Table Coins.
   The three PNGs carry different baked-in auras and luminosity, so the art is
   never edited — instead every icon is normalised in CSS onto a single
   treatment: the same halo geometry (inset), the same easing + duration, the
   same opacity range, the same transform envelope and the same base
   drop-shadow. Only the accent hue is per-resource, via a custom property, so
   each token keeps its identity while the family reads as one system.
   Subtle by design: <=4% scale, 1px lift, no rotation, no glint, no sweep.
   The shared tokens live on .res-icon and the shared art animation on
   .res-icon__img, both declared above. */
.res-icon--vip { --res-accent: rgba(230, 192, 122, .28); --res-accent-soft: rgba(95, 224, 192, .10); }
.res-icon--table-points { --res-accent: rgba(95, 224, 192, .28); --res-accent-soft: rgba(120, 240, 220, .10); }
.res-icon--table-coins { --res-accent: rgba(221, 180, 90, .28); --res-accent-soft: rgba(95, 224, 192, .10); }

.res-icon__fx {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle at 50% 46%, var(--res-accent), var(--res-accent-soft) 56%, transparent 72%);
  animation: res-idle-halo 5.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes res-idle-halo { 0%, 100% { opacity: .26; transform: scale(.96); } 50% { opacity: .5; transform: scale(1.04); } }
@keyframes res-idle-lift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.02); } }

/* Brief EVENT accents (distinct from the idle baseline above, which they
   temporarily override and then hand straight back to). */
.res-icon--table-points.res-icon--replenished .res-icon__img { animation: res-points-replenish .9s ease-out 1; }
.res-icon--table-coins.res-icon--changed .res-icon__img { animation: res-coins-bump .5s ease-out 1; }
@keyframes res-points-replenish { 0% { transform: scale(1); } 40% { transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(120, 240, 220, .8)); } 100% { transform: scale(1); } }
@keyframes res-coins-bump { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Pause every icon effect while the tab is backgrounded. */
.page-hidden .res-icon__fx,
.page-hidden .res-icon__img { animation-play-state: paused; }

/* Reduced motion: keep a clean static glow only, no movement. */
@media (prefers-reduced-motion: reduce) {
  .res-icon__img { animation: none; }
  .res-icon__fx { animation: none; opacity: .34; }
}
.reduced-motion .res-icon__img { animation: none; }
.reduced-motion .res-icon__fx { animation: none; opacity: .34; }

/* =========================================================
   9d. STATUS-BAR STAT FAMILY  (Level · VIP · Table Points · Table Coins)
   One shared cell: icon/title on top, value, state line, then a progress
   track of the same height / radius / position. Accent colour differs per
   resource. VIP + Table Points are semantic buttons (info panels); Table
   Coins is a plain cell. Compound selectors keep these winning over the
   older `.resource-segment strong` rules without any !important.
   ========================================================= */
.hud-stat { min-width: 0; box-sizing: border-box; }
/* One shared two-row composition for every stat cell (Level, VIP, Table
   Points, Table Coins): title+value share row 1 (title carries the value as
   an inline <strong>, exactly like "LEVEL 6"), the supporting state text sits
   right-aligned on the SAME row ("· 320 / 500 XP"), and the progress track
   (when the stat has one) spans both columns on row 2. Table Coins simply
   omits the state/track children and the single title cell fills the row. */
.hud-stat .hud-stat-copy,
.hud-stat-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 6px; row-gap: 2px;
  min-width: 0; text-align: left;
}
.hud-stat-copy > .hud-stat-title { grid-column: 1; grid-row: 1; }
.hud-stat-copy > .hud-stat-state { grid-column: 2; grid-row: 1; text-align: right; }
.hud-stat-copy > .hud-stat-track { grid-column: 1 / -1; grid-row: 2; }
.hud-stat .hud-stat-title {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-stat .hud-stat-value { font-size: 12px; font-weight: 750; line-height: 1.05; white-space: nowrap; color: var(--text); }
.hud-stat .hud-stat-state { font-size: 8px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-stat .hud-stat-track {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 3px;
  border-radius: var(--r-pill);
  background: #202c30;
  overflow: hidden;
}
.hud-stat .hud-stat-track > b,
.hud-stat .hud-stat-track > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width .45s ease;
}
.level-status.hud-stat .hud-stat-track > span { background: linear-gradient(90deg, #4f9fe0, #79e8cd); }
.vip-resource.hud-stat .hud-stat-track > b { background: linear-gradient(90deg, #c89b42, #e6c07a); }
.energy-resource.hud-stat .hud-stat-track > b { background: linear-gradient(90deg, #cda247, #55ddbd); box-shadow: 0 0 8px rgba(95, 224, 192, .45); }

/* --- Resource rail: one shared copy grid for VIP / Table Points / Table Coins
   The supporting state line moves onto its OWN full-width row instead of
   sharing row 1 with the title in a narrow right-hand column. That is what
   fixes "Fully reple…" being ellipsised at 1366x768: the line now has the
   whole card width and is allowed to wrap onto a second line, so an arbitrary
   future string ("Regenerates in 04:12") also fits without any width being
   hard-coded to the current copy. The row template is identical for all three
   cards so their titles, values and state lines share one baseline even
   though Table Coins legitimately has no state line and no progress track —
   the rows are simply reserved, no placeholder content is invented. */

/* Interactive resource cells */
button.hud-stat { cursor: pointer; font: inherit; }
button.hud-stat:focus-visible,
#profileBtn.hud-stat:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button.hud-stat[aria-expanded="true"] { border-color: rgba(95, 224, 192, .5); }

/* Restore the authenticated display name beside the avatar (was hidden on the
   old mobile HUD). */
.status-left .top-profile-copy { display: grid; gap: 1px; min-width: 0; }
.status-left .top-profile-copy strong {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The visible "VIEW PROFILE" caption under the username is gone — the button
   is still the profile click target and still names itself via
   aria-label="Profile", so nothing accessible was lost. Any stray <small>
   left inside the identity copy stays hidden rather than re-appearing. */
.status-left .top-profile-copy small { display: none; }
.status-left .profile-identity-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  color: var(--text);
  text-align: left;
}
.status-left .level-status { min-width: 0; }

/* Two-row mobile layout: row 1 splits profile | level 50/50. */
.game-status-bar .status-left {
  padding: 9px 10px;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.game-status-bar .status-left > #profileBtn { flex: 1 1 0; min-width: 0; }
.game-status-bar .status-left > .level-status {
  flex: 1 1 0;
  min-width: 0;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 2px 8px;
}
.game-status-bar .level-status > .hud-stat-title { grid-column: 1; grid-row: 1; }
.game-status-bar .level-status > .hud-stat-state { grid-column: 2; grid-row: 1; text-align: right; }
.game-status-bar .level-status > .hud-stat-track { grid-column: 1 / -1; grid-row: 2; }
.game-status-bar .status-center { padding: 7px 5px; }
.game-status-bar .status-center.resource-rail { column-gap: 4px; }

/* =========================================================
   9e. HUB-HEAD FRIENDS BUTTON  (replaces the Ready/Connected pill)
   ========================================================= */
.hub-head-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap-min);
  padding: 0 14px;
  border: 1px solid rgba(95, 224, 192, .3);
  border-radius: var(--hdr-ctl-r);
  background: linear-gradient(145deg, rgba(95, 224, 192, .1), rgba(255, 255, 255, .03));
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.hub-head-action .friends-glyph { font-size: 16px; line-height: 1; }
.hub-head-action:hover { border-color: rgba(95, 224, 192, .55); background: rgba(95, 224, 192, .14); }
.hub-head-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hub-head-action[aria-expanded="true"] { border-color: var(--teal); background: rgba(95, 224, 192, .18); }

/* Seasonal Achievement — emblem + a compact static identity only. */
.achievement-compact-title {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  text-align: center;
}

.settings-legal-note { margin: 10px 0 6px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.settings-legal-note strong { color: var(--text); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   9f. OVERLAYS — Friends drawer, Share dialog, resource info panels
   opacity/transform transitions only; reduced-motion drops them.
   ========================================================= */
html.overlay-open { overflow: hidden; }

/* Author `display` values override the UA [hidden] rule — restore it. */
.social-drawer[hidden],
.share-dialog[hidden],
.res-panel[hidden],
.overlay-backdrop[hidden] { display: none; }

.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(2, 5, 7, .58);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .22s ease;
}
.overlay-backdrop.is-open { opacity: 1; }
.overlay-backdrop--top { z-index: 80; background: rgba(2, 5, 7, .5); }

.social-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 65;
  display: flex;
  flex-direction: column;
  width: clamp(380px, 33vw, 520px);
  max-width: 100vw;
  height: 100dvh;
  padding: 0 0 env(safe-area-inset-bottom);
  background: linear-gradient(158deg, var(--surface-1), #0b1114);
  border-left: 1px solid var(--hair-gold);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.social-drawer.is-open { transform: translateX(0); }

.social-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.social-drawer-head h2 { font-family: var(--font-serif); font-size: 22px; margin: 0; }
.social-close {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.social-close:hover { border-color: var(--line-strong); }
.social-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.social-add { display: flex; gap: 8px; padding: 14px 18px 4px; }
.social-add input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-inset);
  color: var(--text);
  font: inherit;
}
.social-add input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.social-add button { min-height: var(--tap-min); padding: 0 16px; }
.social-add-note { min-height: 14px; margin: 4px 18px 0; font-size: 11px; color: var(--teal); }

.social-tablist { display: flex; gap: 2px; padding: 10px 14px 0; }
.social-tab {
  flex: 1;
  min-height: var(--tap-min);
  padding: 8px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.social-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--teal); }
.social-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
.social-badge[hidden] { display: none; }
.social-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: #06110e;
  font-size: 9px;
  font-weight: 800;
}

.social-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; -webkit-overflow-scrolling: touch; }
.social-empty { margin: 24px 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.social-list { display: grid; gap: 6px; }
.social-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.social-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(95, 224, 192, .12); color: var(--teal); font-weight: 800; }
.social-row-main { min-width: 0; display: grid; gap: 1px; }
.social-row-main strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-row-main small { font-size: 10px; color: var(--muted); }
.social-presence-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.social-row.presence-online .social-presence-dot,
.social-row.presence-active .social-presence-dot { background: var(--teal); box-shadow: 0 0 6px rgba(95, 224, 192, .6); }
.social-row.presence-idle .social-presence-dot,
.social-row.presence-away .social-presence-dot { background: var(--gold); }

.social-drawer-foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
.social-share-btn { width: 100%; min-height: var(--tap-min); }

/* Share dialog — centred, layered above the drawer */
.share-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 85;
  width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, -46%);
  padding: 20px;
  border: 1px solid var(--hair-gold);
  border-radius: var(--r-2xl);
  background: linear-gradient(158deg, var(--surface-1), #0b1114);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.share-dialog.is-open { opacity: 1; transform: translate(-50%, -50%); }
.share-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-dialog-head h2 { font-family: var(--font-serif); font-size: 20px; margin: 0; }
.share-dialog-sub { margin: 6px 0 14px; font-size: 12px; color: var(--muted); }
.share-targets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-target {
  min-height: var(--tap-min);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.share-target:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.share-target:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.share-target--copy { grid-column: 1 / -1; border-color: rgba(95, 224, 192, .34); color: var(--teal); }
.share-status { min-height: 16px; margin: 12px 0 0; font-size: 12px; color: var(--teal); text-align: center; }
.share-status.is-error { color: var(--red); }

/* Resource info panels — desktop popover, mobile bottom sheet */
.res-panel {
  position: fixed;
  z-index: 82;
  width: min(300px, calc(100vw - 24px));
  padding: 14px 16px 16px;
  border: 1px solid var(--hair-gold);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--surface-1), #0b1114);
  box-shadow: var(--shadow-lg);
}
.res-panel.is-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.res-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.res-panel-head h3 { font-family: var(--font-serif); font-size: 16px; margin: 0; }
.res-panel-close {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.res-panel-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.res-panel-body { display: grid; gap: 6px; }
.res-panel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; }
.res-panel-row > span { color: var(--muted); }
.res-panel-row > strong { font-weight: 700; }
.res-panel-note { margin: 8px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .social-drawer, .overlay-backdrop, .share-dialog { transition: none; }
}
.reduced-motion .social-drawer,
.reduced-motion .overlay-backdrop,
.reduced-motion .share-dialog { transition: none; }

/* =========================================================
   10. DIALOGS / MODALS
   ========================================================= */
dialog {
  border: 0;
  padding: 0;
  border-radius: var(--r-xl);
  background: transparent;
  color: var(--text);
  max-width: min(96vw, 940px);
  overflow: visible;
}
dialog::backdrop { background: rgba(2, 5, 7, .76); backdrop-filter: blur(5px); }

.auth-card, .modal-card { width: min(94vw, 720px); border-radius: var(--r-xl); padding: 26px; position: relative; }
.auth-card-wide { width: min(94vw, 620px); }
.modal-card {
  border: 1px solid var(--line-strong);
  background: linear-gradient(155deg, var(--surface-2), #0b0f12);
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, .035);
}
.modal-card .eyebrow { display: block; }
.auth-card {
  overflow: hidden;
  border: 1px solid var(--hair-teal);
  background:
    radial-gradient(circle at 12% -5%, rgba(95, 224, 192, .1), transparent 38%),
    linear-gradient(155deg, var(--surface-2), #0a0f12);
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, .04);
}
.auth-card::before { content: ""; position: absolute; inset: 0 22% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(95, 224, 192, .55), transparent); }
.auth-card h2, .modal-card h2 { margin: 6px 0 8px; font-size: 28px; }
.auth-benefit { color: var(--muted); line-height: 1.55; font-size: 13px; }
.close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: var(--r-xs); background: var(--surface-3); color: var(--muted); font-size: 20px; display: grid; place-items: center; transition: color .16s ease, background .16s ease; }
.close:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.close:focus-visible { box-shadow: var(--focus-ring); }

.provider-grid { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 18px 0; }
.provider-btn { min-height: 48px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: var(--r-sm); font-weight: 650; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.provider-btn:not(:disabled):hover { border-color: rgba(104, 230, 203, .62); background: #1b2729; box-shadow: 0 0 22px rgba(93, 224, 195, .09); transform: translateY(-1px); }
.provider-btn small { display: block; color: var(--muted); font-size: 9px; font-weight: 500; margin-top: 2px; }
.provider-btn:disabled { cursor: not-allowed; opacity: .58; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; margin: 14px 0; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.auth-card label, .profile-edit-row label, .settings-groups label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.auth-card input, .profile-edit-row input, .settings-groups select {
  width: 100%;
  background: var(--surface-inset);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 42px;
  padding: 8px 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-card input:focus, .profile-edit-row input:focus, .settings-groups select:focus {
  border-color: rgba(95, 224, 192, .55);
  box-shadow: 0 0 0 3px rgba(95, 224, 192, .14);
}
.auth-card input::placeholder, .profile-edit-row input::placeholder { color: var(--faint); }
/* Native controls take the brand accent instead of the browser default. */
.settings-groups input[type="checkbox"],
.settings-groups input[type="range"],
.toggle-row input { accent-color: var(--teal); }
.settings-groups input[type="range"] { width: 100%; }
.auth-card[data-mode="login"] #displayWrap { display: none; }
.auth-card label { margin: 10px 0; }
.auth-card .primary { width: 100%; margin-top: 8px; }
.linkish { display: block; background: transparent; color: var(--teal); margin: 10px auto 0; width: 100%; }

.profile-modal { width: min(94vw, 760px); }
.profile-modal-head { display: flex; gap: 15px; align-items: center; }
.profile-modal-head p { margin: 2px 0 0; color: var(--muted); }
.profile-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; }
.profile-stat-grid > div { border: 1px solid var(--line-soft); background: var(--surface-inset); border-radius: var(--r-md); padding: 13px; display: grid; gap: 6px; }
.profile-stat-grid span { color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.profile-stat-grid strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.profile-edit-row { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }

.mini-avatar, .profile-avatar, .leader-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #233b37, #15221f);
  border: 1px solid #3d7568;
  color: var(--teal);
  font-weight: 800;
}
.mini-avatar { width: 30px; height: 30px; font-size: 11px; }
.profile-avatar { width: 58px; height: 58px; font-size: 18px; }
.profile-avatar.large { width: 76px; height: 76px; font-size: 25px; }
.leader-avatar { width: 34px; height: 34px; font-size: 10px; }

.settings-modal { width: min(96vw, 900px); max-height: min(90vh, 900px); overflow-x: hidden; overflow-y: auto; }
.settings-groups { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.settings-groups fieldset { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 14px 14px 16px; display: grid; gap: 11px; min-width: 0; background: rgba(255, 255, 255, .012); }
.settings-groups legend { color: var(--teal); font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; padding: 0 6px; }
.toggle-row { grid-template-columns: 1fr auto !important; align-items: center; }
.toggle-row input { width: 18px; height: 18px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-links a { color: var(--muted); font-size: 10px; text-decoration: none; }
.account-connected:disabled { opacity: 1; color: var(--teal); border-color: rgba(95, 224, 192, .42); background: rgba(95, 224, 192, .06); }
.danger-soft { border-color: rgba(255, 110, 110, .28) !important; color: #ffb4b4 !important; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

.friends-modal { width: min(560px, calc(100vw - 28px)); }
.friends-actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0; }
.friends-actions button { min-height: 92px; display: grid; place-items: center; gap: 4px; }
.friends-actions small { font-size: 9px; opacity: .65; }

/* Compact match-result window — tight gaps, conditional cards
   (hidden ones collapse fully), 320px-safe, one accent identity. */
.match-result-modal { width: min(440px, calc(100vw - 24px)); text-align: center; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.result-stat-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.result-stat { padding: 10px 8px; border: 1px solid var(--line-soft); background: var(--surface-inset); border-radius: var(--r-md); display: grid; gap: 4px; min-width: 0; }
.result-stat > span { font-size: 8px; letter-spacing: .12em; color: var(--muted); }
.result-stat > strong { font-size: 18px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.result-stat[hidden] { display: none; }
.result-stars { display: inline-flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.result-star-delta { font-size: 15px; color: var(--gold-bright); }
.result-rank-change { margin: 0; font-size: 12px; font-weight: 700; color: var(--teal); }
.result-rank-change[hidden] { display: none; }
.result-level-progress { text-align: left; padding: 12px 14px; border: 1px solid var(--line-soft); background: var(--surface-inset); border-radius: var(--r-md); }
.result-level-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; margin-bottom: 7px; }
.result-achievements { text-align: left; padding: 12px 14px; border: 1px solid var(--line-soft); background: var(--surface-inset); border-radius: var(--r-md); }
.result-achievements[hidden] { display: none; }
.result-achievements p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.result-achievements strong { color: var(--gold-bright); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.result-actions button { min-height: var(--tap-min); }
.result-actions[hidden] { display: none; }
.match-result-modal .form-message[hidden] { display: none; }
#rematchWaitingBtn { display: flex; align-items: center; justify-content: center; gap: 8px; }
#rematchWaitingBtn::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(211, 176, 105, .35); border-top-color: var(--gold-bright);
  animation: rematch-spin .8s linear infinite; flex: none;
}
@keyframes rematch-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #rematchWaitingBtn::before { animation: none; } }

/* Opponent-facing rematch invitation. */
.rematch-invite-modal { width: min(420px, calc(100vw - 24px)); text-align: center; padding: 20px; display: grid; gap: 14px; }
.rematch-invite-requester { display: grid; grid-auto-flow: column; grid-auto-columns: auto 1fr; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-soft); background: var(--surface-inset); border-radius: var(--r-md); text-align: left; }
.rematch-invite-requester .arena-avatar { width: 40px; height: 40px; font-size: 15px; flex: none; }
#rematchInviteText { margin: 0; font-size: 13px; line-height: 1.45; }
#rematchInviteText strong { color: var(--gold-bright); }
.rematch-decline-reasons { display: grid; gap: 10px; text-align: left; }
.rematch-decline-reasons[hidden] { display: none; }
.rematch-decline-reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rematch-decline-reason { font-size: 11px; padding: 9px 8px; min-height: var(--tap-min); }
@media (max-width: 420px) { .rematch-decline-reason-grid { grid-template-columns: 1fr; } }

/* Half-star five-star row: one outline glyph with a gold overlay clipped to
   0 / 50% / 100% width. Works in the lobby (.stars) and the result window. */
.stars, .result-stars { display: inline-flex; align-items: center; gap: 3px; }
.stars .star,
.result-stars .star {
  --fill: 0%;
  position: relative;
  display: inline-block;
  width: 1em;
  font-size: 15px;
  line-height: 1;
  color: var(--faint);
}
.stars .star::before,
.result-stars .star::before { content: "\2605"; }               /* ★ outline (faint) */
.stars .star::after,
.result-stars .star::after {
  content: "\2605";
  position: absolute;
  inset: 0;
  width: var(--fill);
  overflow: hidden;
  color: var(--gold-bright);
}
.stars .star--half, .result-stars .star--half { --fill: 50%; }
.stars .star--full, .result-stars .star--full { --fill: 100%; }
.star-legend { font-family: var(--font-serif); font-size: 13px; color: var(--gold-bright); }

.performance-modal { width: min(900px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); overflow-x: hidden; overflow-y: auto; }
.performance-modal .leaderboard-tabs { margin: 22px 0 16px; }
.performance-achievements { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line-soft); }

/* Matchmaking chamber */
.matchmaking-dialog { border: 0; background: transparent; padding: 0; }
.matchmaking-dialog::backdrop { background: rgba(3, 7, 8, .78); backdrop-filter: blur(10px); }
.matchmaking-modal {
  width: min(470px, calc(100vw - 28px));
  text-align: center;
  padding: 34px;
  border-radius: var(--r-xl);
  border: 1px solid var(--hair-teal);
  background: radial-gradient(circle at 50% 34%, rgba(36, 170, 145, .16), transparent 38%), linear-gradient(145deg, var(--surface-2), #05090b);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(95, 224, 192, .04);
}
.matchmaking-modal h2 { font-family: var(--font-serif); font-size: 32px; margin: 15px 0 8px; }
.matchmaking-modal p { margin: 0; color: var(--muted); }
.matchmaking-modal > small { display: block; margin: 13px 0; color: #e1b85d; letter-spacing: .12em; text-transform: uppercase; }
.matchmaking-modal button { width: 100%; margin-top: 10px; }
.matchmaking-orbit { position: relative; width: 146px; height: 146px; margin: 18px auto 4px; display: grid; place-items: center; }
.matchmaking-orbit::before, .matchmaking-orbit::after { content: ""; position: absolute; border: 1px solid rgba(95, 224, 192, .34); border-radius: 50%; animation: match-orbit 4s linear infinite; }
.matchmaking-orbit::before { inset: 5px; border-color: rgba(95, 224, 192, .55); box-shadow: 0 0 22px rgba(95, 224, 192, .14); }
.matchmaking-orbit::after { inset: 22px; border-color: rgba(221, 180, 90, .45); animation-direction: reverse; animation-duration: 3s; }
.matchmaking-orbit i, .matchmaking-orbit b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(95, 224, 192, .8); animation: match-dot 2s ease-in-out infinite; }
.matchmaking-orbit i { top: 4px; }
.matchmaking-orbit b { bottom: 14px; right: 14px; animation-delay: -1s; }
.matchmaking-orbit .vip-crystal-icon { width: 82px; height: 82px; position: relative; z-index: 1; filter: drop-shadow(0 0 18px rgba(95, 224, 192, .28)); }
.matchmaking-pulse { display: flex; justify-content: center; gap: 6px; margin: 17px 0; }
.matchmaking-pulse span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: match-pulse 1.2s ease-in-out infinite; }
.matchmaking-pulse span:nth-child(2) { animation-delay: .18s; }
.matchmaking-pulse span:nth-child(3) { animation-delay: .36s; }
@keyframes match-orbit { to { transform: rotate(360deg); } }
@keyframes match-dot { 50% { transform: scale(1.6); filter: brightness(1.4); } }
@keyframes match-pulse { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
.reduced-motion .matchmaking-orbit::before,
.reduced-motion .matchmaking-orbit::after,
.reduced-motion .matchmaking-orbit i,
.reduced-motion .matchmaking-orbit b,
.reduced-motion .matchmaking-pulse span,
.reduced-motion .energy-meter b,
.reduced-motion .energy-meter b::after { animation: none !important; }

/* Sessions dialog */
.sessions-modal { width: min(680px, calc(100vw - 32px)); }
.sessions-list { display: grid; gap: 10px; margin-top: 18px; }
.session-row { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.session-row button { width: 100%; }
.session-main { min-width: 0; }
.session-main strong { display: block; }
.session-meta { font-size: .78rem; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.session-current { display: inline-flex; margin-left: 8px; padding: 2px 7px; border: 1px solid rgba(76, 224, 186, .35); border-radius: 999px; color: var(--accent); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }

/* =========================================================
   11. LEGAL PAGES + SITE FOOTER
   ========================================================= */
.site-footer {
  max-width: 1240px;
  margin: 28px auto 0;
  padding: 18px clamp(18px, 4vw, 42px) calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
  align-items: center;
  color: var(--muted);
}
.site-footer div { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.site-footer strong { color: var(--text); }
.site-footer nav { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.site-footer a, .legal-page a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.site-footer small { grid-column: 1 / -1; opacity: .8; font-size: 11px; }
.footer-legal { grid-column: 1 / -1; margin: 2px 0 0; max-width: 960px; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.footer-legal strong { color: var(--text); }
.legal-page { min-height: 100vh; }
.legal-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 72px; }
.legal-back { display: inline-flex; margin-bottom: 26px; text-decoration: none !important; }
.legal-card { background: rgba(15, 20, 27, .94); border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; padding: clamp(24px, 5vw, 52px); box-shadow: 0 24px 80px rgba(0, 0, 0, .28); }
.legal-card h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); margin: .2em 0 .15em; }
.legal-card h2 { font-size: 1.35rem; margin: 2rem 0 .65rem; }
.legal-card p, .legal-card li { line-height: 1.72; color: var(--muted); }
.legal-card strong { color: var(--text); }
.legal-card ul { padding-left: 1.2rem; }
.legal-meta, .legal-notice { border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; padding: 14px 16px; background: rgba(255, 255, 255, .025); }
.legal-notice { margin: 22px 0; }
.legal-contact { word-break: break-word; }

/* =========================================================
   12. OBSIDIAN ARENA  (body.match-active) — full-viewport match view
   Content-driven responsive composition:
     · portrait / narrow  → opponent · board · player · controls (vertical)
     · landscape ≥ 700px or html[data-client="native"] landscape
                          → opponent | board | player  (3 columns)
   The arena environment is CSS layers only (.arena-backdrop) — nothing
   structural is baked into a background image.
   ========================================================= */
body.match-active { height: 100vh; height: 100dvh; min-height: 100dvh; overflow: hidden; background: #050807; }
body.match-active .noise { position: fixed; inset: 0; opacity: .18; }
body.match-active .app-topbar,
body.match-active .site-footer,
body.match-active .route-view { display: none !important; }
body.match-active .product-shell { width: 100%; max-width: none; height: 100dvh; margin: 0; padding: 0; }

body.match-active #matchTable {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #040706;
}
body.match-active #matchTable[hidden] { display: none !important; }

/* ---- decorative arena environment (replaceable in one place) -------------- */
.arena-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.arena-backdrop > span { position: absolute; inset: 0; display: block; }
.arena-backdrop-floor {
  background:
    radial-gradient(150% 130% at 50% 50%, rgba(16, 46, 41, .5), transparent 58%),
    radial-gradient(120% 80% at 50% 122%, rgba(28, 84, 73, .34), transparent 62%),
    linear-gradient(178deg, #0b1412 0%, #081010 40%, #050807 100%);
}
.arena-backdrop-glow {
  background:
    radial-gradient(46% 40% at 50% 42%, rgba(95, 224, 192, .12), transparent 72%),
    radial-gradient(90% 60% at 50% 6%, rgba(211, 176, 105, .06), transparent 60%);
  mix-blend-mode: screen;
}
.arena-backdrop-texture {
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.arena-backdrop-vignette {
  box-shadow: inset 0 0 0 1px rgba(167, 128, 56, .10), inset 0 0 220px rgba(0, 0, 0, .82);
  background: radial-gradient(130% 110% at 50% 46%, transparent 52%, rgba(0, 0, 0, .55) 100%);
}

.arena-stage {
  /* Warmer than the site palette — the immersive "obsidian + felt + gilt frame"
     match theme. Teal is shared with the global token. */
  --arena-gold: #a78038;
  --arena-gold-bright: #d3b069;
  --arena-emerald: #164c42;
  --arena-teal: var(--teal);
  --arena-ivory: #eee5d4;
  --arena-amber: #e8a13c;
  --arena-critical: #d8543f;
  --arena-avatar-size: clamp(56px, 13vw, 80px);
  --arena-card-radius: 16px;
  /* Explicit board-frame stacking order — one reusable token per layer, so no
     selector needs a scattered magic z-index. Higher = closer to the viewer.
       surface  cosmetic board image
       points   interaction grid
       checkers on-point checkers
       bar/off  captured + borne-off checkers
       dice     dice + doubling cube
       feedback legal-move / selection highlight
       status   transient turn / status text
       loading  neutral cold-asset loading surface (above everything) */
  --z-board-surface: 0;
  --z-points: 1;
  --z-checkers: 2;
  --z-bar-bearoff: 3;
  --z-dice: 4;
  --z-feedback: 5;
  --z-status: 6;
  --z-loading: 7;
  position: relative;
  z-index: 1;
  width: min(1560px, 100%);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(6px, 1.1dvh, 12px);
  padding:
    max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

.arena-toolbar {
  position: absolute;
  top: max(4px, env(safe-area-inset-top));
  right: max(6px, env(safe-area-inset-right));
  z-index: 14;
  display: flex;
  gap: 7px;
}
.arena-toolbar .queue-status { display: none; }
.arena-tool {
  min-width: 0;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(167, 128, 56, .42);
  border-radius: 999px;
  color: var(--text);
  background: rgba(8, 13, 13, .82);
  font-size: 10px;
  transition: border-color .16s ease, background .16s ease;
}
.arena-tool:hover { border-color: rgba(211, 176, 105, .7); background: rgba(12, 18, 18, .92); }
.arena-tool:focus-visible,
.arena-actions button:focus-visible { box-shadow: var(--focus-ring); }

/* ---- player card component (one implementation, mirrored by context) ------ */
.arena-player-card {
  --timer-progress: 0deg;
  --turn-run: 0;
  position: relative;
  z-index: 8;
  justify-self: center;
  width: min(560px, 100%);
  min-height: clamp(54px, 7dvh, 72px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(9px, 1.6vw, 14px);
  padding: 6px clamp(10px, 1.6vw, 14px);
  border: 1px solid rgba(167, 128, 56, .5);
  border-radius: var(--arena-card-radius);
  color: var(--arena-ivory);
  background:
    linear-gradient(100deg, rgba(21, 31, 29, .97), rgba(8, 12, 12, .98)),
    radial-gradient(circle at 12% 50%, rgba(95, 224, 192, .07), transparent 34%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.arena-player-card.active-turn {
  border-color: rgba(95, 224, 192, .58);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .46), 0 0 20px rgba(95, 224, 192, .1), inset 0 0 0 1px rgba(95, 224, 192, .14);
}
.arena-player-card.active-turn.is-timer-low { border-color: rgba(232, 161, 60, .6); }
.arena-player-card.active-turn.is-timer-critical { border-color: rgba(216, 84, 63, .66); }

/* Perimeter turn-timer — an SVG stroke that traces the card's real rounded
   rectangle. updateTurnTimer() sets --turn-run (0..100 of the perimeter). */
.arena-timer-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .2s ease;
}
.arena-player-card.active-turn .arena-timer-border { opacity: 1; }
.arena-timer-border rect { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; rx: var(--arena-card-radius); ry: var(--arena-card-radius); }
.arena-timer-border-track { stroke: rgba(167, 128, 56, .2); }
.arena-timer-border-run {
  stroke: var(--arena-teal);
  stroke-linecap: round;
  stroke-dasharray: var(--turn-run, 0) 100;
  transition: stroke-dasharray .26s linear, stroke .3s ease;
}
.arena-player-card.is-timer-low .arena-timer-border-run { stroke: var(--arena-amber); }
.arena-player-card.is-timer-critical .arena-timer-border-run { stroke: var(--arena-critical); }

.arena-avatar-ring {
  --timer-progress: 0deg;
  position: relative;
  width: var(--arena-avatar-size);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 3px;
  background: radial-gradient(circle at 50% 28%, rgba(211, 176, 105, .5), rgba(167, 128, 56, .16) 72%);
}
.arena-avatar-ring.active { box-shadow: 0 0 0 1px rgba(95, 224, 192, .5), 0 0 15px rgba(95, 224, 192, .22); }
.arena-avatar-ring.urgent { box-shadow: 0 0 0 1px rgba(216, 84, 63, .58), 0 0 15px rgba(216, 84, 63, .26); }
.arena-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 2px solid #0c1312;
  border-radius: 50%;
  color: var(--arena-ivory);
  background: radial-gradient(circle at 35% 28%, #2a6f61, #102621 56%, #080d0c);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(16px, 4vw, 22px);
}
.arena-player-copy { display: grid; gap: 2px; min-width: 0; }
.arena-player-name {
  overflow: hidden;
  color: var(--arena-ivory);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(15px, 1.9dvh, 20px);
  letter-spacing: -.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arena-player-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 9px; }
.arena-player-meta b { font-weight: 650; }
.arena-player-meta i { color: var(--arena-gold); font-style: normal; }
/* Current rank — value only, no "SEASONAL RANK" caption. The rank code also
   drives the avatar-frame badge (setAvatarRank). */
.arena-player-rank { min-width: 0; }
.arena-rank-value {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--arena-gold-bright);
  font-weight: 700;
  font-size: clamp(11px, 1.3dvh, 13px);
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* Match score is only for a genuine multi-point match (element carries
   [hidden] until such a mode exists). */
.arena-player-score { display: grid; justify-items: end; gap: 1px; }
.arena-player-score[hidden] { display: none; }
.arena-player-score small { color: var(--muted); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.arena-score { color: var(--arena-ivory); font-size: clamp(14px, 1.7dvh, 17px); font-weight: 700; }

.arena-board-frame {
  position: relative;
  align-self: stretch;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(42px, 4.6vw, 70px) minmax(0, 1fr) clamp(42px, 4.6vw, 70px);
  border: clamp(5px, .55vw, 9px) solid #151514;
  border-radius: 19px;
  background: linear-gradient(90deg, #090b0b, #211c14 3%, #080b0b 8%, #080b0b 92%, #211c14 97%, #090b0b);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(167, 128, 56, .60), inset 0 0 22px rgba(0, 0, 0, .9);
  overflow: hidden;
}

/* Neutral cold-asset loading surface — see the #arenaCosmeticsLoading comment
   in index.html. Hidden by default; JS (board.js arenaCosmeticsPending) is
   the only thing that toggles body.arena-cosmetics-pending. Opaque and above
   every other board layer so neither the classic CSS triangles nor a plain
   fallback checker disc can show through while pending. #board itself keeps
   visibility (not display:none) so its geometry/ResizeObserver stay intact
   underneath — only its paint is hidden. */
.arena-cosmetics-loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: var(--z-loading);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: #0a0c0c;
  color: rgba(211, 176, 105, .85);
  text-align: center;
  pointer-events: none;
}
body.arena-cosmetics-pending .arena-cosmetics-loading { display: flex; }
body.arena-cosmetics-pending .arena-board-center > .board,
body.arena-cosmetics-pending #arenaBoardSurface:not([hidden]) { visibility: hidden; }
.arena-cosmetics-loading-mark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .7;
}
.arena-cosmetics-loading-text {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* ---- bear-off trays (borne-off checkers live in the painted RIGHT tray) --- */
.bear-off-tray {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;   /* opponent stack (top) | local stack (bottom) */
  justify-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-inline: 1px solid rgba(167, 128, 56, .38);
  color: rgba(211, 176, 105, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 22%), #080c0c;
}
.bear-off-tray.side-tray { grid-template-rows: 1fr; }
.borne-off-stack {
  width: 100%;
  min-height: 0;
  z-index: var(--z-bar-bearoff);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.borne-off-stack--opp { justify-content: flex-start; flex-direction: column; }
.borne-off-stack--mine { justify-content: flex-end; flex-direction: column-reverse; }
body.match-active .borne-off-stack .checker {
  position: relative;
  width: clamp(15px, 1.9vw, 26px);
  height: clamp(15px, 1.9vw, 26px);
  flex: none;
  border-width: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
}
body.match-active .borne-off-stack .checker + .checker { margin-top: calc(clamp(15px, 1.9vw, 26px) * -0.5); }
body.match-active .borne-off-stack--mine .checker + .checker { margin-top: 0; margin-bottom: calc(clamp(15px, 1.9vw, 26px) * -0.5); }
.borne-off-stack .stack-more {
  flex: none;
  margin: 2px 0;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  color: var(--arena-ivory);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}

/* The right tray IS the bear-off control — activate it to bear a checker off.
   It only invites the move (glows, pointer) when one is legal. */
body.match-active .bear-off-tray.player-tray[role="button"] { transition: box-shadow .16s ease, background .16s ease; }
body.match-active .bear-off-tray.player-tray[role="button"]:focus-visible { box-shadow: var(--focus-ring); outline: none; }
body.match-active .bear-off-tray.player-tray.legal-special {
  cursor: pointer;
  background: linear-gradient(180deg, rgba(95, 224, 192, .14), rgba(0, 0, 0, .1)), #081311;
  box-shadow: inset 0 0 0 1px rgba(95, 224, 192, .55), 0 0 14px rgba(95, 224, 192, .22);
}

/* ---- COSMETIC bear-off tray — coordinate-mapped onto the artwork's own
   painted right-side tray (board.js BEAROFF_TRAY_TEMPLATE), not a synthetic
   external column. Used whenever a cosmetic board is equipped (every match
   today); the legacy grid-column tray above stays for the non-cosmetic
   classic board only and is hidden here. Position/step come from CSS vars
   board.js writes in layoutBearOffTray(), exactly like the point columns. */
body.match-active.cosmetic-board-active .bear-off-tray.player-tray,
body.match-active.cosmetic-board-active .bear-off-tray.side-tray { display: none; }
.cosmetic-bearoff-zone { display: none; }
body.match-active.cosmetic-board-active .cosmetic-bearoff-zone { display: block; position: absolute; inset: 0; z-index: var(--z-bar-bearoff); pointer-events: none; }
.cosmetic-bearoff-stack {
  position: absolute;
  left: var(--bo-left, 90%);
  width: var(--bo-width, 6%);
  height: var(--bo-run, 40%);
  overflow: hidden;
  border-radius: 5px;
}
.cosmetic-bearoff-stack--opp  { top: var(--bo-top, 6%);    bottom: auto; pointer-events: none; }
.cosmetic-bearoff-stack--mine { bottom: var(--bo-bottom, 6%); top: auto; pointer-events: auto; }
.cosmetic-bearoff-stack[hidden] { display: none !important; }
body.match-active .cosmetic-bearoff-stack .checker {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--cos-checker-d, 5%);
  min-width: 14px;
  min-height: 14px;
  margin: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
}
.cosmetic-bearoff-stack--opp .checker  { top: calc(var(--stack-i, 0) * var(--bo-step, 0px)); bottom: auto; }
.cosmetic-bearoff-stack--mine .checker { bottom: calc(var(--stack-i, 0) * var(--bo-step, 0px)); top: auto; }
.cosmetic-bearoff-stack .stack-more {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  color: var(--arena-ivory);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.cosmetic-bearoff-stack--opp .stack-more { bottom: 2px; }
.cosmetic-bearoff-stack--mine .stack-more { top: 2px; }
/* The local (lower) half doubles as the bear-off control — glows and takes
   clicks only when a bear-off is legal right now. The opponent's upper half
   is never interactive, so it can never be clicked as the local destination. */
body.match-active .cosmetic-bearoff-stack--mine[role="button"] { cursor: default; transition: box-shadow .16s ease, background .16s ease; }
body.match-active .cosmetic-bearoff-stack--mine[role="button"]:focus-visible { box-shadow: var(--focus-ring); outline: none; }
body.match-active .cosmetic-bearoff-stack--mine.legal-special {
  pointer-events: auto;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(95, 224, 192, .16), rgba(0, 0, 0, .05));
  box-shadow: inset 0 0 0 1px rgba(95, 224, 192, .55), 0 0 12px rgba(95, 224, 192, .25);
}
@media (pointer: coarse) {
  body.match-active .cosmetic-bearoff-stack--mine { min-width: var(--tap-min); }
}

/* ---- captured checkers on the painted centre bar ------------------------- */
.arena-bar { position: absolute; inset: 0; z-index: var(--z-bar-bearoff); pointer-events: none; }
.arena-bar-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--cos-checker-d, clamp(20px, 2.4vw, 32px));
  display: flex;
  align-items: center;
}
/* Opponent stacks down from the top edge; local player up from the bottom.
   Both stay clear of the protected dice band in the middle of the board. */
.arena-bar-stack--opp  { top: 3%;    bottom: auto; flex-direction: column; max-height: 38%; }
.arena-bar-stack--mine { bottom: 3%; top: auto;    flex-direction: column-reverse; max-height: 38%; }
.arena-bar-stack[hidden] { display: none !important; }
body.match-active .arena-bar-stack .checker { position: relative; flex: none; width: 100%; height: auto; aspect-ratio: 1; margin: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
body.match-active .arena-bar-stack .checker + .checker { margin-top: -34%; }
body.match-active .arena-bar-stack--mine .checker + .checker { margin-top: 0; margin-bottom: -34%; }
.arena-bar-stack .stack-more {
  flex: none; margin-top: 2px;
  font-size: 9px; font-weight: 700;
  color: var(--arena-ivory); text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.arena-bar-stack--mine .stack-more { margin-top: 0; margin-bottom: 2px; }
/* The local zone is the "enter from the bar" affordance — interactive and
   highlighted only when a bar entry is currently legal. */
body.match-active .arena-bar-stack--mine.legal-special { pointer-events: auto; cursor: pointer; }
body.match-active .arena-bar-stack--mine.legal-special .checker { box-shadow: 0 0 0 2px rgba(95, 224, 192, .85), 0 0 12px rgba(95, 224, 192, .45); }
body.match-active .arena-bar-stack--mine.selected-special .checker { box-shadow: 0 0 0 2px rgba(211, 176, 105, .9), 0 0 12px rgba(211, 176, 105, .5); }
body.match-active .arena-bar-stack--mine:focus-visible { outline: none; }
body.match-active .arena-bar-stack--mine.legal-special:focus-visible .checker { box-shadow: var(--focus-ring); }

.arena-board-center { position: relative; min-width: 0; min-height: 0; }

body.match-active .board {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1px, .26vw, 4px);
  padding: clamp(8px, .7vw, 12px);
  border: 0;
  border-radius: 0;
  outline: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 18px), #090d0c calc(50% - 18px), #171814 50%, #090d0c calc(50% + 18px), transparent calc(50% + 18px)),
    radial-gradient(circle at 50% 50%, rgba(31, 89, 72, .14), transparent 48%),
    linear-gradient(145deg, #16372f, #0b201c 58%, #071310);
  box-shadow: inset 0 0 35px rgba(0, 0, 0, .58);
}
body.match-active .point { min-height: clamp(112px, 20dvh, 205px); height: 100%; border-radius: 4px; }
body.match-active .point-index { display: none !important; }
body.match-active .triangle {
  border-left-width: clamp(12px, 1.75vw, 25px);
  border-right-width: clamp(12px, 1.75vw, 25px);
  border-top-width: clamp(105px, 26dvh, 245px);
  border-top-color: rgba(230, 218, 193, .76);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .32));
}
body.match-active .point:nth-child(odd) .triangle { border-top-color: rgba(18, 78, 65, .88); }
body.match-active .point:nth-child(n+13) .triangle {
  border-top: 0;
  border-bottom-width: clamp(105px, 26dvh, 245px);
  border-bottom-color: rgba(230, 218, 193, .76);
}
body.match-active .point:nth-child(n+13):nth-child(odd) .triangle { border-bottom-color: rgba(18, 78, 65, .88); }
body.match-active .checker {
  width: clamp(22px, 2.45vw, 36px);
  height: clamp(22px, 2.45vw, 36px);
  border: 2px solid rgba(232, 216, 181, .88);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .48), inset 0 0 0 2px rgba(0, 0, 0, .14), inset 0 3px 5px rgba(255, 255, 255, .14);
}
body.match-active .checker.you { background: radial-gradient(circle at 35% 28%, #75d9c3, #287f6d 52%, #123e35); }
body.match-active .checker.opponent { background: radial-gradient(circle at 35% 28%, #fffaf0, #d7c59e 55%, #aa8b50); }

/* ---- dedicated dice layer (the protected centre band) -------------------
   Sits above the board surface, points, checkers and the captured-checker
   bar zones, and below temporary interaction feedback. No status text, bar
   pill or captured checker is ever placed over the dice faces. */
.board-dice-layer {
  position: absolute; z-index: var(--z-dice);
  left: 50%; top: 50%;
  display: flex; align-items: center; gap: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.board-dice-layer .dice { gap: 6px; }
.board-dice-layer .die {
  width: clamp(32px, 3.2vw, 44px);
  height: clamp(32px, 3.2vw, 44px);
  border: 1px solid rgba(167, 128, 56, .62);
  border-radius: 9px;
  color: #111714;
  background: linear-gradient(145deg, #fffaf0, #d9cba9);
  box-shadow: 0 7px 14px rgba(0, 0, 0, .48), 0 0 0 3px rgba(4, 7, 6, .55);
}
/* Status text is a separate layer and never overlaps the faces — it sits
   just below the dice zone. */
.board-dice-layer .dice-remaining { position: absolute; z-index: var(--z-status); top: calc(100% + 4px); left: 0; right: 0; color: rgba(238, 229, 212, .65); font-size: 7px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.board-dice-layer .turn-text { position: absolute; z-index: var(--z-status); top: calc(100% + 16px); left: 50%; width: max-content; max-width: min(240px, 62%); transform: translateX(-50%); color: rgba(238, 229, 212, .82); font-size: 10px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }

/* Match controls sit in a legible bar so they read as a control cluster, not
   as faint text lost against the arena. */
.arena-actions {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 14px;
  border: 1px solid rgba(190, 150, 74, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 41, 39, .96), rgba(16, 23, 22, .96));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.arena-actions button {
  min-width: 0;
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid rgba(190, 150, 74, .5);
  border-radius: 999px;
  color: var(--arena-ivory);
  background: rgba(255, 255, 255, .07);
  font-size: 11px;
  font-weight: 700;
}
.arena-actions button:hover:not(:disabled) { border-color: rgba(211, 176, 105, .85); background: rgba(255, 255, 255, .13); }
.arena-actions button:disabled { opacity: .4; }
/* An available bear-off (or bar entry) stands out. */
.arena-actions button.legal-special {
  border-color: rgba(95, 224, 192, .8);
  background: rgba(95, 224, 192, .16);
  color: #eafff9;
}
.arena-actions .resume-control:not([hidden]) {
  border-color: rgba(232, 161, 60, .75);
  background: rgba(232, 161, 60, .16);
}
/* #bearOffBtn visibility is driven by syncControls() in app.js: hidden until a
   match is active, disabled unless a `to: 'off'` move is legal. */

body.match-active .opening-roll-panel { z-index: 20; inset: 50% auto auto 50%; width: min(360px, 82%); transform: translate(-50%, -50%); }

/* Arena board geometry hotfix — explicit rows keep the point grid from collapsing. */
body.match-active .arena-board-center > .board {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row;
  align-items: stretch;
  justify-items: stretch;
}
body.match-active .arena-board-center > .board > .point {
  position: relative;
  z-index: var(--z-points);
  display: block !important;
  width: 100%;
  height: auto !important;
  min-width: 0;
  min-height: 0 !important;
  overflow: visible;
}
body.match-active .arena-board-center > .board > .point > .triangle {
  position: absolute;
  inset: 0 4% auto;
  display: block !important;
  width: 92% !important;
  height: 88% !important;
  transform: none !important;
  border: 0 !important;
  background: linear-gradient(180deg, #e8dcc3, #bca572);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: .94;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .38));
}
body.match-active .arena-board-center > .board > .point:nth-child(odd) > .triangle { background: linear-gradient(180deg, #2b8b75, #123f35); }
body.match-active .arena-board-center > .board > .point:nth-child(n+13) > .triangle {
  inset: auto 4% 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(0deg, #e8dcc3, #bca572);
}
body.match-active .arena-board-center > .board > .point:nth-child(n+13):nth-child(odd) > .triangle { background: linear-gradient(0deg, #2b8b75, #123f35); }
body.match-active .arena-board-center > .board > .point > .checker-stack { top: 2px; bottom: auto; left: 50%; z-index: var(--z-checkers); transform: translateX(-50%); }
body.match-active .arena-board-center > .board > .point:nth-child(n+13) > .checker-stack { top: auto; bottom: 2px; }
body.match-active .arena-board-center > .board > .point > .checker-stack,
body.match-active .arena-board-center > .board > .point > .checker-stack > .checker { visibility: visible !important; opacity: 1 !important; }

/* Classic (non-cosmetic) board stacking — mirrors the cosmetic board's own
   absolute, JS-computed-step pattern (see .cosmetic-board-active .checker-stack
   / .checker further below) instead of a fixed 2px flexbox gap, so
   layoutClassicBoard() (board.js) can compress a tall stack to stay within
   the point's own half-board run exactly like the cosmetic board already
   does. Reuses the SAME --cos-i index already written per checker in
   renderBoard() for both boards — only --classic-step is new. Scoped
   strictly to classic arena mode; the cosmetic board's own rules (higher
   specificity via .cosmetic-board-active) are completely untouched. */
body.match-active:not(.cosmetic-board-active) .arena-board-center > .board > .point > .checker-stack {
  top: 0; bottom: auto; left: 50%; transform: translateX(-50%);
  height: 100%; display: block; gap: 0;
}
body.match-active:not(.cosmetic-board-active) .arena-board-center > .board > .point:nth-child(n+13) > .checker-stack {
  top: auto; bottom: 0;
}
body.match-active:not(.cosmetic-board-active) .arena-board-center > .board > .point > .checker-stack > .checker {
  position: absolute; left: 0;
  top: calc(var(--cos-i, 0) * var(--classic-step, 0px));
  bottom: auto;
}
body.match-active:not(.cosmetic-board-active) .arena-board-center > .board > .point:nth-child(n+13) > .checker-stack > .checker {
  top: auto;
  bottom: calc(var(--cos-i, 0) * var(--classic-step, 0px));
}

/* =============================================================================
   RESPONSIVE LAYERS  (ascending; see the scale in the file header)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   SMALL-PHONE EXCEPTIONS  — the only max-width rule set.
   Values below 560px that need to be tighter than the mobile base.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .hero { display: none; }
  .shell:not(.clean-product-shell) { padding-top: 24px; }
  .game-head h2 { font-size: 22px; }
  .board { gap: 1px; padding: 5px; }
  .triangle { border-left-width: 9px; border-right-width: 9px; }
  .turn-center { flex-direction: column-reverse; gap: 6px; }
  .turn-text { max-width: 180px; text-align: center; }

  .top-actions .ghost { font-size: 14px; }

  body[data-route="home"] .compact-launcher .launcher-copy h1 { font-size: 36px; }
  body[data-route="home"] .inline-game-selector .game-launch-grid { grid-template-columns: 1fr; }

  .backgammon-hub-head > div { display: none; }

  /* Small phones: the Friends button is icon-only (44px target kept), and the
     drawer + share dialog run near-full-width inside the safe area. */
  .hub-head-action { padding: 0; width: var(--tap-min); justify-content: center; }
  .hub-head-action .hub-head-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hub-head-action .friends-glyph { font-size: 18px; }
  .social-drawer { width: 100vw; border-left: 0; }
  .res-panel { width: min(340px, calc(100vw - 16px)); }
  .game-status-bar { min-height: 0; grid-template-columns: 1fr; }
  .game-status-bar .status-left { padding-left: 9px; padding-right: 9px; padding-bottom: 7px; }
  .level-status { grid-template-columns: auto minmax(45px, 1fr) auto; gap: 5px; }
  .level-status > span { font-size: 9px; }
  .level-status > span strong { font-size: 13px; }
  .level-status > small { font-size: 8px; }
  .resource-segment { gap: 3px; }
  .resource-segment strong { font-size: 9px; }
  .resource-segment small { display: none; }
  /* The title+value combo ("Table Points 8/10") doesn't fit a ~100px column
     on one line at this width — wrap it onto its own two lines instead of
     ellipsis-truncating the LABEL itself ("TABLE POINT…"). The state line is
     already hidden just above, so this is a clean title/value stack. */
  .resource-rail .hud-stat-title { grid-column: 1; grid-row: 1; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }

  /* Small phones: keep the compact 2-up seasonal cards, just a touch denser. */
  .season-panel-half { min-height: 0; padding: 12px 8px; }
  .rank-emblem { margin-top: 0; }

  /* CHOOSE GAME stays a swipe rail; show a bit more of the next card. */
  .hub-mode-grid { grid-auto-columns: 86%; }
  .season-rail-track { grid-auto-columns: 72%; }
  .result-rewards { grid-template-columns: 1fr 1fr; }
  .friends-actions { grid-template-columns: 1fr; }
  .session-row { grid-template-columns: 1fr; }
  .player-hub-resources { grid-template-columns: 1fr; }
  .game-hub-copy { padding: 20px 16px; border-radius: 20px; }
}

/* ---------------------------------------------------------------------------
   md — TABLET PORTRAIT  (>= 768)
   Roomier launcher, 3-cluster status HUD, wider language control, footer 2-up.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .topbar { padding-left: 24px; padding-right: 24px; }
  .premium-brand span { display: inline; }
  .premium-brand img { width: 42px; height: 42px; }

  .shell { width: min(96vw, 1180px); padding: 28px 0 50px; }
  .product-shell { width: min(96vw, 720px); padding-top: 28px; }

  /* Language control returns to the labelled pill. */
  .language-control {
    width: auto;
    min-width: 0;
    height: var(--hdr-ctl-h);
    min-height: var(--tap-min);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: visible;
    border: var(--hdr-ctl-bw) solid var(--line);
    border-radius: var(--hdr-ctl-r);
    background: rgba(255, 255, 255, .025);
    box-shadow: none;
  }
  .language-control::after { content: none; }
  .language-control .language-icon { font-size: 14px; filter: none; }
  .language-control select {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    opacity: 1;
    z-index: auto;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    padding-right: 2px;
  }

  .account-menu { position: absolute; right: 0; top: calc(100% + 12px); width: 230px; max-height: none; }

  /* Legacy hub layout tweaks that used to live at <= 820 */
  .product-hero { grid-template-columns: 1fr; margin-bottom: 38px; }
  .section-heading { align-items: start; flex-direction: column; }
  .section-heading > p { text-align: left; }
  .mode-grid { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: 1fr; }
  .profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .game-hub-hero { grid-template-columns: 1fr; gap: 14px; }
  .game-library-strip { grid-template-columns: 1fr; }

  /* Home launcher: 2-up game grid, still stacked hero. */
  body[data-route="home"] .launcher-intro { grid-template-columns: 1fr; }
  body[data-route="home"] .launcher-brand-note { display: none; }
  body[data-route="home"] .trust-points { grid-template-columns: 1fr 1fr; }
  body[data-route="home"] .inline-game-selector .game-launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body[data-route="home"] .clean-product-shell { width: min(96vw, 760px); padding-top: 18px; padding-bottom: 40px; }

  /* Backgammon hub: back to the 3-cluster status row + roomier dashboard. */
  body[data-route="backgammon"] { overflow-y: auto; }
  body[data-route="backgammon"] .product-shell { width: min(96vw, 1480px); padding: 10px 0 16px; }

  /* Desktop head: symmetric 1fr | auto | 1fr instead of flex space-between, so
     the centred "TABLECLASH · Backgammon" title is genuinely centred no matter
     how wide the back-link or the Friends button happen to be, and Friends is
     flush with the right edge of the rest of the hub. */
  .backgammon-hub-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; }
  .backgammon-hub-head .back-link { width: auto; font-size: inherit; }
  .backgammon-hub-head .back-link::before { content: none; }

  .game-status-bar {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.6fr);
    grid-template-rows: auto;
    min-height: 74px;
  }
  .game-status-bar .status-left { width: auto; overflow: visible; border-bottom: 0; border-right: 1px solid var(--line-soft); }
  /* Tablet+: profile + level share the left cluster evenly. Below 1024px
     .status-left itself is too narrow to also give #profileBtn a min-width
     floor without forcing an overlap with .level-status (confirmed at
     768/820px) — so this stays flex:1 1 auto with no floor here, preserving
     the original shrinkable min-width:0 from the unconditional rule above
     (line ~1941). The floor is applied only from 1024px up, see below. */
  .game-status-bar .status-left > #profileBtn { flex: 1 1 auto; }
  .game-status-bar .status-left > .level-status { flex: 1 1 auto; min-width: 128px; }
  .status-left .top-profile-copy strong { max-width: 14ch; font-size: 15px; }
  .status-cluster { padding: 9px 12px; }
  .status-cluster + .status-cluster { border-left: 1px solid var(--line); }
  .status-left { grid-area: auto; justify-content: flex-start; padding: 9px 12px; border: 0 !important; }
  .status-center { grid-area: auto; justify-content: center; border: 0 !important; }
  .status-right { grid-area: auto; width: auto; justify-content: flex-end; padding: 9px 12px; border: 0 !important; border-left: 1px solid var(--line) !important; place-items: center; }
  .game-status-bar .status-left #profileBtn { display: flex; width: auto; height: auto; }
  /* The "Player / Profile" label needs the wide xl identity button to sit
     without colliding with Level/XP — keep it hidden through md + lg. */
  .status-icon-button, .status-avatar-button { width: 46px; height: 46px; border-radius: 12px; }
  .friends-icon-button { width: 44px; height: 44px; border-radius: 12px; }
  /* Tablet+ status bar is 74px tall and .status-left is overflow:visible here,
     so the rank frame (165% of the avatar) finally has room — lift the lobby
     avatar off the phone-sized 34px. Arena avatars use .arena-avatar and are
     untouched. */
  .status-avatar-button .profile-avatar[class*="rank-"],
  body[data-route="backgammon"] .profile-identity-button .profile-avatar[class*="rank-"] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    font-size: 15px;
  }

  .resource-rail {
    display: flex !important; grid-template-columns: none; gap: 0; padding: 8px 0;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    --res-row-label: 12px; --res-row-value: 18px; --res-row-state: 12px; --res-row-track: 6px;
    --res-icon-size: 54px;
  }
  /* min-height, not height: the state line is allowed to wrap to a second
     line rather than being clipped, so the card grows instead of truncating. */
  .resource-rail .resource-segment {
    min-height: 56px;
    min-width: 122px;
    padding: 6px 13px;
    border: 0 !important;
    border-radius: 0;
    flex: 1;
  }
  .resource-rail .resource-segment + .resource-segment { border-left: 1px solid rgba(221, 180, 90, .18) !important; }
  .resource-rail .resource-segment small { display: block; }
  .resource-rail .vip-resource { min-width: 146px; }
  /* One identical icon box for all three tokens — the PNGs carry different
     amounts of transparent padding, object-fit:contain normalises the art. */
  .resource-rail .hud-stat-value { font-size: 15px; }
  .resource-rail .hud-stat-state { font-size: 9px; }
  .resource-segment strong { font-size: 15px; }
  .resource-segment small { font-size: 8px; }
  .resource-progress, .energy-meter { height: 4px; }

  .level-status { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 6px; gap: 5px 10px; min-width: 150px; }
  .level-status > small { grid-column: 2; grid-row: 1; }
  .level-status .level-track { grid-column: 1 / -1; }

  .backgammon-dashboard { grid-template-columns: 1fr; gap: 16px; }
  .dashboard-side { padding: 18px; }
  .rank-showcase { min-height: 0; }
  /* Tablet has the width for two balanced seasonal summary cards side by side. */
  .split-season-panel { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: none !important; --season-art: clamp(120px, 15vw, 150px); }
  .season-panel-half { padding: 18px 16px; gap: 8px; }
  .rank-emblem { transform: none; }

  .mode-stage { padding: 14px; }
  /* Landscape / general tablet: two-up grid. Rail is kept only in portrait
     (see the orientation block after md). Reset every rail property. */
  .hub-mode-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .hub-mode-card { min-height: 0; padding: 14px 14px 12px; border-radius: 16px; scroll-snap-align: none; }
  .hub-mode-card h2 { font-size: clamp(16px, 1.7vw, 19px); }

  .season-rail { grid-column: 1 / -1; }
  .season-rail-track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .season-rail .rail-card { min-height: 100px; }

  .backgammon-bottom-bar { grid-template-columns: repeat(4, 1fr); }
  .backgammon-bottom-bar button:nth-child(3),
  .backgammon-bottom-bar button:nth-child(4) { border-left: 1px solid var(--line); border-top: 0; }

  .site-footer { grid-template-columns: 1fr auto; }
  .legal-shell { padding-top: 48px; }
}

/* ---------------------------------------------------------------------------
   TABLET PORTRAIT — the mode area is a 2x2 grid here too.
   It used to be a swipe rail because a 2-up grid needed horizontal room a
   portrait tablet did not have. Now that a card is only artwork + title +
   one compact state line (PC-T1C2), two fit side by side comfortably, and
   the rail's clipped-last-card edge goes away with it.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body[data-route="backgammon"] .hub-mode-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  body[data-route="backgammon"] .hub-mode-card { scroll-snap-align: none; }
}

/* ---------------------------------------------------------------------------
   lg — TABLET LANDSCAPE / LAPTOP  (>= 1024)
   Primary nav returns to the header. Dashboard gains its side rails.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* From 1024px .status-left has enough room (confirmed via computed layout)
     for #profileBtn to hold a floor sized for the 40px tablet avatar + a
     full-length username without .level-status's own 128px floor causing an
     overlap (that combination only overflows below 1024px — see the 768px+
     rule above, which intentionally stays floor-less). Matches the id-level
     specificity of the unconditional min-width:0 rule (line ~1941) so this
     wins purely on source order, without extra specificity weight. */
  .game-status-bar .status-left > #profileBtn { min-width: 175px; }

  .topbar { height: 76px; padding: 0 clamp(20px, 5vw, 72px); }
  .app-topbar { height: 72px; gap: 22px; }

  /* Primary navigation back in the header; account menu loses the nav + dots. */
  .top-nav, .platform-nav { display: flex; }
  .mobile-platform-nav { display: none; }
  .account-menu-button::before { content: none; }
  .account-menu-button span { display: block; }
  .account-menu-button { display: grid; place-content: center; gap: 3px; background: transparent; }

  .shell { width: min(1180px, 92vw); padding: 80px 0 100px; }
  .top-resource { display: flex; }

  .hero { grid-template-columns: 1.5fr .7fr; min-height: 520px; }
  .hero h1 { font-size: clamp(56px, 8vw, 110px); }
  .hero-card { display: block; }
  .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

  .product-hero { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .55fr); margin-bottom: 62px; }
  .product-shell { width: min(1320px, 94vw); padding-top: 54px; }
  .section-heading { flex-direction: row; align-items: end; }
  .section-heading > p { text-align: right; }
  .mode-grid { grid-template-columns: 1.35fr repeat(3, 1fr); }
  .hub-grid { grid-template-columns: 1.15fr .85fr; }
  .profile-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-edit-row { grid-template-columns: 1.4fr .6fr auto; }
  .settings-groups { grid-template-columns: repeat(2, 1fr); }
  .provider-grid { grid-template-columns: repeat(2, 1fr); }
  .friends-actions { grid-template-columns: 1fr 1fr; }
  .result-rewards { grid-template-columns: repeat(3, 1fr); }

  .game-hub-hero { grid-template-columns: 1fr 320px; }
  .game-library-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-title-row h1 { font-size: clamp(38px, 5vw, 66px); }

  .launcher-hero { grid-template-columns: 1fr minmax(260px, .55fr); padding: 44px; }
  .game-launch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-lobby { grid-template-columns: minmax(0, 1fr) auto; padding: 38px; }
  .lobby-actions { width: auto; flex-direction: row; justify-self: start; }
  .lobby-actions button { width: auto; }

  /* Home: three-column launcher (headline · central emblem · game panel).
     The composition targets ~one viewport at 1366x768 and 1080p; it is not
     height-locked, so the slim footer stays reachable by a short natural
     scroll on shorter screens. .launcher-intro dissolves so its children
     join the parent grid. */
  body[data-route="home"] .clean-product-shell {
    width: min(1180px, calc(100vw - 48px));
    min-height: calc(100dvh - 76px - 200px);
    align-content: center;
    padding: 18px 0 8px;
    gap: 0;
  }
  body[data-route="home"] .compact-launcher {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1.15fr) 150px minmax(360px, .96fr);
    grid-template-rows: auto;
    align-items: center;
  }
  body[data-route="home"] .launcher-intro { display: contents; }
  body[data-route="home"] .launcher-copy {
    grid-column: 1;
    align-self: center;
    min-width: 0;
    max-width: none;
    padding: 20px 40px 20px 4px;
  }
  body[data-route="home"] .compact-launcher .launcher-copy h1 {
    font-size: clamp(38px, 3.6vw, 54px);
    font-weight: 430;
    letter-spacing: -.018em;
    line-height: 1.06;
    margin: 16px 0 20px;
  }
  body[data-route="home"] .launcher-copy .eyebrow { font-size: 11px; }
  body[data-route="home"] .compact-launcher .launcher-copy p { max-width: 44ch; font-size: 14.5px; line-height: 1.6; }
  body[data-route="home"] .trust-points { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; max-width: 44ch; }
  body[data-route="home"] .trust-points div { padding: 10px 14px; }
  body[data-route="home"] .launcher-brand-note {
    display: flex;
    grid-column: 2;
    align-self: center;
    height: 78%;
    border-left: 1px solid var(--hair-gold);
    border-right: 1px solid var(--hair-gold);
    padding: 0 22px;
    gap: 14px;
  }
  body[data-route="home"] .launcher-brand-note img { width: 122px; height: 122px; }
  body[data-route="home"] .launcher-brand-note strong { white-space: nowrap; font-size: 15px; }
  body[data-route="home"] .launcher-brand-note span { font-size: 10.5px; }
  body[data-route="home"] .inline-game-selector {
    grid-column: 3;
    min-width: 0;
    align-self: center;
    border-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 20px 4px 20px 44px;
  }
  body[data-route="home"] .inline-game-selector .section-heading { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
  body[data-route="home"] .inline-game-selector .section-heading > p { text-align: left; font-size: 12px; }
  /* Single-column list of five equal rows — one card family, active state is
     border + glow + CTA colour only, never a bigger box. */
  body[data-route="home"] .inline-game-selector .game-launch-grid { grid-template-columns: 1fr; gap: 10px; }
  body[data-route="home"] .inline-game-selector .game-launch-card { min-width: 0; min-height: 74px; padding: 12px 16px; gap: 14px; }

  /* Backgammon: still scroll-flow (locked layout is xl), but three-column
     dashboard with the single left rail, per the current 1024-1180 behaviour. */
  .backgammon-dashboard { grid-template-columns: 200px minmax(0, 1fr); }
  .game-status-bar { grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.7fr); }
  .hub-mode-card { min-height: 0; }

  /* The seasonal panel is back in a narrow left rail — stack the two halves. */
  .split-season-panel { grid-template-columns: 1fr; }
  .season-panel-half { padding: 14px 12px; }
  .season-panel-half + .season-panel-half { border-left: 0; border-top: 1px solid rgba(221, 180, 90, .18); }
}

/* ---------------------------------------------------------------------------
   xl — DESKTOP ONE-SCREEN  (>= 1181)
   The locked, no-scroll dashboard. Consolidated: one rule per selector,
   values taken from the current live computed styles at >= 1181.
   --------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  /* ---- Home one-screen ---- */
  body[data-route="home"] .clean-product-shell { width: min(1150px, calc(100vw - 48px)); }

  /* ---- Backgammon: viewport lock ---- */
  body[data-route="backgammon"] { height: 100dvh; overflow: hidden; }
  body[data-route="backgammon"] .app-topbar { height: 62px; }
  body[data-route="backgammon"] .product-shell {
    width: min(1480px, 96vw);
    height: calc(100dvh - 62px);
    min-height: 650px;
    padding: 10px 0;
    gap: 0;
  }
  body[data-route="backgammon"] .backgammon-hub {
    height: 100%;
    gap: 10px;
    grid-template-rows: 30px 84px minmax(0, 1fr) 60px;
  }

  /* ---- Status HUD ---- */
  .game-brand-line { position: absolute; left: 50%; transform: translateX(-50%); }
  body[data-route="backgammon"] .game-status-bar {
    min-height: 84px;
    grid-template-columns: minmax(356px, 1.15fr) minmax(560px, 1.85fr);
    grid-template-rows: auto;
    border-radius: 16px;
  }
  body[data-route="backgammon"] .status-cluster { min-height: 82px; }
  body[data-route="backgammon"] .status-left { grid-area: auto; min-width: 356px; padding: 0; gap: 0; }
  body[data-route="backgammon"] .status-center.resource-rail { display: flex; min-width: 0; padding: 0; }
  body[data-route="backgammon"] .status-right { grid-area: auto; width: 82px; padding: 0 10px; display: grid; place-items: center; border-left: 1px solid var(--line) !important; }

  body[data-route="backgammon"] #settingsBtn,
  body[data-route="backgammon"] .friends-icon-button {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #dfb45a;
    font-size: 25px;
  }
  body[data-route="backgammon"] #settingsBtn { margin: 0 10px; }
  body[data-route="backgammon"] .hud-vertical-divider {
    display: block;
    width: 1px;
    height: 58px;
    flex: 0 0 1px;
    margin-right: 8px;
    background: linear-gradient(transparent, rgba(221, 180, 90, .34), transparent);
  }
  /* Identity block: a little more left inset and a taller slot so the enlarged
     avatar + rank frame and the bigger username sit comfortably, and so the
     block visually balances the Level/XP cell beside it. */
  /* .game-status-bar .status-left > #profileBtn (unconditional, id-specific)
     sets min-width:0 so the identity button can collapse on small screens.
     At xl that same min-width:0 let it lose the flex-shrink race against
     .level-status's own min-width floor once .status-left is narrower than
     both items' combined natural width (roughly 1181-1300px), clipping the
     username. This floor is sized for the widest realistic case (unframed
     56px avatar + padding + gap) plus room for a full-length username, so it
     never re-clips across the xl range without touching .level-status's own
     sizing. Matches that rule's id-level specificity so this override wins
     purely on source order (this block is declared later). */
  body[data-route="backgammon"] .status-left > #profileBtn {
    min-width: 220px;
  }
  body[data-route="backgammon"] .profile-identity-button {
    width: 252px;
    height: 70px;
    padding: 7px 16px 7px 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    justify-content: flex-start;
    gap: 13px;
  }
  body[data-route="backgammon"] .profile-identity-button .profile-avatar { width: 56px; height: 56px; flex: 0 0 56px; font-size: 22px; }
  /* Framed: the ring renders at 165% of the avatar, so 46px -> ~76px of ring,
     which now fits the 82px-tall xl cluster. Arena frames are untouched. */
  .status-avatar-button .profile-avatar[class*="rank-"],
  body[data-route="backgammon"] .profile-identity-button .profile-avatar[class*="rank-"] {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 17px;
  }
  body[data-route="backgammon"] .profile-identity-button .top-profile-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
  body[data-route="backgammon"] .top-profile-copy strong {
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.2;
  }

  body[data-route="backgammon"] .level-status {
    flex: 1;
    min-width: 205px;
    max-width: 260px;
    height: 70px;
    padding: 7px 10px 7px 18px;
    margin-left: 2px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-left: 1px solid rgba(221, 180, 90, .2);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
  }
  body[data-route="backgammon"] .level-status > span { color: #dfe8e5; }
  body[data-route="backgammon"] .level-status > span strong {
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    height: 20px;
    margin-left: 4px;
    border-radius: 7px;
    background: rgba(95, 224, 192, .1);
    color: var(--teal);
  }
  body[data-route="backgammon"] .level-status > small { align-self: center; }
  body[data-route="backgammon"] .level-status .level-track { height: 5px; }

  body[data-route="backgammon"] .resource-rail .resource-segment { flex: 1; min-width: 0; max-width: none; min-height: 82px; padding: 10px 18px; }
  body[data-route="backgammon"] .resource-rail .vip-resource { flex: 1.12; }
  /* One shared icon box across Level/VIP/Table Points/Table Coins. */
  body[data-route="backgammon"] .resource-rail .vip-crystal-icon,
  body[data-route="backgammon"] .ap-regen-ring,
  body[data-route="backgammon"] .resource-rail .clash-chip-icon { width: 60px; height: 60px; flex: 0 0 60px; margin: 0; }
  body[data-route="backgammon"] .resource-progress-copy { min-width: 92px; }
  /* The copy column takes the whole remaining card width, which is what gives
     the state line room to render "Fully replenished" (and longer strings such
     as a "Regenerates in 04:12" countdown) in full. */
  body[data-route="backgammon"] .resource-rail .hud-stat-copy { flex: 1 1 auto; min-width: 0; }
  body[data-route="backgammon"] .resource-rail .hud-stat-value { font-size: 17px; }
  body[data-route="backgammon"] .resource-rail .hud-stat-state { font-size: 9px; }
  body[data-route="backgammon"] .resource-progress { display: block; width: 100%; height: 4px; margin-top: 3px; border-radius: 99px; background: #213036; overflow: hidden; }
  body[data-route="backgammon"] .resource-progress > b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c89b42, #54d8bd); box-shadow: 0 0 8px rgba(84, 216, 189, .45); }
  body[data-route="backgammon"] .energy-resource::after { display: none; }
  body[data-route="backgammon"] .energy-resource .energy-bolt { display: none; }
  body[data-route="backgammon"] .energy-meter { width: 100%; height: 6px; position: relative; }
  body[data-route="backgammon"] .energy-meter b {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #cda247 0%, #55ddbd 58%, #9dffe8 100%);
    animation: energy-fill-glow 1.9s ease-in-out infinite;
  }
  body[data-route="backgammon"] .energy-meter b::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, .75) 48%, transparent 78%);
    transform: translateX(-140%);
    animation: energy-inside-sweep 2.3s linear infinite;
  }
  @keyframes energy-fill-glow { 50% { filter: brightness(1.22); box-shadow: 0 0 12px rgba(95, 224, 192, .8); } }
  @keyframes energy-inside-sweep { to { transform: translateX(140%); } }

  /* ---- Dashboard: three columns, fixed height, no scroll ---- */
  body[data-route="backgammon"] .backgammon-dashboard {
    grid-template-columns: 250px minmax(0, 1fr) 250px;
    gap: 12px;
    height: auto;
    min-height: 0;
  }
  body[data-route="backgammon"] .dashboard-side { padding: 16px; }

  /* ---- Split season panel ---- (reset the mobile 2-up rail model) */
  .split-season-panel { padding: 0 !important; display: grid !important; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 0 !important; overflow: hidden; }
  body[data-route="backgammon"] .split-season-panel { grid-template-columns: 1fr !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; --season-art: 150px; }
  .season-panel-half { min-height: 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
  .season-panel-half + .season-panel-half { border-left: 0; border-top: 1px solid rgba(221, 180, 90, .18); }
  body[data-route="backgammon"] .season-panel-half {
    height: 100%;
    display: grid;
    justify-items: center;
    align-content: center;
    justify-content: stretch;
    gap: 6px;
    padding: 12px 10px;
  }
  body[data-route="backgammon"] .split-season-panel .rank-emblem { width: var(--season-art) !important; height: var(--season-art) !important; margin: 0 auto !important; }
  .split-season-panel .rank-title { font-size: 17px !important; }
  body[data-route="backgammon"] .achievement-legend-emblem {
    width: var(--season-art) !important;
    height: var(--season-art) !important;
    margin: 0 auto !important;
    background-image: url('/frontend/assets/legend-season-achievement-transparent-v2.png') !important;
    background-size: 90% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: drop-shadow(0 8px 14px rgba(221, 180, 90, .26));
  }
  body[data-route="backgammon"] .split-season-panel .rank-progress-note,
  body[data-route="backgammon"] .seasonal-achievement-half .season-achievement-panel { margin: 0 !important; }
  .split-season-panel .rank-progress-note { margin-top: auto !important; padding: 7px 9px !important; }
  .seasonal-achievement-half .season-achievement-panel { margin-top: auto !important; padding: 8px 9px !important; gap: 3px !important; }
  .seasonal-achievement-half .season-achievement-head { align-items: center; width: 100%; }
  .seasonal-achievement-half .season-achievement-head strong { font-family: var(--font-serif); font-size: 12px; }
  .seasonal-achievement-half .season-achievement-panel p { font-size: 8px !important; }
  .seasonal-achievement-half .season-achievement-panel > small { font-size: 7px; }

  /* ---- Central Arena mode grid: connected 2x2 console ---- */
  body[data-route="backgammon"] .central-arena-stage {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 14px;
    background: linear-gradient(150deg, rgba(20, 29, 31, .98), rgba(8, 13, 15, .99));
  }
  body[data-route="backgammon"] .central-arena-stage::before,
  body[data-route="backgammon"] .central-arena-stage::after,
  body[data-route="backgammon"] .central-arena-grid::before { display: none !important; }
  .central-arena-grid {
    position: relative;
    padding: 7px;
    border: 1px solid rgba(218, 174, 79, .34);
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(5, 10, 12, .82), rgba(14, 22, 24, .95));
    box-shadow: inset 0 0 0 1px rgba(95, 224, 192, .04), 0 16px 34px rgba(0, 0, 0, .24);
  }
  body[data-route="backgammon"] .central-arena-grid {
    height: 100% !important;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
    scroll-snap-type: none;
  }
  /* A non-arena hub-mode-grid on desktop is a four-up row (rail model reset). */
  body[data-route="backgammon"] .hub-mode-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  /* Denser cards around the SAME icon: content packs from the top instead of
     stretching to fill the full grid-cell height, so the height reduction
     shows up as reclaimed empty space, not a smaller card family. */
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card,
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card:first-child,
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card:last-child {
    min-height: 0;
    height: 100%;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(221, 180, 90, .16) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(25, 35, 37, .82), rgba(9, 15, 17, .94));
  }
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card.featured {
    transform: none !important;
    border-color: rgba(95, 224, 192, .55) !important;
    background: radial-gradient(circle at 18% 25%, rgba(48, 184, 156, .2), transparent 44%), linear-gradient(145deg, rgba(22, 47, 45, .96), rgba(9, 20, 21, .98));
    box-shadow: inset 0 0 0 1px rgba(95, 224, 192, .05), 0 0 18px rgba(47, 197, 164, .1);
  }
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card.locked { opacity: .68; filter: saturate(.55); }
  body[data-route="backgammon"] .central-arena-grid .mode-status { min-height: 0; }
  /* Icon stays its full readable size — only the whitespace around it shrinks. */
  body[data-route="backgammon"] .central-arena-grid .mode-art { width: clamp(120px, 13vw, 212px); height: clamp(120px, 13vw, 212px); margin: 0 auto; }
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card h2 { font-size: clamp(16px, 1.3vw, 20px); margin: 0; letter-spacing: .01em; }

  /* ---- Season rail + bottom bar ---- */
  body[data-route="backgammon"] .season-rail { grid-column: auto; }
  body[data-route="backgammon"] .season-rail-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 8px; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  body[data-route="backgammon"] .season-rail .rail-card { min-height: 0; height: 116px; padding: 12px; }
  body[data-route="backgammon"] .backgammon-bottom-bar { height: 60px; }
  body[data-route="backgammon"] .backgammon-bottom-bar button { min-height: 60px; grid-template-columns: auto auto; gap: 0 12px; }
  body[data-route="backgammon"] .backgammon-bottom-bar button > span { grid-row: auto; font-size: 25px; }
  body[data-route="backgammon"] .backgammon-bottom-bar strong { font-size: 14px; letter-spacing: .08em; }
  body[data-route="backgammon"] .backgammon-bottom-bar button:not(:disabled) span { color: #dfb45a; }
}

/* ---------------------------------------------------------------------------
   ARENA — DESKTOP / NATIVE LANDSCAPE  →  opponent | board | player (3 columns)
   Web: once there is room (landscape, >= 700px). Native shell: whenever it is
   landscape, regardless of width (html[data-client="native"], set by arena.js
   from an explicit non-sensitive signal — never inferred from width).
   The two blocks carry the same declarations on purpose so each path is
   self-contained and greppable.
   --------------------------------------------------------------------------- */
@media (orientation: landscape) and (min-width: 640px) {
  .arena-stage {
    --arena-avatar-size: clamp(84px, 9.5vw, 138px);
    --arena-card-radius: 18px;
    width: min(2280px, 100%);
    /* Narrower side columns → the centred board reclaims the width, and with
       the aspect-ratio fit it then grows to the full row height. */
    grid-template-columns:
      clamp(132px, 12vw, 224px) minmax(0, 1fr) clamp(132px, 12vw, 224px);
    grid-template-rows: minmax(0, 1fr);   /* one row — the board owns the height */
    column-gap: clamp(8px, 1.4vw, 20px);
    row-gap: 0;
    padding: max(36px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
             max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  #opponentPlayerCard { grid-column: 1; grid-row: 1; align-self: center; }
  /* Fit-and-centre: the frame keeps a 3:2 box and grows to the largest size
     both the (now wider) centre column and the row height allow — board size =
     min(width-constrained, height-constrained). Cosmetic boards override the
     ratio with the artwork's exact 1024/683. */
  .arena-board-frame {
    grid-column: 2; grid-row: 1;
    align-self: center; justify-self: center;
    aspect-ratio: 3 / 2;
    width: 100%; height: auto; max-height: 100%;
  }
  #playerPlayerCard { grid-column: 3; grid-row: 1; align-self: center; }
  /* Compact controls float over the bottom margin instead of taking a row. */
  .arena-actions {
    position: absolute;
    left: 50%; bottom: max(6px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 12;
    min-height: 0; padding: 5px 12px; gap: 7px;
  }
  .arena-player-card {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: clamp(7px, 0.8vw, 11px);
    padding: clamp(10px, 1.1vw, 16px) clamp(9px, 0.9vw, 13px);
  }
  .arena-player-name { font-size: clamp(16px, 1.35vw, 21px); }
  .arena-score { font-size: clamp(15px, 1.2vw, 19px); }
  .arena-player-copy { justify-items: center; gap: 5px; }
  .arena-player-meta { justify-content: center; }
  .arena-player-score { justify-items: center; }
}
/* Native shell in landscape: same 3-column composition regardless of width,
   plus side safe-area padding. Deliberately mirrors the web block above so the
   native path is self-contained. */
@media (orientation: landscape) {
  html[data-client="native"] .arena-stage {
    --arena-avatar-size: clamp(84px, 9.5vw, 138px);
    --arena-card-radius: 18px;
    width: 100%;
    grid-template-columns:
      clamp(128px, 12vw, 224px) minmax(0, 1fr) clamp(128px, 12vw, 224px);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(8px, 1.4vw, 20px);
    row-gap: 0;
    padding: max(30px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
             max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  html[data-client="native"] #opponentPlayerCard { grid-column: 1; grid-row: 1; align-self: center; }
  html[data-client="native"] .arena-board-frame {
    grid-column: 2; grid-row: 1;
    align-self: center; justify-self: center;
    aspect-ratio: 3 / 2;
    width: 100%; height: auto; max-height: 100%;
  }
  html[data-client="native"] #playerPlayerCard { grid-column: 3; grid-row: 1; align-self: center; }
  html[data-client="native"] .arena-actions {
    position: absolute;
    left: 50%; bottom: max(6px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 12;
    min-height: 0; padding: 5px 12px; gap: 7px;
  }
  html[data-client="native"] .arena-player-card {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: clamp(7px, 0.8vw, 11px);
    padding: clamp(10px, 1.1vw, 16px) clamp(9px, 0.9vw, 13px);
  }
  html[data-client="native"] .arena-player-name { font-size: clamp(16px, 1.35vw, 21px); }
  html[data-client="native"] .arena-score { font-size: clamp(15px, 1.2vw, 19px); }
  html[data-client="native"] .arena-player-copy { justify-items: center; gap: 5px; }
  html[data-client="native"] .arena-player-meta { justify-content: center; }
  html[data-client="native"] .arena-player-score { justify-items: center; }
}

/* Compact landscape (tablet / small laptop, ~700–1200px): tighten the side
   columns so the centred board takes more of the width. */
@media (orientation: landscape) and (min-width: 640px) and (max-width: 1200px) {
  .arena-stage {
    --arena-avatar-size: clamp(60px, 10vw, 96px);
    grid-template-columns:
      clamp(102px, 11vw, 150px) minmax(0, 1fr) clamp(102px, 11vw, 150px);
    column-gap: clamp(6px, 1.1vw, 14px);
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  html[data-client="native"] .arena-stage {
    --arena-avatar-size: clamp(60px, 10vw, 96px);
    grid-template-columns:
      clamp(100px, 11vw, 150px) minmax(0, 1fr) clamp(100px, 11vw, 150px);
    column-gap: clamp(6px, 1.1vw, 14px);
  }
  .arena-player-card { padding: clamp(8px, 1.1vw, 13px) 8px; gap: 6px; }
  .arena-player-name { font-size: clamp(14px, 1.8vw, 18px); }
}

/* Very short landscape (phone landscape): tighten the stacked side panels and
   fold the action row so nothing is clipped. Still the 3-column composition. */
@media (orientation: landscape) and (max-height: 460px) {
  .arena-stage,
  html[data-client="native"] .arena-stage {
    --arena-avatar-size: clamp(50px, 15vh, 72px);
    padding-top: max(32px, env(safe-area-inset-top));
  }
  .arena-player-card { gap: 5px; padding: 8px 10px; }
  .arena-player-name { font-size: clamp(13px, 3.6vh, 17px); }
  .arena-player-meta { display: none; }
  .arena-actions { padding: 3px 8px; gap: 6px; bottom: max(3px, env(safe-area-inset-bottom)); }
  .arena-actions button { min-height: 30px; padding: 5px 10px; font-size: 10px; }
  .arena-actions #legalBtn { display: none; }
  .board-dice-layer .turn-text { display: none; }
}

/* ---------------------------------------------------------------------------
   ARENA — MOBILE BROWSER PORTRAIT  (opponent · board · player · controls)
   The whole group is centred vertically so the panels hug the board rather
   than pinning to the viewport edges; the board keeps its aspect ratio.
   --------------------------------------------------------------------------- */
@media (orientation: portrait) {
  .arena-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    align-content: center;
    row-gap: clamp(6px, 1.2dvh, 12px);
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .arena-toolbar {
    position: static;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }
  #opponentPlayerCard { grid-row: 2; }
  .arena-board-frame { grid-row: 3; align-self: center; justify-self: center; max-height: 70dvh; grid-template-columns: 26px minmax(0, 1fr) 26px; }
  #playerPlayerCard { grid-row: 4; }
  .arena-actions { grid-row: 5; min-height: 0; padding: 5px 12px; }
  .arena-tool { padding: 7px 10px; font-size: 8px; min-height: 32px; }
  .arena-player-card { grid-template-columns: auto minmax(0, 1fr) auto; min-height: clamp(52px, 12vw, 70px); gap: 10px; padding: 7px 12px; text-align: left; }
  .arena-player-copy { justify-items: start; }
  .arena-player-meta { justify-content: flex-start; font-size: 9px; }
  .board-dice-layer .turn-text { display: none; }
}

@media (orientation: portrait) and (max-height: 720px) {
  .arena-stage { row-gap: 6px; }
  .arena-player-card { min-height: 48px; }
  .arena-board-frame { max-height: 62dvh; }
}

/* 320–430px phones: tighten avatar + card so the board keeps the width. */
@media (max-width: 430px) {
  .arena-stage { --arena-avatar-size: clamp(46px, 13vw, 60px); }
  .arena-player-card { gap: 8px; padding: 7px 10px; border-radius: 14px; }
  .arena-player-name { font-size: clamp(15px, 4.4vw, 18px); }
  .arena-board-frame { grid-template-columns: 22px minmax(0, 1fr) 22px; }
}

@media (pointer: coarse) {
  .arena-tool,
  .arena-actions button { min-height: var(--tap-min); }
  /* Give the touch bear-off / bar-entry zones a real target without a visible
     button over the artwork. */
  body.match-active .bear-off-tray.player-tray.legal-special,
  body.match-active .arena-bar-stack--mine.legal-special { min-width: var(--tap-min); min-height: var(--tap-min); }
}

@media (prefers-reduced-motion: reduce) {
  .arena-timer-border,
  .arena-timer-border-run { transition: none; }
  .arena-backdrop-glow { display: none; }
}

/* Short desktop viewports (laptops ~768-920 tall): the xl one-screen lobby is
   authored for ~950px+ and would clip the bottom nav here. Release the height
   lock so the hub takes its natural height and the page scrolls (~120px on a
   768-tall laptop) with the visual hierarchy intact, and keep a little chrome
   compression so the scroll stays small. */
@media (min-width: 1181px) and (max-height: 920px) {
  body[data-route="backgammon"] { height: auto; min-height: 100dvh; overflow-y: auto; }
  body[data-route="backgammon"] .product-shell { height: auto; min-height: 0; padding-bottom: 14px; }
  body[data-route="backgammon"] .backgammon-hub { height: auto; grid-template-rows: none; gap: 8px; }
  /* Short desktop (e.g. 1366x768): this block already switches the hub to
     auto height + page scroll, so the status bar keeps enough room for the
     enlarged rank frame (~76px) and a two-line resource state string instead
     of clipping either. */
  body[data-route="backgammon"] .resource-rail { --res-row-value: 18px; --res-icon-size: 58px; }
  body[data-route="backgammon"] .game-status-bar { min-height: 82px; }
  body[data-route="backgammon"] .status-cluster { min-height: 80px; }
  body[data-route="backgammon"] .backgammon-dashboard { height: auto; min-height: 0; }
  body[data-route="backgammon"] .split-season-panel { grid-template-rows: none !important; --season-art: 108px; }
  body[data-route="backgammon"] .season-panel-half { height: auto; padding: 8px 10px; gap: 4px; }
  body[data-route="backgammon"] .central-arena-stage { height: auto; padding-top: 8px; }
  body[data-route="backgammon"] .central-arena-grid { height: auto !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card,
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card:first-child,
  body[data-route="backgammon"] .central-arena-grid .hub-mode-card:last-child { height: auto; padding: 8px 12px; }
  body[data-route="backgammon"] .central-arena-grid .mode-art { width: clamp(96px, 8.5vw, 124px); height: clamp(96px, 8.5vw, 124px); margin: 0 auto; }

  body[data-route="backgammon"] .app-topbar { height: 56px; }
  body[data-route="backgammon"] .seasonal-rank-half,
  body[data-route="backgammon"] .seasonal-achievement-half { grid-template-rows: auto minmax(0, var(--season-art)) auto; }
  body[data-route="backgammon"] .rail-card { height: auto; min-height: 92px; }
  body[data-route="backgammon"] .backgammon-bottom-bar button { min-height: 52px; }
}

@media (min-width: 1024px) and (max-height: 760px) {
  body[data-route="home"] .clean-product-shell { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  body[data-route="home"] .inline-game-selector { padding-top: 12px; padding-bottom: 14px; }
  body[data-route="home"] .inline-game-selector .game-launch-card { min-height: 62px; }
  body[data-route="home"] .compact-launcher .launcher-copy h1 { font-size: clamp(34px, 3.2vw, 46px); margin: 10px 0 14px; }
  body[data-route="home"] .trust-points { margin-top: 14px; }
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .language-control, .account-menu, .game-launch-card, .hub-mode-card { transition: none !important; animation: none !important; }
  .hub-mode-grid, .season-rail, .game-launch-grid { scroll-behavior: auto; }
  html { scroll-behavior: auto; }
}

/* Joker staging client. Kept independent from the Backgammon board selectors. */
body[data-route="joker"] { background:radial-gradient(circle at 50% 15%,#193b35 0,#0a1718 52%,#050b0d 100%); }
body[data-route="joker"] .site-footer { display:none; }
.joker-hub { width:min(1180px,calc(100% - 32px)); margin:24px auto; color:#f4ead1; }
.joker-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.joker-head h1 { margin:2px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:34px; }
.joker-waiting { min-height:520px; display:grid; place-items:center; align-content:center; gap:16px; text-align:center; border:1px solid rgba(221,180,90,.3); border-radius:24px; background:rgba(5,18,18,.78); padding:36px; }
.joker-waiting p { max-width:590px; color:var(--muted); line-height:1.65; }
.joker-waiting button { min-width:220px; }
.joker-mark { font-size:78px; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)); }
.joker-table { display:grid; gap:18px; padding:22px; border:1px solid rgba(221,180,90,.3); border-radius:24px; background:linear-gradient(145deg,rgba(10,38,32,.96),rgba(5,19,20,.98)); box-shadow:0 26px 70px rgba(0,0,0,.35); }
.joker-scoreboard { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.joker-scoreboard>div,.joker-player { padding:12px 14px; border:1px solid rgba(221,180,90,.18); border-radius:12px; background:rgba(0,0,0,.22); }
.joker-scoreboard span,.joker-player span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.joker-scoreboard strong { display:block; margin-top:4px; text-transform:capitalize; }
.joker-players { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.joker-player { display:grid; gap:5px; }
.joker-player.active { border-color:#ddb45a; box-shadow:0 0 0 2px rgba(221,180,90,.12); }
.joker-trick { min-height:150px; display:flex; align-items:center; justify-content:center; gap:18px; border-radius:50%; border:1px dashed rgba(221,180,90,.3); background:rgba(13,74,53,.32); }
.playing-card { width:76px; height:108px; display:grid; place-items:center; border:1px solid #d9cba8; border-radius:9px; background:#f5edda; color:#15201d; font-family:Georgia,"Times New Roman",serif; font-weight:800; font-size:20px; box-shadow:0 8px 18px rgba(0,0,0,.35); }
.playing-card.red { color:#a52d36; }
.joker-hand { display:flex; gap:10px; padding:14px 4px 4px; overflow-x:auto; }
.hand-card { flex:0 0 76px; cursor:pointer; transform:translateY(0); transition:.15s ease; }
.hand-card:not(:disabled):hover { transform:translateY(-9px); border-color:#ddb45a; }
.hand-card:disabled { opacity:.52; cursor:not-allowed; }
.joker-actions { display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding:14px; border-radius:12px; background:rgba(0,0,0,.22); }
.joker-actions>span { width:100%; font-weight:700; }
.joker-actions>div { display:flex; flex-wrap:wrap; gap:8px; }
.joker-actions label { display:grid; gap:5px; color:var(--muted); font-size:12px; }
.joker-message { margin:0; color:#ddb45a; text-align:center; }
@media (max-width:760px) {
  .joker-scoreboard,.joker-players { grid-template-columns:repeat(2,1fr); }
  .joker-trick { min-height:130px; gap:7px; border-radius:18px; }
  .playing-card { width:62px; height:90px; font-size:16px; }
}

/* =============================================================================
   COSMETIC COLLECTION  (Collection window + arena board / checker skins)
   Obsidian / teal / antique-gold / ivory. No store chrome, no prices.
   ========================================================================== */

/* Author display values override the UA [hidden] rule — restore it. Missing
   #collectionDetail here was the real cause of the "blank inspector": its own
   `display: grid` rule beat the UA `[hidden]{display:none}` default at equal
   specificity, so setting .hidden = true in JS never actually hid it — it sat
   there, still laid out, showing nothing but its unpopulated placeholder
   markup (the "—" name, empty checker circles) underneath the gallery. */
.collection-window[hidden],
.collection-panel[hidden],
#arenaBoardSurface[hidden],
#collectionPreviewPicture[hidden],
#collectionPreviewClassic[hidden],
#collectionDetail[hidden] { display: none !important; }

/* ---- arena board skin --------------------------------------------------------
   The cosmetic board image is the WHOLE board — frame, side trays and centre
   bar are painted into the artwork. Both the image (#arenaBoardSurface) and the
   point grid (#board) become the SAME "fit-and-centre 3:2 box" over the arena
   frame, so they always line up regardless of the frame's own dimensions. The
   point grid then insets to the image's playfield with its track sizes.
   The default classic board keeps the CSS arena (this whole block is inert). */
#arenaBoardSurface { display: none; }

/* Frame → a 3:2 box centred in its grid row (obsidian side gutters, no
   top/bottom letterbox). place-self:center stops the arena-stage grid from
   stretching it so aspect-ratio can win. */
body.match-active.cosmetic-board-active .arena-board-frame {
  position: relative;
  align-self: center;
  justify-self: center;
  aspect-ratio: 1024 / 683;
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  border-color: transparent;
  background: none;
  box-shadow: none;
}
/* #board positions against the FRAME (not the tray-inset centre column) so it
   shares the frame box exactly with the image. */
body.match-active.cosmetic-board-active .arena-board-center { position: static; }
body.cosmetic-board-active #arenaBoardSurface:not([hidden]),
body.match-active.cosmetic-board-active .arena-board-center > .board {
  position: absolute;
  inset: 0 !important;
  height: auto !important;
  width: auto !important;
  min-height: 0 !important;
}
body.cosmetic-board-active #arenaBoardSurface:not([hidden]) { display: block; z-index: var(--z-board-surface); pointer-events: none; }
#arenaBoardSurfaceImg { width: 100%; height: 100%; object-fit: fill; display: block; }

/* The cosmetic board (#board) is absolutely positioned over the whole frame,
   which includes the side tray gutters. The right tray IS the bear-off control
   (and shows both players' borne-off checkers), so it sits on the bar/bear-off
   layer — above the point grid — or clicks land on the board instead. */
body.match-active.cosmetic-board-active .bear-off-tray { z-index: var(--z-bar-bearoff); background: none; border-inline: 0; }
body.match-active.cosmetic-board-active .bear-off-tray > span { display: none; }
body.match-active.cosmetic-board-active .borne-off-stack { border: 0; background: none; }

/* Point positions + checker Ø + stack step are computed in board.js
   (layoutCosmeticBoard) from one shared template and written as CSS vars:
     #board      --cos-checker-d
     .point      --cos-pt-cx / --cos-pt-w / --cos-pt-run / --cos-pt-base
     .checker-stack  --cos-step
     .checker    --cos-i
   The grid tracks are unused here (points are absolutely placed). */
body.match-active.cosmetic-board-active .arena-board-center > .board {
  z-index: var(--z-points);
  display: block !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.match-active.cosmetic-board-active .arena-board-center > .board > .point {
  position: absolute;
  left: var(--cos-pt-cx, 50%);
  width: var(--cos-pt-w, 6%) !important;
  height: var(--cos-pt-run, 42%) !important;   /* beats base `height: auto !important` */
  transform: translateX(-50%);
  z-index: var(--z-points);
  overflow: visible;
  grid-column: auto !important;
  grid-row: auto !important;
}
body.match-active.cosmetic-board-active .board > .point:nth-child(-n+12) { top: var(--cos-pt-base, 6%); bottom: auto; }
body.match-active.cosmetic-board-active .board > .point:nth-child(n+13) { bottom: var(--cos-pt-base, 6%); top: auto; }
body.match-active.cosmetic-board-active .arena-board-center > .board > .point > .triangle { opacity: 0 !important; }

/* Checker sprites — square, true top-down, transparent alpha. No tilt / stretch
   / ellipse. Selection rings / legal-move / drag stay as the existing overlays. */
.checker.sprite,
body.match-active .checker.sprite {
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  box-shadow: none;
  aspect-ratio: 1 / 1;
}

/* Neutral placeholder while a checker's cosmetic sprite is still decoding.
   Overrides the "you"/"opponent" fallback fill (including its match-active
   gradient variant, further below) so a checker never shows a flat color
   that could be mistaken for finished artwork before the real sprite is
   ready. Swapped for the real sprite — or, on total load failure, the
   ordinary CSS fallback — as soon as loadSpritePair() settles. Static, no
   animation, so there is nothing to gate on prefers-reduced-motion. */
.sprite-pending.checker,
body.match-active .sprite-pending.checker {
  background-image: none !important;
  background-color: rgba(216, 208, 191, .14) !important;
  box-shadow: inset 0 0 0 1px rgba(216, 208, 191, .32) !important;
}

/* Stack: each disc absolutely placed at a JS-computed per-checker offset
   (--cos-offset, the two-layer model in board.js's layoutCosmeticBoard —
   NOT the classic board's own --cos-i * --classic-step calc() further
   above, which is completely separate and untouched). */
body.match-active.cosmetic-board-active .board > .point > .checker-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: auto;
  width: var(--cos-checker-d, 5%);
  height: 100%;
  display: block;
  gap: 0;
}
body.match-active.cosmetic-board-active .board > .point:nth-child(n+13) > .checker-stack { top: auto; bottom: 0; }
body.match-active.cosmetic-board-active .board > .point > .checker-stack > .checker {
  position: absolute;
  left: 0;
  width: var(--cos-checker-d, 5%);
  height: var(--cos-checker-d, 5%);
  min-width: 14px;
  min-height: 14px;
  margin: 0;
}
body.match-active.cosmetic-board-active .board > .point:nth-child(-n+12) > .checker-stack > .checker {
  top: var(--cos-offset, 0px);
  bottom: auto;
}
body.match-active.cosmetic-board-active .board > .point:nth-child(n+13) > .checker-stack > .checker {
  bottom: var(--cos-offset, 0px);
  top: auto;
}

/* Outer/inner split for on-point cosmetic checkers only (never bar/bear-off,
   which keep painting their own background-image directly, unchanged).
   The INTERACTIVE checker element (.checker) is constrained to the point
   column's own width (--cos-checker-d = --cos-pt-w, set in board.js) so its
   hitbox can never exceed or overlap a neighbouring point. Its own
   background is suppressed via background-size:0 — NOT background-image,
   which stays the real sprite url so this rule's ::after can read it back
   with `background-image: inherit`. That inner layer is sized to
   --cos-art-d (independently computed per class/style so the PRINTED disc
   reaches the same approved visible diameter everywhere), carries a small
   measured vertical counter-shift (--cos-art-voffset) for the one checker
   family whose art is not perfectly vertically centred in its own canvas,
   and is pointer-events:none so a checker's oversized artwork can visually
   extend past its own column without ever stealing a click intended for a
   neighbouring point underneath it. */
body.match-active.cosmetic-board-active .board > .point > .checker-stack > .checker.sprite {
  background-size: 0 0;
}
body.match-active.cosmetic-board-active .board > .point > .checker-stack > .checker.sprite::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: var(--cos-art-d, 100%);
  height: var(--cos-art-d, 100%);
  transform: translate(-50%, -50%) translateY(var(--cos-art-voffset, 0px));
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

/* Overflow multiplier badge ("×N"): attached to the final/frontmost
   layer-two checker (see layoutCosmeticBoard) when the authoritative point
   count exceeds the 11 individually displayed checkers. Presentation only —
   it never changes the point's real count or hitbox. Inset into the
   checker's own box (never overflowing into a neighbouring column),
   pointer-events:none so it cannot intercept clicks meant for the checker
   or point beneath it, and given its own z-index above the (also absolute)
   art layer so the oversized artwork can never paint over it. High-contrast
   dark chip + light text reads on both light and dark checker art; a
   position tied to the checker's own box means it mirrors correctly for
   top/bottom stacks automatically (the checker itself is already mirrored). */
body.match-active.cosmetic-board-active .cos-overflow-badge {
  position: absolute;
  right: 2%;
  bottom: 2%;
  z-index: 2;
  width: 46%;
  height: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(10, 12, 10, .88);
  color: #f5efe0;
  font-size: clamp(8px, 40%, 13px);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(245, 239, 224, .55);
  pointer-events: none;
}

/* ---- Collection window ---------------------------------------------------
   Compact gallery + inspector. Fixed-height shell, one nav row, the board
   gallery is the only thing that scrolls, the inspector holds all the detail
   so the cards can stay lean. Board artwork is never shrunk to fit. */
.collection-window {
  position: fixed;
  left: 50%; top: 50%;
  z-index: 70;
  display: flex;
  flex-direction: column;
  /* Compact by default — no inspector reserved. Widens only once a board is
     actually selected (.has-inspector), and only while the Boards tab can
     show one; Dice/Trophies never carry the extra width. */
  width: min(620px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 32px));
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--hair-gold);
  background: linear-gradient(160deg, var(--surface-1), #0b1114);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.98);
  transition: opacity .2s ease, transform .2s cubic-bezier(.4, 0, .2, 1), width .22s cubic-bezier(.4, 0, .2, 1);
}
.collection-window.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.collection-window.has-inspector { width: min(900px, calc(100vw - 32px)); }

/* One row: category tabs on the left, Close on the far right. No branding row. */
.collection-nav {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: max(6px, env(safe-area-inset-top)) 8px 6px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.collection-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.collection-tabs::-webkit-scrollbar { display: none; }
.collection-category {
  min-height: 40px; padding: 8px 14px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; cursor: pointer;
}
.collection-category:hover:not(.is-disabled) { color: var(--text-dim); }
.collection-category.is-active { color: var(--text); background: var(--surface-2); }
.collection-category.is-disabled { opacity: .55; cursor: default; }
.collection-category.is-disabled.is-active { opacity: .8; }
.collection-category:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.collection-soon {
  margin-left: 5px; padding: 1px 6px;
  font-size: 8px; letter-spacing: .12em; color: var(--faint);
  border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap; vertical-align: middle;
}
.collection-nav-close { flex: none; margin-left: auto; border-radius: 10px; }

/* Narrow header: the full "Coming soon" text badge is what pushes Trophies
   toward the close button. Swap it for a compact glyph — same accessible
   name (aria-label on the wrapper), available as a native tooltip (title). */
@media (max-width: 480px) {
  .collection-soon { padding: 3px; border-radius: 50%; }
  .collection-soon-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .collection-soon::before { content: "🔒"; display: block; font-size: 8px; line-height: 1; }
}

/* Dice / Trophies panels scroll themselves; the Boards panel is a fixed-height
   flex column whose gallery scrolls internally (below). */
.collection-panel { padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; }
.collection-panel--soon { display: grid; place-items: center; min-height: 260px; }
.collection-panel--boards {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px 0; overflow: hidden;
}

/* Segmented control. Active shows "Heritage · I"; the rest show the name only. */
.collection-class-filter {
  flex: none; align-self: flex-start; max-width: 100%;
  display: inline-flex; gap: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); overflow-x: auto; scrollbar-width: none;
}
.collection-class-filter::-webkit-scrollbar { display: none; }
.collection-class {
  min-height: 38px; padding: 6px 15px;
  border: 0; border-right: 1px solid var(--line);
  background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.collection-class:first-child { border-radius: 999px 0 0 999px; }
.collection-class:last-child { border-right: 0; border-radius: 0 999px 999px 0; }
.collection-class:hover:not(.is-active) { color: var(--text-dim); }
.collection-class.is-active { color: #06120f; background: var(--teal); }
.collection-class:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }

/* Desktop / tablet: gallery alone by default (compact); gallery | inspector
   once a board is selected. The inspector is unmounted ([hidden]), not just
   visually collapsed, so it never reserves space while closed. */
.collection-board-layout {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
.collection-window.has-inspector .collection-board-layout { grid-template-columns: minmax(0, 1fr) 300px; }

.collection-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  /* grid-auto-rows must be explicit. Left at its default `auto`, this browser's
     row-sizing pass under-reports the height of a row whose only intrinsic
     size comes from a child's aspect-ratio (the board thumb) — rows collapsed
     to ~28px instead of ~150px, silently cropping every thumbnail to its top
     sliver via .collection-card's overflow:hidden. min-content forces each
     row to size off the item's real layout height instead. Confirmed by
     forcing this on the live page: card height went 28px -> 150px. */
  grid-auto-rows: min-content;
  gap: 12px; align-content: start;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 4px 14px 0;
}
.collection-grid--dice { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); overflow: visible; }

/* Lean cards: artwork + name + one corner marker. Class comes from the filter. */
.collection-card {
  display: flex; flex-direction: column;
  padding: 0; text-align: left;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--text);
  font: inherit; cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.collection-card:hover { border-color: var(--line-strong); }
.collection-card.is-selected { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(95, 224, 192, .3); }
.collection-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.collection-card.state-locked .collection-card-thumb { opacity: .78; }
/* 3:2 — the real board-artwork ratio (measured off the shipped assets, every
   class/edition shares it). Was 16:10 with background-size:cover, which
   cropped roughly a quarter off the top/bottom of every real board thumbnail;
   object-fit:contain here guarantees the complete board frame + trays always
   show, letterboxed rather than cropped when a wrapper isn't exactly 3:2. */
.collection-card-thumb {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.collection-card-thumb-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.collection-card-thumb--classic { background: linear-gradient(145deg, #16372f, #0b201c 58%, #071310); }
.collection-card-thumb--dice { display: grid; place-items: center; font-size: 30px; color: var(--gold-bright); aspect-ratio: 16 / 10; }
.collection-card-name {
  padding: 6px 8px 7px; font-size: 12px; font-weight: 600; line-height: 1.25;
}
.collection-card-meta { font-size: 10.5px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }

/* Compact corner marker (icon + tiny label), not a full text row. */
.collection-card-badge {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px 2px 6px; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(6, 12, 12, .78); color: var(--faint);
  backdrop-filter: blur(2px);
}
.collection-card-badge::before { font-size: 9px; line-height: 1; }
.collection-card-badge.badge-equipped { color: var(--teal-strong); border-color: var(--hair-teal); }
.collection-card-badge.badge-equipped::before { content: "✓"; }
.collection-card-badge.badge-owned { color: var(--gold-bright); border-color: var(--hair-gold); }
.collection-card-badge.badge-owned::before { content: "●"; font-size: 6px; }
/* Locked: padlock only — the card is already dimmed and the inspector carries
   the full state. The word stays in the DOM for assistive tech. */
.collection-card-badge.badge-locked { gap: 0; padding: 3px 5px; font-size: 0; }
.collection-card-badge.badge-locked::before { content: "🔒"; font-size: 9px; }
.collection-card--dice { padding-bottom: 4px; }
.collection-card--dice .collection-card-name,
.collection-card--dice .collection-card-meta { padding-left: 8px; padding-right: 8px; }
.collection-card--dice .collection-card-meta { padding-top: 2px; }
.collection-card--dice .collection-card-badge { position: static; align-self: flex-start; margin: 6px 8px 2px; background: transparent; }

/* Inspector — a slight attached panel, not a second modal card. A subtle
   left-edge divider (not a full border/background box) keeps it reading as
   part of the same surface as the gallery, at the same top/bottom alignment
   as the gallery's own content region — no duplicated modal frame. */
.collection-detail {
  align-self: start;
  position: sticky; top: 0;
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 12px;
  padding: 2px 4px 14px 16px;
  border-left: 1px solid var(--line-soft);
}
/* One row for both controls, but exactly one is ever visible: "← Boards" on
   mobile (a real second view within the sheet), the compact × on desktop/
   tablet (an attached panel, closed by clicking the card again or this). */
.collection-detail-head { display: flex; align-items: center; gap: 8px; }
.collection-detail-back {
  display: none; /* mobile-only — restored at max-width:640px below */
  align-self: flex-start; justify-self: start;
  min-height: 40px; padding: 6px 14px 6px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-3); color: var(--text-dim);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.collection-detail-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.collection-detail-name {
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--font-serif); font-size: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.collection-detail-close {
  display: none; /* desktop/tablet-only — restored at min-width:641px below */
  align-self: flex-start;
  margin-left: auto; /* stays pinned to the right even as the row's only child */
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface-3); color: var(--text-dim);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.collection-detail-close:hover { color: var(--text); border-color: var(--line-strong); }
.collection-detail-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (min-width: 641px) {
  .collection-detail-close { display: inline-flex; align-items: center; justify-content: center; }
}
.collection-preview { display: grid; gap: 10px; justify-items: center; }
.collection-preview-board { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--surface-3); }
.collection-preview-board img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.collection-preview-classic {
  width: 100%; aspect-ratio: 16 / 10; border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #16372f, #0b201c 58%, #071310);
}
.collection-preview-checkers { display: flex; gap: 14px; }
.collection-checker-swatch {
  width: 44px; height: 44px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  border: 1px solid var(--line-soft);
}
.collection-checker-swatch.classic-light { background-image: radial-gradient(circle at 35% 28%, #fffaf0, #d7c59e 55%, #aa8b50); }
.collection-checker-swatch.classic-dark { background-image: radial-gradient(circle at 35% 28%, #75d9c3, #287f6d 52%, #123e35); }

.collection-detail-body { display: grid; gap: 7px; }
.collection-detail-class { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.collection-detail-state { margin: 0; font-size: 12px; color: var(--muted); }
.collection-detail-state.state-equipped { color: var(--teal-strong); }
.collection-detail-state.state-owned { color: var(--gold-bright); }

.collection-edition { display: flex; gap: 8px; margin-top: 2px; }
.collection-edition-btn {
  flex: 1; min-height: 42px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-3); color: var(--text-dim);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.collection-edition-btn.is-active { color: #06120f; background: var(--teal); border-color: var(--teal); }
.collection-edition-btn:disabled { opacity: .4; cursor: not-allowed; }
.collection-edition-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.collection-equip { min-height: 44px; }
.collection-equip:disabled { opacity: .4; filter: grayscale(.5); cursor: not-allowed; }
.collection-info { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }

.collection-empty {
  grid-column: 1 / -1; padding: 36px 20px; text-align: center;
  border: 1px dashed var(--line); border-radius: 14px; color: var(--muted);
}
.collection-empty strong { display: block; font-family: var(--font-serif); font-size: 17px; color: var(--text-dim); }
.collection-empty p { margin: 6px 0 0; font-size: 12px; }

.collection-coming-soon { display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--muted); }
.collection-soon-mark { font-size: 32px; color: var(--gold); }
.collection-coming-soon strong { font-size: 22px; letter-spacing: .22em; color: var(--gold-bright); }
.collection-coming-soon p { margin: 0; max-width: 320px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .collection-window { transition: none; }
}

/* Tablet: narrower gallery when the inspector is actually open. */
@media (max-width: 860px) {
  .collection-window.has-inspector .collection-board-layout { grid-template-columns: minmax(0, 1fr) 248px; gap: 12px; }
  .collection-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
}

/* Mobile: near-full-screen sheet, gallery and inspector are two views. The
   [data-mobile-view] attribute lives on the whole Boards panel (set in JS),
   not just the gallery/inspector grid, so the class-filter row — a sibling
   of that grid, not a descendant — can key off it too. */
@media (max-width: 640px) {
  .collection-window {
    left: 0; top: auto; bottom: 0;
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .collection-window.is-open { transform: translateY(0); }
  .collection-panel--boards { overflow-y: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

  .collection-board-layout { flex: none; display: block; min-height: 0; }
  .collection-board-layout .collection-grid {
    overflow: visible; min-height: 0;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    /* The final row must clear Safari's bottom chrome, not just the panel's
       own padding — safe-area-inset-bottom alone is 0 on most phones until
       something actually needs to clear the home-indicator/toolbar area. */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .collection-panel--boards[data-mobile-view="inspector"] .collection-grid { display: none; }
  .collection-panel--boards[data-mobile-view="gallery"] .collection-detail { display: none; }
  /* The class filter is gallery navigation — not needed once a board's own
     detail view is open, and hiding it puts "← Boards" directly under the
     main Boards/Dice/Trophies nav instead of under a second row. */
  .collection-panel--boards[data-mobile-view="inspector"] .collection-class-filter { display: none; }

  .collection-detail {
    position: static; max-height: none; overflow: visible; min-height: 0;
    border: 0; padding: 4px 0 0; background: transparent;
  }
  .collection-detail-back { display: inline-flex; }
  .collection-preview-board img,
  .collection-preview-classic { max-width: 320px; margin: 0 auto; }

  /* Detail view: content-driven sheet height. The sheet still opens near-
     full-width, but stops forcing 100dvh when all it holds is "← Boards /
     preview / name / buttons / Equip" — height:auto lets it end shortly
     after the action button instead of leaving a large empty region below. */
  .collection-window:has(.collection-panel--boards[data-mobile-view="inspector"]) {
    height: auto;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* =========================================================
   PC-T1C2 — LOBBY STRUCTURE + RESPONSIVE POLISH
   Placed last on purpose: every rule below re-composes lobby chrome that
   earlier breakpoint blocks already style, and the intent is that this
   section wins on cascade ORDER rather than on !important.
     1. Top resource rail  — one shared label row over one shared value row.
     2. Seasonal panels    — symmetric halves, two-line headings.
     3. Mode cards         — artwork + title + one compact state line, with
                             the whole card as the activation target.
     4. Responsive         — intrinsic sizing (clamp/minmax) instead of the
                             fixed pixel heights the old chrome needed.
   ========================================================= */

/* ---------------------------------------------------------
   1. TOP RESOURCE RAIL — VIP · Table Points · Table Coins
   Every cell is the same four-row grid, so the three LABELS share one
   baseline and the three VALUES share the next one. Rows 1 and 2 have a
   minimum height, so a secondary status line (row 3) — "Fully replenished"
   today, "Next point in 04:12" tomorrow — can wrap freely without ever
   pushing a label or a value off its shared baseline. Table Coins has no
   state line and no track; its rows 3/4 are simply reserved and empty, which
   is what keeps the three cells aligned without inventing placeholder copy.
   --------------------------------------------------------- */
.resource-rail {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  padding: 3px 0 1px;
  overflow: hidden;
  --res-row-label: 11px;
  --res-row-value: 15px;
  --res-row-state: 11px;
  --res-row-track: 6px;
  --res-icon-size: 34px;
}
.resource-rail .hud-stat-copy {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    minmax(var(--res-row-label), auto)
    minmax(var(--res-row-value), auto)
    minmax(var(--res-row-state), auto)
    minmax(var(--res-row-track), auto);
  align-items: start;
  row-gap: 1px;
  column-gap: 0;
  min-width: 0;
  text-align: left;
}
.resource-rail .hud-stat-copy > .hud-stat-title { grid-column: 1; grid-row: 1; align-self: end; }
.resource-rail .hud-stat-copy > .hud-stat-value { grid-column: 1; grid-row: 2; align-self: start; }
.resource-rail .hud-stat-copy > .hud-stat-state {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  /* The secondary status line is free to wrap onto as many lines as it needs
     ("Fully replenished" today, "Next point in 04:12" later) and is never
     ellipsised or pinned to a width sized for the current copy. Because it
     lives BELOW the label and value rows it can never disturb their shared
     baselines. */
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  line-height: 1.25;
}
.resource-rail .hud-stat-copy > .hud-stat-track  { grid-column: 1; grid-row: 4; align-self: end; margin-top: 0; }

/* Bigger icon boxes across the whole family (one token, tuned per breakpoint
   in section 4 below). */
.resource-rail .vip-crystal-icon,
.resource-rail .ap-regen-ring,
.resource-rail .clash-chip-icon {
  width: var(--res-icon-size);
  height: var(--res-icon-size);
  flex: 0 0 var(--res-icon-size);
}
/* Perceived-artwork normalisation. The three source PNGs bake in different
   amounts of transparent padding, so an identical box does NOT read as an
   identical icon. The assets are never edited — instead each host box is
   nudged by a per-resource factor. Applied to the HOST, deliberately, so the
   shared idle animation on .res-icon__img (one family, PC-T1C1) is left
   completely untouched.
   The factors are MEASURED, not eyeballed: the opaque bounding box of each
   256px source was sampled off-canvas (alpha > 24), giving
     vip          149x184  of 256  (fill 0.58 x 0.72, area 0.419)
     table-points 171x180  of 256  (fill 0.67 x 0.70, area 0.470)
     table-coins  150x160  of 256  (fill 0.59 x 0.63, area 0.366)
   Normalising visible artwork AREA against table-points gives 1.06 / 1.00 /
   1.13; VIP is rounded down to 1.05 because its silhouette is tall and
   narrow, so an area match slightly over-reads against the two rounder
   tokens. */
.resource-rail .res-icon { transform: scale(var(--res-art-scale, 1)); }
.resource-rail .res-icon--vip { --res-art-scale: 1.05; }
.resource-rail .res-icon--table-points { --res-art-scale: 1; }
.resource-rail .res-icon--table-coins { --res-art-scale: 1.13; }

/* ---------------------------------------------------------
   2. SEASONAL PANELS — Seasonal Rank / Seasonal Achievement
   The two halves are now the same three-region composition: heading,
   artwork, lower text. --season-art is the shared artwork box for both
   emblems (set per breakpoint), so they can never drift apart again.
   Nothing here touches the rank tier mapping, the rank asset paths or the
   rank effect-escalation custom properties.
   --------------------------------------------------------- */
.season-eyebrow {
  display: grid;
  justify-items: center;
  line-height: 1.18;
}
.split-season-panel .season-panel-half {
  display: grid;
  grid-template-rows: auto minmax(0, var(--season-art)) auto;
  justify-items: center;
  align-content: center;
  gap: 6px;
}
/* Shared lower-text region: rank keeps its title + stars, achievement its
   title, but both occupy one region of the same height. */
.season-panel-foot {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  min-height: var(--season-foot, 46px);
  width: 100%;
}

/* ---------------------------------------------------------
   3. MODE CARDS — artwork + title + one compact state line
   Each card's own <button> is stretched over the entire card, so the whole
   surface is the activation target while remaining a SINGLE real, natively
   focusable control (no nested interactive elements, no duplicated
   handler, no role="button" div). The existing click handlers and the
   existing level-gate logic are untouched.
   A DISABLED button is not stretched: it collapses into the compact
   conditional state line ("Locked · Level 8" / "Coming soon" / "Searching…")
   and the card reads as non-interactive. Clash Stakes and Tournaments carry
   data-feature-ready="false" and are held disabled by the gate regardless of
   level, so they can never become an activation target.
   --------------------------------------------------------- */
.hub-mode-card > button:not(:disabled) {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  /* The label stays in the DOM and in the accessibility tree — the card's
     artwork and title are its visible form, so no second visible button. */
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
}
.hub-mode-card > button:not(:disabled):hover,
.hub-mode-card > button:not(:disabled):active {
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}
.hub-mode-card > button:focus-visible { outline: none; }
.hub-mode-card:has(> button:not(:disabled):focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
/* Engines without :has(): the control itself still shows the ring. */
@supports not selector(:has(*)) {
  .hub-mode-card > button:not(:disabled):focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -3px;
  }
}
/* Hover / pressed affordance for activatable cards only. */
.hub-mode-card:has(> button:not(:disabled)) {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hub-mode-card:has(> button:not(:disabled)):hover {
  transform: translateY(-2px);
  border-color: rgba(95, 224, 192, .5);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .32);
}
.hub-mode-card:has(> button:not(:disabled)):active { transform: translateY(0); }
/* Locked / permanently feature-disabled: no lift, no pointer, no ring. */
.hub-mode-card:has(> button:disabled) { cursor: default; }
.hub-mode-card > button:disabled {
  position: static;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted);
  opacity: 1;
  cursor: default;
}
.hub-mode-card[data-feature-ready="false"] > button:disabled { color: rgba(223, 180, 90, .78); }
@media (prefers-reduced-motion: reduce) {
  .hub-mode-card:has(> button:not(:disabled)) { transition: none; }
  .hub-mode-card:has(> button:not(:disabled)):hover { transform: none; }
}

/* ---------------------------------------------------------
   4. RESPONSIVE — intrinsic sizing per breakpoint
   The reclaimed vertical space comes from the removed heading, mode
   descriptions and large action buttons, not from shrinking artwork or
   typography, and never from a page-level transform scale.
   --------------------------------------------------------- */

/* Phone / small-phone density. */
@media (max-width: 560px) {
  .resource-rail {
    --res-row-label: 10px;
    --res-row-value: 13px;
    --res-row-state: 10px;
    --res-row-track: 5px;
    --res-icon-size: 31px;
  }
  .split-season-panel { --season-art: 92px; }
  .hub-mode-card > button:disabled { font-size: 9px; }
}

/* Phone → tablet portrait. */
@media (max-width: 767px) {
  .split-season-panel { --season-art: clamp(92px, 26vw, 108px); }
  .mode-stage { padding: 12px 10px; }
  .hub-mode-card { padding: 14px 12px 12px; }
  .hub-mode-card h2 { font-size: clamp(15px, 4.4vw, 19px); }
  .mode-art { width: clamp(72px, 22vw, 92px); height: clamp(72px, 22vw, 92px); margin: 4px auto 8px; }
}

/* md — tablet portrait and up. */
@media (min-width: 768px) {
  .central-arena-grid .mode-art,
  .hub-mode-card .mode-art {
    width: clamp(88px, 12vw, 132px);
    height: clamp(88px, 12vw, 132px);
    margin: 0 auto 6px;
  }
}

/* lg — 1024px to 1180px. The layout is not viewport-locked here, so the goal
   is "coherent and complete", with the reclaimed space used to keep 1024x768
   and 1180x800 free of clipping and overlap rather than to chase a lock. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .backgammon-dashboard { grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); }
  /* The stage fills its dashboard column, and the grid fills the stage, so
     the reclaimed space becomes card area instead of an empty band. */
  .mode-stage { display: grid; grid-template-rows: minmax(0, 1fr); }
  .split-season-panel { --season-art: clamp(96px, 11vw, 122px); }
  .hub-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-auto-rows: 1fr; }
  .hub-mode-card { padding: 10px 12px; }
  .central-arena-grid .mode-art,
  .hub-mode-card .mode-art {
    width: clamp(78px, 9vw, 104px);
    height: clamp(78px, 9vw, 104px);
    margin: 0 auto 4px;
  }
  .hub-mode-card h2 { font-size: 16px; }
}

/* lg, short viewport — 1024x768 specifically. */
@media (min-width: 1024px) and (max-width: 1180px) and (max-height: 820px) {
  .resource-rail { --res-row-value: 17px; --res-icon-size: 48px; }
  /* Reclaim the last band of vertical space from chrome rather than from
     artwork or type: the season rail and the dashboard gutters compact. */
  .backgammon-dashboard { gap: 10px; }
  .dashboard-side { padding: 10px; }
  .season-rail > .eyebrow { margin-bottom: 6px; }
  .season-rail .rail-card { min-height: 0; padding: 9px 11px; }
  .split-season-panel { --season-art: 84px; }
  .central-arena-grid .mode-art,
  .hub-mode-card .mode-art { width: 84px; height: 84px; margin: 0 auto 2px; }
  .hub-mode-card { padding: 8px 10px; }
}

/* xl — the viewport-locked one-screen desktop lobby. */
@media (min-width: 1181px) {
  body[data-route="backgammon"] .resource-rail {
    --res-row-label: 13px;
    --res-row-value: 20px;
    --res-row-state: 12px;
    --res-row-track: 6px;
    --res-icon-size: 68px;
  }
  /* Both halves are now the SAME three-region grid rather than the old
     "auto 150px auto auto auto" / "auto 184px auto" pair. */
  body[data-route="backgammon"] .seasonal-rank-half,
  body[data-route="backgammon"] .seasonal-achievement-half {
    grid-template-rows: auto var(--season-art) auto;
    align-content: center;
    gap: 6px;
    padding: 12px 10px;
  }
}


/* xl, very short viewport — 1181x800. */
@media (min-width: 1181px) and (max-height: 820px) {
  body[data-route="backgammon"] .resource-rail { --res-row-value: 17px; --res-icon-size: 52px; }
  body[data-route="backgammon"] .split-season-panel { --season-art: 96px; }
  body[data-route="backgammon"] .central-arena-grid .mode-art { width: 100px; height: 100px; }
}