@font-face{font-family:'Press Start 2P';src:url(/assets/fonts/PressStart2P-400.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Chakra Petch';src:url(/assets/fonts/ChakraPetch-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(/assets/fonts/ChakraPetch-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
  --screen:#000000;--white:#FCFCFC;--gold:#F8B800;--gold-d:#AC7C00;--gold-l:#FCE0A8;--lime:#B8F818;--cyan:#3CBCFC;--grey:#7C7C7C;--grey-d:#3C3C3C;--red:#F83800;
  --u:4px;--s:8;--g:6;--px:'Press Start 2P',monospace;--num:'Chakra Petch',system-ui,sans-serif;
  --cur:url(/assets/art/cursor.png) 13 13, crosshair;--hand:url(/assets/art/cursor-hand.png) 6 0, pointer;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--screen);color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--screen);color:var(--white);font:500 17px/1.5 var(--num);font-variant-numeric:tabular-nums;cursor:var(--cur);overflow-x:hidden;min-height:100vh}
img{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
a{color:inherit}
a,button,[role=button],summary,label,.ca[data-ca]{cursor:var(--hand)}
button{font:inherit;color:inherit;background:none;border:0}
.num{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums}
:focus-visible{outline:4px solid var(--cyan);outline-offset:4px}
::selection{background:var(--cyan);color:var(--screen)}

/* HUD strip */
.hud{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;height:64px;padding:0 32px;background:var(--screen)}
.hud-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:16px/16px var(--px);white-space:nowrap}
.hud-brand img{width:32px;height:32px}
.hud-nav{display:flex;gap:24px;margin-left:auto}
.hud-nav a{font:8px/16px var(--px);text-decoration:none;color:var(--grey);padding:12px 0}
.hud-nav a:hover{color:var(--white)}
.x-hud{min-height:40px;padding:12px 16px}

/* NES plates (buttons) */
.plate{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:16px 24px;font:16px/16px var(--px);text-decoration:none;white-space:nowrap;position:relative;user-select:none}
.plate svg{flex:none}
.plate.gold{background:var(--gold);color:var(--screen);box-shadow:inset 4px 4px 0 var(--gold-l),inset -4px -4px 0 var(--gold-d)}
.plate.gold:hover{transform:translateY(4px);box-shadow:inset 4px 4px 0 var(--gold-d),inset -4px -4px 0 var(--gold-l)}
.plate.gold:active{transform:translateY(4px);box-shadow:inset -4px -4px 0 var(--gold-l),inset 4px 4px 0 var(--gold-d);background:var(--gold-d)}
.plate.dark{background:var(--screen);color:var(--white);box-shadow:inset 0 0 0 4px var(--white)}
.plate.dark:hover{transform:translateY(4px);box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 8px var(--grey-d)}
.plate.dark:active{box-shadow:inset 0 0 0 4px var(--grey)}
.plate.off,.plate:disabled{color:var(--grey);box-shadow:inset 0 0 0 4px var(--grey-d);cursor:var(--cur);transform:none;background:var(--screen)}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

/* CA plate: full address, wraps, click = copy */
.ca{display:flex;align-items:baseline;justify-content:center;gap:16px;max-width:100%;padding:12px 16px;text-align:left;box-shadow:inset 0 0 0 4px var(--grey-d);font:700 16px/24px var(--num)}
.ca-l{font:8px/24px var(--px);color:var(--grey);flex:none}
.ca-v{overflow-wrap:anywhere;word-break:break-all;min-width:0}
.ca.pre .ca-v{color:var(--grey);font-weight:500}
.ca-ok{display:none;font:8px/24px var(--px);color:var(--cyan);flex:none}
.ca[data-ca]:hover{box-shadow:inset 0 0 0 4px var(--white)}
.ca.copied .ca-ok{display:inline}
.ticker{font:16px/16px var(--px);color:var(--grey);margin-left:16px}

/* ARENA: one black boss room */
.arena{position:relative;overflow-x:clip;display:flex;flex-direction:column;align-items:center;min-height:calc(100svh - 64px);padding:8px 16px 48px}
.card{order:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.card-ph{font:8px/8px var(--px);color:var(--grey);letter-spacing:0}
.card-ph b{font:inherit}
.card-name{font:32px/32px var(--px)}
.card-sub{font:8px/8px var(--px);color:var(--grey)}
.card-esc{display:flex;align-items:baseline;gap:8px;font:8px/8px var(--px);color:var(--grey)}
.card-esc[hidden]{display:none}.card-esc.off{visibility:hidden}
.card-esc b{font-size:15px;line-height:16px;color:var(--white)}
.hp{order:2;display:grid;grid-template-columns:auto 640px auto;align-items:center;gap:16px;margin-top:16px}
.hp-l{font:16px/16px var(--px);color:var(--lime)}
.hp-bar{position:relative;height:32px;background:var(--screen);box-shadow:inset 0 0 0 4px var(--white)}
.hp-bar::before{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:8px;background:var(--grey-d)}
.hp-bar i{position:absolute;left:8px;top:8px;height:16px;width:0}
.hp-fill{background:var(--lime)}
.hp-chip{background:var(--white)}
.hp-bar::after{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:8px;background:repeating-linear-gradient(90deg,transparent 0 12px,var(--screen) 12px 16px)}
.hp-n{font:700 28px/32px var(--num);white-space:nowrap}
.hp-m{font-weight:500;font-size:17px;color:var(--grey)}
.stagger{order:4;display:flex;align-items:center;gap:16px;margin-top:16px;padding:8px 16px;box-shadow:inset 0 0 0 4px var(--lime)}
.stagger[hidden]{display:none}
.st-l{font:16px/16px var(--px);color:var(--lime);animation:blink 1s steps(1) infinite}
.stagger b{font-size:28px;line-height:32px}
.st-r{font:8px/8px var(--px);color:var(--grey)}
.stagger.finish{box-shadow:inset 0 0 0 4px var(--white)}
.stagger.finish .st-l{color:var(--white)}
.demo{position:absolute;right:100%;bottom:24px;margin-right:24px;white-space:nowrap;z-index:2;background:var(--screen);font:8px/8px var(--px);color:var(--grey);padding:8px 12px;box-shadow:inset 0 0 0 4px var(--grey-d)}
.demo[hidden]{display:none}
.stage{order:5;position:relative;margin-top:16px;--k:var(--s);width:calc(var(--bw,48) * 1px * var(--k));height:calc(var(--bh,52) * 1px * var(--k));min-height:calc(52px * var(--s))}
.stage.gen{--k:var(--g)}
.boot .boss{visibility:hidden!important}
.boot .stage{min-height:max(calc(52px * var(--s)),calc(70px * var(--g)))}

.tv:not(.started) video{visibility:hidden}
.boss{position:absolute;left:0;bottom:0;width:calc(var(--bw,48) * 1px * var(--k));height:calc(var(--bh,52) * 1px * var(--k));
  background:var(--sheet,url(/assets/art/kimchi-sheet.png)) 0 0/calc(var(--bw,48) * var(--nf,4) * 1px * var(--k)) calc(var(--bh,52) * 1px * var(--k)) no-repeat;
  background-position-x:calc(var(--bw,48) * -1px * var(--k) * var(--fr,0));image-rendering:pixelated}
.stage.shake{animation:shake .15s steps(3) 1}
.boss.drop{animation:drop .6s steps(8) 1}
.boss.run{animation:run .8s steps(8) 1 forwards}
.fx{position:absolute;inset:-48px;pointer-events:none}
.spark{position:absolute;width:calc(12px * var(--k));height:calc(12px * var(--k));background:url(/assets/art/spark.png) 0 0/calc(24px * var(--k)) calc(12px * var(--k));image-rendering:pixelated;animation:spark .12s steps(2) 1 forwards}
.pop{position:absolute;font:700 28px/32px var(--num);white-space:nowrap;background:var(--screen);padding:0 8px;animation:rise .72s steps(6) 1 forwards}
.pop.you{color:var(--cyan)}
.pop.heal{color:var(--red);font-size:20px}
.boom{position:absolute;width:calc(24px * var(--k));height:calc(24px * var(--k));background:url(/assets/art/explode.png) 0 0/calc(96px * var(--k)) calc(24px * var(--k));image-rendering:pixelated;animation:boom .32s steps(4) 1 forwards}
.drip{position:absolute;width:48px;height:48px;background:url(/assets/art/coin.png) 0 0/192px 48px;image-rendering:pixelated;animation:spin .4s steps(4) infinite,fall 1.2s steps(12) 1 forwards}
.banner-msg{position:absolute;left:50%;top:40%;transform:translateX(-50%);font:24px/32px var(--px);text-align:center;white-space:nowrap;pointer-events:none}
.banner-msg:empty{display:none}
.banner-msg small{display:block;font:8px/16px var(--px);color:var(--grey);margin-top:8px}
.floor{order:6;position:relative;z-index:1;align-self:stretch;margin:0 -16px;height:32px;background:var(--screen) url(/assets/art/floor.png) 0 0/64px 32px repeat-x;image-rendering:pixelated}
.under{order:7;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:24px;text-align:center;max-width:100%}
.ctl{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
@media (min-width:1180px){.ctl{flex-direction:row;gap:24px}.ctl .ca{min-height:48px;align-items:center}}
.brand{font:32px/32px var(--px);font-weight:400;display:flex;align-items:center}
.line{font-size:18px;color:var(--white)}
.bankline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center}
.bl-l,.bl-u{font:8px/8px var(--px);color:var(--grey)}
.bankline b{font-size:28px;line-height:28px;color:var(--gold)}

@keyframes blink{50%{opacity:0}}
@keyframes rise{0%{transform:translateY(0)}83%{transform:translateY(-20px);opacity:1}100%{transform:translateY(-24px);opacity:0}}
@keyframes spark{0%{background-position-x:0}100%{background-position-x:calc(-24px * var(--k))}}
@keyframes boom{100%{background-position-x:calc(-96px * var(--k))}}
@keyframes spin{100%{background-position-x:-192px}}
@keyframes fall{0%{transform:translateY(0)}100%{transform:translateY(var(--fy,240px))}}
@keyframes shake{0%{transform:translate(8px,0)}33%{transform:translate(-8px,4px)}66%{transform:translate(4px,-4px)}100%{transform:none}}
@keyframes drop{0%{transform:translateY(-480px)}100%{transform:none}}
@keyframes run{100%{transform:translateX(800px)}}

/* the shaft: one boss room, walls of codex tiles (24x24 at x4) run the full page on both sides */
body{position:relative}
body::before,body::after{content:"";position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;width:calc((100% - 960px) / 2);display:none;image-rendering:pixelated}
body::before{left:0;background:url(/assets/art/tile-pipe.png) right top/96px 96px repeat-y,url(/assets/art/tile-block.png) left top/96px 96px repeat-y,url(/assets/art/tile-panel.png) right top/96px 96px repeat}
body::after{right:0;background:url(/assets/art/tile-pipe.png) left top/96px 96px repeat-y,url(/assets/art/tile-block.png) right top/96px 96px repeat-y,url(/assets/art/tile-panel.png) left top/96px 96px repeat}
@media (min-width:1180px){body::before,body::after{display:block}}
main,.foot{position:relative;z-index:1}
.hud{z-index:20}

/* screens below: the same room, the camera pans down; every block is a NES window */
.screen{max-width:960px;margin:0 auto;padding:96px 32px 0;scroll-margin-top:48px}
.lbl{font:8px/16px var(--px);color:var(--grey)}
.sh{font:24px/32px var(--px);font-weight:400}
.sh-c,.sub-c{text-align:center}
.sub-c{color:var(--grey);margin-top:12px}
.blink{animation:blink 1s steps(1) infinite}
/* NES window: white double frame on black */
.win{position:relative;background:var(--screen);box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 8px var(--screen),inset 0 0 0 12px var(--white);padding:36px 40px}

/* HI-SCORE: arcade table */
.hs-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:28px}
.hs-top p{display:flex;flex-direction:column;gap:8px}
.hs-top p:nth-child(2){align-items:center}.hs-top p:nth-child(3){align-items:flex-end}
.hs-top .lbl{color:var(--red)}
.hs-top p:first-child .lbl{color:var(--cyan)}
.hs-top b{font-size:32px;line-height:32px}
#hs-1up{color:var(--cyan)}
.hs .sh{text-align:center;margin-bottom:28px}
.hs-head,.hs-rows li{display:grid;grid-template-columns:72px 172px 1fr 96px 168px;gap:16px;align-items:center}
.hs-head{padding:0 0 12px 24px}
.hs-head span{font:8px/8px var(--px);color:var(--grey)}
.hs-head .r,.hs-rows .r{text-align:right}
.hs-rows{list-style:none}
.hs-rows li{position:relative;min-height:44px;padding-left:24px;font:700 22px/28px var(--num)}
.hs-rows li::before{content:"";position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;background:url(/assets/art/arrow.png) 0 0/16px 16px;image-rendering:pixelated;visibility:hidden}
.hs-rows li.me::before{visibility:visible;animation:blink .5s steps(1) infinite}
.hs-rows .rk{font:16px/16px var(--px)}
.hs-rows li:nth-child(1) .rk,.hs-rows li:nth-child(1) .dm{color:var(--gold)}
.hs-rows li:nth-child(2) .rk,.hs-rows li:nth-child(3) .rk{color:var(--white)}
.hs-rows li:nth-child(n+4) .rk{color:var(--lime)}
.hs-rows .w{font-weight:500;font-size:18px;color:var(--grey);overflow:hidden;white-space:nowrap}
.hs-rows .lt{color:var(--gold)}
.hs-rows .me,.hs-rows .me .rk,.hs-rows .me .w,.hs-rows .me .lt,.hs-rows .me .dm{color:var(--cyan)}
.hs-rows li.ghost{color:var(--grey-d)}
.hs-rows li.ghost .rk{color:var(--grey-d)}
.hs-rows .dm.up{animation:flash .4s steps(2) 2}
.hs-coin{display:flex;flex-direction:column;align-items:center;gap:12px;margin:20px 0 4px;text-align:center}
.hs-coin[hidden]{display:none}
.hs-coin .blink{font:24px/24px var(--px);color:var(--gold)}
.hs-e2{color:var(--grey)}
.hs-note{margin-top:24px;color:var(--grey);font-size:15px;text-align:center}
.you{margin-top:12px;color:var(--cyan);font-weight:700;text-align:center}
.you[hidden]{display:none}
@keyframes flash{50%{color:var(--white)}}

/* RAID BANK: the chest grows a hoard */
.vault{display:flex;flex-direction:column;align-items:center;text-align:center}
.vault-v{display:flex;align-items:baseline;gap:16px;margin-top:20px}
.vault-v b{font-size:72px;line-height:72px;color:var(--gold)}
.vault-v .lbl{font-size:16px}
.hoard{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-top:28px;min-height:188px}
.chest{position:relative;width:192px;height:188px}
.chest img{width:192px;height:188px}
.drop-coin{position:absolute;left:72px;top:-160px;width:48px;height:48px;background:url(/assets/art/coin.png) 0 0/192px 48px;image-rendering:pixelated;visibility:hidden}
.drop-coin.go{visibility:visible;animation:spin .3s steps(4) infinite,dropin .6s steps(10) 1 forwards}
@keyframes dropin{0%{transform:translateY(0)}90%{transform:translateY(200px);opacity:1}100%{transform:translateY(200px);opacity:0}}
.pile{display:flex;align-items:flex-end;gap:4px;width:240px}
.pile.l{justify-content:flex-end}
.pile .col{display:flex;flex-direction:column-reverse}
.pile .col i{display:block;width:48px;height:12px;background:url(/assets/art/coin.png) 0 -12px/192px 48px;image-rendering:pixelated}
.pile .col i:last-child{height:24px;background-position:0 0}
.ledge{align-self:stretch;height:32px;margin:0 -32px;background:url(/assets/art/floor.png) 0 0/64px 32px repeat-x;image-rendering:pixelated}
.vault-meta{display:flex;gap:64px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.vault-meta div{display:flex;flex-direction:column;gap:8px;align-items:center}
.vault-meta dt{font:8px/8px var(--px);color:var(--grey)}
.vault-meta dd{font:700 24px/28px var(--num)}
.vault-meta .u{font:500 15px var(--num);color:var(--grey)}
.split{align-self:stretch;margin-top:40px;box-shadow:inset 0 0 0 4px var(--grey-d);padding:24px 28px}
.split-h{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.split-h .lbl{color:var(--gold)}
.split-s{color:var(--grey);font-size:15px}
.slots{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;align-items:end}
.slot{display:flex;flex-direction:column;align-items:center;gap:8px}
.slot .stack{display:flex;flex-direction:column-reverse;align-items:center;height:168px;justify-content:flex-start}
.slot .stack i{display:block;width:48px;height:12px;background:url(/assets/art/coin.png) 0 -12px/192px 48px;image-rendering:pixelated}
.slot .stack i:last-child{height:48px;background-position:0 0;animation:spin .6s steps(4) infinite}
.slot .stack .e{width:48px;height:48px;box-shadow:inset 0 0 0 4px var(--grey-d);background:none;animation:none}
.slot .rk{font:8px/8px var(--px);color:var(--grey)}
.slot .sp{font:700 15px/16px var(--num)}
.slot.me .sp,.slot.me .rk{color:var(--cyan)}
.vault .acts{margin-top:32px}

/* LOOT LOG: NES dialog box, lines type out */
.dlg{margin-top:64px;padding:40px 40px 44px}
.dlg-h{position:absolute;left:32px;top:-8px;padding:0 12px;background:var(--screen);font:16px/16px var(--px);font-weight:400;color:var(--gold)}
.log{list-style:none;display:flex;flex-direction:column;gap:14px;min-height:96px}
.log li{display:grid;grid-template-columns:72px 1fr auto auto;gap:16px;align-items:baseline;font-size:17px}
.log .t{font:8px/16px var(--px)}
.log .t.kill{color:var(--lime)}.log .t.loot{color:var(--gold)}.log .t.esc{color:var(--grey)}.log .t.join{color:var(--white)}
.log .ts{color:var(--grey);font-size:14px;white-space:nowrap}
.log a{font:8px/16px var(--px);color:var(--grey);text-decoration:none;position:relative}
.log a::after{content:"";position:absolute;inset:-12px -8px}
.log a:hover{color:var(--white)}
.log .tw{white-space:pre-wrap}
.log .tw .rest{color:transparent}
.log .tw .cur{display:inline-block;width:8px;height:16px;margin:0 -8px 0 0;vertical-align:-2px;background:var(--white)}
.log-empty{color:var(--grey)}
.log-empty[hidden]{display:none}
.dlg-more{position:absolute;right:28px;bottom:20px;width:16px;height:8px;background:var(--white);clip-path:polygon(0 0,100% 0,100% 50%,75% 50%,75% 100%,25% 100%,25% 50%,0 50%);animation:blink 1s steps(1) infinite}

/* STAGE SELECT: Mega Man portrait grid, current boss in the centre */
.sel{display:grid;grid-template-columns:repeat(3,200px);gap:24px;justify-content:center;margin-top:40px}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 8px 16px;background:var(--screen);box-shadow:inset 0 0 0 4px var(--grey-d);color:var(--white);font:inherit;text-align:center}
.cell .pt{position:relative;width:160px;height:128px;background:var(--screen);box-shadow:0 0 0 4px var(--screen)}
.cell .pt img{width:160px;height:128px}
.cell .x{position:absolute;inset:0;background:url(/assets/art/xmark.png) center/80px 80px no-repeat;image-rendering:pixelated}
.cell .nm{font:8px/16px var(--px);max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
.cell .st{font:8px/8px var(--px);color:var(--grey)}
.cell.dead .st{color:var(--lime)}
.cell.now{box-shadow:inset 0 0 0 4px var(--gold)}
.cell.now .st{color:var(--gold)}
.cell.empty .pt{box-shadow:inset 0 0 0 4px var(--grey-d)}
.cell.empty .q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:24px/24px var(--px);color:var(--grey-d)}
.cell[aria-pressed="true"]::after,.cell:hover::after{content:"";position:absolute;inset:-12px;pointer-events:none;box-shadow:inset 0 0 0 4px var(--white);animation:blink .6s steps(1) infinite}
.cell[aria-pressed="true"]::after{animation:none}
.sel-info{max-width:648px;margin:40px auto 0;padding:28px 36px;display:grid;grid-template-columns:auto 1fr;gap:12px 32px;align-items:baseline}
.sel-info .ih{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:16px/16px var(--px)}
.sel-info .ih .lbl{font-size:8px}
.sel-info dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sel-info dt{font:8px/8px var(--px);color:var(--grey);margin-bottom:8px}
.sel-info dd{font:700 20px/24px var(--num)}
.sel-info .lt{color:var(--gold)}
.sel-info .msg{grid-column:1/-1;color:var(--grey)}

/* HOW TO PLAY: a level map, the walker goes node to node, the window plays each step */
.map{position:relative;height:160px;margin:48px auto 0;max-width:816px;display:flex;align-items:center;justify-content:space-between}
.map-path{position:absolute;left:40px;right:40px;top:50%;height:8px;margin-top:-4px;background:repeating-linear-gradient(90deg,var(--white) 0 8px,transparent 8px 16px)}
.node{position:relative;z-index:1;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--screen);box-shadow:inset 0 0 0 4px var(--grey),inset 0 0 0 8px var(--screen);font:8px/8px var(--px);color:var(--grey)}
.node.q{font-size:24px;line-height:24px}
.node.done{box-shadow:inset 0 0 0 4px var(--lime),inset 0 0 0 8px var(--screen);color:var(--lime)}
.node.on{box-shadow:inset 0 0 0 4px var(--gold),inset 0 0 0 8px var(--screen),inset 0 0 0 12px var(--gold);color:var(--gold)}
.node:hover{color:var(--white)}
.walker{position:absolute;z-index:2;top:-8px;left:16px;width:48px;height:48px;background:url(/assets/art/coin.png) 0 0/192px 48px;image-rendering:pixelated;animation:spin .6s steps(4) infinite;transition:left .8s steps(8)}
.tut{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:center;margin-top:32px;min-height:256px}
.tut-demo{position:relative;height:184px;box-shadow:inset 0 0 0 4px var(--grey-d);overflow:hidden}
.td{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.td.on{display:flex}
.td0 img{width:96px;height:94px;margin-top:64px}
.td-coin{position:absolute;left:96px;top:0;width:48px;height:48px;background:url(/assets/art/coin.png) 0 0/192px 48px;image-rendering:pixelated}
.td0.on .td-coin{animation:spin .3s steps(4) infinite,tdrop 1.2s steps(10) infinite}
@keyframes tdrop{0%{transform:translateY(-48px)}70%,100%{transform:translateY(88px)}}
.td-bar{position:relative;width:176px;height:24px;box-shadow:inset 0 0 0 4px var(--white)}
.td-bar i{position:absolute;left:8px;top:8px;height:8px;width:160px;background:var(--lime)}
.td1.on .td-bar i{animation:tdrain 2.4s steps(6) infinite}
@keyframes tdrain{0%{width:160px}100%{width:16px}}
.td-pop{position:absolute;left:120px;top:40px;font-size:24px;color:var(--white)}
.td1.on .td-pop{animation:rise .8s steps(6) infinite}
.td-spark{position:absolute;left:56px;top:96px;width:48px;height:48px;background:url(/assets/art/spark.png) 0 0/96px 48px;image-rendering:pixelated}
.td1.on .td-spark{animation:tspark .24s steps(2) infinite}
@keyframes tspark{100%{background-position-x:-96px}}
.td2{flex-direction:column;gap:12px}
.td2 b{font-size:48px;line-height:48px;color:var(--lime)}
.td2 .lbl{color:var(--lime);animation:blink 1s steps(1) infinite}
.td-boom{width:96px;height:96px;background:url(/assets/art/explode.png) 0 0/384px 96px;image-rendering:pixelated}
.td3.on .td-boom{animation:tboom .4s steps(4) infinite}
@keyframes tboom{100%{background-position-x:-384px}}
.td-c{position:absolute;top:24px;width:24px;height:24px;background:url(/assets/art/coin.png) 0 0/96px 24px;image-rendering:pixelated}
.td-c.c1{left:48px}.td-c.c2{left:108px}.td-c.c3{left:168px}
.td3.on .td-c{animation:tfall 1.2s steps(8) infinite}
.td3.on .td-c.c2{animation-delay:.2s}.td3.on .td-c.c3{animation-delay:.4s}
@keyframes tfall{0%{transform:translateY(0)}100%{transform:translateY(128px)}}
.td4 img{width:128px;height:140px}
.td4 .q{position:absolute;left:50%;top:50%;transform:translate(-50%,-80%);font:24px/24px var(--px);animation:blink 1s steps(1) infinite}
.td4.on img{animation:drop .6s steps(8) 1}
.tut-h{font:24px/32px var(--px);color:var(--gold)}
.tut-p{margin-top:16px;font-size:18px;max-width:520px;min-height:81px}
.tut-k{display:flex;align-items:center;gap:24px;margin-top:24px}
.r-mine{display:flex;flex-direction:column;gap:8px}
.r-mine[hidden],#r-rent[hidden]{display:none}
.r-mine .lbl{font:8px/16px var(--px);color:var(--grey)}
.r-mine-l{list-style:none;display:flex;flex-direction:column;gap:4px;font:8px/16px var(--px)}
.r-mine-l li{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.r-mine-l b{font:700 15px/16px var(--num)}
.r-mine-l .ok{color:var(--lime)}
#r-rent{align-self:flex-start}
.plate.sm{min-height:40px;padding:12px 16px;font-size:8px}

.foot{max-width:1040px;margin:128px auto 0;padding:48px 32px 48px;display:flex;flex-direction:column;gap:24px;position:relative}
.foot::before{content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);top:0;height:32px;background:url(/assets/art/floor.png) 0 0/64px 32px repeat-x;image-rendering:pixelated}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:32px}
.foot-nav{display:flex;gap:24px;flex-wrap:wrap}
.foot-nav a{font:8px/16px var(--px);color:var(--grey);text-decoration:none;padding:12px 0}
.foot-nav a:hover{color:var(--white)}
.foot .ca{justify-content:flex-start}
.foot-small{color:var(--grey);font-size:14px}

/* raid dialog */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.86)}
.modal[hidden]{display:none}
.box{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--screen);box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 8px var(--screen),inset 0 0 0 12px var(--white);padding:40px 32px 32px;display:flex;flex-direction:column;gap:20px}
.box h2{font:24px/24px var(--px);font-weight:400}
.x-close{position:absolute;right:12px;top:12px;width:48px;height:48px;font:16px/16px var(--px)}
.x-close:hover{color:var(--cyan)}
.r-boss{font:8px/16px var(--px);color:var(--grey)}
.r-boss b{font-size:16px;color:var(--white)}
.r-fee{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.r-fee span{font:8px/8px var(--px);color:var(--grey)}
.r-fee b{font-size:40px;line-height:40px;color:var(--gold)}
.r-list{list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--white);font-size:16px}
.r-list li{padding-left:24px;position:relative}
.r-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--gold)}
.r-wallet{font:700 15px/22px var(--num);color:var(--cyan);overflow-wrap:anywhere}
.r-wallet.none{color:var(--grey);font-weight:500}
.box .acts{justify-content:flex-start}
.r-msg{min-height:24px;font-size:15px;color:var(--grey)}
.r-msg.ok{color:var(--lime)}.r-msg.err{color:var(--red)}

/* docs */
.doc{max-width:860px;margin:0 auto;padding:64px 32px 0}
.doc h1{font:32px/40px var(--px);font-weight:400;margin-bottom:24px}
.doc .lead{font-size:19px;max-width:680px}
.doc h2{font:16px/24px var(--px);font-weight:400;margin:72px 0 24px;scroll-margin-top:80px;display:flex;gap:16px;align-items:center}
.doc h2::before{content:"";flex:none;width:16px;height:16px;background:url(/assets/art/arrow.png) 0 0/16px 16px;image-rendering:pixelated}
.doc p,.doc li{max-width:720px}
.doc p+p{margin-top:12px}
.doc ol,.doc ul{padding-left:24px;display:flex;flex-direction:column;gap:8px}
.doc ul{list-style:square}
.doc b{font-weight:700}
.doc .muted{color:var(--grey)}
.doc table{width:100%;border-collapse:collapse;font-size:16px}
.doc th{font:8px/16px var(--px);color:var(--grey);text-align:left;padding:8px 12px 12px 0;font-weight:400}
.doc td{padding:12px 12px 12px 0;box-shadow:inset 0 4px 0 var(--grey-d);vertical-align:top}
.doc td.num{white-space:nowrap}
.doc .toc{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:32px}
.doc .toc a{font:8px/16px var(--px);color:var(--grey);text-decoration:none;padding:12px 0}
.doc .toc a:hover{color:var(--white)}
.doc code{font:700 15px var(--num);overflow-wrap:anywhere}
.doc .box2{box-shadow:inset 0 0 0 4px var(--grey-d);padding:24px}

/* 404 */
.nf{min-height:calc(100svh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:32px 16px;text-align:center}
.nf img{width:256px;height:256px}
.nf h1{font:24px/32px var(--px);font-weight:400}


/* HOW IT WORKS: NES TV + own controls (no autoplay) */
.tv{margin:32px auto 0;max-width:896px;background:var(--screen);box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 8px var(--screen),inset 0 0 0 12px var(--grey-d);padding:20px}
.tv-scr{position:relative;aspect-ratio:16/9;background:#000 url(/assets/video/howto.webp) center/contain no-repeat;overflow:hidden}
.tv-scr video{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;background:#000}
.tv-big{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(0,0,0,.35);font:16px/16px var(--px);color:var(--white)}
.tv-big svg{color:var(--gold)}.tv-big:hover svg{color:var(--white)}
.tv-big span{animation:blink 1s steps(1) infinite}
.tv.started .tv-big{display:none}
.tv-bar{display:grid;grid-template-columns:48px 1fr auto 48px 48px;align-items:center;gap:12px;margin-top:16px}
.tv-b{width:48px;height:48px;display:grid;place-items:center;box-shadow:inset 0 0 0 4px var(--white)}
.tv-b:hover{box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 8px var(--grey-d)}
.tv-b svg{display:block}.tv-b .i-pause,.tv-b .i-mute{display:none}
.tv.on .i-play{display:none}.tv.on .i-pause{display:block}.tv.muted .i-snd{display:none}.tv.muted .i-mute{display:block;color:var(--red)}
.tv-seek{position:relative;height:32px;background:var(--screen);box-shadow:inset 0 0 0 4px var(--white);touch-action:none}
.tv-seek::before{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:8px;background:var(--grey-d)}
.tv-fill{position:absolute;left:8px;top:8px;bottom:8px;width:0;max-width:calc(100% - 16px);background:var(--gold)}
.tv-seek::after{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:8px;background:repeating-linear-gradient(90deg,transparent 0 12px,var(--screen) 12px 16px);pointer-events:none}
.tv-t{font-size:17px;white-space:nowrap;color:var(--white)}
.tv:fullscreen{max-width:none;display:flex;flex-direction:column;justify-content:center}
.tv:fullscreen .tv-scr{flex:1;aspect-ratio:auto}

/* JOIN dialog: wallet list, balance, share */
.r-wl{display:flex;flex-direction:column;gap:8px}
.r-wl[hidden]{display:none}
.wl-i{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 16px;box-shadow:inset 0 0 0 4px var(--grey-d);font:8px/16px var(--px);text-align:left}
.wl-i:hover,.wl-i:focus-visible{box-shadow:inset 0 0 0 4px var(--white)}
.wl-i img{width:24px;height:24px;image-rendering:auto}
.wl-dot{width:24px;height:24px;background:var(--cyan);flex:none}
.wl-i em{margin-left:auto;font-style:normal;color:var(--gold)}
.wl-i:disabled{opacity:.5}
.r-bal{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.r-bal[hidden]{display:none}
.r-bal span{font:8px/8px var(--px);color:var(--grey)}
.r-bal b{font-size:24px;line-height:24px;color:var(--white)}
.r-bal.short b{color:var(--red)}
.r-msg a{color:var(--cyan)}
.r-done{display:flex;gap:12px;flex-wrap:wrap}
.r-done[hidden]{display:none}
.r-mine{display:flex;flex-direction:column;gap:8px}
.r-mine[hidden],#r-rent[hidden]{display:none}
.r-mine .lbl{font:8px/16px var(--px);color:var(--grey)}
.r-mine-l{list-style:none;display:flex;flex-direction:column;gap:4px;font:8px/16px var(--px)}
.r-mine-l li{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.r-mine-l b{font:700 15px/16px var(--num)}
.r-mine-l .ok{color:var(--lime)}
#r-rent{align-self:flex-start}
.plate.sm{min-height:40px;padding:12px 16px;font-size:8px}
.you-share{margin-left:12px;color:var(--cyan);font:8px/16px var(--px)}

@media (max-height:820px) and (min-width:761px){:root{--s:7;--g:5}}
@media (min-width:1180px) and (min-height:860px){:root{--s:9;--g:6}}
@media (max-width:1100px){.hp{grid-template-columns:auto 480px auto}}
@media (max-width:1000px) and (min-width:761px){.hs-head,.hs-rows li{grid-template-columns:64px 140px 1fr 88px}.hs-loot,.hs-rows .lt{display:none}}
@media (max-width:760px){
  :root{--s:5;--g:4}
  .screen{padding:72px 16px 0}
  .win{padding:28px 20px}
  .sh{font-size:16px;line-height:24px}
  .hs-top b{font-size:22px;line-height:24px}
  .hs-top{margin-bottom:20px}
  .hs-head,.hs-rows li{grid-template-columns:40px 1fr 64px;gap:8px}
  .hs-head{padding-left:16px}
  .hs-head span:nth-child(3),.hs-rows .w,.hs-loot,.hs-rows .lt{display:none}
  .hs-rows li{font-size:17px;min-height:36px;padding-left:16px}
  .hs-rows li::before{width:8px;height:8px;margin-top:-4px;background-size:8px 8px}
  .hs-rows .rk{font-size:8px}
  .hs-coin .blink{font-size:16px}
  .vault-v b{font-size:44px;line-height:44px}
  .vault-v .lbl{font-size:8px}
  .hoard{min-height:94px;gap:4px}
  .chest,.chest img{width:96px;height:94px}
  .drop-coin{left:36px;top:-96px;width:24px;height:24px;background-size:96px 24px}
  .hoard{width:100%}
  .pile{width:auto;flex:1 1 0;min-width:0;overflow:hidden;gap:2px}
  .pile .col i{width:24px;height:6px;background-size:96px 24px;background-position:0 -6px}
  .pile .col i:last-child{height:12px;background-position:0 0}
  .ledge{margin:0 -16px}
  .vault-meta{gap:24px}
  .split{padding:20px 16px}
  .slots{grid-template-columns:repeat(5,1fr);gap:16px 8px}
  .slot .stack{height:60px}
  .slot .stack i{width:24px;height:6px;background-size:96px 24px;background-position:0 -6px}
  .slot .stack i:last-child{width:24px;height:24px;background-position:0 0}
  .slot .stack .e{width:24px;height:24px}
  .dlg{margin-top:48px;padding:36px 20px 40px}
  .log{gap:10px}
  .log li{grid-template-columns:48px 1fr;gap:0 10px;font-size:15px;line-height:20px}
  .log .ts{display:none}
  .log a{grid-column:2}
  .sel{grid-template-columns:repeat(3,1fr);gap:12px}
  .cell{padding:12px 4px 10px;gap:8px}
  .cell .pt,.cell .pt img{width:80px;height:64px}
  .cell .x{background-size:40px 40px}
  .cell .nm{font-size:8px;line-height:8px}
  .cell[aria-pressed="true"]::after,.cell:hover::after{inset:-8px}
  .sel-info{padding:24px 20px}
  .sel-info dl{grid-template-columns:repeat(2,1fr)}
  .sel-info .ih{font-size:8px;line-height:16px}
  .map{height:112px}
  .node{width:56px;height:56px}
  .node.q{font-size:16px}
  .map-path{left:28px;right:28px}
  .walker{width:24px;height:24px;background-size:96px 24px;top:4px}
  .tut{grid-template-columns:1fr;gap:24px}
  .tut-demo{height:136px}
  .td-pop{top:8px}
  .td-spark{top:76px}
  .td0 img{margin-top:40px}
  .td-c{top:8px}
  .stage{margin-top:40px}
  .demo{top:-36px;bottom:auto;right:auto;left:50%;margin-right:0;transform:translateX(-50%)}
  .tut-h{font-size:16px;line-height:24px}
  .tut-p{font-size:16px}
  .hud{gap:12px;padding:0 16px;height:56px}
  .hud-nav{gap:16px}
  .hud-nav a:not(:last-child){display:none}
  .hud-brand{font-size:8px;gap:8px}
  .card-name{font-size:16px;line-height:16px}
  .hp{grid-template-columns:auto 1fr;width:100%;max-width:360px;gap:8px 12px}
  .hp-n{grid-column:1/-1;justify-self:center;font-size:24px}
  .arena{min-height:auto;padding-bottom:32px;padding-top:4px}
  .card{gap:8px}
  .hp{margin-top:12px}
  .demo{margin-top:12px}
  .stagger{margin-top:8px;margin-bottom:12px;padding:4px 12px}
  .stagger b{font-size:24px}
  .stage{margin-top:12px}
  .stage:has(.demo:not([hidden])){margin-top:48px}
  .demo{top:-36px}
  .tv{padding:12px;margin-top:24px}
  .tv-bar{grid-template-columns:48px 1fr 48px 48px;gap:8px}
  .tv-t{grid-column:1/-1;grid-row:2;font-size:15px;justify-self:center}
  .tv-big{font-size:8px}.tv-big svg{width:40px;height:40px}
  .under{margin-top:16px;gap:12px}
  .brand{font-size:24px;line-height:24px}
  .line{font-size:16px}
  .plate{padding:16px 16px;font-size:8px;min-height:48px}
  .acts{gap:12px}
  .foot{padding:48px 16px}
  .box{padding:48px 20px 24px}
  .box h2{font-size:16px}
  .doc{padding:48px 16px 0}
  .doc h1{font-size:16px;line-height:24px}
  .doc h2{font-size:8px;line-height:16px}
  .doc table{font-size:14px}
}
@media (max-width:360px){.hud-brand span{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage.shake,.boss.drop,.boss.run{animation:none}
  .st-l,.blink,.hs-rows li.me::before,.dlg-more,.cell::after,.td *,.walker,.drop-coin.go{animation:none!important}
  .slot .stack i:last-child,.drip{animation:none}
  .walker{transition:none}
}
/* /r/<wallet> share card */
.rcard{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:48px 16px}
.rc-win{width:min(640px,100%);padding:40px 32px;display:flex;flex-direction:column;gap:16px;box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 8px var(--screen),inset 0 0 0 12px var(--white)}
.rc-w{font:24px/32px var(--px);color:var(--cyan);font-weight:400}
.rc-big{font:16px/24px var(--px);color:var(--gold)}
.rc-line{font-size:17px}
.rc-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.rc-dl dt{font:8px/16px var(--px);color:var(--grey)}.rc-dl dd{font-size:24px}
.rc-win .acts{justify-content:flex-start;flex-wrap:wrap}
/* /stats */
.st-top{text-align:center;padding-top:120px}
.st-kill{font:24px/48px var(--px);font-weight:400;margin-top:24px}
.st-kill .num{font-size:64px;line-height:64px;color:var(--gold);display:inline-block;vertical-align:middle}
.st-u,.st-of{color:var(--white)}.st-of{color:var(--grey)}
.st-sub{margin-top:24px;color:var(--grey)}
.st-demo{position:static;display:inline-block;margin-top:24px}
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px}
.st-grid div{display:flex;flex-direction:column;gap:8px}
.st-grid b{font-size:32px;line-height:32px}
.st-acts{margin-top:32px;justify-content:center}
@media (max-width:760px){.st-top{padding-top:64px}.st-kill{font-size:12px;line-height:32px}.st-kill .num{font-size:40px;line-height:40px}.st-grid{grid-template-columns:1fr 1fr;padding:28px 24px}.st-grid b{font-size:24px}}
.foot-x{display:inline-block;margin-top:16px;font:8px/16px var(--px);color:var(--white);text-decoration:none;padding:8px 0}.foot-x:hover{color:var(--cyan)}