/* Four luxury worlds. Native UI and square-cell canvas fill the viewport. */
html,body{width:100%;height:100%;overflow:hidden;background:#080c13}
#app:not([data-state=menu]){--panel:#32101b;--button-tone:#700c25;--ink:#ffe8a6;--frame:#dfb04e;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;transform:none;aspect-ratio:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);display:grid;grid-template-rows:minmax(34px,10dvh) minmax(62px,9dvh) minmax(0,1fr) clamp(36px,5dvh,48px) max(10px,env(safe-area-inset-bottom));background:var(--world-map) center/cover;container-type:inline-size;isolation:isolate}
#app[data-theme=tropical]{--panel:#062c35;--button-tone:#046374;--scene-tone:#063b49}
#app[data-theme=rooftop]{--panel:#350917;--button-tone:#850b2b}
#app[data-theme=cloud]{--panel:#15132e;--button-tone:#291843;--frame:#edc97e}
#app[data-theme=emerald]{--panel:#05271b;--button-tone:#075a3c}
#app:not([data-state=menu]) .world-cap{display:block;position:relative;grid-row:1;background:linear-gradient(transparent,#0005);min-height:0}
#world-label{position:absolute;left:16px;bottom:7px;padding:4px 10px;border:1px solid #ddb155;border-radius:4px;background:#061017bb;color:#ffe8aa;font:9px monospace;letter-spacing:2px}
#app:not([data-state=menu]) .hud{position:relative;grid-row:2;left:auto;right:auto;top:auto;width:100%;height:100%;min-height:0;display:flex;align-items:center;gap:clamp(5px,1.6vw,18px);padding:7px 12px;background:linear-gradient(115deg,var(--panel),#06070cd9);border:3px solid #b47d23;border-radius:9px;box-shadow:inset 0 0 0 2px #fff0a4,inset 0 0 0 5px #57320c,0 2px 0 #f3cf7e;z-index:4;color:var(--ink)}
#app:not([data-state=menu]) .hud:after{display:none}
#app:not([data-state=menu]) .brand{width:28%;min-width:0;flex-shrink:0;font-size:clamp(24px,7.3vw,54px);letter-spacing:-1.6px;line-height:1;color:var(--ink);text-shadow:0 2px #4b240a}
#app:not([data-state=menu]) .brand small{font:clamp(5px,1.3vw,9px) monospace;letter-spacing:clamp(.7px,.3vw,2px);white-space:nowrap;color:var(--ink);margin-top:6px}
#app:not([data-state=menu]) .brand>b{display:none}
#app:not([data-state=menu]) .score{padding:5px 0;width:28%;margin:0;border:0;background:none}
#app:not([data-state=menu]) .hud small{font:clamp(7px,1.6vw,11px) monospace;letter-spacing:1px;color:var(--ink);margin-bottom:4px}
#app:not([data-state=menu]) .score strong{font:700 clamp(18px,5.8vw,42px) monospace;letter-spacing:0;color:var(--ink)}
#app:not([data-state=menu]) .metric{width:8%;padding:0}
#app:not([data-state=menu]) .metric strong{font:700 clamp(18px,5.2vw,36px) monospace;color:var(--ink)}
#app:not([data-state=menu]) .metric:has(#lines){display:none}
#app:not([data-state=menu]) .next{width:17%;height:94%;min-height:0;padding:4px;border:2px solid #d8ae50;border-radius:6px;background:#070b13;box-shadow:inset 0 0 0 1px #54320c;grid-template-rows:auto minmax(0,1fr)}
#app:not([data-state=menu]) .utility{width:10%;min-width:27px;height:83%;min-height:0;font-size:clamp(16px,4vw,30px);padding:0;border:2px solid #f3ce74;border-radius:9px;background:linear-gradient(125deg,#b9143e,#53071c);color:var(--ink);box-shadow:inset 0 2px 0 #ff97a3,0 0 0 2px #4b2908}
#app:not([data-state=menu]) #sound{position:absolute;right:12px;top:-25px;width:36px;height:19px;min-height:0;font-size:8px;border-width:1px;box-shadow:none;background:#081017dd}
#app:not([data-state=menu]) #stage{grid-row:3;position:relative;top:auto;left:auto;right:auto;height:auto;min-height:0;width:100%;padding:0 clamp(7px,1.6vw,18px);background:linear-gradient(90deg,#070b1555,#070b1500,#070b1555);border:0;isolation:isolate}
#app:not([data-state=menu]) #stage:before,#app:not([data-state=menu]) #stage:after{content:'';display:block;position:absolute;z-index:3;top:0;bottom:0;width:clamp(7px,1.6vw,18px);background:linear-gradient(90deg,#4f2906,#e9b94c,#fff0ab,#a36a17,#4f2906);pointer-events:none;opacity:1;filter:none}
#app:not([data-state=menu]) #stage:before{left:0}#app:not([data-state=menu]) #stage:after{right:0}
#app:not([data-state=menu]) #chamber{position:relative;box-shadow:inset 0 0 0 1px #d5ae4c88;overflow:clip;border:0}
#app:not([data-state=menu]) #board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;max-height:none;border:0;border-radius:0}
#app:not([data-state=menu]) .controls{grid-row:4;position:relative;left:auto;top:auto;width:100%;height:100%;padding:7px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1.15fr;gap:6px;border:3px solid #b47d23;border-radius:8px;background:linear-gradient(#4c290c,#17100c);box-shadow:inset 0 0 0 2px #ffe5a0;z-index:4}
#app:not([data-state=menu]) .controls button[data-action]{position:relative;inset:auto;width:100%;height:100%;min-height:0;min-width:0;padding:0;border:3px solid #d7a544;border-radius:10px;background:linear-gradient(130deg,var(--button-tone),var(--panel));color:var(--ink)!important;font-size:clamp(27px,7vw,54px)!important;box-shadow:inset 0 0 0 1px #fff2b4,inset 0 3px 4px #ffffff36,0 2px 0 #3b2109;text-shadow:0 2px #381c09}
#app:not([data-state=menu]) .controls button[data-action=drop]{font-size:clamp(17px,4.2vw,34px)!important;background:linear-gradient(125deg,#ffefb1,#dba536,#ffe087);color:#201107!important;text-shadow:none;font-weight:800}
#app[data-theme=tropical]:not([data-state=menu]) .controls button[data-action=drop]{background:linear-gradient(#b51c45,#6b0a23);color:#ffe8aa!important}
#app:not([data-state=menu]) .controls button small{font:7px monospace;color:inherit;letter-spacing:1px;margin:0}
#app:not([data-state=menu]) .controls button.pressed{filter:brightness(1.2);transform:translateY(2px)}
#app:not([data-state=menu]) .world-floor{display:block;grid-row:5;background:linear-gradient(#ac7c29,#241306)}
.stage-foot{display:none!important}
#fullscreen[hidden]{display:none}#fullscreen{display:block;margin:10px auto 0;padding:8px 16px;border:1px solid #bd934d;border-radius:6px;background:#121b24;color:#ffe6a3;font:11px monospace}
#collection{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));height:min(52vh,430px)}
@media(orientation:landscape){#app:not([data-state=menu]){grid-template-rows:0 minmax(52px,15dvh) minmax(0,1fr) 32px 0}#app:not([data-state=menu]) .world-cap,#app:not([data-state=menu]) .world-floor{display:none}#app:not([data-state=menu]) .brand{font-size:clamp(25px,4.5vw,44px);width:25%}#app:not([data-state=menu]) .brand small{font-size:7px}#app:not([data-state=menu]) .score strong{font-size:clamp(22px,3.7vw,38px)}#app:not([data-state=menu]) .metric strong{font-size:24px}#app:not([data-state=menu]) .next{width:12%}#app:not([data-state=menu]) #sound{position:static;height:78%;width:50px;font-size:11px}#app:not([data-state=menu]) .controls button[data-action]{font-size:clamp(28px,7dvh,48px)!important}#app:not([data-state=menu]) .controls button[data-action=drop]{font-size:clamp(20px,5dvh,30px)!important}}
@media(max-width:350px){#app:not([data-state=menu]) .hud{padding:6px;gap:4px}#app:not([data-state=menu]) .brand{font-size:24px}#app:not([data-state=menu]) .score strong{font-size:19px}#app:not([data-state=menu]) .next{width:16%}}

/* Gestures replace the button deck, leaving more room for the stack. */
#app:not([data-state=menu]) .gesture-guide{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px 8px;border-width:2px;align-items:center;text-align:center;pointer-events:none;background:linear-gradient(120deg,var(--panel),#080b12)}
.gesture-guide span{color:#f7d47f;font-size:15px;line-height:1}.gesture-guide b{font:700 9px Arial,sans-serif;letter-spacing:.7px;vertical-align:middle}.gesture-guide small{display:block;font:6px monospace;letter-spacing:.8px;color:#e9ce9b;margin-top:3px}
#stage{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Approved Arcade logo celebrates completed rows in the demo and live board. */
#mobb-callout>a{display:block;width:min(78%,340px);pointer-events:auto}
#mobb-callout img{width:100%;height:auto}
#attract-callout{position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none;background:radial-gradient(ellipse,#03080699,transparent 65%)}
#attract-callout>a{display:block;width:78%;max-width:340px;pointer-events:auto;filter:drop-shadow(0 4px 6px #000)}
#attract-callout img{display:block;width:100%;height:auto}
/* MOBBX logo true-red glass controls with readable warm-white labels. */
#app[data-state=menu] .arcade-deck{background:linear-gradient(125deg,#130808c9,#211010b8);border-color:#ff3131;box-shadow:inset 0 1px #ffb5b544,0 0 12px #ff16163d;backdrop-filter:blur(9px)}
#app[data-state=menu] .primary{color:#fff5e6;background:linear-gradient(125deg,#ff242470,#ff070736 65%,#ff484860);border:1px solid #ff5555;border-bottom:2px solid #d80c0c;box-shadow:inset 0 1px 0 #ffd2d299,inset 0 0 16px #ff1d1d38,0 0 9px #ff161677,0 0 20px #ff161633;text-shadow:0 1px 3px #580404;backdrop-filter:blur(7px)}
#app[data-state=menu] .primary:enabled:hover{background:linear-gradient(125deg,#ff313199,#ff121266);box-shadow:inset 0 1px #ffd2d299,0 0 19px #ff242488}
#app[data-state=menu] .arcade-rounds button{color:#fff1df}
#app[data-state=menu] .arcade-rounds button>span{color:#fff7ed;background:radial-gradient(circle at 35% 25%,#ff494980,#ff070740 65%,#a6070733);border:1px solid #ff6b6b;box-shadow:inset 0 1px #ffd6d699,0 0 11px #ff161677;backdrop-filter:blur(7px)}
#app[data-state=menu] .arcade-rounds button[aria-pressed=true]>span{background:#ff171799;box-shadow:inset 0 0 0 2px #fff0e6,0 0 14px #ff161699}
#app[data-state=menu] #show-pieces{padding:6px 9px;border:1px solid #ff4141;border-radius:5px;background:#ff17172e;color:#8b0808;text-decoration:none;box-shadow:inset 0 1px #fff8,0 0 7px #ff171744}
#app:not([data-state=menu]) .utility{color:#fff3e7;border-color:#ff8282;background:linear-gradient(125deg,#ff272788,#fc070744);box-shadow:inset 0 1px #ffd2d299,0 0 10px #ff161666;backdrop-filter:blur(6px)}
#app:not([data-state=menu]) #sound{background:#ff171748;border-color:#ff8282;color:#fff3e7}

/* The full collection scrolls in its dialog without squeezing extra rows. */
#pieces-dialog #collection{height:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:135px;gap:12px}
#pieces-dialog #collection figure{min-width:0;min-height:0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:5px}
#pieces-dialog #collection canvas{width:100%;height:100%;min-height:0;object-fit:contain}
#pieces-dialog #collection figcaption{font:700 8px/1.35 monospace;letter-spacing:.3px;text-align:center;color:#ffe6a3;overflow-wrap:anywhere}
#app:not([data-state=menu]) #combo{top:62%;left:6%;right:6%;width:auto;font-size:clamp(10px,2.4vw,17px);text-align:center;letter-spacing:.5px}

#audio-dialog{width:min(390px,calc(100vw - 28px))}#audio-dialog label{display:block;margin-top:19px;font:700 12px monospace;color:#ffe5a6}#audio-dialog output{float:right;color:#ff7171}#audio-dialog input[type=range]{width:100%;margin:13px 0;accent-color:#ff2020}#audio-dialog .audio-enable{display:flex;gap:9px;align-items:center}#audio-dialog .audio-enable input{accent-color:#ff2020}.audio-audition{display:flex;gap:10px;margin:15px 0}.audio-audition button{flex:1;padding:11px 8px;border:1px solid #ff4343;background:#ff171733;border-radius:6px;color:#fff0d3;font:700 10px monospace}

.music-studio-link,.pause-music-studio{display:block;border:1px solid #ff494b;background:linear-gradient(135deg,#fa151940,#a5001630);box-shadow:inset 0 0 15px #ff263220,0 0 15px #ff142225;border-radius:12px;color:#ffeab6;text-decoration:none;text-align:center;padding:15px;font:bold 16px system-ui;letter-spacing:.09em}.music-studio-link span{display:block;font:10px monospace;margin-top:7px}.pause-music-studio{margin:12px auto;max-width:240px;font-size:12px;padding:12px}body:has(#app[data-state="menu"]) .pause-music-studio{display:none}

#attract[role="button"]{cursor:pointer;touch-action:manipulation}#attract[role="button"]:focus-visible{outline:2px solid #ffdb86;outline-offset:3px}#demo-sound-label{letter-spacing:.08em;color:#dbc385}

.menu-share-actions{display:flex;align-items:center;gap:8px}.menu-share-actions button{font-size:9px!important;padding:7px!important;min-height:32px}#app[data-state=menu] .arcade-bottom{gap:8px}

/* First gesture unlocks audio in the existing Start slot. */
#start.ready-prompt{letter-spacing:.12em;text-shadow:0 0 16px #ff584a;}

#app:not([data-state=menu]) #sound{width:76px;white-space:nowrap;font-size:8px;}

html.stack-input-locked,html.stack-input-locked body{overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
html.stack-input-locked #app,html.stack-input-locked #board{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}

/* Approved logo placement: centered over the HUD in the scenic top strip. */
#app[data-state=menu] .world-cap{display:none;}
#app:not([data-state=menu]) .stack-world-brand{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:clamp(130px,32vw,240px);height:min(58px,calc(100% - 32px));margin:0;z-index:5;display:flex;align-items:center;justify-content:center;}
#app:not([data-state=menu]) .stack-world-brand img{width:100%;height:100%;object-fit:contain;}
#app:not([data-state=menu]) .brand small{margin:0;white-space:normal;line-height:1.45;font-size:clamp(8px,1.7vw,12px);}
@media(orientation:landscape){#app:not([data-state=menu]){grid-template-rows:clamp(28px,6dvh,42px) minmax(52px,15dvh) minmax(0,1fr) 32px 0;}#app:not([data-state=menu]) .world-cap{display:block;}#app:not([data-state=menu]) .stack-world-brand{height:calc(100% - 8px);}}

/* Quit sits directly under the MOBB STACK text without covering the board. */
#app .brand .stack-quit{display:block;width:64px;max-width:100%;min-height:24px;margin:3px 0 0;padding:3px 8px;border:1px solid #ff8d39;border-radius:6px;background:#c64b0e38;box-shadow:inset 0 0 7px #ff761526,0 0 5px #ff76152b;color:#ffd5aa;font:700 10px/1.2 Arial,sans-serif;letter-spacing:1px;text-shadow:none;cursor:pointer;touch-action:manipulation}
#app .brand .stack-quit[hidden]{display:none!important}#app .brand .stack-quit:focus-visible{outline:2px solid #fff3bd;outline-offset:2px}

#app[data-state=gameover] #menu-title{color:#ff5265;text-shadow:0 3px #570f20,0 0 20px #f12c3a33;}
/* Score goal and earned perks replace the static gesture footer. */
#app:not([data-state=menu]){grid-template-rows:minmax(34px,10dvh) minmax(62px,9dvh) minmax(0,1fr) 48px max(10px,env(safe-area-inset-bottom));}
#app[data-state=menu] .progression-hud{display:none;}
#app:not([data-state=menu]) .progression-hud{display:grid;grid-template-columns:minmax(0,1fr) 78px 72px;gap:6px;align-items:center;padding:3px 9px;pointer-events:auto;background:linear-gradient(120deg,var(--panel),#080d17);}
.stack-goal{min-width:0;text-align:left;line-height:1.15;}.stack-goal>span{font:700 clamp(9px,2.5vw,12px)/1.2 monospace;color:#fff0b2;white-space:nowrap;}.stack-goal>small{display:block;font:clamp(6px,1.7vw,9px)/1.2 Arial,sans-serif;color:#d8c595;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px;margin-top:2px;}
#goal-track{height:4px;overflow:hidden;margin-top:3px;background:#0009;border-radius:3px;}#goal-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#eb5a38,#ffdf79);transition:width .15s ease-out;}
#app .progression-hud button{min-width:0;width:100%;height:36px;border:1px solid #ffd27c;border-radius:7px;padding:4px;background:#c9591855;color:#fff0c7;font:700 9px/1.2 Arial,sans-serif;letter-spacing:.3px;touch-action:manipulation;box-shadow:inset 0 0 9px #ffbe391a;}
#app .progression-hud #perk-slow{background:#1688af44;border-color:#77dbef;color:#dcf9ff;}#app .progression-hud button:disabled{opacity:.42;cursor:default;}#app .progression-hud button:focus-visible{outline:2px solid white;outline-offset:2px;}
@media(orientation:landscape){#app:not([data-state=menu]){grid-template-rows:clamp(28px,6dvh,42px) minmax(52px,15dvh) minmax(0,1fr) 46px 0;}#app:not([data-state=menu]) .progression-hud{grid-template-columns:minmax(0,1fr) 100px 100px;}.stack-goal>span{font-size:11px;}.stack-goal>small{font-size:8px;}}
@media(max-width:350px){#app:not([data-state=menu]) .progression-hud{grid-template-columns:minmax(0,1fr) 68px 64px;gap:4px;padding-left:6px;padding-right:6px;}#app .progression-hud button{font-size:8px;}}
@media(prefers-reduced-motion:reduce){#goal-fill{transition:none;}}

#app .progression-hud button.perk-active:disabled{opacity:1;box-shadow:inset 0 0 10px #63d5eb33;}
@media(orientation:landscape){#app:not([data-state=menu]){grid-template-rows:clamp(28px,6dvh,42px) minmax(52px,15dvh) minmax(0,1fr) calc(46px + env(safe-area-inset-bottom)) 0;}#app:not([data-state=menu]) .progression-hud{padding-bottom:max(3px,env(safe-area-inset-bottom));}}