/* ==========================================================================
   SOLON — Web3 Super App Aggregator design system.

   One dark neon system shared by the platform pages (home, games, deposit,
   mining, staking, rewards, leaderboard, wallet) and by the newer game pages.
   The two legacy games keep store.css, so this file never touches their look.

   Layers:  tokens -> base -> chrome (nav/footer) -> components -> game shell
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Palette — deliberately narrow. Three roles only:
       accent  (cyan -> blue)  every interactive / informational accent
       violet                  secondary hue, gradients and depth only
       gold                    value: balances, rewards, primary CTA
     `--mint` and `--magenta` are kept as aliases of those roles so the
     older class names (.btn.mint, .stat.mint ...) stay valid but no longer
     introduce extra hues.
     -------------------------------------------------------------------- */

  /* Surfaces */
  --ink: #04050f;
  --ink-2: #070a1e;
  --panel: rgba(16, 21, 48, .62);
  --panel-solid: #0c1130;
  --panel-2: rgba(24, 31, 68, .55);
  --line: rgba(150, 180, 230, .11);
  --line-strong: rgba(150, 180, 230, .22);

  /* Raised surfaces. Restrained: a hint of light at the top, then flat, so
     the quality reads from type and spacing rather than from chrome. */
  --surf: linear-gradient(172deg, rgba(38, 48, 92, .34) 0%, rgba(14, 18, 44, .5) 46%, rgba(8, 11, 28, .58) 100%);
  --surf-2: linear-gradient(172deg, rgba(34, 44, 86, .28) 0%, rgba(11, 15, 38, .48) 100%);
  --surf-3: linear-gradient(172deg, rgba(46, 58, 106, .34) 0%, rgba(16, 21, 50, .56) 100%);
  --glass: rgba(9, 12, 30, .62);

  /* Text */
  --text: #e9f0ff;
  --muted: #93a4cd;
  --dim: #64749d;

  /* Accents */
  --cyan: #35d0ff;
  --cyan-soft: #8ee6ff;
  --blue: #4b7dff;
  --violet: #a855f7;
  --gold: #ffc24a;
  --red: #ff5d73;
  --mint: var(--cyan);         /* alias — see note above */
  --magenta: #7c6cff;          /* alias — indigo end of the violet ramp */

  --glow-cyan: 0 0 24px rgba(53, 208, 255, .45);
  --glow-violet: 0 0 28px rgba(168, 85, 247, .45);
  --glow-gold: 0 0 26px rgba(255, 194, 74, .5);

  /* Elevation: a lit top edge, a dark bottom edge, then the cast shadow. */
  --edge: inset 0 1px 0 rgba(200, 222, 255, .09);
  --edge-strong: inset 0 1px 0 rgba(210, 232, 255, .14);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -12px rgba(0, 0, 0, .6);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .32), 0 20px 40px -22px rgba(0, 0, 0, .7);
  --sh-3: 0 4px 10px rgba(0, 0, 0, .38), 0 44px 80px -34px rgba(0, 0, 0, .8);
  --sunk: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(196, 224, 255, .07);

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --shell: 1280px;
  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   One raised-surface recipe, shared by every box on the site.
   `.lift` is the hairline of light along the top edge that sells the bevel.
   -------------------------------------------------------------------------- */

.card, .stat, .tier, .day, .chest, .lb-row:not(.head), .hero-stats .hs,
.gm-hud .h, .loot .lt, .toast, .modal-card, .gm-stage {
  position: relative;
  isolation: isolate;
}
.card::after, .stat::after, .chest::after,
.hero-stats .hs::after, .gm-hud .h::after, .modal-card::after {
  content: "";
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 215, 255, .3), transparent);
  pointer-events: none;
  z-index: 1;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient background: static gradients under the animated node canvas. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1100px 680px at 14% -10%, rgba(70, 110, 220, .14), transparent 60%),
    radial-gradient(900px 600px at 86% 0%, rgba(130, 80, 210, .12), transparent 58%),
    radial-gradient(800px 620px at 50% 110%, rgba(60, 120, 190, .08), transparent 60%),
    linear-gradient(180deg, #06070f 0%, #05060e 45%, #040509 100%);
}
/* The drifting pattern lives on the #bgfx canvas; this layer only softens
   the very top of the page so the nav has something to sit against. */
body::after {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 320px;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(120, 150, 220, .06), transparent);
}
#bgfx {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #8ee6ff; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
/* Figures read as data: tabular, tight, never italic. */
.fig { font-variant-numeric: tabular-nums; letter-spacing: -.035em; font-weight: 650; }
p { margin: 0; }
button { font: inherit; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 22px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.hide { display: none !important; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav .shell { display: flex; align-items: center; gap: 18px; }

.logo { display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 19px; letter-spacing: .01em; color: var(--text); }
.logo:hover { color: #fff; }
.logo-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--glow-violet);
  position: relative;
  overflow: hidden;
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo b { display: block; font-size: 19px; line-height: 1.05; }
.logo small { display: block; font-size: 10px; letter-spacing: .18em; color: var(--dim); font-weight: 700; text-transform: uppercase; white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.nav-links a {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(126, 176, 255, .09); }
.nav-links a.on { color: #fff; background: rgba(75, 125, 255, .16); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nav-links a.on::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: var(--glow-cyan);
  border-radius: 2px;
}

.nav-side { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.lang {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(150, 180, 230, .07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.lang button {
  border: 0; cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px; font-weight: 750;
  white-space: nowrap;
  transition: all .18s ease;
}
.lang button.on {
  color: #04050f;
  background: linear-gradient(135deg, var(--cyan), #8ee6ff);
  box-shadow: 0 0 16px rgba(53, 208, 255, .5);
}

.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(150, 180, 230, .07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar .ring { position: absolute; inset: -1px; border-radius: 12px; box-shadow: inset 0 0 12px rgba(53, 208, 255, .35); }
.avatar.on { box-shadow: 0 0 0 2px rgba(53, 208, 255, .5), 0 0 18px rgba(53, 208, 255, .35); }

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(126, 176, 255, .08);
  color: var(--text);
  cursor: pointer;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons carry the hierarchy, so their colour is semantic, not decorative:

     .btn.gold   Deposit / Start Mining / Claim / Play Now  — the money path
     .btn        Explore / View All / Stake                 — secondary, blue
     .btn.violet the same rank as .btn, in the violet half of the ramp
     .btn.ghost  quiet, hairline only
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .01em;
  color: #ffffff;
  background: linear-gradient(180deg, #5e95ff, #2f68e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { background: linear-gradient(180deg, #76a6ff, #3d78f2); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 28px -12px rgba(60, 120, 245, .85); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Primary: the four core actions. Solid yellow, nothing else on the page is. */
.btn.gold {
  color: #1a1405;
  background: linear-gradient(180deg, #ffd979, #f5b325);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .35);
}
.btn.gold:hover { background: linear-gradient(180deg, #ffe49a, #ffc23c); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 28px -12px rgba(245, 179, 37, .8); color: #1a1405; }

.btn.violet {
  color: #e2d8ff;
  background: rgba(138, 96, 240, .18);
  box-shadow: inset 0 0 0 1px rgba(168, 120, 255, .38), inset 0 1px 0 rgba(225, 210, 255, .12);
}
.btn.violet:hover { background: rgba(150, 108, 250, .28); box-shadow: inset 0 0 0 1px rgba(186, 146, 255, .65), 0 10px 26px -14px rgba(140, 90, 240, .75); color: #fff; }

/* `.mint` predates the palette clean-up; it is the secondary blue now. */
.btn.mint { color: #fff; background: linear-gradient(180deg, #5e95ff, #2f68e4); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.35); }

.btn.big { padding: 15px 30px; font-size: 15.5px; border-radius: 9px; }
.btn.sm { padding: 8px 14px; font-size: 13px; border-radius: 7px; }
.btn.block { width: 100%; }
.btn.ghost {
  background: rgba(138, 96, 240, .10);
  color: #cdbcff;
  box-shadow: inset 0 0 0 1px rgba(168, 120, 255, .3);
}
.btn.ghost:hover { color: #efe7ff; background: rgba(150, 108, 250, .2); box-shadow: inset 0 0 0 1px rgba(186, 146, 255, .55), 0 10px 24px -16px rgba(140, 90, 240, .8); }
/* Trailing arrow on secondary links: slides on hover, never bounces. */
.btn .arrow { display: inline-block; transition: transform .22s cubic-bezier(.2,.7,.2,1); opacity: .7; }
.btn:hover .arrow { transform: translateX(3px); opacity: 1; }

.btn.outline-gold { background: rgba(255, 194, 74, .08); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 194, 74, .45); }

/* Halo for the two primary conversion CTAs. */
.btn.hero-cta { padding: 16px 32px; font-size: 16px; border-radius: 9px; }
.btn.gold.hero-cta::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 11px;
  background: #f5b325;
  filter: blur(20px);
  opacity: .3;
  z-index: -1;
  animation: pulseHalo 3.4s ease-in-out infinite;
}
@keyframes pulseHalo { 0%, 100% { opacity: .18; } 50% { opacity: .42; } }

/* ==========================================================================
   Cards, sections, badges
   ========================================================================== */

.card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surf), var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: var(--edge), var(--sh-2);
  overflow: hidden;
}
.card.pad { padding: 28px; }
/* Every box lifts and grows a little under the cursor. `.rv` owns transform
   until it has landed, so the hover rules sit after it and only bite on
   elements that have finished revealing. */
.card, .stat, .chest, .day, .lb-row:not(.head), .hero-stats .hs {
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .3s ease;
}
.card.in:hover, .stat.in:hover, .chest.in:hover, .day.in:hover,
.lb-row.in:not(.head):hover, .hero-stats .hs:hover,
.card:not(.rv):hover, .stat:not(.rv):hover, .chest:not(.rv):hover, .day:not(.rv):hover {
  transform: translateY(-5px) scale(1.03);
  border-color: var(--line-strong);
  box-shadow: var(--edge-strong), var(--sh-3);
  z-index: 3;
}
/* Full-width rows only need a whisper of scale or they clip their gutter. */
.game-card.in:hover, .game-card:not(.rv):hover,
.lb-row.in:not(.head):hover { transform: translateY(-4px) scale(1.015); }
.card .sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 220px at 10% -30%, rgba(140, 175, 235, .07), transparent 70%);
}

.sec { padding: 116px 0 0; }
.sec.tight { padding-top: 72px; }
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 34px; padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.sec-head h2 { font-size: clamp(28px, 4.4vw, 46px); font-weight: 700; }
.sec-head .sub { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 62ch; line-height: 1.7; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .3em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--line-strong); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
}
.badge.gold { color: var(--gold); border-color: rgba(255, 194, 74, .38); }
.badge.violet { color: #c9aaff; border-color: rgba(168, 85, 247, .34); }
.badge.mint { color: var(--cyan-soft); border-color: rgba(120, 170, 255, .3); }
.badge.red { color: #ff8f9f; border-color: rgba(255, 93, 115, .34); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  padding: 4px 10px; border-radius: 4px;
  font-size: 11.5px; color: var(--dim); letter-spacing: .04em;
  background: transparent;
  border: 1px solid var(--line);
}

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; padding: 72px 0 18px; overflow: hidden; }
/* Single centred column: badge, kicker, headline, lede, then the two CTAs. */
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 880px;
}
.hero-center .eyebrow { margin: 20px 0 0; }
.hero-center .eyebrow::before { display: none; }
.hero h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin: 12px 0 0;
}
.hero h1 .grad {
  background: linear-gradient(100deg, #7ee7ff 0%, #6aa8ff 46%, #a855f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { color: #b9c7ee; font-size: clamp(15px, 1.5vw, 18px); margin-top: 18px; max-width: 58ch; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Hero stat strip */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 78px; }
.hero-stats .hs {
  padding: 22px 12px 10px;
  border: 0; border-top: 1px solid var(--line);
  background: none; box-shadow: none;
  border-radius: 0;
  text-align: center;
}
.hero-stats .hs b { display: block; font-size: clamp(26px, 3.2vw, 40px); font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hero-stats .hs span { display: block; margin-top: 8px; color: var(--dim); font-size: 10.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }

/* Segmented control, used by the leaderboard sort. */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 8px; border: 1px solid var(--line);
  background: rgba(150, 180, 230, .04);
  /* Narrow screens scroll the control rather than breaking the row. */
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: 8px 16px; border-radius: 6px; cursor: pointer;
  border: 0; background: transparent;
  color: var(--dim);
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  transition: color .18s ease, background .18s ease;
  white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: #dfe8ff; background: rgba(96, 134, 240, .2); box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .3); }

/* ==========================================================================
   Game cards

   Every title gets the full-width feature treatment: cover art on one side,
   type on the other, the way the lead story is laid out in a game magazine.
   The reveal alternates which side each row arrives from.
   ========================================================================== */

.game-grid { display: flex; flex-direction: column; gap: 26px; }

.game-card { display: flex; flex-direction: row; min-height: 300px; }
.game-card .game-cover { flex: 1 1 56%; aspect-ratio: auto; min-height: 300px; }
.game-card .game-body { flex: 1 1 44%; justify-content: center; padding: 40px 46px; gap: 16px; }
.game-card h3 { font-size: clamp(24px, 2.6vw, 36px); }
.game-card .desc { font-size: 14.5px; max-width: 46ch; }
/* Even rows mirror, so the covers zig-zag down the page. */
.game-card:nth-child(even) { flex-direction: row-reverse; }

.game-cover {
  position: relative;
  overflow: hidden;
  background: #060a1c;
}
.game-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.game-cover .top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 8px; z-index: 2; }
.game-cover .top .badge { background: rgba(6, 8, 20, .74); border-color: rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.game-cover .glow-edge { position: absolute; inset: 0; box-shadow: inset 0 -90px 110px -60px rgba(4, 6, 20, .9); pointer-events: none; }
.game-card:hover .game-cover svg { transform: scale(1.05); }

.game-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.game-title { display: flex; align-items: flex-start; gap: 16px; }
.game-title .idx {
  font-size: 12px; font-weight: 650; letter-spacing: .1em;
  color: var(--dim); padding-top: 9px;
  font-variant-numeric: tabular-nums;
}
.game-body h3 { letter-spacing: -.03em; }
.game-body .zh { color: var(--dim); font-size: 13px; font-weight: 500; margin-top: 6px; letter-spacing: 0; }
.game-body .desc { color: var(--muted); line-height: 1.75; }
.game-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.game-meta .earn { display: flex; align-items: baseline; gap: 7px; color: var(--gold); }
.game-meta .earn b { font-size: 19px; font-weight: 650; letter-spacing: -.03em; }
.game-meta .earn small { font-weight: 500; color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 860px) {
  .game-card, .game-card:nth-child(even) { flex-direction: column; min-height: 0; }
  .game-card .game-cover { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .game-card .game-body { padding: 24px 26px 26px; }
}

/* ==========================================================================
   Stat / data cards
   ========================================================================== */

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat {
  position: relative;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surf), var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--edge), var(--sh-2);
  overflow: hidden;
}
.stat .lbl { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 10.5px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
.stat .val {
  margin-top: 16px;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 650; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
.stat .val small { font-size: 11px; font-weight: 600; color: var(--dim); margin: 0; letter-spacing: .12em; text-transform: uppercase; }
.stat .foot { margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.stat .spark { position: absolute; right: 0; bottom: 0; width: 55%; height: 46%; opacity: .5; }
.stat.cyan { border-color: rgba(53, 208, 255, .26); box-shadow: var(--edge), var(--sh-2), 0 0 30px rgba(53, 208, 255, .08); }
.stat.cyan .val, .stat.violet .val, .stat.mint .val { color: var(--cyan-soft); }
.stat.gold .val { color: var(--gold); }

.progress { height: 10px; border-radius: 999px; background: rgba(4, 7, 22, .7); box-shadow: var(--sunk); overflow: hidden; position: relative; }
.progress i {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-soft), var(--blue));
  box-shadow: 0 0 14px rgba(53, 208, 255, .45);
  transition: width .4s ease;
}
.progress.gold i { background: linear-gradient(90deg, #ffd979, #ff9f2e); box-shadow: 0 0 14px rgba(255, 159, 46, .5); }
.progress.mint i { background: linear-gradient(90deg, var(--cyan-soft), var(--blue)); box-shadow: 0 0 14px rgba(53, 208, 255, .45); }
/* A whisper of movement on a running bar, not a candy stripe. */
.progress .stripes {
  position: absolute; inset: 0;
  background-image: linear-gradient(115deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.1) 75%, transparent 75%);
  background-size: 26px 26px;
  animation: flow 2.2s linear infinite;
  opacity: .28;
}
@keyframes flow { to { background-position: 26px 0; } }

/* Mining tiers */
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tier {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surf-2), var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: var(--edge), var(--sh-1);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.tier:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--edge-strong), var(--sh-2); }
.tier.on { border-color: rgba(255, 194, 74, .55); box-shadow: var(--edge-strong), var(--sh-2), 0 0 26px rgba(255, 194, 74, .18); }
.tier .nm { font-size: 17px; font-weight: 900; }
.tier .pw { color: var(--gold); font-weight: 850; font-size: 15px; margin-top: 6px; }
.tier ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.tier li { color: var(--muted); font-size: 13px; display: flex; gap: 8px; }
.tier li::before { content: "◈"; color: var(--cyan); }
.tier .own { position: absolute; top: 14px; right: 14px; }

/* ==========================================================================
   Rewards, chests, sign-in, leaderboard
   ========================================================================== */

.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.day {
  position: relative;
  padding: 20px 12px 22px;
  border-radius: var(--r);
  text-align: center;
  min-height: 118px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surf-2), var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: var(--edge), var(--sh-1);
  overflow: hidden;
}
/* Apple-style measure: a small, wide-tracked caption over a tight, heavy
   figure, with generous leading between them. */
.day .d {
  color: var(--dim);
  font-size: 11px; font-weight: 600; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase;
}
.day .amt {
  display: block; margin-top: 18px;
  font-size: 17px; font-weight: 600; line-height: 1.28;
  letter-spacing: -.022em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* The two ends of the week are the headline days, so they get set larger. */
.day:first-child .d, .day:last-child .d { font-size: 12px; }
.day:first-child .amt, .day:last-child .amt { font-size: 21px; letter-spacing: -.028em; }
.day.claimed {
  opacity: 1;
  background: linear-gradient(170deg, rgba(96, 150, 255, .22), rgba(56, 96, 210, .10));
  border-color: rgba(120, 170, 255, .42);
}
.day.claimed .amt { color: var(--cyan-soft); }
.day.claimed .d { color: #a9c4ef; }
.day.claimed::before { content: "\2713"; position: absolute; top: 7px; right: 9px; color: var(--cyan); font-weight: 900; z-index: 2; }
.day.today { border-color: rgba(255, 194, 74, .55); box-shadow: var(--edge-strong), var(--sh-2), 0 0 22px rgba(255, 194, 74, .18); transform: translateY(-4px); }

.chest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.chest { padding: 22px; border-radius: var(--r-lg); text-align: center; background: var(--surf), var(--panel); border: 1px solid var(--line); box-shadow: var(--edge), var(--sh-2); position: relative; overflow: hidden; }
.chest .ic {
  width: 52px; height: 52px; margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #4ade80;
  background: rgba(74, 222, 128, .10);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .32);
}
.chest .ic svg { width: 28px; height: 28px; display: block; }
.chest.legendary .ic { color: #86efac; background: rgba(134, 239, 172, .14); box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .45), 0 0 22px -6px rgba(74, 222, 128, .6); }
.chest b { display: block; margin-top: 10px; font-size: 16px; }
.chest .odds { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.chest .odds li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.chest .odds li b { display: inline; color: var(--text); font-size: 12.5px; margin: 0; }
.chest .cnt { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 12px; font-weight: 800; color: var(--muted); }
/* Tier is read as depth, not as hue: the same accent, four intensities. */
.chest.common { border-color: rgba(126, 176, 255, .14); }
.chest.gold { border-color: rgba(126, 176, 255, .26); }
.chest.crystal { border-color: rgba(53, 208, 255, .32); box-shadow: var(--edge), var(--sh-2), 0 0 26px rgba(53, 208, 255, .10); }
.chest.legendary { border-color: rgba(53, 208, 255, .48); box-shadow: var(--edge-strong), var(--sh-3), 0 0 32px rgba(53, 208, 255, .18); }
.chest.legendary .ic { filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(53, 208, 255, .45)); }

.lb { display: flex; flex-direction: column; gap: 10px; }
.lb-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) repeat(3, minmax(90px, .55fr));
  align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r);
  background: var(--surf-2), var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: var(--edge), var(--sh-1);
  overflow: hidden;
}
.lb-row.head { background: none; border: 0; box-shadow: none; padding: 0 18px; color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lb-row .rk { font-weight: 900; font-size: 17px; color: var(--muted); text-align: center; }
.lb-row .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-row .who .pic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(126,176,255,.1); border: 1px solid var(--line); }
.lb-row .who b { display: block; font-size: 15px; }
.lb-row .who small { color: var(--dim); font-size: 12px; }
.lb-row .v { font-weight: 800; font-size: 14.5px; text-align: right; }
.lb-row .v.gold { color: var(--gold); }
.lb-row .v.cyan { color: var(--cyan-soft); }
.lb-row.me { border-color: rgba(53, 208, 255, .45); background: linear-gradient(120deg, rgba(53, 208, 255, .14), rgba(18, 24, 56, .66)); }
.lb-row.top1 .rk { color: var(--gold); }
.lb-row.top2 .rk { color: #d7e2ff; }
.lb-row.top3 .rk { color: #a8b8dd; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { margin-top: 86px; border-top: 1px solid var(--line); background: rgba(5, 7, 22, .6); }
.foot-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 40px 0; }
.foot-stats .fs { text-align: center; }
.foot-stats .fs b { display: block; font-size: clamp(24px, 3vw, 36px); font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.foot-stats .fs span { display: block; margin-top: 8px; color: var(--dim); font-size: 10.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.foot-stats .fs b {
  background: linear-gradient(100deg, #7ee7ff 0%, #6aa8ff 46%, #a855f7 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.foot-bottom { border-top: 1px solid var(--line); padding: 22px 0 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--dim); font-size: 13px; }
.foot-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-bottom nav a { color: var(--muted); }

/* ==========================================================================
   Toast + modal
   ========================================================================== */

.toast-wrap { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  border-radius: 14px;
  background: rgba(12, 16, 38, .72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--edge-strong), var(--sh-3);
  font-size: 14.5px; font-weight: 700;
  animation: toastIn .28s ease;
  max-width: 90vw;
}
.toast.good { border-color: rgba(53, 208, 255, .5); color: var(--cyan-soft); }
.toast.warn { border-color: rgba(255, 194, 74, .5); color: #ffe0a3; }
.toast.bad { border-color: rgba(255, 93, 115, .5); color: #ffb3bd; }
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }

.modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 24px; background: rgba(3, 5, 16, .78); backdrop-filter: blur(8px); animation: toastIn .22s ease; }
.modal[hidden] { display: none !important; }
.modal-card {
  width: min(560px, 100%);
  max-height: 88vh; overflow: auto;
  border-radius: var(--r-xl);
  padding: 30px;
  background: linear-gradient(168deg, rgba(26, 33, 72, .72), rgba(9, 12, 30, .86));
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--edge-strong), 0 40px 90px rgba(1, 3, 12, .7);
  overflow: hidden auto;
}
.modal-card h3 { font-size: 24px; }
.modal-card .sub { color: var(--muted); margin-top: 8px; font-size: 14.5px; }
.modal-x { position: absolute; top: 18px; right: 18px; }
.loot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 22px 0 4px; }
.loot .lt { position: relative; overflow: hidden; min-width: 108px; padding: 16px 12px; border-radius: var(--r); text-align: center; background: var(--surf-2), rgba(126,176,255,.07); border: 1px solid var(--line); box-shadow: var(--edge), var(--sh-1); }
.loot .lt .ic { font-size: 30px; }
.loot .lt b { display: block; margin-top: 6px; color: var(--gold); font-size: 16px; }
.loot .lt span { color: var(--muted); font-size: 12px; }
.hero-chest { font-size: 78px; text-align: center; animation: chestPop .6s ease; }
@keyframes chestPop { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 62% { transform: scale(1.16) rotate(5deg); } 100% { transform: scale(1); } }

/* Data rows used on deposit / staking / wallet pages */
.kv { display: flex; flex-direction: column; gap: 1px; }
.kv-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kv-row:last-child { border-bottom: 0; }
.kv-row .k { color: var(--muted); font-size: 13.5px; font-weight: 650; }
.kv-row .v { font-weight: 800; font-size: 14.5px; text-align: right; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { color: var(--muted); font-size: 13px; font-weight: 700; }
.input, select.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(6, 9, 26, .82);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sunk);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(53, 208, 255, .16); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surf-2), rgba(126,176,255,.07); border: 1px solid var(--line);
  box-shadow: var(--edge), var(--sh-1);
  color: var(--muted); font-size: 13px; font-weight: 750;
  transition: transform .14s ease, color .14s ease;
}
.chip:hover { color: var(--text); transform: translateY(-1px); }
.chip.on { color: #04061a; background: linear-gradient(135deg, var(--cyan-soft), var(--cyan)); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(53, 208, 255, .25); }
.addr {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-radius: 13px;
  background: rgba(6, 9, 26, .82); border: 1px dashed var(--line-strong); box-shadow: var(--sunk);
  font-size: 13px; word-break: break-all;
}
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step .n { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: var(--surf-2), rgba(53,208,255,.14); color: var(--cyan); border: 1px solid rgba(53,208,255,.3); box-shadow: var(--edge), var(--sh-1); }
.step.done .n { background: linear-gradient(160deg, rgba(53,208,255,.3), rgba(75,125,255,.18)); color: #cdefff; border-color: rgba(53,208,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.step b { font-size: 14.5px; }
.step small { display: block; color: var(--muted); font-size: 13px; }

/* ==========================================================================
   Game page shell (new games only)
   ========================================================================== */

.gm-wrap { padding: 28px 0 40px; }
.gm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.gm-head h1 { font-size: clamp(24px, 3.4vw, 34px); }
.gm-head .zh { color: var(--muted); font-size: 14px; font-weight: 650; margin-top: 4px; }
.gm-hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.gm-hud .h {
  padding: 13px 16px; border-radius: var(--r);
  background: var(--surf-2), var(--panel-2); border: 1px solid var(--line);
  box-shadow: var(--edge), var(--sh-1);
  overflow: hidden;
}
.gm-hud .h span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.gm-hud .h b { font-size: 22px; font-weight: 900; }
.gm-hud .h.gold b { color: var(--gold); }
.gm-hud .h.cyan b { color: #8ee6ff; }
.gm-hud .h.mint b { color: var(--cyan-soft); }

/* 16:9 board, same proportions as the fishing game page. */
.gm-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--edge-strong), var(--sh-3);
  background: #050818;
}
.gm-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.gm-over {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(4, 7, 22, .82);
  backdrop-filter: blur(6px);
  text-align: center;
  padding: 24px;
}
.gm-over[hidden] { display: none !important; }
.gm-over .box { max-width: 420px; }
.gm-over h2 { font-size: clamp(26px, 4vw, 40px); }
.gm-over p { color: var(--muted); margin-top: 10px; }
.gm-over .earned { margin: 20px 0; font-size: 30px; font-weight: 900; color: var(--gold); }
.gm-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.gm-note { color: var(--muted); font-size: 13.5px; margin-top: 16px; max-width: 90ch; }

/* ==========================================================================
   Reveal-on-scroll + responsive
   ========================================================================== */

.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
/* Section heads lead their block by a beat. */
.sec-head.rv { transform: translateY(18px); }
/* Content boxes converge on the centre from either side. */
.rv.from-l { transform: translate3d(-56px, 16px, 0); }
.rv.from-r { transform: translate3d(56px, 16px, 0); }
.rv.from-l.in, .rv.from-r.in { transform: none; }
@media (max-width: 720px) {
  .rv.from-l { transform: translate3d(-26px, 16px, 0); }
  .rv.from-r { transform: translate3d(26px, 16px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 1120px) {
  .stat-grid, .tier-grid, .chest-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    padding: 12px 22px 18px;
    background: rgba(5, 7, 22, .97);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
  }
  .nav-burger { display: grid; place-items: center; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .day-grid { grid-template-columns: repeat(4, 1fr); }
  .lb-row { grid-template-columns: 40px minmax(0, 1fr) minmax(80px, .6fr); }
  .lb-row .v.hide-sm { display: none; }
}
@media (max-width: 680px) {
  .shell { padding: 0 15px; }
  /* Header has to fit a phone: keep logo, language and wallet; the avatar
     lives behind the burger menu instead. */
  .logo b { font-size: 16px; }
  .nav .shell { gap: 10px; }
  .nav-side { gap: 7px; }
  .lang button { padding: 5px 9px; font-size: 12px; }
  .avatar { display: none; }
  .split, .hero-cta-row .btn { width: 100%; }
  .sec { padding-top: 52px; }
  .stat-grid, .tier-grid, .chest-grid { grid-template-columns: 1fr; }
  .foot-stats { grid-template-columns: repeat(2, 1fr); }
  .day-grid { grid-template-columns: repeat(3, 1fr); }
  .game-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 34px; }
  .logo small { display: none; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
}

/* Phones: the header stays one row — logo, language, Join, menu — with
   everything tightened to fit, and the menu drops down below it. */
@media (max-width: 560px) {
  .nav .shell { gap: 6px; }
  .logo { gap: 7px; }
  .logo-mark { width: 32px; height: 32px; }
  .logo b { font-size: 15px; }
  .nav-side { gap: 6px; }
  .lang button { padding: 5px 7px; font-size: 11px; }
  .nav .btn.nav-join { display: none; }
  .nav .btn.nav-wallet { padding: 8px 10px; font-size: 11.5px; letter-spacing: 0; max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
  .nav-links.open .nav-join-m { display: block; color: var(--gold, var(--text)); }
  .nav-burger { width: 36px; height: 36px; }
  .nav-links.open { left: 10px; right: 10px; top: calc(var(--nav-h) - 4px); }
  .nav-links.open a { padding: 13px 16px; font-size: 16px; }
}
@media (max-width: 360px) {
  .logo b { display: none; }
}

/* Nav actions and footer columns, shared by every page. */
.nav-join, .nav-wallet { white-space: nowrap; }
.nav-wallet.on { color: var(--gold, var(--text)); }
.nav-links .nav-join-m { display: none; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 52px 0 36px; }
.foot-brand .logo { margin-bottom: 14px; }
.foot-brand p { margin: 0; color: var(--muted); font-size: 14.5px; }
.foot-grid nav { display: flex; flex-direction: column; gap: 11px; }
.foot-grid nav .eyebrow { margin-bottom: 4px; color: var(--dim); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.foot-grid nav .eyebrow::before { display: none; }
.foot-grid nav a { color: var(--muted); font-size: 14.5px; width: max-content; }
.foot-grid nav a:hover { color: var(--gold, var(--text)); }
.foot-grid nav .off { color: var(--dim); font-size: 14.5px; }
.foot-grid nav .off small { font-size: 11px; opacity: .8; }
.foot-copy { padding: 20px 0 30px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--dim); font-size: 13px; }
@media (max-width: 680px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 40px 0 28px; }
  .foot-brand { grid-column: 1 / -1; }
}

/* Two-column blocks used across the pages collapse on narrow screens. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.split.wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.split.form { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 860px) {
  .split, .split.wide, .split.form { grid-template-columns: minmax(0, 1fr); }
}