/* GrowBlocks UI v3, round 3 (Juan's 30-sep feedback). Loaded after gb-ui.css by src/gb-ui.js; same html.ui3 scope. */

/* ---- player card: a picture you can set, a cube level that says "tap me" when something is ready ---- */
.u3-av{position:relative;overflow:visible;padding:0}
.u3-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.u3-av-edit{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:#fff;color:var(--u3-edge);box-shadow:0 0 0 2px var(--u3-edge)}
.u3-av-edit .u3-ic{width:12px;height:12px;stroke-width:2.8}
.u3-lvl{position:relative;width:auto!important;min-width:64px;padding:0 10px 0 6px!important;gap:4px;grid-auto-flow:column;justify-content:center;border-radius:14px!important}
.u3-lvl .u3-cube{width:24px;height:24px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.u3-lvl [data-lv]{font:400 22px/1 var(--u3-display);font-variant-numeric:tabular-nums}
.u3-claim{position:absolute;top:-10px;right:-10px;padding:3px 7px;border-radius:9px;background:var(--u3-red);color:#fff;font:900 11.5px/1.2 var(--u3-ui);box-shadow:0 0 0 2px var(--u3-edge);animation:u3bob 1.2s ease-in-out infinite}
.u3-lvl.ready{animation:u3ready 1.4s ease-in-out infinite}
.u3-lvl.ready [data-lv]{animation:u3blink 1.4s steps(1) infinite}
@keyframes u3ready{0%,100%{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),0 0 0 0 rgba(255,227,105,.7)}50%{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),0 0 0 10px rgba(255,227,105,0)}}
@keyframes u3blink{0%,60%{color:#3A2B00}61%,100%{color:#C4560B}}
@keyframes u3bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
/* XP bar: gold with a light that runs along it now and then */
.u3-bar{position:relative}
.u3-xp .u3-bar{height:10px;border-radius:5px;box-shadow:inset 0 1px 0 rgba(0,0,0,.35)}
.u3-xp .u3-bar>i{background:linear-gradient(180deg,#FFF1A0,var(--u3-gold) 50%,#E6B91E)}
.u3-shine{position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:u3shine 5s ease-in-out 2s infinite;pointer-events:none}
@keyframes u3shine{0%,80%{left:-30%}100%{left:110%}}

/* ---- wallet: total, 24h change, flash on a deposit ---- */
.u3-wallet{gap:8px}
.u3-wt{font:400 18px/1 var(--u3-display);font-variant-numeric:tabular-nums}
.u3-wc{font:900 12.5px var(--u3-ui);padding:3px 7px;border-radius:8px;background:rgba(10,18,51,.35)}
.u3-wc:empty{display:none}
.u3-wc[data-dir=up]{color:#D9FF8A}
.u3-wc[data-dir=down]{color:#FFB3C1}
.u3-wallet.flash{animation:u3flash 1.2s ease-out}
@keyframes u3flash{0%{filter:brightness(1.6);scale:1.08}100%{filter:none;scale:1}}
.u3-toasts{right:20px;top:92px;display:grid;gap:8px;justify-items:end;pointer-events:none}
.u3-toast{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(20,32,78,.94);box-shadow:0 0 0 1.5px rgba(135,169,236,.35),0 10px 24px rgba(5,10,40,.4);animation:u3toast .45s var(--u3-spring);transition:opacity .4s,translate .4s}
.u3-toast.out{opacity:0;translate:20px 0}
.u3-toast>.u3-ic{width:32px;height:32px;padding:6px;border-radius:10px;background:rgba(255,255,255,.1);box-sizing:border-box}
.u3-toast.good>.u3-ic{background:var(--u3-lime);color:#15330F}
.u3-toast.launch>.u3-ic{background:var(--u3-pink);color:#3A0A28}
/* src/notify.js: every short message of every plaza and world. Kinds: good lime, warn gold, bad red, launch pink (a rim
   on the left and a tinted icon tile); actions sit on the right. Its own box (no HUD on the page) stands where the HUD's would. */
.u3-toast.warn>.u3-ic{background:var(--u3-gold);color:#3a2a00}
.u3-toast.bad>.u3-ic{background:var(--u3-red);color:#fff}
.u3-toast.gb-note{max-width:min(360px,calc(100vw - 24px));color:var(--u3-text)}
.u3-toast.gb-note>.ka-ic{width:36px;height:36px;padding:3px;flex:none;object-fit:contain}
.u3-toast.gb-note.good{box-shadow:inset 4px 0 0 var(--u3-lime),0 0 0 1.5px rgba(135,169,236,.35),0 10px 24px rgba(5,10,40,.4)}
.u3-toast.gb-note.warn{box-shadow:inset 4px 0 0 var(--u3-gold),0 0 0 1.5px rgba(135,169,236,.35),0 10px 24px rgba(5,10,40,.4)}
.u3-toast.gb-note.bad{box-shadow:inset 4px 0 0 var(--u3-red),0 0 0 1.5px rgba(255,120,140,.5),0 10px 24px rgba(5,10,40,.4)}
.u3-toast.gb-note.launch{box-shadow:inset 4px 0 0 var(--u3-pink),0 0 0 1.5px rgba(135,169,236,.35),0 10px 24px rgba(5,10,40,.4)}
.u3-toast.gb-note>span{min-width:0;flex:1}
.gb-note-acts{display:flex;gap:6px;flex:none;margin-left:4px}
.gb-note-acts button{min-height:34px;padding:4px 12px;border-radius:10px;border:0;background:var(--u3-lime);color:#15330F;font:900 13px var(--u3-ui);cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.gb-note-acts button+button{background:rgba(255,255,255,.12);color:var(--u3-text)}
.gb-notify{position:fixed;z-index:9000;font-family:var(--u3-ui,Nunito,system-ui,sans-serif)}
.u3-toast b{display:block;font:900 14.5px/1.2 var(--u3-ui)}
.u3-toast small{display:block;font:700 12.5px var(--u3-ui);color:var(--u3-muted)}
@keyframes u3toast{from{opacity:0;translate:24px 0}}
/* Arrival toast (src/gb-hud3.js arrivalToast): one tappable toast per burst of deposits, a "+2" count, a bump on merge. */
.u3-toast.u3-ttap{pointer-events:auto;cursor:pointer;border:0;color:var(--u3-text);text-align:left;font:inherit;max-width:min(320px,100%);-webkit-tap-highlight-color:transparent}
.u3-toast.u3-ttap>span{min-width:0;flex:1}
.u3-toast.u3-ttap b{display:flex;align-items:center;gap:6px;min-width:0}
.u3-tamt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u3-tcount{flex:none;font:900 11px/1 var(--u3-ui);font-style:normal;padding:3px 6px;border-radius:999px;background:var(--u3-lime);color:#15330F}
.u3-tcount[hidden]{display:none}
.u3-tgo{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity .2s,translate .2s}
.u3-toast.u3-ttap:hover .u3-tgo{opacity:1;translate:2px 0}
.u3-toast.u3-ttap:focus-visible{outline:2px solid var(--u3-lime);outline-offset:2px}
.u3-toast.u3-ttap:active{scale:.97}
.u3-toast.bump{animation:u3gain .4s var(--u3-spring)}
@media (prefers-reduced-motion:reduce){.u3-toast,.u3-toast.bump{animation:none}}
html.ui3.mhud-on .u3-wallet .u3-ic{display:none}
html.ui3.mhud-on .u3-wallet{--h:44px;padding:0 12px}
html.ui3.mhud-on .u3-toasts{left:12px;right:12px;top:auto;bottom:calc(210px + var(--u3-safe-b));justify-items:stretch}

/* ---- launch carousel: token logo, status, dots when there are several ---- */
.u3-lwrap{position:relative;flex:none}
.u3-llogo,.u3-lmono{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;object-fit:cover;background:#2A3E82;box-shadow:0 0 0 2px var(--u3-edge);color:#fff;font:400 20px/1 var(--u3-display)}
.u3-lwrap .u3-live{position:absolute;left:50%;bottom:-8px;translate:-50% 0;height:18px;padding:0 6px;font-size:10.5px;box-shadow:0 0 0 2px var(--u3-edge);background:var(--u3-pink);color:#3A0A28}
.u3-lwrap .u3-live::before{display:none}
.u3-launch{padding:8px 8px 8px 10px!important;min-width:260px}
.u3-launch[data-tag=trade] .u3-lwrap .u3-live{background:var(--u3-lime);color:#15330F}
.u3-launch[data-tag=soon] .u3-lt small,.u3-launch[data-tag=trade] .u3-lt small{color:var(--u3-muted)}
.u3-launch.turn .u3-lwrap,.u3-launch.turn .u3-lt{animation:u3turn .35s ease-out}
@keyframes u3turn{from{opacity:0;translate:0 6px}}
.u3-ldots{position:absolute;left:50%;bottom:-14px;translate:-50% 0;display:flex;gap:6px}
.u3-ldots[hidden]{display:none}
.u3-ldots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.4);cursor:pointer;box-shadow:0 0 0 1.5px rgba(10,18,51,.6);transition:width .2s}
.u3-ldots button.on{width:20px;background:#fff}
.u3-ldots button::after{content:"";position:absolute;inset:-12px -4px}

/* ---- picture popover ---- */
.u3-pfp{position:fixed;z-index:70;width:260px;padding:14px;display:grid;gap:8px;font-family:var(--u3-ui);color:var(--u3-text);animation:u3toast .3s var(--u3-spring)}
.u3-pfp-t{font:900 16px var(--u3-ui)}
.u3-pfp-s{margin:0 0 4px;font:700 13px/1.4 var(--u3-ui);color:var(--u3-muted)}
.u3-pfp .u3-blk{width:100%;justify-content:flex-start;margin-bottom:4px}

/* ---- scrollbars: part of the design (thin rounded thumb inside its window, no system grey bar) ---- */
html.ui3 *{scrollbar-width:thin;scrollbar-color:rgba(135,169,236,.55) transparent}
html.ui3 ::-webkit-scrollbar{width:10px;height:10px}
html.ui3 ::-webkit-scrollbar-track{background:transparent}
html.ui3 ::-webkit-scrollbar-thumb{background:rgba(135,169,236,.5);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
html.ui3 ::-webkit-scrollbar-thumb:hover{background-color:rgba(135,169,236,.8)}
html.ui3 ::-webkit-scrollbar-corner{background:transparent}

/* ---- mail: the dark slab needs light letters (was dark ink on dark) ---- */
html.ui3 .mb-panel{--mb-ink:#EEF3FF;--mb-paper:#233673;color:#EEF3FF!important}
html.ui3 .mb-panel :is(p,span,time,small,b,strong,h2,h3,summary,div,li,label):not(button *):not(a *):not(.mb-count){color:inherit!important}
html.ui3 .mb-panel :is(time,small,.mb-sender){color:var(--u3-muted)!important}
html.ui3 .mb-panel :is(.mb-title,b,strong){color:#fff!important}
html.ui3 .mb-panel details,html.ui3 .mb-panel .mb-row{background:rgba(255,255,255,.07)!important;border:0!important;box-shadow:none!important}
html.ui3 .mb-panel details[open]{background:rgba(255,255,255,.1)!important}
html.ui3 .mb-panel header{border-color:rgba(135,169,236,.25)!important}

/* ---- plaza list: a real banner on every plaza ---- */
html.ui3 .pb-row{position:relative;overflow:hidden;padding:0!important;border-radius:18px!important;background:rgba(14,25,66,.72)!important;box-shadow:0 0 0 1.5px rgba(135,169,236,.3),0 5px 0 #0D1640!important;margin:0 0 14px!important}
html.ui3 .pb-row.here{box-shadow:0 0 0 3px var(--u3-cyan),0 5px 0 #0D1640!important;outline:0!important}
html.ui3 .pb-ban{display:block;height:112px;background:#223470 center/cover no-repeat}
html.ui3 .pb-ban.none{height:10px;background:linear-gradient(90deg,var(--u3-violet),var(--u3-cyan))}
html.ui3 .pb-row>*:not(.pb-ban){margin-left:14px!important;margin-right:14px!important}
html.ui3 .pb-row .pb-head{margin-top:10px!important}
html.ui3 .pb-row>*:last-child{margin-bottom:12px!important}
html.ui3 .pb-name{font:400 20px/1.1 var(--u3-display)!important;letter-spacing:.01em!important}
html.ui3 .pb-name small{display:block;margin-top:3px;font:700 13px var(--u3-ui)!important;color:var(--u3-muted)!important}
html.ui3 .pb-tag{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:9px;background:var(--u3-cyan)!important;color:#062A36!important;font:900 12px var(--u3-ui)!important;text-transform:none!important;box-shadow:0 0 0 2px var(--u3-edge)}

/* ---- stones and gift bar (src/gift-bar.js): v3 plate, slots as wells, the stones crate a gold block ---- */
html.ui3 .gbq-bar{background:rgba(20,32,78,.86)!important;backdrop-filter:blur(10px);border:0!important;border-radius:18px!important;box-shadow:0 0 0 1.5px rgba(135,169,236,.3),0 8px 22px rgba(5,10,40,.4)!important;padding-top:20px!important}
html.ui3 .gbq-slot{background:#0E1942!important;border:0!important;box-shadow:inset 0 3px 0 rgba(0,0,0,.35),0 0 0 1.5px rgba(58,84,168,.7)!important;border-radius:14px!important}
html.ui3 .gbq-slot.armed{box-shadow:inset 0 3px 0 rgba(0,0,0,.35),0 0 0 2px var(--u3-cyan)!important}
html.ui3 .gbq-stones{border:0!important;border-radius:14px!important;background:linear-gradient(180deg,color-mix(in oklab,var(--u3-gold) 84%,#fff),var(--u3-gold) 55%)!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 4px 0 #A8841C!important;transition:translate .1s}
html.ui3 .gbq-stones:active{translate:0 3px;box-shadow:0 1px 0 #A8841C!important}
html.ui3 .gbq-k{top:-17px!important;font:800 11px/1 var(--u3-ui)!important;letter-spacing:0!important;text-transform:none!important;color:var(--u3-muted)!important}
html.ui3 .gbq-clock{font:800 12px/1.35 var(--u3-ui)!important;color:var(--u3-muted)!important;border-left-color:rgba(135,169,236,.25)!important}
html.ui3 .gbq-clock b{font:400 16px var(--u3-display)!important;color:#fff!important}
html.ui3 .gbq-badge{background:var(--u3-red)!important;color:#fff!important;box-shadow:0 0 0 2px var(--u3-edge)!important;font:900 11.5px var(--u3-ui)!important}
html.ui3 .gbq-toast{background:rgba(20,32,78,.94)!important;border:0!important;box-shadow:0 0 0 1.5px rgba(135,169,236,.35),0 10px 24px rgba(5,10,40,.4)!important;font:700 14px/1.45 var(--u3-ui)!important}
html.ui3 .gbq-panel{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 .gbq-st{background:rgba(255,255,255,.06)!important;border:0!important;border-radius:16px!important}
html.ui3 .gbq-st.ready{box-shadow:0 0 0 2px var(--u3-gold)!important}
html.ui3 .gbq-sti small{font:700 13px var(--u3-ui)!important;color:var(--u3-muted)!important}

/* ---- trade terminal: the coin rail's arrows as small blocks over a soft fade ---- */
html.ui3 .pt-rail-arrow{width:44px!important;background:none!important;box-shadow:none!important;border:0!important;margin:0!important}
html.ui3 .pt-rail-arrow[data-dir="-1"]{background:linear-gradient(90deg,var(--u3-slab) 40%,transparent)!important}
html.ui3 .pt-rail-arrow[data-dir="1"]{background:linear-gradient(270deg,var(--u3-slab) 40%,transparent)!important}
html.ui3 .pt-rail-arrow span{width:32px!important;height:32px!important;border:0!important;border-radius:10px!important;color:#fff!important;background:linear-gradient(180deg,#4A62B0,var(--u3-slate) 55%)!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),0 3px 0 #1D2E66,0 0 0 1.5px var(--u3-edge)!important;transition:translate .1s}
html.ui3 .pt-rail-arrow:active span{translate:0 2px}
@media (hover:hover){html.ui3 .pt-rail-arrow:hover span{background:linear-gradient(180deg,#5B75C8,#3F56A8 55%)!important}}

@media (prefers-reduced-motion:reduce){html.ui3 .u3-lvl.ready,html.ui3 .u3-lvl.ready *,html.ui3 .u3-claim,html.ui3 .u3-shine{animation:none!important}}

/* ---- round 3 layout fixes ---- */
/* carousel dots: small pills (global button rules gave them 44px height) */
html.ui3 .u3-ldots button{width:8px!important;height:8px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border-radius:4px!important;font-size:0!important}
html.ui3 .u3-ldots button.on{width:20px!important}
html.ui3 .u3-ldots{bottom:-15px}
/* desktop card: room for the XP numbers next to the level */
html.ui3:not(.mhud-on) .u3-me{max-width:none}
/* phone: the wallet gets its own row under your card; goal and launch step down; news toasts appear under them */
html.ui3.mhud-on .u3-wallet{position:fixed;left:calc(12px + var(--u3-safe-l));top:calc(80px + var(--u3-safe-t));margin:0}
html.ui3.mhud-on .u3-wcreate{position:fixed;left:calc(12px + var(--u3-safe-l));top:calc(80px + var(--u3-safe-t));margin:0}
html.ui3.mhud-on .u3-goal{top:calc(140px + var(--u3-safe-t))}
html.ui3.mhud-on .u3-launch{top:calc(202px + var(--u3-safe-t));right:calc(12px + var(--u3-safe-r))}
html.ui3.mhud-on .u3-toasts{top:calc(276px + var(--u3-safe-t));bottom:auto}
html.ui3.mhud-on .u3-me{max-width:calc(100vw - 88px)}
/* phone card: bar + numbers fit next to the level */
html.ui3.mhud-on .u3-xp{gap:6px}
html.ui3.mhud-on .u3-xp .u3-bar{width:60px}
html.ui3.mhud-on .u3-xp span{font-size:11.5px}
html.ui3.mhud-on .u3-lvl{min-width:58px;padding:0 8px 0 5px!important}
html.ui3.mhud-on .u3-lvl [data-lv]{font-size:19px}
html.ui3.mhud-on .u3-lvl .u3-cube{width:20px;height:20px}
/* phone left column: tops come from the stack in gb-hud3.js */
/* phone left column: tops come from the stack in gb-hud3.js */

/* NFT picker inside the picture popover */
.u3-nfts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:260px;overflow:auto;padding:2px}
.u3-nft{aspect-ratio:1;padding:0!important;min-height:0!important;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#0E1942;box-shadow:0 0 0 1.5px rgba(135,169,236,.35);transition:translate .1s,box-shadow .1s}
.u3-nft img{width:100%;height:100%;object-fit:cover;display:block}
.u3-nft:hover,.u3-nft:focus-visible{box-shadow:0 0 0 3px var(--u3-cyan);outline:0}
.u3-nft:active{translate:0 2px}
html.ui3.mhud-on .u3-pfp{width:min(300px,calc(100vw - 24px))}
/* NFTs: the same wide label block as Trade on desktop (a round block cannot hold a word); icon only in the phone arc */
.u3-moves .u3-blk.round{width:auto;padding:0 20px;gap:8px;font-size:18px}
.u3-moves .u3-blk .u3-ic{width:22px;height:22px}
html.ui3.mhud-on .u3-moves .u3-blk.round{width:var(--h);padding:0}
html.ui3.mhud-on .u3-moves .u3-blk .u3-ic{width:calc(var(--h) * .44);height:calc(var(--h) * .44)}

/* narrow desktop windows: the launch pill moves under the player card instead of sliding under the wallet */
html.ui3:not(.mhud-on) .u3-launch.u3-left{left:20px;transform:none}
html.ui3:not(.mhud-on) .u3-launch.u3-left~.u3-place{display:none}
/* narrow desktop windows: the right-hand group gets compact (icons, no 24h chip) so it never meets the player card */
@media (max-width:980px){html.ui3:not(.mhud-on) .u3-online span,html.ui3:not(.mhud-on) .u3-lbl,html.ui3:not(.mhud-on) .u3-wc{display:none}html.ui3:not(.mhud-on) .u3-online,html.ui3:not(.mhud-on) .u3-menub{width:48px;padding:0}html.ui3:not(.mhud-on) .u3-xp .u3-bar{width:80px}}

/* other plazas (project.html, Games / Players halls, published creator plazas): their old HUD is hidden like the main one */
html.ui3 .project-header,html.ui3 .project-actions,html.ui3 .project-help,html.ui3 #chatToggle,html.ui3 .gb-status{display:none!important}
/* plazas without the bottom-left chat log (all but the main one): Chat is a block in the action group on desktop too */
html.ui3:not(.mhud-on) .u3:not(.u3-has-feed) .u3-chat{display:block}
/* the docks keep display:flex!important at higher specificity in hud-dock.css; v3 wins with an id-level :not() */
html.ui3 .gb-dock:not(#gbu-x),html.ui3 .project-actions:not(#gbu-x),html.ui3 .project-header:not(#gbu-x){display:none!important}

/* XP landing on the v3 card: pop, floating +N, a light along the bar, a bigger pop on level up */
.u3-me.u3-gain{animation:u3gain .55s var(--u3-spring)}
.u3-me.u3-gain .u3-shine{animation:u3shine .8s ease-out}
.u3-lvl.xpc-bump{animation:u3gain .5s var(--u3-spring)}
.u3-lvl.u3-lvup{animation:u3lvup 1.1s var(--u3-spring)}
@keyframes u3gain{0%{scale:1}35%{scale:1.06}100%{scale:1}}
@keyframes u3lvup{0%{scale:1;rotate:0}25%{scale:1.5;rotate:-10deg}55%{scale:.92;rotate:4deg}100%{scale:1;rotate:0}}
.u3-xpfloat{position:fixed;z-index:80;translate:-50% 0;pointer-events:none;font:400 20px/1 var(--u3-display);color:var(--u3-gold);text-shadow:0 2px 0 #7A5A00,0 0 12px rgba(255,227,105,.6);animation:u3float 1.25s ease-out forwards}
@keyframes u3float{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)}}
@media (prefers-reduced-motion:reduce){.u3-me.u3-gain,.u3-lvl.u3-lvup,.u3-xpfloat{animation:none!important}}

/* mail: links that look like buttons (View transaction, Open plaza) are lime blocks with dark text; plain links cyan */
html.ui3 .mb-panel a:not(#gbu-x){color:#7FE3FF!important;font-weight:900}
html.ui3 .mb-panel :is(.mb-letter-go,.mb-open,a[class*=go]):not(#gbu-x){display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0!important;border-radius:12px!important;
 color:#15330F!important;background:linear-gradient(180deg,#D9FF8A,var(--u3-lime) 55%)!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 4px 0 #3F7A1F!important;text-decoration:none;font:800 14px var(--u3-ui)!important;margin-bottom:4px}
html.ui3 .mb-panel :is(.mb-letter-go,.mb-open,a[class*=go]):not(#gbu-x):active{translate:0 3px;box-shadow:0 1px 0 #3F7A1F!important}
/* the mail block tilts and glows while a letter is waiting (the old envelope did this) */
.u3-dw.has-mail .u3-blk{animation:u3mail 2.6s ease-in-out infinite}
.u3-dw.has-mail .u3-blk .u3-ic{animation:u3flap 2.6s ease-in-out infinite;transform-origin:50% 30%}
@keyframes u3mail{0%,62%,100%{rotate:0deg;translate:0 0}66%{rotate:-11deg;translate:0 -6px}72%{rotate:9deg;translate:0 -3px}78%{rotate:-5deg}84%{rotate:0deg}}
@keyframes u3flap{0%,62%,100%{scale:1 1}68%,80%{scale:1 .82}}
@media (prefers-reduced-motion:reduce){.u3-dw.has-mail .u3-blk,.u3-dw.has-mail .u3-blk .u3-ic{animation:none}}
/* phones: the launch banner and news stop short of the right-hand column (mail, menu) */
html.ui3.mhud-on .u3-launch{right:calc(76px + var(--u3-safe-r))!important;min-width:0}
html.ui3.mhud-on .u3-toasts{right:calc(76px + var(--u3-safe-r))!important}
html.ui3.mhud-on .u3-lt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ui3.mhud-on .u3-lt{min-width:0}

/* ================= Sign-in / start screen (plaza.html #start) in the v3 system ================= */
/* card: the same slab as every window */
html.ui3 #start .join{background:linear-gradient(180deg,var(--u3-slab2),var(--u3-slab))!important;border:0!important;border-radius:26px!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;color:var(--u3-text);font-family:var(--u3-ui)}
@media (max-width:760px){html.ui3 #start .join{border-radius:26px 26px 0 0!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.12),0 0 0 1.5px var(--u3-line),0 -12px 40px rgba(3,6,25,.45)!important}}
/* title and lead */
html.ui3 #start .join-title{font:400 34px/1.05 var(--u3-display)!important;letter-spacing:.01em!important;color:#fff!important;text-shadow:none!important;margin:10px 0 4px!important}
html.ui3 #start .join-lead{font:700 15px/1.4 var(--u3-ui)!important;color:var(--u3-muted)!important}
html.ui3 #start .join-h,html.ui3 #start .join-h2{font:900 16px/1.2 var(--u3-ui)!important;color:#fff!important;letter-spacing:0!important;text-transform:none!important}
html.ui3 #start .join-h2{font:400 24px/1.1 var(--u3-display)!important}
html.ui3 #start :is(.join-sub,.join-hint,.join-note){font:700 13.5px/1.4 var(--u3-ui)!important;color:var(--u3-muted)!important}
/* steps: numbered blocks, a lime tick when done, a thin line between them */
html.ui3 #start .join-num{width:32px!important;height:32px!important;border:0!important;border-radius:10px!important;background:linear-gradient(180deg,#4A62B0,var(--u3-slate) 55%)!important;color:#fff!important;
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),0 3px 0 #1D2E66!important;font:400 16px/1 var(--u3-display)!important}
html.ui3 #start .join-step[data-done="true"] .join-num{background:linear-gradient(180deg,#D9FF8A,var(--u3-lime) 55%)!important;color:transparent!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 3px 0 #3F7A1F!important}
html.ui3 #start .join-step[data-done="true"] .join-num::before{border-color:#15330F!important}
html.ui3 #start .join-step:not(:last-child)::after{background:rgba(135,169,236,.25)!important;width:2px!important}
/* the name: a well that lights cyan while you type */
html.ui3 #start input{min-height:54px!important;background:#0E1942!important;border:0!important;border-radius:14px!important;box-shadow:inset 0 3px 0 rgba(0,0,0,.35),0 0 0 1.5px rgba(58,84,168,.8)!important;font:800 18px/1 var(--u3-ui)!important;color:#fff!important}
html.ui3 #start input:focus{box-shadow:inset 0 3px 0 rgba(0,0,0,.35),0 0 0 2.5px var(--u3-cyan)!important}
html.ui3 #start input[aria-invalid="true"]{box-shadow:inset 0 3px 0 rgba(0,0,0,.35),0 0 0 2.5px var(--u3-red)!important}
html.ui3 #start input::placeholder{color:#7082B6!important}
/* shared block look for the start buttons */
html.ui3 #start :is(.join-look,.join-google,.join-primary,.join-secondary,.join-inapp button){--side:color-mix(in oklab,var(--c) 58%,#0d1348);border:0!important;cursor:pointer;
 background:linear-gradient(180deg,color-mix(in oklab,var(--c) 84%,#fff) 0%,var(--c) 55%)!important;color:var(--ink)!important;
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 5px 0 var(--side),0 10px 16px rgba(5,10,40,.3)!important;margin-bottom:5px;
 transition:translate .12s var(--u3-spring),box-shadow .12s var(--u3-spring),filter .12s;text-transform:none!important;letter-spacing:.01em!important}
html.ui3 #start :is(.join-look,.join-google,.join-primary,.join-secondary,.join-inapp button):active:not(:disabled){translate:0 4px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 1px 0 var(--side)!important;transition-duration:.05s}
@media (hover:hover){html.ui3 #start :is(.join-look,.join-google,.join-primary,.join-secondary):hover:not(:disabled){filter:brightness(1.06)}}
html.ui3 #start .join-look{--c:var(--u3-violet);--ink:#fff;min-height:40px!important;border-radius:12px!important;padding:0 14px!important;font:800 14px var(--u3-ui)!important}
/* Continue with Google: a white block (Google's own button colours), big, the one main action on this card */
html.ui3 #start .join-google{--c:#FFFFFF;--ink:#1F2A44;--side:#9AA7C7;min-height:60px!important;border-radius:16px!important;font:800 17px var(--u3-ui)!important;gap:12px}
html.ui3 #start .join-google.is-signed{--c:var(--u3-lime);--ink:#15330F;--side:#3F7A1F}
/* returning / guest panels: Enter the plaza is the lime hero, the rest slate */
html.ui3 #start .join-primary{--c:var(--u3-lime);--ink:#15330F;min-height:60px!important;border-radius:16px!important;font:400 22px/1 var(--u3-display)!important;letter-spacing:.02em!important}
html.ui3 #start .join-primary:disabled{--c:#4A5886;--ink:#C3CCE8;cursor:progress}
html.ui3 #start .join-secondary{--c:var(--u3-slate);--ink:#fff;min-height:50px!important;border-radius:14px!important;font:800 15px var(--u3-ui)!important}
html.ui3 #start .join-inapp button{--c:var(--u3-cyan);--ink:#062A36;min-height:44px!important;border-radius:12px!important;font:800 14px var(--u3-ui)!important}
/* links: cyan, readable, no underline noise */
html.ui3 #start :is(.join-link,.join-studio){color:#7FE3FF!important;font:800 14.5px var(--u3-ui)!important;text-decoration:none!important;text-transform:none!important}
html.ui3 #start :is(.join-link,.join-studio):hover{text-decoration:underline!important}
html.ui3 #start .join-studio{color:var(--u3-muted)!important;font-weight:700!important}
html.ui3 #start .join-err{font:800 14px var(--u3-ui)!important;color:#FFB3C1!important}
/* guest comparison list: lime ticks, dim crosses */
html.ui3 #start .join-compare li{font:700 14px/1.4 var(--u3-ui)!important;color:var(--u3-text)!important}
html.ui3 #start .join-compare li[data-ok="false"]{color:var(--u3-dim)!important}

/* ---- phones, compact top area (Juan 30-sep): card + mail/menu in one row, wallet + launch in the next ---- */
html.ui3.mhud-on .u3-tr{flex-direction:row!important;gap:10px}
html.ui3.mhud-on .u3-tr .u3-blk.icon,html.ui3.mhud-on .u3-menub{--h:44px;width:44px}
html.ui3.mhud-on .u3-xp span{display:none}
html.ui3.mhud-on .u3-xp .u3-bar{width:70px}
html.ui3.mhud-on .u3-me{max-width:none;padding:6px 12px 6px 6px}
html.ui3.mhud-on .u3-goal{display:none!important}
html.ui3.mhud-on .u3-wallet{--h:44px;margin:0!important}
html.ui3.mhud-on .u3-launch{right:auto!important;min-width:0!important;padding:5px 5px 5px 8px!important;gap:8px}
html.ui3.mhud-on .u3-launch .u3-llogo,html.ui3.mhud-on .u3-launch .u3-lmono{width:32px;height:32px;border-radius:10px;font-size:16px}
html.ui3.mhud-on .u3-launch .u3-lwrap .u3-live{height:16px;font-size:9.5px;bottom:-7px}
html.ui3.mhud-on .u3-lt b{font-size:13.5px}
html.ui3.mhud-on .u3-lt small{font-size:12px}
html.ui3.mhud-on .u3-launch .u3-blk.s{--h:34px;padding:0 11px;font-size:13.5px}
html.ui3.mhud-on .u3-launch .u3-ldots{bottom:-12px}

/* ---- phones: the card carries your balance and a goals symbol; no separate wallet block or goal pill ---- */
.u3-cardrow{display:none}
html.ui3.mhud-on .u3-cardrow{display:flex;gap:6px;align-items:center}
html.ui3.mhud-on .u3-cardrow [hidden]{display:none!important}
html.ui3.mhud-on :is(.u3-cbal,.u3-cgoal){display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px 0 6px;border:0;border-radius:8px;cursor:pointer;
 background:rgba(10,18,51,.55);box-shadow:inset 0 0 0 1px rgba(135,169,236,.3);color:#fff;font:900 12.5px/1 var(--u3-ui)!important;font-variant-numeric:tabular-nums;min-height:0!important}
html.ui3.mhud-on :is(.u3-cbal,.u3-cgoal) .u3-ic{width:14px;height:14px;stroke-width:2.6}
html.ui3.mhud-on .u3-cbal .u3-ic{color:var(--u3-cyan)}
html.ui3.mhud-on .u3-cgoal .u3-ic{color:var(--u3-gold)}
html.ui3.mhud-on .u3-cgoal.done .u3-ic,html.ui3.mhud-on .u3-cgoal.done b{color:var(--u3-lime)}
html.ui3.mhud-on :is(.u3-cbal,.u3-cgoal)::after{content:"";position:absolute;inset:-10px -4px}
html.ui3.mhud-on :is(.u3-cbal,.u3-cgoal){position:relative}
html.ui3.mhud-on :is(.u3-wallet,.u3-wcreate,.u3-goal){display:none!important}
html.ui3.mhud-on .u3-who{gap:4px}
html.ui3.mhud-on .u3-xp{display:flex}

/* ---- desktop too: balance and goals live in the player card (Juan: like on phones) ---- */
.u3-cardrow{display:flex;gap:6px;align-items:center}
.u3-cardrow [hidden]{display:none!important}
html.ui3 :is(.u3-cbal,.u3-cgoal){position:relative;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 7px;border:0;border-radius:9px;cursor:pointer;
 background:rgba(10,18,51,.55);box-shadow:inset 0 0 0 1px rgba(135,169,236,.3);color:#fff;font:900 13px/1 var(--u3-ui)!important;font-variant-numeric:tabular-nums;min-height:0!important;transition:background .15s}
html.ui3 :is(.u3-cbal,.u3-cgoal):hover{background:rgba(10,18,51,.8)}
html.ui3 :is(.u3-cbal,.u3-cgoal) .u3-ic{width:15px;height:15px;stroke-width:2.6}
html.ui3 .u3-cbal .u3-ic{color:var(--u3-cyan)}
html.ui3 .u3-cgoal .u3-ic{color:var(--u3-gold)}
/* the SEED pouch on the card: lime number, the sprout-seed icon */
.u3-cseed .u3-seedic{width:16px;height:16px;object-fit:contain}
html.ui3 .u3-cseed{color:var(--u3-lime,#baff38)}
html.ui3 .u3-cgoal.done :is(.u3-ic,b){color:var(--u3-lime)}
html.ui3 :is(.u3-wallet,.u3-wcreate,.u3-goal){display:none!important}
html.ui3:not(.mhud-on) .u3-who{gap:6px}
/* money in: the chip flashes lime and glows, the amount floats up in lime */
html.ui3 .u3-cbal.flash{animation:u3money 1.3s ease-out}
@keyframes u3money{0%{background:var(--u3-lime);color:#15330F;box-shadow:0 0 0 0 rgba(186,255,56,.8);scale:1.15}40%{background:var(--u3-lime);color:#15330F;box-shadow:0 0 0 10px rgba(186,255,56,0);scale:1}100%{background:rgba(10,18,51,.55);color:#fff}}
html.ui3 .u3-cbal.flash .u3-ic{animation:u3moneyic 1.3s ease-out}
@keyframes u3moneyic{0%,40%{color:#15330F}100%{color:var(--u3-cyan)}}
.u3-moneyfloat{color:var(--u3-lime)!important;text-shadow:0 2px 0 #2F5A10,0 0 14px rgba(186,255,56,.6)!important}
@media (prefers-reduced-motion:reduce){html.ui3 .u3-cbal.flash,html.ui3 .u3-cbal.flash .u3-ic{animation:none}}
/* phones: the card always ends before mail + menu (width set in gb-hud3.js stack()); tighter parts */
html.ui3.mhud-on .u3-me{gap:8px}
html.ui3.mhud-on .u3-av{width:40px!important;height:40px!important;font-size:19px!important}
html.ui3.mhud-on .u3-who{min-width:0;flex:1}
html.ui3.mhud-on .u3-name{max-width:none;font-size:15px}
html.ui3.mhud-on .u3-xp .u3-bar{width:auto;flex:1;min-width:40px}
html.ui3.mhud-on .u3-cbal .u3-ic{display:none}
html.ui3.mhud-on :is(.u3-cbal,.u3-cgoal){height:22px;padding:0 7px;font-size:12px!important}
html.ui3.mhud-on .u3-cbal span{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.ui3.mhud-on .u3-lvl{min-width:50px!important;height:38px!important;padding:0 7px 0 4px!important}
html.ui3.mhud-on .u3-lvl [data-lv]{font-size:18px}
html.ui3.mhud-on .u3-lvl .u3-cube{width:18px;height:18px}

/* touch joystick on the other plazas (src/plaza-touch.js): round v3 stick resting in the bottom-left corner */
html.ui3 .plaza-stick.u3-rest{left:calc(24px + var(--u3-safe-l))!important;top:auto!important;bottom:calc(24px + var(--u3-safe-b));margin:0;width:124px;height:124px;border:0;border-radius:50%;
 background:rgba(15,26,69,.35);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);transition:box-shadow .15s}
html.ui3 .plaza-stick.u3-rest>div{left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:0;border-radius:50%;background:linear-gradient(180deg,#FFFFFF,#C9D4F2 60%);
 box-shadow:inset 0 1.5px 0 #fff,0 5px 0 #6F7FAE,0 0 0 2px var(--u3-edge),0 5px 0 2px var(--u3-edge)}
html.ui3 .plaza-stick.u3-rest.on{box-shadow:inset 0 0 0 2px var(--u3-lime),0 0 0 6px rgba(186,255,56,.15)}
html.ui3.mhud-on .u3-walk{left:calc(16px + var(--u3-safe-l))!important;bottom:calc(160px + var(--u3-safe-b))!important}

/* launch carousel: small arrows beside the dots (tap = previous / next; pauses the auto turn for a while) */
html.ui3 .u3-ldots{align-items:center;gap:6px;bottom:-22px!important}
html.ui3 .u3-ldots .u3-larr{width:22px!important;height:22px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:7px!important;display:grid;place-items:center;
 background:rgba(10,18,51,.72)!important;box-shadow:0 0 0 1.5px rgba(135,169,236,.4)!important;color:#fff}
html.ui3 .u3-ldots .u3-larr .u3-ic{width:13px;height:13px;stroke-width:3}
html.ui3 .u3-ldots .u3-larr.next .u3-ic{rotate:180deg}
html.ui3 .u3-ldots .u3-larr::after{inset:-10px -6px}
html.ui3 .u3-ldots .u3-larr:active{translate:0 1px}
/* phones: the thumb buttons a notch smaller (Juan: too big) */
html.ui3.mhud-on .u3-play .u3-blk.hero{--h:80px!important;width:80px!important;font-size:19px!important}
html.ui3.mhud-on .u3-play .u3-blk.hero .u3-ic{width:28px!important;height:28px!important}
html.ui3.mhud-on .u3-trade .u3-blk.round{--h:54px!important}
html.ui3.mhud-on .u3-moves .u3-blk.round{--h:48px!important}
html.ui3.mhud-on .u3-chat .u3-blk.round{--h:48px!important}
html.ui3.mhud-on .u3-trade{right:calc(114px + var(--u3-safe-r))!important;bottom:calc(26px + var(--u3-safe-b))!important}
html.ui3.mhud-on .u3-moves{right:calc(106px + var(--u3-safe-r))!important;bottom:calc(112px + var(--u3-safe-b))!important}
html.ui3.mhud-on .u3-chat{right:calc(28px + var(--u3-safe-r))!important;bottom:calc(134px + var(--u3-safe-b))!important}
html.ui3.mhud-on .u3-play{right:calc(16px + var(--u3-safe-r))!important;bottom:calc(26px + var(--u3-safe-b))!important}
html.ui3.mhud-on .u3-al{font-size:11.5px!important;padding:2px 7px!important}
@media (orientation:landscape) and (max-height:500px){
 html.ui3.mhud-on .u3-play .u3-blk.hero{--h:72px!important;width:72px!important;font-size:17px!important}
 html.ui3.mhud-on .u3-trade{right:calc(102px + var(--u3-safe-r))!important;bottom:calc(16px + var(--u3-safe-b))!important}
 html.ui3.mhud-on .u3-moves{right:calc(170px + var(--u3-safe-r))!important;bottom:calc(18px + var(--u3-safe-b))!important}
 html.ui3.mhud-on .u3-chat{right:calc(22px + var(--u3-safe-r))!important;bottom:calc(108px + var(--u3-safe-b))!important}
 html.ui3.mhud-on .u3-play{bottom:calc(16px + var(--u3-safe-b))!important}
}

/* Back to the main plaza (src/gb-hud3.js .u3-home): the brand cube on a Portal violet block, first in the top-right row,
   on every plaza but the main one. Phones and narrow windows keep the cube and a short label. */
.u3-home{gap:9px;padding:0 16px 0 12px}
.u3-home .u3-hcube{width:30px;height:30px;margin:-2px 0;flex:none;filter:drop-shadow(0 2px 0 rgba(13,19,72,.45))}
.u3-home .u3-hs{display:none}
html.ui3.mhud-on .u3-home{--h:44px;gap:6px;padding:0 12px 0 9px;font-size:14px}
html.ui3.mhud-on .u3-home .u3-hcube{width:24px;height:24px}
html.ui3.mhud-on .u3-home .u3-hl{display:none}
html.ui3.mhud-on .u3-home .u3-hs{display:inline}
@media (max-width:980px){html.ui3:not(.mhud-on) .u3-home .u3-hl{display:none}html.ui3:not(.mhud-on) .u3-home .u3-hs{display:inline}}
/* the card's SEED chip: the balance, then SEED earned this season (what the rankings count; gb-hud3.js) */
#u3 .u3-cseed .u3-seedearn{margin-left:6px;font:800 11px var(--ui,Nunito,sans-serif);opacity:.72;white-space:nowrap}
html.world-city.mhud-on #u3 .u3-seedearn{display:none}