/* GrowBlocks UI v3 (src/gb-ui.js + src/gb-hud3.js), main plaza, only under html.ui3 (?ui=v3 or CONFIG.UI_V3).
   The system (approved in ui-proto.html, Juan 30-sep-2026):
   - Everything you can press is a BLOCK: a coloured top face over a darker side face (the cube's side); pressing sinks it.
     Information is FLAT (glass plates, chips, bars). Depth means "you can press this".
   - ONE lime block per screen: the next action (PLAY). Selected / on = cyan. Rewards and XP = gold.
   - Type: Lilita One for titles and numbers; Nunito 800/900 for everything you read, sentence case.
   - Readability first: nothing you read under 13px on a phone (12px only for tiny meta), text over the 3D world always
     sits on a plate, every text/background pair at WCAG AA or better.
   - Sizes on an 8px grid: blocks 36 / 48 / 56 / hero; nothing pressable under 44px on a phone. */

@font-face{font-family:'U3 Display';src:url('assets/ui-fonts/LilitaOne.ttf') format('truetype');font-display:swap}
@font-face{font-family:'U3 UI';src:url('assets/ui-fonts/Nunito.ttf') format('truetype');font-weight:200 1000;font-display:swap}
html.ui3{
 --u3-deep:#0F1A45;--u3-slab:#1C2B62;--u3-slab2:#233673;--u3-line:#3A54A8;--u3-text:#EEF3FF;--u3-muted:#B4C2E8;--u3-dim:#8494C4;
 --u3-lime:#BAFF38;--u3-pink:#FF68BC;--u3-gold:#FFE369;--u3-violet:#6D52E8;--u3-cyan:#35C6EA;--u3-red:#FF4D6D;--u3-slate:#34488F;
 --u3-edge:#0A1233;--u3-display:'U3 Display',Launch,'Lilita One',system-ui,sans-serif;--u3-ui:'U3 UI',Nunito,system-ui,sans-serif;
 --u3-spring:cubic-bezier(.3,1.6,.5,1);
 --u3-safe-t:env(safe-area-inset-top,0px);--u3-safe-b:env(safe-area-inset-bottom,0px);--u3-safe-l:env(safe-area-inset-left,0px);--u3-safe-r:env(safe-area-inset-right,0px);
}

/* ---------------- the old HUD stays in the page (its modules keep working), out of sight ---------------- */
html.ui3 #hud>.brand,html.ui3 #hud>.stats,html.ui3 #hud .destination,html.ui3 #hud .controls,html.ui3 #partyControls,html.ui3 .mhud,
html.ui3 #shooterOpen,html.ui3 .launch-theater>.launch-chip,html.ui3 .gb-col>.col-chip,html.ui3 .xph,html.ui3 .mb-letter,
html.ui3 .gb-testnet,html.ui3 .guest-chip,html.ui3 .wallet-hud .wallet-chip,html.ui3 .home-link{display:none!important}

/* ================================================= BLOCK ================================================= */
.u3-blk{
 --c:var(--u3-slate);--ink:#fff;--d:5px;--h:48px;--r:14px;--side:color-mix(in oklab,var(--c) 58%,#0d1348);
 position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
 height:var(--h);min-width:var(--h);padding:0 18px;margin:0 0 var(--d);border:0;border-radius:var(--r);cursor:pointer;user-select:none;
 color:var(--ink);font:800 16px/1 var(--u3-ui);letter-spacing:.01em;white-space:nowrap;text-shadow:none;
 background:linear-gradient(180deg,color-mix(in oklab,var(--c) 84%,#fff) 0%,var(--c) 55%);
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 var(--d) 0 var(--side),0 calc(var(--d) + 4px) 10px rgba(5,10,40,.35);
 transition:translate .14s var(--u3-spring),box-shadow .14s var(--u3-spring),filter .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.u3-blk:active,.u3-blk.u3-down{translate:0 calc(var(--d) - 1px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 1px 0 var(--side),0 2px 4px rgba(5,10,40,.3);transition-duration:.06s}
@media (hover:hover){.u3-blk:hover{filter:brightness(1.07)}}
.u3-blk:focus-visible{outline:3px solid #fff;outline-offset:3px}
.u3-blk[disabled]{--c:#4A5886;--ink:#C3CCE8;cursor:not-allowed}
.u3-blk.s{--h:36px;--d:4px;--r:11px;padding:0 13px;font-size:14px;gap:6px}
.u3-blk.l{--h:56px;--d:6px;--r:16px;padding:0 22px;font-size:18px}
.u3-blk.hero{--h:64px;--d:7px;--r:18px;padding:0 28px;font:400 24px/1 var(--u3-display);letter-spacing:.02em}
.u3-blk.icon{padding:0;width:var(--h)}
.u3-blk.round{border-radius:50%;padding:0;width:var(--h)}
.u3-blk.lime{--c:var(--u3-lime);--ink:#15330F}.u3-blk.pink{--c:var(--u3-pink);--ink:#3A0A28}.u3-blk.gold{--c:var(--u3-gold);--ink:#3A2B00}
.u3-blk.cyan{--c:var(--u3-cyan);--ink:#062A36}.u3-blk.violet{--c:var(--u3-violet);--ink:#fff}.u3-blk.red{--c:var(--u3-red);--ink:#fff}.u3-blk.slate{--c:var(--u3-slate);--ink:#fff}
.u3-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.u3-blk.round .u3-ic{width:calc(var(--h) * .44);height:calc(var(--h) * .44)}
/* over the 3D world a block gets an ink rim so it never melts into the scene */
.u3 .u3-blk{box-shadow:0 0 0 2px var(--u3-edge),inset 0 1.5px 0 rgba(255,255,255,.5),0 var(--d) 0 var(--side),0 var(--d) 0 2px var(--u3-edge),0 calc(var(--d) + 6px) 14px rgba(5,10,40,.45)}
.u3 .u3-blk:active,.u3 .u3-blk.u3-down{box-shadow:0 0 0 2px var(--u3-edge),inset 0 1.5px 0 rgba(255,255,255,.35),0 1px 0 var(--side),0 1px 0 2px var(--u3-edge)}
.u3-key{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:6px;background:rgba(10,18,51,.25);font:900 11.5px/1 var(--u3-ui)}
.u3-dot{position:absolute;top:-6px;right:-6px;z-index:2;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--u3-red);color:#fff;font:900 12px/22px var(--u3-ui);text-align:center;box-shadow:0 0 0 2px var(--u3-edge)}
.u3-dot.pop{animation:u3pop .45s var(--u3-spring)}
@keyframes u3pop{from{scale:.3}}
.u3-dw{position:relative;display:inline-block}

/* ================================================= FLAT ================================================= */
.u3-glass{background:rgba(20,32,78,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:18px;box-shadow:0 0 0 1.5px rgba(135,169,236,.3),0 8px 24px rgba(5,10,40,.35);color:var(--u3-text)}
.u3-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.u3-bar>i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#FFD23F,var(--u3-gold));transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* ================================================= PLAZA HUD ================================================= */
.u3{position:fixed;inset:0;z-index:15;pointer-events:none;font-family:var(--u3-ui);color:var(--u3-text)}
.u3[hidden]{display:none}
.u3>*{position:absolute;pointer-events:auto}
.u3 [hidden]{display:none!important}
.u3-me{left:20px;top:20px;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;max-width:360px}
.u3-av{display:grid;place-items:center;width:50px;height:50px;flex:none;border:0;border-radius:14px;cursor:pointer;color:#fff;font:400 24px/1 var(--u3-display);
 background:linear-gradient(180deg,#8B74FF,var(--u3-violet) 60%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 0 0 2px var(--u3-edge),0 4px 0 #33238A,0 4px 0 2px var(--u3-edge);margin-bottom:4px;transition:translate .12s var(--u3-spring)}
.u3-av:active,.u3-av.u3-down{translate:0 3px}
.u3-who{min-width:0;display:grid;gap:6px}
.u3-name{font:900 17px/1.1 var(--u3-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.u3-xp{display:flex;align-items:center;gap:8px}
.u3-xp .u3-bar{width:110px}
.u3-xp span{font:800 12.5px var(--u3-ui);color:var(--u3-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.u3-lvl{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:12px;cursor:pointer;color:#3A2B00;font:400 22px/1 var(--u3-display);
 background:linear-gradient(180deg,#FFF3A6,var(--u3-gold) 60%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),0 0 0 2px var(--u3-edge),0 4px 0 #B08E1C,0 4px 0 2px var(--u3-edge);margin-bottom:4px;transition:translate .12s var(--u3-spring)}
.u3-lvl:active,.u3-lvl.u3-down{translate:0 3px}
.u3-signin{justify-self:start}
.u3-goal{left:20px;top:104px;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border:0;cursor:pointer;text-align:left;font-family:var(--u3-ui)}
.u3-goal .u3-ic{width:30px;height:30px;padding:5px;border-radius:9px;background:rgba(255,227,105,.18);color:var(--u3-gold);box-sizing:border-box}
.u3-goal b{display:block;font:900 14px/1.2 var(--u3-ui)}
.u3-goal small{display:block;font:700 12.5px/1.3 var(--u3-ui);color:var(--u3-muted)}
.u3-launch{left:50%;top:20px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:7px 8px 7px 12px;white-space:nowrap}
.u3-live{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:9px;background:rgba(255,104,188,.2);color:#FF9FD2;font:900 12.5px var(--u3-ui)}
.u3-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--u3-pink);box-shadow:0 0 0 3px rgba(255,104,188,.28)}
.u3-lt b{display:block;font:900 14.5px/1.2 var(--u3-ui)}
.u3-lt small{display:block;font:800 12.5px/1.3 var(--u3-ui);color:#FF9FD2}
.u3-launch .u3-blk{margin-bottom:4px}
.u3-place{left:50%;top:26px;transform:translateX(-50%);padding:8px 16px;border-radius:14px;background:rgba(20,32,78,.62);backdrop-filter:blur(8px);box-shadow:0 0 0 1.5px rgba(135,169,236,.22);pointer-events:none}
.u3-place b{font:400 20px/1 var(--u3-display);letter-spacing:.02em}
.u3-launch:not([hidden])~.u3-place{display:none}
.u3-tr{right:20px;top:20px;display:flex;gap:12px;align-items:flex-start}
.u3-online span{font-variant-numeric:tabular-nums}
.u3-acts{right:20px;bottom:20px;display:flex;gap:14px;align-items:flex-end}
.u3-a{position:relative}
.u3-al{display:none}
.u3-acts .u3-blk.round{--h:56px;--d:6px;border-radius:16px}
.u3-trade .u3-blk.round{width:auto;padding:0 20px;gap:8px;font-size:18px}
.u3-trade .u3-blk .u3-ic{width:22px;height:22px}
.u3-tl{display:inline}
.u3-moves .u3-key{position:absolute;right:-6px;bottom:-4px;background:#fff;color:var(--u3-edge);box-shadow:0 0 0 2px var(--u3-edge)}
.u3-chat{display:none}
.u3-play .u3-blk.hero{--h:72px;--d:8px;--r:20px;padding:0 36px;font-size:30px;gap:10px}
.u3-play .u3-blk.hero .u3-ic{width:28px;height:28px}
.u3-play .u3-blk.hero b{font:inherit}
/* the one idle motion in the plaza: a slow light across PLAY so the eye finds it */
.u3-play .u3-blk.hero::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:120% 0;animation:u3glint 6s ease-in-out 1.5s infinite;pointer-events:none}
@keyframes u3glint{0%,75%{background-position:120% 0}100%{background-position:-60% 0}}
.u3-walk{display:none}
/* desktop chat log bottom left, in the same plate language */
html.ui3:not(.mhud-on) #chatFeed{border-radius:18px!important}
html.ui3 .chat-feed .cf-bar{border-radius:14px!important;background:rgba(15,26,68,.86)!important;box-shadow:0 0 0 1.5px rgba(135,169,236,.3)!important;border:0!important;min-height:44px}
html.ui3 .chat-feed .cf-input{font:700 15px var(--u3-ui)!important}

/* ---------------- phone: the world gets the screen; PLAY in the thumb corner, Trade / Moves / Chat around it ---------------- */
html.ui3.mhud-on .u3-me{left:calc(12px + var(--u3-safe-l));top:calc(12px + var(--u3-safe-t));padding:7px 14px 7px 7px;gap:10px;max-width:calc(100vw - 100px)}
html.ui3.mhud-on .u3-av{width:44px;height:44px;font-size:21px;border-radius:13px}
html.ui3.mhud-on .u3-name{font-size:16px;max-width:130px}
html.ui3.mhud-on .u3-xp .u3-bar{width:84px}
html.ui3.mhud-on .u3-lvl{width:40px;height:40px;font-size:20px}
html.ui3.mhud-on .u3-goal{left:calc(12px + var(--u3-safe-l));top:calc(84px + var(--u3-safe-t))}
html.ui3.mhud-on .u3-launch{left:calc(12px + var(--u3-safe-l));right:calc(12px + var(--u3-safe-r));top:calc(146px + var(--u3-safe-t));transform:none}
html.ui3.mhud-on .u3-lt{flex:1;min-width:0}
html.ui3.mhud-on .u3-place{display:none}
html.ui3.mhud-on .u3-tr{right:calc(12px + var(--u3-safe-r));top:calc(12px + var(--u3-safe-t));flex-direction:column;align-items:flex-end;gap:12px}
html.ui3.mhud-on .u3-online,html.ui3.mhud-on .u3-lbl{display:none}
html.ui3.mhud-on .u3-menub{width:48px;padding:0}
html.ui3.mhud-on .u3-acts{right:0;bottom:0;width:300px;height:320px;display:block}
html.ui3.mhud-on .u3-a{position:absolute;display:grid;justify-items:center}
html.ui3.mhud-on .u3-play{right:calc(16px + var(--u3-safe-r));bottom:calc(28px + var(--u3-safe-b))}
html.ui3.mhud-on .u3-play .u3-blk.hero{--h:96px;--d:8px;width:96px;border-radius:50%;padding:0;flex-direction:column;gap:2px;font-size:22px}
html.ui3.mhud-on .u3-play .u3-blk.hero .u3-ic{width:34px;height:34px}
html.ui3.mhud-on .u3-trade{right:calc(134px + var(--u3-safe-r));bottom:calc(30px + var(--u3-safe-b))}
html.ui3.mhud-on .u3-moves{right:calc(124px + var(--u3-safe-r));bottom:calc(128px + var(--u3-safe-b))}
html.ui3.mhud-on .u3-chat{display:grid;right:calc(36px + var(--u3-safe-r));bottom:calc(156px + var(--u3-safe-b))}
html.ui3.mhud-on .u3-acts .u3-blk.round{border-radius:50%;padding:0;width:var(--h)}
html.ui3.mhud-on .u3-trade .u3-blk.round{--h:62px}
html.ui3.mhud-on .u3-moves .u3-blk.round{--h:54px}
html.ui3.mhud-on .u3-chat .u3-blk.round{--h:56px}
html.ui3.mhud-on .u3-tl,html.ui3.mhud-on .u3-key{display:none}
/* thumb labels on a plate: readable over any part of the world */
html.ui3.mhud-on .u3-al{display:block;margin-top:2px;padding:3px 8px;border-radius:8px;background:rgba(10,18,51,.72);font:900 12.5px/1.2 var(--u3-ui);color:#fff}
html.ui3.mhud-on .u3-walk{display:block;left:calc(16px + var(--u3-safe-l));bottom:calc(30px + var(--u3-safe-b));padding:10px 14px;border-radius:14px;background:rgba(10,18,51,.72);font:900 13.5px var(--u3-ui);pointer-events:none;transition:opacity .4s}
html.ui3.mhud-on .u3-walk.gone{opacity:0}
/* phones held sideways: shorter arc, the goal pill steps aside */
@media (orientation:landscape) and (max-height:500px){
 html.ui3.mhud-on .u3-goal{display:none!important}
 html.ui3.mhud-on .u3-launch{left:50%;right:auto;top:calc(10px + var(--u3-safe-t));transform:translateX(-50%)}
 html.ui3.mhud-on .u3-tr{flex-direction:row}
 html.ui3.mhud-on .u3-play{bottom:calc(18px + var(--u3-safe-b))}
 html.ui3.mhud-on .u3-play .u3-blk.hero{--h:84px;width:84px;font-size:20px}
 html.ui3.mhud-on .u3-trade{right:calc(118px + var(--u3-safe-r));bottom:calc(18px + var(--u3-safe-b))}
 html.ui3.mhud-on .u3-moves{right:calc(196px + var(--u3-safe-r));bottom:calc(22px + var(--u3-safe-b))}
 html.ui3.mhud-on .u3-chat{right:calc(24px + var(--u3-safe-r));bottom:calc(126px + var(--u3-safe-b))}
 html.ui3.mhud-on .u3-walk{bottom:calc(16px + var(--u3-safe-b))}
}
/* windows and sheets above the HUD: the HUD steps back so nothing peeks through */
html.ui3.u3-menu-open .u3,html.ui3 body.gb-terminal-open.mhud-on .u3-acts{visibility:hidden}

/* ================================================= MENU ================================================= */
.u3-menu{position:fixed;inset:0;z-index:62;display:grid;place-items:center;padding:24px;background:rgba(9,15,42,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-family:var(--u3-ui);color:var(--u3-text)}
.u3-menu[hidden]{display:none}
.u3-mbox{width:min(920px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:26px 28px 28px;border-radius:26px;background:linear-gradient(180deg,var(--u3-slab2),var(--u3-slab));
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.12),0 0 0 1.5px var(--u3-line),0 8px 0 #0D1640,0 24px 48px rgba(3,6,25,.55);animation:u3rise .28s cubic-bezier(.2,.9,.25,1)}
@keyframes u3rise{from{translate:0 24px;opacity:0}}
.u3-mhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.u3-mhead>div{flex:1}
.u3-h1{margin:0;font:400 32px/1.05 var(--u3-display);letter-spacing:.01em}
.u3-meta{margin:4px 0 0;font:700 13.5px/1.4 var(--u3-ui);color:var(--u3-muted)}
.u3-mcols{display:grid;grid-template-columns:1.55fr 1fr;gap:10px 30px}
.u3-sec{margin:18px 0 10px;font:900 14px var(--u3-ui);color:var(--u3-muted)}
.u3-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.u3-tile{--h:66px;--d:5px;justify-content:flex-start;gap:12px;padding:0 14px 0 12px;text-align:left;white-space:normal;width:100%}
.u3-ti{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5)}
.u3-ti .u3-ic{width:22px;height:22px}
.u3-ti.pink{background:var(--u3-pink);color:#3A0A28}.u3-ti.gold{background:var(--u3-gold);color:#3A2B00}.u3-ti.cyan{background:var(--u3-cyan);color:#062A36}.u3-ti.violet{background:#8B74FF;color:#fff}.u3-ti.red{background:var(--u3-red);color:#fff}
.u3-tt{min-width:0}
.u3-tt b{display:block;font:900 15.5px/1.2 var(--u3-ui)}
.u3-tt small{display:block;margin-top:2px;font:700 13px/1.3 var(--u3-ui);color:#CBD5F2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u3-sets{display:grid;gap:10px}
.u3-set{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.06)}
.u3-set .u3-ic{color:var(--u3-muted)}
.u3-st{flex:1;font:900 15.5px/1.2 var(--u3-ui);text-align:left}
.u3-st small{display:block;margin-top:2px;font:700 13px var(--u3-ui);color:#CBD5F2}
.u3-setb{--h:60px;width:100%;justify-content:flex-start;gap:12px;padding:0 14px}
.u3-setb .u3-ic{color:#CBD5F2}
.u3-tog{position:relative;width:54px;height:32px;flex:none;border:0;border-radius:16px;background:#0E1942;box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 1.5px rgba(135,169,236,.35);cursor:pointer}
.u3-tog::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#C9D3F0;box-shadow:0 2px 0 #7C8AB5;transition:translate .18s var(--u3-spring),background .15s}
.u3-tog[aria-pressed=true]{background:var(--u3-cyan)}
.u3-tog[aria-pressed=true]::after{translate:22px 0;background:#fff;box-shadow:0 2px 0 #0F5E75}
.u3-tog:focus-visible{outline:3px solid #fff;outline-offset:3px}
.u3-leave{--c:#2A3A78;--h:48px;margin-top:18px;width:100%;justify-content:flex-start;gap:10px;padding:0 14px;font-size:15px;color:#FFB3C1}
html.ui3.mhud-on .u3-menu{padding:0;place-items:end stretch}
html.ui3.mhud-on .u3-mbox{width:100%;max-height:calc(100dvh - 40px - var(--u3-safe-t));border-radius:26px 26px 0 0;padding:20px 16px calc(22px + var(--u3-safe-b))}
html.ui3.mhud-on .u3-mcols{grid-template-columns:1fr;gap:0}
html.ui3.mhud-on .u3-tile{--h:64px}
html.ui3.mhud-on .u3-tt small{white-space:normal}

/* ================================================= WINDOWS =================================================
   gb-ui.js paints each window button with the colour its own CSS gives it (--c, --ink) and snaps its label to a
   readable size (--gbu-fs). Here that colour becomes a v3 block. :not(#gbu-x) lifts these over id-level rules. */
html.ui3 [data-gbu=solid]:not(#gbu-x){
 --side:color-mix(in oklab,var(--c) 58%,#0d1348);
 min-height:40px;border:0!important;border-radius:12px!important;color:var(--ink)!important;
 background:linear-gradient(180deg,color-mix(in oklab,var(--c) 84%,#fff) 0%,var(--c) 55%)!important;
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 4px 0 var(--side),0 7px 10px rgba(5,10,40,.28)!important;
 font-family:var(--u3-ui)!important;font-weight:800!important;font-size:var(--gbu-fs,15px)!important;letter-spacing:.01em!important;text-shadow:none!important;
 margin-bottom:4px;transition:translate .12s var(--u3-spring),box-shadow .12s var(--u3-spring),filter .12s;-webkit-tap-highlight-color:transparent}
html.ui3 [data-gbu=solid][data-gbf=d]:not(#gbu-x){font-family:var(--u3-display)!important;font-weight:400!important;letter-spacing:.02em!important;border-radius:16px!important}
@media (hover:hover){html.ui3 [data-gbu=solid]:not(#gbu-x):not(:disabled):hover{filter:brightness(1.07)}}
html.ui3 [data-gbu=solid]:not(#gbu-x):not(:disabled):active,html.ui3 [data-gbu=solid].u3-down:not(#gbu-x):not(:disabled){translate:0 3px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 1px 0 var(--side)!important;transition-duration:.05s}
html.ui3 [data-gbu=solid]:not(#gbu-x):disabled{filter:saturate(.35) brightness(.85);cursor:not-allowed}
html.ui3 [data-gbu]:not(#gbu-x):focus-visible{outline:3px solid #fff;outline-offset:3px}
html.ui3 [data-gbu=ghost]:not(#gbu-x){font-size:var(--gbu-fs,15px)!important}
/* close: a red block, same size as before, never under 44px on phones, always above its header */
html.ui3 [data-gbu=close]:not(#gbu-x){z-index:5;border:0!important;border-radius:12px!important;color:#fff!important;background:linear-gradient(180deg,#FF8599,var(--u3-red) 55%)!important;
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 3px 0 #9E2340!important;transition:translate .1s}
html.ui3 [data-gbu=close]:not(#gbu-x):active{translate:0 2px;box-shadow:0 1px 0 #9E2340!important}
html.ui3.mhud-on [data-gbu=close]:not(#gbu-x){min-width:44px!important;min-height:44px!important}
html.ui3.mhud-on [data-gbu=solid]:not(#gbu-x){min-height:44px!important}
/* inputs: wells */
html.ui3 [data-gbi=field]:not(#gbu-x){background:#0E1942!important;border:0!important;border-radius:14px!important;color:#fff!important;box-shadow:inset 0 3px 0 rgba(0,0,0,.35),0 0 0 1.5px rgba(58,84,168,.7)!important;font-size:max(16px,1em)!important}
html.ui3 [data-gbi=field]:not(#gbu-x):focus{box-shadow:inset 0 3px 0 rgba(0,0,0,.35),0 0 0 2px var(--u3-cyan)!important;outline:none}
/* titles */
html.ui3 :is(.pt,.sp-back,.tr-panel,.pb,.character-room,.launch-panel,.col-panel,#playersPanel,.game-home-confirm,.mb-panel,dialog[open],[role=dialog],.u3-window) :is(h1,h2):not(#gbu-x){font-family:var(--u3-display)!important;font-weight:400!important;letter-spacing:.01em;text-shadow:none}
/* frames: every window is a slab (the same surface as the menu) */
html.ui3 :is(.tr-panel,.launch-panel,.col-panel,.character-room,#playersPanel,.game-home-confirm,.mb-panel,.u3-window):not(#gbu-x){
 background:linear-gradient(180deg,var(--u3-slab2),var(--u3-slab))!important;border:0!important;border-radius:24px!important;color:var(--u3-text)!important;
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.12),0 0 0 1.5px var(--u3-line),0 8px 0 #0D1640,0 24px 48px rgba(3,6,25,.55)!important}
html.ui3 .pt:not(#gbu-x){background:linear-gradient(180deg,var(--u3-slab2),var(--u3-slab))!important;box-shadow:inset 1.5px 0 0 rgba(255,255,255,.08),0 0 0 1.5px var(--u3-line),0 24px 48px rgba(3,6,25,.55)!important}
/* leave confirm: the safe choice is the lime one */
html.ui3 .game-home-confirm [data-home=stay]{background:var(--u3-lime);color:#15330F}
html.ui3 .game-home-confirm [data-home=leave]{background:var(--u3-red);color:#fff}
/* mail joins the system (was paper-themed): readable text on the slab */
html.ui3 .mb-panel :is(p,span,time,small,summary){color:inherit}
html.ui3 .mb-panel .mb-row,html.ui3 .mb-panel details{background:rgba(255,255,255,.06)!important;border-color:transparent!important;color:var(--u3-text)!important;border-radius:14px!important}

@media (prefers-reduced-motion:reduce){
 html.ui3 .u3 *,html.ui3 .u3-menu *,html.ui3 [data-gbu]{animation:none!important;transition:none!important}
}

/* one-time tips ("Pinch to look closer") in the open sky, never on the player card */
html.ui3 .gb-sky-hint{top:calc(36% + var(--u3-safe-t))!important;font-family:var(--u3-ui)!important;font-weight:900!important}

/* PLAY picker (src/shooter-picker.js): its cards already are v3 blocks; each keeps its own PLAY (one click plays). Here
   the sheet takes the v3 slab, fonts and the press state; gb-ui.js leaves .sp-play unpainted. */
html.ui3 .sp.gc{background:linear-gradient(180deg,var(--u3-slab2),var(--u3-slab) 45%,var(--u3-deep))!important;color:var(--u3-text)}
html.ui3 .sp :is(.sp-name,.sp-sec){font-family:var(--u3-display)!important}
html.ui3 .sp .sp-play:not(:disabled){font-family:var(--u3-display)!important}
html.ui3 .sp :is(.sp-mode,.sp-blurb,.sp-live,.sp-nft,.sp-sec small,.gc-text,.gc-note){font-family:var(--u3-ui)}
html.ui3 .sp-sec small{text-transform:uppercase}
html.ui3 .sp-foot{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
html.ui3 .sp-foot .gc-note{flex:1 1 240px}
/* sentence case everywhere in v3: windows lose their shouty capitals (the words themselves are unchanged) */
html.ui3 :is(.pt,.sp-back,.tr-panel,.pb,.character-room,.launch-panel,.col-panel,#playersPanel,.game-home-confirm,.mb-panel,dialog[open],[role=dialog],.u3-window) :is(h1,h2,h3,summary,button,a,label,.gc-kicker):not(#gbu-x){text-transform:none!important;letter-spacing:normal!important}
html.ui3 :is(#playersPanel,.tr-panel,.col-panel,.launch-panel,.u3-window) :is(h1,h2):not(#gbu-x){font-size:24px!important}
/* v3 type wins over the game's global button rules (some set Nunito 400 on every button with !important) */
html.ui3 :is(#u3,#u3-menu,.sp-foot) :is(.u3-blk,.u3-av,.u3-lvl,.u3-goal,.u3-tog){font-family:var(--u3-ui)!important;font-weight:800!important;text-transform:none!important;letter-spacing:.01em!important}
html.ui3 :is(#u3,#u3-menu,.sp-foot) .u3-blk.hero,html.ui3 #u3 .u3-av,html.ui3 #u3 .u3-lvl{font-family:var(--u3-display)!important;font-weight:400!important;letter-spacing:.02em!important}
html.ui3 #u3 .u3-blk.hero b,html.ui3 #u3 .u3-blk.hero span{font:inherit!important}
/* terminal: blocks keep the terminal's own row rhythm (no extra bottom margin), so its sticky footer never covers a row */
html.ui3 .pt [data-gbu=solid]:not(#gbu-x){margin-bottom:0}

/* The eFroglets Shop button (src/froglets-mainnet.js sets html[data-efroglets=on] once the mainnet shop is on). PC: a lily
   pill between NFTs and Trade, the frog face as its icon. Phones: a round button above NFTs, beside Chat. */
.u3-frogs{display:none}
html[data-efroglets="on"] .u3-frogs{display:block}
/* Voxel Squad (src/voxel-squad-mint.js): desktop HUD only for now; on phones the mint opens from the NFTs panel later. */
.u3-vsq{display:none}
html[data-voxel-squad="on"] .u3-vsq{display:block}
.u3-vsq .u3-blk.round{width:auto;padding:0 18px 0 8px;gap:8px;font-size:18px}
html.ui3.mhud-on .u3-vsq{display:none!important}
.u3-blk.frog{--c:#5fd98a;--ink:#0c2a14}
.u3-frogs .u3-blk.round{width:auto;padding:0 18px 0 8px;gap:8px;font-size:18px}
.u3-frog-ic{width:40px;height:40px;border-radius:12px;image-rendering:pixelated;background:#a5d8e8;box-shadow:0 0 0 2px rgba(12,42,20,.35)}
/* Above NFTs, on the right thumb's side: the left half of a phone screen is the drag-to-walk area. */
html.ui3.mhud-on[data-efroglets="on"] .u3-frogs{display:grid;right:calc(112px + var(--u3-safe-r));bottom:calc(222px + var(--u3-safe-b))}
html.ui3.mhud-on .u3-frogs .u3-blk.round{--h:54px;width:var(--h);padding:0;border-radius:50%}
html.ui3.mhud-on .u3-frog-ic{width:36px;height:36px;border-radius:50%}
@media (orientation:landscape) and (max-height:500px){
 html.ui3.mhud-on[data-efroglets="on"] .u3-frogs{right:calc(274px + var(--u3-safe-r));bottom:calc(22px + var(--u3-safe-b))}
}