:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#E4ECEA; --surface:#F3F7F6; --line:#B7C9C6; --text:#0C1B1F; --muted:#3E5A5E;
  --pink:#C4176F; --cyan:#0A7C86; --green:#14753C; --yellow:#8A6400; --lilac:#6A4BB8; --orange:#B5480E;
  --btn:#0C1B1F; --btn-text:#F3F7F6; --focus:#C4176F;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#071216; --surface:#0C1F25; --line:#1D3B41; --text:#E8F1EE; --muted:#9DB8B4;
    --pink:#FF3EA5; --cyan:#2EE6E6; --green:#5CFF96; --yellow:#FFD23A; --lilac:#C6A8F2; --orange:#FF8A3D;
    --btn:#5CFF96; --btn-text:#071216; --focus:#FFD23A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#071216; --surface:#0C1F25; --line:#1D3B41; --text:#E8F1EE; --muted:#9DB8B4;
  --pink:#FF3EA5; --cyan:#2EE6E6; --green:#5CFF96; --yellow:#FFD23A; --lilac:#C6A8F2; --orange:#FF8A3D;
  --btn:#5CFF96; --btn-text:#071216; --focus:#FFD23A;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Handjet','DotGothic16','Courier New',monospace;font-size:21px;line-height:1.5;letter-spacing:0.01em}
body.locked{overflow:hidden}
img{max-width:100%}
a{color:var(--cyan)} a:hover{color:var(--pink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[hidden]{display:none !important}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:3px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-top:10px;padding-bottom:10px}
.logo{font-family:'Press Start 2P',monospace;font-size:16px;color:var(--text);text-decoration:none;text-shadow:3px 3px 0 var(--pink)}
nav.main{display:flex;flex-wrap:wrap;gap:18px}
nav.main a{text-decoration:none;font-size:18px;padding:10px 0}
.head-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;background:var(--btn);color:var(--btn-text);font-family:'Press Start 2P',monospace;font-size:11px;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--pink)}
.btn:hover{color:var(--btn-text);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pink)}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:3px solid var(--line);background:transparent;color:var(--text);font-family:'Handjet','DotGothic16',monospace;font-size:17px;cursor:pointer;text-decoration:none}
.ghost:hover{border-color:var(--text);color:var(--text)}
.ghost[aria-pressed="true"]{border-color:var(--green)}
.lang{display:inline-flex;border:3px solid var(--line)}
.lang button{min-height:38px;min-width:44px;border:0;background:transparent;color:var(--text);font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.eq i{width:4px;height:6px;background:var(--green)}
[aria-pressed="true"] .eq i{animation:eq .44s steps(3) infinite alternate}
[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.2s}
[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.1s}
@keyframes eq{from{height:4px}to{height:16px}}

.intro{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between;padding-top:40px;padding-bottom:48px}
.intro h1{margin:0;font-family:'Press Start 2P',monospace;font-size:clamp(18px,2.4vw,28px);line-height:1.5;max-width:22ch}
.intro p{margin:0;max-width:46ch;color:var(--muted);font-size:20px}

section{padding:64px 0;border-bottom:3px solid var(--line)}
h2{margin:0 0 12px;font-family:'Press Start 2P',monospace;font-size:20px;line-height:1.5}
.h2row + .lead,.wall-head + .lead{margin-top:12px}
.lead{margin:0 0 28px;color:var(--muted);max-width:62ch}
.small{font-size:18px;color:var(--muted)}

/* ---------- wall ---------- */
.wall-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.live{display:inline-flex;align-items:center;gap:10px;font-size:18px;color:var(--muted)}
.live i{width:10px;height:10px;background:var(--green);display:inline-block}
.toolbar{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:3px solid var(--line);border-bottom:0;padding:14px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.swatch{width:40px;height:40px;border:3px solid transparent;padding:0;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.swatch[aria-pressed="true"]{border-color:var(--text);transform:translateY(-3px)}
.seg{display:inline-flex;border:3px solid var(--line)}
.seg button{min-height:42px;min-width:44px;padding:0 12px;border:0;background:transparent;color:var(--text);font-family:'Handjet','DotGothic16',monospace;font-size:17px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--surface)}
.tool{min-height:42px;padding:0 12px;border:3px solid var(--line);background:transparent;color:var(--text);font-family:'Handjet','DotGothic16',monospace;font-size:17px;cursor:pointer}
.tool:hover{border-color:var(--text)}
.tool.danger{border-color:var(--pink);color:var(--pink)}
.spacer{flex:1 1 auto}
.label{font-size:15px;color:var(--muted)}
.viewport{position:relative;border:3px solid var(--line);background:#0A1A1E}
.stage{position:relative;width:100%;aspect-ratio:16/9;background:#10262A;overflow:hidden;touch-action:none;user-select:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#paint{cursor:crosshair}
#paint.hand{cursor:grab}
.shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,0) 50%,rgba(0,0,0,.4) 100%)}
.expand{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:3px solid #E8F1EE;background:rgba(7,18,22,.85);color:#E8F1EE;font-family:'Handjet','DotGothic16',monospace;font-size:16px;cursor:pointer}
.expand:hover{background:#071216;border-color:#5CFF96}
.cursor{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;transition:left .08s linear,top .08s linear}
.cursor b{position:absolute;inset:4px;border:2px solid #fff}
.status{margin:10px 0 0;font-size:16px;color:var(--muted);min-height:24px}
/* ---------- hero hotspots ---------- */
.hero{background:#071216;border-bottom:3px solid var(--line)}
.hero-frame{position:relative;width:100%;max-width:calc(82vh * 16 / 9);margin:0 auto;aspect-ratio:16/9}
.hero-frame img.scene{display:block;width:100%;height:100%;image-rendering:pixelated}
.hero-frame canvas.fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.fxbtn{position:absolute;left:10px;bottom:10px;z-index:5;min-height:36px;padding:0 10px;border:3px solid #E8F1EE;background:rgba(7,18,22,.82);color:#E8F1EE;font-family:'Handjet','DotGothic16',monospace;font-size:15px;cursor:pointer}
.fxbtn b{font-family:'Press Start 2P',monospace;font-size:10px;color:#FFF27A;font-weight:400}
.fxbtn:hover{border-color:#FFF27A}
.hot{position:absolute;padding:0;border:0;background:transparent;cursor:pointer}
.hot img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;pointer-events:none}
.hot:hover img,.hot:focus-visible img{opacity:1;animation:selblink .5s steps(2) infinite}
.hot:focus-visible{outline:none}
.hot .tag{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);font-family:'Press Start 2P',monospace;font-size:10px;color:#071216;background:#FFF27A;padding:4px 6px;white-space:nowrap;opacity:0;pointer-events:none}
.hot:hover .tag,.hot:focus-visible .tag{opacity:1}
.tagx{position:absolute;pointer-events:none;z-index:5}
.tagx .tag{opacity:0}
.hot:hover + .tagx .tag,.hot:focus-visible + .tagx .tag{opacity:1;animation:tagPop .3s steps(3)}
@keyframes selblink{50%{opacity:.55}}

/* ---------- quests + help ---------- */
.quests{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.quest{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:3px solid var(--line);background:var(--surface);color:var(--text);font-family:'Handjet','DotGothic16',monospace;font-size:18px;text-align:left;cursor:pointer}
.quest:hover{border-color:var(--text)}
.quest .qi{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);color:var(--bg);font-family:'Press Start 2P',monospace;font-size:12px}
.quest[data-done="true"] .qi{background:var(--green)}
.quest[data-done="true"]{color:var(--muted)}
.h2row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.h2row h2{margin:0;min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){ .h2row{flex-wrap:nowrap;align-items:center;gap:10px} .h2row h2{font-size:clamp(15px,5vw,20px);flex:0 1 auto} .help{flex:0 0 36px} }
.help{width:36px;height:36px;min-width:36px;border:3px solid var(--yellow);background:transparent;color:var(--yellow);font-family:'Press Start 2P',monospace;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.help:hover{background:var(--yellow);color:var(--bg)}

/* ---------- dialog box ---------- */
.talk{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;width:min(760px,calc(100% - 24px));background:#071216;color:#E8F1EE;border:4px solid #E8F1EE;box-shadow:0 0 0 4px #071216,8px 8px 0 4px rgba(0,0,0,.45);display:flex;gap:16px;padding:14px;align-items:flex-start}
.talk .face{flex:0 0 auto;width:96px;height:96px;background:#0C2026;border:3px solid var(--who,#2EE6E6);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.talk .face img{width:100%;height:100%;image-rendering:pixelated}
.talk .body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.talk .name{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--who,#2EE6E6)}
.talk .line{position:relative;font-size:20px;line-height:1.45;min-height:3em}
.talk .line .ghost{display:block;visibility:hidden}
.talk .line .typed{position:absolute;left:0;top:0;right:0}
.talk .ctrl{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.talk .ctrl button{min-height:44px;padding:0 14px;border:3px solid #E8F1EE;background:transparent;color:#E8F1EE;font-family:'Handjet','DotGothic16',monospace;font-size:17px;cursor:pointer}
.talk .ctrl button.primary{background:#E8F1EE;color:#071216}
.talk .ctrl button:focus-visible{outline:3px solid #FFD23A;outline-offset:2px}
.caret{display:inline-block;width:10px;height:10px;background:#FFF27A;margin-left:6px;animation:selblink .6s steps(2) infinite}
@media (max-width:560px){
  /* phone: portrait + name on one row, text across the full width, buttons in tidy rows at the bottom */
  .talk{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 12px;align-items:center;width:calc(100% - 16px);padding:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
  .talk .face{width:64px;height:64px;grid-column:1;grid-row:1}
  .talk .body{display:contents}
  .talk .name{grid-column:2;grid-row:1;align-self:center}
  .talk .line{grid-column:1 / -1;font-size:18px;min-height:0}
  .talk .sub{grid-column:1 / -1;font-size:16px}
  .talk .ctrl{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:stretch;gap:8px}
  .talk .ctrl button{flex:1 1 auto;min-width:0;padding:0 10px;font-size:16px}
  .talk .ctrl button.primary{flex:2 1 42%;order:9}
  #talkClose{order:8}
}

/* ---------- intro gate ---------- */
.intro-gate{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;padding:max(28px,6vh) 16px 24px;background:radial-gradient(ellipse at 50% 30%,#10262A 0,#03080A 70%);overflow:auto}
.ig-title{font-family:'Press Start 2P',monospace;font-size:clamp(14px,3.6vw,22px);color:#E8F1EE;text-shadow:3px 0 #FF3EA5,-3px 0 #2EE6E6;letter-spacing:.06em}
.ig-stage{position:relative;flex:0 0 auto;width:min(100%,880px,max(280px,calc((100dvh - 330px) * 16 / 9)));aspect-ratio:16/9;border:4px solid #E8F1EE;box-shadow:0 0 0 4px #03080A,8px 8px 0 4px rgba(0,0,0,.5);background:#071216;overflow:hidden}
.ig-stage img{display:block;width:100%;height:100%;image-rendering:pixelated;filter:saturate(.9) brightness(.85)}
.ig-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.intro-gate .card{position:relative;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;color:#E8F1EE}
.intro-gate .card .who{width:96px;height:96px;border:4px solid #2EE6E6;background:#0C2026;image-rendering:pixelated}
.intro-gate h2{margin:0;font-family:'Press Start 2P',monospace;font-size:16px;line-height:1.6}
.intro-gate .skip{background:none;border:0;color:#9DB8B4;font-family:'Handjet','DotGothic16',monospace;font-size:16px;text-decoration:underline;cursor:pointer;min-height:44px}
.item-got{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;color:#E8F1EE;font-family:'Press Start 2P',monospace;font-size:13px;text-align:center;line-height:1.7}
.item-got .pg{transform:scale(2.4);image-rendering:pixelated;margin:22px 0}
.item-got .spark{animation:selblink .4s steps(2) infinite;color:#FFF27A}

/* ---------- wall preview + editor ---------- */
.wall-preview{position:relative;display:block;width:100%;aspect-ratio:16/9;border:3px solid var(--line);background:#10262A;padding:0;cursor:pointer;overflow:hidden}
.wall-preview canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.wall-preview .enter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:16px 22px;background:rgba(7,18,22,.88);border:3px solid #E8F1EE;color:#E8F1EE;font-family:'Press Start 2P',monospace;font-size:12px;line-height:1.6;box-shadow:5px 5px 0 #FF3EA5}
.wall-preview:hover .enter,.wall-preview:focus-visible .enter{background:#071216;border-color:#5CFF96}
.editor{position:fixed;inset:0;z-index:80;background:#05090D;color:#E8F1EE;display:flex;flex-direction:column}
.ed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;background:#071216;border-bottom:3px solid #1D3B41}
.ed-bar h2{margin:0;font-size:12px;color:#E8F1EE}
.ed-bar .live{color:#9DB8B4;font-size:16px}
.ed-btn{min-height:40px;min-width:40px;padding:0 10px;border:3px solid #1D3B41;background:transparent;color:#E8F1EE;font-family:'Handjet','DotGothic16',monospace;font-size:16px;cursor:pointer}
.ed-btn:hover{border-color:#E8F1EE}
.ed-btn[aria-pressed="true"]{background:#E8F1EE;color:#071216;border-color:#E8F1EE}
.ed-btn.danger{border-color:#FF3EA5;color:#FF3EA5}
.ed-stage{position:relative;flex:1 1 auto;min-height:0;touch-action:none;overflow:hidden}
.ed-stage canvas#wallView{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}
.ed-stage.pan canvas#wallView{cursor:grab}
.minimap{position:absolute;right:12px;bottom:12px;width:min(220px,34vw);aspect-ratio:16/9;border:3px solid #E8F1EE;background:#0A1A1E;cursor:pointer}
.minimap canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.ed-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#071216;border-top:3px solid #1D3B41}
.ed-tools .swatch{width:36px;height:36px}
.ed-tools .swatch[aria-pressed="true"]{border-color:#E8F1EE}
.ed-tools .seg{border-color:#1D3B41}
.ed-tools .seg button{color:#E8F1EE;min-height:40px}
.ed-tools .seg button[aria-pressed="true"]{background:#E8F1EE;color:#071216}
.ed-hint{font-size:14px;color:#9DB8B4;padding:0 12px 6px;background:#071216}
.ed-status{font-size:15px;color:#FFD23A;min-height:22px}

/* ---------- pager ---------- */
.pager-btn{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 14px 0 10px;border:3px solid #E8F1EE;background:#071216;color:#E8F1EE;font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer;box-shadow:4px 4px 0 #2EE6E6}
.pager-btn.new{animation:pgpulse 1s steps(2) 6}
@keyframes pgpulse{50%{box-shadow:4px 4px 0 #FFD23A}}
.pg-icon{width:34px;height:22px;background:#1B2228;border:2px solid #05090D;position:relative;flex:0 0 auto}
.pg-icon::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:12px;background:#8FD16B}
.pg-icon::after{content:"";position:absolute;right:3px;top:5px;width:4px;height:4px;background:#FF3EA5;box-shadow:0 6px 0 #2EE6E6}
.pager{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:45;width:min(360px,calc(100% - 32px));background:#1B2228;border:4px solid #05090D;box-shadow:6px 6px 0 rgba(0,0,0,.4);padding:14px;display:flex;flex-direction:column;gap:10px}
.pager .top{display:flex;justify-content:space-between;align-items:center;color:#C9D3D6;font-family:'Press Start 2P',monospace;font-size:10px}
.pager .top button{min-height:36px;min-width:36px;border:2px solid #5A6670;background:transparent;color:#C9D3D6;font-family:'Handjet','DotGothic16',monospace;font-size:16px;cursor:pointer}
.lcd{background:#8FD16B;color:#0F2A12;border:3px solid #05090D;box-shadow:inset 0 0 0 2px #6FAE52;height:min(300px,45vh);overflow-y:auto;padding:10px;font-family:'Handjet','DotGothic16',monospace;font-size:17px;line-height:1.4;display:flex;flex-direction:column;gap:8px}
.lcd .m{max-width:92%;overflow-wrap:anywhere}
.lcd .m b{font-family:'Press Start 2P',monospace;font-size:9px;display:block;margin-bottom:2px}
.lcd .m.me{align-self:flex-end;text-align:right}
.lcd .m.sys{opacity:.75;font-size:15px}
.pager form{display:flex;gap:8px}
.pager input{flex:1 1 auto;min-width:0;min-height:44px;border:3px solid #05090D;background:#C9D3D6;color:#0F2A12;font-family:'Handjet','DotGothic16',monospace;font-size:17px;padding:0 10px}
.pager form button{min-height:44px;padding:0 12px;border:3px solid #05090D;background:#2EE6E6;color:#05090D;font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer}
.pager form button:disabled{opacity:.5;cursor:default}
.sndbtn[aria-pressed="false"]{opacity:.6;text-decoration:line-through}
.sndbtn[aria-pressed="true"]{border-color:var(--green)}
html[data-motion="off"] .hot:hover img,html[data-motion="off"] .hot:focus-visible img,html[data-motion="off"] .caret,html[data-motion="off"] .pager-btn.new,html[data-motion="off"] .item-got .spark{animation:none}


/* ---------- life: animations ---------- */
@keyframes talkIn{0%{transform:translateX(-50%) translateY(26px) scale(.55,.15);opacity:0}55%{transform:translateX(-50%) translateY(-5px) scale(1.03,1.07);opacity:1}100%{transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes talkOut{to{transform:translateX(-50%) translateY(18px) scale(.8,.25);opacity:0}}
.talk.in{animation:talkIn .34s steps(6) both}
.talk.out{animation:talkOut .18s steps(3) both;pointer-events:none}
.talk .face{position:relative}
.talk .face img{animation:bob 1.3s steps(2) infinite}
.talk.speaking .face img{animation:bob .26s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.talk .face.pop{animation:facePop .3s steps(4)}
@keyframes facePop{0%{transform:scale(.55) rotate(-6deg)}60%{transform:scale(1.14) rotate(2deg)}100%{transform:scale(1)}}
.talk .name.slide{animation:nameIn .26s steps(4)}
@keyframes nameIn{from{transform:translateX(-14px);opacity:0}}
.talk .line.next{animation:lineIn .2s steps(3)}
@keyframes lineIn{from{transform:translateY(6px);opacity:.2}}
.talk .face::after{content:"";position:absolute;inset:0;border:3px solid var(--who,#2EE6E6);opacity:0;pointer-events:none}
.talk.speaking .face::after{animation:ring .5s steps(2) infinite}
@keyframes ring{50%{opacity:.7;inset:-6px}}
.emote{position:absolute;z-index:4;font-family:'Press Start 2P',monospace;font-size:14px;line-height:1;color:#071216;background:#FFF27A;border:3px solid #071216;padding:6px 8px;pointer-events:none;transform:translate(-50%,-100%);animation:emote 1.5s steps(10) forwards}
.emote::after{content:"";position:absolute;left:50%;bottom:-9px;width:8px;height:8px;margin-left:-4px;background:#FFF27A;border:3px solid #071216;border-top:0;border-left:0;transform:rotate(45deg)}
@keyframes emote{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}18%{transform:translate(-50%,-115%) scale(1.2);opacity:1}32%{transform:translate(-50%,-100%) scale(1)}78%{opacity:1;transform:translate(-50%,-100%)}100%{transform:translate(-50%,-140%);opacity:0}}
.hot:hover .tag,.hot:focus-visible .tag{animation:tagPop .3s steps(3)}
@keyframes tagPop{from{transform:translate(-50%,6px) scale(.4)}}
.hot.picked img{opacity:1;animation:picked .6s steps(3)}
@keyframes picked{0%,100%{filter:none}50%{filter:brightness(2.2)}}
.quest{transition:transform .08s steps(2)}
.quest:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line)}
.quest:hover .qi,.help:hover{animation:wiggle .36s steps(4)}
@keyframes wiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.quest.justdone{animation:questDone .7s steps(7)}
@keyframes questDone{0%{background:var(--surface)}30%{background:var(--green);color:var(--bg)}100%{background:var(--surface)}}
.help{animation:helpPulse 2.4s steps(2) infinite}
@keyframes helpPulse{0%,80%{box-shadow:none}90%{box-shadow:0 0 0 4px var(--yellow)}}
.lcd .m{animation:msgIn .28s steps(4)}
@keyframes msgIn{from{transform:translateY(8px);opacity:0}}
.pager.in{animation:pagerIn .3s steps(5) both}
@keyframes pagerIn{0%{transform:translateY(30px) scale(.85);opacity:0}70%{transform:translateY(-4px) scale(1.02);opacity:1}100%{transform:none}}
.pager-btn:hover .pg-icon,.pager-btn.ring .pg-icon{animation:buzz .12s steps(2) 6}
@keyframes buzz{50%{transform:translateX(2px) rotate(4deg)}}
.intro-gate .card .who{animation:bob 1.3s steps(2) infinite}
.intro-gate .card{animation:talkIn2 .5s steps(6) both}
.ig-stage{animation:stageIn .7s steps(8) both}
@keyframes stageIn{from{opacity:0;transform:scaleY(.04)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes talkIn2{0%{transform:translateY(20px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.item-got .pg{animation:itemUp 1.2s steps(8) both}
@keyframes itemUp{0%{transform:scale(.5) translateY(30px);opacity:0}40%{transform:scale(2.8) translateY(-6px);opacity:1}60%{transform:scale(2.4)}100%{transform:scale(2.4)}}
.wall-preview .enter{transition:transform .1s steps(2)}
.wall-preview:hover .enter{transform:translate(-50%,-50%) scale(1.06)}
html[data-motion="off"] .talk.in,html[data-motion="off"] .talk.out,html[data-motion="off"] .talk .face img,html[data-motion="off"] .talk.speaking .face img,html[data-motion="off"] .talk .face.pop,html[data-motion="off"] .talk .name.slide,html[data-motion="off"] .talk .line.next,html[data-motion="off"] .talk.speaking .face::after,html[data-motion="off"] .emote,html[data-motion="off"] .hot:hover .tag,html[data-motion="off"] .hot.picked img,html[data-motion="off"] .quest:hover .qi,html[data-motion="off"] .help,html[data-motion="off"] .help:hover,html[data-motion="off"] .quest.justdone,html[data-motion="off"] .lcd .m,html[data-motion="off"] .pager.in,html[data-motion="off"] .pager-btn:hover .pg-icon,html[data-motion="off"] .pager-btn.ring .pg-icon,html[data-motion="off"] .intro-gate .card .who,html[data-motion="off"] .intro-gate .card,html[data-motion="off"] .ig-stage,html[data-motion="off"] .item-got .pg{animation:none}
html[data-motion="off"] .emote{opacity:1}

/* ---------- gallery ---------- */
.gal-sub{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:32px 0 16px}
.gal-sub h3{margin:0;font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.6}
.gal-sub p{margin:0;color:var(--muted);font-size:17px;max-width:60ch}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px 22px;padding:10px 4px}
.piece{position:relative;background:#FFFFFF;border:3px solid #05090D;box-shadow:6px 6px 0 rgba(0,0,0,.35);padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;transform:rotate(var(--r,0deg));transition:transform .12s steps(3)}
.piece:hover{transform:rotate(0deg) translateY(-4px) scale(1.02);z-index:2}
.piece::before{content:"";position:absolute;top:-12px;left:50%;width:64px;height:20px;margin-left:-32px;background:rgba(255,242,122,.75);transform:rotate(calc(var(--r,0deg) * -2))}
.piece .open{display:block;padding:0;border:0;background:#fff;cursor:zoom-in;aspect-ratio:16/10;width:100%}
.piece .open img{width:100%;height:100%;object-fit:contain;display:block}
.piece .cap{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#0C1B1F;font-size:15px}
.piece .cap a{color:#C4176F;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.piece .cap a:hover{text-decoration:underline}
.piece .num{font-family:'Press Start 2P',monospace;font-size:9px;color:#3E5A5E}
.piece .del{min-height:32px;padding:0 8px;border:2px solid #C4176F;background:transparent;color:#C4176F;font-family:'Handjet','DotGothic16',monospace;font-size:14px;cursor:pointer}
.piece.empty{background:var(--surface);border-style:dashed;border-color:var(--line);box-shadow:none;align-items:center;justify-content:center;text-align:center;min-height:220px;color:var(--muted)}
.piece.empty::before{display:none}
.send{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:stretch}
.send .stile ol{margin:0;padding-left:22px;color:var(--muted);font-size:17px;display:flex;flex-direction:column;gap:6px}
.lightbox{position:fixed;inset:0;z-index:85;background:rgba(3,8,10,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px}
.lightbox figure{margin:0;max-width:min(1200px,100%);max-height:calc(100% - 120px);display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:100%;max-height:70vh;object-fit:contain;background:#fff;border:4px solid #05090D;box-shadow:0 0 0 4px #E8F1EE}
.lightbox.in figure{animation:talkIn2 .3s steps(5) both}
.lightbox figcaption{color:#E8F1EE;font-size:18px;text-align:center}
.lightbox figcaption a{color:#FF7FC8}
.lb-ctrl{display:flex;gap:10px}
.lb-ctrl button{min-height:44px;min-width:44px;padding:0 14px;border:3px solid #E8F1EE;background:transparent;color:#E8F1EE;font-family:'Handjet','DotGothic16',monospace;font-size:17px;cursor:pointer}
.lb-ctrl button:hover{background:#E8F1EE;color:#071216}

/* ---------- chronicle (real videos) ---------- */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,300px));gap:28px;align-items:start;justify-content:start}
.reel{display:flex;flex-direction:column;gap:12px}
.phone{position:relative;aspect-ratio:9/16;background:#05090D;border:4px solid #05090D;box-shadow:0 0 0 3px var(--line),8px 8px 0 rgba(0,0,0,.35);overflow:hidden}
.phone img,.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#05090D}
.phone .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:linear-gradient(transparent 55%,rgba(5,9,13,.75));cursor:pointer}
.phone .play span{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:#FFF27A;border:4px solid #05090D;box-shadow:5px 5px 0 #FF3EA5;transition:transform .1s steps(2)}
.phone .play:hover span,.phone .play:focus-visible span{transform:scale(1.12)}
.phone .badge{position:absolute;left:10px;top:10px;font-family:'Press Start 2P',monospace;font-size:9px;color:#05090D;background:#5CFF96;padding:5px 6px;pointer-events:none}
.phone .dur{position:absolute;right:10px;bottom:10px;font-family:'Press Start 2P',monospace;font-size:9px;color:#E8F1EE;background:rgba(5,9,13,.8);padding:5px 6px;pointer-events:none}
.reel.wide{grid-column:span 2}
.phone.wide{aspect-ratio:16/9}
@media (max-width:640px){ .reel.wide{grid-column:auto} }
.reel h3{margin:0;font-family:'Press Start 2P',monospace;font-size:12px;line-height:1.6}
.reel p{margin:0;color:var(--muted);font-size:17px}
.vmodal{position:fixed;inset:0;z-index:86;background:rgba(3,8,10,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
.vmodal video.wide{aspect-ratio:16/9;width:min(1100px,100%)}
.vmodal video{max-height:calc(100vh - 140px);max-width:100%;aspect-ratio:9/16;background:#05090D;border:4px solid #05090D;box-shadow:0 0 0 4px #E8F1EE}
.vmodal.in video{animation:talkIn2 .3s steps(5) both}
.vmodal p{margin:0;color:#E8F1EE;font-size:18px;text-align:center}
.talk .ctrl button.watch{border-color:#FFF27A;color:#FFF27A}

/* ---------- wall: nick + chat ---------- */
.guest-badge{font-family:'Press Start 2P',monospace;font-size:9px;color:#05090D;background:#FFD23A;padding:6px 8px;border:2px solid #05090D}
.wchat .wc-m .loc{color:#9DB8B4;font-size:13px;margin-left:6px}
.nickgate{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(5,9,13,.72);padding:16px}
.nickgate form{background:#071216;border:4px solid #E8F1EE;box-shadow:6px 6px 0 #FF3EA5;padding:22px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:12px;animation:talkIn2 .3s steps(5) both}
.nickgate h3{margin:0;font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.6;color:#E8F1EE}
.nickgate input{min-height:46px;border:3px solid #1D3B41;background:#0C1F25;color:#E8F1EE;font-family:'Handjet','DotGothic16',monospace;font-size:19px;padding:0 12px}
.nickgate input:focus{border-color:#5CFF96;outline:none}
.nickgate p{margin:0;color:#9DB8B4;font-size:15px}
.nickgate .err{color:#FF7FC8;min-height:20px}
.wchat{position:absolute;left:12px;bottom:12px;z-index:3;width:min(330px,calc(100% - 24px));height:min(46%,360px);display:flex;flex-direction:column;background:rgba(7,18,22,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:2px solid rgba(232,241,238,.35);color:#E8F1EE}
.wchat .wc-top{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-family:'Press Start 2P',monospace;font-size:9px;color:#9DB8B4;border-bottom:1px solid rgba(232,241,238,.15)}
.wchat .wc-list{flex:1 1 auto;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:4px;font-size:17px;line-height:1.3}
.wchat .wc-m{overflow-wrap:anywhere;animation:msgIn .25s steps(3)}
.wchat .wc-m b{font-weight:600;margin-right:6px}
.wchat .wc-m .x{margin-left:6px;border:0;background:none;color:#FF7FC8;cursor:pointer;font-size:13px}
.wchat .wc-rules{padding:4px 8px;font-size:12px;color:#9DB8B4;border-top:1px solid rgba(232,241,238,.15)}
.wchat form{display:flex;gap:6px;padding:6px}
.wchat input{flex:1 1 auto;min-width:0;min-height:38px;border:2px solid rgba(232,241,238,.35);background:rgba(5,9,13,.6);color:#E8F1EE;font-family:'Handjet','DotGothic16',monospace;font-size:15px;padding:0 8px}
.wchat button[type=submit]{min-height:38px;padding:0 10px;border:2px solid #5CFF96;background:transparent;color:#5CFF96;font-family:'Press Start 2P',monospace;font-size:9px;cursor:pointer}

/* ---------- achievements ---------- */
.ach-btn{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:40;min-height:44px;padding:0 12px;border:3px solid #FFF27A;background:#071216;color:#FFF27A;font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer;box-shadow:4px 4px 0 #FF3EA5}
.ach-btn.bump{animation:facePop .35s steps(4)}
.ach-panel{position:fixed;inset:0;z-index:96;background:rgba(3,8,10,.85);display:flex;align-items:center;justify-content:center;padding:16px}
.ach-box{background:#071216;color:#E8F1EE;border:4px solid #E8F1EE;box-shadow:8px 8px 0 #FF3EA5;width:min(860px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;animation:talkIn2 .3s steps(5) both}
.ach-box .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ach-box h2{margin:0;font-size:14px;color:#FFF27A}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ach{display:flex;gap:10px;align-items:flex-start;border:3px solid #1D3B41;padding:10px;background:#0C1F25}
.ach img{width:44px;height:44px;image-rendering:pixelated;flex:0 0 auto;border:2px solid #1D3B41;background:#071216}
.ach.locked img{filter:grayscale(1) brightness(.5)}
.ach.locked{opacity:.7}
.ach b{display:block;font-family:'Press Start 2P',monospace;font-size:10px;line-height:1.6;color:#FFF27A}
.ach.locked b{color:#9DB8B4}
.ach span{display:block;font-size:15px;color:#9DB8B4}
.ach q{display:block;font-size:15px;color:#E8F1EE;margin-top:4px;quotes:none}
.toasts{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:97;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:min(360px,calc(100% - 24px))}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;background:#071216;color:#E8F1EE;border:3px solid #FFF27A;box-shadow:5px 5px 0 #FF3EA5;padding:10px;animation:toastIn .35s steps(5) both;cursor:pointer}
.toast.out{animation:toastOut .25s steps(3) both}
@keyframes toastIn{0%{transform:translateX(110%)}70%{transform:translateX(-6px)}100%{transform:none}}
@keyframes toastOut{to{transform:translateX(110%);opacity:0}}
.toast img{width:52px;height:52px;image-rendering:pixelated;border:2px solid #1D3B41;flex:0 0 auto}
.toast small{display:block;font-family:'Press Start 2P',monospace;font-size:8px;color:#5CFF96;margin-bottom:4px}
.toast b{display:block;font-family:'Press Start 2P',monospace;font-size:10px;line-height:1.5;color:#FFF27A}
.toast p{margin:4px 0 0;font-size:15px}
.toast .sub{color:#9DB8B4;font-size:13px}

/* ---------- Johnny ---------- */
.pet{position:absolute;z-index:6;padding:2% 1.5%;margin:-2% 0 0 -1.5%;border:0;background:none;cursor:grab;width:6.5%;box-sizing:content-box;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.pet.dragging{cursor:grabbing;z-index:9}
.pet.dragging img{filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
.pet img{pointer-events:none;-webkit-user-drag:none}
.pet img{aspect-ratio:26/20}
.pet img{width:100%;height:100%;image-rendering:pixelated;display:block}
.pet.left img{transform:scaleX(-1)}
.pet:hover img,.pet:focus-visible img{filter:drop-shadow(2px 0 0 #FFF27A) drop-shadow(-2px 0 0 #FFF27A) drop-shadow(0 2px 0 #FFF27A) drop-shadow(0 -2px 0 #FFF27A)}
.pet:focus-visible{outline:none}
.talk .sub{margin:0;color:#9DB8B4;font-size:18px}

/* ---------- manifesto + roadmap ---------- */
.manifesto{position:relative;background:#F2EEE3;color:#14161B;border:4px solid #05090D;box-shadow:10px 10px 0 rgba(0,0,0,.35);padding:clamp(22px,4vw,48px);transform:rotate(-.6deg);max-width:860px}
.manifesto::before,.manifesto::after{content:"";position:absolute;top:-14px;width:90px;height:24px;background:rgba(255,242,122,.8)}
.manifesto::before{left:30px;transform:rotate(-4deg)}
.manifesto::after{right:30px;transform:rotate(5deg)}
.manifesto h2{font-size:clamp(20px,3vw,30px);color:#14161B;margin:0 0 18px;text-shadow:3px 3px 0 #FF3EA5}
.manifesto p{margin:0 0 14px;font-size:clamp(18px,1.8vw,21px);line-height:1.55;max-width:62ch}
.manifesto .sign{font-family:'Press Start 2P',monospace;font-size:12px;margin-top:20px;color:#C4176F}
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.road .col{background:var(--surface);border:3px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:10px}
.road .col h3{margin:0;font-family:'Press Start 2P',monospace;font-size:12px;line-height:1.6}
.road ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.road li{font-size:17px}
.faq{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.faq .q{background:var(--surface);border:3px solid var(--line);border-left:8px solid var(--pink);padding:18px}
.faq .q h3{margin:0 0 10px;font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.6;color:var(--pink)}
.faq .q p{margin:0 0 10px}
html[data-motion="off"] .toast,html[data-motion="off"] .toast.out,html[data-motion="off"] .ach-box,html[data-motion="off"] .nickgate form,html[data-motion="off"] .wchat .wc-m,html[data-motion="off"] .ach-btn.bump{animation:none}

/* ---------- dope + smoke session ---------- */
.leaf{vertical-align:-2px;margin:0 2px 0 8px}
.dope-line{margin:0;color:#5CFF96;font-size:16px}
.talk .ctrl button.smoke{border-color:#5CFF96;color:#5CFF96}
.talk .face .stoned{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%) rotate(-6deg);font-family:'Press Start 2P',monospace;font-size:8px;color:#071216;background:#FF3EA5;padding:3px 5px;border:2px solid #071216;white-space:nowrap;z-index:2}
.sesh{position:fixed;inset:0;z-index:88;background:rgba(3,8,10,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;overflow:hidden}
.sesh .frame{position:relative;width:min(300px,62vw);aspect-ratio:1;border:4px solid #5CFF96;background:#0C2026;box-shadow:0 0 0 4px #071216,0 0 60px rgba(92,255,150,.25)}
.sesh .frame img{width:100%;height:100%;image-rendering:pixelated;display:block;animation:bob 1.6s steps(2) infinite}
.sesh .who{font-family:'Press Start 2P',monospace;font-size:13px;color:#E8F1EE}
.sesh .puff{position:absolute;width:26px;height:26px;background:rgba(214,226,226,.75);box-shadow:26px 0 0 rgba(214,226,226,.6),0 -26px 0 rgba(214,226,226,.55),-26px 0 0 rgba(214,226,226,.5);pointer-events:none;animation:puff 2.6s steps(10) forwards}
@keyframes puff{0%{transform:translate(0,0) scale(.35);opacity:.95}100%{transform:translate(var(--dx,0px),-260px) scale(2.6);opacity:0}}
.sesh .stamp{position:absolute;top:50%;left:50%;font-family:'Press Start 2P',monospace;font-size:clamp(22px,6vw,44px);color:#FF3EA5;border:6px solid #FF3EA5;padding:10px 16px;background:rgba(7,18,22,.6);text-shadow:4px 4px 0 #071216;opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(3);pointer-events:none}
.sesh .stamp.hit{animation:stamp .4s steps(4) forwards}
@keyframes stamp{60%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(.92)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}}
.sesh .skip{background:none;border:0;color:#9DB8B4;font-family:'Handjet','DotGothic16',monospace;font-size:15px;text-decoration:underline;cursor:pointer;min-height:44px}
body.hazy .hero-frame canvas.fx,body.hazy .hero-frame img.scene{animation:haze 7s ease-in-out}
@keyframes haze{0%,100%{filter:none}25%{filter:hue-rotate(70deg) saturate(1.7) blur(1px)}55%{filter:hue-rotate(-50deg) saturate(1.5)}80%{filter:hue-rotate(20deg) blur(.5px)}}
.hot .zz{position:absolute;left:50%;top:-6%;width:10px;height:10px;background:rgba(214,226,226,.8);pointer-events:none;animation:zz 2.4s steps(6) infinite}
@keyframes zz{0%{transform:translate(-50%,0) scale(.5);opacity:.9}100%{transform:translate(-20%,-40px) scale(1.8);opacity:0}}
html[data-motion="off"] .sesh .frame img,html[data-motion="off"] .sesh .puff,html[data-motion="off"] .hot .zz,html[data-motion="off"] body.hazy .hero-frame canvas.fx{animation:none}
html[data-motion="off"] .sesh .stamp.hit{animation:none;opacity:1;transform:translate(-50%,-50%) rotate(-10deg)}

/* ---------- comic: inspect objects ---------- */
.look{position:absolute;z-index:1;padding:0;border:0;background:transparent;cursor:zoom-in}
.hot{z-index:2}
.look:hover,.look:focus-visible{outline:2px dashed #FFF27A;outline-offset:1px;background:rgba(255,242,122,.08)}
.comic{position:absolute;z-index:7;max-width:min(320px,70%);background:#FFFDF4;color:#14161B;border:3px solid #05090D;box-shadow:5px 5px 0 #05090D;padding:10px 12px 10px 10px;display:flex;gap:10px;align-items:flex-start;transform-origin:50% 100%;animation:comicIn .28s steps(4) both;cursor:pointer}
.comic.below{transform-origin:50% 0}
.comic::after{content:"";position:absolute;left:var(--tail,50%);bottom:-13px;width:16px;height:16px;margin-left:-8px;background:#FFFDF4;border-right:3px solid #05090D;border-bottom:3px solid #05090D;transform:rotate(45deg)}
.comic.below::after{bottom:auto;top:-13px;transform:rotate(225deg)}
.comic img{width:42px;height:42px;image-rendering:pixelated;border:2px solid #05090D;background:#0C2026;flex:0 0 auto}
.comic b{display:block;font-family:'Press Start 2P',monospace;font-size:9px;margin-bottom:4px;color:#C4176F}
.comic p{margin:0;font-size:19px;line-height:1.3}
.comic .sub{color:#5A6670;font-size:16px;margin-top:3px}
.comic .pow{position:absolute;top:-16px;right:-10px;font-family:'Press Start 2P',monospace;font-size:10px;background:#FFF27A;border:3px solid #05090D;padding:4px 6px;transform:rotate(8deg)}
@keyframes comicIn{0%{transform:scale(.2) rotate(-6deg);opacity:0}70%{transform:scale(1.08) rotate(1deg);opacity:1}100%{transform:none}}
.comic.out{animation:comicOut .16s steps(2) both}
@keyframes comicOut{to{transform:scale(.6);opacity:0}}
html[data-motion="off"] .comic,html[data-motion="off"] .comic.out{animation:none}

/* ---------- ranked battles ---------- */
.rk-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:var(--surface);border:3px solid var(--line);padding:14px 16px;margin-bottom:18px}
.rk-me{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.rk-me b{font-family:'Press Start 2P',monospace;font-size:12px}
.rk-rank{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--bg);background:var(--yellow);padding:4px 6px}
.rk-me .wl{color:var(--muted)}
.rk-nick{display:flex;gap:8px;align-items:center}
.rk-nick input{min-height:44px;border:3px solid var(--line);background:var(--bg);color:var(--text);font-family:'Handjet','DotGothic16',monospace;font-size:17px;padding:0 10px;width:12em}
.rk-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:26px}
.rk-col h3,.rk-h3{margin:0 0 10px;font-family:'Press Start 2P',monospace;font-size:12px;line-height:1.6}
.rk-list{display:flex;flex-direction:column;gap:8px}
.rk-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:3px solid var(--line);padding:10px 12px}
.rk-item span{color:var(--muted);font-size:16px}
.rk-empty{color:var(--muted);font-size:16px;border:3px dashed var(--line);padding:12px}
.rk-vote{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:26px}
.rk-card{background:var(--surface);border:3px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px}
.rk-card .hd{display:flex;justify-content:space-between;gap:8px;font-size:16px;color:var(--muted)}
.rk-card .hd b{color:var(--text);font-family:'Press Start 2P',monospace;font-size:10px}
.rk-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rk-pair .side{display:flex;flex-direction:column;gap:6px}
.rk-pair canvas{width:100%;aspect-ratio:16/9;image-rendering:pixelated;border:3px solid #05090D;background:#10262A}
.rk-pair .side.win canvas{border-color:var(--yellow);box-shadow:0 0 0 3px var(--yellow)}
.vote-btn{min-height:44px;border:3px solid var(--line);background:transparent;color:var(--text);font-family:'Handjet','DotGothic16',monospace;font-size:16px;cursor:pointer;overflow-wrap:anywhere}
.vote-btn[aria-pressed="true"]{border-color:var(--pink);color:var(--pink)}
.vote-btn:disabled{opacity:.55;cursor:default}
.rk-board{margin:0;padding-left:28px;display:flex;flex-direction:column;gap:4px;max-width:520px}
.rk-board li{background:var(--surface);border-left:6px solid var(--line);padding:8px 12px;display:flex;justify-content:space-between;gap:10px}
.rk-board li:nth-child(1){border-left-color:var(--yellow)}
.arena{position:fixed;inset:0;z-index:84;background:#05090D;color:#E8F1EE;display:flex;flex-direction:column}
.ar-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;background:#071216;border-bottom:3px solid #1D3B41}
.ar-bar b{font-family:'Press Start 2P',monospace;font-size:12px}
.ar-theme{color:#FFF27A}
.ar-timer{font-family:'Press Start 2P',monospace;font-size:16px;color:#5CFF96;min-width:5ch}
.ar-timer.hot{color:#FF3EA5;animation:selblink .5s steps(2) infinite}
.ar-sides{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:12px;overflow:auto}
.ar-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.ar-name{font-family:'Press Start 2P',monospace;font-size:11px}
.ar-side canvas{width:100%;aspect-ratio:16/9;image-rendering:pixelated;border:4px solid #1D3B41;background:#10262A;touch-action:none}
.ar-side.mine canvas{border-color:#5CFF96;cursor:crosshair}
.ar-vs{font-family:'Press Start 2P',monospace;font-size:22px;color:#FF3EA5;text-shadow:3px 3px 0 #071216}
.ar-tools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));background:#071216;border-top:3px solid #1D3B41}
.ar-tools .swatch{width:34px;height:34px}
.ar-tools .swatch[aria-pressed="true"]{border-color:#E8F1EE}
.ar-tools .seg{border-color:#1D3B41}
.ar-tools .seg button{color:#E8F1EE;min-height:38px}
.ar-tools .seg button[aria-pressed="true"]{background:#E8F1EE;color:#071216}
.ar-status{margin:0;color:#FFD23A;font-size:16px}
.ar-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:'Press Start 2P',monospace;font-size:clamp(28px,8vw,80px);color:#FFF27A;text-shadow:5px 5px 0 #FF3EA5}
@media (max-width:760px){ .ar-sides{grid-template-columns:1fr} .ar-vs{text-align:center;font-size:16px} }

/* ---------- TRUE OG ---------- */
.vibebtn{position:absolute;left:calc(10px + 12em);bottom:10px;z-index:5;min-height:36px;padding:0 10px;border:3px solid #D7263D;background:rgba(7,18,22,.85);color:#FFF;font-family:'Handjet','DotGothic16',monospace;font-size:15px;cursor:pointer}
.vibebtn b{font-family:'Press Start 2P',monospace;font-size:10px;color:#FFD23A;font-weight:400}
.vibebtn:hover{background:#D7263D}
.card.locked .pic img{filter:brightness(0) drop-shadow(0 0 2px #FFF27A)}
.card.locked h3{color:var(--muted) !important}
.og-flash{position:fixed;inset:0;z-index:89;pointer-events:none;background:radial-gradient(circle,rgba(215,38,61,.55),transparent 70%);animation:ogflash 1.2s steps(6) forwards}
@keyframes ogflash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
html[data-motion="off"] .og-flash,html[data-motion="off"] .ar-timer.hot{animation:none}

/* ---------- KITSUNE, powers, cutscene ---------- */
.hero-frame canvas.fxover{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;image-rendering:pixelated}
.powbtn{position:absolute;left:calc(10px + 21em);bottom:10px;z-index:5;min-height:36px;padding:0 10px;border:3px solid #2EE6E6;background:rgba(7,18,22,.85);color:#FFF;font-family:'Handjet','DotGothic16',monospace;font-size:16px;cursor:pointer}
.powbtn b{font-family:'Press Start 2P',monospace;font-size:10px;color:#9FF7F7;font-weight:400}
.cutstamp{position:absolute;left:50%;top:42%;z-index:8;transform:translate(-50%,-50%) rotate(-6deg) scale(2.5);opacity:0;pointer-events:none;font-family:'Press Start 2P',monospace;font-size:clamp(14px,3vw,30px);color:#9FF7F7;border:5px solid #9FF7F7;padding:10px 14px;background:rgba(7,18,22,.75);text-shadow:3px 3px 0 #071216;white-space:nowrap}
.cutstamp.hit{animation:stamp2 .45s steps(4) forwards}
@keyframes stamp2{60%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(.92)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}
.cutstamp.out{transition:opacity .6s;opacity:0 !important}
.talk .ctrl button.choice{border-color:#2EE6E6;color:#9FF7F7}
.ach-sec{margin-top:6px;font-family:'Press Start 2P',monospace;font-size:11px;color:#9FF7F7}
html[data-motion="off"] .cutstamp.hit{animation:none;opacity:1;transform:translate(-50%,-50%) rotate(-6deg)}
.support-hd{margin:4px 0 14px;font-family:'Press Start 2P',monospace;font-size:clamp(16px,2.6vw,26px);line-height:1.5;color:var(--yellow);text-shadow:3px 3px 0 var(--pink)}
:root[data-theme="light"] .support-hd{color:var(--pink);text-shadow:2px 2px 0 rgba(0,0,0,.12)}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .support-hd{color:var(--pink);text-shadow:2px 2px 0 rgba(0,0,0,.12)} }

/* ---------- header v2 ---------- */
header .wrap{flex-wrap:nowrap;gap:14px;min-height:60px;padding-top:8px;padding-bottom:8px}
.logo{flex:0 0 auto;font-size:15px}
nav.main{flex:1 1 auto;justify-content:center;gap:2px;flex-wrap:nowrap}
nav.main a{font-size:17px;padding:8px 9px;color:var(--muted);white-space:nowrap}
nav.main a:hover{color:var(--text)}
nav.main a.active,.mm-nav a.active{color:var(--text);box-shadow:inset 0 -3px 0 var(--pink)}
.head-actions{flex:0 0 auto;flex-wrap:nowrap;gap:6px}
.head-actions .lang button{min-height:38px;padding:0 9px;font-size:9px}
.head-actions .sndbtn,.head-actions #fmBtn{min-height:40px;min-width:40px;padding:0 10px;justify-content:center}
.head-actions .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.head-actions .sndbtn[aria-pressed="false"]{text-decoration:none}
.head-actions .cta{min-height:40px;padding:0 14px;font-size:10px}
.menu-btn{display:none;min-height:40px;min-width:40px;border:3px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.menu-btn .mb-close{display:none}
.menu-btn[aria-expanded="true"] .mb-open{display:none}
.menu-btn[aria-expanded="true"] .mb-close{display:inline}
.mmenu{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:3px solid var(--line);padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 18px 40px rgba(0,0,0,.45);animation:mmIn .18s ease-out}
@keyframes mmIn{from{transform:translateY(-8px);opacity:0}}
.mm-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.mm-nav a{display:block;padding:12px 6px;font-size:22px;text-decoration:none;color:var(--text);border-bottom:2px solid var(--line)}
.mm-set{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.mm-set .lbl{position:static;width:auto;height:auto;clip:auto}
.mm-set .sndbtn,.mm-set #fmBtn{min-height:44px;padding:0 12px}
@media (max-width:1180px){ nav.main{display:none} .menu-btn{display:inline-flex} header .wrap{justify-content:space-between} }
@media (max-width:640px){ .logo{font-size:13px} header .wrap{min-height:56px} }
html[data-motion="off"] .mmenu{animation:none}
/* ---------- hero: scrollable on phones, tools under the scene ---------- */
.hero-pan{position:relative}
.hero-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;padding:10px 16px;border-top:3px solid var(--line);background:#071216}
.hero-bar .fxbtn,.hero-bar .vibebtn,.hero-bar .powbtn{position:static;left:auto;bottom:auto}
.hb-tip{color:#9DB8B4;font-size:16px;margin-left:8px}
.pan-hint{display:none}
.proto{position:absolute;z-index:2;padding:0;border:0;background:none;cursor:zoom-in}
.proto img{width:100%;height:100%;image-rendering:pixelated;display:block}
.proto:hover img,.proto:focus-visible img{filter:drop-shadow(1px 0 0 #FFF27A) drop-shadow(-1px 0 0 #FFF27A) drop-shadow(0 1px 0 #FFF27A) drop-shadow(0 -1px 0 #FFF27A)}
.proto-box{background:#071216;border:4px solid #E8F1EE;box-shadow:8px 8px 0 #FF3EA5;padding:18px;max-width:min(840px,100%);display:flex;flex-direction:column;gap:12px;animation:talkIn2 .3s steps(5) both}
.proto-box h3{margin:0;font-family:'Press Start 2P',monospace;font-size:14px;color:#FFF27A}
.proto-box img{width:100%;image-rendering:pixelated;border:3px solid #05090D}
.proto-box p{margin:0;color:#E8F1EE;font-size:19px}
@media (max-width:720px){
  .hero-pan{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hero-pan::-webkit-scrollbar{display:none}
  .hero-frame{width:calc(min(62vh, 440px) * 16 / 9);max-width:none;margin:0}
  .pan-hint{display:block;position:relative;margin-top:-40px;height:40px;line-height:40px;text-align:center;pointer-events:none;color:#FFF27A;font-size:18px;text-shadow:2px 2px 0 #05090D;transition:opacity .4s}
  .pan-hint.gone{opacity:0}
  .hb-tip{width:100%;text-align:center;margin:0}
}

/* ---------- manifesto + LED sign ---------- */
.man-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;align-items:center}
.ledsign{position:relative;margin:0;padding:28px 18px 0;background:radial-gradient(ellipse at 70% 0%,rgba(150,230,225,.35),transparent 60%),linear-gradient(#1D5A5E,#0E3438 70%,#0A2528);border:3px solid #05090D;min-height:280px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.led-fog{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(200,255,250,.18),transparent 55%);pointer-events:none}
.ledsign canvas{position:relative;width:100%;height:auto;background:#140A08;border:5px solid #0A0605;box-shadow:0 0 0 2px #2A1A14,0 10px 30px rgba(0,0,0,.5),0 0 60px rgba(255,90,30,.18)}
.led-pole{width:14px;height:60px;background:linear-gradient(90deg,#1A1210,#3A2A24,#1A1210)}
@media (max-width:900px){ .man-row{grid-template-columns:1fr} }
/* ---------- secret arrow ---------- */
.secret-arrow{position:absolute;z-index:3;padding:0;border:0;background:none;cursor:pointer;animation:arrowNudge 1.1s steps(3) infinite}
.secret-arrow svg{width:100%;height:100%;display:block;image-rendering:pixelated;filter:drop-shadow(0 0 3px rgba(255,242,122,.8))}
@keyframes arrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-14%)}}
html[data-motion="off"] .secret-arrow{animation:none}
/* ---------- ICE's lair ---------- */
.wokroom{position:fixed;inset:0;z-index:87;background:#06030D;display:flex;flex-direction:column;color:#E8F1EE}
.wr-bar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;background:#0E0820;border-bottom:3px solid #2C1A4D}
.wr-bar b{font-family:'Press Start 2P',monospace;font-size:12px;color:#C9A2FF}
.wr-pan{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.wr-frame{position:relative;width:min(100vw, calc((100vh - 140px) * 16 / 9));aspect-ratio:16/9;flex:0 0 auto}
.wr-frame canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.wr-frame .hot{background:transparent;border:0}
.wr-frame .hot:hover,.wr-frame .hot:focus-visible{outline:2px dashed #C9A2FF;outline-offset:2px}
.wr-tip{margin:0;padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px));text-align:center;color:#9D8BC4;font-size:17px}
@media (max-width:720px){ .wr-pan{justify-content:flex-start} .wr-frame{width:calc(min(60vh,420px) * 16 / 9)} }
/* ---------- living crew cards ---------- */
.card .pic img{animation:cardIdle 1.8s steps(2) infinite;transform-origin:50% 100%}
.card:nth-child(2n) .pic img{animation-delay:-.6s}
.card:nth-child(3n) .pic img{animation-delay:-1.1s}
.card:hover .pic img{animation:cardHop .45s steps(4)}
@keyframes cardIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cardHop{0%{transform:translateY(0)}40%{transform:translateY(-12px) rotate(-3deg)}70%{transform:translateY(-4px) rotate(2deg)}100%{transform:translateY(0)}}
.card.locked .pic img{animation:none}
html[data-motion="off"] .card .pic img{animation:none}
/* ---------- demo tracks ---------- */
.demo-badge{position:absolute;left:-6px;top:12px;z-index:2;font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.5;color:#05090D;background:#FFD23A;padding:4px 7px;border:2px solid #05090D;transform:rotate(-4deg);box-shadow:3px 3px 0 #FF3EA5}
.why-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:10px;vertical-align:middle;border:2px solid var(--yellow);background:transparent;color:var(--yellow);font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer}
.why-btn:hover{background:var(--yellow);color:var(--bg)}

/* ---------- Docs ---------- */
.docs-page{padding:28px 0 60px;min-height:70vh}
.docs-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.docs-crumb{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--muted)}
.docs-h1{margin:0 0 6px;font-family:'Press Start 2P',monospace;font-size:clamp(22px,4vw,36px);color:var(--text);text-shadow:4px 4px 0 var(--pink)}
.docs-end{display:flex;justify-content:center;margin-top:34px}
body.docs-mode main{display:none}
.docs-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;align-items:start}
.docs-toc{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px;border-left:3px solid var(--line);padding-left:4px}
.docs-toc a{display:block;padding:7px 10px;color:var(--muted);text-decoration:none;font-size:17px;line-height:1.25}
.docs-toc a:hover{color:var(--text)}
.docs-toc a.on{color:var(--text);box-shadow:inset 3px 0 0 var(--pink);margin-left:-7px;padding-left:17px}
.docs-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.doc-card{background:var(--surface);border:2px solid var(--line);padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start;scroll-margin-top:84px}
.doc-card.wide{grid-template-columns:1fr}
.doc-card.noimg{grid-template-columns:1fr}
.doc-card .dhd{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.doc-card .num{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--pink)}
.doc-card h3{margin:0;font-family:'Press Start 2P',monospace;font-size:14px;line-height:1.5}
.doc-card .dlead{margin:4px 0 12px;font-size:19px;color:var(--text)}
.doc-card ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:17px}
.doc-card ul b{color:var(--text);font-weight:600}
.doc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.doc-tags span{font-family:'Press Start 2P',monospace;font-size:8px;line-height:1;color:var(--bg);background:var(--cyan);padding:6px 7px}
.doc-shot{margin:0;display:flex;flex-direction:column;gap:6px}
.doc-shot button{padding:0;border:2px solid #05090D;background:#05090D;cursor:zoom-in;display:block;box-shadow:6px 6px 0 rgba(0,0,0,.3)}
.doc-shot img{display:block;width:100%;height:auto}
.doc-shot figcaption{font-size:15px;color:var(--muted)}
.doc-stack{width:100%;border-collapse:collapse;font-size:17px}
.doc-stack th,.doc-stack td{text-align:left;padding:9px 10px;border-bottom:2px solid var(--line);vertical-align:top}
.doc-stack th{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--muted);font-weight:400}
.doc-stack td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.doc-stack td{color:var(--muted)}
.dz-fig{margin:0;max-width:min(1200px,100%);display:flex;flex-direction:column;gap:10px;align-items:center}
.dz-fig img{max-width:100%;max-height:78vh;border:3px solid #E8F1EE}
.dz-fig figcaption{color:#E8F1EE;font-size:18px;text-align:center}
@media (max-width:980px){ .docs-grid{grid-template-columns:1fr} .docs-toc{position:static;flex-direction:row;flex-wrap:wrap;border-left:0;padding:0;gap:6px} .docs-toc a{border:2px solid var(--line);padding:6px 10px;font-size:16px} .docs-toc a.on{margin-left:0;padding-left:10px;box-shadow:none;border-color:var(--pink)} .doc-card{grid-template-columns:1fr;padding:18px} }

/* ---------- quest board ---------- */
.qprog{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:4px 0 18px}
.qprog b{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--text);font-weight:400}
.qprog span{color:var(--muted);font-size:17px}
.qbar{display:flex;gap:3px}
.qbar i{width:16px;height:12px;border:2px solid var(--line);background:transparent}
.qbar i.on{background:var(--qc);border-color:#05090D}
.quests{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.qcard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:0;padding:14px 14px 12px;text-align:left;border:3px solid var(--line);background:var(--surface);cursor:pointer;overflow:hidden;transition:transform .12s steps(2),border-color .12s}
.qcard::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--qc)}
.qcard:hover,.qcard:focus-visible{transform:translateY(-4px);border-color:var(--qc)}
.qcard:hover .qtile svg{animation:qwiggle .5s steps(3)}
.qtile{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:color-mix(in srgb,var(--qc) 18%,transparent);border:2px solid color-mix(in srgb,var(--qc) 55%,transparent);box-shadow:3px 3px 0 #05090D}
.qtile svg{width:44px;height:44px;display:block}
.qtop{display:flex;align-items:center;gap:8px}
.qnum{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--muted)}
.qtag{font-family:'Press Start 2P',monospace;font-size:8px;line-height:1;color:#05090D;background:var(--qc);padding:5px 6px}
.qq{font-size:20px;line-height:1.25;color:var(--text);flex:1 1 auto}
.qfoot{display:flex;align-items:center;gap:8px;border-top:2px dashed var(--line);padding-top:9px}
.qwho{width:22px;height:22px;image-rendering:pixelated;border:2px solid #05090D;background:#0C2026}
.qby{flex:1 1 auto;color:var(--muted);font-size:15px}
.qrew{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--green)}
.qcard[data-done="true"]{border-color:color-mix(in srgb,var(--qc) 60%,var(--line))}
.qcard[data-done="true"] .qq{color:var(--muted)}
.qcard[data-done="true"] .qtile{filter:saturate(.55)}
.qstamp{position:absolute;right:-6px;top:22px;transform:rotate(12deg);font-family:'Press Start 2P',monospace;font-size:9px;color:var(--qc);border:3px solid var(--qc);padding:5px 7px;background:var(--bg);opacity:.92;pointer-events:none}
@keyframes qwiggle{0%,100%{transform:rotate(0)}33%{transform:rotate(-8deg)}66%{transform:rotate(8deg)}}
html[data-motion="off"] .qcard:hover .qtile svg{animation:none}
.qnext{position:absolute;right:8px;top:14px;font-family:'Press Start 2P',monospace;font-size:8px;color:#05090D;background:var(--qc);padding:5px 6px;animation:qpulse 1.4s steps(2) infinite;pointer-events:none}
@keyframes qpulse{50%{transform:translateY(-2px)}}
html[data-motion="off"] .qnext{animation:none}
@media (max-width:520px){ .quests{grid-template-columns:1fr 1fr;gap:10px} .qcard{padding:12px 10px 10px;gap:8px} .qtile{width:48px;height:48px} .qtile svg{width:32px;height:32px} .qq{font-size:17px} .qby{display:none} .qstamp{font-size:7px;top:16px} .qnext{font-size:7px} }

/* ---------- support steps ---------- */
.sup-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:40px 0 14px}
.sup-head h3{margin:0;font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.6}
.sup-head span{color:var(--muted);font-size:17px}
.support{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:sup}
.stile.sup{position:relative;overflow:visible;border-top:0;padding-top:22px}
.stile.sup::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--sc)}
.sup-top{display:flex;align-items:flex-start;justify-content:space-between}
.sup-ico{--qc:var(--sc)}
.sup-step{font-family:'Press Start 2P',monospace;font-size:22px;color:color-mix(in srgb,var(--sc) 35%,transparent);line-height:1}
.stile.sup h3{color:var(--sc)}
.sup-now{font-size:16px !important;color:var(--text) !important}
.sup-now a{color:var(--sc)}
.sup-artists{display:flex;flex-wrap:wrap;gap:6px}
.sup-artists a{font-size:16px;color:var(--text);text-decoration:none;border:2px solid var(--sc);padding:3px 8px}
.sup-artists a:hover{background:var(--sc);color:var(--bg)}
.stile.sup .sup-go{white-space:nowrap;margin-top:auto;align-self:flex-start;min-height:40px;padding:0 14px;font-size:10px;background:var(--sc);color:#05090D;box-shadow:3px 3px 0 #05090D;border:2px solid #05090D}
.stile.sup .sup-go:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #05090D}
.stile.sup:hover .qtile svg{animation:qwiggle .5s steps(3)}
@media (min-width:1100px){ .stile.sup:not(:last-child)::after{content:"→";position:absolute;right:-16px;top:40px;font-family:'Press Start 2P',monospace;font-size:12px;color:var(--muted);z-index:1} }
.sup-note{display:flex;gap:8px;align-items:flex-start;margin:18px 0 0;padding:10px 14px;border-left:3px solid var(--line);color:var(--muted);font-size:16px}
html[data-motion="off"] .stile.sup:hover .qtile svg{animation:none}

/* ---------- roadmap as a road ---------- */
.rmap{position:relative;margin-top:44px}
.rm-stop{position:relative}
.rm-track{position:absolute;left:16.6%;right:16.6%;top:38px;height:6px;background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 22px);z-index:0}
.rm-track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:50%;background:repeating-linear-gradient(90deg,var(--green) 0 14px,transparent 14px 22px)}
.rm-here{position:absolute;left:50%;top:-32px;transform:translateX(-50%);z-index:2;font-family:'Press Start 2P',monospace;font-size:8px;color:#05090D;background:var(--cyan);padding:5px 7px;white-space:nowrap;animation:qpulse 1.4s steps(2) infinite}
.rm-here::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--cyan);border-bottom:0}
.rm-stops{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rm-stop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.rm-pin{padding:4px;background:var(--bg)}
.rm-ico{--qc:var(--rc);width:72px;height:72px}
.rm-ico svg{width:48px;height:48px}
.rm-stop[data-st="later"] .rm-ico{filter:saturate(.6);opacity:.85}
.rm-state{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--rc);letter-spacing:.04em}
.rm-stop h3{margin:0;font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.5;color:var(--text)}
.rm-list{list-style:none;margin:6px 0 0;padding:14px 16px;width:100%;box-sizing:border-box;text-align:left;background:var(--surface);border:2px solid var(--line);border-top:4px solid var(--rc);display:flex;flex-direction:column;gap:9px}
.rm-list li{position:relative;padding-left:28px;font-size:17px;color:var(--muted)}
.rm-list li::before{position:absolute;left:0;top:2px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace;font-size:8px;line-height:1;border:2px solid var(--rc);color:var(--rc)}
.rm-stop[data-st="done"] li{color:var(--text)}
.rm-stop[data-st="done"] li::before{content:"✓";background:var(--rc);color:#05090D}
.rm-stop[data-st="now"] li::before{content:"▶";animation:selblink 1.2s steps(2) infinite}
.rm-stop[data-st="later"] li::before{content:"?";border-style:dashed}
@media (max-width:820px){
  .rm-track{left:44px;right:auto;top:40px;bottom:40px;width:6px;height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 14px,transparent 14px 22px)}
  .rm-track::before{width:auto;right:0;bottom:auto;height:42%;background:repeating-linear-gradient(180deg,var(--green) 0 14px,transparent 14px 22px)}
  .rm-here{left:0;top:-28px;transform:none}
  .rm-here::after{left:40px}
  .rm-stops{grid-template-columns:1fr;gap:46px}
  .rm-stop{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;text-align:left;align-items:start}
  .rm-pin{grid-row:1 / span 3}
  .rm-state,.rm-stop h3{grid-column:2}
  .rm-list{grid-column:1 / -1}
}
.faq .q{border-left:8px solid var(--fc,var(--pink))}
.q-hd{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.q-hd h3{margin:0 !important;color:var(--fc,var(--pink)) !important}
.q-ico{--qc:var(--fc);width:52px;height:52px;flex:0 0 auto}
.q-ico svg{width:34px;height:34px}
.q-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.q-chips span{font-family:'Press Start 2P',monospace;font-size:8px;line-height:1;color:#05090D;background:var(--fc);padding:6px 7px}
html[data-motion="off"] .rm-here,html[data-motion="off"] .rm-stop[data-st="now"] li::before{animation:none}

/* ---------- comic ---------- */
.cm-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.cm-cover{display:flex;flex-direction:column;padding:0;border:3px solid #05090D;background:var(--surface);text-align:left;cursor:pointer;box-shadow:8px 8px 0 rgba(0,0,0,.35);transition:transform .12s steps(2)}
.cm-cover:hover,.cm-cover:focus-visible{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--pink)}
.cm-cover.locked{cursor:default;opacity:.75}
.cm-cover.locked:hover{transform:none;box-shadow:8px 8px 0 rgba(0,0,0,.35)}
.cm-art{position:relative;display:block;aspect-ratio:5/2;overflow:hidden;background:#05090D;border-bottom:3px solid #05090D}
.cm-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(5,9,13,.72);color:#E8F1EE;text-align:center;padding:10px}
.cm-lock-ico{font-size:28px;filter:grayscale(1)}
.cm-lock b{font-family:'Press Start 2P',monospace;font-size:10px;line-height:1.6;font-weight:400}
.cm-lock i{display:block;width:60%;height:8px;border:2px solid #E8F1EE;background:linear-gradient(90deg,#FFD23A var(--p,0%),transparent var(--p,0%))}
.cm-cover.is-locked .cm-art img{filter:blur(2px) brightness(.6)}
.cm-cover.is-locked .cm-read{background:#3A3F4C;color:#C9D3DC}
.cm-new{position:absolute;right:10px;top:10px;font-family:'Press Start 2P',monospace;font-size:9px;color:#05090D;background:#5CFF96;padding:6px 7px;border:2px solid #05090D;animation:qpulse 1.2s steps(2) infinite}
html[data-motion="off"] .cm-new{animation:none}
.cm-art img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
.cm-cover.locked .cm-art img{filter:brightness(.55) saturate(.4)}
.cm-meta{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.cm-ch{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--pink)}
.cm-meta b{font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.6;color:var(--text);font-weight:400}
.cm-sub{color:var(--muted);font-size:16px}
.cm-read{align-self:flex-start;margin-top:4px;font-family:'Press Start 2P',monospace;font-size:10px;color:#05090D;background:var(--yellow);padding:8px 10px;border:2px solid #05090D;box-shadow:3px 3px 0 #05090D}
.cm-reader{position:fixed;inset:0;z-index:88;background:#06070C;display:flex;flex-direction:column;color:#E8F1EE}
.cm-bar{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;background:#0B0E16;border-bottom:3px solid #1D2238}
.cm-bar b{font-family:'Press Start 2P',monospace;font-size:11px;color:#FFD23A;font-weight:400}
.cm-pg{color:#9DB8B4;font-size:16px}
.cm-stage{flex:1 1 auto;min-height:0;overflow:auto;display:flex;justify-content:center;padding:18px 14px;touch-action:pan-y}
.cm-page{width:min(1000px,100%,calc((100vh - 170px) * 1.22));display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;background:#F2EEE3;padding:12px;border:4px solid #05090D;box-shadow:0 0 0 3px #1D2238;animation:cmIn .35s steps(5) both}
.cm-page.back{animation-name:cmBack}
@keyframes cmIn{from{transform:translateX(30px);opacity:0}}
@keyframes cmBack{from{transform:translateX(-30px);opacity:0}}
.cm-panel{position:relative;border:3px solid #05090D;background:#05090D;overflow:visible;container-type:inline-size;opacity:0;animation:cmPanel .3s steps(3) forwards}
.cm-panel.wide{grid-column:1 / -1}
.cm-panel img{display:block;width:100%;height:auto;image-rendering:pixelated}
@keyframes cmPanel{to{opacity:1}}
.cm-b{position:absolute;z-index:2;box-sizing:border-box;font-family:'Handjet','DotGothic16',monospace;line-height:1.15;color:#05090D;font-size:clamp(12px,4.6cqw,22px);padding:.35em .55em;max-width:60%}
.cm-panel.wide .cm-b{font-size:clamp(12px,2.6cqw,22px);max-width:46%}
.cm-b.say{background:#FFFFFF;border:3px solid #05090D;border-radius:10px}
.cm-b.say::after{content:"";position:absolute;width:12px;height:12px;background:#FFFFFF;border-right:3px solid #05090D;border-bottom:3px solid #05090D;bottom:-8px;left:min(var(--tx,24px), calc(100% - 22px));transform:rotate(45deg)}
.cm-b.say.up::after{bottom:auto;top:-8px;transform:rotate(225deg)}
.cm-b.think{background:#FFFFFF;border:3px dashed #05090D;border-radius:18px}
.cm-b.think::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#FFFFFF;border:3px solid #05090D;bottom:-16px;left:var(--tx,24px)}
.cm-b.cap{background:#FFD23A;border:3px solid #05090D;border-radius:0;box-shadow:3px 3px 0 #05090D}
.cm-b.sfx{background:none;border:0;padding:0;max-width:none;font-family:'Press Start 2P',monospace;font-size:clamp(14px,6cqw,34px);color:var(--sc,#FF3EA5);text-shadow:3px 3px 0 #05090D,-2px -2px 0 #05090D,2px -2px 0 #05090D,-2px 2px 0 #05090D;transform:rotate(var(--rot,-8deg))}
.cm-panel.wide .cm-b.sfx{font-size:clamp(14px,4cqw,38px)}
.cm-b .who{display:block;font-family:'Press Start 2P',monospace;font-size:.5em;color:#C4176F;margin-bottom:.2em}
.cm-b .sub{display:block;font-size:.75em;color:#4A5560}
.cm-end{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0 4px;color:#05090D;text-align:center}
.cm-end b{font-family:'Press Start 2P',monospace;font-size:13px}
.cm-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));background:#0B0E16;border-top:3px solid #1D2238}
.cm-dots{display:flex;gap:8px}
.cm-dots button{width:14px;height:14px;padding:0;border:3px solid #3A4060;background:transparent;cursor:pointer}
.cm-dots button[aria-current="true"]{background:#FFD23A;border-color:#FFD23A}
@media (max-width:640px){ .cm-page{grid-template-columns:1fr;padding:8px;gap:8px} .cm-panel .cm-b{font-size:clamp(12px,4.2cqw,18px)} }
html[data-motion="off"] .cm-page,html[data-motion="off"] .cm-panel{animation:none;opacity:1}

/* ---------- ranked v2 ---------- */
.rk-vs{display:flex;align-items:center;justify-content:center;gap:clamp(20px,6vw,80px);margin:6px 0 18px;padding:14px 0 6px;position:relative}
.rk-vs::before{content:"";position:absolute;left:20%;right:20%;top:50%;height:3px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 16px)}
.rk-vs-mid{position:relative;font-family:'Press Start 2P',monospace;font-size:clamp(18px,3vw,30px);color:var(--yellow);text-shadow:3px 3px 0 var(--pink);background:var(--bg);padding:0 12px;animation:vsPulse 1.6s steps(2) infinite}
@keyframes vsPulse{50%{transform:scale(1.08)}}
.rk-can{position:relative;display:inline-block;width:64px;height:64px}
.rk-can svg{position:relative;z-index:1;width:100%;height:100%;display:block;transform-origin:50% 90%;animation:canShake 1.4s steps(2) infinite}
.rk-can i{position:absolute;z-index:0;left:68%;top:14%;width:5px;height:5px;background:var(--cc);opacity:0;animation:canMist 1.4s steps(6) infinite;animation-delay:var(--d,0s)}
.rk-vs .rk-can{width:96px;height:96px}
.rk-vs .rk-can i{width:7px;height:7px}
.rk-board li .rk-empty{border:0;padding:0}
.rk-can.small{width:40px;height:40px}
.rk-can.small i{width:3px;height:3px}
.rk-can.flip{transform:scaleX(-1)}
.rk-can.sleep svg{animation:none;transform:rotate(-80deg) translate(-10%,10%)}
.rk-can.sleep i{display:none}
.rk-can .zz{position:absolute;right:-6px;top:-4px;font-family:'Press Start 2P',monospace;font-size:9px;color:var(--muted);animation:zzz 2s steps(4) infinite}
@keyframes canShake{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-2px)}}
@keyframes canMist{0%{opacity:.95;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx,30) * 1px),calc(var(--dy,-6) * 1px)) scale(2.6)}}
@keyframes zzz{0%{opacity:0;transform:translateY(4px)}50%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
.rk-me{gap:14px;align-items:center}
.rk-badge{display:flex;align-items:center;justify-content:center;width:58px;height:58px;background:color-mix(in srgb,var(--rkc,var(--yellow)) 18%,transparent);border:2px solid var(--rkc,var(--yellow));box-shadow:3px 3px 0 #05090D}
.rk-badge svg{width:40px;height:40px}
.rk-me-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;max-width:520px}
.rk-me-txt .rk-rank{background:var(--rkc,var(--yellow))}
.rk-next{flex-basis:100%;color:var(--muted);font-size:15px}
.rk-prog{flex-basis:100%;display:block;height:8px;border:2px solid var(--line);background:linear-gradient(90deg,var(--rkc,var(--yellow)) var(--p,0%),transparent var(--p,0%))}
.rk-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 24px}
.rk-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border:2px solid var(--line);background:var(--surface);opacity:.55}
.rk-step svg{width:30px;height:30px;flex:0 0 auto}
.rk-step b{display:block;font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.5;color:var(--text);font-weight:400}
.rk-step span{display:block;color:var(--muted);font-size:14px}
.rk-step.reached{opacity:1;border-color:var(--sc)}
.rk-step.now{opacity:1;border-color:var(--sc);box-shadow:inset 0 -4px 0 var(--sc)}
.rk-empty{display:flex;align-items:center;gap:14px;border-style:dashed}
.rk-empty .rk-can{flex:0 0 auto}
.rk-empty p{margin:0;font-size:16px}
.rk-empty .ghost{margin-left:auto;min-height:38px;padding:0 12px}
.rk-board{padding-left:0;list-style:none;max-width:640px;gap:8px}
.rk-board li{align-items:center;padding:10px 14px}
.rk-board .pos{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-family:'Press Start 2P',monospace;font-size:11px;color:#05090D;background:var(--line);border:2px solid #05090D;margin-right:10px}
.rk-board li:nth-child(1) .pos{background:#FFD23A}
.rk-board li:nth-child(2) .pos{background:#C9D3DC}
.rk-board li:nth-child(3) .pos{background:#D08A4A}
.rk-board li:nth-child(1){border-left-color:#FFD23A;box-shadow:inset 0 0 0 2px rgba(255,210,58,.25)}
.rk-board .who{display:flex;align-items:center;gap:8px;flex:1 1 auto}
.rk-board .who svg{width:22px;height:22px}
@media (max-width:720px){ .rk-ladder{grid-template-columns:1fr 1fr} .rk-can{width:48px;height:48px} }
html[data-motion="off"] .rk-can svg,html[data-motion="off"] .rk-can i,html[data-motion="off"] .rk-vs-mid,html[data-motion="off"] .rk-can .zz{animation:none}

/* ---------- ranked = the main mode: highlighted everywhere ---------- */
nav.main a.nav-hot,.mm-nav a.nav-hot{display:inline-flex;align-items:center;gap:7px;color:#05090D;background:var(--yellow);border:2px solid #05090D;box-shadow:3px 3px 0 var(--pink);font-weight:600;padding:6px 10px;margin-right:6px}
nav.main a.nav-hot:hover{color:#05090D;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pink)}
nav.main a.nav-hot.active{box-shadow:3px 3px 0 var(--pink),inset 0 -3px 0 #05090D}
.nav-hot .cup{width:18px;height:18px;flex:0 0 auto;animation:cupBob 1.6s steps(2) infinite}
.nav-tag{font-family:'Press Start 2P',monospace;font-size:7px;line-height:1;color:var(--yellow);background:#05090D;padding:3px 4px}
.mm-nav a.nav-hot{grid-column:1 / -1;justify-content:center;margin:0 0 6px;border-bottom:2px solid #05090D}
@keyframes cupBob{50%{transform:translateY(-2px)}}
.hb-ranked{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:var(--yellow);color:#05090D;border:3px solid #05090D;box-shadow:4px 4px 0 var(--pink);font-family:'Press Start 2P',monospace;font-size:10px;text-decoration:none}
.hb-ranked:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pink)}
.hb-ranked .cup.big{width:24px;height:24px;animation:cupBob 1.6s steps(2) infinite}
html[data-motion="off"] .nav-hot .cup,html[data-motion="off"] .hb-ranked .cup{animation:none}

/* ---------- token ---------- */
.tk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;align-items:center}
.tk-art{position:relative;aspect-ratio:220/160;background:radial-gradient(circle at 70% 30%,rgba(155,92,255,.35),transparent 60%),radial-gradient(1px 1px at 20% 30%,#E8F1EE 50%,transparent 51%),radial-gradient(1px 1px at 60% 70%,#E8F1EE 50%,transparent 51%),radial-gradient(1px 1px at 85% 15%,#E8F1EE 50%,transparent 51%),linear-gradient(#07061A,#1A1236);border:3px solid #05090D;box-shadow:8px 8px 0 rgba(0,0,0,.35);overflow:hidden}
.tk-rocket{position:absolute;inset:0;overflow:hidden;animation:tkBob 1.4s steps(2) infinite}
.tk-rocket img{display:block;position:absolute;left:0;top:0;width:600%;height:100%;max-width:none;image-rendering:pixelated}
@keyframes tkBob{50%{transform:translate(4px,-4px)}}
.tk-coin{position:absolute;right:5%;top:6%;width:26%;height:auto;image-rendering:pixelated;z-index:2;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.45));animation:coinSpin 2.4s steps(2) infinite}
.tk-coin-sm{width:48px;height:48px;image-rendering:pixelated;flex:0 0 auto}
@keyframes coinSpin{50%{transform:translateY(-6px) rotate(4deg)}}
html[data-motion="off"] .tk-coin{animation:none}
.tk-cap{margin:6px 0 14px;padding:14px 16px;background:var(--surface);border:2px solid var(--line)}
.tk-cap-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.tk-cap-top b{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--text);font-weight:400}
.tk-cap-top span{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--yellow)}
.tk-bar{display:block;height:14px;margin:10px 0 6px;border:2px solid var(--line);background:repeating-linear-gradient(90deg,var(--yellow) 0 8px,#C9A21A 8px 10px) 0 0/var(--p,0%) 100% no-repeat}
.tk-cap-note{color:var(--muted);font-size:14px}
.tk-cta{gap:10px}
.tk-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:tk}
.tk-steps li{position:relative;padding:18px 18px 16px;background:var(--surface);border:2px solid var(--line);border-top:5px solid var(--tc)}
.tk-steps li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:22px;font-family:'Press Start 2P',monospace;font-size:12px;color:var(--muted);z-index:1}
.tk-num{font-family:'Press Start 2P',monospace;font-size:20px;color:color-mix(in srgb,var(--tc) 45%,transparent);float:right}
.tk-steps b{display:block;font-family:'Press Start 2P',monospace;font-size:12px;line-height:1.6;color:var(--tc);margin-bottom:8px}
.tk-steps p{margin:0;color:var(--muted);font-size:17px}
.tk-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.tk-gloss,.tk-facts{padding:16px 18px;background:var(--surface);border:2px solid var(--line)}
.tk-gloss h3,.tk-facts h3{margin:0 0 10px;font-family:'Press Start 2P',monospace;font-size:11px}
.tk-gloss details{border-top:2px dashed var(--line);padding:8px 0}
.tk-gloss summary{cursor:pointer;font-size:18px;color:var(--text);list-style:none}
.tk-gloss summary::before{content:"+ ";color:var(--yellow);font-family:'Press Start 2P',monospace;font-size:10px}
.tk-gloss details[open] summary::before{content:"− "}
.tk-gloss details p{margin:6px 0 0;color:var(--muted);font-size:16px}
.tk-facts p{margin:0 0 10px;font-size:17px;color:var(--muted)}
.tk-risk{border-left:4px solid var(--pink);padding-left:10px;color:var(--text) !important}
@media (max-width:860px){ .tk-grid,.tk-bottom{grid-template-columns:1fr} .tk-steps{grid-template-columns:1fr} .tk-steps li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-16px} }
html[data-motion="off"] .tk-rocket{animation:none}

.demo-lock{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(5,9,13,.78);color:#E8F1EE;text-align:center;padding:8px}
.demo-lock b{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--yellow)}
.demo-lock span{font-size:15px;color:#C9D3DC}
.track.demo-locked .tplay{opacity:.45}
.track.demo-locked .wave{opacity:.35}
/* ---------- music ---------- */
.ticker{overflow:hidden;border:3px solid var(--line);background:var(--surface);margin:0 0 24px}
.ticker-track{display:flex;gap:36px;width:max-content;padding:12px 0;animation:tick 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;gap:8px;white-space:nowrap;font-size:17px}
.ticker-item b{font-weight:600;color:var(--pink)}
.ticker-item span{color:var(--muted)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.crate-wrap{position:relative;display:flex;align-items:center;gap:10px}
.crate{flex:1 1 auto;min-width:0;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 6% 18px;scrollbar-width:none;outline:none}
.crate::-webkit-scrollbar{display:none}
.crate:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.crate .track{flex:0 0 min(880px,88%);scroll-snap-align:center;display:grid;grid-template-columns:minmax(200px,340px) 1fr;transition:transform .35s ease,opacity .35s ease}
.crate .track:not(.current){opacity:.5;transform:scale(.94)}
.crate .track .sleeve{border-bottom:0;border-right:3px solid var(--line)}
.crate-nav{flex:0 0 auto;width:48px;height:48px;border:3px solid var(--line);background:var(--surface);color:var(--text);font-size:18px;cursor:pointer}
.crate-nav:hover{border-color:var(--text)}
.crate-dots{display:flex;justify-content:center;gap:10px;margin:6px 0 18px}
.cdot{width:14px;height:14px;padding:0;border:3px solid var(--line);background:transparent;cursor:pointer}
.cdot[aria-current="true"]{background:var(--pink);border-color:var(--pink)}
.tplayer{display:flex;align-items:center;gap:12px}
.tplay{flex:0 0 auto;width:52px;height:52px;border:3px solid #05090D;background:var(--yellow);color:#05090D;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:4px 4px 0 var(--pink)}
.tplay:disabled{background:var(--line);box-shadow:none;cursor:default;opacity:.7}
.tplay .pi-pause{display:none}
.tplay.on .pi-pause{display:inline}
.tplay.on .pi-play{display:none}
.tbar{flex:1 1 auto;height:12px;border:3px solid var(--line);background:var(--bg);cursor:pointer;position:relative}
.tbar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--pink)}
.ttime{flex:0 0 auto;font-family:'Press Start 2P',monospace;font-size:10px;color:var(--muted);min-width:9ch;text-align:right}
.tend{position:absolute;inset:0;z-index:3;background:rgba(7,18,22,.9);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:20px;animation:talkIn2 .3s steps(5) both}
.tend p{margin:0;color:#E8F1EE;font-size:20px}
.crate .track{display:grid;grid-template-columns:200px 1fr;gap:56px;align-items:center;padding:20px 22px;background:var(--surface);border:2px solid var(--line);flex:0 0 min(720px,92%)}
.crate .track .sleeve{width:200px;aspect-ratio:1;border:0;overflow:visible;background:none;align-self:start}
.crate .track .cover{inset:0;border:0;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.crate .track .disc{top:5%;left:auto;right:-16%;width:90%;height:90%;z-index:0}
.crate .track:hover .disc,.crate .track.playing .disc{transform:translateX(6%)}
.crate .track .tbody{padding:0;gap:10px;min-width:0;position:relative;z-index:1}
.crate .track .tnum,.crate .track .src,.crate .track .sitestats,.crate .track .tbar{display:none}
.crate .track .ttitle{font-size:clamp(16px,2vw,22px);line-height:1.35}
.crate .track .tartist{font-size:18px;margin-top:-4px}
.crate .track .stats{font-size:15px;gap:4px 14px;color:var(--muted)}
.crate .track .stat svg{width:12px;height:12px}
.crate .track .tplayer{gap:14px;margin-top:6px}
.crate .track .tplay{width:44px;height:44px;border:0;border-radius:50%;background:var(--text);color:var(--bg);box-shadow:none;transition:transform .12s ease}
.crate .track .tplay:hover:not(:disabled){transform:scale(1.07)}
.crate .track .tplay:disabled{background:var(--line);color:var(--muted)}
.crate .track .tplay svg{width:16px;height:16px}
.crate .track .tplay .pi-play{transform:translateX(1px)}
.crate .track .wave{flex:1 1 auto;height:auto;margin:0;cursor:pointer;min-width:0}
.crate .track .wave canvas{height:34px;image-rendering:auto}
.crate .track .pins{top:auto;bottom:-10px;height:8px}
.crate .track .pin{width:6px;height:6px;margin-left:-3px;border:0;border-radius:50%}
.crate .track .ttime{font-family:'Handjet','DotGothic16',monospace;font-size:16px;min-width:3.5ch;color:var(--muted)}
.crate .track .bubble{min-height:0;border:0;border-left:2px solid var(--line);background:none;padding:2px 0 2px 12px;font-size:16px;color:var(--muted)}
.crate .track .tactions{gap:6px;align-items:center;margin-top:4px}
.crate .track .tactions .btn{min-height:36px;padding:0 14px;font-size:10px;box-shadow:none}
.ibtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;min-width:36px;padding:0 10px;border:2px solid transparent;background:transparent;color:var(--muted);font-family:'Handjet','DotGothic16',monospace;font-size:16px;cursor:pointer;position:relative}
.ibtn:hover{color:var(--text);border-color:var(--line)}
.ibtn svg{width:14px;height:14px}
.ibtn.respect[aria-pressed="true"]{color:var(--pink)}
.ibtn.tipped::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-size:14px;padding:3px 8px;white-space:nowrap}
.crate .track .shout{display:flex;gap:6px}
.crate .track .shout[hidden]{display:none}
.crate .track .shout input{min-height:36px;font-size:16px}
.crate .track .tend{background:rgba(5,9,13,.86);padding:16px;gap:10px}
.crate .track .tend p{font-size:17px}
.crate .track .tend .tactions .btn,.crate .track .tend .ghost{min-height:34px;font-size:15px}
.crate-wrap.single .crate-nav{visibility:hidden}
.crate-wrap.single .crate{justify-content:center}
.crate-wrap.single .crate .track{opacity:1;transform:none}
@media (max-width:720px){ .crate .track{grid-template-columns:1fr;gap:22px;flex-basis:92%;justify-items:start} .crate .track .tbody{width:100%} .crate .track .sleeve{width:min(240px,70%);margin-right:14%} .crate-nav{display:none} }

.track{background:var(--surface);border:3px solid var(--line);display:flex;flex-direction:column}
.sleeve{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0C1F25;border-bottom:3px solid var(--line)}
.disc{position:absolute;top:8%;left:8%;width:84%;height:84%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#0B0B10 0 3px,#17171F 3px 5px);box-shadow:0 0 0 3px #05060A;transition:transform .5s steps(6)}
.disc::after{content:"";position:absolute;inset:36%;border-radius:50%;background:var(--label,#FF3EA5);box-shadow:inset 0 0 0 6px rgba(0,0,0,.25)}
.disc::before{content:"";position:absolute;inset:48.5%;border-radius:50%;background:#05060A;z-index:1}
.track:hover .disc,.track.playing .disc{transform:translateX(22%)}
.track.playing .disc{animation:spin 1.8s steps(12) infinite}
@keyframes spin{from{transform:translateX(22%) rotate(0)}to{transform:translateX(22%) rotate(360deg)}}
.cover{position:absolute;inset:0 18% 0 0;z-index:1;background:#13232A;border-right:3px solid #05060A;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:100% 4px}
.cover .ph b{font-family:'Press Start 2P',monospace;font-size:44px;line-height:1;color:var(--ph,#FF3EA5);text-shadow:4px 4px 0 #05060A}
.cover .ph img{position:absolute;bottom:0;right:4%;height:80%;width:auto;object-fit:contain;image-rendering:pixelated}
.cover .ph b,.cover .ph span{position:relative;z-index:1}
.cover .ph span{font-family:'Press Start 2P',monospace;font-size:10px;color:#E8F1EE;line-height:1.7}
.tbody{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.tnum{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--muted)}
.ttitle{margin:0;font-family:'Press Start 2P',monospace;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.tartist{margin:0;color:var(--muted)}
.stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:17px}
.stat{display:inline-flex;align-items:center;gap:6px}
.stat svg{width:16px;height:16px;image-rendering:pixelated}
.src{font-size:14px;color:var(--muted)}
.wave{position:relative;height:64px;margin-top:4px}
.wave canvas{width:100%;height:46px;display:block;image-rendering:pixelated}
.pins{position:absolute;left:0;right:0;top:46px;height:16px}
.pin{position:absolute;top:2px;width:12px;height:12px;margin-left:-6px;border:2px solid var(--bg);background:var(--pink);padding:0;cursor:pointer}
.pin.site{background:var(--green)}
.pin[aria-current="true"]{outline:3px solid var(--text);outline-offset:1px}
.bubble{min-height:68px;background:var(--bg);border:3px solid var(--line);padding:10px 12px;font-size:17px;position:relative}
.bubble .who{font-weight:600}
.bubble .at{color:var(--muted);font-size:15px}
.bubble .txt{display:block;overflow-wrap:anywhere}
.bubble .empty{color:var(--muted)}
.tactions{display:flex;flex-wrap:wrap;gap:10px}
.respect[aria-pressed="true"]{border-color:var(--pink);color:var(--pink)}
.shout{display:flex;gap:8px}
.shout input{flex:1 1 auto;min-width:0;min-height:44px;border:3px solid var(--line);background:var(--bg);color:var(--text);font-family:'Handjet','DotGothic16',monospace;font-size:17px;padding:0 10px}
.shout input:focus{border-color:var(--text)}
.sitestats{display:flex;gap:16px;flex-wrap:wrap;font-size:16px;color:var(--muted)}
.sitestats b{color:var(--text)}
.edit{align-self:flex-start}
.support{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.stile{background:var(--surface);border:3px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:10px}
.stile h3{margin:0;font-family:'Press Start 2P',monospace;font-size:12px;line-height:1.6}
.stile p{margin:0;color:var(--muted);font-size:17px}
.stile .ghost{align-self:flex-start}
.mono{font-family:'Courier New',monospace;font-size:15px;overflow-wrap:anywhere;background:var(--bg);border:2px solid var(--line);padding:6px 8px}

/* editor dialog */
dialog{border:3px solid var(--line);background:var(--surface);color:var(--text);padding:0;max-width:640px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dlg{padding:20px;display:flex;flex-direction:column;gap:14px}
.dlg h3{margin:0;font-family:'Press Start 2P',monospace;font-size:13px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.dlg label{display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--muted)}
.dlg input,.dlg textarea{min-height:42px;border:3px solid var(--line);background:var(--bg);color:var(--text);font-family:'Handjet','DotGothic16',monospace;font-size:17px;padding:6px 10px}
.dlg textarea{min-height:140px;resize:vertical}
.dlg .hint{font-size:14px;color:var(--muted)}
.dlg .row{justify-content:flex-end}

/* crew + legend */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:var(--surface);border:3px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:10px}
.card .pic{background:#0C2026;display:flex;justify-content:center;align-items:flex-end;padding:16px 0 0;border:3px solid var(--line)}
.card .pic img{height:230px;width:auto;image-rendering:pixelated}
.card h3{margin:6px 0 0;font-family:'Press Start 2P',monospace;font-size:14px}
.card .role{color:var(--muted);font-size:17px;margin:0}
.card p{margin:0}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.phases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.phases li{display:flex;justify-content:space-between;gap:16px;background:var(--surface);border-left:6px solid var(--line);padding:12px 14px}
.phases li b{font-family:'Press Start 2P',monospace;font-size:12px;font-weight:400}
.phases li span{color:var(--muted)}
footer{position:relative;padding:0 0 calc(40px + env(safe-area-inset-bottom,0px));margin-top:30px;background:linear-gradient(var(--bg),color-mix(in srgb,var(--surface) 70%,var(--bg)));border-top:3px solid var(--line)}
.ft-crew{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,22px);height:74px;margin-top:-74px;pointer-events:none;overflow:hidden}
.ft-crew img{height:70px;width:auto;image-rendering:pixelated;animation:ftBob 1.6s steps(2) infinite}
.ft-crew img:nth-child(2n){animation-delay:-.5s}.ft-crew img:nth-child(3n){animation-delay:-1s}
@keyframes ftBob{50%{transform:translateY(-3px)}}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;padding-top:34px}
.ft-logo{display:block;font-family:'Press Start 2P',monospace;font-size:clamp(18px,2.4vw,26px);color:var(--text);text-shadow:3px 3px 0 var(--pink),6px 6px 0 var(--cyan);font-weight:400;margin-bottom:12px}
.ft-brand p{margin:0 0 10px;color:var(--muted);font-size:17px}
.ft-contract{font-family:'Press Start 2P',monospace;font-size:9px !important;line-height:1.8;color:var(--yellow) !important}
.ft-col{display:flex;flex-direction:column;gap:9px}
.ft-col h3{margin:0 0 4px;font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pink)}
.ft-col a{color:var(--text);text-decoration:none;font-size:17px;width:fit-content}
.ft-col a:hover{color:var(--cyan);text-decoration:underline}
.ft-disc{margin:4px 0 0;color:var(--muted);font-size:15px;border-left:3px solid var(--pink);padding-left:8px}
.ft-bottom{padding-right:min(220px,30vw);display:flex;justify-content:flex-start;column-gap:24px;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:16px;border-top:2px dashed var(--line);color:var(--muted);font-size:15px}
@media (max-width:860px){ .ft-grid{grid-template-columns:1fr 1fr} .ft-brand{grid-column:1 / -1} .ft-crew img{height:52px} .ft-crew{height:56px;margin-top:-56px} }
html[data-motion="off"] .ft-crew img{animation:none}
@media (max-width:640px){ section{padding:44px 0} .card .pic img{height:180px} .cover .ph b{font-size:34px} }
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] .ticker-track{animation:none;flex-wrap:wrap;width:auto;padding:12px}
html[data-motion="off"] .track.playing .disc{animation:none}
html[data-motion="off"] .disc{transition:none}
html[data-motion="off"] [aria-pressed="true"] .eq i{animation:none;height:12px}


/* ---------- first-visit loader ---------- */
.boot{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:#03080A;color:#E8F1EE}
.boot::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.boot.out{opacity:0;transition:opacity .35s steps(4);pointer-events:none}
.boot-in{position:relative;width:min(360px,100%);display:flex;flex-direction:column;align-items:center;gap:22px}
.boot-logo{font-family:'Press Start 2P',monospace;font-size:clamp(18px,6vw,26px);position:relative;letter-spacing:.04em}
.boot-logo span{position:relative;display:block}
.boot-logo span::before,.boot-logo span::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%}
.boot-logo span::before{color:#FF3EA5;transform:translate(3px,0);mix-blend-mode:screen;animation:bootGlitchA 1.8s steps(1) infinite}
.boot-logo span::after{color:#2EE6E6;transform:translate(-3px,0);mix-blend-mode:screen;animation:bootGlitchB 1.8s steps(1) infinite}
@keyframes bootGlitchA{0%,86%{transform:translate(2px,0);clip-path:inset(0)}88%{transform:translate(8px,-2px);clip-path:inset(10% 0 55% 0)}92%{transform:translate(-5px,1px);clip-path:inset(60% 0 8% 0)}96%,100%{transform:translate(2px,0);clip-path:inset(0)}}
@keyframes bootGlitchB{0%,80%{transform:translate(-2px,0);clip-path:inset(0)}82%{transform:translate(-7px,2px);clip-path:inset(50% 0 10% 0)}90%{transform:translate(5px,-1px);clip-path:inset(5% 0 62% 0)}95%,100%{transform:translate(-2px,0);clip-path:inset(0)}}
/* spray can drawn in CSS pixels: shakes and puffs paint */
.boot-can{position:relative;width:64px;height:84px;animation:bootShake .5s steps(2) infinite}
.bc-cap{position:absolute;left:20px;top:0;width:20px;height:12px;background:#E8432D;box-shadow:0 0 0 4px #14122A}
.bc-body{position:absolute;left:8px;top:16px;width:44px;height:64px;box-shadow:0 0 0 4px #14122A,inset 12px 0 0 #4F6FF0,inset -8px 0 0 #1A2A8C;background:linear-gradient(#FFE14A,#FFE14A) 0 20px/100% 8px no-repeat,linear-gradient(#FF8A1F,#FF8A1F) 0 28px/100% 8px no-repeat,#2D4BD6}
.bc-puff{position:absolute;left:44px;top:-4px;width:8px;height:8px;background:#FF8A1F;box-shadow:12px -8px 0 #FFE14A,22px 2px 0 #C02AA8,6px -18px 0 #E8432D,26px -16px 0 #4F6FF0;animation:bootPuff .6s steps(4) infinite}
@keyframes bootShake{50%{transform:translate(2px,-2px) rotate(2deg)}}
@keyframes bootPuff{0%{transform:translate(0,4px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translate(6px,-14px) scale(1.2);opacity:0}}
.boot-bar{width:100%;height:18px;border:3px solid #E8F1EE;background:#071216;padding:2px}
.boot-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#5CFF96 0 8px,#2EA866 8px 10px)}
.boot-row{width:100%;display:flex;justify-content:space-between;gap:12px;font-size:17px;color:#9DB8B4}
.boot-row b{font-family:'Press Start 2P',monospace;font-size:10px;color:#FFD23A;font-weight:400;align-self:center}
html.booting{overflow:hidden}
html[data-motion="off"] .boot-can,html[data-motion="off"] .bc-puff,html[data-motion="off"] .boot-logo span::before,html[data-motion="off"] .boot-logo span::after{animation:none}
@media (prefers-reduced-motion: reduce){ .boot-can,.bc-puff,.boot-logo span::before,.boot-logo span::after{animation:none} }