/* DOKYO v9 — THE DROP. Black, hairlines, giant condensed type, tiny captions. */

@font-face{font-family:"Della Respira";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/della-respira-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* country flags, the same on every system (Windows draws none of its own): Twemoji's flags (CC BY 4.0) in the font of the
   country-flag-emoji-polyfill package (MIT). Only the flag letters use it, so no other character changes */
@font-face{font-family:"Twemoji Country Flags";font-display:swap;src:url(../fonts/twemoji-country-flags.woff2) format("woff2");unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/archivo-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#050505;--bg-2:#0B0B0B;--bg-3:#141414;
  --fg:#F2F0EB;--fg-2:#ABA8A2;--fg-3:#85827D;
  --pur:#9D6BFF;--pur-t:#C9B0FF;--pur-2:#B58BFF;--glow:0 0 40px rgba(157,107,255,.35);
  --gold:#D9B45A;--red:#E03A1E;--red-t:#F0654A;
  --line:rgba(242,240,235,.14);--line-2:rgba(242,240,235,.28);
  --display:"Twemoji Country Flags","Della Respira",Georgia,"Times New Roman",serif;
  --grot:"Twemoji Country Flags","Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:clamp(16px,2.6vw,40px);--wrap:1400px;--hdr:56px;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-color:#2A2A2A var(--bg);scrollbar-width:thin;caret-color:var(--pur)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#2A2A2A;border:2px solid var(--bg)}@media (hover:hover){::-webkit-scrollbar-thumb:hover{background:#3A3A3A}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--grot);font-feature-settings:"kern","tnum";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(3rem,10vw,10rem)}
h2{font-size:clamp(2.6rem,7vw,6.6rem)}
h3{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1}
button{font:inherit;color:inherit;cursor:var(--cur-hot,pointer)}
input,textarea,button{font-family:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--pur);outline-offset:3px}
::selection{background:var(--pur);color:var(--bg)}
.skip{position:absolute;left:-999px;top:8px;background:var(--pur);color:var(--bg);padding:.6em 1em;z-index:100}
.skip:focus{left:8px}
.wrap{width:auto;margin-inline:var(--gut)}
.cap{font:500 11px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.cap--pur{color:var(--pur-t)}.cap--red{color:var(--red-t)}
.lead{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.55;color:var(--fg-2);max-width:60ch}
.mt{margin-top:clamp(24px,4vw,44px)}.mt-s{margin-top:14px}
.actions{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:20px}

/* --- buttons: caption type on a hairline plate. Purple is the one action that matters. --- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 1.3em;border:1px solid var(--line-2);background:transparent;color:var(--fg);font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s;touch-action:manipulation}
.btn svg{width:1em;height:1em;fill:currentColor}
@media (hover:hover){.btn:hover{border-color:var(--fg)}}
.btn--pur{background:var(--pur);border-color:var(--pur);color:var(--bg)}
@media (hover:hover){.btn--pur:hover{background:var(--pur-2);border-color:var(--pur-2)}}
.btn--fill{background:var(--fg);border-color:var(--fg);color:var(--bg)}
@media (hover:hover){.btn--fill:hover{background:#fff;border-color:#fff}}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.tlink{font:500 11px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--pur-t);text-decoration:underline;text-decoration-color:rgba(157,107,255,.5);text-underline-offset:.35em;transition:text-decoration-color .2s}
@media (hover:hover){.tlink:hover{text-decoration-color:var(--pur-t)}}

/* --- header: small, sharp, almost nothing --- */
.hdr{position:fixed;inset:0 0 auto;z-index:40;height:var(--hdr);transition:background-color .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr.is-solid{background:rgba(5,5,5,.96);border-color:var(--line)}
.hdr__in{padding:0 var(--gut);height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand__logo{height:15px;width:auto}
.nav{display:flex;gap:0;margin-left:auto}
.nav a{padding:.6em .8em;font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);text-decoration:none;transition:color .2s}
@media (hover:hover){.nav a:hover{color:var(--fg)}}
.nav a[aria-current="page"]{color:var(--fg);text-decoration:underline;text-decoration-color:var(--pur);text-underline-offset:.5em}
.hdr__cta{font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--pur-t);text-decoration:underline;text-decoration-color:rgba(157,107,255,.5);text-underline-offset:.5em;padding:.6em 0}
@media (hover:hover){.hdr__cta:hover{text-decoration-color:var(--pur-t)}}
.burger{display:none;width:44px;height:44px;border:0;background:none;position:relative;margin-left:auto;margin-right:-10px}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--fg);transition:transform .3s var(--ease),top .3s}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:1260px){.nav{display:none}.burger{display:block}.hdr__cta{display:none}}
.drawer{position:fixed;inset:0;z-index:35;background:var(--bg);padding:calc(var(--hdr) + 20px) var(--gut) 28px;display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;overflow:auto}
.drawer[data-open="true"]{visibility:visible;opacity:1}
.drawer nav{display:grid;gap:0;border-top:1px solid var(--line)}
.drawer nav a{display:flex;align-items:baseline;gap:14px;font:400 clamp(1.9rem,7.5vw,3.4rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;text-decoration:none;color:var(--fg);padding:.12em 0;border-bottom:1px solid var(--line)}
.drawer nav a span{font:500 11px/1 var(--grot);letter-spacing:.12em;color:var(--pur-t);min-width:2.2em}
.drawer nav a[aria-current="page"]{color:var(--pur-t)}@media (hover:hover){.drawer nav a:hover{color:var(--pur-t)}}
.drawer__k{position:absolute;right:var(--gut);top:calc(var(--hdr) + 20px);height:min(36vh,280px);width:auto;fill:none;stroke:var(--pur);stroke-width:8;opacity:.28;pointer-events:none}
.drawer__foot{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center}
/* the handles in their own case, not in capitals: a look-alike (dokyos0l) is easier to spot */
.drawer__foot a{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;color:var(--fg-2);font:500 11px/1 var(--grot);letter-spacing:.12em;min-height:44px}
.drawer__foot svg{width:1.2em;height:1.2em;fill:currentColor}

/* --- hero: the campaign opener. One still, one line. --- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden;background:var(--bg)}
.hero__art{position:absolute;inset:0;z-index:-2}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* one render on every screen: wide screens frame the dragons, the helmet and Hachi */
[data-hero] .hero__art img{object-position:50% 25%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.92) 0,rgba(5,5,5,.45) 28%,rgba(5,5,5,0) 55%),linear-gradient(to bottom,rgba(5,5,5,.5),rgba(5,5,5,0) 22%)}
.hero__cap{position:absolute;top:calc(var(--hdr) + 14px);z-index:1;color:var(--fg);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.hero__cap--tl{left:var(--gut)}.hero__cap--tr{right:var(--gut);text-align:right}
.hero__body{padding:0 var(--gut) clamp(28px,5vh,52px);display:grid;gap:16px;z-index:1}
.hero__body h1{font-size:clamp(2.7rem,7.2vw,7.2rem);max-width:16ch;text-shadow:0 6px 40px rgba(0,0,0,.7)}
.hero__sub{color:var(--fg);text-shadow:0 1px 10px rgba(0,0,0,.7)}
@media (max-width:760px){
  .hero__art img,[data-hero] .hero__art img{object-position:50% 12%}
  .hero::before{background:linear-gradient(to top,rgba(5,5,5,.96) 0,rgba(5,5,5,.6) 30%,rgba(5,5,5,0) 58%),linear-gradient(to bottom,rgba(5,5,5,.55),rgba(5,5,5,0) 22%)}
  .hero__body{padding-bottom:24px}
}
/* one reveal on load: the still surfaces, the line rises */
.js .hero__art img{opacity:0;transform:scale(1.03)}
.js.is-ready .hero__art img{opacity:1;transform:none;transition:opacity 1.1s ease,transform 2.6s var(--ease-out)}
.js .hero__body>*,.js .hero__cap{opacity:0;transform:translateY(12px)}
.js.is-ready .hero__body>*,.js.is-ready .hero__cap{opacity:1;transform:none;transition:opacity .8s var(--ease-out) 1.15s,transform .8s var(--ease-out) 1.15s}
.js.is-ready .hero__body>*:nth-child(2){transition-delay:1.3s}
.js.is-ready .hero__cap{transition-delay:1.45s}
/* image reveals below the fold, once; hidden only once site.js watches them (rv-arm, A8) */
.rv-arm .rv{opacity:0;transform:translateY(12px)}
.rv-arm .rv.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}

/* --- title card: the wordmark after the opener --- */
.titlecard{padding:clamp(36px,6vw,80px) var(--gut) clamp(28px,4vw,56px);border-bottom:1px solid var(--line)}
.titlecard__logo{width:min(100%,960px);height:auto;margin:0 auto}
.titlecard__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(28px,5vw,64px);padding-top:18px;border-top:1px solid var(--line)}
.titlecard__sub{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.4;color:var(--fg);max-width:34ch}
.titlecard__side{display:grid;gap:20px}
.titlecard__side .actions{margin-top:0}
.facts{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.facts div{display:grid;gap:4px;padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}
.facts dt{font:500 11px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.facts dd{margin:0;font:500 12px/1.4 var(--grot);letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.facts div:last-child dd{color:var(--pur-t)}
@media (max-width:900px){.titlecard__in{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}}

/* --- sections --- */
.sec{padding:clamp(40px,4.4vw,64px) 0;position:relative}
.sec--flush{padding:0}
.sec--world{padding-bottom:0}
.sec:not(.sec--world):not(.sec--worldpage):not(.sec--flush){content-visibility:auto;contain-intrinsic-size:auto 900px}
.sec__head{margin:0 var(--gut) clamp(18px,3vw,32px);padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36ch);gap:16px 40px;align-items:end}
.sec__meta{display:grid;gap:10px;justify-items:start;padding-bottom:.35em}
.sec__meta .cap{color:var(--fg-2);max-width:40ch}
@media (max-width:700px){.sec__head{grid-template-columns:1fr}.sec__meta{padding-bottom:0}}

/* --- grids: edge to edge, hairline gutters --- */
.grid{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.cell{display:block;background:var(--bg);color:var(--fg);text-decoration:none;overflow:hidden}
.cell img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;transition:transform .7s var(--ease-out)}
@media (hover:hover){.cell:hover img{transform:scale(1.025)}}
.cell__cap{display:grid;grid-template-columns:2.4em 1fr;gap:10px;padding:10px 12px 14px;font:500 11px/1.5 var(--grot);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);text-wrap:pretty}
.cell__cap span:first-child{color:var(--fg);transition:color .2s}
@media (hover:hover){.cell:hover .cell__cap span:first-child{color:var(--pur-t)}}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid--4,.drop{grid-template-columns:1fr}}
@media (max-width:760px){
  .lookbook{grid-template-columns:1fr}
  .lookbook .cell img{aspect-ratio:3/2}
  .lookbook .cell__cap{padding:12px 14px 18px;font-size:12px;letter-spacing:.08em}
}

/* --- the cast: three cells, hover swaps the still --- */
.cast{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cast__cell{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg);display:block;color:var(--fg);text-decoration:none;isolation:isolate}
.cast__img,.cast__alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.cast__alt{opacity:0;transition:opacity .45s ease;z-index:1}
.cast__cell:focus-visible .cast__alt{opacity:1}@media (hover:hover){.cast__cell:hover .cast__alt{opacity:1}}
.cast__cell--hachi .cast__alt{object-position:32% 16%}
.cast__cell--hachi .cast__img{object-fit:contain;object-position:50% 100%;padding:4% 2% 0;background:radial-gradient(60% 50% at 50% 62%,#17131F,var(--bg-2))}
.cast__cell--red .cast__img{filter:sepia(1) hue-rotate(-32deg) saturate(3.2) brightness(.8) contrast(1.15)}
.cast__cell::after{content:"";position:absolute;inset:auto 0 0;height:55%;z-index:2;background:linear-gradient(to top,rgba(5,5,5,.95),rgba(5,5,5,0));pointer-events:none}
.cast__k{position:absolute;right:14px;top:14px;z-index:3;width:30px;height:auto}
.cast__k svg{fill:var(--pur-t);width:100%;height:auto}
.cast__cell--red .cast__k svg{fill:var(--red-t)}
.cast__n{position:absolute;left:14px;top:14px;z-index:3;color:var(--fg)}
.cast__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 14px 16px;display:grid;gap:4px}
.cast__cap h3{font-size:clamp(2.6rem,5.2vw,5.4rem);line-height:.9}
.cast__cell--red .cast__cap .cap{color:var(--red-t)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,40px);padding:0 var(--gut);margin-top:clamp(20px,3vw,36px)}
.three>div{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line);align-content:start}
.three h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.three p:not(.cap){color:var(--fg-2);font-size:.95rem;max-width:44ch}
@media (max-width:760px){
  .cast{grid-template-columns:1fr}
  .cast__cell{aspect-ratio:1/1}
  .cast__cell--hachi .cast__img{padding:8% 18% 0;object-position:50% 100%}
  .three{grid-template-columns:1fr;gap:20px}
}

/* --- locations: the contact sheet over the city render --- */
.wmap{position:relative;height:calc(100svh - var(--hdr));min-height:600px;max-height:980px;overflow:hidden;background:#000;isolation:isolate;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wmap--full{height:100svh;max-height:none;border:0}
.wmap__cam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.15s cubic-bezier(.7,0,.25,1);will-change:transform}
.wmap__cam>img,.wmap__plan{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.wmap__plan{display:block;background:#08070C}
.wm-ic{transition:opacity .25s}
.wmap__pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;background:none;border:0;padding:0;color:var(--fg);pointer-events:auto;z-index:2;transition:opacity .3s}
.pin i{width:34px;height:34px;border:1px solid rgba(242,240,235,.9);display:grid;place-items:center;font:500 10px/1 var(--grot);font-style:normal;letter-spacing:.08em;background:rgba(5,5,5,.5);box-shadow:0 0 0 1px rgba(0,0,0,.6);transition:background-color .2s,border-color .2s,color .2s}
.pin b{font:500 10px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.9);padding:0 .3em}
.pin--up{flex-direction:column}
.pin:focus-visible i{background:var(--pur);border-color:var(--pur);color:var(--bg)}@media (hover:hover){.pin:hover i{background:var(--pur);border-color:var(--pur);color:var(--bg)}}
@media (hover:hover){.pin:hover b{color:var(--pur-t)}}
.wmap.zoomed .pin{opacity:0;pointer-events:none}
.wmap__hud{position:absolute;left:var(--gut);bottom:calc(var(--strip,150px) + 20px);z-index:3;max-width:min(420px,70vw);pointer-events:none;transition:opacity .3s;display:grid;gap:10px}
.wmap:not(.wmap--full) .wmap__hud{display:none}
.wmap__hud h1,.wmap__title{font:400 clamp(2.4rem,6vw,6rem)/.92 var(--display);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 6px 30px rgba(0,0,0,.8)}
.wmap__hud .cap{color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.wmap.zoomed .wmap__hud,.wmap.zoomed .wmap__legend{opacity:0;pointer-events:none}
.wmap__legend{position:absolute;left:0;right:0;bottom:0;z-index:3;transition:opacity .3s}
.wmap__strip{display:flex;gap:1px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:var(--line);border-top:1px solid var(--line)}
.wmap__strip::-webkit-scrollbar{display:none}
.wmap__strip button{flex:none;width:clamp(120px,11.2vw,158px);background:rgba(5,5,5,.9);border:0;padding:0;display:grid;color:var(--fg);text-align:left;transition:background-color .2s}
.wmap__strip img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;opacity:.72;transition:opacity .2s}
.wmap__strip .cap{padding:7px 8px 9px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wmap__strip .cap b{color:var(--fg);font-weight:500;margin-right:.6em}
.wmap__strip button[aria-current="true"] img{opacity:1}@media (hover:hover){.wmap__strip button:hover img{opacity:1}}
.wmap__strip button[aria-current="true"] .cap{color:var(--pur-t)}@media (hover:hover){.wmap__strip button:hover .cap{color:var(--pur-t)}}
.wmap__strip button[aria-current="true"]{background:#1A1626}
/* the World map's place: div.arrive, so html.arrive (the head's class for an address with a #target) is never one */
div.arrive{position:absolute;inset:0;z-index:5;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s;isolation:isolate}
div.arrive.on{opacity:1;visibility:visible}
div.arrive img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
div.arrive::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.96),rgba(5,5,5,.3) 55%,rgba(5,5,5,.4))}
.arrive__body{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,5vh,56px);z-index:1;display:grid;gap:12px;max-width:720px;justify-items:start}
.arrive__tag{color:var(--pur-t)}
.arrive__body h2{font-size:clamp(2.6rem,7vw,7rem);text-shadow:0 6px 30px rgba(0,0,0,.8)}
.arrive__body p:not(.cap){color:var(--fg-2);max-width:54ch;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.arrive__body .btn{margin-top:6px}
.arrive__meta{position:absolute;right:var(--gut);top:clamp(20px,4vh,40px);z-index:1;color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.wmap--full .arrive__meta,.wmap--full .arrive__back{top:calc(var(--hdr) + 16px)}
.arrive__back{position:absolute;left:var(--gut);top:clamp(20px,4vh,40px);z-index:2;background:rgba(5,5,5,.7)}
@media (max-width:820px), (max-height:500px), (max-aspect-ratio:1/1) and (max-width:1366px){
  .wmap{height:auto;min-height:0;max-height:none}
  .wmap--full{height:auto;margin-top:var(--hdr)}
  .wmap__cam{position:relative;inset:auto;aspect-ratio:4/3;overflow:hidden}
  .wmap__cam>img{object-fit:cover;object-position:62% 50%}
  .pin b{display:none}.pin i{width:30px;height:30px}
  .wmap__hud{display:none}
  .wmap__legend{position:static}
  .wmap__strip button{width:132px}
  div.arrive{position:fixed;z-index:50}
  .arrive__back,.wmap--full .arrive__back{top:calc(var(--hdr) + 12px)}
  .arrive__meta,.wmap--full .arrive__meta{top:calc(var(--hdr) + 26px)}
}
.page-world .sec--worldpage{padding:0}
.page-world .wmap--full .wmap__hud{bottom:calc(var(--strip,150px) + 20px)}

/* --- the drop: products --- */
.prod{display:grid;grid-template-rows:auto auto auto;background:var(--bg);color:var(--fg);text-decoration:none;overflow:hidden}
.prod__img{aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.drop--wide .prod__img{aspect-ratio:16/10}
.drop--wide .prod__img img{object-position:50% 50%}
.prod__img img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform .7s var(--ease-out)}
@media (hover:hover){.prod:hover .prod__img img{transform:scale(1.025)}}
.drop--cards .prod__img{aspect-ratio:1080/608}
.prod__row{display:flex;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line)}
.prod__row:first-of-type{padding-top:12px}
.prod__row:last-child{padding-bottom:12px}
.prod__row .cap b{color:var(--fg);font-weight:500;margin-right:.7em}
.prod__dl{color:var(--fg);text-decoration:underline;text-underline-offset:.35em;text-decoration-color:var(--line-2);transition:color .2s}
@media (hover:hover){.prod:hover .prod__dl{color:var(--pur-t);text-decoration-color:var(--pur-t)}}

/* --- split: image half, sheet half --- */
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split__art{position:relative;min-height:62vh;overflow:hidden;background:var(--bg-2)}
.split__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.split__body{padding:clamp(28px,4vw,64px) var(--gut);display:grid;gap:20px;align-content:center;border-left:1px solid var(--line)}
.split--flip .split__art{order:2}
.split--flip .split__body{border-left:0;border-right:1px solid var(--line)}
.split--partners{grid-template-columns:2fr 3fr}
.split--prose{grid-template-columns:.9fr 1.1fr}
@media (max-width:900px){
  .split,.split--partners,.split--prose{grid-template-columns:1fr}
  .split__art{min-height:0;aspect-ratio:4/3}
  .split--flip .split__art{order:0}
  .split__body,.split--flip .split__body{border:0;border-top:1px solid var(--line)}
}

/* --- the Ronin speaks: portrait and a giant line --- */
.speak-band{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:clamp(540px,38vw,880px)}
.speak-band__art{position:relative;overflow:hidden;background:var(--bg-2)}
.speak-band__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.speak{padding:20px;border:1px solid var(--line);display:grid;gap:16px;align-content:start;background:var(--bg-2)}
.speak__q{font:400 clamp(1.4rem,1.9vw,1.8rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;min-height:5em;text-wrap:pretty;text-shadow:var(--glow)}
.speak__q::before{content:"“"}.speak__q::after{content:"”"}
.speak--big{border:0;background:none;padding:clamp(28px,4vw,64px) var(--gut);align-content:center;gap:24px;border-left:1px solid var(--line)}
.speak--big .speak__q{font-size:clamp(1.5rem,2.7vw,2.7rem);max-width:30ch;min-height:6.4em}
@media (max-width:900px){.speak-band{grid-template-columns:1fr;min-height:0}.speak-band__art{aspect-ratio:4/3}.speak-band__art img{object-position:50% 18%}.speak--big{border-left:0;border-top:1px solid var(--line)}}

/* --- terms --- */
.ledger{margin:0;border-top:1px solid var(--line-2)}
.ledger div{display:grid;grid-template-columns:1fr auto;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.ledger dt{font:500 11px/1.6 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.ledger dd{margin:0;font:500 12px/1.6 var(--grot);letter-spacing:.1em;text-transform:uppercase;text-align:right;color:var(--fg)}
.ledger dd small{display:block;font:400 .8rem/1.3 var(--grot);letter-spacing:0;text-transform:none;color:var(--fg-3)}
.ledger dd .up{color:#7CC48A}.ledger dd .down{color:var(--red-t)}
.seal{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--pur)}
.seal svg{width:66%;height:66%;fill:var(--bg)}
.ca{display:flex;gap:16px;align-items:flex-start;padding:16px;border:1px solid var(--line)}
.ca b{display:block;font:500 11px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.ca p{color:var(--fg-2);font-size:.92rem}
.ca a{color:var(--fg);white-space:nowrap}
.warn{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid rgba(224,58,30,.4);background:rgba(224,58,30,.05)}
.warn svg{width:22px;height:22px;flex:none;color:var(--red-t);margin-top:2px}
.warn p{color:var(--fg-2);font-size:.92rem}
.warn strong{color:var(--fg)}

/* --- season calendar --- */
.cal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal__item{background:var(--bg);display:grid;grid-template-rows:auto 1fr}
.cal__art{aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.cal__art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cal__body{padding:12px 12px 22px;display:grid;gap:10px;align-content:start}
.cal__row{display:flex;justify-content:space-between;gap:10px}
.cal__state{color:var(--fg-3)}
.cal__item--live .cal__state{color:var(--pur-t)}
.cal__item--next .cal__state{color:var(--fg)}
.cal__body h3{font-size:clamp(1.5rem,2vw,1.9rem)}
.cal__body p{color:var(--fg-2);font-size:.9rem}
.cal__item--reserved h3{color:var(--fg-2)}
.cal--rich{grid-template-columns:1fr}
.cal--rich .cal__item{grid-template-rows:none;grid-template-columns:1fr 1fr;min-height:64vh}
.cal--rich .cal__item:nth-child(even) .cal__art{order:2}
.cal--rich .cal__art{aspect-ratio:auto;position:relative}
.cal--rich .cal__art img{position:absolute;inset:0}
.cal--rich .cal__body{padding:clamp(28px,4vw,64px) var(--gut);align-content:center;gap:16px}
.cal--rich .cal__body h3{font-size:clamp(2.4rem,5vw,5rem)}
.cal--rich .cal__body p{font-size:1.05rem;max-width:52ch}
@media (max-width:1000px){.cal{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.cal--rich .cal__item{grid-template-columns:1fr;min-height:0}.cal--rich .cal__item:nth-child(even) .cal__art{order:0}.cal--rich .cal__art{aspect-ratio:16/10}}
@media (max-width:600px){.cal{grid-template-columns:1fr}.cal__art{aspect-ratio:16/10}}

/* --- members: the wolfpack over the rooftop --- */
.sec--pack{isolation:isolate;overflow:hidden;padding:clamp(72px,10vw,140px) var(--gut) clamp(40px,6vw,72px);min-height:88vh;display:grid;align-items:end;border-top:1px solid var(--line)}
.pack__art{position:absolute;inset:0;z-index:-2}
.pack__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.sec--pack::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.96) 0,rgba(5,5,5,.6) 40%,rgba(5,5,5,.1) 75%),linear-gradient(to bottom,rgba(5,5,5,.5),rgba(5,5,5,0) 20%)}
.pack{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,64px);align-items:end}
.pack h2{grid-column:1/-1;font-size:clamp(4.2rem,15vw,15rem);line-height:.85;text-shadow:0 8px 40px rgba(0,0,0,.7)}
.pack__text{display:grid;gap:14px}
.pack__text p:not(.cap):not(.lead){color:var(--fg-2);max-width:56ch;font-size:1.02rem;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.pack__text strong{color:var(--fg)}
.links{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.links a{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:14px;padding:14px 16px;background:rgba(5,5,5,.86);text-decoration:none;transition:background-color .2s}
@media (hover:hover){.links a:hover{background:#151221}}
.links svg{width:18px;height:18px;fill:currentColor}
.links b{font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase}
.links span{color:var(--fg-3);font-size:.9rem}
@media (hover:hover){.links a:hover b{color:var(--pur-t)}}
.pack--page{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:start}
.pack--page .pack__text{gap:16px}
.pack--page .links{margin:8px 0 20px}
/* the X card: X shows logged-out visitors no embedded timeline (a 429 or an empty white card), so this opens X instead */
.xfeed{position:relative;overflow:hidden;display:grid;align-content:space-between;justify-items:start;gap:14px;margin-top:20px;padding:20px;border:1px solid var(--line);background:radial-gradient(90% 80% at 100% 100%,rgba(157,107,255,.14),transparent 70%),var(--bg-2);color:var(--fg);text-decoration:none;transition:border-color .2s}
.xfeed__h{font:400 clamp(2.1rem,3.6vw,3.4rem)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;text-shadow:var(--glow);margin-bottom:14px}
.xfeed__mark{position:absolute;right:-6%;bottom:-14%;width:clamp(140px,16vw,230px);opacity:.05;pointer-events:none}
.xfeed__mark svg{display:block;width:100%;height:auto;fill:var(--fg)}
.xfeed>.cap,.xfeed>.xfeed__h,.xfeed>.btn{position:relative}
@media (hover:hover){.xfeed:hover{border-color:var(--line-2)}.xfeed:hover .btn{border-color:var(--fg);background:rgba(242,240,235,.06)}}
@media (max-width:900px){.pack,.pack--page{grid-template-columns:1fr}.sec--pack{min-height:0}}

/* --- partners --- */
.partners{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line-2)}
.partner{padding:18px 0 20px;border-bottom:1px solid var(--line);display:grid;gap:6px}
.partner .cap span{color:var(--fg);margin-right:1em}
.partner h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.partner p:not(.cap){color:var(--fg-2);font-size:.95rem;max-width:52ch;margin-top:4px}
.partners__more{margin:20px 0 0}

/* --- close band --- */
.close{position:relative;isolation:isolate;overflow:hidden;min-height:72svh;display:grid;align-items:end;padding:clamp(56px,8vw,120px) var(--gut) clamp(36px,6vw,64px);border-top:1px solid var(--line)}
.close__art{position:absolute;inset:0;z-index:-2}
.close__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.95) 0,rgba(5,5,5,.5) 40%,rgba(5,5,5,.1) 75%),linear-gradient(to bottom,rgba(5,5,5,.45),rgba(5,5,5,0) 25%)}
.close__body{display:grid;gap:8px;justify-items:start}
.close__line{font:400 clamp(2.4rem,6.4vw,6.4rem)/.94 var(--display);text-transform:uppercase;letter-spacing:.01em;max-width:19ch;text-shadow:var(--glow),0 6px 30px rgba(0,0,0,.8);text-wrap:balance}

/* --- footer --- */
.ftr{border-top:1px solid var(--line);padding:clamp(40px,6vw,72px) var(--gut) 20px;background:var(--bg)}
.ftr__in{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px}
.ftr__logo{width:min(100%,300px);height:auto}
.ftr__tag{font:400 clamp(1.5rem,2.4vw,2.2rem)/.95 var(--display);text-transform:uppercase;max-width:16ch;margin:20px 0 14px}
.ftr__k{height:1.1em;width:auto;display:inline-block;vertical-align:-.25em;fill:var(--pur-t);margin-left:.4em}
.ftr__h{color:var(--fg-3);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ftr li a{font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);text-decoration:none;display:inline-flex;align-items:center;gap:.6em;min-height:32px}
.ftr li a span{color:var(--pur-t);min-width:2em}
/* the official list's handles and addresses in their own case, as in the menu's foot */
.ftr__links .ftr__addr{color:inherit;text-transform:none}
@media (hover:hover){.ftr li a:hover{color:var(--fg)}}
.ftr__links svg{width:1.1em;height:1.1em;fill:currentColor}
.ftr__warn{margin-top:18px;color:var(--fg-3);font-size:.85rem;max-width:42ch;display:flex;gap:10px;align-items:flex-start}
.ftr__warn svg{width:18px;height:18px;flex:none;color:var(--red-t);margin-top:2px}
.ftr__risk{margin-top:10px}
/* the footer's last row: the line in the middle stays in the middle, and on a narrow screen the three stack, centred */
.ftr__bot{margin-top:40px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:12px}
.ftr__bot>.ftr__hint{text-align:center}
.ftr__bot>:last-child{text-align:right}
@media (max-width:900px){.ftr__bot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}.ftr__bot>:last-child{text-align:center}}
.ftr__bot .cap{color:var(--fg-3)}
@media (max-width:820px){.ftr__in{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
@media (max-width:480px){.ftr__in{grid-template-columns:1fr}}

/* --- page head --- */
.phead{position:relative;min-height:min(84svh,840px);display:grid;align-items:end;isolation:isolate;overflow:hidden;padding:var(--hdr) var(--gut) clamp(28px,5vw,56px)}
.phead--short{min-height:min(62svh,600px)}
.phead__art{position:absolute;inset:0;z-index:-2}
.phead__art img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,.5) 36%,rgba(5,5,5,.05) 68%),linear-gradient(to bottom,rgba(5,5,5,.55),rgba(5,5,5,0) 28%)}
.phead__meta{position:absolute;right:var(--gut);top:calc(var(--hdr) + 14px);color:var(--fg);text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.phead__body{display:grid;gap:14px;justify-items:start}
.phead__body h1{max-width:12ch;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.phead__body .lead{text-shadow:0 2px 14px rgba(0,0,0,.7);max-width:56ch}
.phead + .sec{padding-top:clamp(32px,5vw,64px)}

/* --- lookbook page: twelve full-bleed stills --- */
:root:has(.page-lore){scroll-snap-type:y proximity}
.reel{position:relative}
.reel__ch{position:relative;height:100svh;min-height:560px;display:grid;align-items:end;overflow:hidden;isolation:isolate;scroll-snap-align:start;border-top:1px solid var(--line);padding:0 var(--gut) clamp(32px,7vh,80px)}
.reel__art{position:absolute;inset:0;z-index:-2}
.reel__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.reel__ch::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,.4) 34%,rgba(5,5,5,0) 62%)}
.reel__meta{position:absolute;right:var(--gut);top:calc(var(--hdr) + 14px);color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.reel__cap{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,36px);align-items:start}
.reel-arm .reel__cap{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reel-arm .reel__ch.is-in .reel__cap{opacity:1;transform:none}
.reel__num{font:400 clamp(3rem,8vw,7.5rem)/.85 var(--display);color:var(--pur-t);text-shadow:0 6px 30px rgba(0,0,0,.8)}
.reel__cap p{font:400 clamp(1.7rem,4vw,4rem)/.98 var(--display);text-transform:uppercase;letter-spacing:.01em;max-width:24ch;text-shadow:0 6px 30px rgba(0,0,0,.8);text-wrap:balance}
.reel__pos{position:fixed;right:var(--gut);bottom:20px;z-index:6;color:var(--fg-3);opacity:0;transition:opacity .3s;pointer-events:none}
.reel__pos b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.page-lore.reel-on .reel__pos{opacity:1}
@media (max-width:700px){.reel__ch{height:80svh;min-height:480px}}

/* --- prose --- */
.prose{display:grid;gap:16px}
.prose p{color:var(--fg-2);font-size:1.02rem;line-height:1.6;max-width:62ch}
.prose__mark{font:400 clamp(1.4rem,2vw,1.9rem)/1.05 var(--display)!important;text-transform:uppercase;color:var(--fg)!important;padding-left:16px;border-left:1px solid var(--pur);text-shadow:var(--glow)}

/* --- dossiers --- */
.dossier__art{min-height:74vh}
.dossier--contain .dossier__art{background:radial-gradient(60% 50% at 50% 62%,#17131F,var(--bg-2))}
.dossier--contain .dossier__art img{object-fit:contain;object-position:50% 90%;padding:8% 12% 0}
.dossier--red .dossier__art img{filter:sepia(1) hue-rotate(-32deg) saturate(3.2) brightness(.8) contrast(1.15)}
.dossier__k{position:absolute;right:16px;top:16px;width:36px;height:auto}
.dossier__k svg{fill:var(--pur-t)}
.dossier--red .dossier__k svg{fill:var(--red-t)}
.dossier__role{color:var(--pur-t)}
.dossier--red .dossier__role{color:var(--red-t)}
.dossier__line{font:400 clamp(1.3rem,1.9vw,1.8rem)/1.05 var(--display);text-transform:uppercase;padding-left:16px;border-left:1px solid var(--pur);text-shadow:var(--glow)}
.dossier--red .dossier__line{border-color:var(--red)}
@media (max-width:900px){.dossier__art{min-height:0;aspect-ratio:4/5}.dossier--contain .dossier__art img{padding:6% 16% 0}}

/* --- panels & fields (tools) --- */
.panel{padding:20px;border:1px solid var(--line);background:var(--bg-2);display:grid;gap:18px;align-content:start}
.panel>p:not(.cap){color:var(--fg-2);font-size:.95rem}
.field{display:grid;gap:8px}
.field__l{display:flex;justify-content:space-between;color:var(--fg-3)}
.field__l output{color:var(--fg);font-variant-numeric:tabular-nums}
textarea{width:100%;padding:12px;background:var(--bg);border:1px solid var(--line-2);color:var(--fg);resize:vertical;font-size:1rem;line-height:1.45}
textarea:focus{outline:2px solid var(--pur);outline-offset:0;border-color:transparent}
input[type=range]{width:100%;accent-color:var(--pur);height:28px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button,.tabs button{min-height:40px;padding:0 1em;border:1px solid var(--line-2);background:transparent;font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);transition:background-color .2s,color .2s,border-color .2s}
@media (hover:hover){.seg button:hover,.tabs button:hover{color:var(--fg);border-color:var(--fg)}}
.seg button[aria-pressed="true"],.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tabs{display:flex;gap:6px;margin-bottom:24px}
.tabs button{min-height:44px;padding:0 1.4em}

/* --- quiz --- */
.quiz{display:grid;grid-template-columns:1.2fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quiz__box{position:relative;padding:clamp(28px,4vw,56px) var(--gut);min-height:520px;border-right:1px solid var(--line);display:grid;align-content:start}
.quiz__bar{position:absolute;left:0;top:0;right:0;height:2px;background:var(--line)}
.quiz__bar i{display:block;height:100%;background:var(--pur);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease)}
.q{display:none}
.q.on{display:grid;gap:22px}
.q h2{font-size:clamp(2rem,4.4vw,4.4rem);max-width:16ch}
.q__opts{display:grid;gap:0;border-top:1px solid var(--line)}
.opt{display:grid;grid-template-columns:2em 1fr;gap:14px;align-items:baseline;text-align:left;padding:16px 0 16px 16px;border:0;border-bottom:1px solid var(--line);background:none;font:400 1.05rem/1.4 var(--grot);color:var(--fg-2);transition:color .2s;text-wrap:pretty}
.opt .cap{color:var(--fg)}
@media (hover:hover){.opt:hover{color:var(--fg)}}
@media (hover:hover){.opt:hover .cap{color:var(--pur-t)}}
.result{display:none;gap:12px}
.result.on{display:grid}
.result canvas{width:100%;height:auto;border:1px solid var(--line)}
.result__pre{margin-top:8px}
.result h2{font-size:clamp(2rem,4vw,4rem)}
.result__text{color:var(--fg-2);max-width:52ch}
.quiz__art{position:relative;overflow:hidden;background:var(--bg-2)}
.quiz__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;transition:opacity .4s}
@media (max-width:900px){.quiz{grid-template-columns:1fr}.quiz__box{border-right:0;border-bottom:1px solid var(--line);min-height:0}.quiz__art{aspect-ratio:4/3}}

/* --- forge --- */
.forge{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);gap:clamp(16px,3vw,32px);align-items:start}
.forge__stage{border:1px solid var(--line);background:var(--bg-2)}
.forge__stage canvas{width:100%;height:auto}
.forge__pick{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.forge__pick button{padding:0;border:0;background:var(--bg);aspect-ratio:16/10;overflow:hidden;opacity:.6;transition:opacity .2s}
.forge__pick button img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){.forge__pick button:hover{opacity:1}}
.forge__pick button[aria-pressed="true"]{opacity:1;outline:2px solid var(--pur);outline-offset:-2px}
@media (max-width:900px){.forge{grid-template-columns:1fr}}

/* --- arena --- */
.arena{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:clamp(16px,3vw,32px);align-items:start}
.arena__stage{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);isolation:isolate}
.arena__stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:filter .5s}
.arena__stage.hot>img{filter:brightness(.5) saturate(1.3)}
.arena__stage::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(224,58,30,0),rgba(224,58,30,0));opacity:0;transition:opacity .6s;pointer-events:none}
.arena__stage.hot::after{background:radial-gradient(70% 70% at 50% 50%,rgba(224,58,30,0),rgba(224,58,30,.35));opacity:1}
.arena__stage.shake{animation:shake .35s linear}
@keyframes shake{0%,100%{transform:none}25%{transform:translate(-5px,3px)}50%{transform:translate(4px,-3px)}75%{transform:translate(-3px,-2px)}}
.hold{position:absolute;left:50%;top:50%;width:min(46%,220px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;background:rgba(5,5,5,.62);border-radius:50%;display:grid;place-items:center;color:var(--fg);z-index:2;touch-action:none;-webkit-user-select:none;user-select:none}
.hold svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hold circle{fill:none;stroke-width:2.2}
.hold__track{stroke:rgba(242,240,235,.18)}
.hold__ring{stroke:var(--pur);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .1s linear}
.hold span{font:400 clamp(1.3rem,2.2vw,1.9rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;text-align:center;display:grid;gap:6px}
.hold span small{font:500 10px/1.3 var(--grot);letter-spacing:.1em;color:var(--fg-2)}
.hold.on{background:rgba(224,58,30,.28)}
.fud{position:absolute;z-index:3;max-width:240px;padding:10px 14px;background:rgba(5,5,5,.92);border-left:2px solid var(--red);color:var(--fg);font-size:.9rem;animation:fudIn .25s var(--ease-out),fudOut .4s ease 1.4s forwards;pointer-events:none}
.fud b{display:block;color:var(--red-t);font:500 10px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
@keyframes fudIn{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
@keyframes fudOut{to{opacity:0}}
.candle{position:absolute;bottom:0;width:8px;height:var(--h,50%);background:var(--red);opacity:.7;z-index:1;animation:candle .5s var(--ease-out);transform-origin:bottom}
@keyframes candle{from{transform:scaleY(0)}}
.arena__stats{margin:0 0 6px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.arena__stats div{display:grid;gap:4px}
.arena__stats dt{color:var(--fg-3)}
.arena__stats dd{margin:0;font:400 1.8rem/1 var(--display);font-variant-numeric:tabular-nums}
.arena__result{display:none;gap:10px}
.arena__result.on{display:grid}
.arena__result canvas{width:100%;height:auto;border:1px solid var(--line)}
.arena__result h2{font-size:1.8rem;margin-top:8px}
.arena__result p{color:var(--fg-2)}
@media (max-width:900px){.arena{grid-template-columns:minmax(0,1fr)}}

/* --- steps --- */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.step{display:grid;grid-template-columns:clamp(64px,10vw,140px) 1fr;gap:16px 20px;padding:22px 0 26px;border-bottom:1px solid var(--line);align-items:start}
.step__n{font:400 clamp(2.6rem,6vw,5.4rem)/.85 var(--display);color:var(--pur-t)}
.step h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:8px}
.step p{color:var(--fg-2);font-size:.98rem;max-width:60ch}

/* --- easter egg --- */
.fearlay{position:fixed;inset:0;z-index:60;background:var(--red);color:#fff;display:grid;place-items:center;text-align:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.fearlay.on{opacity:1;visibility:visible}
.fearlay b{display:block;font:400 clamp(4rem,20vw,16rem)/.85 var(--display);letter-spacing:.02em}
.fearlay p{margin-top:16px;max-width:36ch;font-size:1.1rem}

/* --- view transitions & motion --- */

::view-transition-old(root){animation:vtOut .25s ease both}
::view-transition-new(root){animation:vtIn .35s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .hero__art img,.js .hero__body>*,.js .hero__cap,.rv-arm .rv,.reel-arm .reel__cap{opacity:1;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  :root:has(.page-lore){scroll-snap-type:none}
}


/* ==========================================================================
   THE OPENING — one orchestrated moment, transform and clip only
   ========================================================================== */
.hero__bar{position:absolute;left:0;right:0;height:18vh;background:var(--bg);z-index:0;pointer-events:none;transform:scaleY(0);will-change:transform}
.hero__bar--t{top:0;transform-origin:top}
.hero__bar--b{bottom:0;transform-origin:bottom}
.js .hero__bar{transform:scaleY(1)}
.js.is-ready .hero__bar{transform:scaleY(0);transition:transform 1.15s cubic-bezier(.7,0,.2,1) .15s}
/* the headline: three lines, each masked and lifted into place */
.hero__h{display:grid;gap:0}
.hero__h span{display:block;overflow:hidden}
.hero__h i{display:block;font-style:normal}
/* lowered only with .js (Q4): no JavaScript, no hidden headline */
.js .hero__h i{transform:translateY(105%)}
.js.is-ready .hero__h i{transform:none;transition:transform .95s cubic-bezier(.16,1,.3,1)}
.js.is-ready .hero__h span:nth-child(1) i{transition-delay:.95s}
.js.is-ready .hero__h span:nth-child(2) i{transition-delay:1.06s}
.js.is-ready .hero__h span:nth-child(3) i{transition-delay:1.17s}
/* the h1 itself no longer fades — its lines do the work */
.js .hero__body>h1{opacity:1;transform:none}

/* ==========================================================================
   LOOKBOOK — the hovered still is the only one lit
   ========================================================================== */
.lookbook .cell{position:relative;transition:opacity .45s var(--ease-out)}
@media (hover:hover){
  .lookbook:hover .cell{opacity:.32}
  .lookbook .cell:hover,.lookbook .cell:focus-visible{opacity:1}
  .lookbook .cell:hover img{transform:scale(1.04)}
}
.lookbook .cell__cap span:last-child{position:relative;display:inline}
.lookbook .cell::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--pur);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.lookbook .cell:focus-visible::after{transform:scaleX(1)}@media (hover:hover){.lookbook .cell:hover::after{transform:scaleX(1)}}

/* ==========================================================================
   CALENDAR — the empty half now carries the phase
   ========================================================================== */
.cal--rich .cal__item{min-height:56vh}
.cal--rich .cal__body{position:relative;align-content:end;padding-bottom:clamp(32px,5vw,72px);overflow:hidden}
.cal__ghost{display:none}
.cal--rich .cal__ghost{display:block;position:absolute;right:var(--gut);top:clamp(18px,3vw,40px);font:400 clamp(6rem,13vw,15rem)/.78 var(--display);color:transparent;-webkit-text-stroke:1px rgba(157,107,255,.22);pointer-events:none;user-select:none}
.cal--rich .cal__item--live .cal__ghost{-webkit-text-stroke-color:rgba(157,107,255,.42)}
.cal--rich .cal__body>*:not(.cal__ghost){position:relative;z-index:1}
.cal--rich .cal__row{border-top:1px solid var(--line);padding-top:14px}
@media (max-width:900px){.cal--rich .cal__ghost{display:none}.cal--rich .cal__body{align-content:start;padding-top:clamp(24px,5vw,40px)}}

@media (prefers-reduced-motion:reduce){
  .js .hero__bar{transform:scaleY(0)}
  .js .hero__h i{transform:none}
  .lookbook:hover .cell{opacity:1}
}


/* the drawn plan: hovering a pin lights its own landmark */
@media (hover:hover){
  .wmap__cam:has(.pin:hover) .wm-ic{opacity:.42}
  .wmap__cam:has(.pin[data-loc="mirror"]:hover) #ic-mirror,.wmap__cam:has(.pin[data-loc="mirror"]:focus-visible) #ic-mirror{opacity:1}
  .wmap__cam:has(.pin[data-loc="mark"]:hover) #ic-mark,.wmap__cam:has(.pin[data-loc="mark"]:focus-visible) #ic-mark{opacity:1}
  .wmap__cam:has(.pin[data-loc="den"]:hover) #ic-den,.wmap__cam:has(.pin[data-loc="den"]:focus-visible) #ic-den{opacity:1}
  .wmap__cam:has(.pin[data-loc="dojo"]:hover) #ic-dojo,.wmap__cam:has(.pin[data-loc="dojo"]:focus-visible) #ic-dojo{opacity:1}
  .wmap__cam:has(.pin[data-loc="market"]:hover) #ic-market,.wmap__cam:has(.pin[data-loc="market"]:focus-visible) #ic-market{opacity:1}
  .wmap__cam:has(.pin[data-loc="vault"]:hover) #ic-vault,.wmap__cam:has(.pin[data-loc="vault"]:focus-visible) #ic-vault{opacity:1}
  .wmap__cam:has(.pin[data-loc="road"]:hover) #ic-road,.wmap__cam:has(.pin[data-loc="road"]:focus-visible) #ic-road{opacity:1}
  .wmap__cam:has(.pin[data-loc="gate"]:hover) #ic-gate,.wmap__cam:has(.pin[data-loc="gate"]:focus-visible) #ic-gate{opacity:1}
  .wmap__cam:has(.pin[data-loc="arena"]:hover) #ic-arena,.wmap__cam:has(.pin[data-loc="arena"]:focus-visible) #ic-arena{opacity:1}
}


/* ==========================================================================
   THE MANIFESTO — a long read paced like a film.
   Each movement pins its still to the screen (position:sticky, no JS, no
   parallax) and the words scroll across it inside a dark scrim.
   ========================================================================== */
.mf-open .hero__h{font-size:clamp(3.6rem,11vw,11.5rem);max-width:none}
.mf-open__body{padding:0 var(--gut) clamp(48px,9vw,120px);display:grid;gap:18px;justify-items:start}
.mf-open .lead{color:var(--fg);font-size:clamp(1.1rem,1.5vw,1.4rem)}

.mf-ch{position:relative;background:var(--bg)}
.mf-ch__art{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0}
.mf-ch__art img{width:100%;height:100%;object-fit:cover}
.mf-ch__art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.96) 0,rgba(5,5,5,.88) 36%,rgba(5,5,5,.32) 68%,rgba(5,5,5,.12) 100%),linear-gradient(to top,rgba(5,5,5,.9),rgba(5,5,5,0) 34%),linear-gradient(to bottom,rgba(5,5,5,.75),rgba(5,5,5,0) 26%)}
.mf-ch--r .mf-ch__art::after{background:linear-gradient(270deg,rgba(5,5,5,.96) 0,rgba(5,5,5,.88) 36%,rgba(5,5,5,.32) 68%,rgba(5,5,5,.12) 100%),linear-gradient(to top,rgba(5,5,5,.9),rgba(5,5,5,0) 34%),linear-gradient(to bottom,rgba(5,5,5,.75),rgba(5,5,5,0) 26%)}
.mf-ch--fear .mf-ch__art::after{background:linear-gradient(90deg,rgba(5,5,5,.96) 0,rgba(5,5,5,.86) 36%,rgba(40,6,2,.3) 68%,rgba(60,8,2,.2) 100%),radial-gradient(ellipse at 72% 48%,rgba(224,58,30,.26),rgba(224,58,30,0) 58%),linear-gradient(to top,rgba(5,5,5,.9),rgba(5,5,5,0) 34%),linear-gradient(to bottom,rgba(5,5,5,.75),rgba(5,5,5,0) 26%)}
.mf-ch__body{position:relative;z-index:1;margin-top:-100svh;padding:32svh var(--gut) 46svh}
.mf-col{max-width:34rem}
.mf-ch--r .mf-col{margin-left:auto}
.mf-col h2{margin:.2em 0 .45em;font-size:clamp(3rem,7.4vw,7rem)}
.mf-col p{font-size:clamp(1.08rem,1.28vw,1.28rem);line-height:1.74;color:#DAD6CF;margin-top:1.05em;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.mf-col .mf-ch__n{margin-top:0;font-size:11px;line-height:1.5;text-shadow:none}
.mf-pull{margin:1.5em 0 .4em;padding-top:.8em;border-top:1px solid var(--line-2)}
.mf-col .mf-pull p{margin:0;font:400 clamp(2rem,3.8vw,3.5rem)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg);text-wrap:balance}
.mf-ch--fear .mf-pull{border-top-color:rgba(240,101,74,.5)}

.mf-plate{min-height:100svh;display:grid;place-items:center;text-align:center;padding:18svh var(--gut);background:radial-gradient(ellipse at 50% 40%,#150E24 0,var(--bg) 64%)}
.mf-plate .mf-col{margin-inline:auto;max-width:38rem}
.mf-plate__k{display:block;width:min(74vw,640px);height:auto;margin:0 auto clamp(24px,5vw,56px);fill:var(--fg)}
.mf-plate .mf-pull{border-top-color:rgba(157,107,255,.4)}

.mf-close{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden;padding:0 var(--gut) clamp(48px,9vw,120px)}
.mf-close__art{position:absolute;inset:0;z-index:-2}
.mf-close__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.mf-close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.96) 0,rgba(5,5,5,.6) 42%,rgba(5,5,5,.15) 75%),linear-gradient(to bottom,rgba(5,5,5,.7),rgba(5,5,5,0) 30%)}
.mf-close__body{display:grid;gap:18px;justify-items:start}
.mf-close__k{width:clamp(88px,9vw,132px);height:auto;fill:var(--pur-t)}
.mf-close h2{max-width:15ch;font-size:clamp(3rem,7.6vw,7.6rem)}
.mf-close .lead{color:var(--fg)}

@media (max-width:760px){
  .mf-ch .mf-ch__art::after{background:linear-gradient(rgba(5,5,5,.8),rgba(5,5,5,.8))}
  .mf-ch--fear .mf-ch__art::after{background:linear-gradient(rgba(12,4,3,.82),rgba(12,4,3,.82))}
  .mf-ch__body{padding:24svh var(--gut) 32svh}
  .mf-ch--r .mf-col{margin-left:0}
}

/* the hero render is bright at the top: a deeper band so the menu stays readable */
[data-hero]::before{background:linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,.5) 28%,rgba(5,5,5,0) 55%),linear-gradient(to bottom,rgba(5,5,5,.72),rgba(5,5,5,0) 20%)}

/* ==========================================================================
   DEVICE PASS — touch targets never under 44px, phone text never under 12px
   ========================================================================== */
.brand{min-height:44px}
@media (pointer:coarse){
  .ftr li a{min-height:44px}
  .tlink{display:inline-block;padding:14px 0;margin:-14px 0}
  .seg button,.tabs button{min-height:44px}
  input[type=range]{height:44px}
}
@media (max-width:760px), (max-height:500px){
  .cap,.btn,.tlink,.hdr__cta,.ftr li a,.seg button,.tabs button,.field__l,.drawer nav a span,.mf-col .mf-ch__n,.wmap__strip .cap{font-size:12px}
  .pin i{font-size:11px}
  .hold span small{font-size:11px}
}

/* device pass, round two */
.hdr.is-solid{background:var(--bg)}
picture.cv{display:contents}
@media (hover:none){.cast__alt{display:none}}
@media (max-width:760px), (max-height:500px){.facts dt,.ledger dt,.ca b,.cell__cap,.pin i,.hold span small{font-size:12px}}
@media (max-width:760px), (max-height:500px){.links b,.fud b{font-size:12px}}

/* the hero render is visible from the first paint (letterbox bars, settle and headline still do the opening),
   so the browser counts the render itself as the largest paint instead of the late caption */
.js .hero__art img{opacity:1}
/* the caption under the headline is there from the first paint; the headline lines and the bars still make the opening */
.js .hero__body>p{opacity:1;transform:none}
/* touch screens wide enough to show the full menu (tablets in landscape): finger-sized header links */
@media (pointer:coarse){.nav a{padding:17px .8em}.hdr__cta{padding:17px 0}.wmap__strip button{min-height:44px}}
/* home hero on phones: the portrait crop holds Ronin and Hachi at the top and fades out below them */
@media (max-aspect-ratio:3/5){[data-hero] .hero__art img{object-position:50% 0}}

/* ==========================================================================
   CRITIQUE PASS (2026-09-14)
   ========================================================================== */
/* hero: the client's full hero — headline, subheadline, both actions */
.hero__body h1{font-size:clamp(2.9rem,12vw,7rem)}
.hero__lead{font-size:clamp(1.02rem,1.35vw,1.3rem);line-height:1.45;color:var(--fg);max-width:42ch;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.hero__actions{margin-top:2px}
.js .hero__body>.hero__actions{opacity:1;transform:none}
.hero__sub a{color:inherit;text-decoration-color:rgba(242,240,235,.45)}
.titlecard__links{display:grid;gap:14px;justify-items:start}
.titlecard__sub{max-width:46ch}
/* hierarchy: the hero outranks every section; section intros read as sentences, not labels */
.sec__head h2{font-size:clamp(2.2rem,4.6vw,4.6rem)}
.split__body h2{font-size:clamp(2.2rem,4.6vw,4.6rem)}
.dossier .split__body h2{font-size:clamp(3rem,7vw,6.6rem)}
.sec__meta .cap{font:400 clamp(.98rem,1.05vw,1.06rem)/1.55 var(--grot);letter-spacing:0;text-transform:none;color:var(--fg-2);max-width:46ch}
.lookbook .cell__cap span:last-child{text-transform:none;letter-spacing:0;font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.45;color:var(--fg)}
/* cast: Hachi in a scene, framed on him */
.dossier--hachi .dossier__art img{object-position:14% 40%}
/* the world on phones keeps its title and instruction, in flow under the map */
@media (max-width:820px), (max-height:500px), (max-aspect-ratio:1/1) and (max-width:1366px){
  .wmap--full .wmap__hud{display:grid;position:static;max-width:none;padding:20px var(--gut) 10px;pointer-events:auto}
  .wmap--full .wmap__hud h1{font-size:clamp(2.6rem,13vw,4rem)}
}
/* forge on phones: the card stays in view while you type */
@media (max-width:900px) and (max-aspect-ratio:1/1){.forge__main{position:sticky;top:var(--hdr);z-index:2;background:var(--bg);padding-bottom:10px}}
/* arena on phones: a taller stage, so the fear lands above and below the ring instead of on it */
@media (max-width:600px){.arena__stage{aspect-ratio:4/5}.fud{max-width:62%;font-size:.85rem}}
/* forge: the Ronin line button lives with the text it fills; on phones fields scroll clear of the pinned preview */
.field__btn{justify-self:start;margin-top:8px}
@media (max-width:900px) and (max-aspect-ratio:1/1){.forge .panel .field{scroll-margin-top:300px}}
/* the map picture is centred exactly as the pin maths assumes, on every screen shape */
.wmap__cam>img{object-position:50% 50%}

/* ==========================================================================
   POLISH PASS (2026-09-14)
   ========================================================================== */
/* 17 — manifesto on phones: each chapter opens on its still; the words carry their own dark backing */
@media (max-width:760px){
  .mf-ch .mf-ch__art::after{background:linear-gradient(to bottom,rgba(5,5,5,.92) 0,rgba(5,5,5,.3) 18%,rgba(5,5,5,.08) 34%,rgba(5,5,5,.55) 70%,rgba(5,5,5,.85) 100%)}
  .mf-ch--fear .mf-ch__art::after{background:linear-gradient(to bottom,rgba(12,4,3,.92) 0,rgba(12,4,3,.3) 18%,rgba(60,8,2,.14) 34%,rgba(12,4,3,.6) 70%,rgba(12,4,3,.88) 100%)}
  .mf-ch__body{padding:64svh var(--gut) 40svh}
  .mf-ch .mf-col{margin:0 calc(-1 * var(--gut));padding:72px var(--gut);background:linear-gradient(to bottom,rgba(5,5,5,0) 0,rgba(5,5,5,.8) 72px,rgba(5,5,5,.8) calc(100% - 72px),rgba(5,5,5,0) 100%)}
  .mf-ch--fear .mf-col{background:linear-gradient(to bottom,rgba(10,4,3,0) 0,rgba(10,4,3,.82) 72px,rgba(10,4,3,.82) calc(100% - 72px),rgba(10,4,3,0) 100%)}
}
.mf-act{margin-top:28px}
/* 19/20 — The Drop: a jump bar, portraits two-up, cards two-up on phones */
.page-vault .sec{content-visibility:visible!important}
.jump{position:sticky;top:var(--hdr);z-index:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jump a{display:flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;min-width:0;overflow:hidden;white-space:nowrap;padding:0 8px;background:rgba(5,5,5,.96);color:var(--fg);text-decoration:none;font:500 12px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;transition:background-color .2s}
.jump a b{color:var(--pur-t);font-weight:500}
@media (hover:hover){.jump a:hover{background:#151221}}
#portraits,#cards,#wallpapers{scroll-margin-top:60px}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.drop--cards{grid-template-columns:1fr 1fr}.drop--cards .prod__row .cap--pur{display:none}}
/* 22 — gold marks the record (kintsugi); purple stays the action colour */
.dossier__line,.prose__mark{border-left-color:var(--gold)}
.mf-pull{border-top-color:rgba(217,180,90,.45)}
.mf-plate .mf-pull{border-top-color:rgba(217,180,90,.55)}
.cal__item--live .cal__state{color:var(--gold)}
.titlecard__in{border-top-color:rgba(217,180,90,.3)}
/* 23 — a section holding only one bordered band adds no padding of its own; neighbours share one rule */
.sec:has(> .split:only-child),.sec:has(> .speak-band:only-child){padding:0}
.sec:has(> .split:only-child) + .sec:has(> .split:only-child) > .split{border-top:0}
/* 25 — the 404 fills the screen */
.close--full{min-height:100svh;padding-top:calc(var(--hdr) + 40px)}
.close--full .close__body{gap:14px}
/* world page: the new render has a bright sky; a short dark band keeps the menu readable, and the explainer reads as a sentence */
.wmap--full::after{content:"";position:absolute;inset:0 0 auto;height:120px;z-index:1;pointer-events:none;background:linear-gradient(rgba(5,5,5,.78),rgba(5,5,5,0))}
.wmap__hud .cap{font:400 clamp(.98rem,1.1vw,1.08rem)/1.5 var(--grot);letter-spacing:0;text-transform:none}
/* grids draw their hairlines per cell, so a cell that has not faded in yet leaves black, never a grey slab */
.grid,.cast,.cal{background:transparent}
.grid>*,.cast>*,.cal>*{box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}

/* final check: visually hidden headings keep the outline in order; headings focused by script show no ring */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[tabindex="-1"]:focus{outline:none}

/* ==========================================================================
   QA PASS (2026-09-15)
   ========================================================================== */
/* --- home, top --- */
.home #chapters{padding-bottom:0}
@media (min-width:761px) and (max-width:900px){.lookbook{grid-template-columns:repeat(3,1fr)}}
/* computers: the phone map query's complement; 1366/1365, as no whole-pixel window up to 1366px wide lies between */
@media (min-width:821px) and (min-height:501px) and (min-aspect-ratio:1366/1365), (min-width:1367px) and (min-height:501px){.wmap__strip button{flex:1 1 0;min-width:120px;width:auto}.wmap__strip img{aspect-ratio:auto;height:clamp(75px,6.9vw,99px)}}
.facts div{align-content:start}
@media (min-width:1200px){.facts{grid-template-columns:repeat(3,minmax(0,1fr)) auto}}
.hero__body h1{font-size:clamp(2.4rem,12vw,7rem)}
@media (max-width:600px){.hero__actions .btn{flex:1 1 100%;justify-content:center}}
.cast__cell--red .cast__alt{filter:sepia(1) hue-rotate(-32deg) saturate(3.2) brightness(.8) contrast(1.15);object-position:66% 50%}
.cast__cap{padding:0 var(--gut) 16px}.cast__n{left:var(--gut)}.cast__k{right:var(--gut)}
.three{padding:0;column-gap:1px}.three>div{padding:14px var(--gut) 0}
/* keyboard focus on image cells: a full ring drawn inside the cell */
.cast__cell::before,.lookbook .cell::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s}
.cast__cell:focus-visible,.lookbook .cell:focus-visible{outline:none}
.cast__cell:focus-visible::before,.lookbook .cell:focus-visible::before{box-shadow:inset 0 0 0 2px var(--pur)}
/* --- home, bottom --- */
@media (min-width:901px){.sec--pack{min-height:clamp(88vh,72vw,1100px)}}
@media (max-width:380px){.speak--big .speak__q{min-height:7.4em}}
[data-copy-quote]{min-width:7.5em;justify-content:center}
@media (max-width:420px){.speak .actions{display:grid;grid-template-columns:1fr 1fr}.speak .actions [data-say]{grid-column:1/-1}.speak .actions .btn{justify-content:center}}
@media (min-width:1001px){.cal:not(.cal--rich) .cal__body h3{min-height:2em;display:flex;align-items:flex-end}}
.sec:has(> .split:only-child) + .sec--pack{border-top:0}
main>.sec:last-child>.split:only-child{border-bottom:0}
.sec:has(> .grid:last-child, > .cal:last-child):has(+ .sec > .speak-band:only-child, + .sec > .split:only-child){padding-bottom:0}
.sec:has(> .grid:last-child, > .cal:last-child) + .sec > .speak-band:only-child,.sec:has(> .grid:last-child, > .cal:last-child) + .sec > .split:only-child{border-top:0}
.grid--4 .prod__row{gap:6px 10px;padding-inline:10px}.grid--4 .prod__row .cap{letter-spacing:.06em}
.drawer__foot .cap{text-wrap:balance}
/* --- manifesto --- */
@media (max-width:760px){.mf-open .mf-br{display:none}}
.mf-pull .mf-s{display:inline-block}
.mf-ch .mf-col .mf-ch__n{color:var(--pur-t)}
.mf-ch--fear .mf-col .mf-ch__n{color:var(--red-t)}
@media (min-width:761px) and (min-aspect-ratio:1/1){#ronin .mf-ch__art img{object-position:0% 50%}}
@media (max-aspect-ratio:3/5){.mf-close__art img{object-position:22% 40%}}
@media (max-width:760px){
  .mf-close::before{background:linear-gradient(to top,rgba(5,5,5,.96) 0,rgba(5,5,5,.6) 42%,rgba(5,5,5,.15) 75%),linear-gradient(to bottom,rgba(5,5,5,.9),rgba(5,5,5,0) 30%)}
  .mf-act .btn,.mf-close .actions .btn{flex:1 1 100%;justify-content:center}
}
/* portrait tablets read the manifesto like phones: the still first, then the words on their own backing */
@media (min-width:761px) and (max-aspect-ratio:4/5){
  .mf-ch .mf-ch__art::after{background:linear-gradient(to bottom,rgba(5,5,5,.92) 0,rgba(5,5,5,.3) 18%,rgba(5,5,5,.08) 34%,rgba(5,5,5,.55) 70%,rgba(5,5,5,.85) 100%)}
  .mf-ch--fear .mf-ch__art::after{background:linear-gradient(to bottom,rgba(12,4,3,.92) 0,rgba(12,4,3,.3) 18%,rgba(60,8,2,.14) 34%,rgba(12,4,3,.6) 70%,rgba(12,4,3,.88) 100%)}
  .mf-ch__body{padding:64svh var(--gut) 40svh}
  .mf-ch .mf-col{max-width:none;margin:0 calc(-1 * var(--gut));padding:72px var(--gut);background:linear-gradient(to bottom,rgba(5,5,5,0) 0,rgba(5,5,5,.8) 72px,rgba(5,5,5,.8) calc(100% - 72px),rgba(5,5,5,0) 100%)}
  .mf-ch--fear .mf-col{background:linear-gradient(to bottom,rgba(10,4,3,0) 0,rgba(10,4,3,.82) 72px,rgba(10,4,3,.82) calc(100% - 72px),rgba(10,4,3,0) 100%)}
  .mf-ch .mf-col>*{max-width:40rem}
}
/* --- lookbook and cast --- */
.dossier__line{text-wrap:balance}
.prose .prose__mark{max-width:36.25rem;text-wrap:balance}
.mf-open .lead,.mf-close .lead{text-wrap:balance}
.sec:has(> .split:only-child) + .close{border-top:0}
.dossier__k{padding:6px;margin:-6px;background:radial-gradient(closest-side,rgba(5,5,5,.6),rgba(5,5,5,0))}
@media (min-width:901px){.split--flip .dossier__k{right:auto;left:16px}}

/* ==========================================================================
   QA PASS 2 (2026-09-15)
   ========================================================================== */
/* --- shape quiz: every question shares one cell, so the box never jumps --- */
.quiz__box>.q,.quiz__box>.result{grid-area:1/1}
.q{display:grid;gap:22px;visibility:hidden}
.q.on{visibility:visible}
.quiz__box:has(.result.on)>.q{display:none}
.q h2{max-width:22ch}
.sec:has(> .quiz:only-child){padding-bottom:0}
.sec:has(> .quiz:only-child) + .close{border-top:0}
.quiz__art img[style*="contain"]{padding:clamp(20px,4vw,56px)}
@media (max-width:600px){.result .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.result .actions [data-restart]{grid-column:1/-1}.result .actions .btn{justify-content:center;padding-inline:.6em}}
/* --- forge --- */
.seg button{min-height:44px}
/* --- arena --- */
@media (min-width:901px){.arena>.panel{align-self:stretch}}
.wrap.arena{width:auto;margin-inline:var(--gut)}
.hold span{max-width:76%}
.hold span small{text-wrap:balance}
@media (max-width:420px){.close .actions .btn{flex:1 1 100%;justify-content:center}}
/* --- the drop --- */
.jump{top:calc(var(--hdr) - 1px)}
.jump a{background:var(--bg)}
@media (max-width:900px){.drop--cards>.prod:last-child:nth-child(odd){grid-column:1/-1}}
.page-vault .prod{grid-template-rows:auto 1fr auto}
.page-vault .prod__img + .prod__row{padding-top:12px}
@media (max-width:600px){.page-vault .drop--tall .prod__row:not(:last-child),.page-vault .drop--cards .prod__row:not(:last-child){flex-direction:column;gap:2px}.page-vault .drop--tall .prod__row .cap--pur{display:none}}
@media (max-width:380px){.page-vault .drop--wide .prod__row .cap{letter-spacing:.06em}}
/* --- the world --- */
.wmap--pillar .wmap__cam>img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.wmap.zoomed .pin,.wmap.zoomed .wmap__hud,.wmap.zoomed .wmap__legend{visibility:hidden}
.pin,.wmap__hud,.wmap__legend{transition:opacity .3s,visibility .3s}
.pin b{background:rgba(5,5,5,.6);padding:3px .5em}
.wmap__strip button:focus-visible{outline-offset:-2px}
.wmap__strip button:focus-visible img{opacity:1}
.wmap__strip button:focus-visible .cap{color:var(--pur-t)}
@media (max-width:820px), (max-height:500px), (max-aspect-ratio:1/1) and (max-width:1366px){.wmap__strip button{width:146px}.wmap--full .wmap__hud h1{font-size:clamp(3rem,10vw,4rem)}}
@media (min-width:821px) and (max-width:1199px) and (min-height:501px) and (min-aspect-ratio:1366/1365){.wmap__strip button{min-width:0}.wmap__strip .cap{padding-inline:6px;letter-spacing:.06em}.wmap__strip .cap b{display:block;margin:0}}
@media (min-width:821px) and (max-width:899px) and (min-height:501px) and (min-aspect-ratio:1366/1365){.wmap__strip .cap{font-size:10px;letter-spacing:.04em}}
@media (min-width:821px) and (min-height:501px) and (min-aspect-ratio:1366/1365), (min-width:1367px) and (min-height:501px){.arrive__meta{line-height:44px}}
@media (max-aspect-ratio:1/1){#arr-den img{object-position:36% 30%}}

/* ==========================================================================
   QA PASS 3 (2026-09-15): terms pages
   ========================================================================== */
.cal.cal--rich{grid-template-columns:1fr}
@media (max-width:900px){.cal--rich .cal__item{min-height:0}}
@media (min-width:901px){.cal--rich .cal__body{padding-top:calc(clamp(18px,3vw,40px) + clamp(6rem,13vw,15rem) * .78 + 16px)}}
.wrap:has(> .steps),.wrap:has(> .partners),.wrap.pack--page{width:auto;margin-inline:var(--gut)}
.links b{min-width:6.9em}
.sec:has(> .split:only-child) + .sec > .sec__head:first-child,.sec--flush:has(> .cal:last-child) + .sec > .sec__head:first-child{border-top:0}
.phead__body .lead{text-wrap:balance}
.phead + .sec--flush{padding-top:0}

/* ==========================================================================
   QA PASS 3b (2026-09-15): type and spacing
   ========================================================================== */
@media (max-width:380px){.close__line{font-size:2rem}}
.ftr__brand .cap,.facts dd,.cal:not(.cal--rich) .cal__body p{text-wrap:balance}
@media (min-width:761px){.steps+.mt,.mt+.mt-s{margin-left:calc(clamp(64px,10vw,140px) + 20px);max-width:46rem}}
.ca p,.warn p{max-width:62ch}
@media (max-width:760px){.lookbook .cell__cap{padding-inline:var(--gut)}}
@media (max-width:600px){.cal__body,.grid--4 .prod__row{padding-inline:var(--gut)}}
.jump a:focus-visible{outline-offset:-3px}
.sec__meta .cap{text-wrap:balance}
/* sticky bars paint opaque, so page content scrolling beneath never bleeds through the 1px gaps */
.jump{background:#262625;border-color:#262625}
.hdr.is-solid{background:var(--bg)}
/* page heads: a firmer top scrim keeps the nav legible over bright art */
.phead::before{background:linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,.5) 36%,rgba(5,5,5,.05) 68%),linear-gradient(to bottom,rgba(5,5,5,.72),rgba(5,5,5,.35) 110px,rgba(5,5,5,0) 220px)}

/* ==========================================================================
   QA PASS 3c (2026-09-15): motion and edges
   ========================================================================== */
/* landscape phones: the opening headline starts below the header and the corner captions */
.hero{padding-top:calc(var(--hdr) + 64px)}
/* world page: title and caption stay clear of the pins on laptop heights */
@media (min-width:821px) and (min-height:501px) and (min-aspect-ratio:1366/1365), (min-width:1367px) and (min-height:501px){.wmap--full .wmap__hud{max-width:min(420px,calc(33vw - var(--gut) - 48px));bottom:calc(clamp(75px,6.9vw,99px) + 52px)}.wmap--full .wmap__hud h1{font-size:clamp(2.4rem,min(6vw,9vh),6rem)}}
/* open menu: the header turns solid so scrolled links never run under a see-through bar */
.hdr:has(~ .drawer[data-open="true"]){background:var(--bg);border-color:var(--line)}
/* product tiles: a full keyboard ring drawn inside the tile */
.prod{position:relative}
.prod::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s}
.prod:focus-visible{outline:none}
.prod:focus-visible::before{box-shadow:inset 0 0 0 2px var(--pur)}
/* forge: selected is white, keyboard focus is purple */
.forge__pick button[aria-pressed="true"]{outline:0;box-shadow:inset 0 0 0 2px var(--fg)}
.forge__pick button:focus-visible{outline:2px solid var(--pur);outline-offset:-2px}
/* phones: portrait crops put bright sky at the top, so the scrim runs deeper and the caption carries a halo */
@media (max-width:760px){.phead::before{background:linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,.5) 36%,rgba(5,5,5,.05) 68%),linear-gradient(to bottom,rgba(5,5,5,.72) 0,rgba(5,5,5,.45) 20%,rgba(5,5,5,0) 36%)}}
.phead__meta{text-shadow:0 0 14px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9)}

/* ==========================================================================
   STEP NAV (2026-09-15): previous / next on the map, the lookbook and the manifesto
   ========================================================================== */
.stepnav{display:flex;align-items:center;gap:6px}
.stepnav__b{background:transparent;border-color:var(--line-2);padding:0 1.1em;min-width:44px;justify-content:center}
.stepnav__b:disabled{opacity:.3;cursor:default}
@media (hover:hover){.stepnav__b:not(:disabled):hover{border-color:var(--fg);background:rgba(242,240,235,.06)}}
.stepnav__pos{min-width:4.8em;text-align:center;color:var(--fg-3);font-variant-numeric:tabular-nums;text-shadow:none}
.stepnav__pos b{color:var(--fg);font-weight:500}
/* lookbook and manifesto: one dark plate, bottom right, only while you are inside the chapters */
.reel__nav,.mf-nav{position:fixed;right:var(--gut);bottom:max(16px,env(safe-area-inset-bottom));z-index:30;padding:6px;background:rgba(5,5,5,.9);border:1px solid var(--line);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.page-lore.reel-on .reel__nav,.mf-nav-on .mf-nav{opacity:1;visibility:visible}
@media (max-width:760px){.reel__ch{padding-bottom:calc(max(16px,env(safe-area-inset-bottom)) + 76px)}}
/* map: the pair sits bottom right inside the place you arrived at */
.arrive__nav{position:absolute;right:var(--gut);bottom:clamp(24px,5vh,56px);z-index:2}
.arrive__nav .stepnav__b{background:rgba(5,5,5,.7)}
@media (max-width:1100px){.arrive__body{bottom:calc(clamp(24px,5vh,56px) + 64px)}}
@media (max-height:500px){.arrive__nav{top:calc(var(--hdr) + 12px);bottom:auto}.arrive__meta,.wmap--full .arrive__meta{display:none}.arrive__body{bottom:clamp(20px,5vh,56px)}}
/* the plates paint solid so text scrolling beneath never shows through; phones get one full-width bar */
.reel__nav,.mf-nav{background:var(--bg)}
@media (max-width:1024px){
  .reel__nav,.mf-nav{left:0;right:0;bottom:0;justify-content:space-between;gap:8px;padding:8px var(--gut) max(8px,env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line)}
  .reel__nav .stepnav__b,.mf-nav .stepnav__b{flex:0 0 auto}
  .reel__ch{padding-bottom:calc(max(8px,env(safe-area-inset-bottom)) + 84px)}
}

/* ==========================================================================
   DELLA RESPIRA (2026-09-16): every heading in the client's chosen serif.
   It runs about 1.5x wider than the old condensed face, so display sizes step down
   and the caps get a touch of air.
   ========================================================================== */
h1,h2,h3,h4{line-height:1;letter-spacing:.02em}
.hero__body h1{font-size:clamp(2.3rem,5.4vw,6.4rem);max-width:none}
.hero__h span{padding-bottom:.04em}
.mf-open .hero__h{font-size:clamp(2.6rem,7.4vw,8rem)}
.pack h2{font-size:clamp(2.8rem,10.5vw,11rem);line-height:.95}
.mf-col h2{font-size:clamp(2.4rem,4.6vw,4.8rem);line-height:1}
.mf-col .mf-pull p{font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1.08}
.close__line{font-size:clamp(2rem,4.8vw,4.8rem);line-height:1.02;max-width:22ch}
.reel__cap p{font-size:clamp(1.4rem,3vw,3rem);line-height:1.06;max-width:28ch}
.phead__body h1{max-width:none}
.ftr__tag{line-height:1.05}.speak__q{line-height:1.1}.drawer nav a{letter-spacing:.02em}
.close__line{max-width:26ch}
.close__line{max-width:min(13.5em,100%)}
.close__line{font-size:clamp(1.55rem,4vw,4rem);max-width:min(15em,100%);letter-spacing:.01em}
@media (max-width:380px){.close__line{font-size:1.38rem}}
.cal:not(.cal--rich) .cal__body h3{font-size:clamp(1.2rem,1.55vw,1.55rem)}
@media (max-width:600px){.hero:not(.mf-open) .hero__body h1{font-size:min(2.3rem,8.1vw)}}
.mf-open .hero__h{font-size:clamp(2.6rem,6vw,6.6rem)}
@media (max-width:600px){.hero:not(.mf-open) .hero__body h1{font-size:min(2.3rem,7.4vw)}}
.speak--big .speak__q{min-height:8.9em}
.speak--big .speak__q{max-width:min(21em,100%)}
/* wide screens: the side bars carry a soft, dark echo of the map instead of flat black (14 KB, only loads when bars exist) */
.wmap--pillar{background:radial-gradient(ellipse 60% 90% at 50% 45%,rgba(5,5,5,0) 30%,rgba(5,5,5,.55) 100%),linear-gradient(to bottom,rgba(5,5,5,.35),rgba(5,5,5,0) 30%,rgba(5,5,5,0) 70%,rgba(5,5,5,.6)),url(../img/world-map-amb.webp) center/cover #050505}
.wmap--pillar .wmap__cam{background:transparent}
/* wide screens: the map continues into mirrored, softened wings instead of black bars (they zoom with the camera) */
.wmap--pillar{background:#050505}
.wmap__wing{position:absolute;display:none;pointer-events:none;background:center/100% 100% no-repeat}
.wmap--pillar .wmap__wing{display:block}
.wmap__wing--l{background-image:url(../img/world-map-wing-l.webp)}
.wmap__wing--r{background-image:url(../img/world-map-wing-r.webp)}
.wmap--pillar .wmap__cam>img{-webkit-mask-image:none;mask-image:none}

/* ==========================================================================
   ARENA v2 (2026-09-16): cut the FUD
   ========================================================================== */
.arena__stage{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.arena__stage>img{filter:none;opacity:.55;transition:opacity .4s}
.arena__stage.playing>img{opacity:.42}
.arena__stage.hot>img{opacity:.34}
.ag__hud{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;gap:clamp(14px,3vw,32px);align-items:flex-end;padding:12px clamp(12px,2vw,20px) 10px;background:linear-gradient(rgba(5,5,5,.9),rgba(5,5,5,.6) 70%,rgba(5,5,5,0))}
.ag__stat{display:grid;gap:2px}
.ag__stat .cap{color:var(--fg-3)}
.ag__stat b{font:400 clamp(1.3rem,2.2vw,1.9rem)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.ag__stat--fear{margin-left:auto;justify-items:end}
.ag__pips{display:flex;gap:4px;height:clamp(1.3rem,2.2vw,1.9rem);align-items:center}
.ag__pips i{width:clamp(12px,1.6vw,18px);height:8px;background:rgba(242,240,235,.14);transition:background-color .2s}
.ag__pips i.on{background:var(--red-t)}
.ag__time{position:absolute;left:0;right:0;top:0;z-index:5;height:3px;background:rgba(242,240,235,.08)}
.ag__time i{display:block;height:100%;background:var(--pur);transform-origin:left;transform:scaleX(1)}
.ag__field{position:absolute;inset:0;z-index:3;overflow:hidden}
@keyframes agCut{0%{clip-path:inset(0);opacity:1;filter:brightness(1.6)}40%{opacity:1}100%{clip-path:inset(0 0 0 100%);opacity:0;filter:brightness(1)}}
@keyframes agWrong{0%{background:var(--pur)}100%{opacity:0}}
@keyframes agGone{to{opacity:0}}
.ag__slash{position:absolute;z-index:6;width:clamp(140px,22vw,260px);height:3px;margin:-1.5px 0 0 calc(clamp(140px,22vw,260px) / -2);background:linear-gradient(90deg,rgba(242,240,235,0),#fff 45%,var(--pur-t) 60%,rgba(157,107,255,0));pointer-events:none;transform:rotate(var(--r)) scaleX(0);animation:agSlash .42s cubic-bezier(.2,.8,.2,1) forwards;box-shadow:0 0 12px rgba(157,107,255,.8)}
@keyframes agSlash{0%{transform:rotate(var(--r)) scaleX(0);opacity:1}45%{transform:rotate(var(--r)) scaleX(1);opacity:1}100%{transform:rotate(var(--r)) scaleX(1);opacity:0}}
.ag__pop{position:absolute;z-index:7;transform:translate(-50%,-50%);font:400 clamp(1.2rem,2vw,1.6rem)/1 var(--display);color:var(--pur-t);text-shadow:0 2px 10px rgba(0,0,0,.9);pointer-events:none;white-space:nowrap;animation:agPop .8s ease-out forwards}
.ag__pop--bad{color:var(--red-t);font:500 12px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase}
@keyframes agPop{0%{opacity:0;transform:translate(-50%,-30%)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%)}}
.ag__intro{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:clamp(56px,8%,72px) clamp(16px,4vw,48px) clamp(16px,4vw,40px);background:radial-gradient(ellipse at 50% 50%,rgba(5,5,5,.72),rgba(5,5,5,.92))}
.ag__intro[hidden]{display:none!important}
.ag__introbox{display:grid;gap:14px;justify-items:center;text-align:center;max-width:34rem}
.ag__introbox .cap{color:var(--red-t)}
.ag__introbox h2{font-size:clamp(2rem,4.4vw,3.8rem)}
.ag__rules{list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:left}
.ag__rules li{display:grid;grid-template-columns:5.6rem 1fr;gap:12px;align-items:baseline;color:var(--fg-2);font-size:.95rem;line-height:1.4}
.ag__tag{font:500 10px/1.4 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);border-left:3px solid var(--fg-3);padding-left:8px}
.ag__tag--fud{border-color:var(--red-t);color:var(--red-t)}
.ag__tag--truth{border-color:var(--pur);color:var(--pur-t)}
.ag__verdict{color:var(--fg-2);font-size:1rem}
.ag__verdict b{font:400 clamp(2.4rem,5vw,4rem)/1 var(--display);color:var(--fg);display:block;margin-bottom:6px}
.ag__go{margin-top:6px;min-width:12rem;justify-content:center}
.arena__stage.shake{animation:shake .3s linear}
@media (max-width:600px){
  .arena__stage{aspect-ratio:3/4}
  .ag__rules li{grid-template-columns:4.8rem 1fr;font-size:.9rem}
  .ag__tag{font-size:12px;letter-spacing:.1em}
}
@media (max-width:600px) and (max-height:700px){.arena__stage{aspect-ratio:4/5}}
/* arena leaderboard */
.board{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.board__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.board__title{font-size:clamp(1.4rem,2vw,1.8rem)}
.board__head .cap{color:var(--fg-3)}
.board__list{list-style:none;margin:0;padding:0;display:grid;counter-reset:none;border-top:1px solid var(--line)}
.board__item{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.board__rank{font:500 12px/1 var(--grot);letter-spacing:.1em;color:var(--fg-3);font-variant-numeric:tabular-nums}
.board__item:nth-child(-n+3) .board__rank{color:var(--gold,#D9B45A)}
.board__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.board__held{margin-left:8px;font:500 10px/1 var(--grot);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--pur-t)}
.board__score{font:400 1.25rem/1 var(--display);font-variant-numeric:tabular-nums}
.board__item--me{background:linear-gradient(90deg,rgba(157,107,255,.16),rgba(157,107,255,0));box-shadow:inset 2px 0 0 var(--pur)}
.board__item--me .board__rank{padding-left:8px}
.board__empty{padding:12px 0;color:var(--fg-3);font-size:.95rem;border-bottom:1px solid var(--line)}
.board__form{display:grid;gap:8px;margin-top:6px}
.board__form[hidden]{display:none}
.board__row{display:flex;gap:8px}
.board__row input{flex:1 1 auto;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font:400 1rem var(--grot)}
.board__row input:focus{outline:2px solid var(--pur);outline-offset:0;border-color:transparent}
.board__row .btn{flex:0 0 auto}
.board__msg{min-height:1.2em;font-size:.9rem;color:var(--red-t)}
.board__msg:empty{min-height:0}
@media (max-width:380px){.board__row{flex-wrap:wrap}.board__row .btn{flex:1 1 100%;justify-content:center}}

/* ==========================================================================
   ARENA v3 (2026-09-17): six trials
   ========================================================================== */
.phead + .sec:has(.trials){padding-bottom:clamp(16px,2.4vw,28px)}
.sec--arena{padding-top:0}
.trials{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.trial{position:relative;display:grid;align-content:end;min-height:clamp(150px,13vw,210px);padding:0;border:0;background:var(--bg);color:var(--fg);text-align:left;cursor:var(--cur-hot,pointer);overflow:hidden;isolation:isolate}
.trial__art{position:absolute;inset:0;z-index:-2}
.trial__art img{width:100%;height:100%;object-fit:cover;opacity:.38;transition:opacity .3s,transform .5s var(--ease-out)}
.trial::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.95) 10%,rgba(5,5,5,.35) 70%,rgba(5,5,5,.2))}
.trial__k{position:absolute;top:10px;right:12px;font:400 clamp(1.6rem,2.4vw,2.2rem)/1 serif;color:rgba(242,240,235,.3);transition:color .3s}
.trial__body{display:grid;gap:4px;padding:12px 14px 14px}
.trial__body .cap{color:var(--fg-3)}
.trial__body b{font:400 clamp(1.05rem,1.4vw,1.35rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em}
.trial__best{font-size:.8rem;color:var(--fg-3)}
@media (hover:hover){.trial:hover .trial__art img{opacity:.6;transform:scale(1.04)}}
.trial[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--pur)}
.trial[aria-selected="true"] .trial__art img{opacity:.72}
.trial[aria-selected="true"] .trial__k{color:var(--pur-t)}
.trial[aria-selected="true"] .trial__best{color:var(--fg-2)}
.trial:focus-visible{outline:2px solid var(--pur);outline-offset:-2px}
@media (max-width:1000px){.trials{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.trials{grid-template-columns:repeat(2,minmax(0,1fr))}.trial{min-height:120px}.trial__body{padding:10px 12px 12px}}

/* field layers */
.ag__pips:empty{display:none}
.ag__stat--fear .cap:empty{display:none}

/* Fear or Fact */
.ff{position:absolute;inset:56px 0 0;display:grid;grid-template-rows:1fr auto;gap:16px;padding:clamp(12px,3vw,32px)}

/* Hachi's Flask */
.fl__hachi{position:absolute;left:0;bottom:0;width:clamp(84px,14%,150px);pointer-events:none;will-change:transform;transition:transform .08s linear}
.fl__hachi img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.8))}
.fl__hachi.gulp img{animation:flGulp .25s ease-out}
@keyframes flGulp{50%{transform:translateY(-6px) scale(1.04)}}
.fl__it{position:absolute;top:0;display:grid;place-items:center;width:clamp(38px,5vw,52px);aspect-ratio:1;border-radius:50%;font:400 clamp(1.1rem,1.8vw,1.5rem)/1 serif;font-style:normal;color:#fff;pointer-events:none;will-change:transform}
.fl__it--luck{background:radial-gradient(circle at 35% 30%,#b99bff,#6b3fd6 70%);box-shadow:0 0 18px rgba(157,107,255,.8)}
.fl__it--gold{background:radial-gradient(circle at 35% 30%,#ffe7a3,#b88a2a 70%);box-shadow:0 0 22px rgba(217,180,90,.9);color:#2a1a00}
.fl__it--fud{border-radius:4px;width:auto;padding:0 8px;height:clamp(30px,4vw,38px);aspect-ratio:auto;background:#6d1208;border:1px solid var(--red-t);font:600 12px/1 var(--grot);letter-spacing:.12em;color:#ffd9d2;box-shadow:0 0 16px rgba(224,58,30,.6)}

/* Kintsugi */
.ks{position:absolute;inset:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr 1fr;gap:clamp(8px,1.4vw,14px);padding:clamp(12px,3vw,28px)}
.ks__say{grid-column:1/-1;margin:0;text-align:center;font:400 clamp(1.1rem,2vw,1.6rem)/1.2 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--fg)}
.ks__p{position:relative;display:grid;place-items:center;border:1px solid rgba(217,180,90,.25);background:rgba(8,6,4,.82);color:rgba(242,240,235,.55);cursor:var(--cur-hot,pointer);touch-action:manipulation;transition:background-color .15s,color .15s,box-shadow .15s}
.ks__p b{font:400 clamp(2rem,5vw,3.6rem)/1 serif}
.ks__p span{position:absolute;right:8px;bottom:6px;font:500 10px/1 var(--grot);letter-spacing:.1em;color:var(--fg-3)}
.ks__p:disabled{cursor:default}
.ks__p.lit{background:rgba(217,180,90,.3);color:#ffe7a3;box-shadow:inset 0 0 0 2px #d9b45a,0 0 30px rgba(217,180,90,.45)}
.ks__p.ok{background:rgba(157,107,255,.26);color:#fff}
.ks__p.bad{background:rgba(224,58,30,.4);color:#fff}
.ks__p:focus-visible{outline:2px solid var(--pur);outline-offset:-2px}

/* Iaido */
.ia{position:absolute;inset:56px 0 0;display:grid;place-content:center;justify-items:center;gap:12px;border:0;background:rgba(5,5,5,.55);color:var(--fg);cursor:var(--cur-hot,pointer);touch-action:manipulation;transition:background-color .08s}
.ia__k{font:400 clamp(5rem,14vw,10rem)/1 serif;color:rgba(242,240,235,.35)}
.ia__say{font:500 13px/1.3 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.ia.go{background:rgba(224,58,30,.55)}
.ia.go .ia__k{color:#fff}
.ia.hit{background:rgba(60,40,110,.55)}
.ia.hit .ia__k{color:var(--pur-t)}
.ia.foul .ia__k{color:var(--red-t)}
.ia:focus-visible{outline:2px solid var(--pur);outline-offset:-4px}

/* Rally the Pack */
.pk{position:absolute;inset:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(6px,1.2vw,12px);padding:clamp(10px,2.4vw,24px)}
.pk__w{position:relative;overflow:hidden;background:linear-gradient(rgba(12,9,20,.86),rgba(5,5,5,.92));border:1px solid rgba(217,180,90,.2);box-shadow:inset 0 0 24px rgba(0,0,0,.8)}
.pk__w::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(217,180,90,.14) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px) 100%)}
.pk__b{position:absolute;inset:0;display:grid;place-items:end center;padding:0;border:0;background:none;color:var(--fg);cursor:var(--cur-hot,pointer);touch-action:manipulation;transform:translateY(100%);transition:transform .14s var(--ease-out)}
.pk__b.up{transform:none}
.pk__b img{width:auto;height:88%;max-width:88%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(157,107,255,.6))}
.pk__b span{position:absolute;left:0;right:0;top:6px;font:500 10px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.pk__b--wolf{background:radial-gradient(ellipse at 50% 90%,rgba(157,107,255,.35),transparent 70%)}
.pk__b--wolf span{color:var(--pur-t)}
.pk__b--shadow{place-items:center;background:radial-gradient(ellipse at 50% 60%,rgba(224,58,30,.45),rgba(20,2,0,.9) 75%)}
.pk__b--shadow b{font:400 clamp(2.4rem,6vw,4.4rem)/1 serif;color:#ff9a86;text-shadow:0 0 18px rgba(224,58,30,.9)}
.pk__b--shadow span{color:var(--red-t)}
.pk__b:focus-visible{outline:2px solid var(--pur);outline-offset:-2px}
@media (max-width:600px){.ks,.ia,.pk,.ff{inset:52px 0 0}}
.sec.sec--arena,.sec:has(.trials){content-visibility:visible!important}
.arena__stage.playing[data-game="flask"],.arena__stage.playing[data-game="flask"] *{touch-action:none}

/* ==========================================================================
   ARENA v4 (2026-09-17): ten trials
   ========================================================================== */
/* fifteen trials: five by three on a computer */
.trials{grid-template-columns:repeat(5,minmax(0,1fr))}
.trial{min-height:clamp(128px,10.5vw,176px)}
@media (max-width:1000px){.trials{grid-template-columns:repeat(5,minmax(0,1fr))}.trial__body .cap{display:none}.trial__best{display:none}}
@media (max-width:760px){.trials{grid-template-columns:repeat(2,minmax(0,1fr))}.trial{min-height:92px}.trial__body{padding:8px 10px 10px;gap:2px}.trial__body b{font-size:1rem}.trial__k{top:6px;right:8px;font-size:1.3rem}.trial__best{display:block;font-size:.8rem}}
.ag__cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.arena__stage.playing{touch-action:none}
.ag__tip{position:absolute;left:0;right:0;bottom:22%;margin:0;text-align:center;font:500 13px/1 var(--grot);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);pointer-events:none;animation:agTip 1.2s ease-in-out infinite alternate}
@keyframes agTip{from{opacity:.4}to{opacity:1}}

/* Parry */
.pr{position:absolute;inset:56px 0 0;display:grid;grid-template-rows:1fr auto;padding:clamp(10px,2vw,20px)}
.pr__ring{position:relative;display:grid;place-items:center}
.pr__me{font:400 clamp(4rem,11vw,7rem)/1 serif;color:rgba(242,240,235,.85);text-shadow:0 0 30px rgba(157,107,255,.6)}
.pr__foe{position:absolute;display:grid;place-items:center;width:clamp(70px,12vw,110px);aspect-ratio:1;opacity:.12;transition:opacity .12s}
.pr__foe--l{left:4%;top:50%;transform:translateY(-50%)}
.pr__foe--r{right:4%;top:50%;transform:translateY(-50%)}
.pr__foe--u{top:0;left:50%;transform:translateX(-50%)}
.pr__foe b{position:relative;font:400 clamp(2rem,5vw,3.2rem)/1 serif;color:#ff9a86}
.pr__foe i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--red-t);transform:scale(1)}
.pr__foe.on{opacity:1}
.pr__foe.on b{text-shadow:0 0 20px rgba(224,58,30,.9)}
.pr__foe.block{opacity:1;animation:prBlock .35s ease-out forwards}
.pr__foe.block b{color:var(--pur-t)}
.pr__foe.hit{opacity:1;animation:prHit .45s ease-out forwards}
@keyframes prBlock{to{opacity:.12}}
@keyframes prHit{0%{background:rgba(224,58,30,.45)}100%{opacity:.12;background:transparent}}
.pr__btns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pr__b{display:flex;align-items:center;justify-content:center;gap:10px;min-height:clamp(54px,8vw,72px);border:1px solid var(--line-2);background:rgba(5,5,5,.86);color:var(--fg);font:500 12px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;cursor:var(--cur-hot,pointer);touch-action:manipulation}
.pr__b span{font-size:1.2rem;opacity:.6}
.pr__b.on{animation:prPress .25s ease-out}
@keyframes prPress{0%{background:rgba(157,107,255,.45)}100%{background:rgba(5,5,5,.86)}}

/* Mirror Lake */
.mr{position:absolute;inset:56px 0 0;display:grid;grid-template-rows:1fr auto auto;gap:12px;padding:clamp(10px,2.4vw,24px)}
.mr__lake{position:relative;display:grid;place-items:center;align-content:center;gap:6px;background:linear-gradient(rgba(40,30,80,.25),rgba(20,30,60,.55));border-top:1px solid rgba(201,176,255,.35);overflow:hidden}
.mr__lake .cap{color:var(--fg-3)}
.mr__g{display:block;font:400 clamp(3.4rem,10vw,6.4rem)/1 serif;color:rgba(201,210,255,.8);transform:scaleY(-1);filter:blur(.6px);animation:mrRipple 2.4s ease-in-out infinite}
@keyframes mrRipple{50%{transform:scaleY(-1) skewX(4deg) translateX(3px)}}
.mr__q{margin:0;text-align:center;font:500 12px/1.3 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.mr__opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mr__o{position:relative;display:grid;place-items:center;min-height:clamp(64px,10vw,96px);border:1px solid var(--line-2);background:rgba(5,5,5,.86);color:var(--fg);cursor:var(--cur-hot,pointer);touch-action:manipulation}
.mr__o b{font:400 clamp(2rem,5vw,3rem)/1 serif;display:block}
.mr__o span{position:absolute;right:6px;bottom:5px;font:500 10px/1 var(--grot);color:var(--fg-3)}
.mr__mx{transform:scaleX(-1)}
.mr__rot{transform:rotate(180deg) scaleX(-1)}
@media (hover:hover){.mr__o:hover{border-color:var(--fg)}}
.mr__o.ok{background:rgba(157,107,255,.3);border-color:var(--pur)}
.mr__o.no{background:rgba(224,58,30,.35);border-color:var(--red-t)}
@media (max-width:600px){.pr,.mr{inset:52px 0 0}}

/* ==========================================================================
   ARENA v5 (2026-09-17): sprite art and layered worlds
   ========================================================================== */
.ag__bg,.ag__fgc{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ag__bg{z-index:0}
.ag__fgc{z-index:6}
.ag__field>:not(.ag__bg):not(.ag__fgc){z-index:2}
.fl__it{background:center/contain no-repeat;border:0;border-radius:0;box-shadow:none;width:clamp(44px,6vw,62px);height:clamp(44px,6vw,62px);font-size:0;padding:0}
.fl__it--luck{background-image:url(../img/arena/orb-luck.webp)}
.fl__it--gold{background-image:url(../img/arena/orb-gold.webp)}
.fl__it--fud{background-image:url(../img/arena/orb-fear.webp);width:clamp(46px,6.2vw,64px);height:clamp(52px,7vw,72px)}
.fl__hachi{width:clamp(90px,15%,160px)}
.pk__w{background:linear-gradient(rgba(20,14,34,.72),rgba(8,5,14,.86))}
.pk__b--shadow img{width:auto;height:84%;max-width:84%;object-fit:contain;filter:drop-shadow(0 0 16px rgba(224,58,30,.9))}
.ag__tip{z-index:7;text-shadow:0 2px 8px rgba(0,0,0,.9)}
/* the stage always fits the screen height, on every screen shape */
.arena__stage{max-height:calc(100svh - var(--hdr) - 24px)}
@media (min-width:901px){.arena{align-items:start}.arena .panel{max-height:none}}
/* arena audit fixes (2026-09-17) */
@media (max-height:500px){
  .ag__intro{padding:10px 16px;overflow-y:auto;place-items:safe center}
  .ag__introbox{gap:6px}
  .ag__introbox h2{font-size:1.8rem}
  .ag__rules{gap:4px}
  .ag__rules li{font-size:.8rem;line-height:1.3}
  .ag__verdict b{font-size:2rem;margin-bottom:2px}
  .ag__go{margin-top:2px}
}
.ag__tip--top{bottom:auto;top:26%}
@media (min-width:901px){.arena__result.on{order:-1}}
.ag__see{display:inline-flex;align-items:center;margin-top:2px;padding:0 10px;color:var(--pur-t);font:500 12px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;min-height:44px}
/* phone audit fixes (2026-09-17) */
@media (max-width:420px){.close .actions{justify-self:stretch}}
.close{grid-template-columns:minmax(0,1fr)}
.reel__ch::before{background:linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,.4) 34%,rgba(5,5,5,0) 62%),linear-gradient(to bottom,rgba(5,5,5,.6),rgba(5,5,5,0) 22%)}
@media (max-height:500px){.hero:not(.mf-open){padding-top:calc(var(--hdr) + 16px)}.hero:not(.mf-open) .hero__body h1{font-size:clamp(1.8rem,7vh,2.4rem)}.hero:not(.mf-open) .hero__body{gap:10px}}
.drawer nav a{padding:.18em 0}
.forge__pick button{min-height:44px}
@media (max-width:420px){.jump a{letter-spacing:.06em;padding:0 6px}}
@media (max-width:420px){.close__line{font-size:1.38rem}}
/* desktop audit fixes (2026-09-17) */
@media (max-width:820px), (max-height:500px), (max-aspect-ratio:1/1) and (max-width:1366px){.wmap:has(.arrive.on){z-index:39}}
@media (min-width:1025px){.mf-ch--r .mf-col{margin-right:204px}}
@media (min-width:761px) and (max-width:1024px){.mf-ch__body{padding-bottom:calc(46svh + 70px)}}
@media (max-width:1024px){.reel__ch{padding-bottom:calc(max(8px,env(safe-area-inset-bottom)) + 84px)}}
.page-lore.reel-end .reel__nav{opacity:0;visibility:hidden}
.mf-plate{min-height:0;padding:14svh var(--gut) 10svh}
.reel__cap p{text-wrap:pretty}
.mf-close h2{text-wrap:balance}
.ag__rules li{text-wrap:pretty}
.cal--rich .cal__body h3{font-size:clamp(2.4rem,3.6vw,5rem)}
.board__head .cap{white-space:nowrap}
.phead:has(+ .sec .trials){min-height:min(46svh,480px)}
@media (max-width:1000px) and (min-width:601px){.cal:not(.cal--rich) .cal__item:last-child:nth-child(odd){grid-column:1/-1;grid-template-rows:none;grid-template-columns:1fr 1fr}.cal:not(.cal--rich) .cal__item:last-child:nth-child(odd) .cal__art{aspect-ratio:auto;min-height:220px}}
.cast__cell{max-height:calc(100svh - var(--hdr) - 24px)}
.drop--tall .prod__img{max-height:calc(100svh - var(--hdr) - 120px)}
.phead:has(img[src*="orderbook"])::before{background:linear-gradient(90deg,rgba(5,5,5,.9) 0,rgba(5,5,5,.7) 45%,rgba(5,5,5,.25) 80%),linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,.5) 36%,rgba(5,5,5,.1) 68%),linear-gradient(to bottom,rgba(5,5,5,.72),rgba(5,5,5,0) 220px)}
/* landscape phones: corner captions give way to the headline; lookbook chapters fit the short screen */
@media (max-height:500px){.hero:not(.mf-open) .hero__cap{display:none}.reel__ch{min-height:0;height:100svh}}
/* game-feel audit fixes (2026-09-17) */
.ag__hud{pointer-events:none}
.fl__hachi{transition:none}
/* functional audit fixes (2026-09-17) */
[data-board],[data-result]{scroll-margin-top:12px}
.ag__go:disabled{opacity:.55;cursor:default}
/* today's challenge (Last Ronin): a second way in under Begin, gold, with the rule's character */
.ag__chal{display:flex;align-items:center;gap:12px;width:100%;max-width:24rem;padding:9px 14px 9px 10px;border:1px solid rgba(217,180,90,.5);background:rgba(217,180,90,.08);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:background .2s var(--ease-out),border-color .2s var(--ease-out)}
.ag__chal[hidden]{display:none}
/* today's missions (Last Ronin), under the arena's stats: three lines, each with its bar and its 萬 */
/* a board row that opens to its build (Last Ronin) */
.board__item--b{cursor:pointer}
.board__item--b:hover .board__name{color:#ffe39a}
.board__item--b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.board__build{grid-column:1/-1;padding:10px 0 4px 3.4em;display:grid;gap:8px}
.board__build[hidden]{display:none}
.board__bh{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:.85rem;color:var(--fg-2)}
.board__bh b{color:var(--fg);font-weight:600;font-size:.95rem}
.board__bw{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.board__bw li{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border:1px solid rgba(224,83,59,.5);font-size:.8rem;color:var(--fg)}
.board__bw i{font-style:normal;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;min-width:1.5em;white-space:nowrap;text-align:center;color:#ffb0a4}
.board__bw--evo{border-color:rgba(217,180,90,.7)!important}.board__bw--evo i{color:#ffe39a}
.board__bw--leg,.board__bw--myth{border-color:#fff0c0!important;background:rgba(217,180,90,.14)}.board__bw--leg i,.board__bw--myth i{color:#fff0c0}
.board__bp{margin:0;font-size:.8rem;color:var(--fg-2)}
.lrm{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.lrm[hidden]{display:none}
/* the weekend's feast (Last Ronin): over the missions, red-gold while it runs, quiet when it is next */
.lrw{display:flex;gap:10px;align-items:center;margin:0 0 14px;padding:8px 12px 8px 8px;border:1px solid var(--line);color:var(--fg-2);font-size:.82rem;line-height:1.35}
.lrw[hidden]{display:none}
.lrw i{flex:none;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);font-style:normal;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-size:1.1rem;color:var(--fg-2)}
.lrw span{display:grid;gap:2px}
.lrw b{color:var(--fg);font-weight:600;font-size:.9rem}
.lrw--on{border-color:rgba(224,83,59,.6);background:rgba(224,58,30,.1);color:var(--fg)}
.lrw--on i{border-color:#ff8a7a;color:#ffb0a4}
.lrw--on b{color:#ffb0a4}
.lrm__h{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:.85rem;color:var(--fg-2)}
.lrm__h b{color:#ffe39a;font-weight:600;font-size:.95rem}
.lrm__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lrm__it{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:baseline}
.lrm__t{color:var(--fg);font-size:.95rem;line-height:1.35}
.lrm__n{color:var(--fg-2);font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.lrm__bar{grid-column:1/-1;display:block;height:3px;background:rgba(242,240,235,.1);overflow:hidden}
.lrm__bar b{display:block;height:100%;background:var(--gold);transform-origin:left}
.lrm__it--done .lrm__t{color:var(--fg-2)}
.lrm__it--done .lrm__n{color:#ffe39a}
.ag__chal:hover{background:rgba(217,180,90,.15);border-color:var(--gold)}
.ag__chal:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ag__chal-k{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--gold);color:#ffe39a;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-size:1.35rem;line-height:1}
.ag__chal-t{display:grid;gap:2px;min-width:0}
.ag__chal-t b{color:#ffe39a;font-size:.95rem;font-weight:600}
.ag__chal-t span{color:var(--fg-2);font-size:.85rem;line-height:1.35}
/* ============================ WOW PASS (2026-09-17) ====================== */
/* the gate: pages close and open around the link you pressed */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:gateOut .3s cubic-bezier(.6,0,.2,1) both}
  ::view-transition-new(root){animation:gateIn .44s cubic-bezier(.16,1,.3,1) both}
  @keyframes gateOut{to{clip-path:circle(0% at var(--vtx,50%) var(--vty,50%))}}
  @keyframes gateIn{from{clip-path:circle(0% at var(--vtx,50%) var(--vty,50%))}to{clip-path:circle(140% at var(--vtx,50%) var(--vty,50%))}}
}
/* the hero opens sooner: the picture leads, the words follow it */
.js.is-ready .hero__art img{transition:opacity .7s ease,transform 2.6s var(--ease-out)}
.js.is-ready .hero__bar{transition:transform 1s cubic-bezier(.7,0,.2,1) .06s}
/* the words follow closer behind (Q4) */
.js.is-ready .hero__h span:nth-child(1) i{transition-delay:.2s}
.js.is-ready .hero__h span:nth-child(2) i{transition-delay:.3s}
.js.is-ready .hero__h span:nth-child(3) i{transition-delay:.4s}
.js.is-ready .hero__body>*,.js.is-ready .hero__cap{transition-delay:.4s}
.js.is-ready .hero__body>*:nth-child(2){transition-delay:.5s}
.js.is-ready .hero__cap{transition-delay:.55s}
/* the wordmark in the bar is legible instead of texture noise */
.brand__logo{height:18px}
@media (max-width:1180px){.brand__logo{height:17px}}
/* the home scroll breathes: not the same gap and the same heading size nine times */
.home #three{padding-top:clamp(20px,2vw,28px)}
.home #chapters{padding-bottom:clamp(20px,2vw,28px)}
.home #drop{padding-top:clamp(56px,7vw,110px)}
.home #roadmap{padding-top:clamp(36px,4.6vw,74px)}
.home #drop .sec__head h2{font-size:clamp(3.4rem,6.4vw,7.4rem)}
.home #roadmap .sec__head h2{font-size:clamp(2.6rem,3.9vw,4.4rem)}
.home .sec--speak .speak-band{min-height:clamp(600px,46vw,940px)}
/* the roster reads as ten different trials: courage runs violet, fear runs vermilion */
.trial__k{transition:color .25s var(--ease),text-shadow .25s var(--ease)}
@media (hover:hover){
  .trial[data-side=courage]:hover .trial__k{color:var(--pur-t);text-shadow:0 0 26px rgba(157,107,255,.5)}
  .trial[data-side=fear]:hover .trial__k{color:var(--red-t);text-shadow:0 0 26px rgba(224,58,30,.5)}
}
.trial[data-side=courage]:focus-visible .trial__k{color:var(--pur-t)}
.trial[data-side=fear]:focus-visible .trial__k{color:var(--red-t)}
/* phone: the Wolfpack band keeps its scrim when the section stops being tall */
@media (max-width:900px){
  .sec--pack{min-height:72svh}
  .sec--pack::before{background:linear-gradient(to top,rgba(5,5,5,.98) 0,rgba(5,5,5,.9) 30%,rgba(5,5,5,.5) 58%,rgba(5,5,5,.12) 84%)}
}
/* the verdict is inked: the shape's kanji brushes itself in gold */
.result{position:relative}
.vk{position:absolute;right:2px;bottom:2px;width:clamp(64px,7.4vw,112px);aspect-ratio:1;z-index:0;pointer-events:none}
.vk i{display:none}
.result[data-shape=ronin] .vk--ronin,.result[data-shape=hachi] .vk--hachi,.result[data-shape=karashi] .vk--karashi{display:block;height:100%}
.vk svg{width:100%;height:100%;fill:var(--gold);opacity:.38}
.result[data-shape] .vk svg{clip-path:inset(100% 0 0 0);animation:inkUp .75s var(--ease-out) .25s both}
.result[data-shape=karashi] .vk svg{fill:var(--red-t)}
@keyframes inkUp{to{clip-path:inset(0)}}
.result h2,.result .result__text,.result .result__pre{position:relative;z-index:1}
/* a cleared trial cracks the arena open in gold */
.crack{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none}
.crack svg{width:100%;height:100%;display:block}
.crack path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.arena__stage.crack-on .crack{opacity:1}
.arena__stage.crack-on .crack path{stroke-dashoffset:0;transition:stroke-dashoffset .85s var(--ease-out) .1s}
@media (prefers-reduced-motion:reduce){.result[data-shape] .vk svg{animation:none;clip-path:none}.arena__stage.crack-on .crack path{transition:none}}
/* a running trial owns the screen: the stage goes full-bleed, the page waits */
body.arena-live{overflow:hidden}
body.arena-live .hdr{display:none}
body.arena-live .arena__stage{position:fixed;inset:0;width:100%;height:100%;max-height:none;max-width:none;margin:0;border:0;border-radius:0;z-index:80}
body.arena-live .arena__stage>img{width:100%;height:100%;object-fit:cover}
.ag__quit{display:none;position:absolute;right:10px;top:10px;z-index:9;font:500 .72rem/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);background:rgba(5,5,5,.72);border:1px solid var(--line);padding:10px 12px;min-height:40px;cursor:var(--cur-hot,pointer)}
body.arena-live .ag__quit{display:block}
.ag__quit:hover,.ag__quit:focus-visible{color:var(--fg);border-color:var(--line-2)}
@media (pointer:coarse){.ag__quit{min-height:44px;padding:12px 14px}}
/* the Wolfpack name is swept in as the band comes up, the one accent of its kind */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec--pack .pack h2{clip-path:inset(0 100% 0 0);animation:packWipe linear both;animation-timeline:view();animation-range:entry 24% cover 34%}
    @keyframes packWipe{to{clip-path:inset(0)}}
  }
}
/* a landscape phone sees the whole map, not a map taller than the screen */
@media (max-height:500px) and (max-width:1024px){
  .wmap__cam{aspect-ratio:auto;height:calc(100svh - var(--hdr) - 18px);min-height:240px}
  .wmap__cam>img{height:100%;object-fit:cover}
}
/* every partner carries the same seal of good faith, and the gold line reads as gold */
.partner{position:relative;padding-right:64px}
.partner__seal{position:absolute;right:0;top:20px;width:38px;height:38px;border:1px solid rgba(217,180,90,.42);display:grid;place-items:center}
.partner__seal svg{width:62%;height:62%;fill:var(--gold);opacity:.85}
@media (max-width:520px){.partner{padding-right:52px}.partner__seal{width:32px;height:32px;top:16px}}
/* the dive is one motion: the place fades up while the camera is still landing */
div.arrive{transition:opacity .5s var(--ease),visibility .5s}
/* the nine pins are kintsugi marks on the city, not white UI boxes */
.pin i{border-color:rgba(217,180,90,.85);color:var(--gold)}
@media (hover:hover){.wmap__strip button:hover img{transform:translateY(-3px) scale(1.04)}.wmap__strip button img{transition:opacity .2s,transform .18s var(--ease)}}
/* the shortest phones keep the place CTA on screen */
@media (max-height:500px){.arrive__body{gap:8px}.arrive__body p:not(.cap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
/* the quit button never sits on top of the fear pips */
body.arena-live .ag__hud{padding-right:clamp(120px,14vw,190px)}
/* on a phone the quit button becomes a square ✕, so a trial's third stat and its pips keep their room */
@media (max-width:600px){.ag__quit{font-size:0;letter-spacing:0;padding:0;width:44px;height:44px;min-height:44px;right:8px;top:8px}.ag__quit::before{content:'✕';font:400 1.05rem/42px var(--grot);color:var(--fg-2);display:block;text-align:center}body.arena-live .ag__hud{padding-right:60px}}

/* ===== FILM PASS (Higgsfield): stills that come alive once, and the manifesto film ===== */
.live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.live.on{opacity:1}
.hero__art .live{object-position:50% 30%}
/* each clip that brings a still to life sits exactly on its still, so nothing jumps as it fades in (or out, on the home
   page). The clips were made from their stills but framed a little larger and off centre; measured on their first and
   last frames against the stills (2026-10-22): --a the still's shape (width / height), --px --py its crop
   (object-position), --sx --sy the clip's size against the still's picture, --tx --ty how far the clip's centre sits from
   the still's (in the still's picture). site.js fitClip lays the clip over the still's cover picture in its box, and the
   clip's edges are feathered into the still beneath */
.live[data-live*="/hero-"]{--a:1.7778;--px:.5;--py:.25;--sx:1.0129;--sy:1.0333;--tx:.00865;--ty:.01575}
.live[data-live*="/alley-"]{--a:2.21;--px:.5;--py:.3;--sx:.8149;--sy:1.0348;--tx:.0073;--ty:.0165}
.live[data-live*="/cast-ronin-"]{--a:.75;--px:.5;--py:.25;--sx:1.0115;--sy:1.017;--tx:.013;--ty:.0107}
.live[data-live*="/cast-hachi-"]{--a:1.7778;--px:.14;--py:.4;--sx:1.013;--sy:1.0333;--tx:.00865;--ty:.01575}
.live[data-live*="/cast-karashi-"]{--a:1.0227;--px:.5;--py:.25;--sx:.9893;--sy:1.0115;--tx:.0006;--ty:.0112}
.live.is-fit{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(transparent,#000 2.5%,#000 97.5%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(transparent,#000 2.5%,#000 97.5%,transparent);mask-composite:intersect}
.split__art .live{object-position:50% 25%}
.sec--film .film{margin-inline:var(--gut)}
.film__frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid var(--line)}
.film__poster,.film__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film__v{opacity:0;transition:opacity .5s var(--ease);background:#000}
.film.is-playing .film__v{opacity:1}
/* pressed, until the film really plays (QA Q18) */
.film.is-wait .film__play{cursor:progress}.film.is-wait .film__ring{border-color:var(--pur);background:rgba(157,107,255,.2)}
.film__play{position:absolute;inset:0;display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,22px);padding:clamp(18px,3vw,44px);background:linear-gradient(to top,rgba(5,5,5,.8),rgba(5,5,5,0) 58%);border:0;text-align:left;transition:opacity .4s var(--ease)}
/* playing, the faded cover leaves the tab order too (hidden once it has faded), so Tab from the film reaches the HD toggle */
.film.is-playing .film__play{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.film__ring{flex:none;display:grid;place-items:center;width:clamp(58px,6vw,86px);aspect-ratio:1;border:1px solid var(--line-2);border-radius:50%;background:rgba(5,5,5,.35);transition:border-color .3s,background .3s,transform .35s var(--ease-out)}
.film__ring svg{width:36%;fill:var(--fg);transform:translateX(7%)}
.film__play:hover .film__ring,.film__play:focus-visible .film__ring{border-color:var(--pur);background:rgba(157,107,255,.2);transform:scale(1.06)}
.film__txt{display:grid;gap:6px}
.film__h{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,3.2vw,3.1rem);line-height:.95}
.film--bleed .film__frame{border-inline:0}
/* the HD toggle under the frame, wherever the film would start in 720p (site.js) */
.film__hd{display:flex;width:max-content;margin:10px 0 0 auto}
.film--bleed .film__hd{margin-right:var(--gut)}
.film__hd[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.mf-film{padding:clamp(28px,5vw,64px) 0 clamp(20px,3vw,40px)}
.mf-film__or{padding:14px var(--gut) 0}
@media (max-width:600px){.film__play{padding:12px 14px;gap:10px;background:linear-gradient(to top,rgba(5,5,5,.85),rgba(5,5,5,0) 50%)}.film__ring{width:42px}.film__h{font-size:1.05rem}.film__txt{gap:4px}.film__txt .cap{font-size:12px;letter-spacing:.08em;line-height:1.3}}

/* ---- FORGE: the profile-picture tools ---- */
.seg--wrap { flex-wrap: wrap; }
.field__hint { margin-top: .5rem; opacity: .68; line-height: 1.45; }
[data-eyes][aria-pressed="true"] { background: var(--pur); color: #0B0710; border-color: var(--pur); }

.film__between{padding:clamp(18px,2.4vw,30px) var(--gut) clamp(10px,1.4vw,16px);opacity:.78}

.nav a,.hdr__cta{white-space:nowrap}
.hero__film{text-decoration:none;text-align:right}
.hero__film:hover,.hero__film:focus-visible{color:var(--pur-t)}
.share__note{margin-top:8px;opacity:.7}

.ag__flash{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;mix-blend-mode:screen}
/* a beat after a run ends, taps go nowhere (see finish() in arena.js) */
.ag__shield{position:fixed;inset:0;z-index:95;background:transparent;touch-action:none}

/* ===== POLISH (2026-09-25) — from the four-lens audit ===== */
/* every page title lifts into place, like the home headline does */
.phead__mask{display:block;overflow:hidden;padding-bottom:.06em}
.phead__mask>i{display:block;font-style:normal}
.js .phead__mask>i{transform:translateY(105%)}
.js.is-ready .phead__mask>i{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) .22s}
.js .phead__body .lead,.js .phead__meta{opacity:0;transform:translateY(10px)}
.js.is-ready .phead__body .lead,.js.is-ready .phead__meta{opacity:1;transform:none;transition:opacity .8s ease .55s,transform .9s cubic-bezier(.16,1,.3,1) .55s}
/* A8, Q4: the head sets .js before the first paint and site.js lifts these (is-ready); should it never come, they land
   3 s after first drawn. is-ready ends the safety net: before 3 s it never runs, after it the values it holds are
   is-ready's own. Left on, a finished forwards fill would hold a transform and an opacity on each for good, making it a
   stacking context and the box its fixed children are placed in */
@keyframes dkShow{to{opacity:1;transform:none}}
@keyframes dkOpen{to{transform:scaleY(0)}}
@keyframes dkSolid{to{background-color:rgba(5,5,5,.92);border-color:var(--line)}}
.js .hero__body>*,.js .hero__cap,.js .hero__h i,.js .phead__mask>i,.js .phead__body .lead,.js .phead__meta{animation:dkShow .8s cubic-bezier(.16,1,.3,1) 3s forwards}
.js .hero__bar{animation:dkOpen 1s cubic-bezier(.7,0,.2,1) 3s forwards}
.js.is-ready .hero__body>*,.js.is-ready .hero__cap,.js.is-ready .hero__h i,.js.is-ready .phead__mask>i,.js.is-ready .phead__body .lead,.js.is-ready .phead__meta,.js.is-ready .hero__bar{animation:none}
/* Q28: no JavaScript, a solid header; a header site.js never reached (no hdr--live) turns solid 3 s in */
html:not(.js) .hdr{background:rgba(5,5,5,.92);border-color:var(--line)}
.js .hdr:not(.hdr--live){animation:dkSolid 0s 3s forwards}
/* Q28: no JavaScript, no dead Forge tools; its noscript line says why */
html:not(.js) .ftool{display:none}
/* the header holds still while the page changes under it */
.hdr{view-transition-name:site-hdr}
/* touch: no grey flash, a real press instead */
html{-webkit-tap-highlight-color:transparent;background:var(--bg)}
a,button{-webkit-tap-highlight-color:transparent}
.btn{transition-property:background-color,border-color,color,transform}
.btn:active{transform:translateY(1px) scale(.98)}
.nav a:active,.drawer nav a:active{color:var(--pur-t)}
.pin:active i{transform:scale(.92)}
.trial:active .trial__art img{opacity:.66;transform:scale(1.04)}
.cell:active img,.prod:active .prod__img img{transform:scale(1.025)}
.wmap__strip button:active img{opacity:1;transform:translateY(-3px) scale(1.04)}
/* the nav: the active underline also answers a hover */
@media (hover:hover){.nav a{text-underline-offset:.5em}.nav a:hover{text-decoration:underline;text-decoration-color:var(--line-2)}}
/* the arena grid: every trial's picture reads, courage violet and fear vermilion in the kanji */
.trial__art img{opacity:.5}
.trial::after{background:linear-gradient(to top,rgba(5,5,5,.92) 8%,rgba(5,5,5,.3) 62%,rgba(5,5,5,.12))}
.trial[data-side=courage] .trial__k{color:rgba(201,176,255,.6)}
.trial[data-side=fear] .trial__k{color:rgba(240,101,74,.55)}
@media (max-width:760px){.trials>.trial:last-child:nth-child(odd){grid-column:1/-1}}
/* the trailer link looks like the one thing in the corner you can press */
.hero__film{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;padding:12px 8px;margin:-12px -8px}
.hero__film::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;transition:border-color .2s}
.hero__film:hover::before,.hero__film:focus-visible::before,.hero__film:active::before{border-left-color:var(--pur-t)}
/* the quiz: an answer is a surface you press */
/* the answer's letter stands clear of the purple bar a hover or a tap draws on the row's left edge (16px of air) */
.opt{transition:color .2s,background-color .2s,box-shadow .2s}
@media (hover:hover){.opt:hover{background:rgba(157,107,255,.06);box-shadow:inset 3px 0 0 var(--pur)}}
.opt:active{background:rgba(157,107,255,.1);box-shadow:inset 3px 0 0 var(--pur)}
/* the phone menu: its links arrive one after another */
.drawer nav a{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.drawer[data-open="true"] nav a{opacity:1;transform:none}
.drawer[data-open="true"] nav a:nth-child(2){transition-delay:.03s}.drawer[data-open="true"] nav a:nth-child(3){transition-delay:.06s}
.drawer[data-open="true"] nav a:nth-child(4){transition-delay:.09s}.drawer[data-open="true"] nav a:nth-child(5){transition-delay:.12s}
.drawer[data-open="true"] nav a:nth-child(6){transition-delay:.15s}.drawer[data-open="true"] nav a:nth-child(n+7){transition-delay:.18s}
/* the calendar is tall: reserve its real height so the page does not jump as it renders */
.sec:has(.cal--rich){contain-intrinsic-size:auto 2800px}
@media (prefers-reduced-motion:reduce){
  .js .phead__mask>i,.js .phead__body .lead,.js .phead__meta,.drawer nav a{transform:none;opacity:1;transition:none}
  ::view-transition-old(site-hdr),::view-transition-new(site-hdr){animation:none}
}
/* a picked trial: the start button calls twice, then rests */
@keyframes goCall{0%{box-shadow:0 0 0 0 rgba(157,107,255,.75)}100%{box-shadow:0 0 0 16px rgba(157,107,255,0)}}
.ag__go--hint{animation:goCall .8s ease-out 2}
@media (prefers-reduced-motion:reduce){.ag__go--hint{animation:none;outline:2px solid var(--pur-t);outline-offset:3px}}
/* a run on a phone: the page is pinned, nothing pans, bounces, refreshes, selects or pops a long-press menu */
/* arriving at a #target from a link (site.js landOn): the browser jumps there before the first paint instead of
   gliding from the top, and every section is laid out, so the target does not move as lazy sections take their height */
html.arrive{scroll-behavior:auto}
html.arrive .sec{content-visibility:visible!important}
html.ag-lock,body.ag-lock{overscroll-behavior:none}
body.ag-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
body.arena-live{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.arena-live .arena__stage,body.arena-live .arena__stage canvas{touch-action:none}

/* ===== PHONE PASS (2026-09-25) ===== */
/* page heads: the corner caption is its own row at every size, so a tall title (four lines on a phone, the 10vw Shape
   title on a 1280x720 laptop) starts under it, never through it; a short title still sits exactly where it was */
.phead{grid-template-rows:auto 1fr}
.phead__meta{position:static;grid-row:1;justify-self:end;margin:14px 0 12px}
.phead__body{grid-row:2;align-self:end}
/* the arena stage between runs: it keeps its shape, but grows to hold the rules or the verdict instead of cutting off
   the start button (a running trial is fullscreen and never uses this) */
@media (max-width:900px){
  .arena__stage:not(.playing){display:grid;aspect-ratio:auto;max-height:none}
  .arena__stage:not(.playing)::before{content:"";grid-area:1/1;padding-top:min(62.5%,calc(100svh - var(--hdr) - 24px))}
  .arena__stage:not(.playing)>.ag__intro{position:relative;inset:auto;grid-area:1/1}
}
@media (max-width:600px){
  .arena__stage:not(.playing)::before{padding-top:min(133.333%,calc(100svh - var(--hdr) - 24px))}
  .ag__intro{padding-top:52px}
  .ag__introbox{gap:10px}
  /* each rule's tag sits over its line, so the words get the full width and a long tag never runs into them */
  .ag__rules{gap:10px}
  .ag__rules li{grid-template-columns:1fr;row-gap:3px;line-height:1.36}
  .ag__tag{justify-self:start}
}
@media (max-width:600px) and (max-height:700px){.arena__stage:not(.playing)::before{padding-top:min(125%,calc(100svh - var(--hdr) - 24px))}}
/* the leaderboard title gets the full width on a phone; Top 10 reads as its kicker */
@media (max-width:600px){.board__head{flex-direction:column-reverse;align-items:flex-start;gap:4px}}
/* the trailer still carries a burned-in subtitle along its bottom edge: crop it off, so the play caption never sits on it */
.film__poster--sub{height:121%;object-position:75% 0}
/* the phone menu fades out at the bottom edge while there is more of it below */
.drawer::after{content:"";position:fixed;left:0;right:0;bottom:0;height:72px;background:linear-gradient(rgba(5,5,5,0),var(--bg) 78%);pointer-events:none;opacity:0;transition:opacity .25s}
.drawer.is-more::after{opacity:1}
@media (max-width:1260px) and (max-height:760px){.drawer{padding-top:calc(var(--hdr) + 12px)}.drawer nav a{font-size:clamp(1.6rem,6.6vw,2.4rem);padding:.12em 0}}
/* the world on the narrowest phones: the place counter drops under the back button instead of running into it */
@media (max-width:350px){.arrive__meta,.wmap--full .arrive__meta{top:calc(var(--hdr) + 66px);right:auto;left:var(--gut)}}
/* The Drop on narrow phones: equal thirds, and under 375px each jump shows its label over its count */
@media (max-width:374px){.jump a{flex-direction:column;gap:4px;padding:0 4px;letter-spacing:.06em}}
/* touch: the verification links in a sentence get a finger-sized hit area without moving a line */
@media (pointer:coarse){.ca p a,.hero__sub a{padding-block:12px}}
/* phone panels: one column that is exactly the panel's width, so a wide form row (the name field and Post score on
   WebKit) never pushes the arena's result card out past the panel's right edge */
@media (max-width:900px){.panel,.arena__result{grid-template-columns:minmax(0,1fr)}.board__row input{width:0}}
/* 320px phones: the longest single words (a page title, a partner's name, a close line held together against an orphan)
   are sized to fit the screen instead of being cut off at its right edge */
@media (max-width:360px){
  .phead__body h1{font-size:min(3rem,13.4vw)}
  .partners{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:340px){.close__line{font-size:1.2rem}.partner h3{font-size:1.35rem}}
/* ===== Telegram Mini App (arena.html?tg=1): only the trials and the stage, safe areas respected ===== */
.tg .hdr,.tg .drawer,.tg .phead,.tg .close,.tg .ftr,.tg .skip{display:none!important}
.tg main{padding-top:calc(8px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px))}
.tg .sec{padding-top:14px;padding-bottom:14px}
.tg body.arena-live .ag__hud{padding-top:calc(12px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px))}
.tg body.arena-live .ag__quit{top:calc(8px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px))}

/* ==========================================================================
   FEATURES (2026-09-26): the kasa watches, omikuji, the fear in the room, the spirit of courage
   ========================================================================== */
/* --- the kasa mark in the header: its eyes follow the pointer a little (site.js, transform only) --- */
.brand{gap:10px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.kasa{height:30px;width:auto;flex:none;overflow:visible;margin-top:-1px}
.kasa__hat{fill:none;stroke:var(--pur-t);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.kasa__hat .kasa__cap{fill:var(--pur-t);stroke:none}
.kasa__eyes{fill:#B58BFF;transition:transform .22s var(--ease-out)}
@media (max-width:760px){.kasa{height:28px}}

/* --- omikuji: the daily fortune, one image moment with a box and a paper --- */
.sec--omk{content-visibility:visible;isolation:isolate;overflow:hidden;border-top:1px solid var(--line);padding:clamp(64px,8vw,120px) var(--gut) clamp(48px,6vw,96px)}
.omk__art{position:absolute;inset:0;z-index:-2}
.omk__art img{width:100%;height:100%;object-fit:cover;object-position:20% 40%}
.sec--omk::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(5,5,5,.96) 0,rgba(5,5,5,.84) 40%,rgba(5,5,5,.42) 72%,rgba(5,5,5,.3) 100%),linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,0) 38%),linear-gradient(to bottom,rgba(5,5,5,.7) 0,rgba(5,5,5,0) 26%)}
.omk{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"stage head" "stage foot";column-gap:clamp(24px,4vw,72px);row-gap:0;align-items:center;max-width:1400px;margin:0 auto}
.omk__head{grid-area:head;align-self:end;display:grid;gap:16px;justify-items:start;padding-bottom:24px}
.omk__foot{grid-area:foot;align-self:start;display:grid;gap:14px;justify-items:start}
.omk__head h2{font-size:clamp(3.4rem,8.4vw,8.4rem);line-height:.86;text-shadow:0 8px 40px rgba(0,0,0,.7)}
.omk__head .lead{color:#DAD6CF;max-width:44ch;text-shadow:0 1px 12px rgba(0,0,0,.8)}
/* the actions before and after the draw share one cell, so nothing below them moves when they swap */
.omk__acts{display:grid}
.omk__acts>.actions{grid-area:1/1;margin-top:0;align-content:start}
.omk__post,.is-drawn .omk__pre{visibility:hidden}
.is-drawn .omk__post{visibility:visible}
.omk__tie{display:none}
.omk[data-tone=red] .omk__tie{display:inline-flex}
.omk.is-tied .omk__tie{visibility:hidden}
.omk__note{min-height:3em;max-width:46ch;color:var(--fg-2)}
.omk__sn{visibility:hidden;max-width:46ch}
.is-drawn .omk__sn{visibility:visible}
/* the controls show once site.js has wired them (omk--live), not on .js alone: the page head sets that (A8) */
.omk:not(.omk--live) .omk__acts,.omk:not(.omk--live) .omk__note,.omk:not(.omk--live) .omk__sn{display:none}

/* the stage: a fixed box the size of the tallest paper, so a draw never pushes the page */
.omk__stage{grid-area:stage;position:relative;height:clamp(500px,42vw,580px);container-type:size}
.omk__stage::before{content:"";position:absolute;left:50%;top:52%;width:min(560px,90%);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(157,107,255,.2) 0,rgba(157,107,255,0) 62%);pointer-events:none;transition:transform .9s var(--ease-out)}
.omk__box{position:absolute;left:50%;top:50%;width:clamp(150px,13.5vw,196px);padding:0;border:0;background:none;transform:translate(-50%,-50%);transform-origin:0 50%;transition:transform .85s var(--ease-out);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.omk__box:focus-visible{outline-offset:8px}
.omk__svg{width:100%;height:auto;overflow:visible;transform-origin:50% 88%;transition:transform .35s var(--ease-out)}
@media (hover:hover){.omk:not(.is-drawn) .omk__box:hover .omk__svg{transform:translateY(-5px) rotate(-2deg)}}
.omk__f{stroke:rgba(217,180,90,.55);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.omk__f--t{fill:#2A2119}
.omk__rim{fill:none;stroke:rgba(181,139,255,.55);stroke-width:1.2;vector-effect:non-scaling-stroke}
.omk__band{fill:none;stroke:rgba(217,180,90,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.omk__frame{fill:none;stroke:rgba(217,180,90,.3);stroke-width:1;vector-effect:non-scaling-stroke}
.omk__kan{fill:var(--pur-t)}
.omk__hole{fill:#030303;stroke:rgba(217,180,90,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.omk__stick path{fill:#CDBB8E}.omk__stick .omk__tip{fill:var(--red)}
.omk__stick{transform:translateY(44px);transition:transform .5s var(--ease-out) .05s}
.is-drawn .omk__stick{transform:none}
@keyframes omkShake{0%{transform:rotate(0)}12%{transform:rotate(-10deg) translateY(-6px)}26%{transform:rotate(9deg)}40%{transform:rotate(-8deg) translateY(-4px)}54%{transform:rotate(7deg)}68%{transform:rotate(-5deg) translateY(-2px)}84%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.is-shaking .omk__svg{animation:omkShake .8s cubic-bezier(.36,.07,.19,.97) both}
/* drawn: the box steps aside and the paper unrolls from the top */
.is-drawn .omk__box{transform:translate(-50cqw,-50%) scale(.78);cursor:default}
.is-drawn .omk__stage::before{transform:translate(-50%,-50%) translateX(12cqw)}
.omk__slip{position:absolute;right:0;top:50%;width:min(430px,calc(100% - clamp(150px,13.5vw,196px) * .78 - 20px));transform:translateY(-50%);padding:14px 18px 12px;display:grid;gap:14px;background:#0F0D13;border:1px solid rgba(217,180,90,.5);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .95s var(--ease-out) .3s,visibility 0s linear 1.3s}
.omk__slip::before{content:"";position:absolute;inset:5px;border:1px solid rgba(217,180,90,.16);pointer-events:none}
.is-drawn .omk__slip{clip-path:inset(0);visibility:visible;transition:clip-path .95s var(--ease-out) .3s,visibility 0s}
.omk.is-still .omk__slip,.omk.is-still .omk__box,.omk.is-still .omk__stick,.omk.is-still .omk__stage::before,.omk.is-still .slip__k,.omk.is-still .slip__txt,.omk.is-still .omk__knot,.omk.is-still .knot__mine{transition:none}
.slip__top{display:flex;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.slip__top .cap{color:var(--fg-3)}
.slip__main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.slip__k{color:var(--pur-t);opacity:0;transform:translateY(10px);transition:opacity .6s ease .9s,transform .8s var(--ease-out) .9s}
.slip__k svg{display:block;width:clamp(62px,5.4vw,78px);height:auto;fill:currentColor;stroke:currentColor;stroke-width:26;stroke-linejoin:round;overflow:visible}
.slip__k[data-n="1"] svg{width:clamp(80px,7vw,100px)}
.slip__txt{display:grid;gap:10px;opacity:0;transition:opacity .6s ease 1s}
.is-drawn .slip__k{opacity:1;transform:none}
.is-drawn .slip__txt{opacity:1}
.omk[data-tone=gold] .slip__k{color:var(--gold)}
.omk[data-tone=red] .slip__k{color:var(--red-t)}
.slip__name{font-size:clamp(1.7rem,2.5vw,2.4rem);line-height:.92}
.slip__name:focus{outline:0}
.slip__read{margin-top:-4px;color:var(--fg-3)}
.slip__line{font:400 clamp(1.08rem,1.25vw,1.24rem)/1.2 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg);text-wrap:pretty}
.slip__meta{margin:0;display:grid;gap:8px}
.slip__meta div{display:grid;gap:2px}
.slip__meta dt{color:var(--pur-t)}
.omk[data-tone=red] .slip__meta dt{color:var(--red-t)}
.slip__meta dd{margin:0;color:var(--fg-2);font-size:.95rem;line-height:1.45}
.slip__ladder{list-style:none;margin:0;padding:9px 0 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:6px}
.slip__ladder li{display:flex;align-items:center;padding:2px 0 5px;border-bottom:1px solid transparent;color:var(--fg-3);opacity:.7}
.slip__ladder svg{height:13px;width:auto;fill:currentColor;stroke:currentColor;stroke-width:26;overflow:visible}
.slip__ladder li[aria-current="true"]{color:var(--pur-t);opacity:1;border-bottom-color:currentColor}
.omk[data-tone=gold] .slip__ladder li[aria-current="true"]{color:var(--gold)}
.omk[data-tone=red] .slip__ladder li[aria-current="true"]{color:var(--red-t)}
/* a bad fortune, tied: the paper folds away and hangs on the shrine rope with the fears other people left there */
.omk__knot{position:absolute;right:0;top:50%;width:min(430px,calc(100% - clamp(150px,13.5vw,196px) * .78 - 20px));transform:translateY(-50%);pointer-events:none;opacity:0;visibility:hidden}
.omk__knot svg{width:100%;height:auto;overflow:visible}
.knot__rope{fill:none;stroke:#2B2218;stroke-width:8;stroke-linecap:round}
.knot__twist{fill:none;stroke:rgba(205,187,142,.32);stroke-width:5;stroke-dasharray:5 4}
.knot__shide{fill:none;stroke:rgba(242,240,235,.5);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.knot__old{fill:#1A1620;stroke:rgba(217,180,90,.38);stroke-width:1;vector-effect:non-scaling-stroke}
.knot__paper{fill:#1A1620;stroke:var(--red-t);stroke-width:1.2;vector-effect:non-scaling-stroke}
.knot__tie{fill:var(--red-t)}
.knot__mine{transform-origin:122px 54px;transform:translateY(-16px) scale(1.25);opacity:0;transition:transform 1s var(--ease-out) .35s,opacity .4s ease .35s}
.omk__left{margin-top:18px;text-align:center;color:var(--fg-2);min-height:1.5em}
.is-tied .knot__mine{opacity:1}
.is-tied .omk__knot{opacity:1;visibility:visible;transition:opacity .5s ease .3s}
.is-tied .knot__mine{transform:none}
.is-tied .omk__slip{clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease)}
@media (max-width:900px){
  .omk{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "foot";row-gap:22px}
  .omk__head{padding-bottom:0}
  .sec--omk::before{background:linear-gradient(to bottom,rgba(5,5,5,.9) 0,rgba(5,5,5,.72) 34%,rgba(5,5,5,.5) 62%,rgba(5,5,5,.92) 100%)}
  .omk__art img{object-position:30% 50%}
  /* phones: the paper takes the stage; the box waits small in the top corner with its stick out */
  .omk__stage{--bw:clamp(136px,40vw,170px);height:calc(var(--bw) * .5625 + 14px + var(--slip-h,470px))}
  .omk__box{width:var(--bw);transform-origin:0 0}
  .is-drawn .omk__box{transform:translate(-50cqw,-50cqh) scale(.3)}
  .is-drawn .omk__stage::before{transform:translate(-50%,-50%) translateY(-12%)}
  .omk__slip,.omk__knot{left:0;right:0;width:auto;top:calc(var(--bw) * .5625 + 14px);transform:none;max-width:520px}
  .omk__knot{top:calc(var(--bw) * .5625 + 40px)}
}
@media (max-width:359px){.omk__stage{--slip-h:500px}}
/* a browser without container units cannot step the box aside: it bows out instead of standing under the paper */
@supports not (width:1cqw){.is-drawn .omk__box{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}}
@media (min-width:600px) and (max-width:900px){.omk__stage{--slip-h:380px}
}
@media (max-width:420px){
  .omk__slip{padding:12px 14px 10px;gap:12px}
  .slip__main{gap:14px}
  .slip__k svg{width:54px}.slip__k[data-n="1"] svg{width:70px}
}
@media (max-width:760px){.slip__top .cap,.slip__read{font-size:12px}}

/* --- the fear in the room: the market mood as an ink dial, FUD to courage --- */
.room{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:16px 24px;align-items:center;padding:18px 20px 16px;border:1px solid var(--line)}
.room__dial svg{display:block;width:100%;height:auto;overflow:visible}
.room__ticks{fill:none;stroke:var(--fg-3);stroke-width:1;vector-effect:non-scaling-stroke}
.room__track{fill:none;stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
.room__fill{fill:none;stroke:url(#room-g);stroke-width:5;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s var(--ease-out)}
.room__needle{transform-origin:120px 122px;transform:rotate(-90deg);transition:transform 1.4s var(--ease-out)}
.room__needle path{stroke:var(--fg);stroke-width:1.6;stroke-linecap:round}
.room__needle circle{fill:var(--bg);stroke:var(--fg);stroke-width:1.6}
.room__ends{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.room__end{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase}
.room__end svg{height:15px;width:auto;fill:currentColor}
.room__end--fud{color:var(--red-t)}.room__end--dk{color:var(--pur-t)}
.room__body{display:grid;gap:6px;justify-items:start}
.room__head{display:grid;gap:6px}
.room__head>.cap{color:var(--fg-3)}
.room__n{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.room__n b{font:400 clamp(2.6rem,3.6vw,3.4rem)/.9 var(--display);font-feature-settings:"tnum"}
.room__n>span:not(.cap){color:var(--fg-3);font-size:.95rem}
.room__cls{margin-left:6px;color:var(--fg)}
.room[data-band=fear] .room__cls,.room[data-band=terror] .room__cls{color:var(--red-t)}
.room[data-band=brave] .room__cls,.room[data-band=loud] .room__cls{color:var(--pur-t)}
.room__say{font:400 clamp(1.08rem,1.3vw,1.26rem)/1.18 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg);text-wrap:balance;max-width:30ch}
.room__src{font-size:.8rem;line-height:1.5;color:var(--fg-3)}
.room__src a{color:var(--fg-2)}
@media (max-width:760px){.room__end{font-size:12px}}
/* compact wherever the dial sits in a narrow column: phones, and the half-width split on small laptops */
@media (max-width:480px),(min-width:901px) and (max-width:1200px){
  .room{grid-template-columns:minmax(0,152px) minmax(0,1fr);grid-template-areas:"dial head" "say say" "src src";gap:14px 16px;padding:16px}
  .room__body{display:contents}
  .room__dial{grid-area:dial}.room__head{grid-area:head}.room__say{grid-area:say}.room__src{grid-area:src}
  .room__ends{margin-top:6px}.room__end{gap:4px;letter-spacing:.08em}.room__end svg{height:13px}
}

/* --- the spirit of courage: summoned by a secret, once a session --- */
.spirit{position:fixed;inset:0;z-index:70;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse 70% 62% at 50% 56%,#1C1036 0,#09070F 62%,#050505 100%);opacity:0;transition:opacity .12s linear;cursor:var(--cur-hot,pointer);-webkit-tap-highlight-color:transparent}
.spirit.on{opacity:1}
.spirit.out{opacity:0;transition:opacity .8s ease}
.spirit__flash{position:absolute;inset:0;background:var(--pur);opacity:0;pointer-events:none}
.spirit.on .spirit__flash{animation:spiritFlash 1s cubic-bezier(.2,.6,.3,1) both}
@keyframes spiritFlash{0%{opacity:.94}100%{opacity:0}}
.spirit__k{position:absolute;left:50%;top:50%;width:min(96vw,1180px);height:auto;fill:none;stroke:var(--pur);stroke-width:5;opacity:0;transform:translate(-50%,-56%) scale(.94);transition:opacity 1.2s ease .25s,transform 2.6s var(--ease-out) .1s;pointer-events:none}
.spirit.on .spirit__k{opacity:.32;transform:translate(-50%,-56%) scale(1)}
.spirit__in{position:relative;display:grid;justify-items:center;gap:12px;padding:24px var(--gut);text-align:center}
.spirit__img{height:min(56vh,500px);width:auto;max-width:86vw;object-fit:contain;opacity:0;transform:translateY(16vh) scale(.92);transition:transform 1.6s var(--ease-out) .1s,opacity .9s ease .1s}
.spirit.on .spirit__img{opacity:1;transform:none}
.spirit__line{font:400 clamp(1.7rem,3.8vw,3.2rem)/.98 var(--display);text-transform:uppercase;letter-spacing:.01em;width:min(88vw,780px);text-wrap:balance;text-shadow:var(--glow),0 4px 24px rgba(0,0,0,.8);opacity:0;transform:translateY(16px);transition:opacity .8s ease .95s,transform 1s var(--ease-out) .95s}
.spirit__cap{color:var(--pur-t);opacity:0;transition:opacity .8s ease 1.3s}
.spirit.on .spirit__line,.spirit.on .spirit__cap{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.spirit.on .spirit__flash{animation:none}}

/* the secret's hint, quiet in the footer */
.ftr__bot .ftr__hint{color:var(--fg-3);letter-spacing:.1em}
/* ===== home v2: the key band (the one light section), the arena teaser, See more ===== */
.key{--ink:#0A0A0C;--ink-2:#4A4750;--paper:#F2F0EB;--vio:#5A2FD0;background:var(--paper);color:var(--ink);padding:clamp(52px,7vw,104px) var(--gut) clamp(28px,4vw,52px);position:relative}
.key ::selection{background:var(--ink);color:var(--paper)}
.key :focus-visible{outline-color:var(--vio)}
.key__in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,88px);align-items:start}
.key__kick{color:var(--ink-2)}
.key h2{font-size:clamp(3.6rem,9.5vw,8.8rem);color:var(--ink);margin:.1em 0 .16em}
.key__lead{font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.5;max-width:44ch;color:var(--ink)}
.key__ca{position:relative;margin-top:clamp(26px,3.4vw,44px);padding:18px 22px 20px;border:1.5px solid var(--ink);display:grid;gap:8px;max-width:560px}
.key__ca .cap{color:var(--ink-2)}
.key__ca b{font:400 clamp(1.6rem,2.8vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.key__none{margin-top:4px;max-width:50ch;font-weight:500;line-height:1.45}
.key__stamp{position:absolute;right:-16px;top:-24px;width:66px;height:66px;display:grid;place-items:center;background:var(--red);transform:rotate(-8deg)}
.key__stamp svg{width:60%;height:60%;fill:var(--paper)}
.rv-arm .key__stamp.rv{opacity:0;transform:rotate(-8deg) scale(1.7)}
.rv-arm .key__stamp.rv.is-in{opacity:1;transform:rotate(-8deg) scale(1);transition:opacity .2s ease-in .3s,transform .5s cubic-bezier(.16,1,.3,1) .3s}
.key__only{margin-top:16px;max-width:54ch;color:var(--ink-2);font-size:.95rem}
.key__only a{color:var(--ink);text-decoration-color:rgba(10,10,12,.4)}
.key__side{display:grid;gap:12px;padding-top:clamp(0px,3vw,44px)}
.key__ch{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:76px;padding:18px 22px;background:var(--ink);color:#F2F0EB;text-decoration:none;transition:background-color .2s}
.key__ch svg{width:22px;height:22px;fill:currentColor}
.key__ch b{font:500 13px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase}
.key__ch span{color:#ABA8A2;font-size:.92rem}
@media (hover:hover){.key__ch:hover{background:var(--vio)}.key__ch:hover span{color:#E6DCFF}}
.key__facts{margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;border-top:1px solid rgba(10,10,12,.22)}
.key__facts div{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid rgba(10,10,12,.22)}
.key__facts dt{font:500 11px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.key__facts dd{margin:0;font:500 13px/1.4 var(--grot);letter-spacing:.08em;text-transform:uppercase}
.key__buy{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:500 11px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--vio);text-decoration:underline;text-decoration-color:rgba(90,47,208,.45);text-underline-offset:.35em}
.key__warn{max-width:var(--wrap);margin:clamp(30px,4vw,52px) auto 0}
.key .warn{border-color:rgba(176,42,18,.45);background:rgba(224,58,30,.07)}
.key .warn svg{color:#B02A12}
.key .warn p{color:var(--ink-2)}.key .warn strong{color:var(--ink)}
@media (max-width:860px){.key__in{grid-template-columns:1fr}.key__side{padding-top:0}.key__stamp{right:12px;top:-28px;width:56px;height:56px}}
@media (max-width:520px){.key__ch{min-height:68px;padding:16px 18px}.key__ch span{font-size:.86rem}.key__facts dd{font-size:12px}}
.play{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.play a{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none}
.play b{font:400 clamp(1.25rem,1.8vw,1.6rem)/1 var(--display);text-transform:uppercase;transition:color .2s}
.play span{color:var(--fg-2);font-size:.95rem}
@media (hover:hover){.play a:hover b{color:var(--pur-t)}}
@media (max-width:600px){.play a{grid-template-columns:1fr}}
.split--play .split__art img{object-position:50% 40%}
.split--play .actions{align-items:center;column-gap:22px}
.more{border-top:1px solid var(--line)}
.more__sum{list-style:none;cursor:var(--cur-hot,pointer);display:grid;gap:clamp(20px,2.6vw,30px);padding:clamp(44px,5.5vw,76px) var(--gut)}
.more__sum::-webkit-details-marker{display:none}
.more__sum::marker{content:''}
.more__sum:focus-visible{outline-offset:-6px}
.more__top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px}
.more__h{font:400 clamp(2.2rem,4.6vw,4.6rem)/.92 var(--display);text-transform:uppercase}
.more__btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.more[open] .more__btn svg{transform:rotate(180deg)}
.more__shut,.more[open] .more__open,.more[open] .more__idx{display:none}
.more[open] .more__shut{display:inline}
.more[open] .more__sum{padding-bottom:0}
/* open, its sections lay out at their real height, not content-visibility's 900 px guess, so a tile's glide (site.js) aims where its section is */
.more[open] .sec{content-visibility:visible!important}
@media (hover:hover){.more__sum:hover .more__btn{border-color:var(--fg);background:rgba(242,240,235,.06)}}
.more__idx{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.more__tile{display:grid;gap:8px;min-width:0}
.more__tile img{width:100%;aspect-ratio:4/5;object-fit:cover;opacity:.72;transition:opacity .25s}
.more__tile .cap{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.more__tile:hover img{opacity:1}}
@media (max-width:900px){.more__idx{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.more__idx{gap:6px}.more__tile .cap{font-size:12px;letter-spacing:.06em;white-space:normal}}
/* the header: seven places on a desktop (the Passport first), everything else behind the menu button at every width.
   The seven links, Join the Wolfpack, the brand, the seal book, the sound and the menu button take about 1,150px plus
   the gutters (Archivo at 11px), so the links show from 1231px, with room for a scrollbar; below, the menu has them. The
   menu button never shrinks: at any width the row gives way around it, never through it */
.burger{display:block;flex:none}
@media (min-width:1231px){.nav{display:flex}.hdr__cta{display:inline-block}.burger{margin-left:0}}
/* eight menu items (Home first, 2026-10-22): a little less air between them while the window is just wide enough */
@media (min-width:1231px) and (max-width:1380px){.nav a{padding-left:.5em;padding-right:.5em}}
@media (max-width:1230px){.nav{display:none}.hdr__cta{display:none}}
/* the key band in DOKYO violet: the brightest moment on the page without turning white */
.key{--ink:#050505;--ink-2:rgba(5,5,5,.74);--paper:#F2F0EB;--vio:#050505;background:linear-gradient(165deg,#B08AFF 0%,#9C68FF 46%,#8752F0 100%);overflow:hidden;isolation:isolate}
.key__k{position:absolute;right:clamp(-40px,-2vw,-10px);top:50%;height:118%;width:auto;transform:translateY(-50%);fill:rgba(5,5,5,.09);pointer-events:none;z-index:-1}
.key ::selection{background:#050505;color:#C9B0FF}
.key :focus-visible{outline-color:#050505}
.key__ca{border-color:#050505;background:rgba(5,5,5,.07)}
.key__stamp{background:#050505}.key__stamp svg{fill:#B58BFF}
.key__only a,.key__buy{color:#050505;text-decoration-color:rgba(5,5,5,.5)}
.key__ch{background:#050505;color:#F2F0EB;box-shadow:0 10px 30px -12px rgba(40,10,90,.55)}
@media (hover:hover){.key__ch:hover{background:#17101F}.key__ch:hover span{color:#C9B0FF}}
.key__facts{border-top-color:rgba(5,5,5,.28)}.key__facts div{border-bottom-color:rgba(5,5,5,.28)}
.key .warn{background:#050505;border-color:rgba(224,58,30,.6)}
.key .warn svg{color:var(--red-t)}.key .warn p{color:var(--fg-2)}.key .warn strong{color:var(--fg)}
@media (max-width:860px){.key__k{height:auto;width:62%;top:auto;bottom:-4%;transform:none;right:-8%}}
/* ===== round 13: See more on the long pages, the footer on a phone, the home-screen app ===== */
/* See more on the other pages: a title, what waits inside (numbered), the same button as the home page */
.more__list{display:flex;flex-wrap:wrap;gap:8px 26px;counter-reset:more}
.more__list .cap{color:var(--fg-2)}
.more__list .cap::before{counter-increment:more;content:counter(more,decimal-leading-zero);color:var(--pur-t);margin-right:.9em}
.more[open] .more__list{display:none}
.more--page .more__sum{padding-block:clamp(36px,4.6vw,64px)}
.more--page[open] .more__sum{padding-bottom:0}
.more--page + .key,.more--page + .close{border-top:0}
/* the Wolfpack page: the words on the left, the channels and the warning on the right; the Ronin and the feed behind See more */
.pack--page .pack__side{display:grid;gap:16px;align-content:start}
.pack--page .pack__side .links{margin:0}
@media (min-width:901px){.pack--page .pack__side{padding-top:calc(1.5em + 16px)}}
.pack__more{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);align-items:start}
.pack__more .xfeed{margin-top:0;align-self:stretch}
@media (max-width:900px){.pack__more{grid-template-columns:1fr}}
/* the token page: the ledger and the fear in the room side by side, behind See more */
.ledger-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.ledger--short{margin-top:6px}
@media (max-width:900px){.ledger-grid{grid-template-columns:1fr}}
/* the footer on a phone: the fourteen places in two columns instead of one long list */
@media (max-width:480px){.ftr__nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px}.ftr__nav li a{letter-spacing:.08em}}
/* opened from the iPhone home screen: the header grows by the status bar it now sits under */
html.ios-app{--hdr:calc(56px + env(safe-area-inset-top,0px))}
.ios-app .hdr{padding-top:env(safe-area-inset-top,0px)}
.ios-app .hdr__in{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.ios-app .ftr{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}

/* ===== arena: score card + daily trial ===== */
/* the daily banner over the trial list: today's trial for everybody, the painting on the right, a gold edge on the left */
.daily{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 32px;margin-bottom:14px;padding:clamp(18px,2vw,24px) clamp(20px,2.6vw,32px);border:1px solid rgba(217,180,90,.34);background:var(--bg-2);overflow:hidden;isolation:isolate}
.daily__art{position:absolute;top:0;right:0;bottom:0;width:min(64%,820px);z-index:-2;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.daily__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.85}
.daily::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0B0B0B 34%,rgba(11,11,11,.7) 58%,rgba(11,11,11,.12))}
.daily::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(217,180,90,0))}
.daily__txt{display:grid;gap:8px;min-width:0}
/* The World of Dokyo, its own game: the same banner in violet, the whole card a link into the valley */
.valley{border-color:rgba(180,140,255,.42);color:inherit;text-decoration:none}
.valley::after{background:linear-gradient(90deg,#b48cff,rgba(180,140,255,0))}
.valley .daily__k{color:#c9a8ff}
.valley:hover .daily__go,.valley:focus-visible .daily__go{filter:brightness(1.1)}
/* the valley and Dokyo's Venture (both .valley) open from Telegram only while the games open there first (plan A5): the
   Mini App (html.tg, arena.html?tg=1) shows both cards, a browser neither */
html:not(.tg) .valley{display:none}
.daily__k{color:var(--gold)}
.daily__line{color:var(--fg-2);font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.5;text-wrap:pretty}
.daily__line b{font:400 clamp(1.3rem,1.9vw,1.7rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--fg)}
@media (max-width:600px){.daily{grid-template-columns:minmax(0,1fr);gap:16px}.daily__art{width:100%}.daily__art img{opacity:.7}.daily::before{background:linear-gradient(90deg,rgba(11,11,11,.97) 18%,rgba(11,11,11,.66))}.daily__go{justify-content:center}}
/* the daily trial's tab */
.trial__daily{position:absolute;top:10px;left:12px;padding:5px 8px 4px;background:var(--gold);color:#050505;font:600 10px/1 var(--grot);font-style:normal;letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.trial:has(.trial__daily){box-shadow:inset 0 0 0 1px rgba(217,180,90,.6)}
.trial[aria-selected="true"]:has(.trial__daily){box-shadow:inset 0 -3px 0 var(--pur),inset 0 0 0 1px rgba(217,180,90,.6)}
@media (max-width:760px){.trial__daily{top:7px;left:8px;padding:4px 6px 3px;font-size:9px}}
/* today's board or the all-time board, on today's trial only */
.board__seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.board__seg button{min-height:40px;padding:0 .8em}
@media (pointer:coarse){.board__seg button{min-height:44px}}
/* the score card: the picture, then Share card and Post on X side by side */
.arena__result canvas{box-shadow:0 18px 50px -24px rgba(0,0,0,.9)}
.arena__share{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.arena__share .btn{justify-content:center;padding-inline:.8em}
.arena__share:has(>[hidden]){grid-template-columns:minmax(0,1fr)}
.tg .arena__share{grid-template-columns:minmax(0,1fr)}
@media (max-width:420px){.arena__share .btn{padding-inline:.5em;letter-spacing:.1em}}
/* ===== arena: exit confirm ===== */
/* a live run asks before it ends (arena.js ask()); the trial sits frozen and dimmed under the panel */
.ag__exit{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));background:radial-gradient(ellipse at 50% 50%,rgba(5,5,5,.62),rgba(5,5,5,.9) 75%);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:agExitIn .16s ease-out both}
.ag__exit[hidden]{display:none!important}
.ag__exitbox{position:relative;width:min(100%,24.5rem);display:grid;gap:12px;justify-items:center;text-align:center;padding:30px clamp(18px,5vw,30px) clamp(18px,5vw,26px);background:linear-gradient(180deg,rgba(157,107,255,.13),rgba(157,107,255,0) 46%),var(--bg-2);border:1px solid var(--line-2);box-shadow:0 28px 90px rgba(0,0,0,.75),0 0 60px rgba(157,107,255,.12);animation:agExitBox .24s var(--ease-out) both}
.ag__exitbox::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:linear-gradient(90deg,rgba(157,107,255,0),var(--pur) 22%,var(--pur-t) 50%,var(--pur) 78%,rgba(157,107,255,0))}
.ag__exitk{margin:0;color:var(--red-t);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag__exitbox h2{font-size:clamp(2.2rem,9vw,3rem);line-height:.94;color:var(--fg)}
.ag__exitd{margin:0;max-width:30ch;color:var(--fg-2);font-size:1rem;line-height:1.45;text-wrap:balance}
.ag__exits{margin:4px 0 0;display:flex;align-items:baseline;justify-content:center;gap:12px;min-width:62%;padding:10px 14px 9px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ag__exits[hidden]{display:none}
.ag__exits .cap{color:var(--fg-3)}
.ag__exits b{font:400 2rem/1 var(--display);color:var(--fg);font-variant-numeric:tabular-nums}
.ag__exitact{display:grid;gap:12px;width:100%;margin-top:10px}
.ag__exitact .btn{width:100%;min-height:54px;justify-content:center;font-size:12px;letter-spacing:.16em}
.ag__exitact .btn--pur{box-shadow:0 16px 30px -16px rgba(157,107,255,.8)}
.ag__exitq{min-height:48px!important;color:var(--fg-2);border-color:var(--line);background:var(--bg-2)}
@media (hover:hover){.ag__exitq:hover{color:var(--fg);border-color:var(--line-2)}}
.ag__exitact .btn:focus-visible{outline:2px solid var(--pur-t);outline-offset:3px}
.arena__stage.ag-paused .ag__field *,.arena__stage.ag-paused .ag__tip{animation-play-state:paused!important}
@keyframes agExitIn{from{opacity:0}}
@keyframes agExitBox{from{opacity:0;transform:translateY(10px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.ag__exit,.ag__exitbox{animation:none}}
@media (max-height:520px){.ag__exitbox{gap:8px;padding-top:20px}.ag__exitbox h2{font-size:2rem}.ag__exitact{grid-template-columns:1fr 1fr;margin-top:4px}}

/* header tools: small buttons site.js puts next to the menu (seal book, sound) */
.hdr__tools{display:flex;align-items:center;gap:2px;margin-left:8px}.hdr__tools:empty{display:none}
@media (max-width:1230px){.hdr__tools{margin-left:auto}.hdr__tools~.burger{margin-left:0}}

/* the DOKYO cursor: a kunai, lit violet over anything you can press. Mouse only; touch keeps nothing, games keep their own */
@media (hover:hover) and (pointer:fine){
:root{--cur:url(../img/cursor.png) 2 2,auto;--cur-hot:url(../img/cursor-hot.png) 2 2,pointer}
@supports (cursor:image-set(url(x.png) 1x) 2 2,auto){:root{--cur:image-set(url(../img/cursor.png) 1x,url(../img/cursor@2x.png) 2x) 2 2,auto;--cur-hot:image-set(url(../img/cursor-hot.png) 1x,url(../img/cursor-hot@2x.png) 2x) 2 2,pointer}}
html{cursor:var(--cur,auto)}
a,button,summary,select,label[for],[role="button"],[role="tab"]{cursor:var(--cur-hot,pointer)}
input,textarea,[contenteditable]{cursor:text}
button:disabled,[aria-disabled="true"]{cursor:var(--cur,default)}
}
@media (max-width:1230px){.hdr__tools:empty~.burger{margin-left:auto}}

/* the seal book (goshuin-chō): the hanko in the header, the toast when a seal is earned, the book of twelve */
.sbb{display:inline-flex;align-items:center;gap:9px;height:44px;min-width:44px;padding:0 8px;border:0;background:none;color:var(--fg);font:500 11px/1 var(--grot);letter-spacing:.08em;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sbb__seal{display:block;width:21px;height:21px;flex:none;transform:rotate(-5deg);border-radius:3px}
.sbb__seal svg{width:100%;height:100%;overflow:visible}
.sbb__n{font-variant-numeric:tabular-nums;white-space:nowrap}.sbb__n i{font-style:normal;color:var(--fg-3)}
@media (hover:hover){.sbb:hover .sbb__n i{color:var(--fg-2)}}
.sbb--done .sbb__seal{outline:1.5px solid var(--gold);outline-offset:2.5px}
.sbb.is-stamp .sbb__seal svg{animation:sbStamp .5s cubic-bezier(.2,.8,.25,1) both}
@keyframes sbStamp{from{opacity:0;transform:rotate(var(--sr,0deg)) scale(1.3)}to{opacity:1;transform:rotate(var(--sr,0deg)) scale(1)}}
@keyframes sbRise{from{opacity:0;transform:translateY(6px)}}
@keyframes sbSeam{to{stroke-dashoffset:0}}

.sbt{position:fixed;z-index:65;right:24px;bottom:24px;width:360px;max-width:calc(100vw - 32px);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:16px 20px 16px 18px;background:#0C0A0A;border:1px solid rgba(217,180,90,.45);color:var(--fg);text-align:left;opacity:0;transform:translateY(18px);transition:opacity .3s ease,transform .45s var(--ease-out);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sbt::before{content:"";position:absolute;inset:4px;border:1px solid rgba(217,180,90,.13);pointer-events:none}
.sbt.on{opacity:1;transform:none}
.sbt.out{opacity:0;transform:translateY(10px);transition-duration:.26s}
/* a toast on its way in or out takes no tap; over a chapter bar it sits above it (QA Q8) */
.sbt:not(.on){pointer-events:none}
.reel-on .sbt,.mf-nav-on .sbt{bottom:calc(88px + env(safe-area-inset-bottom))}
.sbt__seal{display:block;width:60px;height:60px}
.sbt__seal svg{width:100%;height:100%;overflow:visible;transform:rotate(var(--sr))}
.sbt.on .sbt__seal svg{animation:sbStamp .46s cubic-bezier(.2,.8,.25,1) .16s both}
.sbt__txt{display:grid;gap:5px;min-width:0}
.sbt__k{font:500 11px/1.2 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--red-t)}
.sbt__n{font:400 23px/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg)}
.sbt__l{font-size:13px;line-height:1.35;color:var(--fg-2)}
@media (hover:hover){.sbt:hover{border-color:rgba(217,180,90,.8)}}
.sbt--done{border-color:var(--gold)}.sbt--done .sbt__k{color:var(--gold)}
@media (max-width:600px){.sbt{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-width:none;gap:16px;padding:14px 16px}.sbt__seal{width:54px;height:54px}.sbt__n{font-size:21px}}

html.sb-lock,html.sb-lock body{overflow:hidden}
.sb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:32px}
.sb__scrim{position:absolute;inset:0;background:rgba(3,3,3,.88);opacity:0;transition:opacity .3s ease}
.sb.on .sb__scrim{opacity:1}
.sb__book{position:relative;width:min(1180px,100%);height:min(780px,calc(100vh - 64px));height:min(780px,calc(100dvh - 64px));background:radial-gradient(120% 80% at 16% 0%,#171313 0%,#0C0A0A 44%,#080707 100%);border:1px solid rgba(217,180,90,.4);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .35s ease,transform .55s var(--ease-out)}
.sb.on .sb__book{opacity:1;transform:none}
.sb__book::before{content:"";position:absolute;inset:6px;border:1px solid rgba(217,180,90,.13);pointer-events:none;z-index:3}
.sb__x{position:absolute;top:12px;right:12px;z-index:4;width:44px;height:44px;display:grid;place-items:center;border:0;background:#0C0A0A;color:var(--fg-2);transition:color .2s}
.sb__x svg{width:22px;height:22px}
@media (hover:hover){.sb__x:hover{color:var(--fg)}}
.sb__scroll{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sb__spread{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;min-height:100%}
.sb__spread::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:120px;margin-left:-60px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.42) 44%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.42) 56%,rgba(0,0,0,0));pointer-events:none}
.sb__spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(242,240,235,.07);pointer-events:none}
.sb__seam{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:visible;display:none}
.sb--done .sb__seam{display:block}
.sb__seam path{fill:none;stroke:var(--gold);stroke-linecap:round;stroke-linejoin:round}
.sb__seam .w{stroke-width:8;opacity:.13}.sb__seam .c{stroke-width:2.2}.sb__seam .b{stroke-width:1.3;opacity:.8}
.sb.is-seam .sb__seam path{stroke-dasharray:1;stroke-dashoffset:1;animation:sbSeam 1.9s var(--ease-out) .45s forwards}
.sb.is-seam .sb__seam .b{animation-delay:1.6s;animation-duration:1s}
.sb__spread>*:not(.sb__seam){position:relative;z-index:1;min-width:0}
.sb__l{grid-column:1;padding-left:58px;padding-right:58px}
.sb__r{grid-column:2;padding-left:58px;padding-right:58px}
.sb__head{grid-row:1;display:grid;gap:14px;align-content:start;padding-top:44px}
.sb__side{grid-row:1;align-self:end;padding-top:40px;padding-right:84px}
.sb__ga,.sb__gb{grid-row:2;padding-top:40px}
.sb__note,.sb__folio{grid-row:3;align-self:end;margin:0;padding-top:26px;padding-bottom:34px}
.sb__kick{color:var(--gold)}
.sb__head h2{font-size:clamp(2.3rem,3.4vw,3.1rem);line-height:.9;white-space:nowrap}
.sb__head h2:focus{outline:0}
.sb__lead{max-width:52ch;font-size:15px;line-height:1.55;color:var(--fg-2)}
.sb__prog{display:flex;align-items:center;gap:20px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.sb__count{display:flex;align-items:baseline;gap:10px;margin:0}
.sb__count b{font:400 40px/.8 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.sb__count span{font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.sb__ticks{display:flex;gap:5px;margin:0 0 0 auto}
.sb__ticks i{display:block;width:9px;height:9px;border:1px solid rgba(242,240,235,.22);transform:rotate(-4deg)}
.sb__ticks i.on{background:var(--red);border-color:var(--red)}
.sb--done .sb__ticks i.on{background:var(--gold);border-color:var(--gold)}
.sb__epi{margin:0;display:grid;gap:14px;padding-left:22px;border-left:1px solid rgba(217,180,90,.45)}
.sb__epi blockquote{margin:0}
.sb__epi p{font:400 clamp(1.3rem,1.9vw,1.7rem)/1.08 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg);text-wrap:balance}
.sb__epi .cap{color:var(--fg-3)}
.sb__soon{margin-top:22px;padding-left:23px;max-width:40ch;font-size:13px;line-height:1.5;color:var(--fg-3)}
.sb__grid{list-style:none;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 16px;align-content:start}
.sb__slot{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.sb__im{position:relative;display:block;width:94px;height:94px;margin:2px 0 14px}
.sb__im svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(var(--sr))}
.sb__ghost path{fill:none;stroke:rgba(242,240,235,.17);stroke-width:1;vector-effect:non-scaling-stroke}
.sb__ghost .f{stroke:rgba(242,240,235,.08)}
.sb__ghost .k{stroke:rgba(242,240,235,.1)}
.is-got .sb__ghost{opacity:0}
.sb__no{font:500 10px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.sb__n{margin-top:7px;font:400 16px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg);white-space:nowrap}
.sb__slot:not(.is-got) .sb__n{color:rgba(242,240,235,.62)}
.sb__read{margin-top:8px;font:500 10.5px/1.4 var(--grot);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.sb__date{margin-top:2px;font:500 10.5px/1.4 var(--grot);letter-spacing:.1em;text-transform:uppercase;color:var(--red-t)}
.sb__hint{margin-top:8px;max-width:21ch;font-size:13px;line-height:1.4;color:var(--pur-t);text-decoration:underline;text-decoration-color:rgba(157,107,255,.45);text-underline-offset:.3em;text-wrap:balance}
.sb__hint--plain{color:var(--fg-2);text-decoration:none}
@media (hover:hover){a.sb__hint:hover{color:var(--fg);text-decoration-color:var(--fg)}}
.sb__slot.is-fresh .sb__seal{animation:sbStamp .5s cubic-bezier(.2,.8,.25,1) var(--fd) both}
.sb__slot.is-fresh .sb__ghost{animation:sbGone .3s ease calc(var(--fd) + .2s) backwards;opacity:0}
.sb__slot.is-fresh .sb__read,.sb__slot.is-fresh .sb__date{animation:sbRise .5s ease calc(var(--fd) + .22s) both}
@keyframes sbGone{from{opacity:1}}
.sb__note{font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.sb__folio{text-align:right;color:var(--fg-3)}
.sb__reward{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:22px;align-items:center}
.sb__reward canvas{width:100%;height:auto;border:1px solid rgba(217,180,90,.35)}
.sb__gold{color:var(--gold)}
.sb__rh{margin:6px 0 14px;font:400 26px/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.sb__acts{display:grid;gap:8px}
.sb__acts .btn{justify-content:center}
.sb--done .sb__book{border-color:rgba(217,180,90,.7)}
@media (max-width:1100px) and (min-width:1001px){.sb__l,.sb__r{padding-left:40px;padding-right:40px}.sb__side{padding-right:64px}.sb__grid{gap:32px 10px}.sb__im{width:86px;height:86px}.sb__n{font-size:14px}}
@media (max-width:1000px),(max-height:560px){.sb{display:block;padding:0}.sb__book{width:100%;height:100%;border:0}.sb__book::before{display:none}.sb__x{top:calc(6px + env(safe-area-inset-top));right:6px}.sb__spread{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.sb__spread::before,.sb__spread::after{display:none}.sb__l,.sb__r{grid-column:1;grid-row:auto;padding-left:clamp(16px,5vw,48px);padding-right:clamp(16px,5vw,48px)}.sb__head{order:1;padding-top:calc(22px + env(safe-area-inset-top));padding-right:56px}.sb__head h2{white-space:normal}.sb__ga{order:2;padding-top:36px}.sb__gb{order:3;padding-top:36px}.sb__side{order:4;padding-top:44px;padding-right:16px}.sb__note{order:5;padding-top:32px;padding-bottom:6px}.sb__folio{order:6;text-align:left;padding-top:4px;padding-bottom:calc(30px + env(safe-area-inset-bottom))}}
@media (max-width:560px){.sb__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 12px}.sb__im{width:92px;height:92px}.sb__head h2{font-size:2.6rem}.sb__prog{flex-wrap:wrap;gap:12px}.sb__ticks{margin-left:0}.sb__reward{grid-template-columns:minmax(0,1fr);gap:16px}}
@media (max-height:560px) and (min-width:561px){.sb__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.sbt,.sb__scrim,.sb__book{transition:none}.sbt.on .sbt__seal svg,.sbb.is-stamp .sbb__seal svg,.sb__slot.is-fresh .sb__seal,.sb__slot.is-fresh .sb__ghost,.sb__slot.is-fresh .sb__read,.sb__slot.is-fresh .sb__date,.sb.is-seam .sb__seam path{animation:none}}
@media (max-width:1230px){.hdr__tools:empty~.burger{margin-left:auto}}
/* ===== City sound: the header's sound button (site.js). Five hairlines leaning like rain: flat when off, a wave when on ===== */
.snd{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--fg);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.snd__w{display:flex;align-items:center;gap:3.5px;height:18px;transform:skewX(-14deg)}
.snd__w i{display:block;width:1.5px;height:100%;background:currentColor;transform:scaleY(.1);transition:transform .55s var(--ease-out),background-color .3s,opacity .3s}
.snd__w i:nth-child(1){--h:.34}.snd__w i:nth-child(2){--h:.72;transition-delay:.04s}.snd__w i:nth-child(3){--h:1;transition-delay:.08s}.snd__w i:nth-child(4){--h:.56;transition-delay:.12s}.snd__w i:nth-child(5){--h:.26;transition-delay:.16s}
.snd[data-state=off] .snd__w i{transform:scaleY(.24);opacity:.72}
.snd[data-state=on] .snd__w i{transform:scaleY(var(--h))}
.snd[data-state=armed] .snd__w i{transform:scaleY(calc(var(--h) * .55));background:var(--pur-t);opacity:.6}
.snd::after{content:"";position:absolute;left:13px;right:13px;bottom:10px;height:1.5px;background:var(--pur);transform:scaleX(0);transition:transform .5s var(--ease-out) .1s}
.snd[data-state=on]::after{transform:scaleX(1)}
.snd__tip{position:absolute;top:calc(100% + 2px);right:-4px;display:flex;align-items:center;gap:10px;padding:9px 11px 8px;background:var(--bg-2);border:1px solid var(--line-2);font:500 10px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .18s,transform .25s var(--ease-out),visibility 0s .25s}
.snd__tip::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1.5px;background:var(--pur)}
.snd__tip b{font-weight:500;color:var(--fg)}
.snd__tip em{font-style:normal;color:var(--fg-3);padding-left:10px;border-left:1px solid var(--line-2)}
.snd[data-state=on] .snd__tip em,.snd[data-state=armed] .snd__tip em{color:var(--pur-t)}
.snd.is-tip .snd__tip,.snd:focus-visible .snd__tip{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .25s var(--ease-out)}
@media (hover:hover){.snd:hover .snd__tip{opacity:1;visibility:visible;transform:none;transition:opacity .18s .25s,transform .25s var(--ease-out) .25s}.snd:hover .snd__w i{opacity:1}}
@keyframes sndHit{40%{transform:scaleY(calc(var(--h) * 1.3 + .12))}}
.snd.is-hit[data-state=on] .snd__w i{animation:sndHit .5s var(--ease-out)}
.snd.is-hit[data-state=on] .snd__w i:nth-child(2){animation-delay:.03s}.snd.is-hit[data-state=on] .snd__w i:nth-child(3){animation-delay:.06s}.snd.is-hit[data-state=on] .snd__w i:nth-child(4){animation-delay:.09s}.snd.is-hit[data-state=on] .snd__w i:nth-child(5){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){.snd__w i,.snd::after,.snd__tip{transition:none!important}.snd.is-hit .snd__w i{animation:none}}

/* ===== audit fixes ===== */
/* the header on a small phone: logo, seal book, sound and the menu all fit; the menu button never shrinks */
@media (max-width:600px){.hdr__in{gap:6px}.burger{flex:none;margin-right:-8px}.sbb{padding:0 4px;gap:6px}}
@media (max-width:359px){.brand__logo{display:none}}
.drawer__grp{margin:0;padding:18px 0 6px;color:var(--gold)}
.drawer nav .drawer__grp:first-child{padding-top:10px}
/* the verdict owns the stage: the run underneath goes dark instead of showing through */
.ag__intro:has([data-verdict]:not([hidden])){background:radial-gradient(ellipse at 50% 50%,rgba(5,5,5,.9),rgba(5,5,5,.97))}
/* the sound button reads as sound at rest: a small equalizer, not dashes */
.snd[data-state=off] .snd__w i{transform:scaleY(calc(var(--h) * .6));opacity:.8}
/* ===== Forge studio: the meme maker, Kasa your PFP and the Oni mask, each its own section with its number ===== */
.ftool__n{display:block;margin-bottom:.5em;font:500 11px/1 var(--grot);letter-spacing:.14em;color:var(--pur-t)}
.studio{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);grid-template-rows:auto 1fr;column-gap:clamp(16px,3vw,32px);align-items:start}
.studio>.panel{grid-column:2;grid-row:1/span 2}
.studio__main{display:grid;align-content:start;min-width:0}
.studio__stage{border:1px solid var(--line);background:var(--bg-2);display:flex;justify-content:center}
.studio__frame{--ar:1;position:relative;width:min(100%,calc((100svh - var(--hdr) - 210px) * var(--ar)));min-width:min(100%,280px);flex:none}
.studio__frame.is-wide{--ar:1.7778}
.studio__frame canvas{display:block;width:100%;height:auto;touch-action:pan-y;transition:opacity .25s}
.studio__frame.is-pinned canvas{touch-action:none}
.studio__frame.is-loading canvas{opacity:.72}
.studio__frame.is-drop{outline:2px dashed var(--pur);outline-offset:-6px}
.studio__acts{margin-top:16px}
.studio__acts .btn svg{width:13px;height:13px}
.studio__note{grid-column:1;grid-row:2;margin-top:10px;color:var(--fg-3);min-height:1.5em}
.studio .panel{gap:20px}
.studio__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.studio__tx{position:absolute;padding:0;margin:0;background:transparent;border:1px dashed transparent;cursor:grab;touch-action:none;transition:border-color .2s}
.studio__tx.is-drag{cursor:grabbing}
@media (hover:hover){.studio__tx:hover{border-color:rgba(242,240,235,.5)}}
.studio__tx:focus-visible,.studio__tx.is-drag{border-color:rgba(242,240,235,.7);outline:0}
.studio__tx:focus-visible{box-shadow:0 0 0 2px var(--pur)}
.mm-strip{display:flex;gap:1px;overflow-x:auto;background:var(--line);border:1px solid var(--line);scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-x:contain}
.mm-strip>*{flex:0 0 78px;aspect-ratio:1;scroll-snap-align:start}
.mm-strip button{padding:0;border:0;background:var(--bg);overflow:hidden;opacity:.6;transition:opacity .2s}
.mm-strip button img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){.mm-strip button:hover{opacity:1}}
.mm-strip button[aria-pressed="true"]{opacity:1;box-shadow:inset 0 0 0 2px var(--fg)}
.mm-strip button:focus-visible{outline:2px solid var(--pur);outline-offset:-2px}
.mm-up{position:relative;display:grid;place-items:center;align-content:center;gap:4px;background:var(--bg);cursor:var(--cur-hot,pointer);color:var(--fg-2);transition:color .2s}
.mm-up input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:inherit}
.mm-up svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.mm-up .cap{font-size:10px;color:inherit}
@media (hover:hover){.mm-up:hover{color:var(--fg)}}
.mm-up:focus-within{outline:2px solid var(--pur);outline-offset:-2px}
.mm-up[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 0 0 2px var(--fg)}
.mm-line{display:grid;grid-template-columns:minmax(0,1fr) auto}
.studio .panel>*,.studio .field{min-width:0}
.studio .field__btn{max-width:100%;flex-wrap:wrap;gap:4px .5em;white-space:normal;text-align:left;line-height:1.4;padding-block:10px}
.studio .field__btn span{white-space:nowrap}
.studio input[type=text]{width:100%;min-height:50px;padding:0 14px;background:var(--bg);border:1px solid var(--line-2);color:var(--fg);font:400 16px/1.3 var(--grot);border-radius:0}
.studio input[type=text]:focus-visible{outline:2px solid var(--pur);outline-offset:-2px}
.mm-line select{appearance:none;-webkit-appearance:none;min-height:50px;padding:0 34px 0 14px;border:1px solid var(--line-2);border-left:0;border-radius:0;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0EB' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;color:var(--fg-2);font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;cursor:var(--cur-hot,pointer);max-width:118px}
@media (hover:hover){.mm-line select:hover{color:var(--fg);border-color:var(--fg)}}
.mm-line select:focus-visible{outline:2px solid var(--pur);outline-offset:-2px}
.mm-line select option,.mm-line select optgroup{background:#111;color:var(--fg);text-transform:none;letter-spacing:0;font-size:15px}
.mm-f{display:inline-block;line-height:1;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.mm-f--classic{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.05em}
.mm-f--dokyo{font-family:var(--display);font-weight:400}
.studio__frame--pfp canvas{touch-action:pan-y}
.studio__frame--pfp.has-photo canvas{touch-action:none}
.studio__frame--pfp canvas:focus-visible{outline:2px solid var(--pur);outline-offset:-2px}
.studio__frame--pfp.is-grab,.studio__frame--pfp.is-grab .kp-h,.studio__frame--pfp.is-grab .kp-turn{cursor:grabbing}
.studio__frame--pfp.has-photo{cursor:grab}
.studio__frame--pfp{overflow:hidden}
.studio__frame--pfp.is-tap{cursor:crosshair}
.kp-h{position:absolute;padding:0;margin:0;background:transparent;border:1px dashed transparent;transform:translate(-50%,-50%) rotate(var(--r,0rad));touch-action:none;cursor:grab;transition:border-color .2s}
/* until a photo is in, a finger that lands on a piece, a glow or the knob scrolls the page like the rest of the stage */
.studio__frame--pfp:not(.has-photo) .kp-h,.studio__frame--pfp:not(.has-photo) .kp-turn{touch-action:pan-y}
.kp-h--eye{border-radius:50%;min-width:40px;min-height:40px}
@media (hover:hover){.kp-h:hover{border-color:rgba(242,240,235,.55)}}
.kp-h:focus-visible{outline:0;border-color:rgba(242,240,235,.8);box-shadow:0 0 0 2px var(--pur)}
.kp-h.is-sel{border-color:rgba(242,240,235,.3)}
.studio__frame.is-hint .kp-h--eye{border-color:rgba(242,240,235,.75)}
/* the turn knob: a ring with an arrow above the piece in hand; drag it around */
.kp-turn{position:absolute;display:grid;place-items:center;width:40px;height:40px;padding:0;margin:0;border:1px solid rgba(242,240,235,.8);border-radius:50%;background:rgba(5,5,5,.72);color:var(--fg);transform:translate(-50%,-50%);touch-action:none;cursor:grab;transition:background-color .2s,color .2s}
.kp-turn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.kp-turn:hover{background:var(--fg);color:var(--bg)}}
.kp-turn:focus-visible{outline:0;box-shadow:0 0 0 2px var(--pur)}
@media (pointer:coarse){.kp-turn{width:44px;height:44px}}
.kp-add{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);display:inline-flex;align-items:center;min-height:46px;padding:0 1.4em;border:1px solid rgba(242,240,235,.5);background:rgba(5,5,5,.78);color:var(--fg);font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:var(--cur-hot,pointer);transition:background-color .2s,border-color .2s}
@media (hover:hover){.kp-add:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}}
.kp-add:focus-within{outline:2px solid var(--pur);outline-offset:3px}
.kp-add input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:inherit}
.kp-add .on-touch{display:none}
@media (hover:none),(pointer:coarse){.kp-add .on-touch{display:inline}.kp-add .on-pointer{display:none}}
.kp-files{display:flex;flex-wrap:wrap;gap:8px}
.kp-files .btn{position:relative;justify-content:center;flex:1 1 auto;cursor:var(--cur-hot,pointer)}
.kp-files input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:inherit}
.kp-files .btn:focus-within{outline:2px solid var(--pur);outline-offset:3px}
.kp-files+.field__hint{margin-top:2px}
.kp-cam{display:none!important}
@media (pointer:coarse){.kp-cam{display:inline-flex!important}}
@media (max-width:900px){.studio{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.studio>.panel,.studio__note{grid-column:1;grid-row:auto}.studio__note{margin:0 0 14px}}
@media (max-width:900px) and (max-aspect-ratio:1/1){.studio__main{position:sticky;top:var(--hdr);z-index:2;background:var(--bg);padding-bottom:10px}.studio__frame{width:min(100%,calc(37svh * var(--ar)))}.studio__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.studio__acts .btn{justify-content:center;padding-inline:.6em}}
@media (max-width:600px){.studio .panel{padding:16px}.mm-strip>*{flex-basis:72px}.studio__row{grid-template-columns:1fr}}
/* ===== arena social: challenge a friend, the daily streak, the week board, badges ===== */
/* the challenge banner: the daily banner's frame with a vermilion edge, the challenged trial's painting on the right */
.vs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px 20px;margin-bottom:14px;padding:clamp(18px,2vw,24px) clamp(12px,1.4vw,18px) clamp(18px,2vw,24px) clamp(20px,2.6vw,32px);border:1px solid rgba(224,58,30,.4);background:var(--bg-2);overflow:hidden;isolation:isolate}
.vs__art{position:absolute;top:0;right:0;bottom:0;width:min(64%,820px);z-index:-2;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.vs__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.8}
.vs::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0B0B0B 34%,rgba(11,11,11,.72) 58%,rgba(11,11,11,.16))}
.vs::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--red),rgba(224,58,30,0))}
.vs__txt{display:grid;gap:8px;min-width:0}
.vs__k{color:var(--red-t)}
.vs__line{color:var(--fg-2);font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.5;text-wrap:pretty}
.vs__line b{font:400 clamp(1.3rem,1.9vw,1.7rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--fg)}
.vs__line b+b{color:#ffe39a;font-variant-numeric:tabular-nums}
.vs--won{border-color:rgba(217,180,90,.45)}
.vs--won::after{background:linear-gradient(var(--gold),rgba(217,180,90,.2))}
.vs--won .vs__k{color:var(--gold)}
.vs__x{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--fg-2)}
.vs__x::before,.vs__x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:currentColor;transform:rotate(45deg)}
.vs__x::after{transform:rotate(-45deg)}
@media (hover:hover){.vs__x:hover{color:var(--fg)}}
@media (max-width:600px){.vs{grid-template-columns:minmax(0,1fr);gap:16px;padding-right:clamp(20px,2.6vw,32px)}.vs__art{width:100%}.vs__art img{opacity:.62}.vs::before{background:linear-gradient(90deg,rgba(11,11,11,.97) 18%,rgba(11,11,11,.7))}.vs__go{justify-content:center}.vs__txt{padding-right:30px}.vs__x{position:absolute;top:4px;right:4px}}
/* the streak on the daily banner: a gold chip, filled once today's trial is done */
.daily__streak{display:inline-flex;align-items:center;gap:7px;margin-left:12px;padding:3px 8px 2px 7px;border:1px solid rgba(217,180,90,.42);color:var(--gold);white-space:nowrap;vertical-align:1px}
.daily__streak::before{content:"";flex:none;width:5px;height:5px;border:1px solid var(--gold);transform:rotate(45deg)}
.daily__streak.is-kept{background:rgba(217,180,90,.1)}
.daily__streak.is-kept::before{background:var(--gold)}
@media (max-width:600px){.daily__streak{display:flex;width:max-content;margin:8px 0 0}}
/* badge pips: bone for a first run, violet for cleared, gold for the great run */
.pip{display:block;flex:none;width:7px;height:7px;border:1px solid rgba(242,240,235,.34);transform:rotate(45deg)}
.pip--first.on{background:var(--fg);border-color:var(--fg)}
.pip--held.on{background:var(--pur);border-color:var(--pur-t)}
.pip--great.on{background:var(--gold);border-color:#ffe39a;box-shadow:0 0 8px rgba(217,180,90,.5)}
@keyframes pipNew{0%{transform:rotate(45deg) scale(2.4);opacity:0}55%{transform:rotate(45deg) scale(.85);opacity:1}100%{transform:rotate(45deg) scale(1)}}
.pip.is-new,.bdg__i.is-new .pip{animation:pipNew .8s var(--ease-out) .2s both}
.trial__pips{position:absolute;right:13px;bottom:16px;display:flex;gap:6px;pointer-events:none}
.trial:has(.trial__pips:not([hidden])) .trial__body{padding-right:48px}
@media (max-width:760px){.trial__pips{right:10px;bottom:13px;gap:5px}.trial:has(.trial__pips:not([hidden])) .trial__body{padding-right:40px}}
/* the panel's row: what this trial gave, and what the rest ask */
.bdg{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.bdg__i{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;line-height:1.3;color:var(--fg-3)}
.bdg__i.on{color:var(--fg)}
.bdg__k{color:var(--fg-3);margin-right:-4px}
/* the score to beat in the HUD: vermilion until it falls, then gold and struck through */
.ag__vs{min-width:0;max-width:30vw}
.ag__vs .cap{color:var(--red-t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag__vs b{display:flex;align-items:flex-end;height:clamp(1.3rem,2.2vw,1.9rem);font-size:clamp(1.02rem,1.5vw,1.35rem);color:var(--fg-2);white-space:nowrap;transform-origin:0 100%}
.ag__vs--won .cap{color:var(--gold)}
.ag__vs--won b{color:#ffe39a;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(255,227,154,.7);animation:vsWon .7s var(--ease-out) 1}
@keyframes vsWon{0%{transform:scale(1.45);text-shadow:0 0 18px rgba(255,227,154,.9)}100%{transform:none;text-shadow:none}}
/* the stage's own line: the score to beat, then how it went */
.ag__vsline{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:7px 14px 7px 12px;border:1px solid rgba(240,101,74,.42);background:rgba(224,58,30,.08);color:var(--fg);font-size:.95rem;line-height:1.35;text-align:left}
.ag__vsline::before{content:"";flex:none;width:6px;height:6px;background:var(--red-t);transform:rotate(45deg)}
.ag__vsline--win{border-color:rgba(217,180,90,.55);background:rgba(217,180,90,.1);color:#ffe39a}
.ag__vsline--win::before{background:var(--gold)}
.ag__vsline--tie{border-color:rgba(157,107,255,.5);background:rgba(157,107,255,.1)}
.ag__vsline--tie::before{background:var(--pur)}
/* the week board: three views, and the week's number one wears the title */
.board__seg{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.board__shogun{margin-left:8px;padding:3px 5px 2px;background:var(--gold);color:#050505;font:600 9px/1 var(--grot);font-style:normal;letter-spacing:.14em;text-transform:uppercase;vertical-align:2px}
/* the result panel's notes: the challenge, the streak, a new badge */
.rnotes{list-style:none;margin:4px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.rnote{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.4;color:var(--fg)}
.rnote i{flex:none;width:7px;height:7px;background:var(--fg-3);transform:translateY(-1px) rotate(45deg)}
.rnote--win{color:#ffe39a}.rnote--win i,.rnote--streak i{background:var(--gold)}
.rnote--lose i{background:var(--red-t)}.rnote--tie i{background:var(--pur)}.rnote--badge i{background:var(--pur-t)}
/* challenge a friend: one button, and on a computer a small box with the link */
.arena__vs{display:grid;gap:10px}
.vs__send{justify-content:center;border-color:rgba(240,101,74,.5)}
.vs__send::before{content:"";flex:none;width:6px;height:6px;background:var(--red-t);transform:rotate(45deg)}
.vs__send[aria-expanded="true"]{border-color:var(--red-t);background:rgba(224,58,30,.08)}
@media (hover:hover){.vs__send:hover{border-color:var(--red-t);background:rgba(224,58,30,.08)}}
.vsx{display:grid;gap:10px;padding:14px;border:1px solid var(--line);background:var(--bg)}
.vsx .field__l{font-size:.86rem;line-height:1.4;color:var(--fg-2)}
.vsx__row{display:flex;gap:8px}
.vsx__row input{flex:1 1 auto;min-width:0;width:0;min-height:44px;padding:0 12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--fg-2);font:400 .88rem var(--grot);text-overflow:ellipsis}
.vsx__row input:focus{outline:2px solid var(--pur);outline-offset:0;border-color:transparent;color:var(--fg)}
.vsx__row .btn{flex:0 0 auto;justify-content:center}
.vsx__alt{display:flex;flex-wrap:wrap;gap:4px 22px}
.vsx__alt .tlink{display:inline-flex;align-items:center;min-height:40px}
@media (max-width:380px){.vsx__row{flex-wrap:wrap}.vsx__row input{width:100%}.vsx__row .btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.pip.is-new,.bdg__i.is-new .pip,.ag__vs--won b{animation:none}}
/* ===== Ronin passport (the seal book's second page) + the Wolfpack kit (wolfpack.html) ===== */
/* the book's two pages, Seals and Passport: a row above both, the marker a small hanko square like the seal ticks */
.sb__spread{grid-template-rows:auto auto auto 1fr}
.sb__tabs{grid-column:1/-1;grid-row:1;display:flex;gap:28px;padding:12px 58px 0}
.sb__head,.sb__side{grid-row:2}.sb__ga,.sb__gb{grid-row:3}.sb__note,.sb__folio{grid-row:4}
.sb__head{padding-top:16px}
/* the row costs the spread some height: the book still fits a 900px screen without scrolling */
@media (min-width:1001px) and (min-height:561px){.sb__tabs{padding-top:6px}.sb__tabs button{min-height:40px}.sb__head{padding-top:6px;gap:12px}.sb__ga,.sb__gb{padding-top:24px}.sb__grid{row-gap:22px}.sb__note,.sb__folio{padding-top:14px;padding-bottom:20px}}
.sb__tabs button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);transition:color .2s}
.sb__tabs i{display:block;width:8px;height:8px;border:1px solid rgba(242,240,235,.32);transform:rotate(-4deg);transition:background-color .2s,border-color .2s}
.sb__tabs [aria-pressed=true]{color:var(--fg)}
.sb__tabs [aria-pressed=true] i{background:var(--red);border-color:var(--red)}
@media (hover:hover){.sb__tabs button:hover{color:var(--fg)}}
.sp{grid-column:1/-1;grid-row:2/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start}
.sp>div{min-width:0}
.sp__l{grid-column:1;display:grid;gap:14px;align-content:start;padding-top:16px;padding-bottom:36px}
.sp__r{grid-column:2;display:grid;gap:26px;align-content:start;padding-top:40px;padding-bottom:36px}
.sp__h{font-size:clamp(2.3rem,3.4vw,3.1rem);line-height:.9}
.sp__h:focus{outline:0}
.sp__name{display:grid;gap:6px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.sp__name input{width:100%;min-height:52px;margin:0;padding:4px 0 6px;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;color:var(--fg);font:400 clamp(1.8rem,2.7vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;transition:border-color .2s}
.sp__name input::placeholder{color:rgba(242,240,235,.28)}
.sp__name input:focus{outline:0;border-bottom-color:var(--pur);box-shadow:0 1px 0 var(--pur)}
.sp__nh{font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.sp__rank{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-top:10px}
.sp__seal{display:block;width:92px;height:92px}
.sp__seal svg{width:100%;height:100%;overflow:visible;transform:rotate(var(--sr))}
.sp__rank.is-new .sp__seal svg{animation:sbStamp .5s cubic-bezier(.2,.8,.25,1) .3s both}
.sp__rn{color:var(--gold)}
.sp__rn b{font-weight:500;color:var(--red-t)}
.sp__rname{margin-top:6px;font:400 clamp(2.3rem,3.3vw,3rem)/.86 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg)}
.sp__rread{margin-top:8px;font-size:14px;line-height:1.4;color:var(--fg-2)}
.sp__ladder{position:relative;list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.sp__ladder::before{content:"";position:absolute;left:10%;right:10%;top:5px;height:1px;background:var(--line-2)}
.sp__ladder li{position:relative;display:grid;justify-items:center;gap:10px;font:500 10px/1.2 var(--grot);letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--fg-3)}
.sp__ladder i{display:block;width:11px;height:11px;border:1px solid rgba(242,240,235,.3);background:#0C0A0A;transform:rotate(-4deg)}
.sp__ladder .is-past{color:var(--fg-2)}.sp__ladder .is-past i{background:var(--gold);border-color:var(--gold)}
.sp__ladder .is-now{color:var(--fg)}.sp__ladder .is-now i{background:var(--red);border-color:var(--red);transform:rotate(-4deg) scale(1.25)}
.sp__rec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:14px 0 0;background:var(--line);border:1px solid var(--line)}
.sp__rec div{display:grid;align-content:space-between;gap:10px;padding:11px 10px 10px;background:#0C0A0A}
.sp__rec dt{font:500 9.5px/1.3 var(--grot);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.sp__rec dd{margin:0;font:400 28px/.85 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.sp__rec small{margin-left:2px;font-size:14px;color:var(--fg-3)}
.sp__next{display:grid;gap:14px}
.sp__nh{color:var(--fg-2)}.sp__nh b{font-weight:500;color:var(--gold)}
.sp__req{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.sp__req li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:baseline;font-size:14px;line-height:1.3;color:var(--fg-2)}
.sp__req b{font:500 12px/1 var(--grot);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--fg)}
.sp__req i{grid-column:1/-1;position:relative;height:2px;background:rgba(242,240,235,.1)}
.sp__req i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);background:var(--pur)}
.sp__req .is-met{color:var(--fg)}.sp__req .is-met b{color:var(--gold)}.sp__req .is-met i::after{background:var(--gold)}
.sp__go{justify-self:start;margin-top:2px}
.sp__top{font-size:14px;line-height:1.5;color:var(--fg-2);max-width:40ch}
.sp__card{display:grid;gap:12px}
.sp__card canvas{width:100%;height:auto;border:1px solid rgba(217,180,90,.35)}
.sp__acts{display:flex;flex-wrap:wrap;gap:8px}
.sp__acts svg{width:14px;height:14px;fill:currentColor}
.sp .sp__note{grid-row:auto;align-self:start;margin:0;padding:0}
@media (max-width:1100px) and (min-width:1001px){.sb__tabs{padding-left:40px;padding-right:40px}.sp__rec dt{font-size:9px;letter-spacing:.06em}}
@media (max-width:1000px),(max-height:560px){.sb__spread{grid-template-rows:none}.sb__head,.sb__side,.sb__ga,.sb__gb,.sb__note,.sb__folio{grid-row:auto}.sb__tabs{order:0;grid-row:auto;gap:24px;padding:calc(6px + env(safe-area-inset-top)) 60px 0 clamp(16px,5vw,48px)}.sb__head{padding-top:18px}.sp{order:1;grid-row:auto;grid-template-columns:minmax(0,1fr)}.sp__l,.sp__r{grid-column:1}.sp__r{grid-row:2}.sp__l{padding-top:18px;padding-bottom:0}.sp__r{padding-top:30px;padding-bottom:calc(30px + env(safe-area-inset-bottom))}}
@media (max-width:560px){.sp__rec{grid-template-columns:repeat(6,minmax(0,1fr))}.sp__rec div{grid-column:span 2}.sp__rec div:nth-child(n+4){grid-column:span 3}.sp__rank{gap:18px}.sp__seal{width:80px;height:80px}.sp__ladder li{font-size:9px;letter-spacing:.06em}.sp__acts{display:grid}.sp__acts .btn{justify-content:center}}
@media (prefers-reduced-motion:reduce){.sp__rank.is-new .sp__seal svg{animation:none}}

/* the kit: one section, two tabs. Raid kit: one post at a time, the picture left and the words right */
.wk__tabs{margin-bottom:18px}
.rk{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border:1px solid var(--line);background:var(--bg-2)}
/* the picture fills its column: 16:9 at least, taller when the words need more room */
.rk__stage{min-width:0;display:grid;grid-template-rows:1fr auto;background:#000;border-right:1px solid var(--line)}
.rk__art{position:relative;align-self:stretch;width:100%;aspect-ratio:16/9;overflow:hidden;touch-action:pan-y;background:#000}
.rk__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .22s ease,transform .5s var(--ease-out)}
.rk.is-swap .rk__art img{opacity:0;transform:translateX(calc(var(--dir,1) * -10px))}
.rk__bar{display:flex;padding:0 12px;background:var(--bg-2)}
.rk__bar button{flex:1;min-width:0;height:34px;padding:0 2px;border:0;background:none;display:grid;align-items:center}
.rk__bar i{display:block;height:2px;background:rgba(242,240,235,.16);transition:background-color .25s}
.rk__bar [aria-current] i{background:var(--pur)}
@media (hover:hover){.rk__bar button:hover i{background:rgba(242,240,235,.4)}.rk__bar button[aria-current]:hover i{background:var(--pur)}}
.rk__body{min-width:0;display:grid;grid-template-rows:auto 1fr auto auto;gap:20px;padding:20px 26px 24px}
.rk__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rk__n b{font-weight:500;color:var(--fg)}
.rk__nav{display:flex;gap:6px}
.rk__arw{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-2);background:none;color:var(--fg);transition:border-color .2s,background-color .2s}
.rk__arw svg{width:18px;height:18px}
@media (hover:hover){.rk__arw:hover{border-color:var(--fg);background:rgba(242,240,235,.05)}}
.rk__post{align-self:center;display:grid;align-content:center;transition:opacity .18s ease,transform .4s var(--ease-out)}
.rk.is-swap .rk__post{opacity:0;transform:translateX(calc(var(--dir,1) * -8px))}
.rk__q{margin:0;padding-left:18px;border-left:1px solid rgba(157,107,255,.6)}
.rk__q p{font:400 clamp(1.3rem,1.85vw,1.8rem)/1.04 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg);text-wrap:balance}
.rk__hook{margin-top:16px;padding-left:19px;font-size:1rem;line-height:1.45;color:var(--fg)}
.rk__tags{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:6px;padding-left:19px;font:500 11px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--pur-t)}
.rk__len{color:var(--fg-3);font-variant-numeric:tabular-nums}
.rk__acts{display:flex;flex-wrap:wrap;gap:8px}
.rk__acts svg{width:14px;height:14px;fill:currentColor}
.rk__acts .is-done{border-color:var(--gold);color:var(--gold)}
.rk__note{font-size:12.5px;line-height:1.5;color:var(--fg-3)}
@media (max-width:900px){.rk{grid-template-columns:minmax(0,1fr)}.rk__stage{border-right:0;border-bottom:1px solid var(--line)}.rk__body{gap:18px;padding:16px 16px 20px}.rk__acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rk__acts .btn{justify-content:center;padding:0 .8em}.rk__acts .btn--pur{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.rk__art img,.rk__post{transition:none}}
/* stickers and emoji: the pixel pack in a hairline grid, each one a download */
.ek__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ek__e{display:grid;justify-items:center;gap:12px;height:100%;padding:24px 8px 18px;background:var(--bg);color:var(--fg);text-decoration:none;transition:background-color .2s}
.ek__im{display:block;width:clamp(64px,6.4vw,92px);aspect-ratio:1}
.ek__im img{width:100%;height:100%;transition:transform .35s var(--ease-out)}
.ek__n{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);transition:color .2s}
.ek__n::after{content:"";width:9px;height:9px;background:currentColor;opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v7M3 5l3 3 3-3M1.5 11h9' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v7M3 5l3 3 3-3M1.5 11h9' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.ek__e:hover{background:#0F0C16}.ek__e:hover img{transform:translateY(-4px)}.ek__e:hover .ek__n{color:var(--fg)}}
.ek__e:focus-visible{outline-offset:-2px}
.ek__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;margin-top:18px}
.ek__how{font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.ek__foot .btn svg{width:14px;height:14px;fill:currentColor}
@media (max-width:600px){.ek__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ek__e{padding:20px 6px 16px}.ek__im{width:clamp(60px,19vw,80px)}}
@media (prefers-reduced-motion:reduce){.ek__im img{transition:none}}
/* ===== Lore motion comic (comic.js): each chapter a stage that pins while you scroll; camera, words and a gold seam follow the scroll. Without it (no JS, reduced motion) the reel below stays calm and static ===== */
.reel__kj{position:absolute;right:var(--gut);top:calc(var(--hdr) + 52px);z-index:1;width:clamp(38px,3.4vw,54px);pointer-events:none}
.reel__kj svg{width:100%;height:auto;fill:var(--gold)}
.reel__kj::before{content:"";position:absolute;inset:-70% -80%;z-index:-1;background:radial-gradient(closest-side,rgba(5,5,5,.5),rgba(5,5,5,0))}
.mc .reel__kj{top:calc(var(--hdr) + var(--mc-bt) + clamp(22px,4.4vh,48px));z-index:4}
.reel.mc{z-index:1;--mc-bt:clamp(30px,4.4vh,40px);--mc-bb:76px}
:root.mc-on{scroll-snap-type:none}
.mc .reel__ch{display:flow-root;height:auto;min-height:0;padding:0;overflow:visible;border:0;scroll-snap-align:none}
.mc .reel__ch::before{content:none}
.mc .reel__st{position:sticky;top:0;height:100svh;overflow:hidden;visibility:hidden;box-shadow:0 160px 0 var(--bg)}
.mc .reel__ch:last-of-type .reel__st{box-shadow:none}
.mc .reel__st.is-live{visibility:visible}
.mc .reel__st .mc-sr,.mc .reel__meta{visibility:visible}
.mc .reel__art{position:absolute;inset:0;overflow:hidden;z-index:auto}
.mc .reel__art img,.mc-shard img{position:absolute;left:0;top:0;max-width:none;object-fit:cover;transform-origin:0 0}
.mc .is-live .reel__art img{will-change:transform}
.mc .reel__art::after,.mc-shard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.92) 0,rgba(5,5,5,.5) 24%,rgba(5,5,5,0) 52%),linear-gradient(to bottom,rgba(5,5,5,.55),rgba(5,5,5,0) 26%)}
.mc-shard{position:absolute;inset:0;overflow:hidden;visibility:hidden}
.mc .is-live .mc-shard{will-change:transform,opacity}
.mc-shard svg,.mc-seam svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.mc-seam{position:absolute;inset:0;overflow:hidden;visibility:hidden;z-index:2}
.mc-seam__in{position:absolute;inset:0}
.mc-shard path,.mc-seam path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.mc-shard .g,.mc-seam .g{stroke:rgba(217,180,90,.1);stroke-width:9}
.mc-shard .k,.mc-seam .k{stroke:rgba(0,0,0,.55);stroke-width:5}
.mc-shard .f,.mc-seam .f{fill:var(--gold);stroke:#A8823A;stroke-width:.5}
.mc-shard .h,.mc-seam .h{stroke:#FFF1CC;stroke-width:.7;opacity:.75}
.mc-tip{position:absolute;left:0;top:0;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,214,.95) 0,rgba(242,210,130,.6) 14%,rgba(217,180,90,.16) 44%,rgba(217,180,90,0) 100%);visibility:hidden;z-index:3;pointer-events:none}
.mc .reel__cap{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--mc-bb) + clamp(22px,5.4vh,60px));z-index:4;opacity:1;transform:none;transition:none;will-change:opacity}
.mc .reel__words .w{display:inline-block;opacity:0;transform:translateY(.34em)}
.mc .reel__cap p{font-size:clamp(1.4rem,min(3vw,5.4vh),3rem)}.mc .reel__num{font-size:clamp(3rem,min(8vw,13vh),7.5rem)}
.mc-sr,.mc .reel__meta{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mc-bar{position:fixed;left:0;right:0;z-index:20;background:var(--bg);pointer-events:none}
.mc-bar--t{top:var(--hdr);height:var(--mc-bt);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gut);transform:translate3d(0,-101%,0)}
.mc-bar--b{bottom:0;height:var(--mc-bb);border-top:1px solid var(--line);transform:translate3d(0,101%,0)}
.mc-bar .cap{color:var(--fg-3)}.mc-bar b{color:var(--fg);font-weight:500}
.mc-bar__p{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);overflow:hidden}
.mc-bar__p i{position:absolute;inset:0;background:var(--pur);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.mc:not(.mc-in) .reel__nav{opacity:0;visibility:hidden}
@media (min-width:1025px){.mc .reel__nav{background:none;border-color:transparent;bottom:calc((var(--mc-bb) - 58px) / 2)}}
@media (max-width:1024px){.reel.mc{--mc-bb:calc(53px + max(8px,env(safe-area-inset-bottom)))}}
@media (max-height:500px){.reel.mc{--mc-bt:0px}.mc-bar--t{display:none}.mc .reel__cap{bottom:calc(var(--mc-bb) + 14px)}}
/* an upright screen: a chapter whose subject sits low (12, the flask) takes its line to the top, over the dark */
@media (max-aspect-ratio:4/5){.reel:not(.mc) .reel__ch[data-cap=top]{align-items:start;padding-top:calc(var(--hdr) + 52px);padding-right:calc(var(--gut) + 50px)}.reel:not(.mc) .reel__ch[data-cap=top]::before{background:linear-gradient(to bottom,rgba(5,5,5,.94) 0,rgba(5,5,5,.4) 34%,rgba(5,5,5,0) 62%),linear-gradient(to top,rgba(5,5,5,.5),rgba(5,5,5,0) 20%)}.mc [data-cap=top] .reel__cap{top:calc(var(--hdr) + var(--mc-bt) + clamp(22px,4.4vh,48px));bottom:auto;right:calc(var(--gut) + 50px)}.mc [data-cap=top] .reel__art::after{background:linear-gradient(to bottom,rgba(5,5,5,.9) 0,rgba(5,5,5,.5) 30%,rgba(5,5,5,0) 56%),linear-gradient(to top,rgba(5,5,5,.45),rgba(5,5,5,0) 18%)}}

/* ===== living game cards (assets/js/cards.js) ===== */
.card-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.trial .card-clip{transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.trial.is-clip .card-clip{opacity:.9}
@media (hover:hover){.trial:hover .card-clip{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.card-clip{display:none}}
/* ===== fx.js: depth in the home hero (the characters over a fill of the city, both hidden until they line up) and the kintsugi click ===== */
.fxd-fg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;pointer-events:none;visibility:hidden;opacity:0;user-select:none}
.js .hero__art img.fxd-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transform:none;transition:none;pointer-events:none;visibility:hidden}
.fxd-on .fxd-fg,.fxd-deep .hero__art img.fxd-fill{visibility:visible;opacity:1}
.fxd-on .hero__art,.fxd-on .fxd-fg{will-change:transform}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){[data-hero] .hero__art,[data-hero] .fxd-fg{transform:scale(1.02)}.fxd-on .fxd-fg{transition:opacity .5s ease}}
.fx-kin{position:fixed;inset:0;width:100%;height:100%;z-index:120;pointer-events:none;display:none;contain:strict}
@media (prefers-reduced-motion:reduce){.fxd-fg,.hero__art img.fxd-fill,.fx-kin{display:none}}

/* ===== Ask the Ronin, the five hidden seals, the kasa held (assets/js/ronin.js) ===== */
/* Ask the Ronin: the home's Ronin block. Question chips, his answer typed in word by word, the portrait's eyes answering */
.ask__panel{display:grid;gap:18px;align-content:center;min-width:0;padding:clamp(28px,4vw,64px) var(--gut);border-left:1px solid var(--line)}
.ask__kick{display:flex;align-items:center;gap:14px;color:var(--gold)}
.ask__kick::before{content:"";width:28px;height:1px;background:var(--gold)}
.ask__qs{display:none;flex-wrap:wrap;gap:8px;max-width:560px}
/* the chips show once ronin.js has wired them (ask--live), not on .js alone: the page head sets that (A8) */
.ask--live .ask__qs{display:flex}
.ask__chip{min-height:44px;padding:0 16px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font:500 14px/1 var(--grot);letter-spacing:.01em;cursor:var(--cur-hot,pointer);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .2s,border-color .2s,background-color .2s}
@media (hover:hover){.ask__chip:hover{color:var(--fg);border-color:rgba(242,240,235,.6)}}
.ask__chip[aria-pressed=true]{color:var(--fg);border-color:var(--pur);background:rgba(157,107,255,.14)}
.ask__chip:focus-visible{outline:2px solid var(--pur);outline-offset:2px}
.ask__you{margin-top:12px;font:400 clamp(1.05rem,1.35vw,1.3rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--fg-3)}
.ask__you.is-q{color:var(--pur-t)}
.ask__you.is-q::before{content:"\201C"}.ask__you.is-q::after{content:"\201D"}
.ask__a{max-width:min(21em,100%);font:400 clamp(1.5rem,2.7vw,2.7rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;text-wrap:pretty;text-shadow:var(--glow)}
.ask__a::before{content:"\201C"}.ask__a::after{content:"\201D"}
.ask__a.is-t::before,.ask__a.is-t::after{content:none}
.ask__w{display:inline-block;animation:askW .6s var(--ease-out) var(--d) both}
@keyframes askW{from{opacity:0;transform:translateY(.3em);text-shadow:0 0 24px rgba(201,176,255,.95)}to{opacity:1;transform:none;text-shadow:0 0 40px rgba(157,107,255,.35)}}
.ask__acts{margin-top:2px}
.ask__sn{max-width:56ch;color:var(--fg-3)}
.ask__art img{transition:transform 2.6s var(--ease-out)}
.ask.is-met .ask__art img{transform:scale(1.04)}
.ask__eyes{position:absolute;left:52%;top:40%;width:34%;height:14%;z-index:1;transform:translate(-50%,-50%);pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(20% 46% at 28% 50%,rgba(244,238,255,.95),rgba(181,139,255,.55) 42%,rgba(157,107,255,0) 100%),radial-gradient(20% 46% at 72% 52%,rgba(244,238,255,.95),rgba(181,139,255,.55) 42%,rgba(157,107,255,0) 100%),radial-gradient(closest-side,rgba(157,107,255,.5),rgba(157,107,255,0));transition:opacity 1.8s ease}
.ask.is-speak .ask__eyes{opacity:1;transition-duration:.35s}
.ask.is-rest .ask__eyes{opacity:.42}
@media (max-width:900px){.ask__panel{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:560px){.ask--live .ask__qs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ask__chip{padding:0 14px;text-align:left}.ask__chip:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:420px){.ask__chip{font-size:13.5px}.ask__acts{display:grid;grid-template-columns:1fr 1fr}.ask__acts .btn{justify-content:center}}
@media (prefers-reduced-motion:reduce){.ask__w{animation:none}.ask__art img{transition:none}.ask.is-met .ask__art img{transform:none}}

/* the seal book's hidden row: five bonus seals in gold ink, ??? until found. On the right page, under the twelve */
.sb__spread{grid-template-rows:auto auto auto auto 1fr}
.sb__hid{grid-row:4;padding-top:30px}
.sb__note,.sb__folio{grid-row:5}
.sb__hh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-top:14px;border-top:1px solid rgba(217,180,90,.24)}
.sb__hk{color:var(--gold)}
.sb__hc{margin:0;font:500 11px/1.5 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.sb__hc b{font-weight:500;color:var(--fg)}
.sb__hn{flex-basis:100%;margin:0;font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.sb__hg{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sb__hs .sb__im{width:58px;height:58px;margin:0 0 10px}
.sb__hs .sb__n{margin-top:0;min-height:2.1em;font-size:13px;line-height:1.05;white-space:normal;text-wrap:balance}
.sb__hs:not(.is-got) .sb__n{color:rgba(242,240,235,.3);letter-spacing:.14em}
.sb__hs .sb__read{margin-top:6px;font-size:9.5px;letter-spacing:.08em;text-wrap:balance}
.sb__hs .sb__date{font-size:9.5px;color:var(--gold)}
.sb__ghost .sb__qm{fill:rgba(242,240,235,.22);font:400 38px var(--display)}
.sbt--hid{border-color:rgba(217,180,90,.8)}.sbt--hid .sbt__k{color:var(--gold)}
@media (min-width:1001px) and (min-height:561px){.sb__hid{padding-top:22px}}
@media (max-width:1000px),(max-height:560px){.sb__spread{grid-template-rows:none}.sb__hid{order:3;grid-row:auto;padding-top:40px}.sb__note,.sb__folio{grid-row:auto}}
@media (max-width:560px){.sb__hg{gap:6px}.sb__hs .sb__im{width:52px;height:52px}.sb__hs .sb__n{font-size:12px}.sb__hs .sb__read{display:none}.sb__hs .sb__date{letter-spacing:.03em}}

/* secrets: overlays that never take a tap (navigation always works) and never loop. With reduced motion (the site's global rule
   cuts every animation short) they simply appear and go */
.egg,.fearlay{pointer-events:none}
.fearlay p{margin-left:auto;margin-right:auto}
/* 1 Hachi runs along the bottom of the screen, hopping */
.egg--run{position:fixed;left:0;right:0;bottom:0;height:0;z-index:66}
.egg__go{position:absolute;left:0;bottom:calc(12px + env(safe-area-inset-bottom));width:clamp(78px,9vw,132px);transform:translate3d(-110%,0,0)}
.egg__go::after{content:"";position:absolute;left:16%;right:16%;bottom:-4px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0))}
.egg__hop{position:relative;z-index:1;transform-origin:50% 100%}
.egg__hop img{display:block;width:100%;height:auto}
.egg--run.on .egg__go{animation:eggGo 2.7s cubic-bezier(.4,0,.62,1) forwards}
.egg--run.on .egg__hop{animation:eggHop .27s ease-in-out 10 alternate}
@keyframes eggGo{to{transform:translate3d(calc(100vw + 10%),0,0)}}
@keyframes eggHop{from{transform:translateY(0) rotate(-6deg) scaleY(.94)}to{transform:translateY(-24%) rotate(5deg) scaleY(1.03)}}
/* 2 F.E.A.R.: the red screen stutters once, holds, and lets go */
.fearlay.is-flick{animation:fearFlick 2.3s linear both}
.fearlay.is-flick b{animation:fearJit .42s steps(3,end) both}
@keyframes fearFlick{0%{opacity:0;visibility:visible}6%{opacity:1}11%{opacity:.4}17%{opacity:1}84%{opacity:1;visibility:visible}100%{opacity:0;visibility:visible}}
@keyframes fearJit{0%{transform:translateX(-10px)}40%{transform:translateX(7px)}80%{transform:translateX(-3px)}100%{transform:none}}
/* 3 the moon answers: a ring for each tap, a bloom on the third, one line under it */
.egg-moon{position:absolute;z-index:2;width:var(--mr);height:var(--mr);margin:calc(var(--mr) / -2) 0 0 calc(var(--mr) / -2);border-radius:50%;pointer-events:none}
.egg-moon--ping{border:1px solid rgba(236,228,255,.85);animation:moonPing .9s var(--ease-out) forwards}
.egg-moon--bloom{mix-blend-mode:screen;background:radial-gradient(closest-side,#fff,rgba(240,232,255,.8) 22%,rgba(181,139,255,.34) 55%,rgba(157,107,255,0));animation:moonBloom 3.6s ease-out forwards}
.egg-moon--ring{border:1.5px solid rgba(242,240,235,.9);box-shadow:0 0 18px rgba(201,176,255,.6);animation:moonRing 1.5s var(--ease-out) forwards}
@keyframes moonRing{from{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(3.4)}}
@keyframes moonPing{from{opacity:1;transform:scale(.45)}to{opacity:0;transform:scale(1.55)}}
@keyframes moonBloom{0%{opacity:0;transform:scale(.5)}14%{opacity:1;transform:scale(2.5)}62%{opacity:.85;transform:scale(2.2)}100%{opacity:0;transform:scale(2.7)}}
.egg-moon__line{position:absolute;z-index:3;margin:0;white-space:nowrap;font:400 clamp(1.1rem,2vw,1.7rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--fg);text-shadow:0 0 24px rgba(157,107,255,.85),0 2px 12px rgba(0,0,0,.9);opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .8s var(--ease-out);pointer-events:none}
.egg-moon__line.on{opacity:1;transform:none}
/* 4 the kasa held: the eyes fill with light for three seconds, then flare */
.brand{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.kasa__hat{transition:stroke .5s ease}
.kasa__eyes path{transition:fill .5s ease}
.kasa__eyes ellipse{transform-box:fill-box;transform-origin:50% 50%;transition:transform .5s ease}
.brand.is-hold .kasa__hat{stroke:var(--gold);transition:stroke 3s linear}
.brand.is-hold .kasa__eyes path{fill:#F4EEFF;transition:fill 3s linear}
.brand.is-hold .kasa__eyes ellipse{transform:scale(2);transition:transform 3s linear}
.brand.is-held .kasa__hat{stroke:var(--gold)}
.brand.is-held .kasa__eyes path{fill:#fff}
.brand.is-held .kasa__eyes ellipse{transform:scale(2.8)}
.egg-tag{position:fixed;z-index:66;left:var(--gut);top:calc(var(--hdr) + 10px);max-width:calc(100vw - 32px);margin:0;padding:10px 14px;background:#0C0A0A;border:1px solid rgba(217,180,90,.55);font:500 13px/1.4 var(--grot);color:var(--fg-2);opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s var(--ease-out)}
.egg-tag b{font-weight:500;color:var(--fg)}
.egg-tag.on{opacity:1;transform:none}
/* 5 the last page: Hachi peeks up from the bottom edge */
.egg--peek{position:fixed;z-index:66;bottom:0;left:clamp(16px,14vw,220px);width:clamp(104px,12vw,176px);display:grid;justify-items:center}
.egg__say{margin:0 0 8px;padding:8px 12px;background:#0C0A0A;border:1px solid var(--line-2);font:500 13px/1.3 var(--grot);color:var(--fg);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s var(--ease-out)}
.egg__hachi{width:100%;aspect-ratio:278/172;overflow:hidden}
.egg__hachi img{display:block;width:100%;height:auto;transform:translateY(100%);transition:transform .9s var(--ease-out)}
.egg--peek.on .egg__hachi img{transform:translateY(3%)}
.egg--peek.on .egg__say{opacity:1;transform:none;transition-delay:.7s}
.egg--peek.out .egg__hachi img{transform:translateY(100%);transition:transform .6s ease-in}
.egg--peek.out .egg__say{opacity:0;transform:translateY(6px);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.egg__go{left:50%;transform:translateX(-50%);opacity:0}.egg--run.on .egg__go{animation:none;opacity:1}.egg--run.on .egg__hop{animation:none}.fearlay.is-flick,.fearlay.is-flick b{animation:none}.egg-moon--ping,.egg-moon--ring{animation:none;opacity:0}.egg-moon--bloom{animation:none;opacity:.9;transform:scale(2.3)}.egg-moon__line{transform:none}.brand.is-hold .kasa__eyes ellipse,.brand.is-held .kasa__eyes ellipse{transform:none}.egg-tag,.egg__say{transform:none}.egg__hachi img,.egg--peek.on .egg__hachi img,.egg--peek.out .egg__hachi img{transform:none;opacity:0;transition:opacity .4s ease}.egg--peek.on .egg__hachi img{opacity:1}.egg--peek.on.out .egg__hachi img{opacity:0}}

/* ===== LANDSCAPE PHONES: Spirit Pit, Wolfpack Rush, Hachi Hop (a phone on its side keeps a phone's HUD) ===== */
@media (max-height:600px) and (orientation:landscape){
body.arena-live [data-stage][data-game="wolfpack"] .ag__hud,body.arena-live [data-stage][data-game="hop"] .ag__hud{padding:5px calc(58px + max(6px,env(safe-area-inset-right))) 5px max(14px,env(safe-area-inset-left));gap:22px;align-items:center}
body.arena-live [data-stage][data-game="wolfpack"] .ag__stat,body.arena-live [data-stage][data-game="hop"] .ag__stat,body.arena-live [data-stage][data-game="pit"] .ag__stat:not(.ag__stat--fear){display:flex;align-items:baseline;gap:7px}
body.arena-live [data-stage][data-game="wolfpack"] .ag__stat b,body.arena-live [data-stage][data-game="hop"] .ag__stat b,body.arena-live [data-stage][data-game="pit"] .ag__stat b{font-size:1.2rem}
body.arena-live [data-stage][data-game="pit"] .ag__hud{display:grid;grid-template-columns:auto 1fr;justify-items:start;align-items:center;row-gap:2px;padding:9px calc(58px + max(6px,env(safe-area-inset-right))) 8px max(14px,env(safe-area-inset-left));background:none}
body.arena-live [data-stage][data-game="pit"] .ag__stat{grid-column:1}
body.arena-live [data-stage][data-game="pit"] .ag__stat--fear{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:start;margin:0}
body.arena-live [data-stage][data-game="pit"] .ag__quit,body.arena-live [data-stage][data-game="wolfpack"] .ag__quit,body.arena-live [data-stage][data-game="hop"] .ag__quit{font-size:0;letter-spacing:0;padding:0;width:44px;height:44px;min-height:44px;right:max(6px,env(safe-area-inset-right));top:4px}
body.arena-live [data-stage][data-game="pit"] .ag__quit::before,body.arena-live [data-stage][data-game="wolfpack"] .ag__quit::before,body.arena-live [data-stage][data-game="hop"] .ag__quit::before{content:"\2715";font:400 1.05rem/42px var(--grot);color:var(--fg-2);display:block;text-align:center}
}
/* ===== round 19: the home page gets its world back; the live X feed ===== */
.titlecard__in--solo{grid-template-columns:minmax(0,1fr) auto;align-items:end}
@media (max-width:760px){.titlecard__in--solo{grid-template-columns:1fr}}
.more__idx{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:900px){.more__idx{grid-template-columns:repeat(3,minmax(0,1fr))}}
.xlive{max-height:760px;overflow:auto;border:1px solid var(--line);background:var(--bg-2);padding:6px 12px;scrollbar-width:thin}
.xlive>a{display:block;padding:16px;color:var(--fg-2)}
/* while X draws the posts the box is laid out for its widget but folded away: the card stays in view (QA Q10) */
.xlive.is-wait{height:0;padding:0;border:0;overflow:hidden;visibility:hidden}
.xlive__note{align-self:center;color:var(--fg-2)}
/* the footer 度胸 hides the Hachi secret: a thumb-sized target around it */
.ftr__k{box-sizing:content-box;padding:10px;margin:-10px -10px -10px calc(.4em - 10px);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* ===== round 22 ===== */
/* the seal toast on a phone: a compact chip in the corner, not a banner over the page */
@media (max-width:600px){.sbt{left:auto;right:10px;width:min(300px,calc(100vw - 20px));gap:12px;padding:10px 12px 10px 10px}.sbt__seal{width:40px;height:40px}.sbt__n{font-size:17px}.sbt__l{font-size:12px;line-height:1.35}}
/* a landscape phone: the seal toast stays small in its corner, off the trial's Begin button */
@media (max-height:560px){.sbt{left:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:min(280px,42vw);gap:10px;padding:8px 10px}.sbt__seal{width:34px;height:34px}.sbt__n{font-size:15px}.sbt__l{font-size:11.5px;line-height:1.3}}
/* the home page on a phone: each character with its own text (names once), the lookbook as a swipe row */
@media (max-width:760px){
.home #three{display:flex;flex-direction:column}
.home #three .cast,.home #three .three{display:contents}
.home #three .cast__cell:nth-child(1){order:1}.home #three .three>div:nth-child(1){order:2}
.home #three .cast__cell:nth-child(2){order:3}.home #three .three>div:nth-child(2){order:4}
.home #three .cast__cell:nth-child(3){order:5}.home #three .three>div:nth-child(3){order:6}
.home #three .cast__cell{aspect-ratio:4/3;border-top:1px solid var(--line)}
.home #three .three>div{margin:0 var(--gut) 26px;padding-top:14px;border-top:0}
.home #three .three>div>.cap,.home #three .three>div>h3{display:none}
.home #chapters .lookbook{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:8px;background:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 var(--gut);scroll-padding:0 var(--gut);scrollbar-width:none}
.home #chapters .lookbook::-webkit-scrollbar{display:none}
.home #chapters .lookbook .cell{scroll-snap-align:start}
}

/* ===== The one arena progression (assets/js/rank.js) and the Karashi raid (assets/js/raid.js) ===== */
/* the seals drawn from the passport's own (site.js): turned like a stamp */
.lvl__seal svg,.rise__seal svg,.rise__rs svg,.raid__sv,.sp__raid svg{display:block;width:100%;height:100%;overflow:visible;transform:rotate(var(--sr))}
/* the level bar under the arena's head: the rank seal, the level, the title worn, the XP to the next */
.lvl{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 22px;margin-bottom:14px;padding:14px clamp(16px,2.2vw,26px) 14px clamp(14px,1.8vw,20px);border:1px solid var(--line);background:linear-gradient(90deg,rgba(157,107,255,.1),rgba(157,107,255,0) 60%),var(--bg-2)}
.lvl::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,var(--pur),rgba(157,107,255,0) 72%)}
.lvl__seal{display:block;width:54px;height:54px}
.lvl__main{display:grid;gap:8px;min-width:0}
.lvl__k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;min-width:0}
.lvl__rank{font:400 clamp(1.3rem,1.8vw,1.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--fg)}
.lvl__n{font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
/* level numbers in the text face: the display face's 1 is a bare stem, and level 1 is the one every new player reads */
.lvl__n b{margin-left:6px;font:700 1.12rem/1 var(--grot);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--gold);vertical-align:-1px}
.lvl__title{font:500 12.5px/1.2 var(--grot);letter-spacing:.04em;color:var(--pur-t)}
.lvl__bar{position:relative;height:6px;background:rgba(242,240,235,.08);overflow:hidden}
.lvl__bar i{position:absolute;left:0;top:0;bottom:0;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#5b3cc2,var(--pur) 62%,var(--pur-t));box-shadow:0 0 12px rgba(157,107,255,.55);transition:transform .9s var(--ease-out)}
.lvl__next{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 18px;font-size:12.5px;line-height:1.4;color:var(--fg-3)}
.lvl__pay{color:rgba(217,180,90,.85)}
/* what the next rank still asks: a quiet line that opens the passport */
.lvl__goal{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;justify-self:start;max-width:100%;min-height:24px;margin:-2px 0 -4px;padding:2px 0;border:0;background:none;color:var(--fg-3);font:400 12.5px/1.4 var(--grot);text-align:left;cursor:pointer}
.lvl__goal .lvl__gk{font:500 10.5px/1.4 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.lvl__goal b{font:600 12.5px/1.4 var(--grot);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.lvl__goal .lvl__gm{color:var(--fg-3)}
.lvl__ga{font-style:normal;color:var(--pur-t);transition:transform .2s var(--ease-out)}
@media (hover:hover){.lvl__goal:hover b,.lvl__goal:hover .lvl__gm{color:var(--fg)}.lvl__goal:hover .lvl__ga{transform:translateX(3px)}}
.lvl__goal:focus-visible{outline:1px solid var(--pur-t);outline-offset:3px}
.lvl__pass{display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:0 1.1em;border:1px solid var(--line-2);background:transparent;color:var(--fg);font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:border-color .2s,background-color .2s}
@media (hover:hover){.lvl__pass:hover{border-color:var(--fg);background:rgba(242,240,235,.05)}}
/* a phone: one tight block; the next-rank line is the way into the passport, so the separate button goes */
@media (max-width:600px){.lvl{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:11px 12px 9px}.lvl__seal{width:40px;height:40px;align-self:start;margin-top:1px}.lvl__main{gap:6px}.lvl__pass,.lvl__pay{display:none}.lvl__k{gap:2px 10px}.lvl__rank{font-size:1.2rem}.lvl__title{font-size:12px}.lvl__next{font-size:12px}.lvl__goal{gap:1px 8px;min-height:30px;margin:-2px 0 -4px;font-size:12px}.lvl__goal b{font-size:12px}.lvl__ga{order:1}.lvl__goal .lvl__gm{order:2;flex-basis:100%}}
/* the arena's head row: the level and Karashi, side by side on a desk, stacked on a phone */
.arhead{display:flex;gap:14px;margin-bottom:14px}
.arhead>.lvl{flex:1.35 1 0;min-width:0;margin:0}
.arhead>.raidstrip{flex:1 1 0;min-width:0}
@media (max-width:1100px){.arhead{flex-direction:column;gap:10px}.arhead>.lvl,.arhead>.raidstrip{flex:none}}

/* the rise on the result panel: the XP the run earned, the bar, and once a level its moment */
.rise{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:start;padding:14px 16px 12px;border:1px solid rgba(157,107,255,.32);background:linear-gradient(180deg,rgba(157,107,255,.09),rgba(157,107,255,0) 65%),#0C0A0A;overflow:hidden;isolation:isolate}
.rise__seal{display:block;width:54px;height:54px;margin-top:2px}
.rise__main{display:grid;gap:7px;min-width:0}
.rise__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.rise__xp{font:800 1.6rem/1 var(--grot);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--fg)}
.rise__grade{font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--pur-t)}
.rise__grade--record{color:#ffe39a}
.rise__why{flex-basis:100%;font-size:12px;line-height:1.4;color:var(--fg-3)}
.rise__lv{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font:500 11px/1.3 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.rise__rank{color:var(--fg)}
.rise__n{display:inline-block;margin-left:5px;font:700 1.05rem/1 var(--grot);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--gold);vertical-align:-1px}
.rise__title{font-size:12.5px;letter-spacing:.04em;text-transform:none;color:var(--pur-t)}
.rise__bar{position:relative;display:block;height:8px;background:rgba(242,240,235,.08);overflow:hidden}
.rise__bar i{position:absolute;left:0;top:0;bottom:0;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#5b3cc2,var(--pur) 58%,#dccbff);box-shadow:0 0 14px rgba(157,107,255,.6)}
.rise__next{font-size:12.5px;line-height:1.4;color:var(--fg-3)}
.rise__gains{grid-column:1/-1;list-style:none;margin:2px 0 0;padding:9px 0 0;border-top:1px solid var(--line);display:grid;gap:7px}
.rise__g{display:flex;align-items:baseline;gap:10px;font-size:.93rem;line-height:1.35;color:var(--fg)}
.rise__gt{flex:1 1 auto;min-width:0}
.rise__g i{flex:none;width:7px;height:7px;background:var(--fg-3);transform:translateY(-1px) rotate(45deg)}
.rise__g--coin{color:#f1dfae}.rise__g--coin i{background:var(--gold)}
.rise__g--raid i{background:var(--red-t)}
.rise__rs{display:block;flex:none;width:28px;height:28px;margin:-6px 0}
.rise__rs svg{animation:sbStamp .5s cubic-bezier(.2,.8,.25,1) .15s both}
.rise__go{flex:none;align-self:center;min-height:36px;margin:-4px 0;padding:4px 2px 4px 12px;border:0;background:none;color:var(--red-t);font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.rise__go span{display:inline-block;margin-left:2px;transition:transform .2s var(--ease-out)}
@media (hover:hover){.rise__go:hover span{transform:translateY(2px)}}
@media (hover:hover){.rise__go:hover{color:#ffb09c}}
.rise__g--raid.is-fell{color:#ffe39a}.rise__g--raid.is-fell i{background:var(--gold)}
.rise__g--rank{color:#ffe39a}.rise__g--rank i{background:var(--gold)}
.rise__g--look i,.rise__g--title i{background:var(--pur-t)}
.rise__g--dim{color:var(--fg-3)}
.rise--quiet{display:block;padding:11px 14px;border-color:var(--line);background:#0C0A0A}
.rise__none{font-size:.9rem;line-height:1.45;color:var(--fg-3)}
/* a level: the frame turns gold, a light passes once, the number lands, the seal stamps */
.rise.is-up{border-color:rgba(217,180,90,.62);background:linear-gradient(180deg,rgba(217,180,90,.13),rgba(217,180,90,0) 70%),#0C0A0A}
.rise.is-up .rise__bar i{background:linear-gradient(90deg,#94701f,var(--gold) 58%,#ffe9b0);box-shadow:0 0 16px rgba(217,180,90,.6)}
.rise.is-up .rise__n{color:#ffe39a;animation:riseN .75s var(--ease-out) both}
.rise.is-up .rise__seal svg{animation:sbStamp .5s cubic-bezier(.2,.8,.25,1) both}
.rise.is-up::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(255,227,154,0) 30%,rgba(255,227,154,.3) 50%,rgba(255,227,154,0) 70%);transform:translateX(-100%);animation:riseSweep 1.1s var(--ease-out) both;pointer-events:none}
/* the stamp in the head's own row: right-aligned, and on a narrow panel it takes a line of its own */
.rise__up{margin-left:auto;padding:4px 7px 3px;border:1px solid rgba(255,227,154,.55);font:400 .94rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#ffe39a;background:rgba(217,180,90,.1);text-shadow:0 0 18px rgba(217,180,90,.65);transform:rotate(-2deg);animation:riseTag .8s var(--ease-out) .08s both}
.rise__up[hidden]{display:none}
@keyframes riseN{0%{transform:scale(2.3);color:#fff;text-shadow:0 0 26px rgba(255,227,154,.95)}100%{transform:scale(1)}}
@keyframes riseSweep{to{transform:translateX(100%)}}
@keyframes riseTag{from{opacity:0;transform:translateY(8px) rotate(-2deg) scale(1.35)}}
@media (prefers-reduced-motion:reduce){.rise.is-up .rise__n,.rise.is-up .rise__seal svg,.rise__up,.rise__rs svg{animation:none}.rise.is-up::before{display:none}}
@media (max-width:420px){.rise{gap:10px 12px;padding:12px 12px 10px}.rise__seal{width:44px;height:44px}.rise__xp{font-size:1.5rem}.rise__up{font-size:.92rem}}

/* the stage's line under the score: the XP, a level, the hit on Karashi, seen without a scroll */
.ag__xp{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 0;margin:10px 0 2px;font:500 12px/1.3 var(--grot);letter-spacing:.13em;text-transform:uppercase;color:var(--pur-t)}
.ag__xp>*+*::before{content:"·";margin:0 .7em;color:var(--fg-3)}
.ag__xpn{font-weight:700;color:var(--fg)}
.ag__xp--none{color:var(--fg-3)}
.ag__gr{color:var(--pur-t)}
.ag__gr--record{color:#ffe39a;text-shadow:0 0 12px rgba(217,180,90,.5)}
.ag__lvup{display:inline-block;padding:3px 7px 2px;border:1px solid rgba(255,227,154,.6);background:rgba(217,180,90,.14);color:#ffe39a;font-weight:700;text-shadow:0 0 14px rgba(217,180,90,.7);animation:agLvup .7s var(--ease-out) both}
.ag__xp>.ag__lvup{margin-left:.9em}.ag__xp>.ag__lvup::before{content:none}
.ag__lvup[hidden]{display:none}
@keyframes agLvup{0%{opacity:0;transform:scale(1.9);box-shadow:0 0 0 0 rgba(255,227,154,.7)}60%{opacity:1}100%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,227,154,0)}}
/* the raid's line under the run's own: Karashi takes the hit on a row of his own */
.ag__hit{flex-basis:100%;margin-top:5px;color:var(--red-t);animation:agHit .5s var(--ease-out) both}
.ag__xp>.ag__hit::before{content:none}
.ag__hit.is-fell{color:#ffe39a}
@keyframes agHit{from{opacity:0;transform:translateX(-6px)}}
/* a level on the stage: one gold bloom behind the verdict, then gone */
.ag__intro.is-lvup::before,.ag__intro.is-fell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 58%,rgba(255,222,140,.42),rgba(217,180,90,.14) 45%,rgba(217,180,90,0) 72%);opacity:0;animation:agBloom 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes agBloom{0%{opacity:0;transform:scale(.7)}22%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.ag__intro.is-fell::before{background:radial-gradient(ellipse 75% 60% at 50% 58%,rgba(255,214,120,.4),rgba(224,58,30,.16) 46%,rgba(224,58,30,0) 74%)}
.arena__stage.playing .ag__intro::before{display:none}
@media (prefers-reduced-motion:reduce){.ag__lvup,.ag__hit{animation:none}.ag__intro.is-lvup::before,.ag__intro.is-fell::before{display:none}}
/* the level beside a name on the wall */
.board__lv{margin-left:8px;padding:2px 5px 1px;border:1px solid rgba(157,107,255,.42);color:var(--pur-t);font:500 9.5px/1 var(--grot);font-style:normal;letter-spacing:.1em;text-transform:uppercase;vertical-align:2px}

/* the Karashi raid: one boss for everyone. The banner on the arena page */
.raid{position:relative;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr) minmax(250px,300px);gap:20px clamp(20px,2.6vw,40px);margin-bottom:14px;padding:clamp(22px,2.6vw,34px) clamp(18px,2.4vw,32px);border:1px solid rgba(224,58,30,.42);background:#080606;overflow:hidden;isolation:isolate;scroll-margin-top:16px}
.raid::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080606 22%,rgba(8,6,6,.8) 44%,rgba(8,6,6,.2) 64%,rgba(8,6,6,.55) 82%,rgba(8,6,6,.8)),linear-gradient(0deg,rgba(8,6,6,.85),rgba(8,6,6,0) 42%)}
.raid::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,var(--red),rgba(224,58,30,0) 78%)}
.raid__art{position:absolute;inset:0;z-index:-2}
.raid__art img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transition:opacity .6s}
.raid.is-down .raid__art img{opacity:.5}
.raid__main{grid-column:1;display:grid;gap:12px;align-content:start;min-width:0}
.raid__k{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--red-t)}
.raid__left{color:var(--fg-3)}
.raid__left:empty{display:none}
.raid__left::before{content:"·";margin-right:12px;color:var(--fg-3)}
.raid__h{font-size:clamp(2.3rem,3.7vw,3.4rem);line-height:.9;text-shadow:0 4px 30px rgba(0,0,0,.8)}
.raid.is-down .raid__h{color:#ffe39a}
.raid.is-low .raid__h,.raidmini.is-low .raidmini__h{color:#ff8a6e}
.raidstrip.is-low .raidstrip__line,.raidmini.is-low .raidmini__line{color:#ff8a6e}
.raid__line{max-width:46ch;font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.5;color:var(--fg-2)}
.raid__hp{position:relative;display:grid;gap:10px;margin-top:6px}
/* a hit just now: its number flies off where the bar ends */
.raid__pop{position:absolute;top:0;z-index:2;transform:translate(-50%,-100%);font:800 1.05rem/1 var(--grot);font-variant-numeric:tabular-nums;color:#ff7a5c;text-shadow:0 0 12px rgba(224,58,30,.9),0 2px 6px #000;white-space:nowrap;pointer-events:none;animation:raidPop 1.4s cubic-bezier(.2,.8,.3,1) both}
@keyframes raidPop{0%{opacity:0;transform:translate(-50%,-40%) scale(1.6)}14%{opacity:1;transform:translate(-50%,-110%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-210%)}}
@media (prefers-reduced-motion:reduce){.raid__pop{display:none}}
.raid__bar{position:relative;height:18px;padding:0;border:1px solid rgba(242,240,235,.22);background:rgba(0,0,0,.7);overflow:hidden}
.raid__bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(8,6,6,.9) calc(10% - 1px) 10%);pointer-events:none}
.raid__fill,.raid__ghost{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:0 50%}
.raid__ghost{background:#F2F0EB}
.raid__fill{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%),linear-gradient(90deg,#6e1206,var(--red) 55%,#ff7a5c);box-shadow:0 0 18px rgba(224,58,30,.55);transition:transform .5s var(--ease-out)}
.raid.is-hit .raid__bar{animation:raidHit .55s ease-out}
@keyframes raidHit{0%{transform:translateX(-5px);box-shadow:0 0 0 1px #ffe39a,0 0 26px rgba(255,122,92,.8)}35%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:none;box-shadow:none}}
.raid__num{display:flex;align-items:baseline;gap:10px;font:500 12px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.raid__num b{font:800 clamp(1.8rem,3vw,2.6rem)/1 var(--grot);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--fg)}
.raid__stats{display:flex;flex-wrap:wrap;gap:10px clamp(22px,3vw,40px);margin:4px 0 0}
.raid__stats div{display:grid;gap:6px}
.raid__stats dd{margin:0;display:flex;align-items:center;gap:8px;font:700 1.45rem/1 var(--grot);font-variant-numeric:tabular-nums;color:var(--fg)}
.raid__stats [data-raid-mine]{color:var(--gold)}
.raid__stats dd .raid__sv{width:30px;height:30px}
.raid__side{grid-column:3;display:grid;gap:10px;align-content:start;align-self:start;padding:16px 18px 14px;border:1px solid rgba(242,240,235,.12);background:rgba(8,6,6,.8)}
.raid__tk{color:var(--fg-2)}
.raid__top{list-style:none;margin:0;padding:0;display:grid}
.raid__row{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.raid__rk{font:500 11px/1 var(--grot);letter-spacing:.1em;color:var(--fg-3)}
.raid__row:first-child .raid__rk{color:var(--gold)}
.raid__nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.raid__dmg{font-variant-numeric:tabular-nums;color:var(--fg-2)}
.raid__row.is-me{box-shadow:inset 2px 0 0 var(--gold);background:linear-gradient(90deg,rgba(217,180,90,.14),rgba(217,180,90,0))}
.raid__row.is-me .raid__rk{padding-left:8px}
.raid__row.is-me .raid__nm,.raid__row.is-me .raid__dmg{color:#ffe39a}
.raid__empty{padding:8px 0 10px;font-size:.92rem;line-height:1.45;color:var(--fg-3);border-bottom:1px solid var(--line)}
.raid__how{font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.raid__line.raid__note,.raidstrip__line.raid__note,.raidmini__line.raid__note{color:#ffe39a}
.raidstrip__line.raid__note{white-space:normal}
/* he fell and you were there: the raid seal, stamped over his shadow */
.raid__stamp{position:absolute;left:calc(560px + clamp(18px,2.4vw,32px) + clamp(20px,2.6vw,40px) + 24px);top:clamp(22px,2.6vw,34px);display:grid;justify-items:center;gap:8px;width:118px;pointer-events:none}
.raid__stamp .raid__sv{width:104px;height:104px}
.raid__stamp .cap{color:var(--gold);text-shadow:0 1px 10px rgba(0,0,0,.9)}
.raid__stamp.is-new .raid__sv{animation:sbStamp .55s cubic-bezier(.2,.8,.25,1) .2s both}
@media (prefers-reduced-motion:reduce){.raid.is-hit .raid__bar,.raid__stamp.is-new .raid__sv{animation:none}.raid__fill,.raid__art img{transition:none}}
@media (max-width:1100px){.raid{grid-template-columns:minmax(0,1fr) minmax(240px,290px)}.raid__side{grid-column:2}.raid::before{background:linear-gradient(90deg,#080606 28%,rgba(8,6,6,.72) 55%,rgba(8,6,6,.5)),linear-gradient(0deg,rgba(8,6,6,.85),rgba(8,6,6,0) 42%)}.raid__stamp{left:auto;top:auto;bottom:clamp(18px,2.4vw,30px);right:calc(290px + clamp(18px,2.4vw,32px) + clamp(20px,2.6vw,40px))}}
@media (max-width:760px){
  .raid{grid-template-columns:minmax(0,1fr);gap:18px;padding:clamp(150px,44vw,250px) 16px 18px}
  .raid__art{bottom:auto;height:min(92vw,430px)}
  .raid__art img{object-position:50% 22%}
  .raid::before{background:linear-gradient(180deg,rgba(8,6,6,.05) 0,rgba(8,6,6,.5) 24%,#080606 min(70vw,330px))}
  .raid__main,.raid__side{grid-column:1}
  .raid__h{font-size:clamp(2.2rem,11vw,3rem)}
  .raid__left{flex-basis:100%}.raid__left::before{display:none}
  .raid__side{padding:14px 14px 12px}
  .raid__stamp{left:auto;right:14px;top:14px;bottom:auto;width:96px}.raid__stamp .raid__sv{width:84px;height:84px}
}

/* the nations: countries that fight for the week and the month (assets/js/nations.js, /api/nations) */
.nat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:20px clamp(20px,3vw,44px);margin-bottom:14px;padding:clamp(22px,2.6vw,34px) clamp(18px,2.4vw,32px);border:1px solid rgba(217,180,90,.38);background:linear-gradient(135deg,rgba(217,180,90,.08),rgba(157,107,255,.05) 55%,rgba(8,6,6,0) 80%),#080706;scroll-margin-top:12px}
.nat[hidden]{display:none}
.nat::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(217,180,90,0) 70%)}
.nat__main{display:grid;gap:12px;align-content:start;min-width:0}
.nat__k{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--gold)}
.nat__left{color:var(--fg-3)}
.nat__h{font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:.95}
.nat__line{max-width:52ch;font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.5;color:var(--fg-2)}
.nat__me{display:flex;align-items:center;gap:16px;margin-top:6px;padding:14px 16px;border:1px solid var(--line);background:rgba(8,6,6,.6);max-width:36rem}
.nat__flag,.nat__fl{font-family:"Twemoji Country Flags","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--grot)}
.nat__flag{flex:none;font-size:2.9rem;line-height:1}
.nat__who{display:grid;gap:6px;min-width:0;flex:1}
.nat__who .cap{color:var(--fg-3)}
.nat__pick{position:relative;max-width:24rem}
.nat__cur{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 12px;border:1px solid var(--line-2);background:#0d0b09;color:var(--fg);font:600 1rem/1.2 var(--grot);text-align:left;cursor:pointer}
.nat__cur:hover,.nat__cur[aria-expanded="true"]{border-color:var(--gold)}
.nat__cur:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nat__curfl{font-size:1.45rem;line-height:1}
.nat__caret{margin-left:auto;padding-left:8px;color:var(--fg-3);transition:transform .2s var(--ease-out)}
.nat__cur[aria-expanded="true"] .nat__caret{transform:rotate(180deg)}
.nat__drop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;display:grid;gap:6px;padding:8px;border:1px solid var(--gold);background:#0b0907;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.nat__drop[hidden]{display:none}
.nat__q{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line-2);background:#050505;color:var(--fg);font:500 16px/1.2 var(--grot);border-radius:0;-webkit-appearance:none;appearance:none}
.nat__q::placeholder{color:var(--fg-3)}
.nat__q:focus{outline:2px solid var(--gold);outline-offset:0}
.nat__list{list-style:none;margin:0;padding:0;max-height:min(320px,46vh);overflow:auto;overscroll-behavior:contain}
.nat__opt{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;color:var(--fg);cursor:pointer}
.nat__opt:hover,.nat__opt.is-act{background:rgba(217,180,90,.14)}
.nat__opt.is-mine{color:#ffe39a}
.nat__ofl{font-size:1.35rem;line-height:1}
.nat__none{padding:10px;color:var(--fg-3);font-size:.92rem}
.nat__mine{font-size:.9rem;line-height:1.45;color:var(--fg-2)}
.nat__side{display:grid;gap:10px;align-content:start;align-self:start;padding:16px 18px 14px;border:1px solid rgba(242,240,235,.12);background:rgba(8,6,6,.8)}
.nat__tabs{display:flex;gap:6px}
.nat__tabs button{flex:1;min-height:40px;border:1px solid var(--line);background:none;color:var(--fg-2);font:500 11px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase}
.nat__tabs button:hover{color:var(--fg);border-color:var(--line-2)}
.nat__tabs button.is-on{border-color:var(--gold);color:#ffe39a;background:rgba(217,180,90,.1)}
.nat__tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nat__top{list-style:none;margin:0;padding:0;display:grid}
.nat__row{display:grid;grid-template-columns:2em 1.7em minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.nat__rk{font:500 11px/1 var(--grot);letter-spacing:.1em;color:var(--fg-3)}
.nat__row:first-child .nat__rk{color:var(--gold)}
.nat__fl{font-size:1.2rem;line-height:1}
.nat__nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.nat__pl{font-size:.78rem;color:var(--fg-3);white-space:nowrap}
.nat__pts{font-variant-numeric:tabular-nums;color:var(--fg-2)}
.nat__row.is-me{box-shadow:inset 2px 0 0 var(--gold);background:linear-gradient(90deg,rgba(217,180,90,.14),rgba(217,180,90,0))}
.nat__row.is-me .nat__rk{padding-left:8px}
.nat__row.is-me .nat__nm,.nat__row.is-me .nat__pts{color:#ffe39a}
.nat__gap{padding:2px 0;color:var(--fg-3);text-align:center}
.nat__empty{padding:8px 0 10px;font-size:.92rem;line-height:1.45;color:var(--fg-3);border-bottom:1px solid var(--line)}
.nat__how{font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.rise__g--nat i{background:var(--gold)}
@media (max-width:900px){.nat{grid-template-columns:minmax(0,1fr)}.nat__side{align-self:stretch}}
@media (max-width:760px){.nat{padding:20px 16px 18px}.nat__h{font-size:clamp(2rem,10vw,2.6rem)}.nat__me{padding:12px}.nat__flag{font-size:2.4rem}.nat__pl{display:none}.nat__row{grid-template-columns:2em 1.7em minmax(0,1fr) auto}}

/* the question before a first run (assets/js/nations.js): which country does this player fight for */
.natm{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(4,3,6,.8);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.natm[hidden]{display:none}
html.natm-on{overflow:hidden}
.natm__box{width:min(30rem,100%);max-height:calc(100dvh - 32px);display:grid;gap:12px;align-content:start;padding:22px 20px 14px;border:1px solid var(--gold);background:linear-gradient(160deg,rgba(217,180,90,.1),rgba(157,107,255,.05) 60%,rgba(8,6,6,0)),#0b0907;box-shadow:0 30px 80px rgba(0,0,0,.7);overflow:hidden}
.natm__k{margin:0;color:var(--gold)}
.natm__h{margin:0;font:400 clamp(1.9rem,6vw,2.4rem)/1 var(--display)}
.natm__p{margin:0;color:var(--fg-2);line-height:1.45}
.natm__here{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid var(--gold);background:rgba(217,180,90,.12);color:#ffe39a;font:600 1.05rem/1.2 var(--grot);text-align:left;cursor:pointer}
.natm__here:hover{background:rgba(217,180,90,.2)}
.natm__here:focus-visible,.natm__skip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.natm__here[hidden]{display:none}
.natm__here .nat__ofl{font-size:1.6rem}
.natm__list{max-height:min(300px,38dvh)}
.natm__skip{justify-self:center;min-height:40px;padding:6px 10px;border:0;background:none;color:var(--fg-3);font:500 .9rem/1 var(--grot);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.natm__skip:hover{color:var(--fg)}

/* the badge Netlify sets on the pages: it covers the trials' corner on a phone */
#nl-badge-frame{display:none!important}
/* the strip in the home page's Arena section */
.raidmini{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(170px,280px) auto;align-items:center;gap:12px clamp(16px,2.4vw,30px);margin:0 var(--gut) 14px;padding:12px clamp(14px,2vw,22px) 12px 12px;border:1px solid rgba(224,58,30,.4);background:linear-gradient(90deg,rgba(224,58,30,.12),rgba(224,58,30,0) 55%),var(--bg-2);color:var(--fg);text-decoration:none;overflow:hidden;transition:border-color .2s}
.raidmini::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,var(--red),rgba(224,58,30,0) 70%)}
@media (hover:hover){.raidmini:hover{border-color:var(--red-t)}.raidmini:hover .raidmini__go{color:#fff}}
.raidmini__art{display:block;width:88px;height:88px;overflow:hidden;border:1px solid rgba(224,58,30,.35);background:radial-gradient(circle at 50% 55%,rgba(224,58,30,.28),#000 70%)}
.raidmini__art img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;transition:opacity .5s,transform .5s var(--ease-out)}
.raidmini.is-hit .raidmini__art img{animation:stripMask .5s ease-out}
.raidmini.is-down .raidmini__art img{opacity:.4;transform:rotate(14deg) translateY(8%)}
.raidmini__txt{display:grid;gap:5px;min-width:0}
.raidmini__k{color:var(--red-t)}
.raidmini__h{font:400 clamp(1.25rem,1.9vw,1.7rem)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.raidmini.is-down .raidmini__h{color:#ffe39a}
.raidmini__line{font-size:.9rem;line-height:1.4;color:var(--fg-2)}
.raidmini__hp{position:relative;display:grid;gap:7px;min-width:0}
.raidmini__bar{position:relative;height:12px;border:1px solid rgba(242,240,235,.2);background:rgba(0,0,0,.7);overflow:hidden}
.raidmini__bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(8,6,6,.9) calc(10% - 1px) 10%)}
.raidmini__num{font:500 12px/1 var(--grot);letter-spacing:.08em;font-variant-numeric:tabular-nums;text-align:right;color:var(--fg)}
.raidmini__go{display:inline-flex;align-items:center;gap:.45em;min-height:44px;font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--fg);transition:color .2s}
@media (max-width:760px){.raidmini{grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:12px}.raidmini__art{width:72px;height:72px}.raidmini__hp{grid-column:1/-1}.raidmini__go{grid-column:1/-1;justify-content:center;min-height:40px;border-top:1px solid var(--line);margin-top:-2px}}

/* the arena's strip above the trials: Karashi's HP in a line, down to the banner under the stage */
.raidstrip{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 16px;padding:10px clamp(14px,1.8vw,20px) 10px 10px;border:1px solid rgba(224,58,30,.4);background:linear-gradient(90deg,rgba(224,58,30,.13),rgba(224,58,30,0) 60%),var(--bg-2);color:var(--fg);text-decoration:none;overflow:hidden;transition:border-color .2s}
.raidstrip::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,var(--red),rgba(224,58,30,0) 70%)}
@media (hover:hover){.raidstrip:hover{border-color:var(--red-t)}.raidstrip:hover .raidstrip__ga{transform:translateY(3px)}}
.raidstrip:focus-visible{outline:1px solid var(--red-t);outline-offset:2px}
.raidstrip__art{position:relative;display:block;width:74px;height:74px;overflow:hidden;border:1px solid rgba(224,58,30,.35);background:radial-gradient(circle at 50% 55%,rgba(224,58,30,.28),#000 70%)}
.raidstrip__art img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;transition:opacity .5s,transform .5s var(--ease-out)}
.raidstrip.is-hit .raidstrip__art img{animation:stripMask .5s ease-out}
@keyframes stripMask{0%{transform:translateX(-4px) rotate(-6deg) scale(1.08)}40%{transform:translateX(3px) rotate(4deg)}100%{transform:none}}
.raidstrip.is-down .raidstrip__art img{opacity:.4;transform:rotate(14deg) translateY(8%)}
.raidstrip__txt{display:grid;gap:7px;min-width:0}
.raidstrip__k{display:flex;justify-content:space-between;gap:10px;min-width:0;white-space:nowrap;color:var(--red-t)}
.raidstrip__left{overflow:hidden;text-overflow:ellipsis;color:var(--fg-3)}
.raidstrip__hp{position:relative;display:flex;align-items:center;gap:12px;min-width:0}
.raidstrip__bar{position:relative;flex:1 1 auto;height:12px;min-width:60px;border:1px solid rgba(242,240,235,.22);background:rgba(0,0,0,.7);overflow:hidden}
.raidstrip__bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(8,6,6,.9) calc(10% - 1px) 10%)}
.raidstrip.is-hit .raidstrip__bar{animation:raidHit .55s ease-out}
.raidstrip__num{flex:none;font:800 1.02rem/1 var(--grot);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--fg)}
.raidstrip.is-down .raidstrip__num{color:#ffe39a}
.raidstrip__line{font-size:12.5px;line-height:1.35;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raidstrip__go{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--fg)}
.raidstrip__ga{display:inline-block;color:var(--red-t);font-size:14px;transition:transform .2s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.raidstrip.is-hit .raidstrip__bar,.raidstrip.is-hit .raidstrip__art img,.raidmini.is-hit .raidmini__art img{animation:none}}
@media (max-width:600px){.daily__more{display:none}}
@media (max-width:600px){.raidstrip{gap:8px 12px;padding:9px 12px 9px 9px}.raidstrip__art{width:58px;height:58px}.raidstrip__txt{gap:6px}.raidstrip__gt{display:none}.raidstrip__go{min-height:40px;min-width:24px;justify-content:center}.raidstrip__num{font-size:.95rem}.raidstrip__line{font-size:12px}}
/* the banner has its own section under the stage; with no raid here it takes no room */
.sec--raid{padding-top:0;content-visibility:visible!important}
.sec--raid:has(.raid[hidden]){display:none}

/* ghost races (arena-social.js): race your best run, the week's leader, or nobody; on the intro card of DOKYO Run and
   Ronin Swing, above the start button. Violet for a ghost, gold for the leader */
.ag__ghost{display:grid;gap:7px;justify-items:center;width:100%;max-width:31rem}
.ag__ghost[hidden]{display:none!important}
.ag__introbox .ag__ghostk{color:var(--fg-2);letter-spacing:.22em}
.ag__ghostseg{display:flex;justify-content:center;gap:6px;width:100%}
.ag__ghostseg button{flex:1 1 0;min-width:0;min-height:46px;display:grid;align-content:center;justify-items:center;gap:4px;padding:6px 10px;border:1px solid rgba(157,107,255,.34);background:rgba(157,107,255,.06);color:var(--fg-2);font:500 11px/1.1 var(--grot);letter-spacing:.11em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.ag__ghostseg button[hidden]{display:none}
.ag__ghostseg b{max-width:100%;font-weight:600;color:inherit;text-align:center;overflow-wrap:anywhere}
.ag__ghostseg span{max-width:100%;font-size:10.5px;letter-spacing:.05em;text-transform:none;opacity:.78;text-align:center;overflow-wrap:anywhere}
.ag__ghostseg button:disabled{cursor:not-allowed;opacity:.5;border-style:dashed;background:transparent}
.ag__ghostnote{font:500 11px/1.35 var(--grot);letter-spacing:.03em;color:var(--fg-2);text-align:center}
.ag__ghostnote[hidden]{display:none}
.ag__ghostseg button[aria-pressed="true"]{border-color:#9D6BFF;background:rgba(157,107,255,.24);color:var(--fg);box-shadow:inset 0 0 0 1px rgba(201,176,255,.3)}
.ag__ghostseg button[data-gp="lead"][aria-pressed="true"]{border-color:var(--gold);background:rgba(217,180,90,.16);color:#ffe39a;box-shadow:inset 0 0 0 1px rgba(217,180,90,.3)}
.ag__ghostseg button[data-gp="off"][aria-pressed="true"]{border-color:var(--fg-2);background:rgba(242,240,235,.08)}
@media (hover:hover){.ag__ghostseg button:not(:disabled):hover{color:var(--fg);border-color:rgba(201,176,255,.8)}}
.ag__ghostseg button:focus-visible{outline:2px solid var(--pur-t);outline-offset:2px}
@media (max-height:500px){.ag__ghost{gap:4px}.ag__ghostseg button{min-height:44px;padding:4px 8px}.ag__introbox .ag__ghostk{display:none}}
/* a phone held upright: one option a row, what it races on the left and how far on the right, the leader's name in full */
@media (max-width:600px) and (min-height:501px){
  .ag__ghostseg{flex-direction:column;gap:5px}
  .ag__ghostseg button{flex:none;min-height:44px;grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;align-items:center;column-gap:12px;padding:7px 14px}
  .ag__ghostseg b{text-align:left;letter-spacing:.07em}
  .ag__ghostseg span{text-align:right;white-space:nowrap}
}
/* after a run the verdict, the score, the level line and the ghost picker share the card: the title steps down a size,
   and a card taller than the stage scrolls inside it instead of cutting off Go again */
.ag__intro{overflow-y:auto;place-items:safe center}
.ag__intro:has([data-verdict]:not([hidden])) .ag__introbox h2{font-size:clamp(1.7rem,3.1vw,2.8rem);line-height:1.02}

/* ===== QA PASS (2026-10-22) ===== */
/* the world map from the first paint: the camera is a size container, the build writes the render's shape and the pins'
   band on it (--mr --y0 --y1); the render covers the box, shrunk until every pin sits between --mt and --mb. site.js only
   reads the result (and places it itself where container units are missing) */
@supports (width:1cqw){
  .wmap{--leg:calc(clamp(75px,6.9vw,99px) + 34px)}
  .wmap__cam{container-type:size;--mt:33px;--mb:calc(var(--leg) + 33px);--wd:min(max(100cqw,100cqh * var(--mr)),(100cqh - var(--mt) - var(--mb)) * var(--mr) / (var(--y1) - var(--y0)));--hd:calc(var(--wd) / var(--mr));--ox:calc((100cqw - var(--wd)) / 2);--oy:min(0px,max(100cqh - var(--hd),min(max((100cqh - var(--hd)) / 2,var(--mt) - var(--hd) * var(--y0)),100cqh - var(--mb) - var(--hd) * var(--y1))))}
  .wmap--full .wmap__cam{--mt:89px}
  .wmap__cam>img,.wmap__pins{position:absolute;inset:auto;left:var(--ox);top:var(--oy);width:var(--wd);height:var(--hd);max-width:none;object-fit:fill}
  .wmap__wing{top:var(--oy);height:var(--hd);width:calc(var(--wd) * .6);left:calc(var(--ox) - var(--wd) * .6)}
  .wmap__wing--r{left:calc(var(--ox) + var(--wd))}
  /* wings (and their images) only beside a render shrunk narrower than the box: site.js marks it (.wmap--pillar), and a box
     wider than 8:5 always has one, so it shows them from the first paint */
  @container (min-aspect-ratio:8/5){.wmap__wing{display:block}}
  /* the strip over the map: its stills and one caption line, two from 821 to 1199px */
  @media (min-width:821px) and (max-width:1199px){.wmap{--leg:calc(clamp(75px,6.9vw,99px) + 50px)}}
  @media (min-width:821px) and (max-width:899px){.wmap{--leg:calc(clamp(75px,6.9vw,99px) + 47px)}}
  @media (max-width:820px), (max-height:500px), (max-aspect-ratio:1/1) and (max-width:1366px){.wmap__cam,.wmap--full .wmap__cam{--mt:33px;--mb:33px}}
}
/* the fixed header is the scroll padding, so nothing scrolled to lands behind it; scroll-margins keep only their own
   room, and the full-height chapters still land at the very top (comic.js too) */
html{scroll-padding-top:var(--hdr)}
html.tg{scroll-padding-top:calc(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px))}
.reel__ch,.mf-open,.mf-ch,.mf-plate{scroll-margin-top:calc(0px - var(--hdr))}
.quiz .q,.quiz .result{scroll-margin-top:16px}
/* #film is the film itself, never taller than the screen under the header; the HD toggle keeps to its right edge */
.film{--fw:min(100%,calc((100svh - var(--hdr) - 24px) * 16 / 9))}
.film[id]{scroll-margin-top:12px}
.film__frame{width:var(--fw);margin-inline:auto}
.film__hd{margin-right:calc((100% - var(--fw)) / 2)}
.film--bleed .film__hd{margin-right:max(var(--gut),calc((100% - var(--fw)) / 2))}
/* the header keeps the room of the seal count ("12/12") and the sound button from the first paint */
.sbb__n{min-width:34px}
@media (min-width:1161px){.hdr__tools{min-width:126px}.hdr__tools:empty{display:flex}}
/* the Forge's drag handles show once studio.js has placed them */
.studio__tx:not([style]){display:none}
/* menu links at least 44px tall, the number on the word's baseline; held sideways two columns, three from 640px wide */
.drawer nav a{padding-block:max(.18em,calc((43px - 1.1em) / 2))}
@media (max-width:1260px) and (max-height:760px){.drawer nav a{padding-block:max(.12em,calc((43px - 1.1em) / 2))}}
@media (max-height:500px){.drawer nav{display:block;columns:2;column-gap:32px}.drawer nav a{break-inside:avoid;font-size:clamp(1.2rem,4vw,1.6rem)}.drawer__grp{break-after:avoid}}
@media (max-height:500px) and (min-width:640px){.drawer nav{columns:3;column-gap:24px}.drawer nav a{font-size:clamp(1.1rem,4.2vw - 10px,1.6rem)}}
/* phones, upright or sideways: labels 12px or more, running text 14px */
@media (max-width:760px), (max-height:500px){.key__buy,.key__facts dt,.rk__tags,.mm-up .cap{font-size:12px}.rk__note,.ftr__warn{font-size:14px}}
/* ---------- the passport race (passport design 11.2 P7): the home band, passport.html, the book's server copy ---------- */
.ppband{position:relative;overflow:hidden;margin:0 var(--gut);padding:clamp(28px,4vw,48px) clamp(20px,4vw,56px);border:1px solid var(--line);background:linear-gradient(120deg,rgba(157,107,255,.1),rgba(5,5,5,0) 60%)}
.ppband__k{position:absolute;right:-2%;top:50%;width:min(36vw,300px);transform:translateY(-50%) rotate(-6deg);fill:var(--red);opacity:.16}
.ppband__in{position:relative;display:grid;gap:12px;max-width:52ch;justify-items:start}
.ppband h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.ppband__line{color:var(--fg-2)}
.pp__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.pp__card{display:grid;gap:14px;padding:clamp(20px,3vw,36px);border:1px solid var(--line-2);background:var(--bg-2)}
.pp__card h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.pp__clock{color:var(--gold);font-weight:500}
.pp__who,.pp__login,.pp__finish,.pp__sheet{display:grid;gap:10px;justify-items:start}
.pp__who[hidden],.pp__login[hidden],.pp__finish[hidden],.pp__sheet[hidden],.pp__name[hidden],.pp__qr[hidden],.pp__human[hidden]{display:none}
.pp__as{font-size:1.05rem}.pp__st,.pp__lead{color:var(--fg-2)}
.pp__small{color:var(--fg-3);font-size:.85rem;max-width:56ch}
.pp__msg{color:var(--red-t);min-height:1.2em}
.pp__code{font:400 clamp(2.4rem,6vw,3.6rem)/1 var(--display);letter-spacing:.18em;color:var(--fg)}
.pp__qr{width:min(240px,100%);padding:8px;background:#fff}
.pp__warn{color:var(--red-t);font-size:.88rem;max-width:52ch}
.pp__name{display:grid;gap:8px}
.pp__row{display:flex;flex-wrap:wrap;gap:8px}
.pp__row input{flex:1 1 12ch;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font:400 1rem var(--grot)}
.pp__row input:focus{outline:2px solid var(--pur);outline-offset:0;border-color:transparent}
.pp__list{display:grid;gap:10px}
.pp__seals{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pp__seals li{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.pp__n{color:var(--fg-3);font-size:12px;letter-spacing:.1em}
.pp__t{display:grid;gap:2px}.pp__t a,.pp__t span{color:var(--fg-2);font-size:.9rem}
.pp__d{color:var(--gold);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pp__seals li.is-got .pp__n{color:var(--red-t)}.pp__seals li.is-dev .pp__d,.pp__seals li.is-wait .pp__d{color:var(--fg-3)}
.pp__why{color:var(--gold);font-size:.85rem}.pp__why:empty{display:none}
.pp__og{display:flex;align-items:center;gap:12px;margin:0;color:var(--gold);font:400 clamp(1.6rem,3vw,2.2rem)/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.pp__og[hidden],.pp__lead[hidden]{display:none}
.pp__ogk{display:block;width:40px;height:40px;flex:none;fill:var(--gold);transform:rotate(-5deg)}.pp__ogk svg{width:100%;height:100%}
.pp__ogl{color:var(--fg-2);max-width:56ch;padding-left:12px;border-left:2px solid var(--gold)}
.pp__code:focus{outline:2px solid var(--pur);outline-offset:4px}.pp__as:focus,.pp__st:focus{outline:none}.pp__as:focus-visible,.pp__st:focus-visible{outline:2px solid var(--pur);outline-offset:4px}
.pp__finish{scroll-margin-top:16px}
.sp__og{color:var(--gold);margin-top:6px}
/* the passport tab's record: seals, rank, the passport's number and its standing; no game (QA Q1) */
.sp__rec{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp__rec dd.sp__txt{font-size:18px;line-height:1.05;overflow-wrap:anywhere}
.sb--pass .sb__seam{display:none!important}
@media (max-width:560px){.sp__rec{grid-template-columns:repeat(2,minmax(0,1fr))}.sp__rec div,.sp__rec div:nth-child(n+4){grid-column:auto}}
/* the last check, on every page but the passport's: until the passport is finished, or Not now */
.pp-nudge{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;width:min(560px,calc(100vw - 32px));padding:14px 48px 14px 18px;border:1px solid rgba(217,180,90,.6);background:var(--bg-3)}
.pp-nudge__t{margin:0;flex:1 1 240px}
.pp-nudge__x{position:absolute;top:6px;right:6px;width:36px;height:36px;padding:8px;border:0;background:none;color:var(--fg)}
.pp-nudge__x svg{width:100%;height:100%}
/* the seal toasts rise above the last-check prompt while it shows (pp.js sets --pp-nudge-h), so neither covers the other */
.has-nudge .sbt{bottom:calc(var(--pp-nudge-h,140px) + 28px + env(safe-area-inset-bottom))}
.pp__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px)}
.pp__dl{margin:0;display:grid;gap:18px}.pp__dl dt{font-weight:500}.pp__dl dd{margin:4px 0 0;color:var(--fg-2)}
.pp__safe{display:grid;gap:14px;align-content:start}.pp__safe h3{font-size:1.6rem}.pp__safe>p{color:var(--fg-2)}
.fixed{display:grid;gap:6px;margin-top:12px;padding-left:14px;border-left:2px solid var(--red-t)}.fixed p{font-weight:500}
.sb__slot.is-dev .sb__seal{opacity:.38;filter:grayscale(.6)}
.sb__chh{margin-top:18px}.sb__note a,.sp__note a{color:var(--fg)}
.pp-toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,20px);opacity:0;padding:12px 18px;border:1px solid var(--line-2);background:var(--bg-3);transition:opacity .3s,transform .3s}
.pp-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){.pp__top,.pp__cols{grid-template-columns:1fr}}
@media (max-width:600px){.ppband__k{opacity:.09}}