/* 9th House Games site. Parent tokens copied from 9th-house/brand/kit/brand.css (v2, 24 Oct 2026); fonts are the kit's, in assets/fonts. */
@font-face{font-family:Outfit;src:url("assets/fonts/Outfit[wght].ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/Inter-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --nh-ground:#F7F4EF;--nh-text:#141414;--nh-act:#B01E2E;--nh-quiet:#6F6A62;--nh-line:#E3DDD3;
  --nh-head:Outfit,system-ui,sans-serif;--nh-body:Inter,system-ui,sans-serif;
  --nh-s1:8px;--nh-s2:16px;--nh-s3:24px;--nh-s4:32px;--nh-s6:48px;--nh-s8:64px;
  --gutter:16px;--max:1200px;--card:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nh-ground);color:var(--nh-text);font:400 17px/1.55 var(--nh-body);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--nh-text);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--nh-head);margin:0;letter-spacing:-.01em}
h1{font-weight:700;font-size:clamp(36px,7.4vw,68px);line-height:1.04}
h2{font-weight:600;font-size:clamp(26px,4vw,34px);line-height:1.15}
h3{font-weight:600;font-size:19px;line-height:1.3}
p{margin:0}
.quiet{color:var(--nh-quiet)}
.small{font-size:14px;line-height:1.5}
.nh-num{font-variant-numeric:tabular-nums lining-nums}

/* header */
.top{border-bottom:1px solid var(--nh-line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .desc{font:600 22px/1 var(--nh-head);padding-left:14px;border-left:1.5px solid var(--nh-text);letter-spacing:.01em}
.nav{display:flex;gap:22px;font:500 15px/1 var(--nh-body);white-space:nowrap}
.nav a{text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--nh-text)}

/* buttons: red is "act" only */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--nh-act);color:var(--nh-ground);font:600 16px/1 var(--nh-body);padding:16px 22px;border-radius:999px;text-decoration:none;min-height:48px}
.btn:hover{background:#8f1824}
.link{font:500 16px/1.4 var(--nh-body);text-underline-offset:4px;text-decoration-thickness:1.5px}

/* hero */
.hero{padding-block:var(--nh-s6) var(--nh-s3);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy toy" "acts toy";grid-template-rows:auto auto;column-gap:var(--nh-s6);row-gap:0;align-content:center;align-items:center}
.hero-copy{grid-area:copy;align-self:end}.hero>.acts{grid-area:acts;align-self:start}.toy-wrap{grid-area:toy}
.hero h1{max-width:none;font-size:clamp(32px,4.4vw,58px)}
.hero .lede{margin-top:var(--nh-s2);max-width:52ch;font-size:19px;line-height:1.5}
.hero .acts{margin-top:var(--nh-s3);display:flex;gap:var(--nh-s3);align-items:center;flex-wrap:wrap}

/* rail of cards */
.rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:var(--nh-s3)}
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--nh-s3);list-style:none;margin:0;padding:0}
.card{display:block;text-decoration:none}
.cardwrap{position:relative}
.card .art{position:relative;border-radius:var(--card);overflow:hidden;aspect-ratio:3/4;background:#ddd}
.card .art img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .art img{transform:scale(1.03)}
.tag{position:absolute;left:12px;bottom:12px;background:var(--nh-ground);color:var(--nh-text);font:600 12px/1 var(--nh-body);padding:7px 10px;border-radius:999px;letter-spacing:.02em}
.card h3{margin-top:14px}
.card p{margin-top:4px;color:var(--nh-quiet);font-size:15px;line-height:1.45}
.card .twist{color:var(--nh-text)}

/* sections */
section{padding:var(--nh-s6) 0}
.rule{border-top:1px solid var(--nh-line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nh-s4);margin-top:var(--nh-s3);list-style:none;padding:0}
.steps li{border-top:2px solid var(--nh-text);padding-top:var(--nh-s2)}
.steps p{margin-top:8px;color:var(--nh-quiet)}

/* diary */
.diary{display:grid;grid-template-columns:260px 1fr;gap:var(--nh-s6);align-items:start}
.signed{display:flex;gap:14px;align-items:center;margin-top:var(--nh-s2)}
.signed img{width:56px;height:56px;border-radius:14px}
.signed b{font:600 17px/1.2 var(--nh-head);display:block}
.entries{list-style:none;margin:0;padding:0}
.entries li{display:grid;grid-template-columns:150px 1fr;gap:var(--nh-s3);padding:18px 0;border-top:1px solid var(--nh-line)}
.entries li:last-child{border-bottom:1px solid var(--nh-line)}
.entries time{font:500 14px/1.6 var(--nh-body);color:var(--nh-quiet)}
.entries .next{color:var(--nh-quiet);font-style:normal}
.entries .next p{border:1.5px dashed var(--nh-line);border-radius:12px;padding:12px 14px}

/* contact strip */
.say{display:flex;justify-content:space-between;align-items:center;gap:var(--nh-s3);flex-wrap:wrap}
.say h2{max-width:20ch}

/* game page */
.crumb{padding-top:var(--nh-s3);font-size:14px}
.game{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:var(--nh-s6);padding:var(--nh-s3) 0 var(--nh-s6);align-items:start}
.game .art{border-radius:var(--card);overflow:hidden;aspect-ratio:3/4;position:relative}
.game .art img{width:100%;height:100%;object-fit:cover}
.status{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--nh-body);letter-spacing:.02em;border:1.5px solid var(--nh-text);border-radius:999px;padding:7px 12px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--nh-text);display:block}
.game h1{margin-top:16px;font-size:clamp(34px,6vw,56px)}
.facts{margin:var(--nh-s3) 0 0;display:grid;gap:0}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:var(--nh-s2);padding:14px 0;border-top:1px solid var(--nh-line)}
.facts div:last-child{border-bottom:1px solid var(--nh-line)}
.facts dt{font:600 14px/1.6 var(--nh-body);color:var(--nh-quiet)}
.facts dd{margin:0}
.slot{margin-top:var(--nh-s4);border:1.5px dashed var(--nh-quiet);border-radius:var(--card);padding:var(--nh-s3);display:flex;align-items:center;gap:var(--nh-s3)}
.slot .phone{flex:none;width:64px;aspect-ratio:9/16;border:1.5px solid var(--nh-quiet);border-radius:12px}
.slot b{font:600 19px/1.3 var(--nh-head);display:block}
.slot span{color:var(--nh-quiet)}
.minidiary{margin-top:var(--nh-s4)}
.minidiary h2{font-size:22px}

/* text pages */
.page{padding-block:var(--nh-s6) var(--nh-s8);max-width:calc(760px + 2 * var(--gutter))}
.page h1{font-size:clamp(34px,6vw,52px)}
.page .lede{margin-top:var(--nh-s2);font-size:19px}
.need{list-style:none;padding:0;margin:var(--nh-s4) 0 0}
.need li{display:grid;grid-template-columns:44px 1fr;gap:var(--nh-s2);padding:18px 0;border-top:1px solid var(--nh-line)}
.need li:last-child{border-bottom:1px solid var(--nh-line)}
.need .n{font:600 20px/1.3 var(--nh-head)}
.need b{font:600 19px/1.3 var(--nh-head);display:block}
.need span{color:var(--nh-quiet)}
.page .acts{margin-top:var(--nh-s4);display:flex;gap:var(--nh-s3);align-items:center;flex-wrap:wrap}
.block{margin-top:var(--nh-s6)}
.block h2{margin-bottom:var(--nh-s2)}
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--nh-s2);margin-top:var(--nh-s2)}
.dl a{display:flex;flex-direction:column;gap:12px;text-decoration:none;border:1px solid var(--nh-line);border-radius:14px;padding:16px}
.dl a:hover{border-color:var(--nh-text)}
.dl .sw{height:88px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.dl .sw img{height:48px;width:auto}
.dl .sw.ink{background:var(--nh-text)}
.dl .sw.paper{background:#fff;border:1px solid var(--nh-line)}
.dl small{color:var(--nh-quiet);font-size:13px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--nh-s2)}
.chip{display:flex;align-items:center;gap:8px;font-size:14px}
.chip i{width:22px;height:22px;border-radius:6px;border:1px solid var(--nh-line);display:block}

/* footer */
.foot{border-top:1px solid var(--nh-line);padding:var(--nh-s4) 0 var(--nh-s6);margin-top:var(--nh-s4)}
.foot .wrap{display:flex;justify-content:space-between;gap:var(--nh-s3);flex-wrap:wrap;font-size:14px;color:var(--nh-quiet)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{color:var(--nh-text);text-underline-offset:3px}

/* skip link, sound button */
.skip{position:absolute;left:-999px;top:8px;background:var(--nh-text);color:var(--nh-ground);padding:10px 14px;border-radius:8px;z-index:9}
.skip:focus{left:8px}
.snd{margin-left:6px;width:44px;height:44px;display:inline-grid;place-items:center;border:1.5px solid var(--nh-line);border-radius:50%;background:transparent;color:var(--nh-text);cursor:pointer;padding:0}
.snd:hover{border-color:var(--nh-text)}
.snd .x{display:block}.snd .w{display:none}
.snd.is-on{background:var(--nh-text);color:var(--nh-ground);border-color:var(--nh-text)}
.snd.is-on .x{display:none}.snd.is-on .w{display:block}
.nav{align-items:center}

/* the 9 drops onto its underline, once */
.brand svg{height:40px;width:auto;overflow:visible;display:block}
.brand .nine{transform-box:fill-box}
.drop-go .brand .nine{animation:nine-drop .9s cubic-bezier(.3,.1,.5,1) both}
.drop-go .brand .ul{transform-box:fill-box;transform-origin:50% 100%;animation:ul-hit .9s ease-out both}
@keyframes nine-drop{0%{transform:translateY(-190px);opacity:0}10%{opacity:1}52%{transform:translateY(0)}68%{transform:translateY(-16px)}84%{transform:translateY(0)}92%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes ul-hit{0%,50%{transform:scaleY(1) translateY(0)}58%{transform:scaleY(.55) translateY(2px)}75%{transform:scaleY(1.12)}100%{transform:scaleY(1)}}

/* hero toy */
.toy-wrap{margin:0;max-width:460px;width:100%;justify-self:end}
.toy-frame{position:relative;background:#3B2FD1;border-radius:28px;padding:10px;box-shadow:0 18px 40px -22px rgba(20,20,20,.55)}
.toy-frame svg{width:100%;height:auto;aspect-ratio:1;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.toy-frame .blk{cursor:grab;transition:transform .22s cubic-bezier(.3,1.3,.5,1);outline:none}
.toy-frame .blk.drag{transition:none;cursor:grabbing;touch-action:none}
.toy-frame .blk{touch-action:none}
.toy-frame .blk.out{transition:transform .35s ease-in,opacity .35s;opacity:0;pointer-events:none}
.toy-frame .blk:focus-visible rect:first-child{stroke:#fff;stroke-width:6}
.toy-frame .blk rect:first-child{transition:fill .25s}
.toy-frame .blk rect{transform-box:fill-box;transform-origin:center}
.toy-frame .blk.flip rect{animation:pop .4s}
.toy-frame .blk.nudge rect{animation:nudge .22s}
@keyframes pop{40%{transform:scale(1.14)}}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.toy-win{position:absolute;inset:10px;border-radius:20px;background:rgba(42,32,168,.93);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px}
.toy-win[hidden]{display:none}
.toy-win b{font:700 clamp(24px,5vw,32px)/1.1 var(--nh-head)}
.toy-win span{font:500 18px/1.3 var(--nh-body);margin-bottom:12px}
.toy-wrap figcaption{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-top:12px;font-size:14px;line-height:1.5;color:var(--nh-quiet)}
.toy-reset{flex:none;font:600 14px/1 var(--nh-body);background:transparent;border:1.5px solid var(--nh-line);border-radius:999px;padding:10px 14px;min-height:44px;color:var(--nh-text);cursor:pointer}
.toy-reset:hover{border-color:var(--nh-text)}
.toy-msg{min-height:1.5em;font-size:14px;color:var(--nh-text);margin-top:2px}

/* twists on cards and the game page */
.tw{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s;pointer-events:none}
.tw{--ps:paused}
.cardwrap:hover .tw,.cardwrap:focus-within .tw,.cardwrap.on .tw,.game.on .tw,.gameart:hover .tw{opacity:1;--ps:running}
.gameart{position:relative}
.tbtn{position:absolute;right:12px;top:12px;z-index:2;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:var(--nh-ground);color:var(--nh-text);font:600 13px/1 var(--nh-body);cursor:pointer;box-shadow:0 2px 8px rgba(20,20,20,.25)}
.tbtn:hover{background:#fff}
.gameart .art{position:relative}
/* jam: the chameleon takes three steps, flips color, leaves by the other gate */
.j-slide{animation:j-slide 3s ease-in-out infinite both}
.j-col{animation:j-col 3s linear infinite both}
.j-pip1{animation:pip 3s infinite both;--a:18%}.j-pip2{animation:pip 3s infinite both;--a:36%}.j-pip3{animation:pip 3s infinite both;--a:54%}
.j-pip1,.j-pip2,.j-pip3{opacity:.3}
@keyframes j-slide{0%,6%{transform:translate(130px,0)}18%,24%{transform:translate(142px,0)}36%,42%{transform:translate(154px,0)}54%,60%{transform:translate(166px,0) scale(1)}62%{transform:translate(166px,-8px)}68%{transform:translate(166px,0)}86%,100%{transform:translate(-160px,0)}}
@keyframes j-col{0%,54%{fill:#FFD23F}56%,100%{fill:#35C4FF}}
.j-pip1{animation-name:pip1}.j-pip2{animation-name:pip2}.j-pip3{animation-name:pip3}
@keyframes pip1{0%,16%{opacity:.3}18%,100%{opacity:1}}
@keyframes pip2{0%,34%{opacity:.3}36%,100%{opacity:1}}
@keyframes pip3{0%,52%{opacity:.3}54%,60%{opacity:1}62%,100%{opacity:.3}}
/* sort: the tall stack tips onto its neighbor */
.s-tip{transform-origin:180px 394px;animation:s-tip 3s ease-in infinite both}
.s-neigh{transform-origin:265px 394px;animation:s-neigh 3s ease-out infinite both}
@keyframes s-tip{0%,12%{transform:rotate(0)}18%{transform:rotate(-3deg)}26%{transform:rotate(3deg)}34%{transform:rotate(1deg)}62%{transform:rotate(44deg)}70%,100%{transform:rotate(38deg)}}
@keyframes s-neigh{0%,60%{transform:rotate(0)}68%{transform:rotate(7deg)}76%{transform:rotate(-3deg)}84%,100%{transform:rotate(0)}}
/* untangle: a fourth rope is drawn, one of the first three snaps */
.u-r4{stroke-dasharray:1;animation:u-r4 3s ease-in infinite both}
.u-r3{animation:u-r3 3s linear infinite both}
.u-ha,.u-hb{opacity:0;animation:u-h 3s linear infinite both}
.u-ha{transform-origin:90px 240px;animation-name:u-ha}.u-hb{transform-origin:280px 240px;animation-name:u-hb}
.u-spark{opacity:0;animation:u-spark 3s linear infinite both}
@keyframes u-r4{0%,10%{stroke-dashoffset:1}50%,100%{stroke-dashoffset:0}}
@keyframes u-r3{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes u-ha{0%,49%{opacity:0;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1)}90%,100%{opacity:1;transform:scaleX(.2)}}
@keyframes u-hb{0%,49%{opacity:0;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1)}90%,100%{opacity:1;transform:scaleX(.2)}}
@keyframes u-spark{0%,49%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.2)}}
.u-spark{transform-origin:185px 240px}
/* hidden object: ring the teapot, the cat takes it and walks off */
.h-ring{animation:h-ring 3s ease-out infinite both;stroke-dashoffset:0}
.h-pot{animation:h-pot 3s linear infinite both}
.h-cat{animation:h-cat 3s ease-in-out infinite both}
.h-carry{animation:h-carry 3s linear infinite both}
.h-bob{animation:h-bob .5s ease-in-out infinite alternate}
@keyframes h-ring{0%{opacity:0;transform:scale(1.4)}8%{opacity:1;transform:scale(1)}40%{opacity:1}46%,100%{opacity:0}}
.h-ring{transform-origin:180px 390px}
@keyframes h-pot{0%,44%{opacity:1}46%,100%{opacity:0}}
@keyframes h-carry{0%,44%{opacity:0}46%,100%{opacity:1}}
@keyframes h-cat{0%{transform:translate(-70px,0)}40%,46%{transform:translate(130px,0)}100%{transform:translate(480px,0)}}
@keyframes h-bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}

.tw *{animation-play-state:var(--ps)!important}

/* patch notes */
.notes li{grid-template-columns:70px 150px 1fr}
.notes li.next{grid-template-columns:70px 150px 1fr}
.notes code{font:600 13px/1.8 ui-monospace,Menlo,monospace;color:var(--nh-act)}
.notes h3{font-size:18px}
.notes .pn{list-style:none;margin:8px 0 0;padding:0}
.notes .pn li{display:block;border:0;padding:3px 0 3px 22px;position:relative;font-size:15px;line-height:1.5}
.notes .pn li:last-child{border:0}
.notes .pn b{position:absolute;left:0;font-family:ui-monospace,Menlo,monospace;color:var(--nh-quiet)}
.notes p{margin-top:4px}
.minidiary .notes li{grid-template-columns:62px 1fr}
.minidiary .notes time{grid-column:2;order:-1}
.minidiary .notes li>div{grid-column:2}

/* send: the start screen */
.crt{background:var(--nh-text);color:var(--nh-ground);border-radius:24px;padding:var(--nh-s3);margin-top:var(--nh-s4);position:relative;overflow:hidden}
.crt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);pointer-events:none}
.hud{display:flex;justify-content:space-between;font:600 13px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#FFD23F;margin-bottom:var(--nh-s3)}
.coin{animation:blink 1.1s steps(2,start) infinite}
.form-ready .coin,.ready .coin{animation:none}
@keyframes blink{50%{opacity:0}}
.slot-in{display:block;margin-top:var(--nh-s2)}
.slot-in .k{display:block;font:600 14px/1.4 var(--nh-body);color:#cfc9bf;margin-bottom:6px}
.slot-in input,.slot-in textarea{width:100%;font:500 18px/1.4 var(--nh-body);color:var(--nh-ground);background:#232323;border:2px solid #3a3a3a;border-radius:14px;padding:14px;min-height:52px;resize:vertical}
.slot-in input::placeholder,.slot-in textarea::placeholder{color:#8d877d}
.slot-in input:focus,.slot-in textarea:focus{outline:none;border-color:#35C4FF;box-shadow:0 0 0 3px rgba(53,196,255,.35)}
.slot-in.full input,.slot-in.full textarea{border-color:#2EE6A6}
.go{display:flex;align-items:center;gap:var(--nh-s2);flex-wrap:wrap;margin-top:var(--nh-s3)}
.go .small{color:#cfc9bf}
.start-btn{border:0;cursor:pointer;font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.ready .start-btn{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.05)}}
.crt :focus-visible{outline-color:#fff}

/* studio B: two players */
.players{display:grid;grid-template-columns:1fr 1fr;gap:var(--nh-s2);margin-top:var(--nh-s3)}
.pl{border:2px solid var(--nh-text);border-radius:20px;padding:var(--nh-s3)}
.pl.p2{background:var(--nh-text);color:var(--nh-ground)}
.pn1{font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.pl h3{font-size:28px;margin-top:10px}
.pl p{margin-top:6px}
.who{display:flex;align-items:center;gap:12px;margin-top:10px}
.who h3{margin:0}.who img{width:48px;height:48px;border-radius:12px}

/* 404 */
.nf{text-align:left}
.cat404{width:min(100%,520px);height:auto;margin-bottom:var(--nh-s3)}
.cat404 .run{animation:nf-run 2.4s cubic-bezier(.2,.8,.3,1) 1 both}
.cat404 .bob{animation:nf-bob .32s ease-in-out infinite alternate}
.cat404 .paper{animation:nf-flap .32s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0 50%}
.cat404 .dust{animation:nf-dust 2.4s ease-out 1 both}
@keyframes nf-run{0%{transform:translateX(-220px)}100%{transform:translateX(0)}}
@keyframes nf-bob{to{transform:translateY(-6px)}}
@keyframes nf-flap{to{transform:rotate(-6deg)}}
@keyframes nf-dust{0%{opacity:0}20%{opacity:.8}100%{opacity:0}}

@media (max-width:900px){.hero{grid-template-columns:1fr;grid-template-areas:"copy" "toy" "acts";row-gap:var(--nh-s3)}.hero>.acts{margin-top:0}.hero h1{font-size:clamp(30px,8.4vw,44px)}.toy-wrap{justify-self:center;max-width:420px}}
@media (min-width:760px){:root{--gutter:40px}}
@media (max-width:1000px){
  .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail li{flex:0 0 min(72vw,300px);scroll-snap-align:start}
  .diary{grid-template-columns:1fr;gap:var(--nh-s3)}
  .game{grid-template-columns:1fr;gap:var(--nh-s3)}
  .game .art{max-width:420px}
}
@media (max-width:640px){
  .rail-head{flex-direction:column;gap:6px}
  .notes li,.notes li.next{grid-template-columns:1fr;gap:2px}
  .notes li>code{order:0}
  .players{grid-template-columns:1fr}
  .brand svg{height:32px}
  .hero{padding-top:var(--nh-s2)}

  .steps{grid-template-columns:1fr;gap:var(--nh-s3)}
  .entries li{grid-template-columns:1fr;gap:4px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .nav{gap:14px;width:100%;font-size:14px}.snd{margin-left:auto}
  .dl{grid-template-columns:1fr}
  .brand .desc{font-size:19px}
  body{font-size:16px}
  .hero{padding-top:var(--nh-s3)}
  .slot{flex-direction:row}
}
@media (prefers-reduced-motion:reduce){.tw,.tbtn{display:none}.drop-go .brand .nine,.drop-go .brand .ul,.cat404 *,.coin,.ready .start-btn{animation:none!important}.toy-frame .blk,.toy-frame .blk.out{transition:none}.card .art img{transition:none}.card:hover .art img{transform:none}}