*{box-sizing:border-box}html{background:#0b0618;color-scheme:dark}body{margin:0;background:#0b0618;color:#fff;font-family:Arial,sans-serif;min-height:100dvh}.cabinet{position:relative;width:min(100%,680px);aspect-ratio:941/1672;margin:0 auto;isolation:isolate}.cabinet-art{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.brand{position:absolute;left:37%;top:4.4%;width:26%;height:9.5%;display:block}.brand img{position:absolute;width:132%;height:auto;left:-15.9%;top:-21%;clip-path:polygon(12.25% 26.2%,80.95% 14.4%,87.9% 21.25%,87.7% 71%,17.5% 82.75%,12.25% 77.6%);filter:drop-shadow(0 0 5px #fff8)}.screen{position:absolute;left:15.1%;top:26%;width:69.1%;height:29.3%;border-radius:12% / 10%;overflow:hidden;background:#070a12;box-shadow:0 0 9px #000;isolation:isolate}#slides,.slide,.game-art{position:absolute;inset:0}.slide{opacity:0;pointer-events:none;transition:opacity .7s ease;display:block}.slide.active{opacity:1;pointer-events:auto}.game-art{display:block;overflow:hidden;background:#101626}.cover{width:100%;height:100%;object-fit:cover;display:block}.game-logo{position:absolute;width:72%;height:28%;object-fit:contain;left:14%;bottom:5%;filter:drop-shadow(0 2px 5px #000a)}.screen .game-logo{width:43%;height:28%;left:4%;top:5%;bottom:auto}.screen .minibank .cover{object-position:center 46%}.screen .slice .cover{object-position:center 60%}.ring{background:#151c2c url(assets/lobby-ring-arena-v38.webp) center/cover}.ring .cover{object-fit:contain;height:130%;width:100%;object-position:center top}.screen .ring .cover{width:65%;height:155%;position:absolute;left:26%;top:1%}.screen .ring .game-logo{width:37%;left:4%;top:8%}#dots{position:absolute;bottom:3%;left:25%;right:25%;display:flex;justify-content:center;z-index:3}.dot{width:28px;height:26px;padding:8px;border:0;background:transparent;cursor:pointer}.dot:after{content:'';display:block;width:8px;height:8px;border-radius:50%;background:#a3a3a3;box-shadow:0 0 3px #000}.dot[aria-pressed=true]:after{background:#83f4ff;box-shadow:0 0 8px #20e5ff}#autoplay{position:absolute;bottom:3%;right:3%;z-index:4;border:0;border-radius:5px;background:#03081ca8;color:white;padding:7px;font:10px Arial;cursor:pointer}.hardware{position:absolute;top:59.8%;height:6.8%;width:18%;background:transparent;border:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}.previous{left:19.3%}.next{left:62.7%}.hardware:hover{box-shadow:0 0 20px #6ce6ff55}.next:hover{box-shadow:0 0 20px #ff48d955}.hardware:active{background:#ffffff22;transform:translateY(2px)}#games{position:absolute;left:5.4%;top:69.75%;width:89.3%;height:17%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.9%}.game-entry{position:relative;display:block;border-radius:5%;overflow:hidden;box-shadow:0 0 0 2px #0b0e18;transition:box-shadow .25s}.game-entry.selected{box-shadow:0 0 0 2px #90faff,0 0 12px #00dcff}.game-entry:hover{filter:brightness(1.13)}.game-entry .game-logo{width:94%;height:33%;left:3%;bottom:3%}.game-entry .ring .cover{height:130%;position:absolute;top:0}.utilities{position:absolute;top:92%;left:20%;width:60%;text-align:center}.utilities button{font:11px Arial;color:#d7e4ff;border:1px solid #98b7ef44;border-radius:15px;padding:8px 15px;background:#090d22aa;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(min-width:750px){.cabinet{width:min(680px,calc(100dvh * .563))}}@media(prefers-reduced-motion:reduce){.slide,.game-entry{transition:none}}@media(max-width:360px){.dot{width:23px}#autoplay{font-size:9px;padding:5px}.utilities button{font-size:10px}}
/* Keep the approved compact logo wholly within the marquee. */
.brand{left:40%;top:3.4%;width:20%;height:8%}
/* Desktop is a full arcade hall; mobile retains the approved cabinet composition. */
@media(min-width:750px){
 body{background:#160b30 url('assets/arcade-hall-desktop-v1.png') center center/cover fixed no-repeat;display:grid;place-items:center;min-height:100dvh}
 .cabinet{width:min(680px,calc(100dvh * .558));margin:0 auto;filter:drop-shadow(0 8px 24px #08031dc0)}
 .cabinet-art{mask-image:linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent)}
}
/* Tall phones: extend the scene to the bottom rather than exposing a blank page. */
@media(max-width:749px){
 body{background:#160b30 url('assets/arcade-hall-desktop-v1.png') center bottom/auto max(100dvh,177.69vw) no-repeat;min-height:100dvh}
 .cabinet-art{mask-image:linear-gradient(to bottom,#000 0%,#000 96%,transparent 100%)}
}

@font-face{font-family:ArcadeRoboto;src:url('assets/arcade-roboto-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
.cabinet{container-type:inline-size}
.tagline{position:absolute;top:13.45%;left:12%;width:76%;margin:0;text-align:center;font-family:ArcadeRoboto,Arial,sans-serif;font-weight:500;font-size:2.7cqw;line-height:1.2;letter-spacing:.025em;color:#d7f6fa;white-space:nowrap;text-shadow:0 1px 4px #000;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.business{margin:0 auto;padding:10px 18px max(18px,env(safe-area-inset-bottom));text-align:center;font-family:ArcadeRoboto,Arial,sans-serif;font-weight:500;min-height:72px}
.business details{display:inline-block;min-width:160px}
.business summary{list-style:none;cursor:pointer;display:block;padding:11px 26px;border:1px solid #8be9ff80;border-radius:24px;background:#101c3ce8;color:#e4fbff;font-size:13px;box-shadow:0 0 16px #45c7ed20}
.business summary::-webkit-details-marker{display:none}
.business summary:hover{background:#23375c}
.business summary:focus-visible{outline:3px solid #fff;outline-offset:4px}
.business a{display:block;margin-top:12px;padding:12px 18px;border-radius:12px;background:#101c3cf2;color:#aeefff;text-decoration:none;font-size:14px}
@media(min-width:750px){body{display:block}.cabinet{width:min(680px,calc((100dvh - 72px) * .558))}}

#games{grid-template-columns:repeat(5,minmax(0,1fr));gap:2%}.balloon{background:radial-gradient(ellipse at top,#c68630,#153d39 65%)}.balloon .cover{object-fit:contain;object-position:center top;height:100%;width:100%;max-width:none;margin-left:0}.screen .balloon .cover{width:100%;height:100%;margin:0;position:absolute;left:0;top:0;object-fit:cover;object-position:center center}.screen .balloon .game-logo{width:34%;height:40%;left:1%;top:25%}.game-entry .balloon .game-logo{height:30%;width:100%;left:0;bottom:3%}

/* Hanap Ninong: reuse approved in-game art and preserve the five other games. */
#games{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.5%}
.ninong .cover{object-fit:cover;object-position:50% 50%;filter:brightness(.8)}
.ninong .lobby-character{position:absolute;object-fit:contain;width:108%;height:95%;bottom:-7%;left:-4%;filter:drop-shadow(0 3px 4px #0008)}
.ninong .game-logo{z-index:1;width:96%;left:2%;height:30%;bottom:1%}
.screen .ninong .lobby-character{width:61%;height:108%;left:37%;bottom:-15%}
.screen .ninong .game-logo{width:48%;height:48%;left:3%;top:24%;bottom:auto}

/* Four games per row; additional entries flow into the next row. */
#games{grid-template-columns:repeat(4,minmax(0,1fr));height:auto;gap:2cqw}
.game-entry{aspect-ratio:.9;min-width:0}
.utilities{top:98%;}
.business{padding-top:35px;min-height:97px}
@media(min-width:750px){.cabinet{width:min(680px,calc((100dvh - 97px) * .558))}}
#games{isolation:isolate}
#games::before{content:"";position:absolute;inset:-2cqw;z-index:-1;pointer-events:none;border:1px solid #6f83a538;border-radius:1.5cqw;background:linear-gradient(135deg,#171622,#080d19 60%,#15162a);box-shadow:0 4px 12px #0008}

.game-art.treasure .cover{object-position:center 42%}.game-art.treasure .game-logo{width:91%;left:4.5%;top:0;bottom:auto}.game-art.treasure .lobby-character{position:absolute;width:55%;height:80%;object-fit:contain;left:23%;bottom:-8%}.slide .game-art.treasure .lobby-character{width:44%;height:92%;left:50%;bottom:-15%}.slide .game-art.treasure .game-logo{width:62%;left:1%;top:5%}

/* Marble Rally: actual race frame and the approved three-ball wordmark. */
.marble .cover{object-fit:cover;object-position:center 50%}.screen .marble .cover{width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:center 58%}.marble .game-logo{width:94%;height:27%;left:3%;bottom:3%;filter:drop-shadow(0 2px 3px #1d0f29)}.screen .marble .game-logo{width:43%;height:40%;left:3%;top:4%;bottom:auto}