:root{
  --wood:#2a1d15; --wood-2:#3a2a1e; --bark:#6b4a2f; --cream:#f3e6c8; --muted:#b9a88a;
  --gold:#f0b840; --leaf:#7fd06a; --ember:#d9534f; --sky:#9fc9e8; --live:#53fc18; --water:#245f84;
  --display:'Press Start 2P','Courier New',monospace; --body:'VT323','Courier New',monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:#1b4a68;color:var(--cream);font-family:var(--body);font-size:19px;line-height:1.2}
a{color:var(--gold)}
.box{background:var(--wood);border:2px solid var(--bark);box-shadow:3px 3px 0 rgba(10,30,40,.6)}
h1{margin:0;font:13px/1 var(--display);text-shadow:2px 2px 0 #12303f;letter-spacing:.5px}
h2{margin:0;font:11px/1.6 var(--display)}
.eyebrow{font:8px/1 var(--display);color:var(--gold);letter-spacing:1px;text-transform:uppercase}
.muted{color:var(--muted)}
.live{font:8px/1 var(--display);background:var(--live);color:#062a00;padding:5px 7px 4px;letter-spacing:1px}
.live::before{content:'';display:inline-block;width:6px;height:6px;background:#062a00;margin-right:6px;animation:blink 1.2s steps(2) infinite}
.live.off{background:var(--ember);color:#fff}
@keyframes blink{50%{opacity:0}}
.btn{font:8px/1 var(--display);padding:10px 10px 9px;border:2px solid var(--bark);cursor:pointer;background:var(--wood-2);color:var(--cream);box-shadow:2px 2px 0 rgba(10,30,40,.6);letter-spacing:.3px;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.15)} .btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(10,30,40,.6)}
.btn.go{background:#2f5a2a;border-color:#4b8a3f} .btn.gold{background:#6b4f12;border-color:#a87a1e;color:#ffe6a8} .btn.kick{background:#1f4a12;border-color:var(--live);color:#c9ffb3}
.btn[disabled]{opacity:.5;cursor:not-allowed}
input,select,textarea{font:20px var(--body);color:var(--cream);background:var(--wood-2);border:2px solid var(--bark);padding:6px 9px;width:100%;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
label.f{display:flex;flex-direction:column;gap:5px;color:var(--muted)} label.f>span{text-transform:uppercase;font-size:15px;letter-spacing:.5px}

/* game page */
body.game{overflow:hidden;user-select:none}
#game,#ov{position:fixed;inset:0;width:100vw;height:100dvh;display:block}
#game{image-rendering:pixelated;image-rendering:crisp-edges;cursor:grab} #game.dragging{cursor:grabbing} #game.pointing{cursor:pointer}
#ov{pointer-events:none;z-index:1}
.hud{position:fixed;z-index:2;pointer-events:none} .hud>*{pointer-events:auto}
#top{left:16px;top:14px;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 380px)}
.title{display:flex;align-items:center;gap:12px}
.bar{display:flex;gap:8px;flex-wrap:wrap}
.stat{padding:4px 10px 3px;display:flex;align-items:baseline;gap:8px}
.stat b{font:10px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums} .stat span{color:var(--muted)}
#pbox{padding:10px 12px;display:flex;flex-direction:column;gap:8px;width:300px}
#acts{display:flex;gap:6px;flex-wrap:wrap;min-height:34px;align-items:center;font-size:17px}
#card{padding:10px 12px;width:250px;display:none;flex-direction:column;gap:6px} #card.show{display:flex}
#card h2{display:flex;justify-content:space-between;align-items:center}
#card .row{display:flex;justify-content:space-between;color:var(--muted)} #card .row b{font-weight:normal;color:var(--cream)}
.x{background:none;border:2px solid var(--bark);color:var(--muted);font:9px var(--display);width:24px;height:24px;cursor:pointer;padding:0} .x:hover{color:var(--cream);border-color:var(--cream)}
#side{right:12px;top:12px;bottom:12px;width:min(340px,92vw);display:flex;flex-direction:column;gap:10px}
#cta{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
#cta .row{display:flex;gap:8px;flex-wrap:wrap}
#chat{flex:1;min-height:0;display:flex;flex-direction:column}
#chat .head{font:8px/1 var(--display);color:var(--muted);letter-spacing:1px;padding:8px 12px;border-bottom:2px solid var(--bark);display:flex;justify-content:space-between;gap:8px}
#chat .head span:last-child{color:var(--gold);text-transform:lowercase;letter-spacing:0;font:16px var(--body)}
#feed{flex:1;overflow-y:auto;padding:6px 10px;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;scrollbar-color:var(--bark) transparent}
.msg{font-size:18px;line-height:1.15;word-break:break-word} .msg b{font-weight:normal} .msg .cmd{color:var(--gold)} .msg .at{color:var(--sky)}
.msg .k{font:7px var(--display);background:var(--live);color:#062a00;padding:2px 4px 1px;vertical-align:middle;font-style:normal}
.msg.sys{background:rgba(240,184,64,.12);border-left:3px solid var(--gold);padding:3px 8px} .msg.sys.kick{border-color:var(--live);background:rgba(83,252,24,.1)}
#say{display:flex;border-top:2px solid var(--bark)} #say input{border:0;padding:7px 10px;min-width:0} #say input:focus{background:#463325}
#say button{font:8px var(--display);background:var(--gold);color:#3a2a0a;border:0;padding:0 12px;cursor:pointer}
#claimForm{display:flex;gap:6px;padding:8px 10px;border-top:2px solid var(--bark);align-items:center;font-size:16px;color:var(--muted)}
#claimForm input{width:96px;padding:3px 6px;font-size:17px;text-transform:uppercase} #claimForm button{font:7px var(--display);padding:8px}
#bl{left:16px;bottom:14px;display:flex;flex-direction:column;gap:8px}
#lb{padding:8px 12px;min-width:220px} #lb .eyebrow{margin-bottom:6px}
#lb .r{display:grid;grid-template-columns:16px 1fr auto;gap:8px;font-size:18px;line-height:1.25;cursor:pointer} #lb .r:hover b{color:var(--gold)}
#lb .r span{color:var(--muted)} #lb .r em{font-style:normal;color:var(--gold)} #lb .r b{font-weight:normal}
.hint{color:var(--muted);font-size:16px;max-width:36ch;padding:5px 10px}
#adbar{left:50%;bottom:14px;transform:translateX(-50%);padding:8px 14px;display:flex;align-items:center;gap:12px;max-width:min(560px,60vw);border-color:var(--live)}
#adbar .tag{font:7px var(--display);background:var(--live);color:#062a00;padding:4px 6px 3px;flex:none}
#adbar b{font:10px/1.4 var(--display);color:var(--cream)} #adbar span{color:var(--muted);font-size:16px}
#adbar a{color:var(--gold);font-size:16px;white-space:nowrap}
#tip{position:fixed;z-index:3;pointer-events:none;padding:5px 9px 4px;transform:translate(12px,-100%);display:none;white-space:nowrap}
#tip .n{font:9px/1.5 var(--display)} #tip .m{color:var(--muted);font-size:16px}
#toast{position:fixed;z-index:5;left:50%;top:70px;transform:translateX(-50%);border:2px solid var(--gold);font:10px/1.6 var(--display);padding:10px 16px;opacity:0;transition:opacity .15s;pointer-events:none;text-align:center;max-width:70vw} #toast.show{opacity:1}
@media (max-width:900px){#bl,#adbar,#top .hint{display:none} #top{max-width:calc(100vw - 32px)} #side{position:fixed;top:auto;height:45dvh}}

/* stream page (1920x1080) */
body.stream #side{width:360px;right:24px;top:24px;bottom:24px}
body.stream #top{left:24px;top:24px}
body.stream h1{font-size:18px} body.stream .stat b{font-size:13px} body.stream .stat span{font-size:22px}
body.stream .msg{font-size:24px} body.stream #chat .head{font-size:10px}
#ctabar{left:24px;right:408px;bottom:24px;padding:14px 20px;display:flex;align-items:center;gap:20px;border-color:var(--live)}
#ctabar .big{font:16px/1.4 var(--display);color:var(--cream)} #ctabar .url{font:14px/1.4 var(--display);color:var(--live)}
#ctabar .ad{margin-left:auto;text-align:right;color:var(--muted);font-size:22px} #ctabar .ad b{font:12px/1.5 var(--display);color:var(--gold);display:block}
body.stream #left{left:24px;top:120px;width:280px;display:flex;flex-direction:column;gap:12px}
body.stream #left .box{padding:12px 16px}
body.stream #left .eyebrow{font-size:10px;margin-bottom:8px}
body.stream #lb .r{font-size:22px;line-height:1.3;grid-template-columns:22px 1fr auto}
body.stream #arrRows{font-size:21px;line-height:1.3}
body.stream #howto ol{margin:0;padding-left:22px;font-size:21px;line-height:1.35;color:var(--cream)} body.stream #howto b{color:var(--live);font-weight:normal}
body.stream .cmds{margin-top:8px;font:9px/1.8 var(--display);color:var(--gold)}
#banner{position:fixed;z-index:4;left:calc(50% - 220px);top:16%;transform:translateX(-50%) scale(.6);font:24px/1.4 var(--display);color:#b9ff9a;text-align:center;text-shadow:3px 3px 0 #12303f,-1px -1px 0 #12303f,1px -1px 0 #12303f,-1px 1px 0 #12303f;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s steps(5);max-width:50vw;text-wrap:balance}
#banner.show{opacity:1;transform:translateX(-50%) scale(1)}

/* plain pages */
body.page{display:flex;flex-direction:column;align-items:center;padding:40px 16px 60px;gap:20px;background:var(--water) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='18'%3E%3Crect x='0' y='0' width='10' height='2' fill='%234f97bd'/%3E%3Crect x='24' y='6' width='6' height='2' fill='%233b7ea6'/%3E%3C/svg%3E")}
body.page main{width:min(560px,100%);display:flex;flex-direction:column;gap:16px}
body.page .box{padding:18px 20px}
body.page h1{font-size:15px;line-height:1.6} body.page p{margin:0;color:var(--muted);line-height:1.25}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tier{border:2px solid var(--bark);background:var(--wood-2);padding:12px 10px;cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.tier.on{border-color:var(--gold);background:#4a3618} .tier b{font:9px var(--display)} .tier em{font-style:normal;color:var(--gold);font:11px var(--display)} .tier small{color:var(--muted);font-size:15px}
.tier canvas{image-rendering:pixelated;width:96px;height:88px}
.err{color:#ff8a80;min-height:22px}
.nav{display:flex;gap:10px;align-items:center;justify-content:space-between;width:min(560px,100%)}
.code{font:22px/1 var(--display);color:var(--gold);letter-spacing:4px;background:var(--wood-2);padding:14px;text-align:center;border:2px dashed var(--bark)}