@font-face{font-family:Silkscreen;src:url(fonts/Silkscreen.ttf) format("truetype");font-display:block}
@font-face{font-family:"Press Start 2P";src:url(fonts/PressStart2P.ttf) format("truetype");font-display:swap}
:root{--navy:#121a36;--navy2:#1b2550;--navy3:#24305c;--gold:#d4a640;--goldl:#f2cc68;--goldd:#8f6a22;--cream:#f6e7b8;--ink:#0c1022;--red:#b3202c;--green:#2f8a52}
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--navy);font-family:Silkscreen,monospace;color:var(--cream);font-size:14px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
canvas#game{display:block;width:100vw;height:100vh;cursor:pointer}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}
.frame{background:var(--navy);border:4px solid var(--gold);box-shadow:0 0 0 4px var(--ink),inset 0 0 0 3px var(--goldd),0 18px 40px #0009}
#title{background:var(--ink);background-image:linear-gradient(45deg,#16204280 25%,transparent 25%,transparent 75%,#16204280 75%),linear-gradient(45deg,#16204280 25%,transparent 25%,transparent 75%,#16204280 75%);background-size:32px 32px;background-position:0 0,16px 16px}
.title-card{position:relative;background:var(--navy);border:4px solid var(--gold);box-shadow:0 0 0 4px var(--ink),inset 0 0 0 3px var(--goldd),0 18px 40px #000a;padding:22px 26px;text-align:center;width:min(760px,96vw);max-height:96vh;overflow:auto}
.title-card::before,.title-card::after{content:"";position:absolute;width:12px;height:12px;background:var(--goldl);top:-8px;left:-8px;box-shadow:calc(min(760px,96vw) - 8px) 0 var(--goldl)}
.logo{font-family:"Press Start 2P",monospace;font-size:40px;margin:4px 0 0;color:var(--goldl);text-shadow:4px 4px 0 var(--goldd),6px 6px 0 var(--ink);line-height:1.2;font-weight:normal}
.logo span{color:var(--cream)}.tag{margin:8px 0 4px;color:var(--gold);font-size:12px;letter-spacing:1px}
.tag::before,.tag::after{content:" \25C6 ";color:var(--goldl)}
#preview{display:block;margin:6px auto;background:var(--navy2);border:3px solid var(--goldd)}
.lbl{display:block;margin:10px 0 6px;font-size:13px;color:var(--goldl);text-transform:uppercase}
.lbl input{display:block;margin:6px auto 0;padding:8px 12px;border:3px solid var(--gold);background:var(--ink);color:var(--cream);font:inherit;font-size:16px;width:240px;text-align:center;outline:none}
.coats{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.coat{border:3px solid var(--goldd);padding:4px 2px 6px;background:var(--navy2);color:var(--cream);cursor:pointer;font:inherit;font-size:10px;text-transform:uppercase;line-height:1.2}
.coat .cimg{display:block}.coat canvas{display:block;margin:0 auto 2px}
.coat:hover{border-color:var(--gold)}.coat.sel{border-color:var(--goldl);background:var(--navy3);box-shadow:inset 0 0 0 2px var(--goldl)}
.row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.btn{border:3px solid var(--ink);padding:7px 12px;font:inherit;font-size:13px;background:var(--gold);color:var(--ink);cursor:pointer;box-shadow:inset -3px -3px 0 var(--goldd),inset 3px 3px 0 var(--goldl);text-transform:uppercase}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(2px)}
.btn.big{font-size:16px;padding:11px 20px}.btn.alt{background:var(--navy3);color:var(--goldl);border-color:var(--gold);box-shadow:inset -3px -3px 0 var(--navy),inset 3px 3px 0 #3a4880}
.btn.ghost{background:var(--navy);color:var(--cream);border-color:var(--goldd);box-shadow:none}.btn.green{background:var(--green);color:#fff;box-shadow:inset -3px -3px 0 #1d5e37,inset 3px 3px 0 #4cb072}.btn.red{background:var(--red);color:#fff;box-shadow:inset -3px -3px 0 #7a1520,inset 3px 3px 0 #d84a54}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.phantom{background:#ab9ff2;opacity:.85;box-shadow:inset -3px -3px 0 #7b6cd0}
.small{font-size:11px;color:#b9b08e;margin-top:12px}
#hud{position:fixed;top:10px;left:10px;right:10px;display:flex;gap:8px;align-items:center;z-index:5;pointer-events:none}
#hud>*{pointer-events:auto}.spacer{flex:1}
.chip{background:var(--navy);border:3px solid var(--gold);box-shadow:0 0 0 2px var(--ink);padding:6px 10px;display:flex;align-items:center;gap:6px;color:var(--cream);text-transform:uppercase}
.chip.who{color:var(--goldl)}.chip.inu{color:#a9c4ff}
.boneic{display:inline-block;width:18px;height:8px;background:var(--cream);position:relative;box-shadow:0 0 0 2px var(--ink)}
#prompt{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);border:3px solid var(--gold);box-shadow:0 0 0 3px var(--ink);color:var(--cream);padding:9px 16px;z-index:5;cursor:pointer;text-transform:uppercase}
#prompt kbd{background:var(--gold);color:var(--ink);padding:1px 7px;margin-right:8px;font:inherit}
#minimap-wrap{position:fixed;right:10px;bottom:10px;border:4px solid var(--gold);box-shadow:0 0 0 3px var(--ink);z-index:4;line-height:0}
#minimap{display:block;cursor:crosshair}
#toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:var(--navy);border:3px solid var(--gold);color:var(--cream);padding:7px 14px;animation:pop .2s steps(3);box-shadow:0 0 0 2px var(--ink)}.toast.good{border-color:#4cb072;color:#c9f2d4}.toast.bad{border-color:#d84a54;color:#ffd0d4}
@keyframes pop{from{transform:scale(.8);opacity:0}}
#panel{background:#0c102299}
.panel-card{position:relative;background:var(--navy);border:4px solid var(--gold);box-shadow:0 0 0 4px var(--ink),inset 0 0 0 3px var(--goldd),0 20px 50px #000a;padding:20px 22px;width:min(940px,95vw);max-height:92vh;overflow:auto}
.close{position:absolute;right:10px;top:10px;border:3px solid var(--gold);background:var(--navy3);color:var(--goldl);width:34px;height:34px;font:inherit;font-size:18px;cursor:pointer}
.panel-card h2{margin:0 0 6px;color:var(--goldl);font-weight:normal;font-size:22px;text-transform:uppercase;text-shadow:2px 2px 0 var(--ink)}.panel-card h3{color:var(--goldl);font-weight:normal}.sub{margin:0 0 12px;color:#cfc6a4;font-size:12px;line-height:1.5}
.panel-card b{color:var(--goldl);font-weight:normal}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.card{background:var(--navy2);padding:10px;text-align:center;border:3px solid var(--goldd);font-size:12px}
.card.on{border-color:var(--goldl);box-shadow:inset 0 0 0 2px var(--gold)}
.card canvas{display:block;margin:0 auto 4px;background:var(--navy3)}.card .price{color:var(--goldl);margin:4px 0}
.demo-banner{background:repeating-linear-gradient(45deg,var(--gold),var(--gold) 12px,var(--goldd) 12px,var(--goldd) 24px);border:3px solid var(--ink);padding:8px 12px;margin-bottom:12px;text-align:center;color:var(--ink);text-shadow:0 1px 0 var(--goldl)}
.cafe{display:grid;grid-template-columns:1fr 260px;gap:14px}
.orders{display:flex;gap:10px;min-height:150px;flex-wrap:wrap}
.order{background:var(--navy2);border:3px solid var(--goldd);padding:8px;width:150px;cursor:pointer;text-align:center;font-size:12px}
.order canvas{background:var(--navy3)}
.order:hover{border-color:#4cb072}.order .pat{height:6px;background:var(--ink);margin-top:6px;overflow:hidden}.order .pat i{display:block;height:100%;background:#4cb072}
.menu{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.menu button{background:var(--navy2);color:var(--cream);border:3px solid var(--goldd);padding:6px;cursor:pointer;font:inherit;font-size:11px;width:90px}
.menu button:hover{border-color:var(--goldl)}
.tray{background:var(--navy2);border:3px solid var(--goldd);padding:10px;min-height:80px}
.big-num{font-size:28px;color:#6fd394}
.launch{display:grid;grid-template-columns:260px 1fr;gap:14px}
.toklist{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto}
.tok{display:flex;align-items:center;gap:8px;background:var(--navy2);color:var(--cream);border:3px solid var(--goldd);padding:6px 8px;cursor:pointer;text-align:left;font:inherit;font-size:12px}
.tok.sel{border-color:var(--goldl)}.tok i{width:24px;height:24px;flex:none;border:2px solid var(--ink)}
.tok small{color:#b9b08e;display:block;font-size:10px}
.form input,.form select{padding:7px 9px;border:3px solid var(--goldd);background:var(--ink);color:var(--cream);font:inherit;width:100%;margin-bottom:6px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}.stats div{background:var(--navy2);border:2px solid var(--goldd);padding:6px;text-align:center;font-size:11px}.stats b{display:block;font-size:14px}
.bar{height:12px;background:var(--ink);border:2px solid var(--goldd);overflow:hidden}.bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--goldl) 0 8px,var(--gold) 8px 16px)}
.trades{font-size:11px;max-height:120px;overflow:auto}.trades .b{color:#6fd394}.trades .s{color:#ff8a92}
.tradebox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}.tradebox input{width:90px;padding:7px;border:3px solid var(--goldd);background:var(--ink);color:var(--cream);font:inherit}
details summary{cursor:pointer}
#buildbar{position:fixed;left:10px;right:10px;bottom:10px;background:var(--navy);border:4px solid var(--gold);box-shadow:0 0 0 3px var(--ink);padding:10px;z-index:5;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;font-size:12px}
#buildbar h3{margin:0 0 4px;font-size:14px;color:var(--goldl);font-weight:normal}#buildbar b{color:var(--goldl);font-weight:normal}.inv{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.inv button{background:var(--navy2);color:var(--cream);border:3px solid var(--goldd);padding:4px 6px;cursor:pointer;font:inherit;font-size:11px}
.inv button.sel{border-color:var(--goldl);background:var(--navy3)}
.bb-col{display:flex;flex-direction:column;gap:6px}
.up{display:flex;gap:4px;flex-wrap:wrap}.up button{font-size:10px;padding:4px 7px}
.wardrobe{display:grid;grid-template-columns:200px 1fr;gap:16px}
.mirror{background:var(--navy2);border:4px solid var(--gold);padding:12px;text-align:center}.mirror canvas{display:block;margin:0 auto;background:var(--navy3);border:3px solid var(--goldd)}.mname{color:var(--goldl);margin-top:8px;font-size:16px}
.slot{margin-bottom:10px}.slot>b{display:block;margin-bottom:4px}.slot-items{display:flex;gap:6px;flex-wrap:wrap}.slot-items .btn{font-size:11px;padding:5px 8px}
ul{line-height:1.7;font-size:12px}
@media(max-width:700px){.cafe,.launch,.wardrobe{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.coats{grid-template-columns:repeat(3,1fr)}}

/* Packs */
.tagchip{display:inline-block;padding:1px 5px;color:#fff6e0;border:2px solid var(--ink);font-size:11px;text-shadow:1px 1px 0 #0006}
.packlist{display:grid;gap:8px}.packrow{display:flex;align-items:center;gap:10px}
.packhead{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.members{display:grid;gap:6px;max-height:300px;overflow:auto}.member{display:flex;gap:8px;align-items:center;background:var(--navy2);border:2px solid var(--goldd);padding:4px 8px}
.board{display:grid;gap:6px;margin-top:10px;max-height:360px;overflow:auto}.post{background:var(--navy2);border-left:4px solid var(--gold);padding:6px 10px;font-size:13px}.post.sys{border-color:#7fb4ff;opacity:.85;font-style:italic}.post.mine{border-color:#3fa66a}
table.cup{width:100%;border-collapse:collapse;font-size:13px}table.cup td,table.cup th{padding:6px;border-bottom:2px solid var(--navy3);text-align:left}table.cup tr.mine{background:rgba(242,204,104,.15);outline:2px solid var(--gold)}

#emotes{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:6;background:var(--navy);border:3px solid var(--gold);padding:8px}
#photobar{display:none;position:fixed;top:10px;right:10px;z-index:7;gap:8px;align-items:center;background:var(--navy);border:3px solid var(--gold);padding:6px 10px;color:var(--goldl)}
body.photo #hud,body.photo #minimap-wrap,body.photo #prompt,body.photo #emotes,body.photo #toast{display:none!important}body.photo #photobar{display:flex}
.fashart{height:92px;image-rendering:pixelated;display:block;margin:0 auto}
.poolrules,.lbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:8px 0}.checkout{background:var(--navy);border:2px solid var(--goldd);padding:4px;margin:4px 0;font-size:11px}code{color:#a9c4ff}

/* ===== polish pass: 9-slice navy+gold frames, pixel icons, tweens, dialogue, fades, touch ===== */
html,body{-webkit-font-smoothing:none;font-smooth:never;overscroll-behavior:none;touch-action:none;position:fixed;inset:0;width:100%;height:100%}
canvas#game{width:100vw;height:100vh;height:100dvh;touch-action:none}
.chip,#prompt,.toast,#emotes,#photobar,#dialog,#minimap-wrap{border:12px solid transparent!important;border-image:url(assets/ui/frame.png) 8 fill / 12px / 0 round!important;background:transparent!important;box-shadow:none!important;image-rendering:pixelated}
.panel-card,.title-card,#buildbar{border:16px solid transparent!important;border-image:url(assets/ui/frame.png) 8 fill / 16px / 0 round!important;background:transparent!important;box-shadow:0 18px 40px #0008!important;image-rendering:pixelated}
.title-card::before,.title-card::after{display:none}
.chip{padding:0 4px;margin:0;font-size:12px;line-height:16px}.chip small{font-size:8px;color:#b9b08e;margin-left:2px}
.ic{display:inline-block;width:32px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated}.ic.bone{background-image:url(assets/ui/bone.png)}.ic.kib{background-image:url(assets/ui/kibble.png);width:28px;height:24px}
#hud{transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .3s;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}
#hud:not(.in){transform:translateY(-120%);opacity:0}
.btn{transition:transform .06s,filter .1s}.btn:active{transform:translateY(2px) scale(.97)}
#panel:not([hidden]){animation:dim .2s ease-out}#panel:not([hidden]) .panel-card{animation:panelIn .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes dim{from{background:#0c102200}}@keyframes panelIn{from{transform:translateY(24px) scale(.9);opacity:0}}
#buildbar:not([hidden]){animation:slideUp .3s cubic-bezier(.2,1.3,.4,1)}@keyframes slideUp{from{transform:translateY(110%)}}
.toast{animation:toastIn .3s cubic-bezier(.2,1.4,.4,1)!important;padding:2px 8px}@keyframes toastIn{from{transform:translateY(-14px) scale(.9);opacity:0}}
#prompt{padding:2px 8px;animation:bob 1.2s ease-in-out infinite;bottom:max(18px,env(safe-area-inset-bottom))}@keyframes bob{50%{transform:translateX(-50%) translateY(-3px)}}
#minimap-wrap{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));padding:0}
#minimap{image-rendering:pixelated;width:128px;height:140px}
#fade{position:fixed;inset:0;background:#0c1022;opacity:0;pointer-events:none;z-index:40}#fade.go{animation:fadeDip .42s ease-in-out}
@keyframes fadeDip{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
#dialog{position:fixed;left:50%;bottom:max(70px,calc(env(safe-area-inset-bottom) + 60px));transform:translateX(-50%);width:min(620px,92vw);min-height:86px;z-index:20;padding:4px 10px 6px;cursor:pointer;animation:dlgIn .22s cubic-bezier(.2,1.4,.4,1)}
#dialog.out{animation:dlgOut .18s ease-in forwards}@keyframes dlgIn{from{transform:translateX(-50%) translateY(20px) scale(.92);opacity:0}}@keyframes dlgOut{to{transform:translateX(-50%) translateY(14px);opacity:0}}
#dialog .dname{position:absolute;top:-30px;left:4px;padding:2px 10px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);font-size:12px;text-transform:uppercase}
#dialog .dtext{font-size:14px;line-height:22px;color:#fff6e0;text-shadow:2px 2px 0 var(--ink);min-height:44px}
#dialog .dnext{position:absolute;right:6px;bottom:2px;width:0;height:0;border:6px solid transparent;border-top:8px solid var(--goldl);display:none;animation:blink .6s steps(2) infinite}#dialog.done .dnext{display:block}@keyframes blink{50%{opacity:0}}
/* touch controls: shown on coarse pointers */
#touch{display:none}
@media (pointer:coarse){
 #touch{display:block;position:fixed;inset:0;pointer-events:none;z-index:8}
 #stick{position:absolute;left:max(18px,calc(env(safe-area-inset-left) + 12px));bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#24305c99 55%,#121a36cc 56%);border:4px solid var(--gold);box-shadow:0 0 0 3px var(--ink);pointer-events:auto;touch-action:none}
 #stick.on{border-color:var(--goldl)}
 #knob{position:absolute;left:34px;top:34px;width:44px;height:44px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);box-shadow:inset -4px -4px 0 var(--goldd),inset 3px 3px 0 var(--goldl);pointer-events:none}
 #tbtns{position:absolute;right:max(18px,calc(env(safe-area-inset-right) + 12px));bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));width:150px;height:130px;pointer-events:none}
 .tb{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;border:3px solid var(--ink);font:inherit;font-size:20px;color:var(--ink);box-shadow:inset -4px -4px 0 #0004,inset 3px 3px 0 #fff6;width:64px;height:64px}
 .tb.a{right:0;top:10px;background:var(--gold)}.tb.b{right:74px;top:52px;background:#c8323c;color:#fff6e0}.tb.m{right:84px;top:-34px;width:44px;height:44px;font-size:16px;background:var(--navy3);color:var(--goldl);border-color:var(--gold)}
 .tb:active{transform:scale(.92)}
 #prompt{bottom:auto;top:calc(max(8px,env(safe-area-inset-top)) + 54px);font-size:11px}
 #minimap-wrap{bottom:auto;top:calc(max(8px,env(safe-area-inset-top)) + 54px)}#minimap{width:84px;height:92px}
 #hud{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#hud::-webkit-scrollbar{display:none}
 #hud .btn{font-size:10px;padding:5px 8px;white-space:nowrap}#hud .chip{font-size:11px;white-space:nowrap}
 #hud #btn-phantom,#hud #btn-emote,#hud #btn-photo,#hud #btn-help,#hud #btn-mute{display:none}
 body.menu-open #hud #btn-emote,body.menu-open #hud #btn-photo,body.menu-open #hud #btn-help,body.menu-open #hud #btn-mute{display:inline-block}
 #emotes{bottom:auto;top:50%;transform:translate(-50%,-50%);flex-wrap:wrap;max-width:80vw;justify-content:center}
 #dialog{bottom:max(150px,calc(env(safe-area-inset-bottom) + 150px))}
}
/* panels & menus fit + scroll inside themselves, respecting safe areas */
#panel{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
.panel-card{max-height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.panel-card *{touch-action:pan-y}
.title-card{max-height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));touch-action:pan-y}
#buildbar{max-height:45dvh;overflow:auto;touch-action:pan-y;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
body.short .panel-card{padding:6px 10px;width:min(980px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
body.short .panel-card h2{font-size:16px}body.short .sub{font-size:10px;margin-bottom:6px}body.short .close{width:30px;height:30px;top:2px;right:2px}
body.short .toklist,body.short .board,body.short .members{max-height:none}
body.short .title-card{padding:4px 12px}body.short .logo{font-size:24px}body.short #preview{height:110px;width:auto}
body.short.landscape .title-card{width:min(900px,96vw)}
body.short.landscape .cafe,body.short.landscape .launch{grid-template-columns:1fr 1fr}body.short.landscape .wardrobe{grid-template-columns:150px 1fr}
body.short #buildbar{max-height:42dvh;font-size:10px;padding:2px}
@media (pointer:coarse){body.short #buildbar{left:calc(max(8px,env(safe-area-inset-left)) + 140px);right:calc(max(8px,env(safe-area-inset-right)) + 160px)}}
body.short.landscape .title-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:14px;align-items:center;padding:2px 10px}
body.short.landscape .title-card>.logo{grid-column:1;grid-row:1}body.short.landscape .title-card>.tag{grid-column:1;grid-row:2;font-size:8px}
body.short.landscape .title-card>#preview{grid-column:1;grid-row:3/span 4;max-width:100%}
body.short.landscape .title-card>*:not(.logo):not(.tag):not(#preview){grid-column:2}
body.short .lbl{margin:4px 0 3px;font-size:10px}body.short .lbl input{padding:4px 8px;font-size:13px}
body.short .coat{font-size:8px;padding:2px}body.short .coat canvas{height:44px;width:auto}
body.short .row{margin-top:6px}body.short .btn.big{font-size:13px;padding:7px 14px}body.short .title-card .small{margin-top:4px;font-size:8px}

/* touch HUD: essentials only, everything else inside the menu sheet */
@media (pointer:coarse){
 #hud{flex-wrap:wrap;overflow:visible;gap:4px;align-items:flex-start}
 #hud .btn,#hud .chip.who,#hud .spacer{display:none!important}
 body.menu-open #hud{background:#0c1022e6;padding:8px;border:3px solid var(--gold);z-index:12}
 body.menu-open #hud .btn{display:inline-block!important;font-size:11px;padding:8px 10px;min-height:40px}
 body.menu-open #hud .spacer{display:block!important;flex-basis:100%;height:0}
 #hud .chip{font-size:10px;padding:0 2px}.ic{width:24px;height:16px}.ic.kib{width:20px;height:18px}
 .tb.a.ready{border-color:var(--goldl);animation:pulse 1s ease-in-out infinite}.tb.a span{font-size:9px;line-height:1;display:block;word-break:break-all}
 @keyframes pulse{50%{box-shadow:inset -4px -4px 0 #0004,inset 3px 3px 0 #fff6,0 0 0 4px #f2cc6880}}
 #prompt kbd.ta{border-radius:50%;padding:1px 6px}
 #btn-menu{z-index:13}
}
@media (pointer:coarse) and (orientation:portrait){
 #minimap-wrap{top:calc(max(8px,env(safe-area-inset-top)) + 46px);right:max(8px,env(safe-area-inset-right))}#minimap{width:72px;height:79px}
 #prompt{top:calc(max(8px,env(safe-area-inset-top)) + 46px);left:12px;transform:none;max-width:calc(100vw - 110px);animation:none}
 #stick{width:110px;height:110px}#knob{left:29px;top:29px}
}
/* character creator */
.creator{text-align:left;margin:6px 0}.ctabs{display:flex;gap:6px;margin-bottom:6px}.ctab{flex:1;font:inherit;font-size:11px;text-transform:uppercase;padding:6px;background:var(--navy2);color:var(--cream);border:3px solid var(--goldd);cursor:pointer}.ctab.sel{border-color:var(--goldl);background:var(--navy3)}
.crow{display:flex;gap:8px;align-items:flex-start;margin:4px 0}.clbl{width:110px;flex:none;font-size:10px;text-transform:uppercase;color:var(--goldl);padding-top:6px}.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip-o{font:inherit;font-size:10px;padding:5px 7px;background:var(--navy2);color:var(--cream);border:2px solid var(--goldd);cursor:pointer;text-align:left;line-height:1.2}.chip-o small{display:block;font-size:8px;opacity:.75;margin-top:2px}.chip-o.sel{border-color:var(--goldl);box-shadow:inset 0 0 0 2px var(--goldl);background:var(--navy3)}
.chip-o.sw{width:26px;height:26px;padding:0}.chip-o.sw.sel{box-shadow:0 0 0 2px var(--goldl);border-color:#fff}
@media(max-width:700px){.crow{flex-direction:column;gap:2px}.clbl{width:auto;padding-top:0}.chip-o{padding:7px 8px}.chip-o.sw{width:32px;height:32px}}
#title:not([hidden]) ~ #zoomctl{display:none!important}
.chip.pools{cursor:pointer;font:inherit;color:var(--cream);white-space:nowrap;font-size:9px}.grid.pools{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.grid.pools .card{text-align:left}#panel .card>b,#panel .card>small{display:block;margin:2px 0}.lb{margin:4px 0;padding:0;font-size:10px;list-style:none;text-align:left}.lb li.me{color:var(--goldl)}
/* Inu Arcade full-screen overlay */
#arcade-ov { position: fixed; inset: 0; z-index: 9000; background: #0a0618; display: flex; flex-direction: column; }
#arcade-ov[hidden] { display: none; }
#arcade-ov .arc-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #1c1638; border-bottom: 2px solid #ff4fd8; box-shadow: 0 0 12px #ff4fd8; }
#arcade-ov .arc-bar b { flex: 1; text-align: center; color: #3af0ff; text-shadow: 0 0 6px #3af0ff; letter-spacing: 2px; }
#arcade-ov iframe { flex: 1; width: 100%; border: 0; background: #000; }

/* ---- onboarding tour + wayfinding ---- */
#wayctl{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:calc(max(8px,env(safe-area-inset-bottom)) + 168px);z-index:6;display:flex;gap:4px}
#wayctl .btn{font-size:10px;padding:5px 8px}
#wayctl[hidden],body:not(.inworld) #wayctl{display:none}
#tour{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));width:min(560px,calc(100vw - 24px));z-index:20;display:flex;gap:10px;align-items:flex-start;background:var(--navy);border:3px solid var(--gold);box-shadow:0 0 0 3px var(--ink);padding:8px 10px;color:var(--cream);animation:toastIn .3s cubic-bezier(.2,1.4,.4,1)}
#tour[hidden]{display:none}
#tour-npc{width:64px;height:64px;image-rendering:pixelated;flex:none;background:#24305c;border:2px solid var(--ink)}
#tour .tbody{flex:1;min-width:0}#tour .tname{font-size:9px;color:var(--goldl);text-transform:uppercase}#tour .ttitle{display:block;font-size:14px;color:#fff6e0;margin:1px 0 3px}
#tour .ttext{font-size:11px;line-height:16px}#tour .trow{display:flex;gap:6px;align-items:center;margin-top:6px}#tour .tsp{flex:1}#tour .tstep{font-size:10px;color:var(--goldl)}
#tour .btn{font-size:11px;padding:5px 10px}
#guidechip{position:fixed;left:50%;transform:translateX(-50%);top:calc(max(8px,env(safe-area-inset-top)) + 52px);z-index:6;display:flex;gap:6px;align-items:center;background:var(--navy);border:3px solid #4cb072;box-shadow:0 0 0 3px var(--ink);padding:4px 8px;color:#c9f2d4;font-size:11px;max-width:calc(100vw - 260px)}
#guidechip[hidden]{display:none}#guidechip .gname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff6e0}#guidechip .btn{font-size:10px;padding:4px 8px}
body.touring #prompt{display:none!important}
#places,#mapfull{z-index:25}#places[hidden],#mapfull[hidden]{display:none}
.places-card{width:min(720px,calc(100vw - 24px))}
#pl-q{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px 10px;margin:4px 0 6px;background:#fff6e0;border:3px solid var(--ink)}
#pl-list h3{margin:8px 0 4px;font-size:12px;color:var(--goldl)}.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:5px}
.pl-item{display:flex;justify-content:space-between;gap:6px;align-items:center;text-align:left;font:inherit;font-size:11px;padding:7px 8px;background:#24305c;color:#fff6e0;border:2px solid var(--ink);cursor:pointer;min-height:36px}
.pl-item:hover,.pl-item:focus{border-color:var(--gold)}.pl-item small{color:var(--goldl);white-space:nowrap}
#mapfull{display:flex;align-items:center;justify-content:center;background:#0c1022d9;position:fixed;inset:0}
.map-card{background:var(--navy);border:3px solid var(--gold);box-shadow:0 0 0 3px var(--ink);padding:6px;max-height:calc(100dvh - 12px);overflow:auto;position:relative}
.map-bar{display:flex;gap:8px;align-items:center;color:#fff6e0;font-size:12px;padding-right:34px;margin-bottom:4px}.map-bar small{color:var(--goldl);font-size:10px}
#mapcv{display:block;image-rendering:pixelated;cursor:crosshair;touch-action:manipulation}
.map-legend{font-size:10px;color:#fff6e0;margin-top:4px;display:flex;gap:6px;align-items:center}.map-legend i{display:inline-block;width:9px;height:9px;border:1px solid #141a2e}.map-legend .you{background:#ff3a3a;border-radius:50%}.map-legend .pin{background:#fff6e0}.map-legend .dest{border:2px solid #4cf08a;border-radius:50%}
@media (pointer:coarse){
 #wayctl{bottom:auto;top:calc(max(8px,env(safe-area-inset-top)) + 54px + 100px);right:calc(max(8px,env(safe-area-inset-right)) + 250px)}
 #tour{left:calc(max(8px,env(safe-area-inset-left)) + 150px);right:calc(max(8px,env(safe-area-inset-right)) + 172px);width:auto;transform:none;bottom:max(8px,env(safe-area-inset-bottom));padding:5px 6px;gap:6px}
 #tour-npc{width:44px;height:44px}#tour .ttext{font-size:10px;line-height:13px}#tour .ttitle{font-size:12px}#tour .btn{font-size:10px;padding:6px 8px;min-height:32px}
 #guidechip{top:auto;bottom:max(8px,env(safe-area-inset-bottom));left:calc(max(8px,env(safe-area-inset-left)) + 150px);right:calc(max(8px,env(safe-area-inset-right)) + 172px);transform:none;max-width:none;flex-wrap:wrap}
}
@media (pointer:coarse) and (orientation:portrait){#tour{left:8px;right:8px;bottom:auto;top:calc(max(8px,env(safe-area-inset-top)) + 54px)}}

#tour.hl{border-color:#ffd84a;box-shadow:0 0 0 3px var(--ink),0 0 18px 4px #ffd84a88}#tour.hl .ttitle{color:#ffd84a;font-size:16px}
#tour.feat{border-color:#4cf08a}#tour.feat .ttitle{color:#9ff0c0}
.pl-item.feat{background:#3a3010;border-color:var(--gold)}.pl-item.feat b{color:#ffd84a}
.bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.bank .card small{display:block;word-break:break-all}.bank .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
/* ---- decluttered HUD + single menu drawer (src/hudmenu.js) ---- */
#wayctl.emptied,#tbtns #btn-menu{display:none!important}
#hud .btn,#hud .spacer,#hud .chip.who,#hud .chip.inu{display:none!important}
#hud{right:auto!important;overflow:visible!important;flex-wrap:nowrap!important}
#menu-btn{position:fixed;z-index:20;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));min-width:48px;min-height:48px;font-size:22px;padding:0;line-height:1}
body:not(.inworld) #menu-btn,body.photo #menu-btn{display:none}
#minimap-wrap{display:none!important}body.mm-on.inworld #minimap-wrap:not([hidden]){display:block!important}
body.mm-on #minimap-wrap{top:calc(max(8px,env(safe-area-inset-top)) + 58px)!important;bottom:auto!important}
#drawer{position:fixed;inset:0;z-index:40;background:#0008;display:flex;justify-content:flex-end}
#drawer[hidden]{display:none}
#drawer .dr-card{width:min(360px,92vw);height:100%;overflow-y:auto;background:#121a36f2;border-left:4px solid var(--gold);padding:10px 12px calc(12px + env(safe-area-inset-bottom));padding-right:max(12px,env(safe-area-inset-right));box-sizing:border-box;animation:drIn .18s ease-out}
@media (prefers-reduced-motion: reduce){#drawer .dr-card{animation:none}}
@keyframes drIn{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
#drawer .dr-head{display:flex;align-items:center;gap:8px;color:var(--goldl);margin-bottom:6px}#drawer .dr-head b{flex:1}
#drawer .dr-head .chip{font-size:10px}#dr-close{min-width:44px;min-height:44px;font-size:20px}
#drawer h4{margin:8px 0 4px;color:var(--goldl);font-size:11px;letter-spacing:1px}
#drawer .dr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
#drawer .dr-grid>*{display:flex!important;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:11px!important;padding:6px!important;box-sizing:border-box;position:static!important;white-space:nowrap}
#drawer .dr-zoom{grid-column:1/-1;flex-direction:row!important;gap:8px}#drawer .dr-zoom .btn{min-width:56px;min-height:44px;font-size:18px}
#drawer .dr-zoom small{font:10px Silkscreen,monospace;color:var(--goldl)}
@media (pointer:coarse){ body:not(.driving) #btn-b{display:none} }
.tour-target{outline:3px solid var(--goldl);outline-offset:3px;animation:tourPulse 1s ease-in-out infinite}
@keyframes tourPulse{50%{outline-color:#fff}}@media (prefers-reduced-motion: reduce){.tour-target{animation:none}}
#drawer #btn-pools{grid-column:span 2;font-size:9px!important;gap:4px}#drawer #btn-pools::before{content:'Prize pools';margin-right:4px;color:var(--goldl)}
#enter-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#0c1022cc}#enter-ov[hidden]{display:none}
#enter-ov .enter-card{display:flex;flex-direction:column;gap:8px;align-items:center;padding:16px 22px;background:#121a36;border:4px solid var(--gold);color:var(--goldl);font-size:14px}
#enter-ov small{color:#c8c0a8;font-size:10px}#enter-ov .btn{min-height:44px}