/* The store: home, game pages, Submit, the agents' pages. Game Night (the design system in design-system/, applied
   7 Oct 2026): toy pieces on a dark game table. The human side is warm (orange disc), the agent side cool (cyan
   hexagon), referee yellow is the one loud action. Colours, type, space and motion all come from /ds/tokens.css;
   class names are unchanged (the server's HTML and the tests use them). The boards have their own sheet. */
@import url("/ds/tokens.css");

/* The old names, for the pages' own small style blocks: they now point at the Game Night tokens */
:root{--night:var(--bg-0);--surface:var(--bg-1);--surface-2:var(--bg-2);--line:var(--line-1);--text:var(--text-1);--muted:var(--text-2);--faint:var(--text-3);
  --pink:var(--accent);--cyan:var(--text-1);--yellow:var(--accent);--green:var(--success);--display:var(--font-display);--body:var(--font-body);--r:var(--radius-lg)}
.overline{margin:0;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}

*{box-sizing:border-box}
html{background:var(--bg-0)}
body{margin:0;min-height:100vh;color:var(--text-1);font:400 15px/22px var(--font-body);background:var(--bg-0);-webkit-font-smoothing:antialiased}
/* the table texture: a fixed layer, so the page scrolls over it (iOS ignores background-attachment:fixed) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    radial-gradient(55% 60% at 0% 0%,rgba(47,214,245,.08),transparent 70%),radial-gradient(55% 60% at 100% 0%,rgba(255,79,184,.12),transparent 70%); /* Neon Night: humans cyan left, robots pink right */
  background-size:24px 24px,24px 24px,100% 100%,100% 100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.hidden{display:none!important}
.small{font-size:13px;line-height:18px;color:var(--text-2);margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);padding-block:0 var(--space-8);container-type:inline-size}

/* top bar and wordmark */
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-4)}
.logo{display:inline-flex;align-items:center;gap:2px;font:900 24px/1 var(--font-display);letter-spacing:-.02em;color:var(--text-1);text-decoration:none}
.logo .vs{display:inline-flex;align-items:center;justify-content:center;height:1.05em;padding:0 .18em;margin:0 .06em;background:var(--accent);color:var(--on-accent);font-size:.78em;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.logo .tld{color:var(--text-2);font-weight:800}
.bar nav{display:flex;align-items:center;gap:var(--space-4);font-weight:600;font-size:15px;color:var(--text-2)}
.bar nav a{text-decoration:none;white-space:nowrap;padding:10px 2px}
.bar nav a:hover{color:var(--text-1)}

/* type */
.kicker{margin:var(--space-2) 0 var(--space-6);max-width:16em;font:900 clamp(30px,4.6cqi,52px)/1.06 var(--font-display);letter-spacing:-.02em;color:var(--text-1);text-transform:none;text-wrap:balance}
.kicker em{font-style:normal;color:var(--human-text)}
.kicker strong{color:var(--agent-text);font-weight:900}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-block:var(--space-8) var(--space-4);flex-wrap:wrap}
.sechead h2{font:800 clamp(22px,3.2cqi,32px)/1.15 var(--font-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.sechead p{margin:0;color:var(--text-2);font-size:14px}
.sechead a{color:var(--text-1);font-weight:600;font-size:15px;white-space:nowrap}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:var(--radius-pill);font:800 12px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.badge.feat{background:var(--accent);color:var(--on-accent)}
.badge.new{background:var(--text-1);color:var(--bg-0)}
.badge.updated{background:transparent;color:var(--text-1);box-shadow:inset 0 0 0 2px var(--line-2)}
.badge.soon{background:var(--bg-2);color:var(--text-2);box-shadow:inset 0 0 0 2px var(--line-1)}

/* buttons: pieces on a hard lip that click down onto it */
.btn{--fill:var(--bg-2);--ink:var(--text-1);--lip:var(--line-1);--edge:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--size-btn);padding:0 var(--space-6);
  border-radius:var(--radius-md);border:2px solid var(--edge);background:var(--fill);color:var(--ink);font:700 16px/20px var(--font-body);
  text-decoration:none;white-space:nowrap;box-shadow:0 var(--size-lip) 0 0 var(--lip);transform:translateY(0);
  transition:transform var(--dur-instant) var(--ease-press),box-shadow var(--dur-instant) var(--ease-press),background var(--dur-fast) var(--ease-out)}
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(var(--size-lip));box-shadow:0 0 0 0 var(--lip)}
.btn.play{--fill:var(--accent);--ink:var(--on-accent);--lip:var(--accent-lip);--edge:var(--accent);font:900 18px/20px var(--font-display);letter-spacing:.01em}
.btn.ghost{--fill:var(--bg-2)}
.btn.wa{--edge:var(--line-2)}
.btn.wa::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ext-whatsapp);flex:none}
.btn.small{min-height:var(--size-btn-sm);padding:0 var(--space-4);border-radius:var(--radius-sm);font-size:14px;font-weight:600;box-shadow:0 3px 0 0 var(--lip)}
.btn.small:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(3px)}
.btn[aria-disabled="true"],.btn:disabled{--fill:var(--bg-2);--ink:var(--text-3);--edge:var(--line-1);--lip:transparent;border-style:dashed;box-shadow:none;transform:translateY(var(--size-lip));cursor:not-allowed;pointer-events:none}
@media (prefers-reduced-motion:reduce){.btn,.btn:active{transition:background var(--dur-fast);transform:none!important}}

/* featured */
.featured{display:grid;border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-1);box-shadow:var(--shadow-lift)}
@container (min-width:720px){.featured{grid-template-columns:1.1fr 1fr}.featured .art{aspect-ratio:auto;min-height:300px;max-height:380px}}
.featured .art{display:block;aspect-ratio:16/10;max-width:100%;min-height:0;background:var(--bg-2)}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.featured .info{padding:clamp(16px,3.5cqi,32px);display:flex;flex-direction:column;gap:var(--space-3);justify-content:center;min-width:0}
.featured .meta:first-child{gap:6px}
.featured h2{margin:0;font:900 clamp(34px,5cqi,52px)/1 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.featured h2 a{text-decoration:none}
.featured .tag{margin:0;font-size:16px;line-height:24px;color:var(--text-2)}
.meta{display:flex;flex-wrap:wrap;gap:6px var(--space-3);color:var(--text-2);font-size:13px;line-height:18px;align-items:center}
.meta b{color:var(--text-1);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-1)}

/* cards */
.grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:720px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}}
.card{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-1);box-shadow:var(--shadow-lift);min-width:0;transition:transform var(--dur-fast) var(--ease-out)}
.card:not(.soon):not(.submit):hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:not(.soon):hover{transform:none}}
.card .art{position:relative;display:block;aspect-ratio:16/9;max-width:100%;background:var(--bg-2)}
.card .art .badge{position:absolute;left:10px;top:10px}
.card .body{padding:var(--space-3) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1;min-width:0}
.card h3{margin:0;font:800 18px/22px var(--font-display)}
.card h3 a{text-decoration:none}
.card p{margin:0;color:var(--text-2);font-size:14px;line-height:20px}
.card .foot{margin-top:auto;padding-top:var(--space-2);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.card .plays{font-size:13px;color:var(--text-2)}
.card .plays b{color:var(--text-1);font-family:var(--font-num)}
.card .via{font-size:12px;color:var(--text-3);text-decoration:none}
.card.soon .art{filter:grayscale(1);opacity:.55}
.card.soon h3{color:var(--text-2)}
.card .soonline{font-size:13px;color:var(--text-3)}

/* how it works: a real sequence, so it's numbered (yellow number tiles on a lip) */
.how{display:grid;gap:var(--space-3);grid-template-columns:1fr;counter-reset:step;margin:0;padding:0;list-style:none}
@container (min-width:720px){.how{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}}
.how li{counter-increment:step;padding:var(--space-4);border-radius:var(--radius-lg);background:var(--bg-1);display:grid;grid-template-columns:52px 1fr;gap:2px var(--space-3);align-content:start;min-width:0}
.how li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font:700 26px/1 var(--font-num);box-shadow:0 var(--size-lip) 0 var(--accent-lip)}
.how b{font:800 17px/22px var(--font-display)}
.how span{color:var(--text-2);font-size:14px;line-height:20px}

/* recent results (recent.js) */
.recent{list-style:none;margin:0;padding:0;border-radius:var(--radius-lg);background:var(--bg-1)}
.recent li{display:flex;align-items:center;gap:var(--space-3);padding:12px 16px;font-size:14px;line-height:20px;border-top:1px solid var(--line-1);min-width:0}
.recent li .t{flex:1;min-width:0;color:var(--text-2)}
.recent li .t>b:first-child{color:var(--text-1);font-family:var(--font-body);font-weight:600}
.recent .mk{width:22px;height:22px;flex:none;overflow:visible}
.recent .mk-h circle{fill:var(--human);stroke:var(--human-lip);stroke-width:2}
.recent .mk-a polygon{fill:var(--agent);stroke:var(--agent-lip);stroke-width:2;stroke-linejoin:round}
.recent .mk .core{fill:none;stroke-opacity:.28;stroke-width:2}
.recent .mk-h .core{stroke:var(--on-human)}.recent .mk-a .core{stroke:var(--on-agent)}
.recent .mk-d circle{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:3 3}
@container (min-width:900px){.recent.wide{display:grid;grid-template-columns:1fr 1fr}.recent.wide li:nth-child(2){border-top:0}.recent.wide li:nth-child(odd){border-right:1px solid var(--line-1)}}
.recent li:first-child{border-top:0}
.recent b{font-family:var(--font-num)}
.recent b.h{color:var(--human-text)}
.recent b.a{color:var(--agent-text)}
.recent .when{color:var(--text-2);white-space:nowrap;font-size:13px}

/* footer (the design's pg-foot): wordmark, every page, the studio line */
footer{margin-top:var(--space-12);padding-block:var(--space-6);border-top:1px solid var(--line-1);color:var(--text-2);font-size:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-8)}
footer .logo{font-size:22px}
footer nav{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5)}
footer nav a{color:var(--text-2);font-weight:600;text-decoration:none;padding:6px 0;white-space:nowrap}
footer nav a:hover{color:var(--text-1)}
footer small{flex-basis:100%;font-size:13px;line-height:18px;color:var(--text-3)}

/* ---------- a game's page ---------- */
.crumb{display:inline-flex;gap:6px;align-items:center;margin-block:2px var(--space-4);color:var(--text-2);text-decoration:none;font-weight:600;font-size:15px;padding:8px 0}
.crumb:hover{color:var(--text-1)}
.lhead{display:grid;gap:var(--space-6)}
@container (min-width:820px){.lhead{grid-template-columns:minmax(0,1fr) 400px;gap:var(--space-12);align-items:start}}
.lart{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;max-width:100%;background:var(--bg-2)}
.ltitle{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.ltitle h1{margin:0;font:900 clamp(44px,7cqi,64px)/1 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.ltitle .tag{margin:0;font-size:17px;line-height:26px;color:var(--text-2)}
.by{margin:0;color:var(--text-2);font-size:14px}
.by b{color:var(--text-1);font-weight:600}
.playbox{margin-top:var(--space-2);padding:var(--space-5);border-radius:var(--radius-xl);background:var(--bg-1);box-shadow:var(--shadow-lift);display:grid;gap:var(--space-4)}
.playbox label{display:grid;gap:6px;font-weight:700;font-size:15px}
.playbox input,.playbox select{font:inherit;font-weight:400;color:var(--text-1);background:var(--bg-2);border:2px solid var(--line-2);border-radius:var(--radius-md);padding:0 var(--space-4);min-height:var(--size-btn);width:100%}
.playbox input::placeholder{color:var(--text-3)}
.send{display:grid;gap:var(--space-3)}
.send .btn{width:100%}
.lengths{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.lengths .btn{min-height:var(--size-btn-sm);padding:0 var(--space-4);font-size:14px;border-radius:var(--radius-sm);box-shadow:0 3px 0 0 var(--lip)}
.lengths .btn[aria-pressed="true"]{--fill:var(--bg-3);--edge:var(--accent);--lip:var(--accent-lip)}
.lengths .btn[aria-pressed="true"]::before{content:"✓";color:var(--accent);font-weight:800}
.optlabel{margin:0 0 6px;font-weight:700;font-size:15px}
.shots{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));max-width:620px}
.shots figure{margin:0;display:grid;gap:6px;min-width:0}
.shots img{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 2px var(--line-1);background:var(--bg-1)}
.shots figcaption{font-size:13px;color:var(--text-2)}
.cols{display:grid;gap:0 var(--space-8)}
@container (min-width:820px){.cols{grid-template-columns:1.5fr 1fr}}
.cols>div{min-width:0}
.prose{max-width:680px}
.prose p{margin:0 0 var(--space-3);font-size:16px;line-height:25px}
.rules{margin:0;padding-left:22px;display:grid;gap:var(--space-2);max-width:680px;font-size:15px;line-height:22px}
.rules li::marker{font-family:var(--font-num);font-weight:700;color:var(--text-2)}
.facts{display:grid;margin:0;border-radius:var(--radius-lg);background:var(--bg-1);overflow:hidden}
.facts div{display:flex;justify-content:space-between;gap:var(--space-3);padding:10px 16px;border-top:1px solid var(--line-1);font-size:14px;line-height:20px}
.facts div:first-child{border-top:0}
.facts dt{color:var(--text-2);font-weight:600}
.facts dd{margin:0;font-weight:600;text-align:right}

/* Discord (V1-30): the real logo in Discord's own colour, as the only place that colour appears */
.discord-nav{display:inline-flex;align-items:center;gap:8px;min-height:var(--size-btn-sm);padding:0 var(--space-3) 0 6px!important;border-radius:var(--radius-sm);
  color:var(--text-1)!important;background:var(--bg-2);border:2px solid var(--line-2);box-shadow:0 3px 0 0 var(--line-1);font-weight:600;white-space:nowrap}
.discord-nav svg{box-sizing:content-box;width:16px;height:16px;padding:6px;border-radius:var(--radius-sm);background:var(--ext-discord);color:#fff}
@media (max-width:440px){.bar nav{gap:var(--space-3)}.discord-nav{padding:0 4px!important}.discord-nav .dl{display:none}}
.btn.discord{--fill:var(--ext-discord);--ink:#fff;--edge:var(--ext-discord);--lip:#3c45a5}
.discord-band{margin-top:var(--space-8);padding:var(--space-5);border-radius:var(--radius-xl);background:var(--bg-1);box-shadow:var(--shadow-lift);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:16px 16px}
.discord-band p{margin:0;display:grid;gap:4px;min-width:0;flex:1 1 240px}
.discord-band b{font:800 20px/26px var(--font-display)}
.discord-band span{color:var(--text-2);font-size:14px;line-height:20px}

/* V1-25: "Your game here?", the wide last card */
.card.submit{grid-column:1/-1;background:var(--bg-0);box-shadow:inset 0 0 0 2px var(--line-2)}
.card.submit .body{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-5)}
.submit-ic{flex:none;width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;font:900 24px/1 var(--font-display);color:var(--on-accent);background:var(--accent);box-shadow:0 var(--size-lip) 0 var(--accent-lip)}
.submit-txt{flex:1 1 220px;min-width:0}
.submit-txt h3{margin:0 0 2px;font-size:20px;line-height:24px}
.submit-txt h3 a{text-decoration:none}
.submit-txt p{margin:0;color:var(--text-2);font-size:14px}

/* V1-23: the humans vs agents scoreboard */
.sb-card{border-radius:var(--radius-xl);background:var(--bg-1);box-shadow:var(--shadow-lift);padding:var(--space-5);display:grid;gap:var(--space-4)}
.sb-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:var(--space-3)}
.sb-side{display:grid;gap:2px;min-width:0}
.sb-side.sb-a{text-align:right;justify-items:end}
.sb-n{font:700 clamp(40px,7cqi,56px)/1 var(--font-num);color:var(--text-1)}
.sb-l{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--human-text);white-space:nowrap;display:flex;align-items:center;gap:6px}
.sb-a .sb-l{color:var(--agent-text)}
.sb-l::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;background:var(--human);box-shadow:inset 0 0 0 2px var(--human-lip)}
.sb-a .sb-l::before{order:2;border-radius:0;background:var(--agent);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.sb-mid{font-size:13px;color:var(--text-2);text-align:center;padding-bottom:6px}
.sb-bar{display:flex;height:12px;border-radius:var(--radius-pill);overflow:hidden;background:var(--agent);background-image:repeating-linear-gradient(90deg,transparent 0 6px,var(--agent-lip) 6px 7px)}
.sb-bar i{display:block;height:100%;background:var(--human);margin-right:3px;border-radius:var(--radius-pill) 0 0 var(--radius-pill)}
.sb-games{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:0 var(--space-5)}
.sb-games li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:8px 0;border-top:1px solid var(--line-1);min-width:0}
.sb-games .sb-r{font-family:var(--font-num);font-weight:700;white-space:nowrap;color:var(--text-2)}
.sb-games .h{color:var(--human-text)} .sb-games .a{color:var(--agent-text)}

/* "Just ask your agent", up top: the slim strip that points to the setup card */
.ask-strip{display:flex;align-items:center;gap:var(--space-3);width:fit-content;max-width:100%;padding:10px 12px;border-radius:var(--radius-lg);margin:0 0 var(--space-4);text-decoration:none;color:var(--text-1);
  background:var(--bg-1);box-shadow:inset 0 0 0 2px var(--line-1);font-size:14px;line-height:20px}
.ask-strip .ico{flex:none;width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:17px;background:var(--bg-3)}
.ask-strip .txt{min-width:0}
.ask-strip .go{display:flex;width:fit-content;margin:8px 0 0;align-items:center;min-height:32px;padding:0 var(--space-3);border-radius:var(--radius-sm);border:2px solid var(--line-2);background:var(--bg-2);box-shadow:0 3px 0 0 var(--line-1);font-weight:600;font-size:14px}
.ask-strip.done{box-shadow:inset 0 0 0 2px var(--success);background:var(--success-soft)}
.ask-strip.done .ico{background:var(--success);color:var(--bg-0)}
.ask-strip.done .go{border:0;background:none;box-shadow:none;padding:0;color:var(--text-2);min-height:0}
.setup.flash{animation:setupflash 1.6s var(--ease-out)}
@keyframes setupflash{0%,30%{box-shadow:inset 0 0 0 2px var(--accent),var(--glow-accent)}100%{box-shadow:var(--shadow-lift)}}
@media (prefers-reduced-motion:reduce){.setup.flash{animation:none}}

/* "Or just ask your agent": the one-time setup message */
.setup{scroll-margin-top:16px;margin-top:var(--space-8);padding:var(--space-5);border-radius:var(--radius-xl);background:var(--bg-1);box-shadow:var(--shadow-lift);display:grid;gap:var(--space-3)}
.setup h2{margin:0;font:800 clamp(22px,3.2cqi,28px)/1.15 var(--font-display)}
.setup-msg{margin:0;white-space:pre-wrap;word-break:break-word;background:var(--bg-2);border-radius:var(--radius-md);padding:var(--space-4);font:400 14px/22px var(--font-num);box-shadow:inset 0 0 0 2px var(--line-1)}
.setup-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* The store home's first screen (laptop): the headline, the featured game and the scoreboard fill the window, evenly
   spaced, so the page doesn't end on a half-shown "All games". The top bar is about 72px. */
@media (min-width:900px) and (min-height:700px){
  .first{min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;padding-bottom:var(--space-8)}
  .first .kicker{margin-top:0}
  .first > .scoreboard .sechead{margin-top:var(--space-8)}
}
/* shorter laptop screens: a slightly shorter headline and featured card, so the scoreboard still fits the first screen */
@media (min-width:900px) and (max-height:920px){
  .first .kicker{font-size:clamp(28px,3.6cqi,42px);margin-bottom:var(--space-4)}
  .first .featured .art{min-height:240px;max-height:290px}
  .first > .scoreboard .sechead{margin-top:var(--space-5);margin-bottom:var(--space-3)}
  .first .sb-card{padding:var(--space-4);gap:var(--space-3)}
}

/* a quiet "there's more below" cue at the foot of the first screen (laptop only) */
.scroll-cue{display:none}
@media (min-width:900px) and (min-height:700px){
  .scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:2px;position:fixed;bottom:14px;left:var(--cue-x,50%);transform:translateX(-50%);z-index:5;
    padding:4px 12px;border-radius:var(--radius-pill);background:var(--bg-0);color:var(--text-3);font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:opacity var(--dur-base) var(--ease-out)}
  .scroll-cue.gone{opacity:0;pointer-events:none}
  .scroll-cue:hover{color:var(--text-1)}
  .scroll-cue span{font-size:18px;line-height:1;animation:cue 1.8s var(--ease-in-out) infinite}
  @keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (min-width:900px) and (max-height:800px){
  .first .kicker{font-size:clamp(26px,3.2cqi,36px)}
  .first .featured .art{min-height:220px;max-height:250px}
  .first .featured .info{gap:var(--space-2)}
}
@media (max-height:810px){.scroll-cue{display:none!important}} /* short screens are already full to the edge */