:root {
  --bg: #0b0b0f;
  --panel: #16161d;
  --line: #2a2a35;
  --text: #e8e6df;
  --muted: #8a8899;
  --accent: #f4d03f;
  --danger: #ec7063;
  --font: 'Press Start 2P', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 12px; overflow: hidden; }
body { background-image: radial-gradient(circle at 50% 0%, #1b1b26 0%, var(--bg) 70%); }
button, input { font-family: inherit; }

.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: flex; }
#menu, #lobby, #create, #pwScreen { align-items: flex-start; justify-content: center; overflow-y: auto; padding: 12px 0; }
#menu > .panel, #lobby > .panel, #create > .panel, #pwScreen > .panel { margin: auto; }
#pwScreen .panel { width: min(360px, 94vw); }
#pwInput { font-size: 18px; padding: 14px; }
.pw-err { margin: 0; text-align: center; color: var(--danger); font-size: 9px; }
.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

.panel { width: min(460px, 94vw); background: var(--panel); border: 3px solid var(--line); padding: 28px; box-shadow: 0 0 0 3px #000, 0 20px 60px #0008; display: flex; flex-direction: column; gap: 14px; }
.logo { margin: 0; text-align: center; font-size: 34px; color: var(--accent); text-shadow: 4px 4px 0 #b9770e, 8px 8px 0 #000; letter-spacing: 2px; }
.subtitle { margin: 0 0 8px; text-align: center; color: var(--danger); font-size: 11px; letter-spacing: 3px; }
h2 { margin: 0; text-align: center; font-size: 16px; }
h3 { margin: 10px 0 0; font-size: 10px; color: var(--muted); }
h4 { margin: 14px 0 6px; font-size: 9px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 9px; color: var(--muted); }
input { background: #0d0d12; border: 2px solid var(--line); color: var(--text); padding: 12px; font-size: 13px; outline: none; }
input:focus { border-color: var(--accent); }
input.code { text-transform: uppercase; letter-spacing: 6px; text-align: center; flex: 1; min-width: 0; }

.btn { background: #24242f; color: var(--text); border: 2px solid #3a3a48; padding: 12px 14px; font-size: 11px; cursor: pointer; box-shadow: 0 4px 0 #000; transition: transform .05s; }
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.btn.primary { background: var(--accent); color: #1a1400; border-color: #fff3; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }
.btn.small { font-size: 8px; padding: 8px; }
.btn.tiny { font-size: 10px; padding: 3px 7px; box-shadow: none; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }

.room-list, .players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.room-list li { display: flex; justify-content: space-between; padding: 10px; border: 2px solid var(--line); cursor: pointer; font-size: 9px; }
.room-list li:hover { border-color: var(--accent); }
.room-list li > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.flag { width: 20px; height: 15px; object-fit: cover; box-shadow: 0 0 0 1px #0008; vertical-align: middle; flex: none; }
.flag-na { display: inline-flex; align-items: center; justify-content: center; background: #2a2a35; color: var(--muted); font-size: 6px; }
.room-list li.muted { cursor: default; border-style: dashed; }
.muted { color: var(--muted); font-size: 9px; text-align: center; line-height: 1.6; }
.help { color: var(--muted); font-size: 8px; line-height: 1.9; text-align: center; border-top: 2px solid var(--line); padding-top: 12px; }
.help b { color: var(--text); }
.big-code { color: var(--accent); letter-spacing: 6px; }

.players li { display: flex; align-items: center; gap: 10px; padding: 10px; background: #0d0d12; border: 2px solid var(--line); font-size: 10px; }
.players li .sw, #hudPlayers .sw { width: 14px; height: 14px; flex: none; box-shadow: inset 0 0 0 2px #0005; }
.players li .tag { margin-left: auto; color: var(--muted); font-size: 8px; }
.players li .x { margin-left: 6px; background: none; border: none; color: var(--danger); cursor: pointer; font-size: 12px; }

.conn { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 8px; color: var(--muted); }
.conn.ok { color: #58d68d; }
.conn.bad { color: var(--danger); }

/* ---- ping ---- */
.pg { font-weight: normal; font-size: 8px; margin-right: 6px; }
.pg-ok { color: #58d68d; } .pg-mid { color: #f4d03f; } .pg-bad { color: #ec7063; } .pg-na { color: var(--muted); }

/* ---- menú de pausa (Esc) ---- */
.esc { position: fixed; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; z-index: 5; }
.esc .panel { width: min(340px, 92vw); }
.esc.host .guest-only, .esc:not(.host) .host-only { display: none; }
.btn.danger { background: #3a1416; border-color: #ec706355; color: #ffb3ab; }
.btn.danger.confirm { background: var(--danger); color: #000; }

/* ---- configuración de sala ---- */
.cfg { display: flex; flex-direction: column; gap: 10px; font-size: 8px; }
.cfg-row { display: grid; grid-template-columns: 96px 1fr 92px; align-items: center; gap: 8px; color: var(--muted); }
.cfg-row b { color: var(--text); font-weight: normal; text-align: right; white-space: nowrap; }
.cfg-pw { grid-column: 2 / -1; padding: 8px; font-size: 12px; letter-spacing: 6px; text-transform: uppercase; }
.cfg-pw.bad { border-color: var(--danger); }
.cfg input[type=range] { width: 100%; accent-color: var(--accent); padding: 0; border: 0; background: none; margin: 0; height: 16px; }
.cfg input:disabled { opacity: .6; }
.cfg select { grid-column: 2 / -1; background: #0d0d12; border: 2px solid var(--line); color: var(--text); font: inherit; font-size: 8px; padding: 7px; }
.cfg select:disabled { opacity: .6; }
.cfg-rounds { grid-column: 2 / -1; display: flex; gap: 14px; align-items: center; }
.rnd { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; font-size: 10px; }
.rnd.on { color: var(--text); }
.cfg .rnd input[type=checkbox] { width: 16px; height: 16px; }
.cfg .rnd input[type=checkbox]::after { display: none; }
.cfg .rnd input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px #3d3410; }
/* interruptor (switch) */
.cfg-switch b { grid-column: 3; text-align: left; white-space: normal; }
.cfg input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 34px; height: 18px; background: #2a2a35; border: 2px solid var(--line); position: relative; cursor: pointer; margin: 0; padding: 0; }
.cfg input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--muted); transition: left .15s; }
.cfg input[type=checkbox]:checked { background: #3d3410; border-color: var(--accent); }
.cfg input[type=checkbox]:checked::after { left: 18px; background: var(--accent); }
.cfg input[type=checkbox]:disabled { cursor: default; }
.cfg-pu-row { align-items: start; }
.cfg-pu { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pu { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: #0d0d12; border: 2px solid var(--line); color: var(--muted); font: inherit; font-size: 7px; cursor: pointer; text-align: left; opacity: .5; }
.pu.on { opacity: 1; color: var(--text); border-color: #3a3a48; }
.pu:disabled { cursor: default; }
.pu i { width: 12px; height: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #000; font-style: normal; font-size: 7px; }
@media (max-width: 520px) { .cfg-row { grid-template-columns: 80px 1fr; } .cfg-row b { grid-column: 2; text-align: left; } }

/* ---- juego ---- */
#game { flex-direction: column; }
#stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
#board { position: relative; line-height: 0; }
#view { cursor: none; image-rendering: pixelated; background: #000; box-shadow: 0 0 0 3px #2a2a35, 0 0 40px #000; display: block; }

/* HUD sobre el mapa: chico, translúcido y sin bloquear clics */
.hud { position: absolute; pointer-events: none; font-size: 7px; line-height: 1.6; color: #e8e6dfdd; transition: opacity .2s; }
.hud.dim { opacity: .2; }
#hudTop { top: 4px; left: 4px; right: 4px; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
#hudPlayers { display: flex; flex-wrap: wrap; gap: 3px; }
.pl { display: inline-flex; align-items: center; gap: 4px; background: #000a; padding: 2px 5px; white-space: nowrap; }
.pl i { width: 6px; height: 6px; display: inline-block; }
.pl .lv { color: #ec7063; letter-spacing: 1px; }
.pl .lv s { text-decoration: none; opacity: .25; }
.pl.me { box-shadow: inset 0 0 0 1px #f4d03f88; }
.pl.out { opacity: .35; }
.pl.dead { opacity: .6; }
#zoneTimer { background: #000a; padding: 2px 6px; color: var(--muted); white-space: nowrap; }
#zoneTimer:empty { display: none; }
#zoneTimer.warn { color: #ff4d5a; }

#hudMe { left: 4px; bottom: 4px; background: #000a; padding: 5px 6px; display: grid; grid-template-columns: auto 64px; gap: 3px 6px; align-items: center; }
#hudMe:empty { display: none; }
#hudMe .bar { height: 4px; background: #ffffff1a; display: block; }
#hudMe .bar b { display: block; height: 100%; background: #58d68d; }
#hudMe .bar.dash b { background: #4cc9f0; }
#hudMe .bar.dash.ready b { box-shadow: 0 0 4px #4cc9f0; }
#hudMe .ups { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, auto); gap: 1px 5px; margin-top: 2px; }
#hudMe .ups span { color: var(--muted); }
#hudMe .ups em { font-style: normal; display: flex; gap: 1px; }
#hudMe .ups em i { width: 5px; height: 3px; background: #ffffff22; display: block; }
#hudMe .ups em i.on { background: var(--accent); }

#hudInfo { right: 4px; bottom: 4px; background: #000a; padding: 2px 5px; color: var(--muted); }
#hudInfo button.muted { color: var(--danger); }
#hudInfo button { pointer-events: auto; background: none; border: 0; color: var(--text); font: inherit; font-size: 9px; cursor: pointer; padding: 0 0 0 4px; }

#legend { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; text-align: left; }
#legend li { display: flex; align-items: center; gap: 6px; }
#legend .ic { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; color: #000; font-size: 7px; flex: none; }

#feed { position: absolute; top: 24px; right: 6px; line-height: 1.4; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; font-size: 8px; }
#feed div { background: #000a; padding: 4px 8px; animation: fade 4s forwards; }
@keyframes fade { 0%, 75% { opacity: 1 } 100% { opacity: 0 } }
#zoneTimer { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 8px; color: var(--muted); background: #000a; padding: 4px 8px; pointer-events: none; }
#zoneTimer:empty { display: none; }
#zoneTimer.warn { color: #ff4d5a; }
.overlay-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: 40px; color: var(--accent); text-shadow: 4px 4px 0 #000; text-align: center; line-height: 1.5; }
.overlay-text small { display: block; font-size: 11px; color: var(--text); }
.end { position: absolute; inset: 0; background: #000c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.end h2 { font-size: 22px; color: var(--accent); text-shadow: 3px 3px 0 #000; }
.end { line-height: 1.5; }
.end .round-tag { margin: 0 0 -8px; font-size: 9px; color: var(--muted); }
.end .round-tag:empty { display: none; }
.end h2 { text-align: center; }
.end table { border-collapse: collapse; font-size: 9px; }
.end td, .end th { padding: 8px 12px; border-bottom: 2px solid var(--line); text-align: left; }
.end th { color: var(--muted); font-size: 7px; }
.hidden { display: none !important; }

.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--danger); color: #000; padding: 12px 16px; font-size: 9px; z-index: 10; box-shadow: 0 4px 0 #000; }

/* ---- táctil ---- */
.touch { position: fixed; inset: auto 0 0 0; height: 0; pointer-events: none; }
.touch .tb { pointer-events: auto; position: fixed; width: 64px; height: 64px; background: #ffffff18; border: 2px solid #ffffff40; color: #fff; font-size: 20px; border-radius: 10px; touch-action: none; user-select: none; -webkit-user-select: none; }
.touch .tb.active { background: #f4d03f66; }
.joy { pointer-events: auto; position: fixed; left: 28px; bottom: 28px; width: 150px; height: 150px; border-radius: 50%; background: #ffffff10; border: 2px solid #ffffff35; touch-action: none; }
.joy .knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: #ffffff40; border: 2px solid #ffffff80; pointer-events: none; }
.touch .dashb { right: 140px; bottom: 40px; width: 72px; height: 72px; border-radius: 50%; font-size: 10px; }
.touch .fire { right: 28px; bottom: 50px; width: 96px; height: 96px; border-radius: 50%; font-size: 30px; }

/* En táctil el joystick ocupa abajo a la izquierda: subir mi panel */
body.is-touch #hudMe { bottom: auto; top: 22px; }
}

}