:root{--izq:#c8102e;--der:#1f3a68;--oro:#f2c230;--fondo:#16161a;--txt:#f4f1ea;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--fondo);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
.oculto{display:none!important}
.pantalla{position:fixed;inset:0;display:flex;flex-direction:column}
#lobby{align-items:center;justify-content:center;padding:16px;gap:12px;overflow:auto;
  background:linear-gradient(135deg,var(--izq) 0 50%,var(--der) 50% 100%)}
#lobby h1{font-size:44px;line-height:.9;text-align:center;margin:0;letter-spacing:2px;text-shadow:3px 3px 0 #000}
.sub{margin:0;opacity:.9;text-align:center}
.tarjeta{background:rgba(0,0,0,.65);border-radius:14px;padding:16px;width:min(380px,100%);display:flex;flex-direction:column;gap:8px}
.tarjeta h2{margin:0 0 4px;text-align:center}
label{font-size:13px;opacity:.8}
input,textarea,select{font:inherit;padding:10px;border-radius:8px;border:none;background:#fff;color:#111;width:100%}
button{font:inherit;font-weight:700;padding:12px;border:none;border-radius:10px;background:var(--oro);color:#111;cursor:pointer}
button.sec{background:#3a3a44;color:var(--txt)}
button:disabled{opacity:.5}
.o{text-align:center;opacity:.6;font-size:13px}
.bandos{display:flex;gap:8px}
.bando{flex:1;color:#fff;font-size:18px;line-height:1.3;padding:16px 6px}
.bando small{display:block;font-weight:400;font-size:12px;opacity:.8}
.bando.izq{background:var(--izq)} .bando.der{background:var(--der)}
.error{color:#ffd2d2;min-height:1.2em;text-align:center;font-weight:700}
#hud{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;background:#000;font-size:14px}
#hud-tema{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .izq{color:#ff6b7f}#hud .der{color:#8fb3ff}
#phaser{flex:1;min-height:0;min-width:0;position:relative;overflow:hidden}
#acciones{display:flex;gap:8px;padding:8px;background:#000}
#acciones button{flex:1}#acciones #btn-compartir,#acciones #btn-voz{flex:0 0 56px}
#acciones button.activo{outline:3px solid #fff}
#aviso{position:fixed;top:44px;left:50%;transform:translateX(-50%);background:var(--oro);color:#111;font-weight:800;
  padding:8px 14px;border-radius:999px;max-width:92vw;text-align:center;z-index:5}
#rotar{display:none;position:fixed;bottom:70px;left:0;right:0;text-align:center;font-size:13px;opacity:.7}
@media (orientation:portrait){#rotar{display:block}}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal-caja{background:#23232b;border-radius:14px;padding:16px;width:min(420px,100%);display:flex;flex-direction:column;gap:10px}
.modal-caja h3{margin:0}
.modal-botones{display:flex;gap:8px}.modal-botones button{flex:1}
.municiones{display:flex;flex-wrap:wrap;gap:6px}
.municiones button{font-size:24px;padding:8px 10px;background:#3a3a44}
.municiones button.sel{background:var(--oro)}
.cita{background:#000;padding:10px;border-radius:8px;font-style:italic}
.meta{font-size:12px;opacity:.7}

input.nombre{width:min(420px,100%);text-align:center}
.opciones{display:flex;gap:10px;width:min(820px,100%);flex-wrap:wrap}
.opcion{position:relative;flex:1 1 260px;min-height:220px;padding:0;overflow:hidden;color:#fff;text-align:left;border-radius:16px;border:3px solid #fff}
.opcion.izq{background:linear-gradient(160deg,#ff6a3d,#c8102e)}.opcion.der{background:linear-gradient(160deg,#6aa0d8,#1f3a68)}
.opcion img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.opcion img.ok{opacity:1}
.opcion .velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.1) 60%)}
.opcion .txt{position:absolute;left:14px;right:14px;bottom:26px;display:flex;flex-direction:column;gap:4px}
.opcion b{font-size:22px;text-shadow:2px 2px 0 #000}.opcion small{font-weight:400;font-size:13px}
.opcion .credito{position:absolute;right:8px;bottom:6px;left:8px;font-size:9px;font-weight:400;color:#fffc;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opcion:active{transform:scale(.98)}

#fallo{position:fixed;left:8px;right:8px;bottom:8px;background:#b00020;color:#fff;padding:10px;border-radius:8px;font:13px monospace;z-index:99}

/* ===== Estilo pixel art ===== */
#lobby h1,#hud,button,.bando,.opcion b,#aviso,.modal-caja h3,label{font-family:"Press Start 2P",monospace;letter-spacing:0}
#lobby h1{font-size:30px;line-height:1.25;text-shadow:4px 4px 0 #000}
#lobby{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 4px,transparent 4px 8px),
  linear-gradient(90deg,var(--izq) 0 50%,var(--der) 50% 100%)}
button{border-radius:0;box-shadow:4px 4px 0 #000;border:3px solid #000;font-size:11px}
button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
.opcion{border-radius:0;border:4px solid #000;box-shadow:6px 6px 0 #000}
.opcion b{font-size:14px;line-height:1.5}
.opcion .foto-pixel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.tarjeta,.modal-caja,input,textarea,select{border-radius:0}
input,textarea,select{border:3px solid #000}
.modal-caja{border:4px solid #000;box-shadow:6px 6px 0 #000}
.modal-caja h3{font-size:12px;line-height:1.5}
#hud{font-size:10px}
#aviso{border-radius:0;border:3px solid #000;font-size:10px;line-height:1.5}
.municiones button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:28px;flex:1 1 30%}
.municiones button small{font-size:7px;line-height:1.4}
canvas{image-rendering:pixelated}
/* Panel de control integrado en la estética de píxeles del juego. */
:root{--surface:#23232b;--muted:#bcbcc8;--danger:#a70d29;--scroll-thumb:#707080;--scroll-track:#23232b}
*{scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--scroll-track)}::-webkit-scrollbar-thumb{background:var(--scroll-thumb)}::-webkit-scrollbar-thumb:hover{background:var(--muted)}
button:hover:not(:disabled){filter:brightness(1.12)}button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}textarea{resize:none}
.admin-access{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:8;font-size:8px;padding:8px;min-height:44px}
body:has(#juego:not(.oculto)) .admin-access{display:none}
#hud{flex-shrink:0;min-width:0;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-top:max(6px,env(safe-area-inset-top))}
#hud-tema{min-width:0}#hud-marcador,#hud-municion,#hud-estado{flex-shrink:0}
#acciones{flex-shrink:0;flex-wrap:nowrap;gap:4px;padding:4px max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
#acciones button{min-width:0;min-height:44px;padding:8px 4px;font-size:9px;line-height:1.5}
#acciones #btn-compartir,#acciones #btn-voz{flex:0 0 44px}
#acciones #btn-admin-game{flex:0 0 62px;font-size:8px}
#rotar{bottom:64px;pointer-events:none}
.modal-caja{max-height:calc(100dvh - 32px);overflow:auto}
@media(orientation:landscape) and (max-height:500px){
  #hud{gap:6px;padding-bottom:4px;padding-top:max(4px,env(safe-area-inset-top));font-size:9px}
  #hud-estado{font-size:8px}
  #acciones{padding-top:2px;padding-bottom:max(2px,env(safe-area-inset-bottom))}
  #modal{padding:8px}.modal-caja{max-height:calc(100dvh - 16px);padding:12px}
  #admin{max-height:calc(100dvh - 16px);padding:14px}
}
@media(max-width:480px) and (orientation:portrait){
  #hud{flex-wrap:wrap;gap:5px 8px}
  #hud-tema{flex-basis:calc(100% - 100px)}
  #acciones #btn-construir{font-size:8px}
}
#admin{color:var(--txt);background:var(--surface);border:4px solid #000;box-shadow:6px 6px 0 #000;width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:22px;overflow:auto;scrollbar-gutter:stable}
#admin::backdrop{background:rgba(0,0,0,.75)}
.admin-heading,.admin-actions,.admin-password-row{display:flex;align-items:center;gap:10px}
.admin-heading{justify-content:space-between;align-items:flex-start}.admin-heading h2{margin:4px 0;font-size:24px}.admin-eyebrow{font:11px ui-monospace,monospace;color:var(--oro);margin:0}
#admin p{line-height:1.5}#admin-login,#admin-budget-form,#admin-build-form{display:flex;flex-direction:column;gap:12px}#admin label{font-family:system-ui,sans-serif;font-size:14px;opacity:1}
.admin-password-row input{min-width:0;flex:1}.admin-password-row button{max-width:55%}
.admin-board{margin:20px 0;padding:16px;background:var(--fondo);border-left:4px solid var(--oro)}.admin-board span{font:11px ui-monospace,monospace;color:var(--muted)}.admin-board h3{margin:8px 0}.admin-board p{margin:6px 0}
.admin-actions{align-items:stretch;flex-wrap:wrap}.admin-actions button{flex:1;min-height:44px}
#admin-confirm{border:1px solid var(--muted);padding:12px;margin:16px 0}button.danger{background:var(--danger);color:var(--txt)}
.admin-player-section{border-top:1px solid var(--muted);margin-top:24px;padding-top:8px}.admin-player-section select{margin-top:8px}#admin-player-balance{min-height:24px;color:var(--oro)}#admin-build-form{border-top:1px solid var(--muted);margin-top:18px;padding-top:18px}
#admin-controls footer{margin-top:24px;padding-top:16px;border-top:1px solid var(--muted)}#admin-error{text-align:left;min-height:24px;margin-bottom:0}#admin-feedback{min-height:24px;margin:4px 0 0;color:var(--oro)}#hud-estado{font-size:9px;color:var(--oro)}
@media(max-width:480px){#admin{padding:16px}.admin-heading h2{font-size:20px}.admin-password-row{flex-wrap:wrap}.admin-password-row button{max-width:none;flex:1}.admin-password-row input{flex-basis:100%}#lobby{padding-top:60px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media(forced-colors:active){*{scrollbar-color:auto}}

#acciones #btn-disparar{font-size:9px;line-height:1.5;min-width:0;white-space:normal}

/* ===== Explicación de la vivienda en las franjas negras (modo vertical) ===== */
#explicacion{display:none;position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
#phaser canvas{position:relative;z-index:1}
@media (orientation:portrait){#explicacion{display:block}}
#explicacion .cinta{display:flex;flex-direction:column;gap:18px;padding:0 14px;animation:bajar 70s linear infinite}
@keyframes bajar{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){#explicacion .cinta{animation-duration:400s}}
.tarjeta-viv{background:rgba(35,35,43,.45);border:3px solid rgba(0,0,0,.5);box-shadow:4px 4px 0 rgba(0,0,0,.35);padding:10px;color:#f4f1ea;opacity:.6}
.tarjeta-viv h4{margin:0 0 6px;font:9px/1.6 "Press Start 2P",monospace;color:#f2c230}
.tarjeta-viv p{margin:0 0 6px;font-size:12px;line-height:1.4}
.tarjeta-viv b.d{color:#ff6b7f}.tarjeta-viv b.o{color:#8fb3ff}
.graf{margin:0}.graf svg{width:100%;max-width:320px;display:block;margin:0 auto;font-family:"Press Start 2P",monospace;image-rendering:pixelated}
.graf figcaption{font-size:10px;text-align:center;opacity:.75;margin-top:2px}

#lobby-voz{max-width:min(420px,100%);text-align:center;font-size:13px;line-height:1.4;background:rgba(0,0,0,.6);padding:8px 10px;border:2px solid #000;min-height:1em}
#lobby-voz:empty{display:none}