/* @cpi 2026-10-12 18:00: reservar siempre el hueco del display; los mirones no cambian la geometria de juego. */
/* @cpi 2026-10-11 23:20: acuerdos sin modal ni pausa; START sobre el monitor. */
.arcade-start{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#080817b8;color:#fff;text-align:center;font:700 20px system-ui;padding:12px}.arcade-start[hidden]{display:none}.arcade-start button{font:bold 24px system-ui;padding:12px 30px;color:#fff;background:#602b9c;border:2px solid #d2a4ff;border-radius:8px}.arcade-start small{font:13px system-ui}.arcade-start select{font:18px system-ui;padding:6px}.arcade-turns{position:absolute;right:8px;top:65px;z-index:30;color:#fff;font:14px system-ui;background:#171023ed;border:1px solid #a77ad0;border-radius:8px;max-width:min(320px,85vw)}.arcade-turns summary{padding:9px;cursor:pointer}.arcade-turns>div{padding:10px;max-height:45vh;overflow:auto}.arcade-turns p{margin:7px 0}.arcade-turns button,.arcade-turn-invite button{padding:8px;margin:3px;border-radius:5px}.arcade-turn-invite{position:absolute;top:20%;left:10%;right:10%;z-index:35;padding:16px;background:#241135f5;color:white;border:1px solid #d1a6ff;border-radius:8px;font:16px system-ui}

/* @cpi 2026-10-12 11:13: controles sociales en cabecera, lista extensible y mandos dentro del marco ampliado. */
.arcade-turns{position:fixed;left:10px;right:auto;top:8px;max-width:min(320px,calc(100vw - 20px));z-index:30;box-sizing:border-box}
.arcade-turns summary{height:40px;box-sizing:border-box;padding:10px 12px}
.arcade-turns>div{max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;padding:8px;box-sizing:border-box}
.arcade-turns .turn-person{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;margin:4px 0 0;padding:7px;text-align:left;background:#281c38;border:1px solid #714c91;border-radius:6px;color:#fff}
.turn-person img{width:38px;height:38px;object-fit:cover;border-radius:5px;flex:none}.turn-person span{min-width:0}.turn-person strong,.turn-person small{display:block;overflow-wrap:anywhere}.turn-person small{color:#dec8f1;margin-top:3px}
.turn-countdown{width:clamp(110px,22vw,180px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #cb93ff;background:repeating-radial-gradient(ellipse at 30% 20%,#b676ed22 0 2px,transparent 3px 7px),radial-gradient(circle at 30% 22%,#8141b9,#311044 65%,#140821);box-shadow:inset 0 0 22px #d89fff66,0 0 28px #a347d780;animation:turn-pulse 1s ease-out}
.turn-countdown small{letter-spacing:.12em;font:700 12px system-ui}.turn-countdown strong{font:800 clamp(48px,10vw,84px)/1.1 system-ui;color:#fff;text-shadow:0 2px 8px #c188ff}
@keyframes turn-pulse{from{transform:scale(.82);opacity:.45}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.turn-countdown{animation:none}}
.usu-puzzle-case>.machine-display,.asteroids-machine>.machine-display{position:absolute;left:0;top:100%;width:100%;margin:0;border-radius:0 0 8px 8px;z-index:20}
dialog[data-screen-zoom].expanded .machine-display{position:absolute;top:100%;left:0}
dialog[data-screen-zoom].expanded .usu-puzzle-deck,dialog[data-screen-zoom].expanded .controls,dialog[data-screen-zoom].expanded .asteroids-controls{border:6px solid #7540a7!important;border-top:0!important;border-left-color:#9256c5!important;border-bottom-color:#482567!important;border-radius:0 0 4px 4px!important}
.result-actions{display:flex;width:100%;gap:8px;margin-top:8px}.result-actions button{flex:1;min-width:0;font:26px system-ui!important;padding:10px!important}.result-actions button[hidden]{display:none!important}
.machine-display .machine-message-toggle{font:22px system-ui!important;width:40px!important;height:36px!important;padding:0!important}

/* @cpi 2026-10-12 11:16: el display queda fuera del recorte del mueble y accesible tambien en vertical. */
dialog.artwork-game .usu-puzzle-case,.asteroids-cabinet .asteroids-machine{overflow:visible}
dialog.artwork-game,.asteroids-cabinet{overflow-y:auto}
@media(min-width:601px){dialog.artwork-game:not(.expanded) .usu-puzzle-case{width:min(98vw,calc((100dvh - 124px)*var(--case-ratio)))}}

/* @cpi 2026-10-12 11:27: marco continuo de aluminio violeta; monitor y tablero comparten ancho sin limites heredados. */
.account>.coin,.account>#balance{display:none!important}
dialog[data-screen-zoom].expanded .usu-puzzle-case,dialog[data-screen-zoom].expanded .asteroids-machine{border:6px solid #73489a!important;border-top-color:#bb91d9!important;border-left-color:#9866be!important;border-bottom-color:#362242!important;border-radius:14px!important;box-sizing:border-box!important;background:#100c18!important;box-shadow:0 0 0 1px #110d1a,0 16px 42px #0009,inset 0 1px #ead5ff55!important}
dialog[data-screen-zoom].expanded .usu-puzzle-bezel,dialog[data-screen-zoom].expanded .asteroids-screen{max-width:none!important;min-width:0!important;width:100%!important;margin:0!important;border:0!important;border-radius:7px 7px 0 0!important;box-shadow:none!important;overflow:hidden}
dialog[data-screen-zoom].expanded .usu-puzzle-deck,dialog[data-screen-zoom].expanded .controls,dialog[data-screen-zoom].expanded .asteroids-controls{border:0!important;border-top:2px solid #795099!important;border-radius:0 0 7px 7px!important;background:radial-gradient(ellipse at 50% 0,#9654b72b,transparent 65%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(110deg,#171321,#32233e 48%,#181320)!important;box-shadow:inset 0 2px 0 #ce98f82b,inset 0 -5px 12px #0006}
dialog[data-screen-zoom].expanded .machine-display{border:0;border-top:1px solid #795099;border-radius:0 0 6px 6px}
.artwork-game .result,.asteroids-cabinet .result,#play.artwork-game #game-result{padding:22px!important;border:1px solid #b68ad1!important;border-radius:18px!important;background:radial-gradient(ellipse at top,#573267ee,#17101ff5 70%)!important;box-shadow:0 18px 45px #000b,inset 0 1px #ead1ff44;color:#fff!important;gap:12px!important}
.result-actions{gap:12px}.result-actions button,.artwork-game .result .result-actions button,.asteroids-cabinet .result .result-actions button,#play #game-result .result-actions button{display:flex;align-items:center;justify-content:center;min-height:66px;border-radius:12px!important;border:1px solid #e4c785!important;background:linear-gradient(#ffe59b,#c89232)!important;color:#342007!important;box-shadow:inset 0 2px #fff7d9,0 4px 0 #79501e,0 6px 12px #0006;cursor:pointer}
.result-actions button.return,.artwork-game .result .result-actions button.return,.asteroids-cabinet .result .result-actions button.return,#play #game-result .result-actions button.return{background:linear-gradient(#614676,#33243f)!important;border-color:#a887bc!important;color:#f0ddff!important;box-shadow:inset 0 2px #bc91d044,0 4px 0 #21172a,0 6px 12px #0006}
.result-actions button:hover{filter:brightness(1.13)}.result-actions button:active{transform:translateY(3px);box-shadow:none}.result-actions svg{width:38px;height:38px;display:block;pointer-events:none}

/* @cpi 2026-10-12 11:29: resultado compacto centrado, sin el alto vacio heredado del monitor. */
.artwork-game .result,.asteroids-cabinet .result,#play.artwork-game #game-result{inset:auto!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(84%,420px);max-height:calc(100% - 24px);box-sizing:border-box;overflow:auto}
.result>strong,#game-result>h2{font:800 clamp(18px,4vw,26px)/1.2 system-ui!important;letter-spacing:.08em;margin:0;text-shadow:0 2px 8px #c77bff44}

/* @cpi 2026-10-12 11:30: ampliado horizontal calculado desde la altura util, manteniendo la proporcion nativa. */
@media(orientation:landscape){
 dialog[data-screen-zoom].expanded[open]{padding:52px 0 0!important;--zoom-deck:clamp(76px,15dvh,115px);--zoom-display:49px}
 dialog[data-screen-zoom].expanded.spectator-cabinet{--zoom-deck:0px}
 dialog[data-screen-zoom].expanded .usu-puzzle-case,dialog[data-screen-zoom].expanded .asteroids-machine{width:min(100vw,calc((100dvh - 52px - 12px - var(--zoom-deck) - var(--zoom-display))*var(--screen-ratio) + 12px))!important;min-width:0!important}
 dialog[data-screen-zoom].expanded .usu-puzzle-deck,dialog[data-screen-zoom].expanded .controls,dialog[data-screen-zoom].expanded .asteroids-controls{height:var(--zoom-deck)!important;min-height:var(--zoom-deck)!important;padding:4px 12px!important}
}
@media(orientation:landscape) and (max-height:500px){
 dialog[data-screen-zoom].expanded .joystick,dialog[data-screen-zoom].expanded .shoot{height:66px!important;min-height:66px!important;transform:scale(.82);transform-origin:center}
 dialog[data-screen-zoom].expanded .asteroids-stick,dialog[data-screen-zoom].expanded .asteroids-fire{transform:scale(.82);transform-origin:center}
}

/* @cpi 2026-10-12 11:53: secciones de participantes e invitados, tambien invitacion recibida fuera de una maquina. */
.arcade-turns h3{font:700 12px system-ui;letter-spacing:.04em;color:#d8a9ff;margin:14px 0 8px}.arcade-turns h3:first-child{margin-top:0}.arcade-turns .turn-rest{margin:6px;max-width:calc(100% - 12px)}
body>.arcade-turn-invite{position:fixed;top:22%;left:50%;right:auto;transform:translateX(-50%);width:min(380px,calc(100vw - 32px));box-sizing:border-box;z-index:20000;box-shadow:0 15px 50px #000a}

.arcade-turns:has(.turn-rest)>div{max-height:calc(100dvh - 114px)}

/* @cpi 2026-10-12 12:03: invitacion ilustrada legible tanto en el salon como mirando otra maquina. */
.arcade-turn-invite{box-sizing:border-box;max-height:calc(100dvh - 32px);overflow-y:auto;border-radius:16px;background:radial-gradient(ellipse at top,#503063,#1c1129 75%);box-shadow:0 18px 50px #0009}
body>.arcade-turn-invite{top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 24px))}
.arcade-turn-invite h2{font:700 20px system-ui;margin:0 0 8px;color:#f4dcff}.arcade-turn-invite>p{margin:0 0 12px;color:#e9d7f5}.turn-invite-body{display:flex;align-items:center;gap:16px;margin-bottom:12px}.turn-invite-body img{width:112px;max-height:230px;object-fit:contain;flex:none;filter:drop-shadow(0 5px 10px #0008)}.turn-invite-body p{font:14px/1.5 system-ui;margin:0;color:#eee7f5}
@media(max-width:400px){.turn-invite-body{gap:10px}.turn-invite-body img{width:88px}.turn-invite-body p{font-size:13px}}

/* @cpi 2026-10-12 12:30: placa de récords violeta y latón; lateral si cabe, flotante si no. */
.arcade-ranking{position:fixed;z-index:16000;box-sizing:border-box;width:304px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 84px);padding:22px 16px 16px;border:2px solid #ae80cf;border-radius:16px;background:radial-gradient(ellipse at top,#48305c,#181022 75%);box-shadow:inset 0 0 0 3px #21122e,0 16px 60px #000b;color:#f5eafa;text-align:left;font:14px/1.4 system-ui;left:50%;top:50%;transform:translate(-50%,-50%)}
.arcade-ranking[hidden]{display:none!important}.arcade-ranking.ranking-side{transform:none;max-height:calc(100dvh - 110px)}
.arcade-ranking>small{color:#eac778;letter-spacing:.19em;font-size:11px;font-weight:800}.arcade-ranking h2{font:800 23px/1.2 system-ui;margin:5px 25px 8px 0;color:#fff}.arcade-ranking .ranking-detail{font-size:12px;color:#baa6c7;margin:0 0 16px}.ranking-content{overflow:auto;max-height:calc(100dvh - 245px)}.arcade-ranking table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}.arcade-ranking th{color:#bba5cf;font-size:10px;text-transform:uppercase;padding:7px 4px;border-bottom:1px solid #846397}.arcade-ranking td{padding:11px 4px;border-bottom:1px solid #ffffff12}.arcade-ranking th:nth-child(3),.arcade-ranking td:nth-child(3){text-align:right;color:#f7d891;white-space:nowrap}.arcade-ranking td:nth-child(2){overflow-wrap:anywhere;max-width:100px;font-weight:700}.arcade-ranking td:last-child{color:#bcaaca;font-size:10px;white-space:nowrap}.arcade-ranking tr:first-child td:first-child{color:#ffdb83}.arcade-ranking .ranking-close{position:absolute;right:8px;top:8px;background:transparent;border:0;color:#dfc7f1;font:26px system-ui;cursor:pointer;width:36px;height:36px}.arcade-start .ranking-open{font:700 13px system-ui;padding:10px 18px;border:1px solid #a885c6;border-radius:10px;background:#30203f;color:#ecd8ff;cursor:pointer}.arcade-start .ranking-open[hidden]{display:none}

/* @cpi 2026-10-12 12:50: cierre manual visible y táctil, con relieve acorde a la placa del ranking. */
.arcade-ranking .ranking-close{display:grid;place-items:center;right:10px;top:10px;width:40px;height:40px;padding:0;border:1px solid #ba8cd4;border-radius:11px;background:linear-gradient(145deg,#604174,#2b1b3d);color:#fff0ff;box-shadow:inset 0 1px 0 #ffffff30,0 3px 8px #0005;line-height:1;transition:background .15s,box-shadow .15s}
.arcade-ranking .ranking-close:hover{background:linear-gradient(145deg,#805592,#43285c);box-shadow:0 0 12px #ba80dc55}.arcade-ranking .ranking-close:focus-visible{outline:2px solid #f5d58c;outline-offset:3px}.arcade-ranking .ranking-close:active{transform:translateY(1px)}

/* @cpi 2026-10-12 12:43: acceso previo independiente del monedero, visible también en móvil. */
#preview>.ranking-open{position:fixed;left:16px;top:16px;z-index:15000;font:700 13px system-ui;padding:12px 16px;border:1px solid #a885c6;border-radius:10px;background:linear-gradient(145deg,#513467,#251932);color:#ecd8ff;box-shadow:0 4px 14px #0007;cursor:pointer}#preview>.ranking-open[hidden]{display:none}


/* @cpi 2026-10-13 17:15: final comun: solo moneda, conservando callbacks y permiso del anfitrion. */
dialog .result.coin-only,dialog #game-result.coin-only{inset:auto!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:max-content!important;max-width:95%;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible}
dialog .coin-only>strong,dialog .coin-only>h2,dialog .coin-only>p,dialog .coin-only .return{display:none!important}
dialog .coin-only .result-actions{margin:0;gap:0;width:auto}
dialog .coin-only .result-actions button:not(.return){min-height:0;padding:10px 18px!important;font:700 14px system-ui!important;white-space:nowrap;border-radius:8px!important;background:#123c61!important;color:#fff!important;border:2px solid #8de4ff!important;box-shadow:none}

/* @cpi 2026-10-14 13:25: actividad horizontal sin inventar un porcentaje de carga de la ROM. */
.arcade-loading{width:min(260px,85%);display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff;font:600 clamp(14px,2.5vw,20px) system-ui;text-align:center}
.arcade-loading-track{width:100%;height:5px;overflow:hidden;border-radius:4px;background:#ffffff24}
.arcade-loading-track::after{content:'';display:block;width:40%;height:100%;border-radius:inherit;background:#d2a5ff;animation:arcade-loading-slide 1.4s ease-in-out infinite}
@keyframes arcade-loading-slide{from{transform:translateX(-110%)}to{transform:translateX(360%)}}
@media(prefers-reduced-motion:reduce){.arcade-loading-track::after{animation:none;width:100%;opacity:.65}}