/* Axolotl: a GBA aquarium. One art pixel = --u (UI plates) or the scene's k (canvases). Plates are 9-slice art from
   /assets/px (codex art, cleaned), never CSS-drawn objects. Words in Pixelify Sans, every number in Rubik tabular. */
:root{
  --navy:#102850;--deep:#183C78;--w1:#2058A8;--w2:#2870C0;--water:#3080D0;--w4:#3C94DC;--w5:#48A8E8;--w6:#60BCF0;--w7:#78D0F8;--cyan:#B8F0F8;--white:#F8F8F8;
  --sand:#F0E0A8;--sand2:#D0B878;--sand3:#A08850;--rock:#8090B0;--rock2:#586890;--rock3:#384868;
  --pink0:#FFD0DC;--pink:#F898B8;--pink2:#E06090;--pink3:#A83868;--gill:#F04868;--gold0:#F8E070;--gold:#F0B830;--gold2:#B87818;--red:#F05038;
  --u:3px;--px:4px;--hud:72px;
  --px-font:"Pixelify Sans",ui-monospace,monospace;--rd:"Rubik",system-ui,sans-serif;
}
@media (max-width:1023px){:root{--px:3px}}
@media (max-width:760px){:root{--u:2px;--px:2px;--hud:56px}}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--deep);color:var(--white)}
body{font:400 18px/1.5 var(--rd);min-height:100vh;overflow-x:hidden}
img,canvas,video{display:block;max-width:100%}
.pix,canvas{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:3px}
.num,.big,[data-ca-short],input[type=number]{font-family:var(--rd);font-variant-numeric:tabular-nums}
h1,h2,h3,.callout,.k,.bb-k,.tag,.btn,.sq,.st,.links,.brand,.sc,.dt,.gmenu,.rl b,.sort,.tabs,th{font-family:var(--px-font);-webkit-font-smoothing:none;font-smooth:never}
h1,h2{color:var(--white);font-weight:700;margin:0;line-height:1;letter-spacing:.01em;text-transform:uppercase;
  text-shadow:0 .06em 0 var(--navy),.06em .06em 0 var(--navy),.06em 0 0 var(--navy)}
h2 .num,h1 .num{font-family:var(--px-font)}
h3{font:700 22px/1.1 var(--px-font);text-transform:uppercase;letter-spacing:.02em;margin:0 0 14px}
p{margin:0}
.fine{font-size:15px;line-height:1.5;color:inherit;opacity:.92}
.c{text-align:center}
:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.skip{position:absolute;left:-999px}

/* ---------------------------------------------------------------- buttons: GBA plates (9-slice 5, cleaned art) */
.btn{--pl:url(/assets/px/ui-btn-gold.png);--plh:url(/assets/px/ui-btn-gold-hover.png);--pld:url(/assets/px/ui-btn-gold-down.png);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:calc(20*var(--u));
  font:700 24px/1 var(--px-font);color:var(--navy);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  padding:0 calc(4*var(--u));border:calc(5*var(--u)) solid transparent;border-image:var(--pl) 5 fill / calc(5*var(--u)) stretch;
  background:none;cursor:pointer;image-rendering:pixelated;user-select:none;-webkit-tap-highlight-color:transparent}
.btn.pk{--pl:url(/assets/px/ui-btn-pink.png);--plh:url(/assets/px/ui-btn-pink-hover.png);--pld:url(/assets/px/ui-btn-pink-down.png)}
.btn:hover{border-image-source:var(--plh);transform:translateY(calc(-1*var(--u)))}
.btn:active{border-image-source:var(--pld);transform:translateY(calc(2*var(--u)))}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.btn:focus-visible::before{content:"";position:absolute;left:calc(-12*var(--u) - 10px);top:50%;width:calc(12*var(--u));height:calc(16*var(--u));margin-top:calc(-8*var(--u));background:url(/assets/px/ui-cursor-right.png) 0 0/100% 100%;image-rendering:pixelated}
.btn[disabled],.btn.off{border-image-source:url(/assets/px/ui-btn-off.png);color:var(--rock);cursor:not-allowed;transform:none}
.btn.busy{cursor:progress}
.btn.busy::after{content:"";width:calc(15*var(--u));height:calc(5*var(--u));background:url(/assets/px/i-pellet.png) 0 50%/calc(5*var(--u)) calc(5*var(--u)) repeat-x;image-rendering:pixelated;animation:pel 0.9s steps(3) infinite}
@keyframes pel{0%{width:calc(5*var(--u))}100%{width:calc(20*var(--u))}}
.btn.sm{font-size:18px;min-height:calc(16*var(--u));--u:2px}
.btn.wide{width:100%}
.btn .num{font-family:var(--rd);font-weight:700}
.sq{display:inline-flex;align-items:center;justify-content:center;width:calc(20*var(--u));height:calc(20*var(--u));border:calc(6*var(--u)) solid transparent;
  border-image:url(/assets/px/ui-panel-light.png) 6 fill / calc(6*var(--u)) stretch;image-rendering:pixelated;color:var(--navy)}
.sq svg,.xb svg{width:24px;height:24px;fill:currentColor}
.sq:hover{transform:translateY(calc(-1*var(--u)))}.sq:active{transform:translateY(calc(2*var(--u)))}

/* ---------------------------------------------------------------- panels */
.panel{border:calc(6*var(--u)) solid transparent;border-image:url(/assets/px/ui-panel-dark.png) 6 fill / calc(6*var(--u)) stretch;image-rendering:pixelated;padding:calc(3*var(--u)) calc(4*var(--u));color:var(--white)}
.panel.light{border-image-source:url(/assets/px/ui-panel-light.png);color:var(--navy)}
.panel.light a{color:var(--w1)}
.panel h3{color:inherit}
.panel.dark h3{color:var(--cyan)}
.callout,.k{display:block;font:500 15px/1.2 var(--px-font);text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)}
.panel.light .callout,.panel.light .k{color:var(--w1)}
.big{font:600 28px/1.1 var(--rd)}

/* ---------------------------------------------------------------- HUD header */
.hud{position:sticky;top:0;z-index:30;height:var(--hud);display:flex;align-items:center;gap:14px;padding:0 18px;
  border:12px solid transparent;border-top:0;border-image:url(/assets/px/ui-panel-dark.png) 0 6 6 6 fill / 0 12px 12px 12px stretch;image-rendering:pixelated}
.brand{min-height:40px;display:inline-flex;align-items:center;gap:10px;color:var(--white);text-decoration:none;font:700 22px/1 var(--px-font);text-transform:uppercase;letter-spacing:.03em}
.brand img{width:43px;height:27px}
.links{display:flex;gap:4px;margin-left:12px;flex:1}
.links a{font:500 18px/1 var(--px-font);text-transform:uppercase;color:var(--white);text-decoration:none;padding:8px 10px 8px 22px;position:relative}
.links a:hover::before,.links a[aria-current]::before{content:"";position:absolute;left:4px;top:50%;width:12px;height:16px;margin-top:-8px;background:url(/assets/px/ui-cursor-right.png) 0 0/100% 100%;image-rendering:pixelated}
.links a:hover,.links a[aria-current]{color:var(--gold0)}
.hud .btn{font-size:17px;--u:2px;min-height:40px}
.ca{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 6px;border:12px solid transparent;border-image:url(/assets/px/ui-panel-dark.png) 6 fill / 12px stretch;image-rendering:pixelated;
  background:none;color:var(--white);cursor:pointer;font-size:16px;white-space:nowrap}
.ca .sc{font:500 14px/1 var(--px-font);color:var(--cyan)}
.ca .num{font:500 16px/1 var(--rd)}
.ca .ci{width:24px;height:25px;background:url(/assets/px/i-copy.png) 0 0/100% 100%;image-rendering:pixelated;flex:none}
.ca.copied .ci{width:22px;height:19px;background-image:url(/assets/px/i-check.png)}
.ca.cerr .num{color:var(--red)}
.ca[disabled]{cursor:default}.ca[disabled] .ci{opacity:.35}
.ca:hover:not([disabled]){transform:translateY(-2px)}
.xb{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--navy);border:12px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 12px stretch;image-rendering:pixelated;flex:none}
.xb svg{width:20px;height:20px}
.xb:hover{transform:translateY(-2px)}
.menu-b{display:none;width:44px;height:44px;border:12px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 12px stretch;image-rendering:pixelated;background:none;padding:0;cursor:pointer;align-items:center;justify-content:center}
.menu-b img{width:17px;height:10px}
.drawer{position:fixed;inset:0;z-index:50;background:rgba(16,40,80,.86);display:flex;align-items:flex-start;justify-content:center;padding:70px 16px}
.drawer[hidden]{display:none}
.dmenu{position:relative;width:min(360px,100%);display:flex;flex-direction:column;gap:2px;border:18px solid transparent;border-image:url(/assets/px/ui-panel-dark.png) 6 fill / 18px stretch;image-rendering:pixelated;padding:10px 14px 16px}
.dmenu .dt{font:700 26px/1 var(--px-font);text-transform:uppercase;color:var(--gold0);margin:2px 0 10px}
.dmenu a{font:500 22px/1 var(--px-font);text-transform:uppercase;color:var(--white);text-decoration:none;padding:10px 0 10px 26px;position:relative}
.dmenu a:hover::before,.dmenu a:focus-visible::before{content:"";position:absolute;left:0;top:50%;width:12px;height:16px;margin-top:-8px;background:url(/assets/px/ui-cursor-right.png) 0 0/100% 100%}
.dmenu .btn{margin-top:12px}
.dlg-x{position:absolute;right:6px;top:2px;width:40px;height:40px;background:none;border:0;color:inherit;font:700 30px/1 var(--px-font);cursor:pointer}
@media (max-width:1180px){.links a:nth-child(4),.links a:nth-child(3){display:none}}
@media (max-width:1023px){.links{display:none}.menu-b{display:inline-flex}.hud{justify-content:flex-end}.hud .brand{margin-right:auto}}
@media (max-width:760px){
  .hud{gap:6px;padding:0 4px;border-width:0 8px 8px;border-image-width:0 8px 8px 8px}
  .brand span{display:none}.brand img{width:43px;height:27px}
  .hud .wb{display:none}
  .hud .btn{font-size:14px;padding:0 4px}
  .ca{height:40px;border-width:10px;border-image-width:10px;gap:6px;padding:0 2px}.ca .num{font-size:14px}.ca .sc{font-size:12px}.ca .ci{width:18px;height:19px}
  .xb,.menu-b{width:40px;height:40px;border-width:10px;border-image-width:10px}
}
@media (max-width:359px){.hud .ca .num{display:none}.stage{height:650px}}

/* ---------------------------------------------------------------- hero tank */
.tank{position:relative;background:var(--w7);overflow:hidden}
.stage{position:relative;height:calc(100svh - var(--hud));min-height:520px;overflow:hidden;background:var(--water)}
.stage .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.stage canvas{position:absolute;left:50%;top:0;transform:translateX(-50%);max-width:none;cursor:default}
.stage canvas.hot{cursor:pointer}
.title{position:absolute;left:max(32px,6vw);top:calc(var(--hud) * 0 + 11%);width:min(640px,46vw);z-index:2;pointer-events:none}
.title > *{pointer-events:auto}
.title h1{font-size:128px;margin-left:-4px}
.lede{font:400 22px/1.45 var(--rd);max-width:30ch;margin:22px 0 26px;color:var(--white);text-shadow:0 2px 0 var(--navy),2px 2px 0 var(--navy),2px 0 0 var(--navy),-2px 0 0 var(--navy),0 -2px 0 var(--navy)}
.acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.vlink{min-height:40px;margin-top:18px;display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;color:var(--white);font:500 18px/1 var(--px-font);text-transform:uppercase;cursor:pointer;text-shadow:0 2px 0 var(--navy),2px 2px 0 var(--navy)}
.vlink .num{font:500 16px/1 var(--rd)}
.vlink .tri{width:12px;height:16px;background:url(/assets/px/ui-cursor-right.png) 0 0/100% 100%;image-rendering:pixelated}
.vlink:hover{color:var(--gold0)}
.ruler{position:absolute;right:0;top:0;bottom:0;width:240px;pointer-events:none;z-index:1}
.rl{position:absolute;right:14px;transform:translateY(-120%);display:flex;gap:6px;align-items:baseline;font-size:15px;color:var(--white);text-shadow:0 2px 0 var(--navy),2px 0 0 var(--navy),2px 2px 0 var(--navy)}
.rl b{font:500 14px/1 var(--px-font);text-transform:uppercase;letter-spacing:.05em}
.rl .num{font:600 15px/1 var(--rd)}
.rl.red,.rl.red b{color:#FFB0A0}.rl.red .num{color:var(--white)}
.rl.pk b{color:var(--cyan)}
.ruler.sm .rl{font-size:13px}
.rl:not([style*=top]){visibility:hidden}
.tip{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;border:10px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 10px stretch;image-rendering:pixelated;color:var(--navy);padding:0 4px;font:600 14px/1.2 var(--rd)}
.tip b{font:700 14px/1 var(--px-font);text-transform:uppercase;margin-right:6px}
.tip .st{margin-left:6px}
.fmore{position:absolute;z-index:3;white-space:nowrap;border:10px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 10px stretch;image-rendering:pixelated;color:var(--navy);padding:0 6px;font:600 15px/1.2 var(--rd);text-decoration:none}
.fmore b{font:700 14px/1 var(--px-font);text-transform:uppercase}
.fmore:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.fmore[hidden]{display:none}

/* battle box (Pokemon enemy box): 3 numbers + 48 pellets */
.battle{position:absolute;left:max(32px,6vw);bottom:clamp(20px,5svh,56px);width:min(600px,calc(100vw - 64px));z-index:2;
  border:calc(6*var(--u)) solid transparent;border-image:url(/assets/px/ui-panel-dark.png) 6 fill / calc(6*var(--u)) stretch;image-rendering:pixelated;padding:6px 12px 8px}
.battle .tag{position:absolute;left:-6px;right:-6px;top:-44px;height:20px;box-sizing:content-box;overflow:hidden;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 48px);
  border:10px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 10px stretch;image-rendering:pixelated;color:var(--navy);padding:0 6px;font:400 14px/1.2 var(--rd)}
.tag b{font:700 15px/1 var(--px-font);letter-spacing:.06em}
.tag a{color:var(--w1)}
.tag [data-demo-t]{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-top,.bb-bot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.bb-name{display:inline-block;padding:8px 0;font:700 18px/1.2 var(--px-font);text-transform:uppercase;color:var(--white);text-decoration:none}
.bb-name .tk{font:600 16px/1 var(--rd);color:var(--cyan);margin-left:6px;text-transform:none}
a.bb-name:hover{color:var(--gold0)}
.bb-k{font:500 14px/1 var(--px-font);text-transform:uppercase;color:var(--cyan);letter-spacing:.05em;white-space:nowrap}
.bb-k .num{display:inline-block;min-width:3.4ch;min-height:26px;font:600 26px/1 var(--rd);color:var(--white);margin-left:6px;letter-spacing:0}
.num.pink{color:var(--pink)!important}.num.gold{color:var(--gold)!important}
.cells{display:grid;grid-template-columns:repeat(var(--n,48),1fr);gap:2px;margin:10px 0;padding:4px;background:var(--navy);outline:2px solid var(--rock3)}
.cells i{display:block;height:14px;background:var(--rock3)}
.cells i.f{background:var(--gold);box-shadow:inset 0 2px 0 var(--gold0),inset 0 -2px 0 var(--gold2)}
.cells i.s{background:var(--red);clip-path:polygon(0 15%,15% 0,50% 35%,85% 0,100% 15%,65% 50%,100% 85%,85% 100%,50% 65%,15% 100%,0 85%,35% 50%)}
.cells i.c{background:var(--pink)}
.cells.lg i{height:30px}

/* ---------------------------------------------------------------- screens (each a band of its own) */
.dither{height:calc(4*var(--px));background:repeating-conic-gradient(var(--da) 0 25%,var(--db) 0 50%) 0 0/calc(2*var(--px)) calc(2*var(--px))}
.d1{--da:#A08850;--db:var(--deep)}.d2{--da:var(--deep);--db:var(--sand)}.d3{--da:var(--sand);--db:var(--cyan)}.d4{--da:var(--cyan);--db:var(--w7)}.d5{--da:var(--w7);--db:var(--white)}.d6{--da:var(--white);--db:var(--navy)}
.inner .d2{--da:var(--w2);--db:var(--deep)}
.screen{position:relative;padding:72px 16px 84px;display:flex;flex-direction:column;align-items:center;gap:22px}
.screen h2{font-size:64px;text-align:center}
.sub{max-width:56ch;text-align:center;font-size:18px;line-height:1.5}
.scene{position:relative;width:calc(240*var(--px));height:calc(160*var(--px));max-width:100%;overflow:hidden;outline:var(--px) solid var(--navy);background:var(--water)}
.scene .fallback,.scene canvas{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(240*var(--px));height:calc(160*var(--px));max-width:none}
.scene canvas{z-index:1}
.hudrow{display:flex;align-items:center;justify-content:center;gap:10px 28px;flex-wrap:wrap;width:min(960px,100%);
  border:calc(6*var(--u)) solid transparent;border-image:url(/assets/px/ui-panel-dark.png) 6 fill / calc(6*var(--u)) stretch;image-rendering:pixelated;padding:4px 10px}
.hudrow > div{display:flex;flex-direction:column;gap:6px;min-width:96px}
.hudrow b.num{font:600 28px/1 var(--rd)}
.coinlink{display:inline-block;padding:10px 4px;font:700 18px/1 var(--px-font);text-transform:uppercase;color:var(--gold0)}
.s-drop{background:var(--deep)}
.s-drop canvas{cursor:ns-resize;touch-action:none}
.s-drop .fine{max-width:64ch;color:var(--cyan)}
.opens{position:absolute;z-index:3;right:calc(10*var(--px));top:calc(26*var(--px));width:min(320px,calc(100% - 24px));display:flex;flex-direction:column;gap:12px;
  border:calc(6*var(--u)) solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / calc(6*var(--u)) stretch;image-rendering:pixelated;color:var(--navy);padding:4px 8px 8px}
.opens[hidden]{display:none}
.ot{display:flex;align-items:center;gap:10px;font:700 22px/1 var(--px-font);text-transform:uppercase}
.ot .cur,.namer .cur{width:12px;height:16px}
.os{font-size:15px}
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.plates button{--u:2px;font:600 17px/1 var(--rd);color:var(--navy);padding:0;min-height:44px;border:10px solid transparent;border-image:url(/assets/px/ui-btn-pink.png) 5 fill / 10px stretch;image-rendering:pixelated;background:none;cursor:pointer;white-space:nowrap}
.plates button[aria-checked=true]{border-image-source:url(/assets/px/ui-btn-gold.png)}
.plates button:hover{transform:translateY(-2px)}
.s-feed{background:var(--sand);color:var(--navy)}
.s-feed .sub{color:var(--navy)}
.s-feed .hudrow{color:var(--white)}
.bigbar{width:min(960px,100%)}
.bigbar .cells{margin:0;gap:3px;padding:6px}
.tag.sm{position:absolute;z-index:2;left:12px;top:12px;border:10px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 10px stretch;image-rendering:pixelated;color:var(--navy);padding:0 6px;font:400 14px/1.2 var(--rd)}
.s-res{background:var(--cyan);color:var(--navy)}
.s-res h2{color:var(--white)}
.resgrid .scene{--px:3px}
@media (max-width:760px){.resgrid .scene{--px:2px}}
.resgrid{display:grid;grid-template-columns:auto minmax(280px,420px);gap:28px;align-items:center;max-width:100%}
.srcpanel{display:flex;flex-direction:column;gap:18px}
.restot{display:flex;flex-direction:column;gap:4px}
.restot .num{font:700 64px/1 var(--rd);color:var(--navy)}
.restot span{font:500 16px/1.2 var(--px-font);text-transform:uppercase;letter-spacing:.04em;color:var(--w1)}
.restot span .num{font:600 18px/1 var(--rd);color:var(--w1)}
.srcs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.srcs li{display:grid;grid-template-columns:32px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  border:12px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 12px stretch;image-rendering:pixelated;padding:0 4px;color:var(--navy)}
.srcs li .ico{grid-row:1/3;width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.srcs li .n{font:700 16px/1.2 var(--px-font);text-transform:uppercase}
.srcs li b{font:600 18px/1 var(--rd);font-variant-numeric:tabular-nums;text-align:right}
.srcs li .d{grid-column:2/4;font-size:14px;color:var(--w1)}
.srcs li .lv{grid-column:2/4;height:6px;background:var(--cyan);margin-top:4px}
.srcs li .lv i{display:block;height:100%;background:var(--gold)}
.srcs li.hot{border-image-source:url(/assets/px/ui-btn-gold.png);border-image-slice:5 fill}
.panel.dark .srcs li{color:var(--navy)}
.s-burn{background:var(--w7);padding:0}
.scene.wide{width:100%;height:calc(160*var(--px));outline:0}
.scene.wide canvas,.scene.wide .fallback{width:calc(var(--bw,240) * var(--px));}
.burnread{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(720px,92%)}
.burnread h2{font-size:64px}
.bignum{font:700 112px/1 var(--rd)!important;color:var(--white);margin:14px 0 10px;text-shadow:0 6px 0 var(--navy),6px 6px 0 var(--navy),6px 0 0 var(--navy)}
.bsub{font:500 19px/1.4 var(--rd);color:var(--white);text-shadow:0 2px 0 var(--navy),2px 2px 0 var(--navy),2px 0 0 var(--navy),-2px 0 0 var(--navy),0 -2px 0 var(--navy)}
.s-coins{background:var(--white) repeating-linear-gradient(180deg,transparent 0 calc(var(--px) * 60),var(--cyan) calc(var(--px) * 60) calc(var(--px) * 61));color:var(--navy)}
.s-coins h2{color:var(--white)}
.chead2{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1240px,100%);flex-wrap:wrap}
.sort,.tabs{display:flex;gap:6px}
.sort button,.tabs button{--u:2px;font:700 16px/1 var(--px-font);text-transform:uppercase;color:var(--navy);min-height:44px;padding:0 6px;border:10px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 10px stretch;image-rendering:pixelated;background:none;cursor:pointer}
.sort button[aria-checked=true],.tabs button[aria-selected=true]{border-image:url(/assets/px/ui-btn-gold.png) 5 fill / 10px stretch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(297px,1fr));gap:28px 24px;width:min(1240px,100%)}
.card{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--navy)}
.card .tile{width:297px;height:177px;position:relative}
.card .tile canvas,.card .tile img{position:absolute;inset:0;width:297px;height:177px}
.card .b{width:297px;margin-top:-6px;border:12px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 12px stretch;image-rendering:pixelated;display:grid;grid-template-columns:64px 1fr;gap:4px 12px;padding:2px}
.card .b img{grid-row:1/4;width:64px;height:64px;object-fit:cover;outline:3px solid var(--navy);background:var(--cyan)}
.card .nm{font:700 17px/1.15 var(--px-font);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .t{display:flex;justify-content:space-between;gap:8px;font-size:14px;align-items:center}
.card .t b{font:600 16px/1 var(--rd);font-variant-numeric:tabular-nums}
.card .sym{font:600 14px/1 var(--rd);color:var(--w1)}
.card .si{display:inline-flex;align-items:center;gap:6px}
.card .si img{width:18px;height:18px;outline:0;background:none;object-fit:contain;image-rendering:pixelated}
.card:hover .b{transform:translateY(-2px)}
.card:hover .nm{color:var(--pink3)}
.st{font:500 13px/1 var(--px-font);text-transform:uppercase;letter-spacing:.06em;padding:4px 6px;background:var(--navy);color:var(--cyan);white-space:nowrap}
.st.regrowing{background:var(--pink);color:var(--navy)}.st.armed{background:var(--red);color:var(--white)}.st.resting{background:var(--rock2);color:var(--white)}
.inv{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:12px}
.inv img{width:297px;height:177px}
.inv .it{font:700 28px/1 var(--px-font);text-transform:uppercase}
.more{display:flex;justify-content:center}
.s-night{background:var(--navy);gap:30px;padding-bottom:110px}
.s-night .scene{outline-color:var(--deep)}
.last{position:absolute;z-index:2;left:0;right:0;top:calc(28*var(--px));text-align:center;font:700 40px/1.1 var(--px-font);text-transform:uppercase;color:var(--white);padding:0 16px;
  text-shadow:0 3px 0 var(--navy),3px 3px 0 var(--navy),3px 0 0 var(--navy)}
.gmenu{display:grid;grid-template-columns:repeat(3,auto);gap:4px 36px;align-items:center;justify-content:center;
  border:calc(6*var(--u)) solid transparent;border-image:url(/assets/px/ui-panel-dark.png) 6 fill / calc(6*var(--u)) stretch;image-rendering:pixelated;padding:10px 28px}
.gmenu > a,.gmenu > button:not(.ca){position:relative;font:700 24px/1 var(--px-font);text-transform:uppercase;color:var(--white);text-decoration:none;padding:12px 0 12px 26px;background:none;border:0;cursor:pointer;text-align:left}
.gmenu > a:hover,.gmenu > button:not(.ca):hover,.gmenu > a:focus-visible{color:var(--gold0)}
.gmenu > a:hover::before,.gmenu > button:not(.ca):hover::before,.gmenu > a:focus-visible::before,.gmenu > a:first-child::before{content:"";position:absolute;left:0;top:50%;width:12px;height:16px;margin-top:-8px;background:url(/assets/px/ui-cursor-right.png) 0 0/100% 100%;image-rendering:pixelated}
.gmenu .ca{grid-column:span 2}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--navy);border-top:3px solid var(--deep);padding:28px 16px 36px}
.foot-in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot nav a{font:500 16px/1 var(--px-font);text-transform:uppercase;color:var(--white);text-decoration:none;padding:8px 0}
.foot nav a:hover{color:var(--gold0)}
.foot .fine{flex-basis:100%;color:var(--rock);font-size:14px}
.foot .fine a{color:var(--cyan)}

/* ---------------------------------------------------------------- inner pages */
.band{position:relative;background:var(--w2) url(/assets/px/tank-front.png) 50% 100%/calc(384*var(--px)) calc(72*var(--px)) repeat-x;image-rendering:pixelated;
  padding:56px 16px calc(64*var(--px));display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.band h1{font-size:96px}
.band .lede{max-width:56ch;margin:0;text-align:center;font-size:20px}
.band .acts{justify-content:center}
.killer{max-width:28ch;font:500 34px/1.3 var(--rd);text-shadow:0 3px 0 var(--navy),3px 3px 0 var(--navy),3px 0 0 var(--navy)}
.killer .num{color:var(--gold0);font-weight:700}
.s-form,.s-tables,.s-docs,.s-coin{background:var(--deep)}
.s-tables > *,.s-docs > *{width:min(1240px,100%)}
.grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:24px;width:min(1240px,100%);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cmain,.cside,.lside{display:flex;flex-direction:column;gap:20px;min-width:0}
.fl{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.fl small{font-size:14px;line-height:1.45;opacity:.85}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:16px}.row2.eq{grid-template-columns:1fr 1fr}
input,select,textarea{font:500 18px/1.3 var(--rd);color:var(--navy);background:var(--white);border:3px solid var(--navy);box-shadow:inset 0 3px 0 var(--cyan);padding:10px 12px;border-radius:0;width:100%;min-height:48px}
textarea{min-height:96px;resize:vertical}
input[type=file]{padding:8px;font-size:15px}
input[type=range]{accent-color:var(--pink2);box-shadow:none;border:0;background:none;padding:0;min-height:30px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--gold);outline-offset:0}
.panel.dark input,.panel.dark select{background:var(--white)}
.namer h3{display:flex;gap:10px;align-items:center}
.kv{display:grid;grid-template-columns:1fr auto;gap:10px 18px;margin:0}
.kv dt{font-size:15px;opacity:.9}
.kv dd{margin:0;font:600 17px/1.3 var(--rd);font-variant-numeric:tabular-nums;text-align:right}
.panel.dark .kv dt{color:var(--cyan)}
.dots{padding-left:18px;margin:0;display:flex;flex-direction:column;gap:8px}
.why{margin:0 0 14px}
.acts2{display:flex;gap:10px;flex-wrap:wrap}
.tscroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:16px}
.t th{font:500 14px/1 var(--px-font);text-transform:uppercase;letter-spacing:.05em;color:var(--cyan);text-align:left;padding:10px 10px;border-bottom:3px solid var(--w1)}
.t td{padding:10px;border-bottom:2px solid var(--rock3);font-variant-numeric:tabular-nums;white-space:nowrap}
.t .r{text-align:right}
.t a{color:var(--gold0)}
.t .empty,.t td.empty{white-space:normal;color:var(--cyan)}
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:90px 1fr auto;gap:12px;padding:9px 0;border-bottom:2px solid var(--rock3);font-size:15px;align-items:baseline}
.log .when{color:var(--cyan);font-variant-numeric:tabular-nums}
.log b.num{color:var(--gold0)}
.grid3 .panel .big{color:var(--gold0)}
.vid{margin:0}
.vid video{width:100%;height:auto;background:var(--navy)}
.prose h3{margin-top:26px;color:var(--navy)}.prose h3:first-child{margin-top:0}
.prose p,.prose li{font-size:17px;line-height:1.6}
.prose p{margin:0 0 6px}
.prose ul{padding-left:20px}
.params{position:sticky;top:calc(var(--hud) + 16px)}
.lost{min-height:calc(100svh - var(--hud));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:48px 16px;background:var(--navy);text-align:center}
.lost img{width:calc(240*var(--px));height:calc(160*var(--px));max-width:100%;object-fit:cover}
.lost h1{font-size:48px}

/* coin page tank */
.ctank .stage{height:calc(100svh - var(--hud) - 40px);min-height:520px}
.chead{position:absolute;z-index:2;left:max(32px,6vw);top:7%;display:flex;gap:18px;align-items:flex-start;max-width:calc(100% - 64px)}
.chead .pic img{width:96px;height:96px;object-fit:cover;outline:4px solid var(--navy);background:var(--cyan)}
.chead h1{font-size:72px;word-break:break-word}
.chead .tk{display:flex;gap:12px;align-items:center;margin:12px 0 10px;flex-wrap:wrap}
.chead .sym{font:700 22px/1 var(--rd);color:var(--white);text-shadow:0 2px 0 var(--navy)}
.carow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.carow .lk{font:500 16px/1 var(--px-font);text-transform:uppercase;color:var(--white);text-shadow:0 2px 0 var(--navy)}
.fig{width:100%;height:auto;display:block;margin:6px 0 18px;background:var(--navy);outline:2px solid var(--rock3)}
.fig text{font-family:var(--rd)}

/* dialogs + toasts */
.dlg{border:0;padding:0;background:none;color:var(--navy);max-width:min(480px,calc(100vw - 24px));width:100%}
.dlg::backdrop{background:rgba(16,40,80,.8)}
.dlg-in{position:relative;border:18px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 18px stretch;image-rendering:pixelated;padding:8px 10px 10px;display:flex;flex-direction:column;gap:14px}
.dlg h3,.dlg h2{color:var(--navy);text-shadow:none;font-size:24px;margin:0;padding-right:40px}
.vdlg{max-width:min(1100px,calc(100vw - 24px))}
.vdlg .dlg-in{border-image-source:url(/assets/px/ui-panel-dark.png);padding-top:44px;color:var(--white)}
.vdlg video{width:100%;height:auto}
.wpick .dlg-in,.wpick{color:var(--navy)}
.wpick{border:18px solid transparent!important;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 18px stretch!important;padding:10px 12px 14px!important}
.wpick h2{font-size:26px!important;text-shadow:none;color:var(--navy);margin:0 0 14px!important}
.wp-list{display:flex;flex-direction:column;gap:8px}
.wp-item{display:flex;align-items:center;gap:12px;width:100%;font:600 17px/1 var(--rd);color:var(--navy);background:var(--white);border:3px solid var(--navy);padding:12px;cursor:pointer;text-align:left}
.wp-item:hover{background:var(--gold0)}
.wp-item img{width:28px;height:28px}
.wp-dot{width:10px;height:10px;background:var(--pink2)}
.wp-err{color:var(--red);font-size:14px}.wp-none,.wp-get{font-size:15px}
.tstack{position:fixed;z-index:80;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;border:12px solid transparent;border-image:url(/assets/px/ui-panel-light.png) 6 fill / 12px stretch;image-rendering:pixelated;color:var(--navy);padding:2px 4px;font-size:15px;flex-wrap:wrap}
.toast.err{border-image-source:url(/assets/px/ui-panel-dark.png);color:var(--white)}
.toast.err .tt::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);margin-right:8px}
.toast .tt{flex:1}
.toast a{font-size:14px;color:var(--w1)}.toast.err a{color:var(--cyan)}
.toast .tx{background:none;border:0;font:700 22px/1 var(--px-font);color:inherit;cursor:pointer;padding:0 4px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){.title h1{font-size:104px}}
@media (max-width:1023px){
  .title{width:min(560px,60vw)}.title h1{font-size:88px}.lede{font-size:19px}
  .resgrid{grid-template-columns:1fr;justify-items:center}.srcpanel{width:min(720px,100%)}
  .grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}
  .ruler{width:180px}
}
@media (max-width:760px){
  body{font-size:16px}
  .stage{height:813px;min-height:0}
  .title{left:16px;right:16px;width:auto;top:12px}
  .title h1{font-size:64px}
  .lede{font-size:16px;margin:12px 0 14px;max-width:none}
  .acts .btn{flex:1 1 auto;font-size:20px}
  .vlink{margin-top:10px;font-size:15px}
  .battle{position:relative;left:auto;bottom:auto;width:auto;margin:48px 8px 14px}
  .battle .tag{top:-40px}
  .bb-k .num{font-size:21px}
  .cells{gap:1px;padding:3px}.cells i{height:12px}.cells.lg i{height:20px}
  .ruler{width:150px}.rl{right:6px}.rl b{font-size:12px}.rl .num{font-size:13px}
  .ruler [data-rl=half] b{display:none}
  .screen{padding:48px 12px 60px;gap:18px}
  .screen h2,.burnread h2{font-size:40px}
  .sub{font-size:16px}
  .scene{width:100%}
  .hudrow{gap:10px 16px;padding:2px 2px}.hudrow > div{min-width:80px}.hudrow b.num{font-size:22px}
  .hudrow .btn{width:100%}
  .opens{right:8px;left:8px;width:auto;top:8px;gap:8px}
  .ot{font-size:18px}
  .restot .num{font-size:44px}
  .bignum{font-size:56px!important}
  .bsub{font-size:15px}
  .cards{grid-template-columns:1fr;justify-items:center}
  .last{font-size:24px;top:calc(18*var(--px))}
  .gmenu{grid-template-columns:1fr;padding:6px 14px;width:100%}
  .gmenu .ca{grid-column:auto}
  .gmenu > a,.gmenu > button:not(.ca){font-size:20px;padding:10px 0 10px 26px}
  .band{padding:40px 12px calc(80*var(--px))}.band h1{font-size:56px}.band .lede{font-size:16px}
  .killer{font-size:22px}
  .grid3{grid-template-columns:1fr}
  .row2,.row2.eq{grid-template-columns:1fr}
  .chead{left:16px;right:16px;top:12px;max-width:none;gap:12px}
  .chead .pic img{width:64px;height:64px}
  .chead h1{font-size:40px}
  .ctank .stage{height:740px}
  .log li{grid-template-columns:70px 1fr auto;font-size:14px}
  .t{font-size:14px}
  .lost h1{font-size:30px}
  .lost img{width:100%;height:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (min-width:761px) and (max-height:620px){
  .title{top:6%}.title h1{font-size:72px}.lede{font-size:17px;margin:10px 0 14px}.vlink{margin-top:4px}
  .battle{left:auto;right:24px;width:min(420px,44vw);bottom:12px}
}
.tag a{display:inline-block;padding:9px 0;margin:-9px 0}
.foot .fine a{display:inline-block;padding:8px 0}