/* An image-backed room: all cabinet geometry, lighting and materials belong to the scene. */
body.arcade-page.bd-v12.bd-v12.bd-v12{background:#08070b;color:#fff1da}
body.arcade-page.bd-v12.bd-v12.bd-v12>main{width:100%;max-width:none;margin:0;padding:0;background:#08070b}
.mall-arcade,.mall-arcade *{box-sizing:border-box}
.mall-arcade{position:relative;isolation:isolate;width:100%;height:calc(100svh - var(--arcade-header,84px));min-height:520px;overflow:hidden;background:#100c11;color:#fff1da}
.mall-arcade:before{content:"";position:absolute;inset:-20px;background:linear-gradient(#09070b66,#09070b66),url(/assets/mall-arcade-1987.webp) center/cover;filter:blur(18px);pointer-events:none}
.mall-pan{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;touch-action:pan-x pan-y}
.mall-pan::-webkit-scrollbar{display:none}
.mall-pan.is-dragging{cursor:grabbing;user-select:none}
.mall-scene{position:relative;height:100%;width:100%;min-width:0;user-select:none}
.mall-room-image{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none}
.mall-arcade:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,#050308bb 0,transparent 20%,transparent 75%,#050308d9 100%)}
body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading{position:absolute;z-index:3;top:22px;left:clamp(20px,3vw,58px);pointer-events:none;text-shadow:0 2px 20px #000}
body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading p{margin:0 0 5px;color:#ffc690;font:700 12px/1.2 var(--text);letter-spacing:.22em}
body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading h1{margin:0;font:700 clamp(38px,4.4vw,72px)/.95 var(--display);letter-spacing:.035em;color:#fff2d8}
body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading>span{display:block;margin-top:8px;color:#ded3c2;font:500 14px/1.4 var(--text)}
body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-scores{position:absolute;z-index:4;right:clamp(20px,3vw,58px);top:27px;padding:12px 0;color:#ffdab0;border-bottom:1px solid #d8a06380;font:600 14px/1.3 var(--text);text-decoration:none}
.mall-machine{position:absolute;display:block;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);color:var(--glow);text-decoration:none;outline:none;border-radius:7% 7% 0 0;-webkit-tap-highlight-color:transparent;transition:background .2s,box-shadow .2s}
.mall-machine:focus-visible{outline:2px solid var(--glow);outline-offset:5px;background:color-mix(in srgb,var(--glow) 8%,transparent)}
.mall-play{position:absolute;bottom:16%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;width:max-content;max-width:98%;padding:10px 15px 9px;border:1px solid color-mix(in srgb,var(--glow) 60%,transparent);border-radius:3px;background:#09090ddd;box-shadow:0 5px 18px #0009;color:var(--glow);text-align:center;transition:transform .2s,background .2s,box-shadow .2s}
.mall-play small{font:650 11px/1.25 var(--text);letter-spacing:.035em;white-space:nowrap}
.mall-play strong{font:700 22px/1 var(--display);letter-spacing:.18em}
.mall-machine:hover .mall-play,.mall-machine:focus-visible .mall-play,.mall-machine.is-selected .mall-play{background:#0b0908f5;box-shadow:0 0 24px color-mix(in srgb,var(--glow) 35%,transparent);transform:translateX(-50%) translateY(-4px)}
.mall-machine:hover{background:color-mix(in srgb,var(--glow) 5%,transparent)}
.mall-bottom{position:absolute;z-index:4;bottom:16px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-instruction{margin:0;font:500 14px/1.4 var(--text);color:#e4daca;text-shadow:0 1px 6px #000}
.mall-selector{display:flex;gap:4px;padding:4px;border:1px solid #cab69b40;background:#09070ccc;backdrop-filter:blur(12px);border-radius:4px;pointer-events:auto}
body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-selector button{border:0;border-radius:2px;background:transparent;color:#d6c8b5;padding:12px 16px;min-height:44px;font:600 14px/1.2 var(--text);cursor:pointer;white-space:nowrap}
.mall-selector button span{color:#a28c73;font-size:11px;margin-right:7px}
body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-selector button[aria-pressed=true]{background:#ffcc8719;color:#ffe8c6;box-shadow:inset 0 -2px #f09d55}
.mall-selector button:focus-visible,.mall-scores:focus-visible{outline:2px solid #ffc58a;outline-offset:3px}
body.arcade-page.bd-v12.bd-v12.bd-v12 #leaderboard{max-width:none;width:100%;padding:48px clamp(20px,3vw,64px);margin:0;background:#0b090f;border-top:1px solid #383039}
body.arcade-page.bd-v12.bd-v12.bd-v12 #leaderboard .score-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:1100px){.mall-arcade:not(.room-pannable) .mall-selector{display:none}.mall-arcade:not(.room-pannable) .mall-bottom{justify-content:center}.mall-arcade:not(.room-pannable) .mall-instruction{letter-spacing:.08em}}
@media(max-width:900px){.mall-arcade{min-height:470px}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading{top:20px}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading h1{font-size:43px}.mall-bottom{flex-direction:column;gap:9px;bottom:16px;left:12px;right:12px}.mall-selector{width:max-content;max-width:100%}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-selector button{padding:12px 13px;font-size:13px}.mall-selector button span{display:none}.mall-play{padding:10px 15px}.mall-play strong{font-size:24px}.mall-play small{font-size:12px}body.arcade-page.bd-v12.bd-v12.bd-v12 #leaderboard .score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading{top:18px;left:20px}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading h1{font-size:40px}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading>span{font-size:12px}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading p{font-size:11px;letter-spacing:.16em}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-scores{font-size:12px;top:20px;right:18px}body.arcade-page.bd-v12.bd-v12.bd-v12 #leaderboard .score-grid{grid-template-columns:1fr}}
@media(max-height:600px) and (min-width:700px){.mall-arcade{min-height:400px}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading h1{font-size:38px}body.arcade-page.bd-v12.bd-v12.bd-v12 .mall-heading>span{display:none}.mall-play{bottom:12%;padding:7px 10px}.mall-play small{display:none}}
@media(prefers-reduced-motion:reduce){.mall-machine,.mall-play{transition:none}}