/* Build45: one compact landscape HUD; orange glass controls and counters. */
#boardUI #controls{display:contents}
#boardUI #controls button:not(#blastButton){width:auto;height:44px;min-height:44px;min-width:44px;margin:0;padding:4px 3px;border:1px solid #ff982c;border-radius:8px;background:linear-gradient(130deg,#ff9c244d,#ff6a1a26);color:#fff5dd;font:800 clamp(9px,1cqw,13px)/1.15 Arial,sans-serif;letter-spacing:.02em;text-shadow:0 1px 3px #542000,0 0 7px #ff8a36;box-shadow:inset 0 1px 0 #fff1bf66,inset 0 -1px 5px #ff7d2033,0 0 10px #ff7c2977;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:1;transform:none}
#boardUI #controls button:not(#blastButton):before{display:none}
#boardUI #controls button:not(#blastButton):hover{background:#ff9c2466;box-shadow:0 0 14px #ff8b3388,inset 0 1px 0 #fff1bf88}
#boardUI #controls button:not(#blastButton):active{background:#ff8d2473;transform:translateY(1px)}
#boardUI #controls button:focus-visible{outline:2px solid #fff;outline-offset:3px}
#boardUI #controls #viewButton[hidden]{display:none}
/* Burst remains at its established lower-right gameplay position. */
#boardUI #controls #blastButton{position:absolute;left:auto;right:1.3%;bottom:1.8%;top:auto}
#boardUI #controls button:not(#blastButton):not([hidden]){position:absolute;top:1.5%;width:6.1%}
#boardUI #controls #menuButton{left:1.5%}#boardUI #controls #retryButton{left:8.1%}#boardUI #controls #soundButton{left:14.7%}#boardUI #controls #fullButton{left:21.3%}
.glass-play-logos{position:absolute;top:1%;left:29%;width:39%;height:max(48px,11cqh);display:flex;align-items:center;justify-content:center;gap:1cqw;pointer-events:none;z-index:5}
#boardUI .glass-play-logos .glass-hud-brand{position:static;inset:auto;transform:none;width:46%;max-width:240px;height:auto;max-height:100%;margin:0;flex:0 1 46%}
#boardUI .glass-play-logos .glass-hud-brand img{width:100%;height:auto;max-height:11cqh;object-fit:contain}
#boardUI .glass-play-logos #gameLogo{position:static;inset:auto;width:48%;height:100%;max-height:11cqh;object-fit:contain;flex:0 1 48%}
#boardUI #hud{top:1.5%;right:1.5%;left:auto;bottom:auto;width:28%;max-width:28%;padding:0}
#boardUI .metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:.6cqw}
#boardUI .metrics>div{min-width:0;min-height:44px;padding:5px 3px;clip-path:none;border:1px solid #ffad4d;border-radius:8px;background:linear-gradient(130deg,#ff9c244d,#ff6a1a26);box-shadow:inset 0 1px 0 #fff1bf66,0 0 10px #ff7c2977;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#boardUI .metrics small{font:800 clamp(8px,.8cqw,12px)/1 Arial;color:#fff2d5;letter-spacing:.05em;text-shadow:0 1px 3px #542000}
#boardUI .metrics b{font:900 clamp(16px,1.7cqw,27px)/1.1 Arial;color:#fff9eb;margin-top:3px;text-shadow:0 1px 3px #542000}
/* Keep the menu/pause branding aligned side by side above Rohni. */
#panel .glass-panel-brand{left:1%;top:4%;width:14%;height:10%;max-width:none;margin:0;display:flex;align-items:center;justify-content:center}
#panel .glass-panel-brand img{width:100%;height:100%;object-fit:contain}
#panel .panel-logo,#panel[data-mode="result"] .panel-logo,#panel[data-mode="paused"] .panel-logo{left:16%;top:2%;width:16%;height:14%;object-fit:contain}
/* Portrait gate: independent image sizing avoids the old padded 150px logo box. */
#rotateGate{gap:clamp(12px,2.5dvh,24px);padding:24px 20px}
#rotateGate>img{width:min(340px,86vw);height:auto;max-height:25dvh;object-fit:contain;margin:0}
#rotateGate .arcade-home-logo{display:flex;align-items:center;justify-content:center;width:min(340px,86vw);max-width:none;height:auto;margin:0 auto 14px;flex-shrink:0}
#rotateGate .arcade-home-logo img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
#rotateGate h2{font-size:clamp(21px,5.8vw,28px)}
@media(orientation:portrait) and (max-height:650px){#rotateGate{gap:12px;padding:16px}#rotateGate>img{max-height:20dvh}#rotateGate .arcade-home-logo{width:min(290px,76vw);margin-bottom:4px}.rotate-phone{width:88px;height:47px;flex-shrink:0}.rotate-phone:after{top:17px}#rotateGate h2{margin-top:5px}#rotateGate p{font-size:13px}#rotateGate small{font-size:11px}}

@media(orientation:landscape) and (max-width:700px){
#boardUI #controls button:not(#blastButton):not([hidden]){width:7.5%}
#boardUI #controls #menuButton{left:1.5%}#boardUI #controls #retryButton{left:9.5%}#boardUI #controls #soundButton{left:17.5%}#boardUI #controls #fullButton{left:25.5%}
.glass-play-logos{left:34%;width:35%;gap:.4cqw}
#boardUI #hud{width:27%;max-width:27%;right:1%}
#boardUI .metrics b{font-size:14px}
}

/* Build46: swap the logo positions; keep home-link behavior and sizes. */
#panel .glass-panel-brand{left:18%;width:14%}
#panel .panel-logo,#panel[data-mode="result"] .panel-logo,#panel[data-mode="paused"] .panel-logo{left:1%;width:16%}
#rotateGate .arcade-home-logo{margin:0 auto}
#rotateGate>img{margin:0 0 14px}
@media(orientation:portrait) and (max-height:650px){#rotateGate>img{margin-bottom:4px}}

/* Build47: make the rotation instruction unmistakable. */
#rotateGate{gap:clamp(12px,2dvh,20px);overflow-y:auto;justify-content:safe center}
#rotateGate .rotate-phone{width:164px;height:88px;border-width:4px;border-radius:18px;flex-shrink:0;box-shadow:0 0 32px #f3bd3644}
#rotateGate .rotate-phone:after{right:10px;top:33px;width:10px;height:10px}
#rotateGate h2{font-size:clamp(30px,9.2vw,44px);line-height:1.08;letter-spacing:1px;margin:8px 0 0;max-width:100%;flex-shrink:0}
@media(orientation:portrait) and (max-height:650px){#rotateGate{gap:10px}#rotateGate .rotate-phone{width:142px;height:76px;border-radius:16px}#rotateGate .rotate-phone:after{top:27px;right:8px;width:9px;height:9px}#rotateGate h2{font-size:clamp(28px,8.5vw,38px)}}

/* Build48: quiet readouts; only Pause and Full screen remain on the board. */
#boardUI .metrics>div{border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:5px 3px}
#boardUI .metrics small,#boardUI .metrics b{color:#fff8e5;text-shadow:0 1px 2px #062d4b,0 2px 5px #062d4bcc}
#boardUI #controls button:not(#blastButton):not([hidden]){width:12.5%;height:44px;min-height:44px;padding:0 6px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:clamp(10px,1cqw,14px);isolation:isolate}
#boardUI #controls #menuButton{left:1.5%}#boardUI #controls #fullButton{left:15%}
#boardUI #controls button:not(#blastButton):not([hidden])::after{content:'';position:absolute;inset:7px 0;z-index:-1;border:1px solid #ff982c;border-radius:4px;background:linear-gradient(130deg,#ff9c2455,#ff6a1a33);box-shadow:inset 0 1px 0 #fff1bf55,0 0 8px #ff7c2955;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
#boardUI #controls button:not(#blastButton):hover{background:none;box-shadow:none}
#boardUI #controls button:not(#blastButton):hover::after{background:#ff9c2466}
#panel[data-mode="paused"] .panel-content{top:9%;bottom:8%;right:5%;gap:2cqh;padding:2cqh 2cqw}
#panel[data-mode="paused"] #panelTitle{font-size:clamp(24px,4.7cqw,64px)}
#panel[data-mode="paused"] #startButton{height:15cqh;min-height:44px;font-size:clamp(18px,3cqw,42px)}
#panel[data-mode="paused"] #readyStatus{font-size:clamp(10px,1.25cqw,16px);line-height:1.4}
#panel[data-mode="paused"] .panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:2cqh 1cqw;width:100%;margin:0}
#panel[data-mode="paused"] .panel-actions button{min-height:40px;padding:6px 8px;font:800 clamp(11px,1.6cqw,22px)/1.1 Arial,sans-serif;letter-spacing:.02em;border:1px solid #ffb65c;border-radius:6px;color:#fff7df;background:linear-gradient(130deg,#ff9c2477,#ff6a1a44);box-shadow:inset 0 1px 0 #fff1bf66,0 0 9px #ff8b3344;text-shadow:0 1px 2px #653511}
#panel[data-mode="paused"] #mapsButton{grid-column:1/-1;background:linear-gradient(130deg,#0c638dbb,#083d55dd);border-color:#88e6ef}
#panel[data-mode="paused"] #soundButton[aria-pressed="true"]{border-color:#fff6b0;box-shadow:0 0 10px #ffd07077,inset 0 1px 0 #fff1bf88}
@media(orientation:landscape) and (max-width:700px){#boardUI #controls button:not(#blastButton):not([hidden]){width:15%}#boardUI #controls #fullButton{left:17.5%}}
@media(orientation:landscape) and (max-height:360px){#panel[data-mode="paused"] .panel-content{top:6%;bottom:5%;gap:1.5cqh}#panel[data-mode="paused"] .panel-actions{gap:1.5cqh 1cqw}#panel[data-mode="paused"] .panel-actions button{min-height:36px}}

/* Focusing Resume must not scroll the full-viewport artwork out of frame. */
#panel .menu-card,#panel[data-mode] .menu-card{overflow:clip}
#panel #soundButton::before{display:none}
#boardUI #panel{overflow:clip}

/* Build49: 45% transparent menu action fill; keep label and outline crisp. */
#panel[data-mode="menu"] #startButton{background:linear-gradient(170deg,rgba(255,204,98,.55),rgba(255,138,36,.55) 48%,rgba(227,75,24,.55))}
#panel[data-mode="menu"] #panelEyebrow{display:none}

/* Build50: move side groups outward by half a group, bounded by the viewport. */
#boardUI{--side-room:max(0px,calc((100vw - 100cqw)/2 - 12px));--control-shift:min(13cqw,var(--side-room));--metric-shift:min(14cqw,var(--side-room))}
#boardUI #controls #menuButton{left:calc(1.5% - var(--control-shift))}
#boardUI #controls #fullButton{left:calc(15% - var(--control-shift))}
#boardUI #hud{right:calc(1.5% - var(--metric-shift))}
@media(orientation:landscape) and (max-width:700px){#boardUI{--control-shift:min(15.5cqw,var(--side-room))}#boardUI #controls #fullButton{left:calc(17.5% - var(--control-shift))}}

/* Build50: paint-only fluorescent glass finish; existing geometry is untouched. */
#panel[data-mode="menu"] #panelTitle{position:relative;isolation:isolate;background:linear-gradient(150deg,rgba(185,255,255,.42),rgba(17,178,207,.24) 46%,rgba(7,125,156,.42));border-color:#ffe194;box-shadow:inset 0 1px 0 #ffffe4dd,inset 0 -1px 0 #94f8ff99,inset 0 0 18px #74f3ff33,0 0 8px #ffdc8055,0 0 20px #46ecff44,0 .5cqh 0 #72531899;backdrop-filter:blur(4px) saturate(1.3);-webkit-backdrop-filter:blur(4px) saturate(1.3)}
#panel[data-mode="menu"] #panelTitle::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(112deg,transparent 12%,#ffffff1f 12.5%,#ffffff08 32%,transparent 32.5%,transparent 73%,#ffffff14 73.5%,transparent 83%),linear-gradient(180deg,#ffffff2b,transparent 45%);pointer-events:none}
#panel[data-mode="menu"] #startButton{background:linear-gradient(160deg,rgba(255,204,98,.55),rgba(255,138,36,.55) 48%,rgba(227,75,24,.55));border-color:#fff1bd;box-shadow:0 0 0 .25cqw #7b2b108c,inset 0 1px 0 #fff8d6ee,inset 0 .6cqh 0 #ffe5a733,inset 0 0 18px #ffb84444,0 0 10px #ffb32e88,0 0 24px #ff7a2855,0 1cqh 0 #9a321488,0 1.5cqh 1.5cqh #07384a33;backdrop-filter:blur(3px) sepia(1) saturate(1.8) hue-rotate(-15deg);-webkit-backdrop-filter:blur(3px) sepia(1) saturate(1.8) hue-rotate(-15deg);text-shadow:0 .3cqh .2cqh #882b18,0 0 10px #fff4c566}
#panel[data-mode="menu"] #startButton::after{background:linear-gradient(90deg,transparent,#fff4c899,transparent)}

#startButton.ready-prompt{letter-spacing:.12em;text-shadow:0 0 16px #ff6344;}

/* Compact controls: half-width and half-height artwork, full touch height. */
#boardUI #controls button:not(#blastButton):not([hidden]){width:6.25%;min-width:0;height:44px;min-height:44px;font-size:clamp(8px,.7cqw,11px);padding:0 2px}
#boardUI #controls button:not(#blastButton):not([hidden])::after{inset:14.5px 0;border-radius:3px}
#boardUI #controls #menuButton{left:calc(1.5% - var(--control-shift))}
#boardUI #controls #fullButton{left:calc(8.25% - var(--control-shift))}
#boardUI #controls #musicButton{left:calc(15% - var(--control-shift))}
@media(orientation:landscape) and (max-width:700px){
#boardUI #controls button:not(#blastButton):not([hidden]){width:7.5%}
#boardUI #controls #fullButton{left:calc(9.5% - var(--control-shift))}
#boardUI #controls #musicButton{left:calc(17.5% - var(--control-shift))}
}

/* Keep Share clear of both logos at the opposite top corner. */
#panel #shareGlass{position:absolute;inset:auto;top:1.5%;right:1.5%;left:auto;bottom:auto;z-index:8;width:auto;min-width:44px;max-width:11%;height:22px;min-height:22px;margin:0;padding:2.5px 6px;border:1px solid #ff9b32;border-radius:4px;background:linear-gradient(135deg,#ffa52d59,#ff681a33);color:#fff6df;font:800 clamp(5px,.575cqw,8px)/1.1 Arial,sans-serif;letter-spacing:.03em;text-shadow:0 1px 2px #6d2d0b;box-shadow:inset 0 1px 0 #fff1bf99,inset 0 0 10px #ff9a2633,0 0 12px #ff821d88;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#panel #shareGlass:hover{background:linear-gradient(135deg,#ffb34d77,#ff791a55)}
#panel #shareGlass:active{transform:translateY(1px)}
#panel #shareGlass:focus-visible{outline:2px solid #fff;outline-offset:3px}