/* A self-contained side room: no main-game layout rules are changed. */
.arcade-overlay[hidden],.arcade-overlay [hidden]{display:none!important}.arcade-overlay{position:fixed;inset:0;z-index:1500;background:#142037;color:#f8ebd2;overflow:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font-family:system-ui,sans-serif}.arcade-room{max-width:1100px;margin:auto;min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:14px;box-sizing:border-box}.arcade-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}.arcade-heading h2{font-size:clamp(17px,3vw,26px);margin:0;color:#f8e6bd}.arcade-heading p{font-size:12px;color:#cfdbc9;margin:5px 0}.arcade-overlay button,.arcade-game-panel button{font:600 14px system-ui;min-width:48px;min-height:48px;border-radius:12px;border:1px solid #a8b8b566;background:#2d4153;color:#fff0d1;padding:10px 16px;cursor:pointer;touch-action:manipulation}.arcade-overlay button:focus-visible,.arcade-game-panel button:focus-visible,.arcade-overlay canvas:focus-visible{outline:3px solid #f8cf7c;outline-offset:3px}.arcade-overlay button:disabled{opacity:.45;cursor:default}.arcade-stage{position:relative;flex:none;width:100%;max-height:70svh;aspect-ratio:1000/550;align-self:center;border:1px solid #b69d8166;border-radius:18px;overflow:hidden;box-shadow:0 20px 70px #040a2470}.arcade-stage canvas{display:block;width:100%;height:100%;object-fit:contain;background:#1d2944}.arcade-cabinet-access{position:absolute;top:44%;width:14%;height:39%;opacity:0}.arcade-cabinet-access:focus-visible{opacity:1;background:#152331d9}.arcade-cabinet-left{left:8%}.arcade-cabinet-right{right:8%}.arcade-context{text-align:center;margin:10px 0;min-height:1.5em;font-size:14px;color:#ffe6b0}.arcade-controls{display:flex;gap:12px;align-items:center;justify-content:center}.arcade-controls .arcade-move{min-width:80px;touch-action:none;user-select:none;-webkit-user-select:none}.arcade-controls #arcadeAct{min-width:150px;background:#e3bf83;color:#243346}.arcade-footnote{text-align:center;font-size:12px;color:#b6c8c8;margin:10px 0 0}@media(max-width:600px){.arcade-room{padding:10px}.arcade-heading{align-items:flex-start}.arcade-heading p{max-width:220px}.arcade-heading button{padding:8px 11px}.arcade-stage{border-radius:12px}.arcade-controls{gap:9px}.arcade-controls .arcade-move{min-width:68px}.arcade-context{font-size:12px}.arcade-game-bar{gap:6px}.arcade-game-bar button{font-size:12px;padding:6px 9px}.arcade-game-bar h2{font-size:13px}.arcade-footnote{font-size:11px}}@media(max-height:500px) and (min-width:600px){.arcade-room{padding:7px 12px;justify-content:flex-start}.arcade-heading{margin-bottom:5px}.arcade-heading p,.arcade-footnote{display:none}.arcade-stage{max-width:calc((100svh - 138px)*1000/550);max-height:calc(100svh - 138px)}.arcade-context{margin:4px}.arcade-controls button{min-height:44px;padding:5px 14px}.arcade-heading button{min-height:40px;padding:5px 12px}}@media(prefers-reduced-motion:reduce){.arcade-overlay *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Cabinet shell. The screen is inside purple woodwork, not a second web page. */
.arcade-game-panel{position:fixed;inset:0;z-index:1502;display:grid;place-items:center;box-sizing:border-box;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 15%,#596072 0,#202d43 60%,#131c32 100%);font-family:system-ui,sans-serif;color:#fff0d1;overflow:hidden}
.arcade-game-panel.arcade-inactive{visibility:hidden;pointer-events:none}
.arcade-game-panel [hidden]{display:none!important}
.arcade-machine{box-sizing:border-box;display:grid;grid-template-rows:52px minmax(0,1fr) 70px;width:min(1400px,100%);height:100%;min-height:0;padding:0 15px;background:linear-gradient(90deg,#48305f,#77528d 2%,#50365f 5%,#50365f 95%,#946aa6 98%,#352545);border:3px solid #b68aca;border-bottom:9px solid #32233e;border-radius:24px 24px 16px 16px;box-shadow:0 24px 80px #070b22aa,0 0 0 7px #30243f,inset 0 2px #e9c5fa70}
.arcade-marquee{display:flex;align-items:center;justify-content:center;gap:25px;margin:7px 5px 8px;border-radius:9px;background:linear-gradient(#ead0ed,#c8a8dd);box-shadow:inset 0 2px 5px #fff7,0 3px 0 #30243f;color:#392b50;overflow:hidden}
.arcade-marquee h2{margin:0;font:800 clamp(13px,2vw,19px)/1.1 system-ui,sans-serif;letter-spacing:.12em;text-align:center;text-transform:uppercase}
.arcade-marquee>span{color:#745080;font-size:20px}
.arcade-screen-bezel{position:relative;min-width:0;min-height:0;padding:10px;border:2px solid #34243f;border-radius:16px;background:#19192a;box-shadow:inset 0 3px 8px #000b,0 2px 1px #c39bd080}
.arcade-frames{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid #9483ac50;border-radius:9px;background:#102035}
.arcade-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;visibility:hidden;pointer-events:none;background:#12223a}
.arcade-frame.arcade-frame-active{visibility:visible;pointer-events:auto}
.arcade-control-deck{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -8px;padding:7px 15px 4px;border-top:3px solid #a17caf;border-radius:7px 7px 12px 12px;background:linear-gradient(#745682,#523c65 85%);box-shadow:inset 0 2px #dbb8e22b}
.arcade-game-panel button{min-height:48px;min-width:48px;padding:10px 16px;font:650 14px system-ui,sans-serif;color:#fff0d1;border:1px solid #d2aad077;border-radius:13px;background:linear-gradient(#514262,#342b49);box-shadow:0 3px 0 #241c35;cursor:pointer;touch-action:manipulation}
.arcade-game-panel button:active{transform:translateY(1px);box-shadow:0 2px 0 #241c35}
.arcade-game-panel button:focus-visible{outline:3px solid #ffe0a2;outline-offset:3px}
.arcade-deck-art{display:flex;align-items:center;gap:12px;padding:4px 10px}
.arcade-deck-art i{position:relative;display:block;width:35px;height:14px;margin-right:12px;border-radius:50%;background:#211e31;box-shadow:0 2px #b08bb65c}
.arcade-deck-art i:before{content:'';position:absolute;width:5px;height:21px;bottom:7px;left:15px;background:#c2b1d1;transform:rotate(-12deg)}
.arcade-deck-art i:after{content:'';position:absolute;width:22px;height:22px;bottom:18px;left:5px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f9d9b8,#d39f8b 70%);box-shadow:0 2px 2px #30243f}
.arcade-deck-art b{width:23px;height:15px;border-radius:50%;background:#e9b0c3;border-bottom:4px solid #9c6e95;box-shadow:0 1px 3px #24172c}
.arcade-deck-art b:last-child{background:#e4d18a;border-color:#a48d65;transform:translateY(-5px)}
.arcade-notice{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(420px,85%);padding:22px;border:1px solid #bca0ca88;border-radius:16px;background:#29283df5;color:#fff2d2;box-shadow:0 15px 60px #0008;text-align:center}
.arcade-status{margin:0;font:15px/1.5 system-ui,sans-serif}
.arcade-notice button{margin-top:15px;background:#e5c58b;color:#21364c;border-color:#ffe1a1}
@media(max-width:600px){.arcade-game-panel{padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}.arcade-machine{padding:0 5px;grid-template-rows:42px minmax(0,1fr) 65px;border-width:2px;border-bottom-width:6px;border-radius:17px 17px 12px 12px;box-shadow:0 0 0 3px #30243f}.arcade-marquee{gap:12px;margin:5px 2px 6px}.arcade-marquee h2{font-size:12px;letter-spacing:.1em}.arcade-screen-bezel{padding:5px;border-radius:12px}.arcade-frames{border-radius:6px}.arcade-control-deck{margin:0 -3px;padding:5px 7px;gap:6px}.arcade-game-panel button{font-size:12px;padding:8px 11px}.arcade-deck-art{gap:7px;padding:3px}.arcade-deck-art i{margin-right:2px;width:25px}.arcade-deck-art i:before{left:11px}.arcade-deck-art i:after{left:2px}.arcade-deck-art b{width:17px;height:12px}.arcade-status{font-size:13px}}
@media(max-height:500px) and (min-width:600px){.arcade-game-panel{padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left))}.arcade-machine{grid-template-rows:36px minmax(0,1fr) 56px;padding:0 9px;border-radius:17px}.arcade-marquee{margin:4px 3px 5px}.arcade-marquee h2{font-size:12px}.arcade-screen-bezel{padding:5px}.arcade-control-deck{padding:3px 10px}.arcade-game-panel button{min-height:44px;padding:6px 12px;font-size:12px}}

/* The optional audio fallback wraps beneath the three room movement controls on phones. */
.arcade-controls{flex-wrap:wrap}.arcade-controls #arcadeMusic{font-size:12px;min-width:148px;background:#263d4b;color:#d6e2ce}

/* Short landscape uses the actual available screen, including narrow phones. */
@media(orientation:landscape) and (max-height:420px){
 .arcade-game-panel{padding:max(4px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
 .arcade-machine{grid-template-rows:28px minmax(0,1fr) 52px;padding:0 4px;border-width:2px;border-bottom-width:3px;border-radius:12px;box-shadow:0 0 0 2px #30243f}
 .arcade-marquee{margin:3px 2px;gap:8px}.arcade-marquee h2{font-size:11px;letter-spacing:.06em}.arcade-marquee>span{font-size:14px}
 .arcade-screen-bezel{padding:3px;border-width:2px;border-radius:8px}.arcade-frames{border-radius:5px}
 .arcade-control-deck{padding:2px 8px;margin:0 -2px;gap:6px}.arcade-game-panel button{min-width:44px;min-height:44px;font-size:12px;padding:6px 10px}.arcade-deck-art{padding:0;gap:6px}.arcade-deck-art i{display:none}
}