/* @cpi 2026-10-11 01:00: arte de distribucion optimizado; originales de diseno conservados. */
/* @cpi 2026-10-10 18:05: arte del salón reutilizado en juego; controles alineados con el tablero. */
dialog.asteroids-cabinet{padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:transparent;color:#f8e6bb;overflow:hidden;box-shadow:none}
.asteroids-cabinet::backdrop{background:#030811c9}.asteroids-cabinet header{position:fixed;right:12px;top:10px;z-index:5;display:flex;gap:8px;align-items:center}.asteroids-cabinet header span{font:11px monospace;letter-spacing:2px;background:#101c28de;padding:10px}.asteroids-cabinet header button{width:42px;height:42px;padding:0;background:#101c28e8;border:1px solid #dfc08d77;border-radius:8px;font-size:23px;color:#edce93}
.asteroids-machine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(97vw,calc(88dvh * 1.2346));aspect-ratio:1.2346;background:image-set(url('assets/optimized/cabinets/asteroids-play.webp') 1x,url('assets/optimized/cabinets/asteroids-play@2x.webp') 2x) top center /100% 185.185% no-repeat;filter:drop-shadow(0 14px 20px #000a)}
.asteroids-screen{position:absolute;left:25.2%;top:34.63%;width:49.6%;height:43.06%;background:#000;overflow:hidden;border-radius:6px;display:grid;place-items:center}.asteroids-screen canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;touch-action:none}
.asteroids-controls{position:absolute;left:22%;top:81%;width:56%;height:17%;display:flex;align-items:center;justify-content:space-between;gap:8px}.asteroids-stick{position:relative;width:95px;height:85px;touch-action:none;cursor:grab}.asteroids-stick i{position:absolute;left:24px;top:0;width:47px;height:47px;border-radius:50%;background:radial-gradient(circle at 30% 23%,#fff1bd,#ef4b42 18%,#bb142c 51%,#490419 84%);box-shadow:0 16px 0 -11px #c6cbd0,0 29px 0 -3px #0b0e14;transform:translate(var(--x,0px),var(--y,0px))}.asteroids-controls b{position:absolute;bottom:0;left:0;width:100%;text-align:center;font:bold 8px Arial;color:#fff0c5;text-shadow:0 1px 3px #000}.asteroids-fire{width:93px;height:80px;position:relative;padding:0;border:0;background:none;touch-action:none}.asteroids-fire i{position:absolute;top:8px;left:15px;width:63px;height:40px;border-radius:50%;background:radial-gradient(ellipse at 32% 22%,#ffffdc,#f0cf78 38%,#b58a37 76%);box-shadow:0 5px #6e511f,0 8px 0 4px #11151b}.asteroids-fire.pressed i{transform:translateY(4px);box-shadow:0 1px #6e511f,0 4px 0 4px #11151b}.asteroids-hyper{padding:9px 5px;font:bold 8px Arial;background:linear-gradient(#e0cca4,#9a835f);color:#1b2024;border:2px solid #4d422e;border-radius:8px;box-shadow:0 3px #191e23;touch-action:manipulation}.asteroids-hyper:active{transform:translateY(2px)}.asteroids-help{position:absolute;bottom:3px;left:0;width:100%;text-align:center;font:11px Arial;color:#dbddcf}.asteroids-cabinet .result{position:absolute;inset:8%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#061013ee;color:#f8e6bb;padding:12px;text-align:center;z-index:2}.asteroids-cabinet .result[hidden]{display:none}.asteroids-cabinet .result p{margin:4px}.asteroids-cabinet .result button{padding:10px;background:#ceac61;border:1px solid #edd4a6;color:#171b1f;font-weight:bold;font-size:11px}.asteroids-cabinet .result .return{background:#20312f;color:#e7dcbb}
@media(max-width:600px){.asteroids-cabinet header span,.asteroids-help{display:none}.asteroids-machine{top:48%;width:100vw}.asteroids-controls{left:13%;width:74%;top:82%;height:20%;background:#111d29c9;border-radius:8px}.asteroids-stick{height:70px}.asteroids-stick i{width:35px;height:35px;left:29px}.asteroids-fire{height:68px}.asteroids-fire i{width:50px;height:32px;left:20px}.asteroids-controls b{font-size:7px}.asteroids-cabinet .result{inset:0;font-size:11px;gap:5px}.asteroids-cabinet .result button{padding:7px;font-size:9px}.asteroids-cabinet.expanded .asteroids-machine{background:none;top:50%;aspect-ratio:auto;height:auto;transform:translate(-50%,-50%)}.asteroids-cabinet.expanded .asteroids-screen{position:relative;left:0;top:0;width:100%;height:auto;aspect-ratio:4/3;border-radius:0}.asteroids-cabinet.expanded .asteroids-controls{position:relative;top:0;left:0;width:100%;height:125px;border-radius:0;padding:12px 28px;background:#15222e}.asteroids-cabinet.expanded .asteroids-stick,.asteroids-cabinet.expanded .asteroids-fire{height:85px}.asteroids-cabinet.expanded .asteroids-stick i{width:47px;height:47px;left:24px}.asteroids-cabinet.expanded .asteroids-fire i{width:63px;height:40px;left:15px}}

/* @cpi 2026-10-10 18:15: variante sin mandos pintados; los interactivos conservan el arte del tablero. */
.asteroids-controls{left:20%;width:60%;top:81.5%;height:16%;padding:0 1%;border:0;background:none;box-shadow:none}
@media(max-width:600px){.asteroids-controls{left:13%;width:74%;height:22%;top:80%;background:#101b2cdd}.asteroids-cabinet.expanded .asteroids-controls{left:0;top:0;width:100%;height:125px;padding:12px 28px;background:#15222e}}

/* @cpi 2026-10-10 19:25: evita recomponer una sombra sobre el canvas en cada fotograma; la sombra pertenece sólo al arte estático. */
.asteroids-machine{filter:none;background:none}
.asteroids-machine:before{content:"";position:absolute;inset:0;pointer-events:none;background:url("assets/optimized/cabinets/asteroids-play.webp") top center /100% 185.185% no-repeat;filter:drop-shadow(0 14px 20px #000a)}
.asteroids-cabinet::backdrop{backdrop-filter:none}
body:has(dialog.asteroids-cabinet[open]) #room *{animation-play-state:paused!important}
@media(max-width:600px){.asteroids-cabinet.expanded .asteroids-machine:before{display:none}}