html,body{margin:0;min-height:100%;overscroll-behavior:none}body{padding:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:100dvh;gap:15px;background:var(--board);touch-action:manipulation}button{ -webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid white;outline-offset:3px}#device{position:relative;flex:none;width:320px;height:640px;transform-origin:top left}#screens{position:absolute;inset:0}.phone{position:absolute;inset:0;max-width:none;width:320px;height:640px;margin:0}.phone[hidden],[hidden]{display:none!important}#desktop-help{font:12px/1.5 var(--f-body);color:var(--muted);margin:0;text-align:center}.phone button{touch-action:manipulation}.menu-shop,.menu-settings{position:absolute;bottom:18px;left:50%;translate:-50% 0;z-index:5;border:0;font:12px/1 var(--f-display);padding:8px 16px 10px;color:white;background:var(--blue2);box-shadow:inset 0 -5px var(--blue3),inset 0 3px var(--sky);clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));cursor:pointer}.phone .cslot{border:0;padding:0;background:none;cursor:pointer}.cgrid{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;padding:2px 0 6px}.bs .bs-slot.unowned img{filter:brightness(0) opacity(.45)}.bs .bs-slot.unowned b{background:#2f86d8;box-shadow:inset 0 4px #1f63a8}.bs .bs-slot.unowned:after{content:'•';position:absolute;bottom:1px;right:3px;color:var(--gold);font-size:18px;line-height:1}.bs .play{font-size:21px}.bs-grid{padding:1px}.bs-name{overflow-wrap:anywhere}.bs .bs-desc{font-size:9px}.phone.match canvas.game-arena{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.phone.match .hc{z-index:8}.hc canvas{display:block;height:100%;width:auto;image-rendering:pixelated}.inhud button.hc{border:0;padding:0;background:transparent;touch-action:none;cursor:pointer}.inhud .hstrip i{width:100%;transition:width .12s linear}.inhud .hstrip b{pointer-events:none}.hstick{isolation:isolate}.inhud .hc img{pointer-events:none}.cooldown{position:absolute;inset:0;display:grid;place-items:center;font:700 16px var(--f-pixel);color:#fff;text-shadow:2px 2px var(--ink);pointer-events:none}.cooldown:empty{display:none}.hc.cooling>img{filter:brightness(.55)}.hstick.active{filter:brightness(1.12)}.match-pause{position:absolute;z-index:10;top:72px;right:12px;background:var(--ink);border:0;color:white;font:700 10px var(--f-pixel);padding:6px 8px;cursor:pointer}.match .cd{pointer-events:none;z-index:9}.inhud .cd{position:absolute;left:0;right:0;top:calc(50% - 85px);height:160px}.inhud .cd .hw-px{width:210px!important}.inhud .cd .go .hw-px{width:290px!important}.inhud .cd .cdf{margin:0}.inhud .cd .go{top:0;bottom:0}.inhud.intro-active .hc,.inhud.intro-active .match-pause{visibility:hidden}.inhud.brawl-shake .game-arena{animation:land-shake .24s steps(4,end)}@keyframes land-shake{25%{translate:-3px 2px}50%{translate:3px -2px}75%{translate:-2px 1px}}#dialog{position:absolute;inset:7px;border-radius:31px;background:#0b1f3fcc;z-index:30;display:grid;place-items:center;padding:20px}.dialog-card{width:100%;padding:20px 14px;background:#fff;border:4px solid var(--ink);box-shadow:5px 5px var(--ink);text-align:center}.dialog-card h2{font:22px/1.2 var(--f-display);margin:0 0 12px}.dialog-card p{font:14px/1.5 var(--f-body);margin:0 0 18px}.dialog-card button{display:block;width:100%;font:15px var(--f-display);color:var(--ink);background:var(--gold);border:0;box-shadow:inset 0 -5px var(--gold-dark),inset 0 3px var(--gold-light);padding:12px 8px;margin-top:8px;cursor:pointer}.dialog-card button.secondary{background:var(--sky);box-shadow:inset 0 -5px #2f86d8;color:var(--ink)}#toast{position:absolute;z-index:50;bottom:23px;left:20px;right:20px;background:var(--ink);color:white;padding:12px;text-align:center;font:11px/1.4 var(--f-pixel);border:3px solid var(--gold)}.phone .home{cursor:pointer}#koK1b .kby{font-size:18px;max-width:100%;padding:0 8px;overflow-wrap:anywhere}.q-tag b{white-space:nowrap}.phone .walker{background-size:400% 400%}.queue .seat.new{animation:pop .25s steps(3,end)}@media(max-width:600px){body{padding:0;gap:0;justify-content:center;background:var(--ink)}#desktop-help{display:none}.phone{box-shadow:none}}@media(prefers-reduced-motion:reduce){.phone *{animation:none!important}}

/* Use the actual mobile viewport; retain the framed preview on desktop. */
@media(max-width:600px){
 html,body{width:100%;height:100%;min-height:0;overflow:hidden}
 body{display:block;padding:0;background:var(--sky)}
 #phone-space{margin:0}
 .phone{height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
 #device{--safe-top:calc(env(safe-area-inset-top,0px)/var(--ui-scale));--safe-bottom:calc(env(safe-area-inset-bottom,0px)/var(--ui-scale))}
 #dialog{inset:0;border-radius:0}
 .topbar{top:calc(22px + var(--safe-top))}
 .bs .bs-back,.sh-back{top:calc(20px + var(--safe-top))}
 .bs .bs-name{top:calc(24px + var(--safe-top))}
 .inhud .hstrip{height:calc(14px + var(--safe-top))}
 .inhud .htimer,.inhud .hleft{top:calc(36px + var(--safe-top))!important}
 .match-pause{top:calc(76px + var(--safe-top))}
 .menu-shop,.menu-settings{bottom:max(18px,var(--safe-bottom))}
}

@media(max-width:600px){
 .queue .squad{bottom:calc(5% + 60px)}
 .queue .squad .walker{width:min(42%,max(60px,calc(var(--phone-height) - 460px)))}
}
@media(max-width:600px){
 .bs .bs-grid{max-height:calc(49% - 85px);overflow-y:auto;align-content:start;scrollbar-width:none}
}

/* Thumb controls: independent stick cap, with a separated right-hand action cluster. */
.inhud #stick,.inhud #punch,.inhud #special{top:auto!important;translate:none!important;transform:none!important;overflow:visible}
.inhud #stick{left:calc(18px + var(--safe-left,0px))!important;right:auto!important;bottom:calc(38px + var(--safe-bottom,0px))!important;width:96px;height:96px}
.inhud #punch{left:auto!important;right:calc(18px + var(--safe-right,0px))!important;bottom:calc(38px + var(--safe-bottom,0px))!important;width:108px;height:108px}
.inhud #special{left:auto!important;right:calc(38px + var(--safe-right,0px))!important;bottom:calc(166px + var(--safe-bottom,0px))!important;width:68px;height:68px}
.inhud #punch img,.inhud #special img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.inhud #punch.pressed img,.inhud #special.pressed img{transform:scale(.91);filter:brightness(1.18)}
.stick-base,.stick-thumb{position:absolute;display:block;pointer-events:none;border-radius:50%}
.stick-base{inset:0;background:#17223c99;border:3px solid #17223c;box-shadow:inset 0 3px #61708b,inset 0 -4px #101b32}
.stick-base:before{content:'';position:absolute;inset:7px;border-radius:50%;border:2px solid #71819b88;background:#2c3b5677}
.stick-base:after{content:'';position:absolute;inset:19px;border-radius:50%;background:#15213966;box-shadow:inset 0 2px #101c3844}
.stick-thumb{width:54%;height:54%;left:23%;top:23%;background:#14203a;border:3px solid #14203a;box-shadow:0 4px 0 #0d172d88;transform:translate(var(--stick-x,0px),var(--stick-y,0px));transition:transform .1s ease-out}
.stick-thumb:before{content:'';position:absolute;inset:0;border-radius:50%;background:#f8f7e9;box-shadow:inset 0 4px white,inset -3px -7px #c4c9c9}
#stick.active .stick-thumb{transition:none}
#stick.active .stick-base{background:#17223cd9;border-color:#8192ae}
#device{--safe-left:calc(env(safe-area-inset-left,0px)/var(--ui-scale,1));--safe-right:calc(env(safe-area-inset-right,0px)/var(--ui-scale,1))}
@media(max-height:700px) and (max-width:600px){
 .inhud #stick,.inhud #punch{bottom:calc(24px + var(--safe-bottom,0px))!important}
 .inhud #special{bottom:calc(152px + var(--safe-bottom,0px))!important}
}

.pick [data-category="household-items"] .c-name{font-size:14px}.phone .q-tag b{font-size:12px}.bs .bs-name.long{font-size:20px}.bs .bs-grid{overflow-y:auto;align-content:start}

.inhud #dash{position:absolute;z-index:10;left:calc(32px + var(--safe-left,0px));bottom:calc(154px + var(--safe-bottom,0px));width:68px;height:68px;border:4px solid #14233d;border-radius:50%;background:#39c9e8;color:#fff;box-shadow:inset 0 -6px #17738e,inset 0 4px #a2f1ff;display:flex;align-items:center;justify-content:center;flex-direction:column;text-shadow:2px 2px #14233d;cursor:pointer;font-family:Silkscreen,monospace}
.inhud #dash b{font:38px/.7 sans-serif;transform:rotate(-15deg)}.inhud #dash strong{font-size:11px;margin-top:7px}.inhud #dash.pressed{filter:brightness(1.2)}.inhud #dash.cooling{filter:saturate(.35)}.inhud #dash .cooldown{position:absolute;inset:0;display:grid;place-items:center;background:#102139a8;border-radius:50%;font:20px Silkscreen,monospace}

/* Result copy: the setup stays above the pixel headline. */
#koK1b .result-setup{order:-1;font:18px/1 var(--f-display);color:white;text-shadow:2px 2px var(--ink);margin:4px 0 -12px;z-index:1}
#koK1b .kostamp>.hw-px{width:270px!important}
#koK1b .kostamp .kby{margin:-6px 0 0}

/* Keep approved portrait geometry inside the usable viewport, including notches.
   Internal safe offsets are zero because the whole artboard is already inset. */
:root{--viewport-safe-top:env(safe-area-inset-top,0px);--viewport-safe-right:env(safe-area-inset-right,0px);--viewport-safe-bottom:env(safe-area-inset-bottom,0px);--viewport-safe-left:env(safe-area-inset-left,0px)}
body.approved-portrait{background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.approved-portrait #phone-space{position:absolute;margin:0}
body.approved-portrait #device{--safe-top:0px;--safe-right:0px;--safe-bottom:0px;--safe-left:0px}
/* The approved locker-room shop is a scrollable catalog inside the artboard. */
#device .phone.locker-shop{display:block;overflow:hidden;touch-action:pan-x}

#viewport-art{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}#viewport-art>div{position:absolute;left:0;right:0;image-rendering:pixelated}body.approved-portrait #phone-space{z-index:1}

/* The selected bundle shop scrolls inside its own full viewport. */
body.shop-active{padding:0;gap:0;overflow:hidden;background:#000c20}
body.shop-active #desktop-help{display:none}
body.shop-active #phone-space{margin:0}
#device .phone.locker-shop{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;touch-action:pan-y}