html.arcade-active { overflow: hidden; }
.arcade-intro { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; padding:0; border:0; margin:0; overflow:hidden; background:#f3eadb; color:#24211c; }
.arcade-intro::backdrop { background:#f3eadb; }
.arcade-stage { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 45%,#fff9ee,#ece1d1); }
.arcade-cabinet { position:relative; height:min(88svh,900px); aspect-ratio:2 / 3; transform-origin:50% 36%; will-change:transform; }
.arcade-cabinet::before { content:''; position:absolute; left:10%; right:5%; bottom:5%; height:5%; background:#55443266; filter:blur(18px); border-radius:50%; }
.arcade-cabinet>img { position:absolute; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.arcade-screen { position:absolute; left:22.7%; top:23.1%; width:53.6%; height:25.4%; overflow:hidden; border-radius:12% / 9%; transform:skewX(-3deg); background:#171918; box-shadow:inset 0 0 14px #000; }
.arcade-screen video { width:100%; height:100%; object-fit:cover; opacity:.86; }
.arcade-screen::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,#0002 0px,#0002 1px,transparent 1px,transparent 3px); box-shadow:inset 0 0 18px 6px #000b; border-radius:inherit; }
.arcade-start { position:absolute; inset:0; width:100%; border:0; cursor:pointer; background:linear-gradient(transparent 45%,#0008); color:#fffce8; font:700 clamp(13px,2.3svh,24px)/1.2 monospace; letter-spacing:.07em; display:flex; align-items:flex-end; justify-content:center; padding:0 4% 9%; text-shadow:0 2px 4px #000; z-index:1; }
.arcade-start span { animation:arcade-pulse 2.4s ease-in-out infinite; }
.arcade-start:focus-visible { outline:3px solid #fff8a6; outline-offset:-8px; }
.arcade-controls { position:absolute; bottom:22px; left:28px; right:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; font:11px/1.5 monospace; letter-spacing:.08em; }
.arcade-controls button { padding:12px 0; border:0; background:none; color:inherit; cursor:pointer; font:inherit; }
.arcade-controls button:focus-visible { outline:2px solid #302923; outline-offset:5px; }
.arcade-sound { margin-left:auto; }
.arcade-intro.is-entering .arcade-controls { opacity:0; transition:opacity .15s; }
.arcade-intro.is-entering .arcade-start span { animation:none; }
.arcade-intro.is-entering .arcade-screen { filter:brightness(1.2); }
.arcade-replay { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
@keyframes arcade-pulse { 50% { opacity:.5; } }
@media(max-width:600px) { .arcade-cabinet { width:min(98vw,54svh); height:auto; } .arcade-controls { left:20px; right:20px; bottom:16px; flex-wrap:wrap; } .arcade-controls>span { flex-basis:100%; text-align:center; opacity:.65; } .arcade-sound { margin-left:0; } .arcade-start { font-size:clamp(12px,3.7vw,20px); } }