/* Shared controls, kept outside the canvas and visible throughout play. */
.arcade-screenbar{display:flex;align-items:center;gap:10px;min-height:37px;padding:5px 10px;box-sizing:border-box;background:#1a1423;border-bottom:1px solid #594166;color:#cdb9df;font:10px/1.3 Arial,sans-serif}
.arcade-screenbar-title{font-size:9px;letter-spacing:.7px;white-space:nowrap}
.arcade-screenbar-hint{display:none;color:#b8a5c8;font-size:10px}
.arcade-screenbar .arcade-screen-toggle{margin-left:auto;flex:none;min-height:29px;padding:5px 10px;border:1px solid #786087;border-radius:6px;background:#2b2036;color:#f3e4ff;cursor:pointer;font:10px/1.3 Arial,sans-serif;white-space:nowrap}
.arcade-screenbar .arcade-screen-toggle:hover{background:#423050;border-color:#cfadf0}
.arcade-screenbar .arcade-screen-toggle:focus-visible{outline:2px solid #ffe4a0;outline-offset:2px}
.arcade-fullscreen.arcade-fullscreen{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;width:100vw;max-width:none;height:100vh;height:100dvh;min-height:0;margin:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box;border:0;border-radius:0;overflow:hidden;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 45%,#271936,#0c0a14 75%);box-shadow:none}
.arcade-fullscreen::backdrop{background:#0c0a14}
.arcade-fullscreen>.arcade-screenbar{flex:0 0 auto;align-self:stretch;min-height:44px;padding:6px 12px;position:relative;z-index:20}
.arcade-fullscreen .arcade-screenbar-hint{display:block}
.arcade-fullscreen .arcade-screenbar .arcade-screen-toggle{min-height:32px;font-size:11px}
.arcade-fullscreen>.zn-setup,.arcade-fullscreen>.zn-instructions,.arcade-fullscreen>.zn-status{display:none}
.arcade-fullscreen>.zn-stage,.arcade-fullscreen>.pb-stage{flex:0 0 auto;width:var(--arcade-stage-width,100%);height:var(--arcade-stage-height,50vh);min-width:0;max-width:100%;max-height:none;align-self:center;box-sizing:border-box}
.arcade-fullscreen>.zn-stage{margin:auto 0}
.arcade-fullscreen .zn-stage canvas,.arcade-fullscreen .pb-stage canvas{width:100%;height:100%;max-height:none;aspect-ratio:auto;touch-action:none}
.arcade-fullscreen>.zn-controls{flex:0 0 auto;box-sizing:border-box;align-self:stretch;justify-content:center;gap:8px;padding:10px 12px;max-width:1100px;width:100%;margin:0 auto;background:#15101f}
.arcade-fullscreen>.zn-controls #zn-pause{margin-left:0}
.arcade-fullscreen>.zn-copy:not([hidden]){flex:0 0 auto;max-height:56px;margin:0 12px 8px;width:calc(100% - 24px);box-sizing:border-box}
.arcade-fullscreen>.pb-hud{flex:0 0 auto;width:var(--arcade-stage-width,100%);min-width:min(300px,100%);max-width:100%;height:48px;box-sizing:border-box;margin-top:auto;padding:5px 12px;gap:9px}
.arcade-fullscreen>.pb-hud output{font-size:20px}
.arcade-fullscreen>.pb-controls,.arcade-fullscreen>.pb-utility{flex:0 0 auto;width:var(--arcade-stage-width,100%);min-width:min(300px,100%);max-width:100%;box-sizing:border-box}
.arcade-fullscreen>.pb-controls{padding:7px 8px 6px;gap:7px}
.arcade-fullscreen>.pb-controls button{min-height:44px}
.arcade-fullscreen>.pb-utility{padding:0 8px 8px;margin-bottom:auto}
.arcade-fullscreen>.pb-utility button{min-height:29px}
@media(max-width:600px){.arcade-fullscreen>.zn-controls{display:grid;grid-template-columns:1fr 1fr 1fr;padding:8px;gap:6px}.arcade-fullscreen>.zn-controls .zn-primary,.arcade-fullscreen>.zn-controls #zn-jump,.arcade-fullscreen>.zn-controls #zn-slide{min-width:0;min-height:44px}.arcade-fullscreen>.zn-controls #zn-pause,.arcade-fullscreen>.zn-controls #zn-share{min-height:30px}.arcade-fullscreen .arcade-screenbar-hint{display:none}.arcade-fullscreen>.pb-hud small{font-size:6px;letter-spacing:.7px}.arcade-fullscreen>.pb-hud div:nth-child(2) output{font-size:14px}}
@media(max-height:500px){.arcade-fullscreen>.arcade-screenbar{min-height:36px;padding-top:3px;padding-bottom:3px}.arcade-fullscreen>.pb-hud{height:38px;padding-top:2px;padding-bottom:2px}.arcade-fullscreen>.pb-hud output{font-size:17px;line-height:1.15}.arcade-fullscreen>.pb-controls{padding-top:4px;padding-bottom:4px}.arcade-fullscreen>.pb-controls button{min-height:34px}.arcade-fullscreen>.pb-utility{padding-bottom:4px}.arcade-fullscreen>.pb-utility button{min-height:26px}.arcade-fullscreen .pb-overlay{padding:6px}.arcade-fullscreen .pb-overlay>div{padding:10px;max-height:100%;overflow:auto}.arcade-fullscreen .pb-pill{margin-bottom:5px}.arcade-fullscreen .pb-overlay strong{font-size:22px}.arcade-fullscreen .pb-overlay p{font-size:9px;line-height:1.3;margin:7px 0}.arcade-fullscreen .pb-overlay button{padding:7px;min-height:32px}.arcade-fullscreen #pb-result-score{font-size:30px;margin-bottom:6px}.arcade-fullscreen>.zn-controls{padding-top:5px;padding-bottom:5px}.arcade-fullscreen>.zn-controls button{min-height:34px;padding:6px 10px}}

/* A landscape phone gets a tall table with its controls beside it. */
@media(max-height:500px) and (orientation:landscape){
 .arcade-fullscreen[data-arcade-kind="pinball"]{--arcade-side-layout:1;--arcade-rail-width:clamp(150px,28vw,224px);display:grid;grid-template-columns:minmax(0,1fr) var(--arcade-stage-width,210px) var(--arcade-rail-width) minmax(0,1fr);grid-template-rows:36px minmax(0,1fr) auto auto auto minmax(0,1fr);column-gap:12px;align-items:start;justify-items:stretch}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.arcade-screenbar{grid-column:1/-1;grid-row:1;min-height:36px;height:36px;width:100%;box-sizing:border-box;align-self:stretch}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-stage{grid-column:2;grid-row:2/7;align-self:center;justify-self:center;margin:0}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-hud,.arcade-fullscreen[data-arcade-kind="pinball"]>.pb-controls,.arcade-fullscreen[data-arcade-kind="pinball"]>.pb-utility{grid-column:3;width:100%;min-width:0;max-width:100%;margin:0;box-sizing:border-box}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-hud{grid-row:3;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;padding:10px 12px;border:1px solid #61496e;border-bottom:0;border-radius:10px 10px 0 0}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-hud small{font-size:6px;letter-spacing:1px}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-hud output{font-size:18px;line-height:1.2}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-hud div:nth-child(2) output{font-size:15px}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-controls{grid-row:4;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-left:1px solid #61496e;border-right:1px solid #61496e}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-controls button{min-height:44px;min-width:0;padding:7px 4px;font-size:11px}
 .arcade-fullscreen[data-arcade-kind="pinball"] #pb-left{grid-column:1;grid-row:1}
 .arcade-fullscreen[data-arcade-kind="pinball"] #pb-right{grid-column:2;grid-row:1}
 .arcade-fullscreen[data-arcade-kind="pinball"] #pb-launch{grid-column:1/-1;grid-row:2;min-height:40px}
 .arcade-fullscreen[data-arcade-kind="pinball"] #pb-launch small{display:inline;margin-left:7px}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-utility{grid-row:5;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 8px 9px;border:1px solid #61496e;border-top:0;border-radius:0 0 10px 10px}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-utility button{min-height:36px;padding:5px 3px}
 .arcade-fullscreen[data-arcade-kind="pinball"] #pb-save{grid-column:1/-1;margin:0;text-align:center;min-height:10px;font-size:8px;line-height:1.3}
}

@media(max-height:320px) and (orientation:landscape){
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-hud{padding:6px 10px;gap:6px 10px}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-hud output{font-size:16px}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-controls{padding-top:6px;padding-bottom:6px}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-controls button{min-height:40px}
 .arcade-fullscreen[data-arcade-kind="pinball"] #pb-launch{min-height:36px}
 .arcade-fullscreen[data-arcade-kind="pinball"]>.pb-utility button{min-height:32px}
}