/* Worldpad. One floating world in one sky; the page scrolls through one day of it (night -> blue hour -> dawn ->
   midday -> dusk -> night). The wordmark and titles are cut from the world itself: lit faces over the chunk's strata
   (grass, soil, stone, bedrock). Buttons are blocks with a lit face and a side. Dela Gothic One for words only,
   Barlow for text, Barlow 600 tabular for every number, Barlow Condensed caps for UI labels, Reddit Mono for keys. */
:root {
  --night: #0D0F2B; --indigo: #1B1E52; --dusk: #2C2A6B; --teal: #3ED6C0; --teal-side: #1F8F80; --violet: #7B6FE0;
  --mist: #C9CEF5; --snow: #F1F2FF; --torch: #F4D27A; --rose: #E46C9A;
  --day: #CDE7F0; --daytop: #9FD3E6; --ink: #0D0F2B; --ink2: #333867;
  --grass: #5FC8A8; --soil: #6B4E7A; --stone: #5C6690; --cobble: #4C557D; --bedrock: #23264A;
  --plate: #262A6C; --plate2: #20235E; --plate-side: rgba(8, 9, 32, .6);
  --line: rgba(201, 206, 245, .16); --line2: rgba(201, 206, 245, .28);
  --display: "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --slab: var(--display);
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --mono: "Reddit Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1240px; --gut: clamp(16px, 4vw, 40px); --r: 4px;
  --cut: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  --cut-s: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  /* extruded titles: lit face over grass / soil / stone */
  --tt-x: 0.0016em 0.0075em 0 #2C9C86, 0.0032em 0.015em 0 #2C9C86, 0.0048em 0.0225em 0 #6B4E7A, 0.0064em 0.03em 0 #6B4E7A, 0.008em 0.0375em 0 #6B4E7A, 0.0096em 0.045em 0 #6B4E7A, 0.0112em 0.0525em 0 #4C557D, 0.0128em 0.06em 0 #4C557D, 0.0144em 0.0675em 0 #4C557D, 0.016em 0.075em 0 #4C557D;
  --tt-xd: 0.0016em 0.0075em 0 #3FB59C, 0.0032em 0.015em 0 #3FB59C, 0.0048em 0.0225em 0 #8C7FC8, 0.0064em 0.03em 0 #8C7FC8, 0.008em 0.0375em 0 #8C7FC8, 0.0096em 0.045em 0 #8C7FC8, 0.0112em 0.0525em 0 #9AA4CF, 0.0128em 0.06em 0 #9AA4CF, 0.0144em 0.0675em 0 #9AA4CF, 0.016em 0.075em 0 #9AA4CF;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--night); color: var(--snow); font: 400 17px/1.5 var(--sans); overflow-x: clip; min-height: 100vh; -webkit-font-smoothing: antialiased; }
@media (min-width: 900px) { body { font-size: 18px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a, button, [role=button], [onclick], summary, label, .ca, input[type=range], select { cursor: pointer; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: .98; margin: 0; }
h2 { font-size: clamp(38px, 6vw, 88px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0; }
p { margin: 0; }
em { font-style: normal; }
kbd { font: inherit; }
.mono { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: 0; }
.num, dd, .n { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); position: relative; }
.small { font-size: 15px; color: var(--mist); }
.strong { font-weight: 600; color: var(--snow); }
:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- titles cut from the world: lit face, strata under it */
.tt { color: var(--snow); text-shadow: var(--tt-x); padding-bottom: .08em; }
.clock { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 15px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.glyph { width: 10px; height: 10px; flex: none; transform: rotate(45deg); background: var(--mist); box-shadow: 2px 2px 0 rgba(0, 0, 0, .22); }
.glyph.sunish { background: var(--torch); }

/* ---------- buttons: blocks. A lit face (bevel on top), a side face under it; hover lifts, press sinks */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; background: none;
  color: var(--ink); font: 700 16px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; margin-bottom: 6px;
  --face: #3ED6C0; --face-hi: #7CEEDB; --face-lo: #31C2AC; --side: #1F8F80; --side-lo: #156A5F; --lift: 6px; --hi: rgba(255, 255, 255, .6);
  transition: transform .16s cubic-bezier(.3, .7, .3, 1); }
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; clip-path: var(--cut); pointer-events: none; }
.btn::before { z-index: -2; transform: translateY(var(--lift)); background: linear-gradient(180deg, var(--side), var(--side-lo)); transition: transform .16s cubic-bezier(.3, .7, .3, 1); }
.btn::after { z-index: -1; background: linear-gradient(180deg, var(--face-hi) 0, var(--face) 48%, var(--face-lo) 100%); box-shadow: inset 0 2px 0 var(--hi), inset 0 -2px 0 rgba(0, 0, 0, .1); }
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: translateY(calc(var(--lift) + 2px)); }
.btn:active, .btn.busy { transform: translateY(calc(var(--lift) - 2px)); }
.btn:active::before, .btn.busy::before { transform: translateY(2px); }
.btn[disabled], .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .cube { width: 20px; height: 20px; flex: none; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.btn:hover .cube { transform: rotate(120deg); }
.btn-big { min-height: 58px; padding: 0 30px; font-size: 18px; }
.btn-2 { color: var(--snow); --face: #34368A; --face-hi: #44469F; --face-lo: #2C2E7A; --side: #17194C; --side-lo: #0E1036; --hi: rgba(201, 206, 245, .3); }
.btn-2::after { box-shadow: inset 0 2px 0 var(--hi), inset 0 0 0 1px rgba(201, 206, 245, .18); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; --lift: 4px; margin-bottom: 4px; }
.xb { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 46px; height: 46px; color: var(--ink); margin-bottom: 5px; flex: none; transition: transform .16s cubic-bezier(.3, .7, .3, 1); }
.xb::before, .xb::after { content: ""; position: absolute; inset: 0; clip-path: var(--cut-s); }
.xb::before { z-index: -2; transform: translateY(5px); background: #8F96C9; transition: transform .16s; }
.xb::after { z-index: -1; background: linear-gradient(180deg, #FFFFFF, #E3E6FB); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }
.xb svg { width: 18px; height: 18px; fill: currentColor; }
.xb:hover { transform: translateY(-2px); } .xb:hover::before { transform: translateY(7px); }
.xb:active { transform: translateY(3px); } .xb:active::before { transform: translateY(2px); }
/* the CA sits in a sunken slot */
.ca { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 5px 0 12px; border-radius: var(--r); background: rgba(8, 9, 30, .78); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(201, 206, 245, .16), 0 1px 0 rgba(201, 206, 245, .12); font-size: 14px; min-width: 0; }
.ca b { font: 700 13px/1 var(--cond); letter-spacing: .12em; color: var(--teal); }
.ca .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--snow); }
.ca button { border: 0; border-radius: 3px; background: #2E3080; box-shadow: inset 0 1px 0 rgba(201, 206, 245, .22), 0 2px 0 #14163F; padding: 7px 10px; font: 700 13px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.ca button:hover { background: #393B95; }
.ca button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(201, 206, 245, .22); }
.ca button:disabled { opacity: .5; cursor: default; transform: none; }
.ca.copied button, .copied .cl { color: var(--teal); }

/* ---------- header: a plate with a mini wordmark */
.nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: 70px; padding: 0 var(--gut); background: rgba(10, 12, 36, .94); box-shadow: 0 1px 0 var(--line), 0 4px 0 rgba(0, 0, 0, .18); }
.home .nav { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; transition: background-color .25s, box-shadow .25s; }
.home .nav.solid { background: rgba(10, 12, 36, .94); box-shadow: 0 1px 0 var(--line), 0 4px 0 rgba(0, 0, 0, .18); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand .bn { font: 400 19px/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--snow); text-shadow: 0.004em 0.03em 0 #2C9C86, 0.008em 0.06em 0 #6B4E7A, 0.012em 0.09em 0 #5C6690, 0.016em 0.12em 0 #4C557D; padding-bottom: 3px; }
.tabs { display: flex; gap: 2px; margin-left: 14px; }
.tabs a { position: relative; padding: 10px 12px; text-decoration: none; font: 600 16px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); transition: color .15s; }
.tabs a:hover, .tabs a[aria-current] { color: var(--snow); }
.tabs a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; margin-left: -3.5px; background: var(--teal); transform: rotate(45deg) scale(0); transition: transform .2s cubic-bezier(.3, .7, .3, 1); }
.tabs a:hover::after { transform: rotate(45deg) scale(.7); }
.tabs a[aria-current]::after { transform: rotate(45deg) scale(1); }
.sp { flex: 1; }
.menu-b { display: none; width: 46px; height: 46px; border: 0; border-radius: var(--r); background: #2E3080; box-shadow: inset 0 1px 0 rgba(201, 206, 245, .22), 0 4px 0 #14163F; flex-direction: column; justify-content: center; align-items: center; gap: 4px; flex: none; margin-bottom: 4px; }
.menu-b span { width: 18px; height: 2px; background: var(--snow); }
.drawer { position: fixed; inset: 0; z-index: 60; background: linear-gradient(180deg, #0A0C24, #1B1E52); padding: 88px var(--gut) 24px; display: flex; flex-direction: column; gap: 4px; }
.drawer[hidden] { display: none; }
.drawer a { font: 400 30px/1.1 var(--display); text-transform: uppercase; text-decoration: none; padding: 8px 0; text-shadow: 0.004em 0.03em 0 #2C9C86, 0.008em 0.06em 0 #5C6690; }
.drawer .btn { margin-top: 18px; align-self: flex-start; }
.dlg-x { position: absolute; top: 12px; right: var(--gut); width: 46px; height: 46px; border: 0; border-radius: var(--r); background: #2E3080; box-shadow: inset 0 1px 0 rgba(201, 206, 245, .22), 0 4px 0 #14163F; font-size: 26px; line-height: 1; }
@media (max-width: 1080px) { .tabs { display: none; } .menu-b { display: inline-flex; } .wbtn { display: none; } }
@media (max-width: 640px) {
  .nav { gap: 8px; height: 62px; }
  .nav .brand .bn { display: none; }
  .nav-ca { padding-left: 8px; gap: 6px; height: 42px; flex: 1 1 auto; justify-content: space-between; }
  .nav-ca .mono { font-size: 12px; }
  .nav-ca button { padding: 6px 8px; font-size: 12px; }
  .nav .xb { width: 42px; height: 42px; }
  .menu-b { width: 42px; height: 42px; }
  .sp { display: none; }
}

/* ---------- the sky: one fixed layer, its time of day follows the scroll (home.js) */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.sk { position: absolute; inset: 0; opacity: 0; }
.sk0 { opacity: 1; background: linear-gradient(180deg, #0A0C24 0%, #121543 46%, #1E2163 100%); }
.sk1 { background: linear-gradient(180deg, #121543 0%, #22266A 52%, #3E4392 100%); }
.sk2 { background: linear-gradient(180deg, #29276A 0%, #5A4FB5 46%, #B993D2 84%, #E7B3CB 100%); }
.sk3 { background: linear-gradient(180deg, #84C4DF 0%, #AAD6E9 48%, #DCEEF4 100%); }
.sk4 { background: linear-gradient(180deg, #232160 0%, #4E44A3 50%, #A07CCA 100%); }
.stars-w { position: absolute; inset: 0; }
.stars { position: absolute; inset: 0; background: url(/assets/art/tex-stars.webp) 0 0 / 512px repeat; opacity: .55; pointer-events: none; }
.st-b { background-position: 256px 180px; background-size: 380px; opacity: .35; animation: twinkle 5.5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .08; } to { opacity: .5; } }
.orb { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform, opacity; }
.orb b { position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d); border-radius: 50%; }
.moon { --d: clamp(44px, 6vw, 96px); opacity: 1; transform: translate(80vw, 20vh); }
.moon b { background: #E6EAFF; box-shadow: inset calc(var(--d) * -.16) calc(var(--d) * -.1) 0 #C3C9F2, 0 0 0 calc(var(--d) * .22) rgba(230, 234, 255, .06), 0 0 0 calc(var(--d) * .55) rgba(230, 234, 255, .035); }
.sun { --d: clamp(56px, 9vw, 150px); transform: translate(50vw, 110vh); }
.sun b { background: #FFF5E1; box-shadow: 0 0 0 calc(var(--d) * .2) rgba(255, 245, 225, .16), 0 0 0 calc(var(--d) * .5) rgba(255, 245, 225, .08), 0 0 0 calc(var(--d) * .95) rgba(255, 245, 225, .04); }
/* light shafts: matte wedges, slowly turning, masked to fade */
.rays { position: absolute; left: -70vmax; top: -70vmax; width: 140vmax; height: 140vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, rgba(255, 246, 228, 0) 0deg 9deg, rgba(255, 246, 228, .085) 9deg 13deg, rgba(255, 246, 228, 0) 13deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .55) 30%, transparent 72%); mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .55) 30%, transparent 72%);
  animation: spin 180s linear infinite; }
.moon .rays { opacity: .5; animation-duration: 240s; }
@keyframes spin { to { transform: rotate(360deg); } }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; }
html.sky-on .band-blue, html.sky-on .band-dawn, html.sky-on .band-day, html.sky-on .band-dusk, html.sky-on .sky-night { background: transparent; }
html.sky-on .scene > .stars { display: none; }

/* ---------- scenes: parallax props, every section has its own */
.scene { position: relative; }
.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.deco img { position: absolute; will-change: transform; height: auto; }
.cloud { animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { from { translate: -2.5vw 0; } to { translate: 2.5vw 0; } }
.far { opacity: .9; }

/* ---------- hero (night): the name in the sky BEHIND the world */
.hero { --wmf: clamp(40px, 12.6vw, 232px); --wmt: calc(70px + 4.5vh); position: relative; height: max(100svh, 660px); min-height: 620px; overflow: clip; isolation: isolate; }
.hero .deco { overflow: visible; }
.hero .f0 { left: 5%; top: 34%; width: clamp(70px, 8vw, 150px); }
.hero .f1 { right: 4%; top: 40%; width: clamp(60px, 6.6vw, 130px); }
.hero .f2 { right: 22%; top: 62%; width: clamp(40px, 4vw, 80px); opacity: .7; }
.hero .c0 { left: -4%; top: 50%; width: clamp(200px, 24vw, 460px); opacity: .85; }
.hero .c1 { right: 14%; top: 13%; width: clamp(140px, 18vw, 340px); opacity: .8; animation-duration: 46s; }
.hero .front { z-index: 3; }
.hero .c2 { left: 30%; bottom: 6%; width: clamp(180px, 20vw, 380px); animation-duration: 30s; }
.hero .c3 { right: 30%; bottom: 20%; width: clamp(110px, 11vw, 220px); animation-duration: 34s; }
.wm { position: absolute; left: 0; right: 0; top: var(--wmt); z-index: 1; text-align: center; font: 400 var(--wmf)/.92 var(--display); letter-spacing: -.02em; white-space: nowrap; pointer-events: none; text-transform: uppercase; }
.wm > span { display: block; }
.wm-x, .wm-r { position: absolute; left: 0; right: 0; top: 0; }
.wm-x { color: #2A3062; text-shadow: 0.0008em 0.0055em 0 #2C9C86, 0.0016em 0.011em 0 #2C9C86, 0.0024em 0.0165em 0 #2C9C86, 0.0032em 0.022em 0 #2C9C86, 0.004em 0.0275em 0 #23806F, 0.0048em 0.033em 0 #23806F, 0.0056em 0.0385em 0 #6B4E7A, 0.0064em 0.044em 0 #6B4E7A, 0.0072em 0.0495em 0 #6B4E7A, 0.008em 0.055em 0 #6B4E7A, 0.0088em 0.0605em 0 #6B4E7A, 0.0096em 0.066em 0 #6B4E7A, 0.0104em 0.0715em 0 #6B4E7A, 0.0112em 0.077em 0 #6B4E7A, 0.012em 0.0825em 0 #6B4E7A, 0.0128em 0.088em 0 #6B4E7A, 0.0136em 0.0935em 0 #563D66, 0.0144em 0.099em 0 #563D66, 0.0152em 0.1045em 0 #5C6690, 0.016em 0.11em 0 #5C6690, 0.0168em 0.1155em 0 #5C6690, 0.0176em 0.121em 0 #5C6690, 0.0184em 0.1265em 0 #5C6690, 0.0192em 0.132em 0 #5C6690, 0.02em 0.1375em 0 #5C6690, 0.0208em 0.143em 0 #5C6690, 0.0216em 0.1485em 0 #5C6690, 0.0224em 0.154em 0 #5C6690, 0.0232em 0.1595em 0 #5C6690, 0.024em 0.165em 0 #5C6690, 0.0248em 0.1705em 0 #5C6690, 0.0256em 0.176em 0 #5C6690, 0.0264em 0.1815em 0 #4A5380, 0.0272em 0.187em 0 #2A3062, 0.028em 0.1925em 0 #2A3062, 0.0288em 0.198em 0 #2A3062, 0.0296em 0.2035em 0 #2A3062, 0.0304em 0.209em 0 #2A3062, 0.0312em 0.2145em 0 #2A3062, 0.032em 0.22em 0 #2A3062; }
.wm-x span:last-child { color: #23806F; }
.wm-r { transform: translateY(-.016em); }
.wm b, .wm i { font-weight: inherit; font-style: normal; }
.wm-r b { color: #FFFFFF; } .wm-r i { color: #B9FFF3; }
.wm-f { position: relative; }
.wm-f b { color: #E9EBFF; background: linear-gradient(172deg, #FFFFFF 18%, #E4E7FF 52%, #BFC5F0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wm-f i { color: var(--teal); background: linear-gradient(172deg, #8DF3E1 14%, #42D8C2 52%, #2CB9A4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wm .ch { display: inline-block; }
.stage { position: absolute; z-index: 2; left: 50%; top: calc(var(--wmt) + var(--wmf) * .72); width: min(46vw, calc((max(100svh, 660px) - 250px) * .92), 700px); aspect-ratio: 1074 / 1144; margin-left: calc(min(46vw, calc((max(100svh, 660px) - 250px) * .92), 700px) / -2); }
.stage .poster { width: 100%; height: 100%; object-fit: contain; transition: opacity .6s; animation: bob 7s ease-in-out infinite alternate; }
@keyframes bob { from { translate: 0 -6px; } to { translate: 0 8px; } }
.stage .live { position: absolute; inset: 0; }
.hero .gameframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 1s; background: transparent; color-scheme: dark; pointer-events: none; }
.hero.live-on .gameframe { opacity: 1; }
.hero.live-on .stage .poster { opacity: 0; }
.hero.dive .stage { transform: scale(2.6) !important; opacity: 0; transition: transform .6s cubic-bezier(.6, 0, .9, .4), opacity .6s; }
.hero.dive .gameframe { transform: scale(2.6); opacity: 0; transition: transform .6s cubic-bezier(.6, 0, .9, .4), opacity .6s; }
.hero-foot { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 480px) 1fr auto; grid-template-areas: "l . r" "h . r"; align-items: end; gap: 18px 24px; padding: 0 var(--gut) clamp(22px, 4.4vh, 48px); }
.hf-l { grid-area: l; display: grid; gap: 14px; justify-items: start; }
.hud { grid-area: h; }
.hf-r { grid-area: r; display: flex; flex-direction: column; gap: 14px; align-items: stretch; min-width: 270px; }
.coinchip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 14px 4px 4px; border-radius: var(--r); background: rgba(8, 9, 30, .74); box-shadow: inset 0 0 0 1px rgba(201, 206, 245, .18), 0 3px 0 rgba(0, 0, 0, .3); min-height: 48px; transition: transform .16s; }
.coinchip:hover { transform: translateY(-2px); }
.coinchip img { width: 40px; height: 40px; object-fit: cover; clip-path: var(--cut-s); }
.coinchip .t { font: 700 17px/1 var(--cond); letter-spacing: .05em; } .coinchip .s { color: var(--mist); font-size: 14px; }
.demo { display: inline-block; background: var(--torch); color: var(--ink); font: 700 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 2px; box-shadow: 0 2px 0 #B8963F; }
.coinchip > .demo { margin-left: 8px; }
.lede { font: 500 clamp(18px, 1.55vw, 22px)/1.4 var(--sans); color: var(--snow); max-width: 30ch; }
/* hotbar HUD: three slots, like the game's */
.hud { display: flex; gap: 6px; margin: 0; }
.hud div { display: flex; flex-direction: column-reverse; justify-content: center; gap: 4px; min-width: 112px; padding: 10px 14px 9px; background: rgba(13, 15, 43, .86); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(201, 206, 245, .24), 0 4px 0 rgba(0, 0, 0, .28); }
.hud div:first-child { box-shadow: inset 0 0 0 2px var(--teal), 0 4px 0 rgba(0, 0, 0, .28); transform: translateY(-4px); }
.hud dt { font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.hud dd { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.hud dd[data-n=online] { color: var(--teal); }
@media (max-width: 1100px) and (min-width: 761px) { .hero-foot { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l r" "h r"; } }
@media (max-width: 760px) {
  .hero { --wmt: 84px; --wmf: clamp(52px, 19.5vw, 150px); height: auto; min-height: max(100svh, 640px); display: flex; flex-direction: column; }
  .wm b, .wm i, .wm-x > span { display: block; }
  .wm { line-height: .9; }
  .stage { position: relative; left: auto; top: auto; margin: calc(var(--wmt) + var(--wmf) * 1.72) auto 0; width: min(86vw, 420px, calc(max(100svh, 640px) - 470px)); min-width: 220px; }
  .hero-foot { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "h" "r"; gap: 16px; padding-top: 6px; margin-top: auto; }
  .hf-r { min-width: 0; flex-direction: row; } .hf-r .btn { flex: 1 1 0; padding: 0 12px; font-size: 16px; min-height: 54px; }
  .hud div { min-width: 0; flex: 1; padding: 9px 10px 8px; } .hud dd { font-size: 22px; } .hud dt { font-size: 11px; letter-spacing: .08em; }
  .lede { font-size: 17px; }
  .hero .f2, .hero .c1, .hero .c3 { display: none; }
  .hero .f0 { top: 20%; left: -4%; } .hero .f1 { top: 14%; } .hero .c0 { top: 40%; width: 60vw; } .hero .c2 { left: 40%; bottom: 30%; width: 50vw; }
}
@media (max-width: 380px) { .hf-r { flex-direction: column; } .hud dt { font-size: 10px; letter-spacing: .04em; } .hud dd { font-size: 19px; } }
@media (max-height: 560px) and (min-width: 761px) { .hero { height: 620px; } }

/* ---------- section scaffolding */
section { position: relative; }
.sec-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 40px; }
.sec-sub { max-width: 440px; color: var(--mist); }
.band-blue { background: linear-gradient(180deg, var(--night) 0, var(--indigo) 140px, var(--dusk) 100%); padding: clamp(84px, 11vw, 150px) 0; }
.band-dawn { background: linear-gradient(180deg, var(--dusk) 0%, #4B44A0 62%, var(--violet) 100%); padding: clamp(84px, 11vw, 150px) 0; }
.band-day { background: linear-gradient(180deg, var(--daytop) 0, var(--day) 220px); color: var(--ink); padding: clamp(84px, 11vw, 150px) 0; }
.band-dusk { background: linear-gradient(180deg, var(--violet) 0, var(--dusk) 160px, var(--dusk) 75%, var(--night) 100%); padding: clamp(84px, 11vw, 150px) 0; }
.sky-night { position: relative; background: var(--night); }

/* ---------- worlds: a server browser, rows are plates */
.worlds .c4 { right: -4%; top: 6%; width: clamp(200px, 24vw, 440px); }
.worlds .f3 { left: 2%; top: 46%; width: clamp(50px, 5vw, 90px); opacity: .55; }
.seg { display: inline-flex; gap: 6px; padding: 0; }
.seg button { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; background: rgba(13, 15, 43, .86); padding: 0 16px 0 10px; border-radius: 4px; min-height: 48px; font: 600 16px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--mist);
  box-shadow: inset 0 0 0 1px rgba(201, 206, 245, .24), 0 4px 0 rgba(0, 0, 0, .28); transition: transform .18s cubic-bezier(.3, .7, .3, 1), color .15s, box-shadow .15s; }
.seg button kbd { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; background: rgba(201, 206, 245, .12); font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--mist); }
.seg button:hover { color: var(--snow); transform: translateY(-2px); }
.seg button[aria-selected=true] { color: var(--snow); transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--teal), 0 4px 0 rgba(0, 0, 0, .28); }
.seg button[aria-selected=true] kbd { background: var(--teal); color: var(--ink); }
.slist { display: grid; gap: 10px; }
.row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1.6fr) 104px 96px minmax(0, 1.3fr) 128px 104px; align-items: center; gap: 18px; padding: 12px 18px 12px 12px; text-decoration: none; border-radius: 4px;
  background: linear-gradient(180deg, #2B2F78 0%, #242868 100%); box-shadow: inset 0 1px 0 rgba(201, 206, 245, .14), inset 0 0 0 1px rgba(201, 206, 245, .06), 0 5px 0 var(--plate-side); transition: transform .2s cubic-bezier(.3, .7, .3, 1), box-shadow .2s; }
.row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--teal); transform: scaleY(0); transition: transform .2s; }
.row:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(201, 206, 245, .2), inset 0 0 0 1px rgba(201, 206, 245, .1), 0 8px 0 var(--plate-side); }
.row:hover::before { transform: scaleY(1); }
.row .art { width: 52px; height: 52px; object-fit: cover; background: var(--dusk); clip-path: var(--cut-s); transition: transform .3s cubic-bezier(.3, .7, .3, 1); }
.row:hover .art { transform: scale(1.08) rotate(-3deg); }
.row .nm { min-width: 0; text-decoration: none; }
.row .nm b { display: block; font: 600 19px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .nm span { font: 600 14px/1 var(--cond); letter-spacing: .08em; color: var(--mist); }
.row a.nm:hover b { color: var(--teal); }
.row .c { display: flex; flex-direction: column; font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.row .c .n { font: 600 21px/1.15 var(--sans); letter-spacing: 0; color: var(--snow); font-variant-numeric: tabular-nums; }
.row .n.on { color: var(--teal); }
.row .sp-l { font-size: 15px; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sp-l b { color: var(--snow); font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 2px; white-space: nowrap; justify-self: start; box-shadow: inset 0 0 0 1px var(--line2); }
.pill::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: currentColor; }
.pill.open { color: var(--teal); box-shadow: inset 0 0 0 1px rgba(62, 214, 192, .5); }
.pill.locked { color: var(--mist); }
.pill.gone { color: var(--torch); box-shadow: inset 0 0 0 1px rgba(244, 210, 122, .45); }
.row .btn { justify-self: end; }
.rhead { display: grid; grid-template-columns: 56px minmax(0, 1.6fr) 104px 96px minmax(0, 1.3fr) 128px 104px; gap: 18px; padding: 0 18px 4px 12px; font: 600 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: 4px; background: rgba(13, 15, 43, .6); box-shadow: inset 0 0 0 1px var(--line2); }
.invite p { font: 600 20px/1.3 var(--sans); }
.demotiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 8px; }
.demotiles figure { margin: 0; position: relative; overflow: hidden; background: var(--indigo); clip-path: var(--cut); }
.demotiles img { aspect-ratio: 960 / 600; object-fit: cover; width: 100%; }
.demotiles figcaption { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; align-items: center; font: 700 15px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; background: rgba(13, 15, 43, .86); padding: 5px 10px 5px 5px; border-radius: 3px; }
.more { margin-top: 22px; font: 600 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; } .more a { color: var(--mist); }
.more a:hover { color: var(--snow); }
@media (max-width: 1080px) {
  .rhead { display: none; }
  .row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "a n b" "a m m"; gap: 6px 14px; padding: 12px; }
  .row .art { grid-area: a; width: 52px; height: 52px; align-self: start; }
  .row .nm { grid-area: n; }
  .row .btn { grid-area: b; }
  .row .meta { grid-area: m; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; color: var(--mist); }
  .row .meta .n { font-size: 15px; color: var(--snow); }
  .row .meta .n.on { color: var(--teal); }
  .row .c, .row .sp-l, .row > .pill { display: none; }
  .demotiles { grid-template-columns: 1fr; }
  .seg { flex-wrap: wrap; }
}
@media (min-width: 1081px) { .row .meta { display: none; } }
@media (max-width: 480px) { .seg button { padding: 0 10px 0 7px; font-size: 14px; gap: 6px; letter-spacing: .04em; } .seg button kbd { width: 18px; height: 18px; font-size: 11px; } }

/* ---------- gate (dawn): the gate opens as you scroll, the sun comes up behind it */
.gate-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.gate-art { position: relative; aspect-ratio: 952 / 1121; max-width: 520px; width: 100%; justify-self: center; }
.gate-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gate-art .g1 { opacity: var(--open, 0); }
.gate-copy .tt { margin-bottom: 30px; font-size: clamp(38px, 5vw, 76px); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 34px; display: grid; gap: 0; }
.steps li { position: relative; counter-increment: s; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 16px; padding: 0 0 22px; }
.steps li::before { content: counter(s); grid-row: span 2; position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; background: #24236A; color: var(--mist); font: 600 18px/1 var(--sans); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(201, 206, 245, .2), inset 0 0 0 1px rgba(201, 206, 245, .14), 0 4px 0 rgba(8, 9, 32, .5); transition: background-color .3s, color .3s, transform .3s cubic-bezier(.3, .7, .3, 1), box-shadow .3s; }
.steps li::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 2px; width: 2px; background: rgba(241, 242, 255, .2); }
.steps li:last-child::after { display: none; }
.steps li.on::before { background: var(--teal); color: var(--ink); transform: translateY(-3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 5px 0 var(--teal-side); }
.steps li.on::after { background: var(--teal); }
.steps b { font: 700 21px/1.25 var(--sans); padding-top: 7px; } .steps span { color: #DADDF8; font-size: 16px; }
@media (max-width: 860px) { .gate-in { grid-template-columns: minmax(0, 1fr); } .gate-art { max-width: 460px; } }

/* ---------- plots (midday, the only light scene) */
.plots { color: var(--ink); }
html.sky-on .plots { background: linear-gradient(180deg, rgba(196, 228, 240, 0) 0, rgba(196, 228, 240, .82) 18%, rgba(214, 236, 243, .86) 86%, rgba(214, 236, 243, 0) 100%); }
.plots .tt { color: var(--ink); text-shadow: var(--tt-xd); }
.plots .clock { color: #3A3F72; }
.plots .c5 { left: -5%; top: 4%; width: clamp(220px, 28vw, 520px); }
.plots .c6 { right: 6%; bottom: 6%; width: clamp(140px, 15vw, 280px); }
.plots .f4 { right: 3%; top: 8%; width: clamp(60px, 6vw, 110px); }
.plots-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.plots-copy { display: grid; gap: 18px; position: relative; z-index: 1; }
.plots-copy .tt { margin-bottom: 4px; font-size: clamp(38px, 5.2vw, 80px); }
.plots-copy > p:not(.clock) { font-size: 19px; color: var(--ink2); }
.plots-copy .small { color: #3A3F72; }
.plots-copy .strong { color: var(--ink); }
.plots-art { position: relative; z-index: 1; }
.plots-art img { width: 100%; max-width: 680px; margin: 0 auto; }
.slider { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; padding: 20px 0 2px; border-top: 1.5px solid rgba(13, 15, 43, .16); }
.slider span { font: 700 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.slider output { font: 600 46px/1 var(--sans); font-variant-numeric: tabular-nums; }
.slider input { grid-column: span 2; width: 100%; height: 34px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; --v: 40%; }
.slider input::-webkit-slider-runnable-track { height: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--teal-side) 0 var(--v), rgba(13, 15, 43, .14) var(--v) 100%); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .12); }
.slider input::-moz-range-track { height: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--teal-side) 0 var(--v), rgba(13, 15, 43, .14) var(--v) 100%); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -9px; border: 0; border-radius: 4px; background: linear-gradient(180deg, #7CEEDB, #3ED6C0); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 5px 0 var(--teal-side); transition: transform .15s; }
.slider input::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 4px; background: #3ED6C0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 5px 0 var(--teal-side); }
.slider input:active::-webkit-slider-thumb { transform: translateY(3px); }
.slider input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tier { display: grid; gap: 4px; justify-items: start; padding: 14px 14px 12px; border-radius: 4px; background: #EEF7FA; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(13, 15, 43, .1), 0 5px 0 #A9C6D3; transition: background-color .25s, transform .25s cubic-bezier(.3, .7, .3, 1), box-shadow .25s; }
.tier .pg { display: block; width: calc(var(--n) * 4px); height: calc(var(--n) * 4px); margin-bottom: 6px; border: 2px solid var(--violet); background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(13, 15, 43, .13) 3px 4px), repeating-linear-gradient(90deg, transparent 0 3px, rgba(13, 15, 43, .13) 3px 4px), #9FDCC8; transition: background-color .25s; }
.tier b { display: block; font: 600 30px/1.05 var(--sans); font-variant-numeric: tabular-nums; }
.tier span { font-size: 14px; color: #3A3F72; }
.tier.on { background: var(--ink); color: var(--snow); transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(201, 206, 245, .2), 0 8px 0 #050617; }
.tier.on .pg { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(13, 15, 43, .25) 3px 4px), repeating-linear-gradient(90deg, transparent 0 3px, rgba(13, 15, 43, .25) 3px 4px), var(--grass); }
.tier.on span, .tier.on b { color: var(--teal); }
@media (max-width: 860px) { .plots-in { grid-template-columns: minmax(0, 1fr); } .plots-art { order: -1; } .plots-art img { max-width: 440px; } }
@media (max-width: 400px) { .tier b { font-size: 22px; } .tier { padding: 12px 8px; } .tier span { font-size: 12px; } .tier .pg { width: calc(var(--n) * 3px); height: calc(var(--n) * 3px); } .slider output { font-size: 34px; } }

/* ---------- sponsors (dusk) */
.sponsors .c7 { left: -6%; top: 30%; width: clamp(200px, 24vw, 440px); opacity: .8; }
.sp-art { position: relative; container-type: inline-size; }
.sp-art > img { width: 100%; }
.panels { position: absolute; left: 0; top: 0; width: 1286px; height: 910px; transform-origin: 0 0; transform: scale(var(--k, .5)); pointer-events: none; }
.panel { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #1B1E52; display: grid; place-items: center; text-align: center; }
.panel img { width: 100%; height: 100%; object-fit: cover; }
.panel .pl { font: 600 34px/1.1 var(--sans); color: var(--snow); padding: 12px; }
.panel .pl small { display: block; font-size: 22px; color: var(--mist); font-weight: 400; margin-top: 6px; }
.panel.empty .pl { color: var(--mist); }
.slots { margin-top: 30px; display: grid; gap: 10px; }
.slot { display: grid; grid-template-columns: 124px minmax(0, 1.3fr) 130px 130px 130px 104px; gap: 16px; align-items: center; padding: 12px 18px; border-radius: 4px; background: linear-gradient(180deg, #2E2C74, #27256A); box-shadow: inset 0 1px 0 rgba(201, 206, 245, .14), 0 5px 0 var(--plate-side); transition: transform .2s cubic-bezier(.3, .7, .3, 1); }
.slot:hover { transform: translateY(-2px); }
.slot .k { font: 700 17px/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase; } .slot .k span { display: block; color: var(--mist); font: 600 13px/1.3 var(--cond); }
.slot .who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.slot .who img { width: 38px; height: 38px; object-fit: cover; flex: none; clip-path: var(--cut-s); }
.slot .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.slot .c { display: flex; flex-direction: column; font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.slot .c .n { font: 600 20px/1.15 var(--sans); letter-spacing: 0; color: var(--snow); font-variant-numeric: tabular-nums; }
.slot .btn { justify-self: end; }
@media (max-width: 900px) {
  .slot { grid-template-columns: 1fr auto; grid-template-areas: "k b" "w w" "m m"; gap: 8px 12px; }
  .slot .k { grid-area: k; } .slot .btn { grid-area: b; } .slot .who { grid-area: w; }
  .slot .cs { grid-area: m; display: flex; gap: 22px; flex-wrap: wrap; }
}
@media (min-width: 901px) { .slot .cs { display: contents; } }
.flow { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; margin-top: clamp(64px, 9vw, 120px); }
.flow-art img { width: auto; max-height: 520px; margin: 0 auto; }
.flow-copy { display: grid; gap: 22px; }
.bar { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; }
.bar i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--s); }
.split { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.split li { display: grid; grid-template-columns: 124px 1fr; grid-template-rows: auto auto; column-gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.split b { grid-row: span 2; font: 600 46px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--teal); }
.split li + li b { color: #A79EF0; }
.split span { font: 600 19px/1.3 var(--sans); } .split i { font-style: normal; color: var(--mist); font-size: 15px; }
.bnums { display: flex; gap: 8px; margin: 0; }
.bnums div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 10px 16px 9px; min-width: 150px; background: rgba(13, 15, 43, .7); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(201, 206, 245, .22), 0 4px 0 rgba(0, 0, 0, .25); }
.bnums dt { font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); } .bnums dd { margin: 0; font-size: 30px; line-height: 1; }
@media (max-width: 760px) { .flow { grid-template-columns: minmax(0, 1fr); } .flow-art img { max-height: 340px; } .split li { grid-template-columns: 92px 1fr; } .split b { font-size: 36px; } .bnums div { min-width: 0; flex: 1; } }

/* ---------- ending (night again) */
.ending { padding: clamp(90px, 12vw, 160px) var(--gut) clamp(90px, 10vw, 130px); text-align: center; overflow: clip; display: grid; justify-items: center; gap: 18px; }
.ending .f5 { left: 8%; top: 18%; width: clamp(60px, 7vw, 130px); }
.ending .f6 { right: 9%; top: 40%; width: clamp(50px, 5.5vw, 110px); opacity: .7; }
.ending .endcut { width: min(400px, 74vw); position: relative; animation: bob 7s ease-in-out infinite alternate; }
.ending .clock { margin: 8px 0 0; position: relative; }
.ending .tt { font-size: clamp(40px, 8vw, 116px); position: relative; }
.end-l { color: var(--mist); position: relative; font-size: 19px; }
.end-row { position: relative; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 12px; }
.end-row .ca { max-width: 100%; }

/* ---------- footer */
.foot { position: relative; background: #090A22; box-shadow: inset 0 1px 0 var(--line); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gut) 36px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } .foot nav a { color: var(--mist); text-decoration: none; font: 600 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; } .foot nav a:hover { color: var(--snow); }
.fine { font-size: 13px; color: var(--mist); } .fine a { color: var(--mist); }

/* ---------- inner pages */
.inner { background: radial-gradient(120% 60% at 50% 0%, #1E2163 0%, rgba(30, 33, 99, 0) 70%), var(--night); }
.inner main { min-height: 70vh; }
.page { max-width: var(--wrap); margin: 0 auto; padding: clamp(30px, 5vw, 60px) var(--gut) 90px; }
.page h1 { font-size: clamp(40px, 7vw, 96px); margin-bottom: 18px; text-shadow: var(--tt-x); padding-bottom: .06em; }
.lead { color: var(--mist); font-size: 19px; max-width: 640px; }
.panelbox { border-radius: 4px; background: linear-gradient(180deg, #23266A, #1D2060); box-shadow: inset 0 1px 0 rgba(201, 206, 245, .14), inset 0 0 0 1px rgba(201, 206, 245, .07), 0 6px 0 var(--plate-side); padding: clamp(18px, 3vw, 30px); }
.panelbox h3 { color: var(--snow); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label, .field .lab { font: 700 14px/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.field small { color: var(--mist); font-size: 13px; }
input[type=text], input[type=number], input[type=url], textarea, select { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 4px; border: 0; background: rgba(8, 9, 30, .8); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(201, 206, 245, .18); color: var(--snow); font: 400 17px var(--sans); }
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; }
.drop { display: grid; place-items: center; gap: 6px; min-height: 140px; border: 1.5px dashed var(--line2); border-radius: 4px; text-align: center; padding: 16px; color: var(--mist); background: rgba(8, 9, 30, .4); }
.drop img { width: 96px; height: 96px; object-fit: cover; clip-path: var(--cut-s); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; font-size: 16px; }
.kv dt { color: var(--mist); } .kv dd { margin: 0; text-align: right; }
.err { color: var(--rose); font-size: 15px; min-height: 1em; }
.ok { color: var(--teal); }

/* coin page */
.chead { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-bottom: 30px; }
.chead img.art { width: 120px; height: 120px; object-fit: cover; clip-path: var(--cut); }
.chead h1 { font-size: clamp(36px, 5.4vw, 72px); margin: 0 0 8px; overflow-wrap: anywhere; }
.chead .sub { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--mist); }
.chead .acts { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 760px) { .chead { grid-template-columns: 72px minmax(0, 1fr); } .chead img.art { width: 72px; height: 72px; } .chead .acts { grid-column: span 2; flex-direction: row; flex-wrap: wrap; } }
.carow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.carow .lab { color: var(--teal); font: 700 13px/1 var(--cond); letter-spacing: .12em; }
.cachip { display: inline-flex; gap: 8px; align-items: center; border: 0; background: rgba(8, 9, 30, .8); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(201, 206, 245, .18); border-radius: 4px; padding: 5px 9px; min-height: 34px; }
.cachip .cl { font: 700 13px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.carow .lk { color: var(--mist); }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 32px; }
.stats4 > div { background: rgba(13, 15, 43, .86); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(201, 206, 245, .22), 0 4px 0 rgba(0, 0, 0, .28); padding: 14px 16px; display: flex; flex-direction: column-reverse; gap: 6px; }
.stats4 dt { font: 600 12px/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); } .stats4 dd { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1; }
@media (max-width: 760px) { .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blockh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 44px 0 16px; }
.blockh h2 { font-size: clamp(28px, 3.4vw, 46px); text-shadow: var(--tt-x); }
.tierrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tierrow > div { border-radius: 4px; padding: 14px; background: linear-gradient(180deg, #23266A, #1D2060); box-shadow: inset 0 1px 0 rgba(201, 206, 245, .14), 0 5px 0 var(--plate-side); }
.tierrow b { font: 600 28px/1.1 var(--sans); font-variant-numeric: tabular-nums; display: block; }
.tierrow span { color: var(--mist); font-size: 14px; }
.tierrow .me { box-shadow: inset 0 0 0 2px var(--teal), 0 5px 0 var(--plate-side); }
.gamebox { position: fixed; inset: 0; z-index: 50; background: var(--night); }
.gamebox iframe { width: 100%; height: 100%; border: 0; display: block; }
.gamebar { position: fixed; z-index: 51; top: 10px; right: 10px; display: flex; gap: 8px; }
.gamebar .btn { min-height: 42px; }
.gamewait { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.gamewait > div { display: grid; gap: 16px; justify-items: center; max-width: 520px; }
.gamewait img { width: min(300px, 60vw); }
.gamewait h1 { font-size: clamp(32px, 6vw, 60px); text-shadow: var(--tt-x); }

/* dialog */
.mdl { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(8, 9, 30, .84); padding: 16px; }
.mdl[hidden] { display: none; }
.dlg-box { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(180deg, #23266A, #1B1E52); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(201, 206, 245, .18), inset 0 0 0 1px rgba(201, 206, 245, .1), 0 8px 0 rgba(0, 0, 0, .35); padding: 28px 22px 22px; }
.dlg-box h3 { margin: 0 0 14px; padding-right: 50px; }
.dlg-box .dlg-x { top: 12px; right: 12px; }
.dlg-box .row2 { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* mine / stats / docs */
.mrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mrow img { width: 44px; height: 44px; object-fit: cover; clip-path: var(--cut-s); }
.mrow .t b { display: block; font-weight: 600; } .mrow .t span { color: var(--mist); font-size: 14px; }
.empty { padding: 26px 0; color: var(--mist); }
.empty b { color: var(--snow); display: block; font-size: 19px; margin-bottom: 4px; font-weight: 600; }
.killer { font: 600 clamp(30px, 4.6vw, 60px)/1.1 var(--sans); font-variant-numeric: tabular-nums; max-width: 900px; margin: 10px 0 34px; }
.killer em { color: var(--teal); }
.doc { max-width: 820px; }
.doc h2 { font-size: clamp(28px, 4vw, 46px); margin: 52px 0 16px; text-shadow: var(--tt-x); }
.doc p, .doc li { color: #DADDF8; }
.doc p + p { margin-top: 12px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.doc th, .doc td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--mist); font: 600 13px/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.doc td.num { text-align: right; white-space: nowrap; }
.doc .tw { overflow-x: auto; }
/* "How it works" video: a plate with a side, like the rows */
.howto { margin: 26px 0 38px; }
.howto video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--indigo); box-shadow: inset 0 0 0 1px var(--line2), 0 8px 0 var(--plate-side); }
.howto figcaption { margin-top: 18px; font: 600 14px/1.4 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.e404 { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; background: url(/assets/art/tex-stars.webp) 0 0 / 512px repeat, linear-gradient(180deg, #0A0C24 0%, #121543 46%, #2A2D78 100%); }
.e404-art { width: clamp(110px, 16vw, 190px); animation: bob 7s ease-in-out infinite alternate; }
.e404 > div { display: grid; gap: 22px; justify-items: center; }
.e404 h1 { font-size: clamp(40px, 8vw, 96px); text-shadow: var(--tt-x); }

/* wallet picker (kit/wallet.js dialog) */
dialog.dlg { border: 0; border-radius: 4px; background: linear-gradient(180deg, #23266A, #1B1E52); box-shadow: inset 0 1px 0 rgba(201, 206, 245, .18), inset 0 0 0 1px rgba(201, 206, 245, .1); color: var(--snow); padding: 28px 22px 22px; width: min(440px, calc(100vw - 32px)); max-height: 90vh; }
dialog.dlg::backdrop { background: rgba(8, 9, 30, .84); }
dialog.dlg h2 { font-size: 26px; margin-bottom: 16px; padding-right: 50px; }
dialog.dlg .dlg-x { top: 12px; right: 12px; }
.wp-list { display: grid; gap: 10px; }
.wp-item { display: flex; gap: 12px; align-items: center; padding: 12px; border: 0; border-radius: 4px; font-weight: 600; text-align: left; background: rgba(8, 9, 30, .7); box-shadow: inset 0 0 0 1px rgba(201, 206, 245, .2), 0 4px 0 rgba(0, 0, 0, .3); min-height: 54px; transition: transform .16s, box-shadow .16s; }
.wp-item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--teal), 0 6px 0 rgba(0, 0, 0, .3); }
.wp-item img { width: 28px; height: 28px; }
.wp-dot { width: 28px; height: 28px; border-radius: 4px; background: var(--teal); display: inline-block; }
.wp-get { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; } .wp-get a { color: var(--mist); }
.wp-cur, .wp-none { font-size: 15px; margin-bottom: 12px; color: var(--mist); }
.wp-off { margin-top: 14px; }
.wp-err { margin-top: 10px; font-size: 14px; color: var(--rose); }

/* toasts */
.tstack { position: fixed; z-index: 90; right: 16px; bottom: 16px; display: grid; gap: 10px; width: min(420px, calc(100vw - 32px)); }
.toast { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: start; padding: 12px 14px; border-radius: 4px; background: #1D2060; box-shadow: inset 0 0 0 1px var(--line2), 0 5px 0 rgba(0, 0, 0, .35); font-size: 15px; }
.toast.ok { box-shadow: inset 0 0 0 1px rgba(62, 214, 192, .55), inset 4px 0 0 var(--teal), 0 5px 0 rgba(0, 0, 0, .35); } .toast.err { box-shadow: inset 0 0 0 1px rgba(228, 108, 154, .6), inset 4px 0 0 var(--rose), 0 5px 0 rgba(0, 0, 0, .35); }
.toast a { grid-column: 1; color: var(--teal); font-size: 14px; }
.toast .tx { grid-row: 1; grid-column: 2; border: 0; background: transparent; font-size: 20px; line-height: 1; width: 32px; height: 32px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.gamebar .btn-2 { --face: #1B1E52; }
.play .foot, .play .nav { display: none; }
/* tap targets >= 32px */
.ca button { min-height: 32px; }
.foot nav a, .fine a, .more a, .carow .lk, .small a { display: inline-flex; align-items: center; min-height: 32px; }
.brand { min-height: 40px; }
.foot nav a { padding: 0 4px; min-width: 32px; justify-content: center; } .nav-ca button { min-width: 48px; }
@media (max-width: 360px) { .nav { gap: 6px; } .nav-ca b { display: none; } .nav-ca { padding-left: 8px; } .nav-ca button { min-width: 0; } }
.nav > * { flex-shrink: 0; } .nav > .nav-ca { flex-shrink: 1; min-width: 0; }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: -6px; font: 600 13px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.key span { display: inline-flex; align-items: center; gap: 8px; } .key span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.fog { position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; background: linear-gradient(180deg, rgba(201, 206, 245, 0), rgba(201, 206, 245, .07) 60%, rgba(201, 206, 245, .12)); }
[hidden] { display: none !important; }
.field label.drop { font: 400 15px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mist); }