/* GrowBlocks city UI, on the key-art system of the plaza (gb-keyart.css over UI v3): midnight glass with a faint cube
   lattice and a neon rim, chunky toy-block buttons with a gloss cap and a pressed edge, lime is the one hero (PLAY),
   painted icons from assets/ui-keyart/icons, Lilita One for display and Nunito for text. Same tokens as UI v3. */
@font-face{font-family:'Lilita One';src:url(fonts/LilitaOne.ttf) format('truetype');font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/Nunito.ttf) format('truetype');font-weight:200 1000;font-display:swap}
:root{
 --lime:#BAFF38;--cyan:#35C6EA;--pink:#FF68BC;--gold:#FFE369;--red:#FF4D6D;--violet:#6D52E8;--slate:#34488F;
 --deep:#0F1A45;--edge:#0A1233;--slab:#1C2B62;--slab2:#233673;--line:#3A54A8;--text:#EEF3FF;--muted:#B4C2E8;--dim:#8494C4;
 --display:'Lilita One',system-ui,sans-serif;--ui:Nunito,system-ui,sans-serif;--spring:cubic-bezier(.3,1.6,.5,1);
 --rim:var(--cyan);
 --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M14 1 27 8.5v15L14 31 1 23.5v-15zM14 16 1 8.5M14 16l13-7.5M14 16v15' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
 --glass-bg:linear-gradient(180deg,color-mix(in oklab,var(--slab2) 88%,transparent),color-mix(in oklab,var(--deep) 92%,transparent));
 --ring:0 0 0 1.5px color-mix(in oklab,var(--rim) 75%,transparent),0 0 16px color-mix(in oklab,var(--rim) 30%,transparent);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--deep);font-family:var(--ui);color:var(--text);user-select:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font:inherit;cursor:pointer}
h2{font-family:var(--display);font-weight:400;margin:0;letter-spacing:.02em}
[hidden]{display:none!important}

/* ---- the system: glass panels, toy-block buttons, icon buttons ---- */
.glass{background:var(--lattice),var(--glass-bg);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
 box-shadow:var(--ring),inset 0 1.5px 0 rgba(255,255,255,.18),inset 0 -10px 18px rgba(0,0,0,.18),0 10px 26px rgba(3,6,25,.45);border-radius:20px}
.tb{--c:var(--slab2);--ink:#fff;--d:color-mix(in oklab,var(--c) 55%,#000);position:relative;border:0;border-radius:16px;padding:10px 16px;
 font:400 17px/1 var(--display);letter-spacing:.03em;color:var(--ink);
 background:linear-gradient(180deg,color-mix(in oklab,var(--c) 70%,#fff) 0 18%,var(--c) 52%,color-mix(in oklab,var(--c) 86%,#000));
 box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.18),0 5px 0 var(--d),0 9px 16px rgba(3,6,25,.35);
 text-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .12s var(--spring),box-shadow .12s}
.tb:hover:not(:disabled){transform:translateY(-2px)}
.tb:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 var(--d)}
.tb:disabled{filter:grayscale(.6) brightness(.8);cursor:not-allowed}
.tb.hero{--c:var(--lime);--ink:#15330F;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.tb.gold{--c:var(--gold);--ink:#3A2B00;text-shadow:none}
.tb.pink{--c:var(--pink)}
.tb.danger{--c:var(--red)}
.tb.big{font-size:26px;padding:16px 20px;border-radius:20px}
.ib{display:grid;place-items:center;gap:2px;width:56px;height:60px;border:0;border-radius:16px;padding:6px 0 4px;color:#fff;
 background:var(--lattice),var(--glass-bg);box-shadow:var(--ring),inset 0 1.5px 0 rgba(255,255,255,.2),0 5px 0 var(--edge);transition:transform .12s var(--spring)}
.ib img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.ib em{font:900 9px/1 var(--ui);font-style:normal;letter-spacing:.08em;color:var(--muted)}
.ib:hover{transform:translateY(-3px) scale(1.04)}
.x{width:38px;height:38px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font-size:18px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.15)}
.x:hover{background:rgba(255,77,109,.35)}

/* ---- start ---- */
#vt-start{position:fixed;inset:0;display:flex;align-items:center;padding:4vh 6vw;background:linear-gradient(90deg,rgba(11,18,56,.9) 0%,rgba(11,18,56,.55) 40%,transparent 62%)}
.card{width:min(440px,100%);display:flex;flex-direction:column;gap:14px;padding:22px}
.brand{display:flex;align-items:center;gap:12px}.brand .emblem{width:58px;height:58px;filter:drop-shadow(0 5px 0 rgba(0,0,0,.3))}.brand .word{width:100%;max-width:390px;height:auto;filter:drop-shadow(0 6px 10px rgba(3,6,25,.5))}
.lead{margin:0;font-size:17px;font-weight:800;line-height:1.4;color:var(--muted)}.lead b{color:var(--gold);font-weight:900}
.field{display:flex;flex-direction:column;gap:6px;font:900 12px var(--ui);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.field input,.mapbar input{background:rgba(5,10,35,.55);border:0;border-radius:14px;padding:12px 14px;font:800 17px var(--ui);color:#fff;outline:none;min-width:0;box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 1.5px var(--line)}
.field input:focus{box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 2px var(--lime)}
.row{display:flex;gap:8px}.row input{flex:1}.row .tb{font-size:15px;padding:0 12px}
.bodies label{flex:1}.bodies input{display:none}
.bodies span{display:block;text-align:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.08);font:400 17px var(--display);letter-spacing:.05em;color:var(--muted);box-shadow:0 0 0 1.5px var(--line)}
.bodies input:checked+span{background:var(--lime);color:#15330F;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #3F7A1F}
#pickInfo{font:800 13px var(--ui);color:var(--cyan);text-transform:none;letter-spacing:0;min-height:1em}
#vt-loading{color:var(--dim);font-weight:800}.test{margin:0;font-size:11px;color:var(--dim);font-weight:800}

/* ---- HUD ---- */
#me{position:fixed;left:16px;top:16px;padding:12px 16px;min-width:250px}
#me .top{display:flex;align-items:center;gap:8px;justify-content:space-between}
#meName{font:400 22px var(--display);text-shadow:0 2px 0 rgba(0,0,0,.35)}
#meRank{font:400 13px var(--display);padding:4px 10px;border-radius:999px;background:var(--slate);letter-spacing:.08em;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.25)}
#meRank[data-rank=Resident]{background:var(--cyan);color:#06263a}#meRank[data-rank=Citizen]{background:var(--lime);color:#15330F}#meRank[data-rank=Officer]{background:var(--violet);box-shadow:0 0 12px var(--violet)}
#meHome{font:900 13px var(--ui);color:var(--gold);margin:5px 0}
#me .stats{display:flex;gap:12px;font:800 13px var(--ui);color:var(--muted)}#me .stats span{display:flex;align-items:center;gap:4px}#me .stats img{width:20px;height:20px}#me .stats b{color:#fff}
#meNext{font:800 12px var(--ui);color:var(--cyan);margin-top:6px;max-width:270px}
#wanted{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:rgba(40,8,24,.88);border-radius:16px;padding:6px 16px;font:400 26px var(--display);display:flex;gap:6px;align-items:center;box-shadow:0 0 0 2px var(--red),0 0 24px rgba(255,77,109,.55)}
#wanted b{font-weight:400;color:var(--red);margin-right:8px;font-size:22px}#wanted i{font-style:normal;color:var(--gold);text-shadow:0 0 10px var(--gold)}#wanted span{color:rgba(255,255,255,.25)}
#wanted.pulse{animation:pulse .5s 3}@keyframes pulse{50%{transform:translateX(-50%) scale(1.18)}}
#corner{position:fixed;right:16px;top:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#clock{font:400 19px var(--display);padding:6px 14px;border-radius:14px}
#vt-fps{font:800 10px var(--ui);color:var(--dim)}
#minimap{width:150px;height:150px;border-radius:50%;background:#86d86a;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--rim),0 8px 0 var(--edge),0 12px 24px rgba(3,6,25,.45)}
#actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
#crosshair{position:fixed;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none}
#crosshair::before,#crosshair::after{content:'';position:absolute;background:#fff;box-shadow:0 0 0 1.5px rgba(15,26,69,.7);border-radius:2px}
#crosshair::before{left:8px;top:0;width:2px;height:18px}#crosshair::after{top:8px;left:0;height:2px;width:18px}
#aimInfo{position:fixed;left:50%;top:calc(50% + 22px);transform:translateX(-50%);font:900 13px var(--ui);background:rgba(15,26,69,.7);padding:4px 11px;border-radius:10px;white-space:nowrap;pointer-events:none;box-shadow:0 0 0 1.5px var(--line)}
#aimInfo:empty{display:none}#aimInfo.crime{background:rgba(160,20,50,.88);box-shadow:0 0 0 1.5px var(--red)}#aimInfo.prot{background:rgba(52,72,143,.85)}
#toasts{position:fixed;left:16px;bottom:130px;display:flex;flex-direction:column;gap:7px;max-width:min(460px,60vw);pointer-events:none}
.toast{--rim:var(--cyan);background:var(--lattice),var(--glass-bg);padding:10px 14px;border-radius:14px;font:800 14px var(--ui);box-shadow:var(--ring),0 6px 14px rgba(3,6,25,.4);animation:tin .25s var(--spring);transition:opacity .5s,transform .5s}
.toast.warn{--rim:var(--gold)}.toast.alarm{--rim:var(--red);background:var(--lattice),linear-gradient(180deg,rgba(110,18,46,.92),rgba(60,8,28,.92))}.toast.good{--rim:var(--lime)}
.toast.out{opacity:0;transform:translateX(-20px)}@keyframes tin{from{opacity:0;transform:translateX(-20px)}}
#bottom{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px}
#slotName{font:400 18px var(--display);text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.4)}
#hotbar{display:flex;gap:7px;padding:8px;border-radius:20px}
.slot{position:relative;width:54px;height:54px;border-radius:14px;border:0;padding:0;display:grid;place-items:center;
 background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18),0 3px 0 var(--edge);transition:transform .12s var(--spring)}
.slot.on{transform:translateY(-6px);background:linear-gradient(180deg,rgba(186,255,56,.35),rgba(186,255,56,.1));box-shadow:0 0 0 2.5px var(--lime),0 0 16px rgba(186,255,56,.45),0 4px 0 #3F7A1F}
.slot em{position:absolute;left:5px;top:2px;font:900 11px var(--ui);font-style:normal;color:#fff;text-shadow:0 1px 0 #000}
.sw{display:block;width:32px;height:32px;border-radius:9px;background:linear-gradient(var(--t) 0 30%,var(--c) 30%);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.4),0 2px 0 rgba(0,0,0,.3)}
.sw.glow{box-shadow:0 0 12px var(--c),inset 0 3px 0 rgba(255,255,255,.5)}
.icon{font-size:28px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}.icon.big{font-size:40px}
.keys{font:800 11px var(--ui);color:var(--muted);text-shadow:0 1px 2px rgba(0,0,0,.9)}.keys b{background:rgba(15,26,69,.75);color:#fff;padding:2px 6px;border-radius:6px;margin-left:6px;box-shadow:0 0 0 1px var(--line)}
body.vt-trading #clickHint{display:none!important}   /* the TRADE terminal zoomed onto the screen: no CLICK TO PLAY over it */
#clickHint{position:fixed;left:50%;top:58%;transform:translateX(-50%);font:400 24px var(--display);background:var(--lime);color:#15330F;padding:10px 20px;border-radius:16px;pointer-events:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 #3F7A1F,0 0 24px rgba(186,255,56,.4)}

/* ---- turbo pack fuel ---- */
#fuel{position:fixed;left:50%;top:calc(50% + 46px);transform:translateX(-50%);width:150px;height:14px;border-radius:9px;background:rgba(15,26,69,.75);box-shadow:inset 0 0 0 2px var(--line,#3A54A8);overflow:hidden;pointer-events:none}
#fuel i{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,var(--gold),#ff9a3a);border-radius:9px;transition:width .1s linear}
#fuel b{position:relative;display:block;text-align:center;font:900 9px/14px var(--ui);letter-spacing:.14em;color:#1b1240}
/* ---- door card ---- */
#doorCard{position:fixed;left:50%;bottom:156px;transform:translateX(-50%);width:min(440px,90vw);padding:16px 20px;text-align:center;--rim:var(--c1);animation:pop .3s var(--spring)}
@keyframes pop{from{opacity:0;transform:translateX(-50%) scale(.9)}}
#doorCard small{display:block;font:900 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
#doorCard b{display:block;font:400 34px var(--display);color:var(--c1);text-shadow:0 3px 0 rgba(0,0,0,.4)}
#doorCard p{margin:6px 0 14px;font:800 15px var(--ui)}
#doorPlay{font-size:22px;padding:12px 30px}
#doorCard .drow{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.tb.vote{font-size:18px;padding:10px 14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 3px var(--vc)}
.tb.vote.heart{--vc:var(--pink);--c:var(--pink)}.tb.vote.up{--vc:var(--cyan);--c:var(--cyan)}
.tb.vote.on{background:var(--vc);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 color-mix(in oklab,var(--vc) 55%,#000)}
.tb.vote kbd{font:900 11px var(--ui);opacity:.7;margin-left:2px}

/* ---- busted + jail ---- */
#busted{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;background:radial-gradient(transparent 30%,rgba(255,30,60,.4));animation:flash .4s 3 alternate}
#busted span{font:400 clamp(70px,14vw,170px) var(--display);color:#fff;text-shadow:0 8px 0 var(--red),0 0 40px var(--red);transform:rotate(-6deg)}
@keyframes flash{to{background:radial-gradient(transparent 30%,rgba(53,198,234,.4))}}
#jail{position:fixed;inset:0;pointer-events:none}
#jail .bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9vw,rgba(10,18,51,.5) 9vw calc(9vw + 16px))}
.jcard{position:absolute;right:16px;top:50%;transform:translateY(-50%);padding:16px 20px;pointer-events:auto;width:290px;--rim:var(--red)}
.jcard p{margin:8px 0;font-weight:800}.jcard b{font:400 34px var(--display);color:var(--gold);display:block}.jcard .small{font-size:12px;color:var(--muted)}
.jcard b.k{display:inline;font:900 13px var(--ui);background:rgba(255,255,255,.18);padding:1px 6px;border-radius:5px;color:#fff}
#bail{width:100%;font-size:18px}

/* ---- panels ---- */
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;border-radius:26px;animation:panel .28s var(--spring)}
@keyframes panel{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}}
.phead{display:flex;align-items:center;gap:10px;margin-bottom:14px}.phead img{width:38px;height:38px}.phead h2{font-size:26px;color:var(--lime);text-shadow:0 3px 0 rgba(0,0,0,.35)}.phead small{color:var(--dim);font-weight:800}
.phead .x{margin-left:auto}
#palTabs{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
#palTabs button{border:0;border-radius:13px;padding:9px 14px;font:900 14px var(--ui);color:var(--muted);background:rgba(255,255,255,.07);box-shadow:0 0 0 1.5px var(--line)}
#palTabs button.on{background:var(--lime);color:#15330F;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #3F7A1F}
#paletteGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;width:min(760px,90vw)}
#paletteGrid button{border:0;border-radius:16px;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14),0 3px 0 var(--edge);transition:transform .12s var(--spring)}
#paletteGrid button:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--lime),0 4px 0 #3F7A1F}
#paletteGrid small{font:800 11px var(--ui);color:var(--muted)}#paletteGrid .sw{width:40px;height:40px}
.mapbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.mapbar .tb{font-size:15px}.mapbar input{width:110px;padding:9px 12px;font-size:15px}
.legend{font:800 12px var(--ui);color:var(--muted);display:flex;gap:5px;align-items:center;margin-left:8px}.legend i{width:12px;height:12px;border-radius:4px;background:var(--c);display:inline-block;margin-left:6px}
#mapCanvas{display:block;width:min(78vw,660px);image-rendering:pixelated;border-radius:16px;cursor:crosshair;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--rim)}
#map small{display:block;margin-top:8px;color:var(--dim);font-weight:800}
#help{width:min(640px,92vw)}#help ul{margin:0 0 16px;padding-left:20px;line-height:1.5;font-weight:700;color:var(--muted)}#help li{margin-bottom:7px}#help b{color:var(--gold)}
#picker{width:min(880px,94vw)}.pick-lead{margin:-6px 0 14px;font-weight:800;color:var(--muted)}
.pick-note{margin:-4px 0 12px;padding:10px 14px;border-radius:14px;background:rgba(255,216,74,.14);border:1px solid rgba(255,216,74,.45);font-weight:800;line-height:1.35}.pick-note b{color:#ffd84a}
#pickGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:11px}
#pickGrid button{border:0;border-radius:20px;padding:16px 10px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--lattice),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16),0 4px 0 var(--edge);transition:transform .14s var(--spring)}
#pickGrid button:hover{transform:translateY(-5px);box-shadow:0 0 0 2.5px var(--lime),0 0 20px rgba(186,255,56,.3),0 5px 0 #3F7A1F}
#pickGrid button.cur{box-shadow:0 0 0 2px var(--cyan),0 4px 0 var(--edge)}
#pickGrid i{font-style:normal;font-size:48px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}#pickGrid b{font:400 20px var(--display);color:var(--lime)}#pickGrid small{font:800 12px var(--ui);color:var(--muted);text-align:center}
#skipBuild{position:fixed;right:20px;bottom:24px;font-size:20px}
#buildBanner{display:none;position:fixed;left:50%;top:22px;transform:translateX(-50%);padding:12px 24px;text-align:center;--rim:var(--lime)}
#buildBanner b{font:400 24px var(--display);color:var(--lime);letter-spacing:.03em}
#buildBanner span{display:block;margin-top:9px;height:12px;width:min(440px,70vw);background:rgba(0,0,0,.35);border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 1.5px rgba(255,255,255,.12)}
#buildBanner i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--gold),var(--lime));border-radius:99px;transition:width .2s}
body.building #buildBanner{display:block}
body.building #me,body.building #corner,body.building #crosshair,body.building #aimInfo,body.building #bottom,body.building #clickHint,body.building #wanted{display:none!important}
body.building::after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 70px 0 -10px rgba(0,0,0,.35),inset 0 -70px 0 -10px rgba(0,0,0,.35)}
@media (max-height:720px){#actions{flex-direction:row}.ib{width:50px;height:54px}}

/* ---- Mount GROW: backpack strip, Mine Shop ---- */
#pack{position:fixed;left:50%;bottom:122px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:14px;background:rgba(15,26,69,.78);box-shadow:inset 0 0 0 1.5px var(--line,#3A54A8);font:800 13px var(--ui);color:#fff;white-space:nowrap}
/* Inside Mount GROW (game/minerides.js): the train and elevator card, the ride bar, the gem detector */
#rideCard{position:fixed;left:50%;top:50%;translate:-50% -50%;width:min(380px,calc(100vw - 24px));padding:18px;border-radius:22px;z-index:42;text-align:center}
#rideCard h2{margin:0 0 4px;font:400 26px/1.1 var(--u3-display,'Lilita One',sans-serif)}#rideCard p{margin:0 0 12px;color:#bcd0ff;font:800 14px var(--u3-ui,Nunito,sans-serif)}
#rideCard .rc-list{display:grid;gap:8px;margin-bottom:10px}#rideCard .rc-list .tb{width:100%;justify-content:center}
.vt-ridebar{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top));translate:-50% 0;z-index:30;padding:8px 16px;border-radius:14px;background:rgba(10,18,51,.85);box-shadow:inset 0 0 0 1.5px rgba(255,210,63,.5);color:#fff;font:800 15px var(--u3-ui,Nunito,sans-serif);pointer-events:none}
#gemDetector{position:fixed;left:50%;top:calc(50% + 46px);translate:-50% 0;z-index:20;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:14px;background:rgba(10,18,51,.72);box-shadow:inset 0 0 0 1.5px var(--g,#3fe8ff),0 0 14px color-mix(in srgb,var(--g,#3fe8ff) 45%,transparent);color:#fff;font:800 14px var(--u3-ui,Nunito,sans-serif);pointer-events:none}
#gemDetector i{display:inline-block;font-style:normal;color:var(--g,#3fe8ff);font-size:18px;transition:transform .15s}#gemDetector b{font-variant-numeric:tabular-nums}#gemDetector small{color:#9fb0e0;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
/* The mine on the balance card (game/minehud.js): in Mount GROW the SEED card grows the backpack, what it sells for and the day's limit */
/* the panel never widens the card (contain): the card keeps its own width, at least 300px, and the panel fills it */
.u3-me.vt-mining{flex-wrap:wrap;min-width:min(300px,calc(100vw - 24px))}
.u3-me>.vt-mine{flex:1 0 100%;min-width:0;contain:inline-size}
.vt-mine{position:relative;overflow:hidden;box-sizing:border-box;margin-top:10px;padding:10px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(10,18,51,.72),rgba(10,18,51,.5));box-shadow:inset 0 0 0 1.5px rgba(186,255,56,.32),0 6px 18px rgba(0,0,0,.25);color:#fff;font:800 13px/1.2 var(--u3-ui,Nunito,sans-serif);min-width:260px}
.vt-mine img{width:18px;height:18px;object-fit:contain;vertical-align:middle}
.vt-mine .vm-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#bcd0ff}
.vt-mine .vm-title,.vt-mine .vm-gear{display:flex;align-items:center;gap:5px}.vt-mine .vm-gear{letter-spacing:.02em;text-transform:none;font-size:12px;color:#fff}
.vt-mine .vm-lamp{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,210,63,.18);box-shadow:0 0 8px rgba(255,210,63,.5)}.vt-mine .vm-lamp img{width:14px;height:14px}
.vt-mine .vm-main{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.vt-mine .vm-pack{display:flex;align-items:center;gap:8px}.vt-mine .vm-pack>img{width:38px;height:38px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3))}
.vt-mine .vm-count{display:flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums}
.vt-mine .vm-count b{font:400 34px/1 var(--u3-display,'Lilita One',sans-serif);text-shadow:0 3px 0 rgba(0,0,0,.35)}
.vt-mine .vm-count small{font:400 17px/1 var(--u3-display,'Lilita One',sans-serif);color:#9fb0e0}
.vt-mine .vm-worth{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.vt-mine .vm-plus{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}.vt-mine .vm-plus img{width:26px;height:26px}
.vt-mine .vm-plus b{font:400 30px/1 var(--u3-display,'Lilita One',sans-serif);color:var(--u3-gold,#FFE369);text-shadow:0 3px 0 #7A5A00,0 0 14px rgba(255,227,105,.35)}
.vt-mine .vm-worth small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fb0e0}
.vt-mine .vm-bar{height:10px;margin:9px 0 2px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.vt-mine .vm-bar>i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#7BE23A,var(--u3-lime,#BAFF38));transition:width .45s cubic-bezier(.2,.8,.2,1);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
.vt-mine[data-level=warn] .vm-bar>i{background:linear-gradient(90deg,#FFB020,var(--u3-gold,#FFE369))}
.vt-mine[data-level=full] .vm-bar>i{background:linear-gradient(90deg,#FF3D5E,#FF7A8E);animation:vmPulse 1s ease-in-out infinite}
.vt-mine[data-level=full]{box-shadow:inset 0 0 0 2px rgba(255,77,109,.75),0 0 22px rgba(255,77,109,.3)}
.vt-mine .vm-full{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:#ffb3c0}.vt-mine .vm-full[hidden]{display:none}
.vt-mine .vm-full button{border:0;border-radius:10px;padding:6px 10px;background:var(--u3-pink,#FF68BC);color:#3A0A28;font:900 12px var(--u3-ui,Nunito,sans-serif);cursor:pointer;box-shadow:0 3px 0 #a3226d}
.vt-mine .vm-stones{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:8px;font-variant-numeric:tabular-nums}.vt-mine .vm-stones:empty{display:none}
.vt-mine .vm-stones span{display:flex;align-items:center;gap:4px;padding:2px 7px 2px 4px;border-radius:8px;background:rgba(255,255,255,.07)}
.vt-mine .vm-stones i,.vt-mine .vm-banner i{display:inline-block;width:13px;height:13px;border-radius:4px;background:var(--g);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.25),0 0 7px var(--g)}
.vt-mine .vm-day{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:#bcd0ff}.vt-mine .vm-day[hidden]{display:none}
.vt-mine .vm-dbar{height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}.vt-mine .vm-dbar>i{display:block;height:100%;background:var(--u3-cyan,#35C6EA);transition:width .5s}
.vt-mine .vm-day[data-zone=half] .vm-dbar>i{background:#ffb020}.vt-mine .vm-day[data-zone=top] .vm-dbar>i{background:linear-gradient(90deg,#ff68bc,#baff38)}
.vt-mine .vm-rank{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;color:#d8e4ff}.vt-mine .vm-rank[hidden]{display:none}.vt-mine .vm-rank b{color:var(--u3-gold,#FFE369)}.vt-mine .vm-rank img{width:16px;height:16px}
.vm-shopline{margin:6px 0 2px;font:800 13px/1.35 var(--u3-ui,Nunito,sans-serif);color:#bcd0ff}
.vt-mine .vm-day b{font-variant-numeric:tabular-nums;color:#fff}.vt-mine .vm-day.done .vm-dbar>i{background:var(--u3-gold,#FFE369)}.vt-mine .vm-day.done b{color:var(--u3-gold,#FFE369)}
.vt-mine .vm-banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--g) 55%,transparent),rgba(10,18,51,.92) 75%);font:400 26px/1 var(--u3-display,'Lilita One',sans-serif);text-shadow:0 3px 0 rgba(0,0,0,.45);pointer-events:none}
.vt-mine .vm-banner[hidden]{display:none}.vt-mine .vm-banner i{width:26px;height:26px;border-radius:7px}
.vt-mine .vm-banner span{display:flex;align-items:center;gap:4px;color:var(--u3-gold,#FFE369)}.vt-mine .vm-banner span img{width:24px;height:24px}
.vt-mine.mini{min-width:0;padding:6px 10px;margin-top:8px}
.vt-mine.mini .vm-help,.vt-mine.mini .vm-head,.vt-mine.mini .vm-rank,.vt-mine.mini .vm-stones,.vt-mine.mini .vm-day,.vt-mine.mini .vm-full,.vt-mine.mini .vm-banner{display:none}
.vt-mine.mini .vm-pack>img{width:24px;height:24px}.vt-mine.mini .vm-count b{font-size:20px}.vt-mine.mini .vm-count small{font-size:13px}
.vt-mine.mini .vm-plus b{font-size:18px;text-shadow:0 2px 0 #7A5A00}.vt-mine.mini .vm-plus img{width:18px;height:18px}.vt-mine.mini .vm-bar{height:5px;margin-top:5px}
/* the monster caves: the hint on the way in, your hits' numbers (game/minelife.js) */
.vm-cavehint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);translate:-50% 0;z-index:30;max-width:min(560px,calc(100vw - 32px));padding:10px 16px;border-radius:14px;background:rgba(24,10,32,.88);box-shadow:inset 0 0 0 2px #ff4d6d,0 8px 24px #0008;color:#fff;font:800 14px/1.35 var(--u3-ui,Nunito,sans-serif);text-align:center;pointer-events:none}
.vm-cavehint[hidden]{display:none}.vm-cavehint b{display:block;color:#ff8fa3;font-size:16px;letter-spacing:.04em}
.vm-float.vm-dmg{translate:-50% -50%;font:900 22px/1 var(--u3-ui,Nunito,sans-serif);text-shadow:0 2px 0 #000,0 0 8px #000}
/* the shared mine's reset clock and the dynamite button (game/minelife.js) */
.vt-mine .vm-life{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;font:800 12px var(--u3-ui,Nunito,sans-serif);color:#cfe0ff}
.vt-mine .vm-acts{display:inline-flex;gap:6px}
.vt-mine .vm-sos{flex:none;padding:5px 10px;border:0;border-radius:999px;background:rgba(255,210,63,.18);box-shadow:inset 0 0 0 1.5px rgba(255,210,63,.6);color:#ffe9a8;font:900 12px var(--u3-ui,Nunito,sans-serif);cursor:pointer}
.vt-mine .vm-dyn{flex:none;display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:0;border-radius:999px;background:linear-gradient(180deg,#ff5a6e,#d8263c);box-shadow:0 3px 0 #8f1426;color:#fff;font:900 13px var(--u3-ui,Nunito,sans-serif);cursor:pointer}.vt-mine .vm-dyn[hidden]{display:none}.vt-mine .vm-dyn:active{translate:0 2px;box-shadow:0 1px 0 #8f1426}
.vt-mine .vm-help{display:block;width:100%;margin-top:8px;padding:6px 10px;border:0;border-radius:10px;background:rgba(255,210,63,.14);box-shadow:inset 0 0 0 1.5px rgba(255,210,63,.45);color:#ffe9a8;font:800 12px var(--u3-ui,Nunito,sans-serif);cursor:pointer}.vt-mine .vm-help:hover{background:rgba(255,210,63,.24)}
/* the moments: a stone pops the numbers, a gem flies into its chip, coins fly into SEED */
.vt-mine.vm-in{animation:vmIn .45s cubic-bezier(.34,1.56,.64,1)}
.vt-mine .vm-pop{animation:vmPop .35s cubic-bezier(.34,1.56,.64,1)}
.vt-mine .vm-flash{animation:vmFlash .6s ease-out}
.vt-mine.vm-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);animation:vmShine .8s ease-out forwards;pointer-events:none}
.vt-mine .vm-bannerin{animation:vmBanner 2.2s ease-out forwards}
.vm-cardpop{animation:vmCard .5s cubic-bezier(.34,1.56,.64,1)}@keyframes vmCard{0%{scale:1}35%{scale:1.05}100%{scale:1}}
.vm-fly{position:fixed;z-index:90;width:22px;height:22px;border-radius:6px;background:var(--g);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 18px var(--g),0 0 40px var(--g);pointer-events:none}
.vm-coin{position:fixed;z-index:90;width:26px;height:26px;pointer-events:none;filter:drop-shadow(0 0 6px rgba(186,255,56,.6))}
.vm-float{position:fixed;z-index:90;translate:-50% 0;pointer-events:none;font:400 20px/1 var(--u3-display,'Lilita One',sans-serif);color:var(--u3-gold,#FFE369);text-shadow:0 2px 0 #7A5A00,0 0 12px rgba(255,227,105,.6);animation:vmFloat 1.25s ease-out forwards;white-space:nowrap}
.vm-float.gem{font-size:28px}.vm-float.sold{font-size:24px;color:var(--u3-lime,#BAFF38);text-shadow:0 2px 0 #2c5a10,0 0 12px rgba(186,255,56,.6)}
@keyframes vmIn{0%{opacity:0;transform:translateY(-8px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes vmPop{0%{scale:1}40%{scale:1.22}100%{scale:1}}
@keyframes vmFlash{0%{background:rgba(255,255,255,.55);scale:1.25}100%{background:rgba(255,255,255,.07);scale:1}}
@keyframes vmShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes vmBanner{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.08)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes vmPulse{50%{opacity:.6}}
@keyframes vmFloat{0%{opacity:0;transform:translateY(8px) scale(.7)}20%{opacity:1;transform:translateY(-6px) scale(1.1)}100%{opacity:0;transform:translateY(-44px) scale(1)}}
/* phones: the same panel, tighter; the stones and the gear stay in the Mine Shop */
html.mhud-on .vt-mine,body.touch .vt-mine{min-width:0;padding:8px 10px}
html.mhud-on .vt-mine .vm-stones,body.touch .vt-mine .vm-stones,html.mhud-on .vt-mine .vm-gear,body.touch .vt-mine .vm-gear{display:none}
html.mhud-on .vt-mine .vm-count b,body.touch .vt-mine .vm-count b{font-size:26px}html.mhud-on .vt-mine .vm-plus b,body.touch .vt-mine .vm-plus b{font-size:24px}
html.mhud-on .vt-mine .vm-pack>img,body.touch .vt-mine .vm-pack>img{width:30px;height:30px}
@media (prefers-reduced-motion:reduce){.vt-mine,.vt-mine *,.vt-mine::after,.vm-cardpop{animation:none!important}}
#mineShop i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--g);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 0 6px var(--g)}
#pack em{font-style:normal;color:var(--gold)}#pack small{color:var(--muted,#9fb0e0);font-weight:800}
#mineShop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,92vw);max-height:86vh;overflow:auto;padding:16px 20px;--rim:var(--gold)}
#mineShop h3{font:400 18px var(--display);margin:14px 0 6px;color:var(--gold)}
#mineShop .seedbal{font:400 26px var(--display);text-align:center}#mineShop .seedbal b{color:var(--lime)}
#mineShop ul.stones{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}
#mineShop ul.stones li{display:flex;align-items:center;gap:8px;font:800 14px var(--ui)}#mineShop ul.stones li b{margin-left:auto;color:var(--gold)}
#mineShop .ups{display:grid;gap:8px}#mineShop .ups .tb{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
#mineShop .ups small{font:800 12px var(--ui);opacity:.8}#mineShop .dim{opacity:.7}#mineShop .small{font-size:12px}
#sellAll{width:100%}

/* the SEED icon (brand A1: sprout from a violet seed), wherever SEED shows */
.seed-ic{width:18px;height:18px;object-fit:contain;vertical-align:-4px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}.seed-ic.big{width:34px;height:34px;vertical-align:-8px}
#pack em{display:flex;align-items:center;gap:4px}

/* ---- touch controls (touch.js) ---- */
#touch{display:none}
body.touch #touch{display:block}html:not(.vt-in) #touch{display:none!important}   /* touch controls once you are in */body.touch .keys,body.touch #clickHint{display:none!important}
#touch .stick{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:rgba(15,26,69,.35);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35);left:120px;top:calc(100% - 170px);opacity:.55;pointer-events:none;z-index:8}
#touch .stick.on{opacity:1}
#touch .stick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#cfd8ff 60%,#8fa0d8);box-shadow:0 4px 0 rgba(0,0,0,.3)}
#touch .tbtn{position:fixed;z-index:8;width:78px;height:78px;border:0;border-radius:50%;font:400 17px var(--display);color:#fff;letter-spacing:.03em;
 background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),var(--c,#3a54a8);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.35);opacity:.86;touch-action:none;-webkit-user-select:none;user-select:none}
#touch .tbtn small{font:900 9px var(--ui);opacity:.8}
#touch .tbtn.on{transform:scale(.92);opacity:1}
#touch .use{--c:#e8453f;right:28px;bottom:150px;width:92px;height:92px;font-size:20px}
#touch .build{--c:#3fa0e8;right:132px;bottom:118px}
#touch .jump{--c:#7bd13a;right:44px;bottom:258px}
#touch .small{width:56px;height:56px;font-size:18px}
#touch .e{--c:#ffb238;right:146px;bottom:214px}#touch .crouch{--c:#6d52e8;right:214px;bottom:150px}
body.touch #bottom{bottom:6px;transform:scale(.86);transform-origin:bottom center}
body.touch #doorCard{bottom:120px}

/* touch layout: compact HUD at the top, the thumb zones (stick left, buttons right) kept clear */
body.touch #me{transform:scale(.72);transform-origin:top left;left:8px;top:8px}
body.touch #corner{right:8px;top:8px;flex-direction:row;align-items:flex-start;gap:6px}
body.touch #clock,body.touch #vt-fps{display:none}
body.touch #minimap{width:84px;height:84px;order:2}
body.touch #actions{flex-direction:row;margin-top:0;order:1;transform:scale(.78);transform-origin:top right}
body.touch #toasts{left:50%;transform:translateX(-50%);top:66px;bottom:auto;max-width:44vw}
body.touch .toast{font-size:12px;padding:6px 10px}
body.touch #bottom{left:50%;transform:translateX(-50%) scale(.7);transform-origin:bottom center;bottom:4px}
body.touch #slotName{display:none}
body.touch #pack{bottom:58px;transform:translateX(-50%) scale(.85)}
#touch .use{right:24px;bottom:24px}
#touch .build{right:126px;bottom:20px}
#touch .jump{right:30px;bottom:128px}
#touch .e{right:112px;bottom:108px}#touch .crouch{right:200px;bottom:20px}

/* ---- online: player count, chat, sign-in ---- */
#signIn{width:100%;margin:8px 0 4px}#owned{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:900 11px var(--ui);color:var(--lime);margin:4px 0}#owned .tb{font-size:12px;padding:6px 10px}
#vt-online{position:fixed;left:16px;top:150px;font:800 12px var(--ui);padding:4px 10px;border-radius:10px;background:rgba(15,26,69,.7);color:#bfffb0}
#chatFeed{position:fixed;left:16px;bottom:200px;display:flex;flex-direction:column;gap:4px;max-width:min(420px,50vw);pointer-events:none}
#chatFeed .line{font:800 13px var(--ui);background:rgba(15,26,69,.66);padding:5px 10px;border-radius:10px}#chatFeed .line b{color:var(--lime)}
#chatIn{position:fixed;left:16px;bottom:160px;width:min(420px,60vw);font:800 15px var(--ui);color:#fff;background:#1c2b62;border:0;border-radius:12px;padding:10px 14px;box-shadow:inset 0 0 0 2px var(--lime)}
body.touch #vt-online{top:auto;bottom:70px;left:8px}

/* ---- NFT drops (src/voxel-town/city-nfts.js) ---- */
#nftPrompt{position:fixed;left:50%;top:58%;transform:translateX(-50%);padding:10px 18px;border-radius:14px;background:rgba(21,35,80,.86);
 border:2px solid #BAFF38;color:#fff;font:800 15px/1.2 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:20}
#nftCollect{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:20;background:#FFE369;color:#152350;font-weight:900}
.nft-sheet{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));display:flex;gap:14px;padding:14px;
 border-radius:20px;z-index:40;color:#fff}
.nft-sheet img{width:112px;height:112px;object-fit:cover;border-radius:14px;border:3px solid #BAFF38;flex:none}
.nft-sheet .ns-body{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.nft-sheet .ns-name{font:900 18px/1.1 system-ui,sans-serif}
.nft-sheet .ns-by,.nft-sheet .ns-status{font:600 13px/1.3 system-ui,sans-serif;opacity:.85}
.nft-sheet .ns-price{font:800 15px system-ui,sans-serif;color:#FFE369}
.nft-sheet input{width:100%;box-sizing:border-box;margin-top:4px;padding:8px 10px;border-radius:10px;border:0;font:700 15px system-ui}
.nft-sheet .ns-row{display:flex;gap:8px;margin-top:auto}
.nft-sheet button{border:0;border-radius:12px;padding:10px 14px;font:900 14px system-ui,sans-serif;cursor:pointer}
.nft-sheet .ns-go{background:#BAFF38;color:#152350;flex:1}
@media (max-width:600px){.nft-sheet img{width:80px;height:80px}#nftPrompt{top:auto;bottom:210px}}

/* ---- the game menu (src/voxel-town/city-menu.js) ---- */
#cityMenu{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(10,16,40,.45);backdrop-filter:blur(3px)}
#cityMenu[hidden]{display:none}
#cityMenu .cm-panel{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;border-radius:24px;padding:18px 18px 8px;color:#fff}
#cityMenu header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#cityMenu .cm-title{font:900 24px/1 system-ui,sans-serif;letter-spacing:.06em;color:#BAFF38;flex:1}
#cityMenu header button{border:0;border-radius:12px;padding:8px 12px;background:rgba(255,255,255,.12);color:#fff;font:900 14px system-ui;cursor:pointer}
#cityMenu .cm-body{overflow:auto;padding-bottom:10px}
#cityMenu section{margin:6px 0 12px}
#cityMenu h3{margin:0 0 8px;font:900 12px system-ui;letter-spacing:.16em;color:#9fb3ff}
#cityMenu .cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
#cityMenu .cm-item{position:relative;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;text-align:left;
 border:2px solid rgba(255,255,255,.08);border-radius:16px;padding:10px;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;min-height:58px}
#cityMenu .cm-item:hover,#cityMenu .cm-item:focus-visible{border-color:#BAFF38;background:rgba(186,255,56,.12)}
#cityMenu .cm-item img{grid-row:1/3;width:40px;height:40px;object-fit:contain}
#cityMenu .cm-item span{font:900 15px/1.1 system-ui,sans-serif}
#cityMenu .cm-item small{font:600 11px/1.2 system-ui;opacity:.7}
#cityMenu .cm-item kbd{position:absolute;top:6px;right:8px;font:800 10px system-ui;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.14)}
#cityMenu .cm-note{margin:0 0 10px;font:600 13px system-ui;opacity:.8}
#cityMenu .cm-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
#cityMenu .cm-game{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:110px;padding:10px;border-radius:18px;
 border:2px solid rgba(255,255,255,.12);background:linear-gradient(140deg,var(--c1),var(--c2));color:#fff;cursor:pointer;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
#cityMenu .cm-game:hover{border-color:#BAFF38;transform:translateY(-2px)}
#cityMenu .cm-game img{max-width:100%;max-height:62px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
#cityMenu .cm-game b{font:900 13px system-ui;text-shadow:0 2px 3px rgba(0,0,0,.4)}
#cityMenu .cm-game small{position:absolute;top:8px;right:8px;font:900 10px system-ui;padding:2px 6px;border-radius:6px;background:#FFE369;color:#152350}
@media (max-width:600px){#cityMenu .cm-panel{width:100vw;max-height:100vh;height:100vh;border-radius:0}#cityMenu .cm-grid{grid-template-columns:1fr 1fr}#cityMenu .cm-item small{display:none}}
/* touch buttons: a painted icon and a label (src/voxel-town/touch.js); the plaza-hosted phone layout is in city-app.css */
#touch .tbtn{display:grid;place-items:center;align-content:center;box-shadow:0 0 0 3px #142044,0 5px 0 #142044,0 10px 18px rgba(5,10,40,.45);opacity:1}
#touch .tbtn img{width:56%;height:56%;object-fit:contain}
#touch .tbtn svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
#touch .tbtn b{font:900 10.5px/1 var(--ui);margin-top:-2px}

/* ===== city windows: one header and one set of controls, the plaza window's (gb-keyart.css) =====
   A painted icon, a display title in gold with a small line under it, the square close button; tabs and chips with
   painted icons; a key looks like a key. Every city window (build, map, mine shop, home picker, help, jail) uses these. */
.phead{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(135,169,236,.18)}
.phead>img{width:46px;height:46px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.ptitle{min-width:0;flex:1}
.phead h2,.ptitle h2{margin:0;font:400 27px/1.05 var(--display);color:var(--gold);text-transform:none;letter-spacing:.01em;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.ptitle small{display:block;margin-top:3px;font:700 13.5px/1.3 var(--ui);color:var(--muted)}
.phead .x,.x{flex:none;margin-left:auto;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:13px;cursor:pointer;
 background:linear-gradient(#3a4f8f,#2a3a72);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),0 4px 0 #142044;color:#fff}
.x svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.x:active{transform:translateY(3px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),0 1px 0 #142044}
.x:focus-visible,.tb:focus-visible,#palTabs button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
#palTabs{gap:8px}
#palTabs button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 14px 6px 8px;cursor:pointer}
#palTabs button img{width:26px;height:26px;object-fit:contain}
.mapbar .tb,#map .mapbar .tb{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 14px 6px 8px;text-transform:none}
.mapbar .tb img{width:26px;height:26px;object-fit:contain}
.findhome{display:inline-flex;gap:6px}
#map>small{display:block;margin-top:8px;color:var(--muted);font:700 12.5px var(--ui)}
kbd,.k{display:inline-block;min-width:1.6em;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.14);box-shadow:inset 0 -2px 0 rgba(0,0,0,.3);font:900 12px/1.5 var(--ui);color:#fff;text-align:center}
.k-touch{display:none}
body.touch .k-touch{display:inline}body.touch .k-desk{display:none!important}
/* how to play */
#help{width:min(620px,94vw)}
#help .hlist{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
#help .hlist li{display:flex;gap:12px;align-items:flex-start;margin:0;font:700 14px/1.45 var(--ui);color:var(--muted)}
#help .hlist li>img{width:38px;height:38px;flex:none;object-fit:contain}
#help .hlist b{display:block;font:900 15px/1.3 var(--ui);color:#fff}
#help .hkeys{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 14px;border-radius:14px;background:rgba(5,10,35,.35);font:800 13px var(--ui);color:var(--muted)}
#help .hfoot{margin-top:14px;display:flex;justify-content:flex-end}
.tb.ghost{background:transparent;box-shadow:none;color:var(--muted);font:800 13px var(--ui);text-transform:none;padding:8px 10px;text-decoration:underline;text-underline-offset:3px}
.tb.ghost.danger{background:var(--red);color:#fff;text-decoration:none;box-shadow:0 4px 0 color-mix(in oklab,var(--red) 55%,#000)}
/* jail: the window look, the time big, bail the one action */
.jcard{width:300px;padding:18px 20px}
.jcard .phead{margin-bottom:8px}
.jcard .jtime{margin:6px 0 12px;font:800 14px var(--ui);color:var(--muted)}
.jcard .jtime b{display:block;font:400 40px/1 var(--display);color:var(--gold)}
.jcard #bail{width:100%;text-transform:none}
body.touch .jcard{left:12px;right:12px;width:auto;top:auto;bottom:calc(150px + env(safe-area-inset-bottom));transform:none}
/* mine shop */
#mineShop h3{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font:900 15px var(--ui);color:#fff}
#mineShop h3 img{width:26px;height:26px;object-fit:contain}
#mineShop h3 .dim{font-weight:700;color:var(--muted)}
#mineShop .seedbal{display:flex;align-items:center;justify-content:center;gap:8px;font:400 30px var(--display);color:var(--lime)}
#mineShop #sellAll{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;text-transform:none;font-size:20px}
#mineShop #sellAll .seed-ic{width:22px;height:22px}
#mineShop .ups .tb.up{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;text-align:left;text-transform:none;padding:8px 12px 8px 8px;font:900 15px var(--ui)}
#mineShop .ups .tb.up>img{width:34px;height:34px;object-fit:contain}
#mineShop .ups .tb.up span{flex:1;min-width:0}
#mineShop .ups .tb.up b{display:block;font:900 15px var(--ui)}
#mineShop .ups .tb.up small{display:block;font:700 12px var(--ui);opacity:.75}
#mineShop .ups .tb.up em{display:inline-flex;align-items:center;gap:4px;font:900 14px var(--ui);font-style:normal;padding:4px 9px;border-radius:9px;background:rgba(0,0,0,.25)}
#mineShop .ups .tb.up em .seed-ic{width:16px;height:16px}

/* ===== the city's menu and its Games page, in the plaza's tokens (Lilita titles, Nunito, slate blocks) ===== */
#cityMenu .cm-panel{padding:20px 20px 10px}
#cityMenu header.phead{margin-bottom:12px}
#cityMenu .cm-title{font:400 30px/1 var(--display);color:var(--gold);letter-spacing:.01em;flex:none}
#cityMenu .cm-back{font:900 14px var(--ui);text-transform:none;padding:0 14px;min-height:44px;margin-left:auto}
#cityMenu .cm-back+.cm-close{margin-left:8px}
#cityMenu h3{font:400 17px var(--display);letter-spacing:.02em;color:var(--cyan);text-transform:none}
#cityMenu .cm-item{border:0;border-radius:16px;background:linear-gradient(#34488a,#2a3a72);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18),0 4px 0 #142044;min-height:62px}
#cityMenu .cm-item:hover,#cityMenu .cm-item:focus-visible{background:linear-gradient(#3d5398,#30427e);outline:2px solid var(--lime);outline-offset:1px}
#cityMenu .cm-item span{font:900 15px/1.15 var(--ui)}
#cityMenu .cm-item small{font:700 12px/1.25 var(--ui);color:var(--muted);opacity:1}
#cityMenu .cm-item kbd{font:900 11px var(--ui)}
/* games: dark tiles lit by each game's colours, its logo or its name in the display face; always readable */
#cityMenu .cm-games{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
#cityMenu .cm-game{overflow:hidden;min-height:118px;padding:12px 10px 10px;gap:8px;border:0;border-radius:18px;isolation:isolate;
 background:#1d2d63;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 4px 0 #142044}
#cityMenu .cm-game::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
 background:radial-gradient(120% 90% at 20% 0%,var(--c1),transparent 60%),radial-gradient(120% 90% at 100% 100%,var(--c2),transparent 60%)}
#cityMenu .cm-game::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:-1;background:linear-gradient(transparent,rgba(10,16,48,.85))}
#cityMenu .cm-game:hover,#cityMenu .cm-game:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--lime),0 6px 0 #142044;outline:none}
#cityMenu .cm-game img{max-height:58px}
#cityMenu .cm-game i{font:400 22px/1.05 var(--display);font-style:normal;color:#fff;text-align:center;text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 18px var(--c1)}
#cityMenu .cm-game b{font:900 13px var(--ui);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#cityMenu .cm-game.text b{display:none}
#cityMenu .cm-game small{font:900 11px var(--ui);background:var(--gold);color:#152350}
@media (max-width:520px){#cityMenu .cm-games{grid-template-columns:repeat(2,1fr);gap:10px}#cityMenu .cm-game{min-height:104px}#cityMenu .cm-title{font-size:26px}}
/* tools only where they work (src/voxel-town/game/blocks.js G.mode): your lot = build, Mount GROW = pickaxe, else hands free */
html.vt-mode-social :is(#bottom,#crosshair,#aimInfo),html.vt-mode-mine #bottom{display:none!important}
html.vt-mode-social #touch :is(.use,.build,.crouch){display:none!important}
html.vt-mode-mine #touch .build{display:none!important}

/* AI Architect (src/voxel-town/game/architect.js): one window, three views (ask, busy, result) */
#architect{width:min(560px,94vw)}
#architect:not([data-view=ask]) .arc-ask,#architect:not([data-view=busy]) .arc-busy,#architect:not([data-view=result]) .arc-result{display:none}
#arcPrompt{width:100%;box-sizing:border-box;resize:none;border:0;border-radius:14px;padding:12px 14px;font:800 16px var(--ui);color:#fff;background:rgba(5,10,35,.55);box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 1.5px var(--line);outline:none}
#arcPrompt:focus{box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 2px var(--lime)}
.arc-ideas{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.arc-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:10px;border:0;background:rgba(255,255,255,.1);color:#fff;font:800 12.5px var(--ui)}
.arc-chip.idea{cursor:pointer}.arc-chip.idea:hover{background:rgba(186,255,56,.2)}
.arc-err{min-height:1.2em;margin:4px 0;color:#ff8fa3;font:800 13px var(--ui)}
#arcGo{width:100%;text-transform:none}
.arc-note{margin:10px 0 0;color:var(--muted);font:700 12.5px/1.4 var(--ui)}
.arc-busy{display:grid;justify-items:center;gap:12px;padding:26px 0;font:800 15px var(--ui)}
.arc-spin{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:var(--lime);animation:arcspin .8s linear infinite}
@keyframes arcspin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.arc-spin{animation:none}}
.arc-sum{display:flex;gap:12px;align-items:center}
.arc-sum i{width:44px;height:44px;border-radius:12px;background:var(--w,#fff);box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),0 0 0 2px rgba(255,255,255,.2);flex:none}
.arc-sum b{display:block;font:400 22px var(--display);color:var(--gold)}
.arc-feat{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.arc-buy{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.arc-buy .tb{text-transform:none;font-size:16px}
.arc-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px}.arc-row .tb{text-transform:none;font-size:14px}
.arc-card{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:10px 14px 10px 10px;border:0;border-radius:16px;cursor:pointer;text-align:left;color:#fff;
 background:linear-gradient(120deg,rgba(255,104,188,.28),rgba(139,116,255,.28));box-shadow:0 0 0 2px rgba(255,104,188,.6),0 4px 0 #142044}
.arc-card img{width:44px;height:44px}.arc-card b{display:block;font:400 20px var(--display);color:#fff}.arc-card small{font:700 12.5px var(--ui);color:var(--muted)}
.arc-card em{margin-left:auto;font:900 11px var(--ui);font-style:normal;padding:3px 8px;border-radius:8px;background:var(--lime);color:#15330F}
/* the result view steps aside so you can look at your new home */
#architect.panel[data-view=result]{animation:none;left:auto!important;right:20px!important;top:auto!important;bottom:200px!important;transform:none!important;translate:none!important;width:min(380px,calc(100vw - 32px))}
body.touch #architect.panel[data-view=result]{right:12px!important;left:12px!important;width:auto;bottom:calc(150px + env(safe-area-inset-bottom))!important}
/* the Smash Yard (game/smash.js): no Build button, a pill with your score and the rebuild clock */
html.vt-mode-smash #touch .build{display:none!important}
.vt-smash{position:fixed;left:50%;top:calc(132px + env(safe-area-inset-top));translate:-50% 0;z-index:16;display:flex;align-items:center;gap:14px;padding:7px 16px 7px 8px;border-radius:16px;color:#fff;pointer-events:none;
 box-shadow:inset 4px 0 0 #ff8a3d,0 0 0 1.5px rgba(255,138,61,.5)}
.vt-smash img{width:34px;height:34px;object-fit:contain}
.vt-smash b{display:block;font:400 24px/1 var(--display);color:#ffb86b;font-variant-numeric:tabular-nums}
.vt-smash small{display:block;font:800 11px var(--ui);color:var(--muted)}
.vt-smash .vt-smash-t b{color:#fff}
.vt-smash.soon .vt-smash-t b{color:#ff4d6d;animation:vt-throb .5s ease-in-out infinite alternate}
html.mhud-on .vt-smash{top:var(--vt-goal-b,190px);left:12px;translate:none;padding:5px 12px 5px 6px}
.vt-smash-top{margin:0 0 0 4px;padding:0 0 0 12px;border-left:1px solid rgba(255,255,255,.15);list-style:decimal;font:800 12px var(--ui);color:var(--muted)}
.vt-smash-top li span{display:inline-block;max-width:90px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;color:#fff}.vt-smash-top li b{display:inline;font:900 12px var(--ui);color:#ffb86b;margin-left:6px}
.vt-smash-night{font:400 14px var(--display);font-style:normal;color:#fff;background:linear-gradient(90deg,#ff4f8b,#ff8a3d);padding:4px 9px;border-radius:9px}
.vt-smash.night{box-shadow:inset 4px 0 0 #ff4f8b,0 0 0 2px rgba(255,79,139,.7),0 0 24px rgba(255,79,139,.35)}
html.mhud-on .vt-smash-top{display:none}
/* in Mount GROW the quest pill under the card is gone, PC and phone (owner, 1 Nov: it ran into the chat; the mine panel is the goal there) */
html.vt-in-mine .vt-goal{display:none!important}
/* quests window */
#quests{width:min(520px,94vw)}
.q-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.q-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06)}
.q-list li>img{width:36px;height:36px;object-fit:contain;flex:none}
.q-list li span{flex:1;min-width:0}.q-list li b{display:block;font:900 14px/1.3 var(--ui);color:#fff}
.q-bar{display:block;height:8px;margin-top:6px;border-radius:5px;background:rgba(0,0,0,.35);overflow:hidden}.q-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),#7df0ff);border-radius:5px}
.q-list li em{display:inline-flex;align-items:center;gap:4px;font:900 14px var(--ui);font-style:normal;color:var(--lime);white-space:nowrap}.q-list li em img{width:18px;height:18px}
.q-list li.done{opacity:.6}.q-list li.done em{color:#fff}.q-list li.empty{justify-content:center;color:var(--muted);font:800 14px var(--ui)}
.q-note{margin:12px 0 0;color:var(--muted);font:800 13px var(--ui)}
/* events window */
#events{width:min(560px,94vw)}
.ev-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ev-list li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.06)}
.ev-list li>img{width:34px;height:34px;object-fit:contain;flex:none}
.ev-list li span{flex:1;min-width:0}.ev-list li b{display:block;font:900 14px var(--ui);color:#fff}.ev-list li small{display:block;font:700 12px/1.3 var(--ui);color:var(--muted)}
.ev-list li em{font:900 12.5px var(--ui);font-style:normal;color:var(--cyan);white-space:nowrap;text-align:right}
.ev-list li.live{background:linear-gradient(90deg,rgba(255,79,139,.25),rgba(255,138,61,.15));box-shadow:inset 4px 0 0 #ff4f8b}
.ev-list li.live em{color:#ff8fb8}.ev-list li.daily em{color:var(--gold)}
.ev-go{min-height:40px;padding:4px 14px;font-size:15px;text-transform:none}
/* talk (game/talk.js): the prompt next to a resident, the talk card */
.vt-prompt{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));translate:-50% 0;z-index:16;padding:7px 14px;border-radius:12px;background:rgba(20,32,78,.9);box-shadow:0 0 0 1.5px rgba(135,169,236,.35);font:800 14px var(--ui);color:#fff;pointer-events:none}
.vt-prompt b{color:var(--gold)}
body.touch .vt-prompt kbd{display:none}
:is(#talk,#askCard){position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));translate:-50% 0;width:min(460px,calc(100vw - 24px));padding:16px 18px;border-radius:22px;z-index:40}
:is(#talk,#askCard) .phead{margin-bottom:8px;padding-bottom:8px}:is(#talk,#askCard) .phead>img{width:36px;height:36px}:is(#talk,#askCard) .ptitle h2{font-size:22px}
#askCard .tk-go{margin:10px 0 0}
/* The Pond Street Ledger (game/ledger.js): the paper in your hands, in the real paper's colours; the reporter's write card */
#reportCard{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));translate:-50% 0;width:min(460px,calc(100vw - 24px));padding:16px 18px;border-radius:22px;z-index:41}
#reportCard .phead{margin-bottom:8px;padding-bottom:8px}#reportCard .phead>img{width:36px;height:36px}#reportCard .ptitle h2{font-size:22px}
#ledgerPaper{position:fixed;left:50%;top:50%;translate:-50% -50%;width:min(720px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto;z-index:42;background:#f7f8f4;color:#0d1410;border-radius:6px;padding:22px 26px 18px;box-shadow:0 18px 60px rgba(0,0,0,.55);font-family:Georgia,"Times New Roman",serif}
#ledgerPaper .x{position:absolute;right:10px;top:10px;background:#0d1410;color:#f7f8f4;border:0;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
#ledgerPaper .x svg{width:16px;height:16px;stroke:currentColor;stroke-width:3;fill:none}
#ledgerPaper header{text-align:center}#ledgerPaper header h2{margin:0;font:900 clamp(28px,6vw,46px)/1.05 Georgia,serif;letter-spacing:-.5px}
#ledgerPaper .lp-rule{height:4px;background:#f0b400;margin:10px 0 6px}#ledgerPaper .lp-date{margin:0 0 10px;font:700 12px/1.4 "Courier New",monospace;letter-spacing:1.5px;text-transform:uppercase;color:#6b7a6e;border-bottom:1.5px solid #0d1410;padding-bottom:8px}
#ledgerPaper .lp-lead{text-align:center;border-bottom:1.5px solid #0d1410;padding:6px 0 12px}#ledgerPaper .lp-lead h1{margin:4px 0 8px;font:900 clamp(24px,5vw,38px)/1.1 Georgia,serif}
#ledgerPaper .lp-lead p{margin:0 auto;max-width:560px;font:italic 17px/1.45 Georgia,serif;color:#2c3a30}
#ledgerPaper small{display:block;margin-top:6px;font:700 11px/1.3 "Courier New",monospace;letter-spacing:1px;text-transform:uppercase;color:#6b7a6e}
#ledgerPaper .lp-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 20px;padding:12px 0}
#ledgerPaper article h3{margin:0 0 6px;font:800 17px/1.2 Georgia,serif}#ledgerPaper article p{margin:0;font:14px/1.45 Georgia,serif;color:#3d4b41}
#ledgerPaper footer{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:4px solid #f0b400;padding-top:12px;font:13px/1.4 Georgia,serif;color:#3d4b41}
#ledgerPaper footer .tb{flex:none}
/* the city's neon window skin (city-neon.css, gb-ui.css) forces its own background and display font: the paper keeps its own */
html #ledgerPaper.u3-window:not(#gbu-x):not(#gbu-y){background:#f7f8f4!important;background-image:none!important;border:0!important;color:#0d1410!important;box-shadow:0 18px 60px rgba(0,0,0,.55)!important}
html #ledgerPaper.u3-window :is(h1,h2,h3):not(#gbu-x){font-family:Georgia,"Times New Roman",serif!important;font-weight:900!important;color:#0d1410!important;text-shadow:none!important;letter-spacing:-.3px}
html #ledgerPaper.u3-window header h2:not(#gbu-x){font-size:clamp(28px,6vw,46px)!important}html #ledgerPaper.u3-window .lp-lead h1:not(#gbu-x){font-size:clamp(24px,5vw,36px)!important;line-height:1.1}
html #ledgerPaper.u3-window article h3:not(#gbu-x){font-size:17px!important;font-weight:800!important}
#bdHost{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));translate:-50% 0;width:min(460px,calc(100vw - 24px));padding:16px 18px;border-radius:22px;z-index:41}
#bdHost .phead{margin-bottom:8px;padding-bottom:8px}#bdHost .phead>img{width:36px;height:36px}#bdHost .ptitle h2{font-size:22px}
#bdHostBtn{position:fixed;right:16px;top:calc(env(safe-area-inset-top,0px) + 300px);z-index:40;padding:10px 16px;border-radius:14px;border:3px solid #1a0f3d;background:#ff4fbf;color:#fff;font:800 15px Nunito,sans-serif;cursor:pointer;box-shadow:0 4px 0 #1a0f3d}
.tk-say{margin:4px 0 10px;font:800 16px/1.4 var(--ui);color:#fff;min-height:1.4em}
.tk-go{margin-bottom:10px}.tk-go .tb{text-transform:none;font-size:16px}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tk-chips button{border:0;border-radius:10px;padding:7px 10px;background:rgba(255,255,255,.1);color:#fff;font:800 12.5px var(--ui);cursor:pointer;min-height:36px}
.tk-chips button:hover{background:rgba(186,255,56,.2)}
.tk-ask{display:flex;gap:8px}.tk-ask input{flex:1;min-width:0;border:0;border-radius:12px;padding:10px 12px;font:800 15px var(--ui);color:#fff;background:rgba(5,10,35,.55);box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 1.5px var(--line);outline:none}
.tk-ask input:focus{box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 2px var(--lime)}.tk-ask .tb{text-transform:none;padding:0 16px;font-size:16px}
html.mhud-on :is(#talk,#askCard){bottom:calc(150px + env(safe-area-inset-bottom))}html.mhud-on .vt-prompt{bottom:calc(240px + env(safe-area-inset-bottom))}
/* the GM chip: the one-tap hello that pays SEED (game/talk.js) */
.tk-chips .tk-gm{background:linear-gradient(180deg,#ffe369,#f5b83a);color:#3a2300}
.tk-chips .tk-gm:hover{background:linear-gradient(180deg,#fff08f,#ffc94d)}
/* the sky-taxi ride bar (game/taxi.js) */
.taxi-bar{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 86px);transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;
 padding:8px 8px 8px 16px;border-radius:16px;background:rgba(18,26,64,.88);border:2px solid #ffc93c;color:#fff;font:800 15px var(--ui);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.taxi-bar,.taxi-bar[hidden]{display:none!important}   /* owner 31-Oct: the "Sky-taxi to X / Skip" bar was annoying on PC and phone: the ride just plays */
.taxi-bar button{border:0;border-radius:11px;padding:8px 14px;background:#ffc93c;color:#2a1a00;font:900 14px var(--ui);cursor:pointer;min-height:38px}

/* The Mine Shop catalogue (game/mineshop.js): every piece of gear, yours / buy next / locked */
#mineShop .sh-cat{display:grid;gap:6px}
#mineShop .sh-item{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 7px;border-radius:14px;background:rgba(20,32,78,.55);box-shadow:inset 0 0 0 1.5px rgba(135,169,236,.22)}
#mineShop .sh-item.next{background:rgba(54,44,14,.6);box-shadow:inset 0 0 0 2px var(--gold)}
#mineShop .sh-item.lock{opacity:.62}
#mineShop .sh-item .sh-sw{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--c) 38%,#141c40);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 10px color-mix(in srgb,var(--c) 45%,transparent)}
#mineShop .sh-item .sh-sw img{width:30px;height:30px;object-fit:contain}
#mineShop .sh-item>span{flex:1;min-width:0}#mineShop .sh-item b{display:block;font:900 15px var(--ui)}#mineShop .sh-item small{display:block;font:700 12px var(--ui);opacity:.78}
#mineShop .sh-own{font:900 13px var(--ui);color:var(--lime);font-style:normal;white-space:nowrap}
#mineShop .sh-lock{font:900 13px var(--ui);color:var(--muted);font-style:normal;white-space:nowrap;display:flex;align-items:center;gap:3px}
#mineShop .sh-buy{display:flex;flex-direction:column;align-items:flex-end;gap:2px}#mineShop .sh-buy .tb{display:flex;align-items:center;gap:4px;padding:6px 12px;font:900 15px var(--ui);text-transform:none}
#mineShop .sh-buy small{font:800 11px var(--ui);color:#ffb3b3;opacity:1}
#mineShop .seed-ic{width:18px;height:18px;vertical-align:-3px}

/* A worker's counter (game/staff.js): who they are, your SEED, what the desk offers, Talk */
#counter{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));translate:-50% 0;width:min(480px,calc(100vw - 24px));max-height:calc(100vh - 150px);overflow:auto;padding:16px 18px;border-radius:22px;z-index:40}
#counter .phead{margin-bottom:8px;padding-bottom:8px}#counter .phead>img{width:36px;height:36px}#counter .ptitle h2{font-size:22px}
#counter .ct-say{margin:0 0 8px;font:700 15px/1.35 var(--ui);color:#fff}
#counter .ct-bal{display:flex;align-items:center;gap:6px;font:800 13px var(--ui);color:var(--muted);margin-bottom:8px}#counter .ct-bal b{color:var(--lime);font-size:16px}
#counter .seed-ic{width:18px;height:18px;vertical-align:-3px}
#counter .ct-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#counter .ct-list button{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:0;border-radius:14px;cursor:pointer;text-align:left;color:#fff;
 background:rgba(20,32,78,.6);box-shadow:inset 0 0 0 1.5px rgba(135,169,236,.25);font:inherit}
#counter .ct-list button:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--cyan)}
#counter .ct-list button:disabled{cursor:default;opacity:.7}
#counter .ct-list img{width:34px;height:34px;object-fit:contain;flex:none}
#counter .ct-list span{flex:1;min-width:0}#counter .ct-list b{display:block;font:900 15px var(--ui)}#counter .ct-list small{display:block;font:700 12px var(--ui);opacity:.78}
#counter .ct-list em{display:flex;flex-direction:column;align-items:flex-end;font:900 14px var(--ui);color:var(--gold);font-style:normal;white-space:nowrap}#counter .ct-list em small{font-size:11px;color:var(--muted)}
#counter .ct-soon,#counter .ct-need{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:7px;font:900 10px var(--ui);letter-spacing:.06em}
#counter .ct-soon{background:rgba(139,92,255,.35);color:#e3d6ff}#counter .ct-need{background:rgba(255,80,90,.25);color:#ffc2c2}
#counter .ct-foot{display:flex;justify-content:flex-end;margin-top:10px}
html.mhud-on #counter{bottom:calc(150px + env(safe-area-inset-bottom))}

/* the counters' extra views (game/staff.js): the complaint form, the Mayor's inbox, the Bank's statement, job pay */
#counter .ct-extra{display:grid;gap:8px}
#counter .ct-form{display:grid;gap:8px}
#counter .ct-form label{display:flex;align-items:center;gap:8px;font:800 13px var(--ui);color:var(--muted)}
#counter .ct-form select,#counter .ct-form textarea{flex:1;border-radius:12px;border:2px solid rgba(135,169,236,.35);background:#10183e;color:#fff;font:700 14px var(--ui);padding:8px 10px}
#counter .ct-form textarea{resize:vertical;min-height:90px}
#counter .ct-form .tb{justify-self:end}
#counter .ct-inbox{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:44vh;overflow:auto}
#counter .ct-inbox li{padding:8px 10px;border-radius:12px;background:rgba(20,32,78,.6);font:700 13px var(--ui);color:#fff;display:grid;gap:2px}
#counter .ct-inbox li small{color:var(--muted);font-weight:700}#counter .ct-inbox li p{margin:2px 0 0;font-weight:600;line-height:1.35}
#counter .ct-inbox .ct-amt{justify-self:end;color:#ffb3b3;font-weight:900}
#counter .ct-stat{margin:0;font:900 16px var(--ui);display:flex;align-items:center;gap:6px}#counter .ct-stat b{color:var(--lime)}
#counter .ct-list em.ct-pay{color:var(--lime)}
#counter .ct-foot{gap:8px}

/* a job shift (game/jobs.js): what to do next, how far, the time left, Quit */
#jobpill{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 86px);translate:-50% 0;z-index:17;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 24px));padding:8px 10px 8px 8px;border-radius:16px;background:rgba(20,32,78,.92);box-shadow:0 0 0 2px rgba(182,240,74,.55),0 10px 24px rgba(0,0,0,.4);color:#fff}
#jobpill[hidden]{display:none}#jobpill>img{width:34px;height:34px;flex:none}
#jobpill>span{flex:1;min-width:0}#jobpill b{display:block;font:900 14px var(--ui);color:var(--lime)}#jobpill small{display:block;font:700 12.5px var(--ui);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jobpill em{font:900 16px var(--ui);font-style:normal;color:#fff;min-width:44px;text-align:right}#jobpill em.late{color:#ff8a8a}
#jobpill .tb{padding:5px 10px;font-size:12px}
#jobpill.hot{box-shadow:0 0 0 3px var(--gold),0 0 24px rgba(255,210,63,.6)}
#counter .ct-form input{flex:1;border-radius:12px;border:2px solid rgba(135,169,236,.35);background:#10183e;color:#fff;font:800 16px var(--ui);padding:8px 10px}
@media (max-width:720px){#jobpill{top:calc(env(safe-area-inset-top,0px) + 70px);gap:6px}#jobpill>img{width:26px;height:26px}#jobpill small{font-size:11.5px}}
/* Sage at the counters (game/staff.js): the Mayor's Board list, the Decree, Sage's tags in the owner's inbox, the guide's chips */
#counter .ct-form .tk-chips{margin:0}
#counter .ct-board{margin:0;padding:0 0 0 22px;display:grid;gap:6px;font:800 14px/1.35 var(--ui);color:#fff}#counter .ct-board li::marker{color:var(--lime);font-weight:900}#counter .ct-board small{color:var(--muted);font-weight:700}
#counter .ct-decree{margin:0 0 8px;padding:8px 10px;border-radius:12px;background:rgba(255,210,63,.16);box-shadow:inset 0 0 0 2px rgba(255,210,63,.5);font:800 14px var(--ui);color:#ffe369}
#counter .ct-fix{margin:8px 0 0;font:800 13px var(--ui);color:#ffb3b3}
#counter .ct-inbox .ct-tags{color:#b6f04a}#counter .ct-inbox .tb{justify-self:start;margin-top:4px;padding:4px 10px;font-size:12px;text-transform:none}
/* PLEAD YOUR CASE in the jail card (game/plea.js) */
.jcard .plea{margin:0 0 10px}.jcard .plea-open{width:100%;text-transform:none}
.jcard .plea-form{display:grid;gap:8px}.jcard .plea-form .tk-chips{margin:0}
.jcard .plea-chief,.jcard .plea-out{margin:0;font:700 14px/1.35 var(--ui);color:#fff}.jcard .plea-chief b,.jcard .plea-out b{display:block;font:900 12px var(--ui);letter-spacing:.06em;color:var(--gold)}
.jcard .plea-form textarea{border-radius:12px;border:2px solid rgba(135,169,236,.35);background:#10183e;color:#fff;font:700 14px var(--ui);padding:8px 10px;resize:none}
.jcard .plea-form .tb{text-transform:none}
.jcard .plea-out{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.08)}.jcard .plea-out.good{box-shadow:inset 0 0 0 2px var(--lime)}.jcard .plea-out.bad{box-shadow:inset 0 0 0 2px #ff6b6b}

/* a controller in hand (game/pad.js): the prompts say X, not E */
body.pad .vt-prompt kbd{font-size:0}body.pad .vt-prompt kbd::after{content:"X";font-size:13px}
body .pad-focus{outline:3px solid #baff38!important;outline-offset:3px!important;box-shadow:0 0 0 6px rgba(186,255,56,.25)!important}

/* the job waypoint (game/jobs.js): over the stop, or on the screen edge pointing to it */
:is(#jobmark,#landway){position:fixed;left:0;top:0;z-index:14;pointer-events:none;display:grid;justify-items:center;gap:2px;margin:-22px 0 0 -22px;width:44px;transition:opacity .2s;opacity:.92}
:is(#jobmark,#landway)[hidden]{display:none}
:is(#jobmark,#landway) .jm-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(20,32,78,.88);box-shadow:0 0 0 2.5px var(--lime),0 4px 14px rgba(0,0,0,.45)}
:is(#jobmark,#landway) .jm-dot img{width:26px;height:26px;object-fit:contain}
:is(#jobmark,#landway) .jm-d{font:900 12px var(--ui);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 2px #000;white-space:nowrap}
:is(#jobmark,#landway) .jm-arrow{position:absolute;left:50%;top:20px;width:0;height:0;margin-left:0;transform-origin:0 0}
:is(#jobmark,#landway) .jm-arrow::before{content:"";position:absolute;left:24px;top:-7px;border-left:11px solid var(--lime);border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
:is(#jobmark,#landway):not(.edge) .jm-arrow{display:none}
:is(#jobmark,#landway):not(.edge) .jm-dot{animation:jmbob 1.6s ease-in-out infinite}@keyframes jmbob{50%{translate:0 -4px}}
/* phones at the plaza: a TRADE button (game/screen.js), bottom centre between the stick and the buttons */
#vtTrade{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:8px;height:50px;padding:0 22px;border:0;border-radius:16px;
 background:linear-gradient(180deg,#D4FF85,#baff38 55%);color:#15330F;font:400 22px/1 'Lilita One',sans-serif;letter-spacing:.02em;box-shadow:0 5px 0 #4d7a12,0 8px 20px rgba(0,0,0,.45);cursor:pointer}
#vtTrade[hidden]{display:none}#vtTrade:active{transform:translate(-50%,3px);box-shadow:0 2px 0 #4d7a12}
body.vt-trading #vtTrade{display:none!important}
@media (orientation:portrait){#vtTrade{bottom:calc(env(safe-area-inset-bottom) + 172px)}}   /* upright: above the stick and the E / Jump row */

/* the 3D mine map (game/minemap.js): a hologram of Mount GROW's mine, full screen */
#mineMap.mm{position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at 50% 40%,#16224f 0%,#0a0f26 60%,#05070f 100%);color:#fff;font-family:var(--u3-ui,Nunito,sans-serif);overflow:hidden}
#mineMap[hidden]{display:none}
.mm-gl{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}.mm-gl:active{cursor:grabbing}
.mm-labels{position:absolute;inset:0;pointer-events:none}
.mm-tag{position:absolute;translate:-50% -100%;white-space:nowrap;padding:3px 9px;border-radius:999px;font:900 12px/1.2 var(--u3-ui,Nunito,sans-serif);background:rgba(8,12,32,.78);box-shadow:inset 0 0 0 1.5px rgba(127,232,255,.55);color:#dff8ff}
.mm-tag.cave{box-shadow:inset 0 0 0 1.5px #ff5a8a;color:#ffd0dc}.mm-tag.core{box-shadow:inset 0 0 0 1.5px #ffd23f;color:#fff2b0}.mm-tag.stop{font-weight:800;font-size:11px;opacity:.9}
.mm-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:16px;right:16px;display:flex;align-items:center;gap:10px}
.mm-x,.mm-btn{flex:none;height:44px;border:0;border-radius:14px;background:rgba(20,28,64,.85);box-shadow:inset 0 0 0 1.5px rgba(127,232,255,.4);color:#fff;font:900 14px var(--u3-ui,Nunito,sans-serif);cursor:pointer}
.mm-x{width:44px;display:grid;place-items:center}.mm-x svg{width:20px;height:20px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round}.mm-btn{padding:0 14px}
.mm-title{flex:1;min-width:0}.mm-title b{display:block;font:400 22px/1 var(--u3-display,'Lilita One',sans-serif);letter-spacing:.03em;color:#baff38}.mm-title small{display:block;margin-top:3px;font:800 12px/1.2 var(--u3-ui,Nunito,sans-serif);color:#9fc4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-legend{position:absolute;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);display:flex;flex-wrap:wrap;gap:6px 12px;max-width:min(520px,calc(100vw - 32px));font:800 11px var(--u3-ui,Nunito,sans-serif);color:#b9cbef}
.mm-legend i{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);vertical-align:-1px}
.mm-nft{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
.mm-pitch,.mm-own{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto;padding:10px 12px 10px 14px;border-radius:16px;background:rgba(18,12,40,.9);box-shadow:inset 0 0 0 2px #ffd23f,0 8px 24px #0009}
#mapMineNote{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:8px 10px;border-radius:14px;text-align:left;background:rgba(18,12,40,.75);box-shadow:inset 0 0 0 2px #baff38}#mapMineNote[hidden]{display:none}#mapMineNote img{width:40px;height:40px;border-radius:9px;flex:none}#mapMineNote span{flex:1;min-width:0}#mapMineNote b{display:block;font:900 14px/1.2 Nunito,sans-serif;color:#baff38}#mapMineNote small{display:block;font:700 12px/1.3 Nunito,sans-serif;color:#d6dcf5}#mapMineNote button{flex:none;cursor:pointer}
.vm-shopline.warn{color:#ffd166;font-weight:800}
.mm-own{box-shadow:inset 0 0 0 2px #baff38,0 8px 24px #0009}.mm-own img{width:44px;height:44px;border-radius:10px}
.mm-pitch span,.mm-own span{flex:1;min-width:0}.mm-pitch b,.mm-own b{display:block;font:900 14px/1.2 var(--u3-ui,Nunito,sans-serif);color:#ffe27a}.mm-own b{color:#baff38}
.mm-pitch small,.mm-own small{display:block;margin-top:2px;font:700 12px/1.3 var(--u3-ui,Nunito,sans-serif);color:#d6dcf5}
.mm-pitch em{flex:none;font:800 12px var(--u3-ui,Nunito,sans-serif);color:#9fb0d8;font-style:normal}
.mm-buy{flex:none;display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 16px;border:0;border-radius:14px;background:linear-gradient(180deg,#D4FF85,#97E35F 55%);box-shadow:0 4px 0 #4f8f2a;color:#15330F;font:900 16px var(--u3-ui,Nunito,sans-serif);cursor:pointer}
.mm-buy img{width:22px;height:22px}.mm-buy:disabled{filter:grayscale(.7);opacity:.6;cursor:not-allowed}
@media (max-width:600px){.mm-legend{bottom:calc(env(safe-area-inset-bottom,0px) + 118px)}.mm-pitch,.mm-own{flex-wrap:wrap}.mm-buy{width:100%;justify-content:center}.mm-btn{padding:0 10px;font-size:13px}}

/* the work card, the parcel counter, the statement's earnings (game/staff.js) */
#counter .ct-bar{height:10px;border-radius:99px;background:rgba(20,32,78,.8);overflow:hidden;margin:6px 0}#counter .ct-bar i{display:block;height:100%;background:var(--lime);border-radius:99px}
#counter .ct-stat small{font:800 12px var(--ui);color:var(--lime)}#counter .ct-stat.ct-in{color:var(--lime)}#counter .ct-inbox .ct-amt.ct-in{color:var(--lime)}
#counter .ct-parcel select{min-height:44px}#counter .ct-gifts{display:flex;gap:8px;flex-wrap:wrap}#counter .ct-gifts label{cursor:pointer}#counter .ct-gifts input{position:absolute;opacity:0;pointer-events:none}
#counter .ct-gifts span{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;font-size:26px;background:rgba(20,32,78,.7);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}#counter .ct-gifts input:checked+span{background:rgba(186,255,56,.2);box-shadow:inset 0 0 0 3px var(--lime)}#counter .ct-gifts input:focus-visible+span{outline:2px solid #fff}
#counter .ct-mail li.new{box-shadow:inset 0 0 0 2px var(--lime)}#counter .ct-mail li span{font-weight:600;line-height:1.35}
#landway{pointer-events:auto;cursor:pointer}#landway small{font:800 10px var(--ui);color:var(--lime);text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap}
#counter .ct-plots{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:190px;overflow:auto}#counter .ct-plots li{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"n w f" "m w f";column-gap:6px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.06)}#counter .ct-plots b{grid-area:n;font:900 13px var(--ui)}#counter .ct-plots small{grid-area:m;font:700 11px var(--ui);opacity:.8}#counter .ct-plots .tb{font-size:12px;padding:6px 8px;min-height:32px}
#map .mpin.property span{background:#b6f04a;color:#1a0f3d;font-weight:900}#map .mpin.property::after{background:#b6f04a}