/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
    --bg:            #020602;
    --bg-term:       #030803;
    --green:         #20c20e;
    --green-bright:  #39ff14;
    --green-glow:    rgba(57,255,20,0.45);
    --green-glow2:   rgba(57,255,20,0.18);
    --green-dim:     #0c420c;
    --cyan:          #00e8ff;
    --cyan-glow:     rgba(0,232,255,0.35);
    --gold:          #ffd700;
    --gold-glow:     rgba(255,215,0,0.4);
    --red:           #ff3333;
    --red-glow:      rgba(255,51,51,0.5);
    --orange:        #ff9900;
    --teal:          #00ffaa;
    --purple:        #cc88ff;
    --purple-glow:   rgba(180,100,255,0.35);
    --white:         #ccdccc;
    --dim:           #2a522a;
    --font:          'Share Tech Mono','Courier New',monospace;
    --font-title:    'VT323','Courier New',monospace;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg); color:var(--green); font-family:var(--font); font-size:15px; overflow:hidden; }

/* ── Canvases de efectos ─────────────────────────────────────────────────── */
#fx-canvas { position:fixed; inset:0; pointer-events:none; z-index:800; display:none; }
/* bg-canvas: artefactos de señal analógica (tear lines, sparks) — detrás de todo */
#bg-canvas { position:fixed; inset:0; pointer-events:none; z-index:1; }

/* ══ CRT — MONITOR FÍSICO VIEJO ═════════════════════════════════════════════

   Capas (z-index):
     899  #crt-noise     — ruido analógico estático
     900  #crt-scanlines — líneas de fósforo + haz de barrido + aberración
     901  #crt-vignette  — oscurecimiento de bordes (tubo de vidrio)
   ══════════════════════════════════════════════════════════════════════════ */

/* Ruido analógico — textura fractal animada */
#crt-noise {
    position:fixed; inset:0; pointer-events:none; z-index:899;
    opacity:0.040;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    animation: noise-roll 0.09s steps(1) infinite;
}
@keyframes noise-roll {
    0%   { background-position:   0%   0%; }
    11%  { background-position:  -5% -10%; }
    22%  { background-position: -15%   5%; }
    33%  { background-position:   7% -25%; }
    44%  { background-position:  20%  10%; }
    55%  { background-position: -15%  15%; }
    66%  { background-position:  15%  35%; }
    77%  { background-position:   0%  40%; }
    88%  { background-position: -20%  30%; }
}

/* Fósforo + scanlines — blend:screen los hace aditivos con el verde */
#crt-scanlines {
    position:fixed; inset:0; pointer-events:none; z-index:900;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,255,100,0.026) 0px,
        rgba(0,255,100,0.026) 1px,
        transparent               1px,
        transparent               3px
    );
    mix-blend-mode: screen;
    animation: crt-flicker 9s infinite, crt-flicker2 17s infinite;
}

/* Haz de barrido — línea del electron beam viajando de arriba a abajo */
#crt-scanlines::before {
    content:''; position:absolute; left:0; right:0; height:6px;
    background: linear-gradient(to bottom,
        transparent                0%,
        rgba(0,255,100,0.055)     50%,
        transparent               100%
    );
    animation: scan-beam 7s linear infinite;
    pointer-events:none;
}

/* Aberración cromática — franja roja/cian en bordes laterales del tubo */
#crt-scanlines::after {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 130% 130% at   0% 50%, rgba(255,0,0,0.020) 0%, transparent 52%),
        radial-gradient(ellipse 130% 130% at 100% 50%, rgba(0,210,255,0.020) 0%, transparent 52%);
    mix-blend-mode: screen;
    pointer-events:none;
}

/* Viñeta — oscurecimiento de bordes del tubo de vidrio curvado */
#crt-vignette {
    position:fixed; inset:0; pointer-events:none; z-index:901;
    background: radial-gradient(ellipse 80% 72% at 50% 50%, transparent 32%, rgba(0,0,0,0.78) 100%);
    box-shadow: inset 0 0 90px rgba(0,0,0,0.55);
}

/* Flicker — parpadeo del cátodo */
@keyframes crt-flicker {
    0%,100%    { opacity:1; }
    41%        { opacity:1; }
    41.05%     { opacity:0.80; }
    41.10%     { opacity:0.96; }
    41.15%     { opacity:0.84; }
    41.20%     { opacity:1; }
    78%        { opacity:1; }
    78.04%     { opacity:0.88; }
    78.08%     { opacity:1; }
}
@keyframes crt-flicker2 {
    0%,100%  { filter:brightness(1) saturate(1); }
    62%      { filter:brightness(1); }
    62.025%  { filter:brightness(1.14) saturate(1.18) hue-rotate(3deg); }
    62.06%   { filter:brightness(0.92) saturate(0.95); }
    62.09%   { filter:brightness(1) saturate(1); }
}
@keyframes scan-beam {
    from { top:-6px; }
    to   { top:100vh; }
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display:none !important; }
@keyframes fade-in  { from{opacity:0} to{opacity:1} }
@keyframes fade-out { from{opacity:1} to{opacity:0} }

/* ══ BOOT SCREEN ════════════════════════════════════════════════════════════ */
#boot-screen { height:100vh; display:flex; align-items:center; justify-content:center; }
#boot-wrap { width:min(700px,92vw); font-family:var(--font); font-size:clamp(12px,1.8vw,15px); color:var(--green); line-height:1.7; }
#boot-output .bline      { display:block; }
#boot-output .bline.bright { color:var(--green-bright); }
#boot-output .bline.dim    { color:var(--dim); }
#boot-output .bline.head   {
    color:var(--green-bright); text-shadow:0 0 12px var(--green-glow); font-family:var(--font-title); font-size:1.6em;
}
#boot-output .ok  { color:var(--teal); }
.boot-bar-wrap { color:var(--dim); font-size:.85em; margin:.3rem 0; }
.boot-bar-fill { display:inline-block; color:var(--green-bright); }
#boot-press {
    margin-top:1.5rem; color:var(--green-bright);
    text-shadow:0 0 10px var(--green-glow);
    animation:blink-press 1s step-end infinite;
}
@keyframes blink-press { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══ MENU SCREEN ════════════════════════════════════════════════════════════ */
#menu-screen {
    height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1.8rem;
    padding:2rem 1rem; animation:fade-in 0.6s ease;
}
#ascii-logo {
    font-family:var(--font-title); font-size:clamp(7px,1.35vw,14px);
    color:var(--green-bright); white-space:pre; text-align:center; line-height:1.25;
    text-shadow:0 0 14px var(--green-glow), 0 0 40px rgba(57,255,20,.10);
    animation:logo-glow 5s ease-in-out infinite;
}
@keyframes logo-glow {
    0%,100% { text-shadow:0 0 10px var(--green-glow), 0 0 25px rgba(57,255,20,.08); }
    50%     { text-shadow:0 0 24px var(--green-glow), 0 0 60px rgba(57,255,20,.18); }
}
#menu-subtitle { color:var(--dim); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
#game-cards    { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; max-width:860px; width:100%; }

.game-card {
    background:rgba(0,18,0,.6);
    border:1px solid var(--green-dim);
    border-radius:0;                               /* bunker: sin redondeo */
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); /* corte militar */
    padding:1.1rem 1.4rem; cursor:pointer; display:flex; align-items:flex-start;
    gap:1rem; text-align:left; min-width:240px; flex:1; max-width:275px;
    transition:border-color .2s, background .2s, transform .15s, box-shadow .2s;
    color:var(--green); font-family:var(--font);
}
.game-card:hover,.game-card:focus {
    border-color:var(--green); background:rgba(8,38,8,.88); transform:translateY(-2px);
    box-shadow:0 4px 22px rgba(57,255,20,.18), 0 0 0 1px var(--green-dim); outline:none;
}
.game-card.zona0 { border-color:rgba(0,200,220,.22); }
.game-card.zona0:hover,.game-card.zona0:focus { border-color:var(--cyan); box-shadow:0 4px 20px var(--cyan-glow); }
.card-num  { font-family:var(--font-title); font-size:2rem; color:var(--dim); line-height:1; transition:color .2s; flex-shrink:0; }
.game-card:hover .card-num       { color:var(--green-bright); }
.game-card.zona0:hover .card-num { color:var(--cyan); }
.card-title { font-size:1rem; color:var(--green-bright); margin-bottom:.3rem; }
.game-card.zona0 .card-title { color:var(--cyan); }
.card-desc  { font-size:.8rem; color:var(--white); margin-bottom:.35rem; line-height:1.4; }
.card-meta  { font-size:.7rem; color:var(--dim); }
#menu-footer { font-size:.68rem; color:var(--dim); letter-spacing:.05em; }

/* Save badges */
.card-save-row { display:flex; align-items:center; gap:.4rem; margin-top:.45rem; flex-wrap:wrap; }
.card-save-badge { font-size:.65rem; color:var(--teal); opacity:.8; letter-spacing:.03em; flex:1; }
.card-resume-btn {
    background:rgba(0,200,80,.12); border:1px solid rgba(0,200,80,.35);
    color:var(--teal); font-family:var(--font); font-size:.65rem;
    padding:.12rem .5rem; cursor:pointer; border-radius:0;
    transition:background .15s, border-color .15s;
}
.card-resume-btn:hover { background:rgba(0,200,80,.25); border-color:var(--teal); }
.card-delete-btn {
    background:none; border:1px solid rgba(255,51,51,.2);
    color:rgba(255,80,80,.5); font-family:var(--font); font-size:.62rem;
    padding:.1rem .38rem; cursor:pointer; border-radius:0;
    transition:background .15s, color .15s, border-color .15s;
}
.card-delete-btn:hover { background:rgba(255,51,51,.12); color:var(--red); border-color:var(--red); }

/* ══ GAME SCREEN ════════════════════════════════════════════════════════════ */
#game-screen {
    height:100vh; height:100svh; display:flex; flex-direction:column;
    background:var(--bg-term); animation:fade-in .4s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:   env(safe-area-inset-left,   0px);
    padding-right:  env(safe-area-inset-right,  0px);
}

/* ── Animaciones de transición ───────────────────────────────────────────── */

/* Sacudida por impacto */
@keyframes shake {
    0%,100%{ transform:translate(0,0) rotate(0); }
    10%    { transform:translate(-5px,-2px) rotate(-.4deg); }
    20%    { transform:translate( 5px, 2px) rotate( .4deg); }
    30%    { transform:translate(-4px, 1px) rotate(-.2deg); }
    40%    { transform:translate( 4px,-1px) rotate( .2deg); }
    50%    { transform:translate(-2px, 2px); }
    60%    { transform:translate( 2px,-2px); }
    70%    { transform:translate(-1px, 1px); }
    80%    { transform:translate( 1px,-1px); }
}
.shake { animation:shake .45s ease-out; }

/* Vertical sync jump — el CRT pierde sincronía al cambiar de habitación */
@keyframes vsync-jump {
    0%   { transform:translateY(0) scaleY(1);     filter:brightness(1) contrast(1); }
    7%   { transform:translateY(-11px) scaleY(0.985) skewX(-0.6deg);
           filter:brightness(1.9) saturate(1.5) hue-rotate(10deg) contrast(1.2); }
    16%  { transform:translateY(5px) scaleY(1.007) skewX(0.3deg);
           filter:brightness(1.1) contrast(1); }
    30%  { transform:translateY(-2px) scaleY(0.999); }
    50%  { transform:translateY(1px); filter:brightness(1); }
    100% { transform:translateY(0) scaleY(1); filter:brightness(1) contrast(1); }
}
.vsync { animation:vsync-jump .30s ease-out; }

/* Glitch texto en cambio de habitación */
@keyframes glitch-in {
    0%  { filter:brightness(2.5) hue-rotate(90deg) saturate(3); transform:scaleX(1.01) skewX(4deg); }
    15% { filter:brightness(1.8) hue-rotate(30deg) saturate(2); transform:scaleX(.99)  skewX(-2deg); }
    30% { filter:brightness(1.3) hue-rotate(0);                 transform:scaleX(1)    skewX(1deg); }
    60% { filter:brightness(1.05); transform:scaleX(1) skewX(0); }
    100%{ filter:brightness(1);    transform:scaleX(1) skewX(0); }
}
.room-glitch { animation:glitch-in .28s ease-out; }

/* ── Header — barra de estado del bunker ─────────────────────────────────── */
#game-header {
    display:flex; align-items:center; gap:.8rem; padding:.32rem .9rem;
    border-bottom:1px solid var(--green-dim);
    background:rgba(0,5,0,.96); flex-shrink:0;
}
#back-btn {
    background:none; border:1px solid var(--green-dim); color:var(--dim);
    font-family:var(--font); font-size:.70rem; padding:.14rem .6rem; cursor:pointer;
    border-radius:0; text-transform:uppercase; letter-spacing:.07em;
    transition:border-color .15s, color .15s, text-shadow .15s;
}
#back-btn:hover { border-color:var(--green); color:var(--green); text-shadow:0 0 6px var(--green-glow2); }
#game-title-bar {
    font-size:.76rem; color:var(--green-bright); letter-spacing:.11em; text-transform:uppercase;
    text-shadow:0 0 8px var(--green-glow2);
}
#room-badge {
    margin-left:auto; font-size:.67rem; color:rgba(180,220,180,0.50);
    max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    text-align:right; letter-spacing:.03em;
}
#save-btn {
    background:none; border:1px solid var(--green-dim); color:var(--dim);
    font-family:var(--font); font-size:.70rem; padding:.14rem .55rem; cursor:pointer;
    border-radius:0; flex-shrink:0; text-transform:uppercase; letter-spacing:.06em;
    transition:border-color .15s, color .15s, text-shadow .15s;
}
#save-btn:hover { border-color:var(--green); color:var(--green); text-shadow:0 0 6px var(--green-glow2); }
@keyframes save-flash-anim {
    0%   { background:rgba(0,200,80,.25); border-color:var(--teal); color:var(--teal);
           text-shadow:0 0 10px rgba(0,255,170,0.7); }
    70%  { background:rgba(0,200,80,.10); border-color:var(--green); color:var(--green); }
    100% { background:none; border-color:var(--green-dim); color:var(--dim); text-shadow:none; }
}
#save-btn.save-flash { animation:save-flash-anim 2.2s ease forwards; }

/* ── Layout principal ────────────────────────────────────────────────────── */
#content-row { flex:1; display:flex; overflow:hidden; }

#output {
    flex:1; overflow-y:auto; padding:1rem 1.4rem .5rem;
    line-height:1.68; scroll-behavior:smooth;
}
#output::-webkit-scrollbar { width:4px; }
#output::-webkit-scrollbar-track { background:transparent; }
#output::-webkit-scrollbar-thumb { background:var(--green-dim); border-radius:0; }

/* ── Mapa lateral — panel tipo radar soviético ──────────────────────────── */
#map-panel {
    width:200px; flex-shrink:0; display:flex; flex-direction:column;
    border-left:1px solid var(--green-dim);
    background:rgba(0,4,0,.85);
}
.panel-hdr {
    display:flex; justify-content:space-between; align-items:center;
    padding:3px 7px; background:rgba(6,44,6,.65);
    font-size:.61rem; color:var(--dim); letter-spacing:.10em;
    border-bottom:1px solid var(--green-dim); flex-shrink:0;
    text-transform:uppercase;
}
.panel-hdr span:first-child {
    color:var(--green); letter-spacing:.18em;
    text-shadow:0 0 5px var(--green-glow2);
}
.panel-hdr span:last-child { color:var(--dim); font-variant-numeric:tabular-nums; }
#minimap { display:block; flex:1; min-height:0; width:100%; cursor:crosshair; }
#map-room-name {
    padding:3px 7px; font-size:.61rem; color:var(--cyan);
    border-top:1px solid var(--green-dim); min-height:20px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    background:rgba(0,7,10,.65); transition:color .15s;
}

/* ══ MENSAJES ════════════════════════════════════════════════════════════════

   Fósforo persistente: text-shadow en todas las líneas simula el afterglow
   del fósforo P31 (verde) del monitor.
   ══════════════════════════════════════════════════════════════════════════ */
.msg { display:block; margin:1px 0; white-space:pre-wrap; word-break:break-word; }

/* Habitación — con aberración cromática (efecto lente CRT) */
.msg-room {
    color:var(--cyan); font-size:1.02rem; font-weight:bold;
    margin:1.3rem 0 .15rem; padding-left:.7rem; border-left:2px solid var(--cyan);
    text-shadow:
        -0.9px 0   rgba(255, 40, 40, 0.50),
         0.9px 0   rgba(  0,210,255, 0.50),
         0     0   12px var(--cyan-glow);
    animation:room-burn .4s ease-out;
}
@keyframes room-burn {
    0%  { opacity:0; color:#fff;
          text-shadow:0 0 40px #fff, 0 0 80px var(--cyan-glow);
          transform:skewX(-1.5deg); }
    20% { opacity:1; color:#fff; text-shadow:0 0 22px var(--cyan-glow); transform:skewX(0); }
    100%{ color:var(--cyan);
          text-shadow:-0.9px 0 rgba(255,40,40,0.50), 0.9px 0 rgba(0,210,255,0.50), 0 0 12px var(--cyan-glow); }
}

.msg-normal { color:var(--white); text-shadow:0 0 2px rgba(32,194,14,0.12); }
.msg-normal.typing::after { content:'█'; color:var(--green-bright); animation:blink-press .6s step-end infinite; }

/* NPC — expediente clasificado ────────────────────────────────────────────
   Estructura HTML generada por JS:
     div.msg.msg-npc-wrap
       span.msg-npc-hdr   ← "┌─ [VOZ DETECTADA: NOMBRE]"
       div.msg-npc         ← "│ texto con typewriter"
   ──────────────────────────────────────────────────────────────────────── */
.msg-npc-wrap {
    display:block; margin:.55rem 0 .1rem;
    border:1px solid rgba(180,100,255,0.20);
    border-left:2px solid rgba(180,100,255,0.55);
    background:rgba(10,0,18,0.70);
    animation:msg-fade .18s ease-out;
}
.msg-npc-hdr {
    display:block;
    font-size:.59rem; color:rgba(200,140,255,0.52);
    letter-spacing:.13em; padding:.16rem .7rem .10rem;
    border-bottom:1px solid rgba(180,100,255,0.12);
    background:rgba(22,0,35,0.55);
    text-transform:uppercase;
}
.msg-npc {
    display:block; color:var(--purple);
    padding:.28rem .7rem .32rem 1.0rem;
    margin:0; border:none;
    text-shadow:0 0 6px var(--purple-glow);
    font-style:italic;
}
.msg-npc.typing::after { content:'█'; color:var(--purple); animation:blink-press .6s step-end infinite; }

/* Items */
.msg-item {
    color:var(--gold); padding-left:1.2rem;
    text-shadow:0 0 4px rgba(255,215,0,0.18);
    animation:item-pop .25s ease-out;
}
.msg-item::before { content:"▸ "; color:var(--dim); }
@keyframes item-pop {
    0%  { opacity:0; transform:translateX(-6px); text-shadow:0 0 14px var(--gold-glow); }
    40% { text-shadow:0 0 6px var(--gold-glow); }
    100%{ opacity:1; transform:translateX(0); text-shadow:0 0 4px rgba(255,215,0,0.18); }
}

.msg-items-header     { color:var(--dim); font-size:.82rem; margin-top:.5rem; }
.msg-inventory-header { color:var(--green); margin-top:.5rem; text-shadow:0 0 4px var(--green-glow2); }
.msg-inventory-footer { color:var(--dim); font-size:.82rem; }

.msg-success { color:var(--teal); text-shadow:0 0 5px rgba(0,255,170,0.28); animation:msg-fade .15s ease-out; }
.msg-error   { color:var(--orange); text-shadow:0 0 4px rgba(255,153,0,0.22); animation:msg-fade .15s ease-out; }
.msg-stats   { color:var(--dim); font-size:.83rem; font-style:italic; }
.msg-box     { color:var(--green); font-size:.88rem; text-shadow:0 0 3px var(--green-glow2); }
.msg-separator { color:var(--green-dim); font-size:.7rem; margin:.5rem 0; }

@keyframes msg-fade { from{opacity:0;transform:translateY(2px)} to{opacity:1;transform:none} }

/* Peligro — amenaza pulsante ─────────────────────────────────────────────── */
.msg-danger {
    color:var(--red); font-weight:bold; display:block; padding:.1rem 0;
    animation:danger-flash .5s ease-out, danger-pulse 1.8s ease-in-out infinite .5s;
}
@keyframes danger-flash {
    0%  { background:rgba(255,40,40,.28); color:#fff;
          text-shadow:0 0 28px var(--red-glow), 0 0 60px rgba(255,0,0,0.3); }
    45% { background:rgba(255,40,40,.08); }
    100%{ background:transparent; color:var(--red); text-shadow:0 0 10px var(--red-glow); }
}
@keyframes danger-pulse {
    0%,100% { text-shadow:0 0 8px var(--red-glow); }
    50%     { text-shadow:0 0 20px var(--red-glow), 0 0 45px rgba(255,0,0,0.18); }
}

/* Derrota */
.msg-defeat {
    color:var(--red); font-size:1.05rem; padding:.9rem 1.1rem;
    border:1px solid rgba(255,51,51,.50); background:rgba(38,0,0,.70);
    margin:1rem 0; text-align:center;
    text-shadow:0 0 14px var(--red-glow);
    animation:defeat-in .35s ease-out;
}
@keyframes defeat-in {
    from{opacity:0;transform:scale(.97) skewX(-1.2deg);filter:brightness(4)}
    to  {opacity:1;transform:scale(1)   skewX(0);       filter:brightness(1)}
}

/* Victoria */
.msg-victory {
    color:var(--green-bright); font-size:1.05rem; padding:.9rem 1.1rem;
    border:1px solid rgba(57,255,20,.50); background:rgba(0,28,0,.65);
    margin:1rem 0; text-align:center;
    text-shadow:0 0 16px var(--green-glow);
    animation:victory-in .35s ease-out, victory-pulse 2.5s ease-in-out infinite .35s;
}
@keyframes victory-in { from{opacity:0;transform:scale(.95);filter:brightness(3)} to{opacity:1;transform:scale(1);filter:brightness(1)} }
@keyframes victory-pulse {
    0%,100%{ box-shadow:0 0 8px rgba(57,255,20,.20); }
    50%    { box-shadow:0 0 30px rgba(57,255,20,.55), 0 0 8px var(--green-glow); }
}

/* Echo (comando escrito) */
.msg-echo { color:var(--green-bright); margin-top:.9rem; text-shadow:0 0 4px var(--green-glow2); }
.msg-echo::before { content:"▶ "; color:var(--dim); }

/* ── Input ───────────────────────────────────────────────────────────────── */
#input-row {
    display:flex; align-items:center; padding:.48rem 1.2rem;
    border-top:1px solid var(--green-dim); background:rgba(0,4,0,.96);
    flex-shrink:0; gap:.6rem;
}
#cursor-prompt {
    color:var(--green-bright); font-size:.9rem; flex-shrink:0;
    animation:cursor-blink 1.1s step-end infinite;
    text-shadow:0 0 7px var(--green-glow);
}
@keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:.05} }
#cmd-input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--green-bright); font-family:var(--font); font-size:.95rem;
    caret-color:var(--green-bright);
    text-shadow:0 0 5px var(--green-glow2);
}
#cmd-input::placeholder { color:var(--green-dim); }
#cmd-input:disabled { opacity:.22; cursor:not-allowed; }

/* ── Barra de sugerencias ────────────────────────────────────────────────── */
#hint-bar {
    display:flex; flex-wrap:wrap; gap:0 1.1rem; padding:.25rem 1.2rem;
    font-size:.63rem; color:var(--green-dim);
    border-top:1px solid rgba(6,22,6,.95); background:rgba(0,2,0,.92);
    flex-shrink:0; line-height:1.9;
}
#hint-bar span { letter-spacing:.02em; }
#hint-bar span + span::before { content:'· '; opacity:.35; margin-left:-.4rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:720px) {
    #map-panel { display:none; }
    #ascii-logo { font-size:6px; }
    #game-cards { flex-direction:column; align-items:stretch; }
    .game-card  { min-width:unset; max-width:unset; clip-path:none; }
    #output     { padding:.8rem 1rem; font-size:14px; }
    #input-row  { padding:.45rem 1rem; }
    #hint-bar,#room-badge { display:none; }
    #boot-wrap  { font-size:12px; }
    #user-btn   { font-size:.58rem; padding:.18rem .4rem; max-width:80px;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* ── Tablet (721-1024px): mapa más estrecho ──────────────────────────────── */
@media (min-width:721px) and (max-width:1024px) {
    #map-panel { width:160px; }
    #minimap   { width:158px; }
}

/* ══ FASE 3 ══════════════════════════════════════════════════════════════════

   Retratos ASCII · Inventario visual · Radio panel · Teclado móvil
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Minimap: altura mínima para que el radar no se aplaste con radio ──────── */
#minimap { min-height:110px; }

/* ── Retratos ASCII de NPCs ──────────────────────────────────────────────── */
.msg-npc-body {
    display:flex; align-items:flex-start;
}
.msg-npc-portrait {
    font-size:.58rem; line-height:1.35; white-space:pre;
    color:rgba(170,90,255,0.42);
    padding:.28rem .4rem .28rem .7rem;
    flex-shrink:0; user-select:none;
    text-shadow:0 0 4px var(--purple-glow);
    border-right:1px solid rgba(180,100,255,0.14);
    letter-spacing:.02em;
}
/* Cuando hay retrato, el texto ocupa el resto */
.msg-npc-body .msg-npc {
    flex:1; padding:.28rem .7rem .32rem .7rem;
}

/* ── Inventario visual — caja box-drawing ────────────────────────────────── */
.msg-inv-box {
    margin:.6rem 0 .2rem;
    background:rgba(0,10,4,.70);
    border-left:1px solid rgba(32,194,14,.30);
    animation:msg-fade .18s ease-out;
    font-family:var(--font);
}
.inv-title {
    color:var(--green-bright); font-size:.82rem;
    padding:.14rem .6rem .10rem;
    text-shadow:0 0 6px var(--green-glow2);
    letter-spacing:.06em;
    border-bottom:1px solid rgba(32,194,14,.12);
    background:rgba(4,20,4,.60);
}
.inv-item {
    color:var(--gold); font-size:.88rem;
    padding:.05rem .6rem;
    text-shadow:0 0 3px rgba(255,215,0,.12);
    animation:item-pop .22s ease-out;
}
.inv-bottom {
    color:var(--green-dim); font-size:.75rem;
    padding:.05rem .6rem .16rem;
}

/* ── Panel de radio — interceptaciones analógicas ────────────────────────── */
#radio-panel {
    border-top:1px solid var(--green-dim);
    background:rgba(0,5,3,.92);
    flex-shrink:0;
}
#radio-output {
    padding:4px 7px 4px;
    min-height:36px; max-height:68px;
    overflow:hidden;
}
.radio-line {
    display:block;
    font-size:.57rem; line-height:1.55;
    color:rgba(32,194,14,.50);
    animation:msg-fade .22s ease-out;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rf-military { color:rgba(255,200,50,.68); text-shadow:0 0 3px rgba(255,200,50,.22); }
.rf-distress { color:rgba(255,70,70,.62);  text-shadow:0 0 3px rgba(255,40,40,.18);  }
.rf-civilian { color:rgba(80,200,130,.58); }
.rf-zona0    { color:rgba(0,232,255,.68);  text-shadow:0 0 4px var(--cyan-glow);      }
.rf-unknown  { color:rgba(140,130,200,.50); }

/* ── Teclado móvil — solo en dispositivos táctiles ──────────────────────── */
#mobile-kb {
    display:none;
    flex-shrink:0;
    padding:.42rem .8rem;
    border-top:1px solid var(--green-dim);
    background:rgba(0,3,0,.97);
    gap:.7rem;
    align-items:center;
    justify-content:space-between;
}
/* Activar sólo si el dispositivo principal es puntero táctil (no mouse/stylus) */
@media (hover:none) and (pointer:coarse) {
    #mobile-kb { display:flex; }
    #hint-bar   { display:none; }
}
#mob-compass {
    display:grid;
    grid-template-columns:repeat(3, 38px);
    grid-template-rows:repeat(3, 32px);
    gap:2px;
    flex-shrink:0;
}
.mob-btn {
    background:rgba(0,16,0,.80);
    border:1px solid var(--green-dim);
    color:var(--green); font-family:var(--font); font-size:.73rem;
    display:flex; align-items:center; justify-content:center;
    border-radius:0; cursor:pointer;
    text-transform:uppercase; letter-spacing:.06em;
    transition:background .08s, border-color .08s, color .08s;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    padding:0;
}
.mob-btn:active {
    background:rgba(32,194,14,.22);
    border-color:var(--green);
    color:var(--green-bright);
    text-shadow:0 0 6px var(--green-glow2);
}
.mob-center {
    color:var(--cyan);
    border-color:rgba(0,232,255,.28);
    font-size:1rem;
}
.mob-center:active {
    background:rgba(0,232,255,.15);
    border-color:var(--cyan);
    color:var(--cyan);
}
#mob-actions {
    display:flex; flex-wrap:wrap;
    gap:3px; flex:1; justify-content:flex-end;
    max-width:172px;
}
#mob-actions .mob-btn { width:50px; height:32px; font-size:.67rem; }

/* ══ BOTÓN DE USUARIO ═══════════════════════════════════════════════════════ */
#user-btn {
    background:transparent; border:1px solid var(--green-dim);
    color:var(--green-dim); font-family:var(--font); font-size:.65rem;
    padding:.2rem .55rem; cursor:pointer; letter-spacing:.04em;
    transition:color .15s, border-color .15s;
    margin-left:auto; white-space:nowrap;
}
#user-btn:hover  { color:var(--green); border-color:var(--green); }
#user-btn.logged { color:var(--cyan);  border-color:rgba(0,232,255,.5); }

#menu-auth-row {
    display:flex; justify-content:center; margin-top:.8rem;
}
#menu-user-btn {
    background:transparent; border:1px solid var(--green-dim);
    color:var(--green-dim); font-family:var(--font); font-size:.7rem;
    padding:.28rem .9rem; cursor:pointer; letter-spacing:.04em;
    transition:color .15s, border-color .15s;
}
#menu-user-btn:hover  { color:var(--green); border-color:var(--green); }
#menu-user-btn.logged { color:var(--cyan);  border-color:rgba(0,232,255,.5); }

/* ══ AUTH MODAL ═════════════════════════════════════════════════════════════ */
#auth-overlay {
    position:fixed; inset:0; z-index:900;
    background:rgba(0,4,0,.88);
    display:flex; align-items:center; justify-content:center;
    animation:fade-in .18s ease;
}
#auth-overlay.hidden { display:none; }

#auth-box {
    border:1px solid var(--green);
    background:rgba(0,8,0,.98);
    padding:1.6rem 1.8rem 1.4rem;
    width:min(400px, 92vw);
    font-family:var(--font);
    box-shadow:0 0 32px rgba(32,194,14,.18);
}
#auth-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:1.1rem; border-bottom:1px solid var(--green-dim);
    padding-bottom:.55rem;
}
#auth-title { color:var(--green); font-size:1rem; letter-spacing:.08em; }
#auth-close {
    background:none; border:none; color:var(--green-dim);
    font-size:1rem; cursor:pointer; padding:.1rem .3rem;
}
#auth-close:hover { color:var(--red); }

#auth-status {
    min-height:1.4rem; font-size:.78rem; margin-bottom:.7rem;
    color:var(--cyan);
}
#auth-status.err { color:var(--red); }

.auth-field { display:flex; flex-direction:column; gap:.5rem; }
.auth-label {
    font-size:.65rem; color:var(--green-dim); letter-spacing:.06em;
    margin-top:.4rem;
}
#auth-username, #auth-password {
    background:rgba(0,16,0,.7); border:1px solid var(--green-dim);
    color:var(--green); font-family:var(--font); font-size:.88rem;
    padding:.45rem .7rem; outline:none;
    caret-color:var(--green);
}
#auth-username:focus, #auth-password:focus {
    border-color:var(--green); box-shadow:0 0 8px rgba(32,194,14,.2);
}
#auth-submit-btn {
    margin-top:.8rem;
    background:rgba(32,194,14,.08); border:1px solid var(--green);
    color:var(--green); font-family:var(--font); font-size:.82rem;
    padding:.55rem; cursor:pointer; letter-spacing:.04em;
    transition:background .15s;
}
#auth-submit-btn:hover { background:rgba(32,194,14,.18); }
#auth-note {
    font-size:.62rem; color:var(--green-dim); margin-top:.55rem;
    line-height:1.5;
}
#auth-logged { text-align:center; }
#auth-welcome { color:var(--cyan); margin-bottom:1rem; letter-spacing:.04em; }
#auth-logged button {
    background:transparent; border:1px solid var(--green-dim);
    color:var(--green-dim); font-family:var(--font); font-size:.75rem;
    padding:.4rem 1rem; cursor:pointer;
}
#auth-logged button:hover { border-color:var(--red); color:var(--red); }

/* ── Share card ──────────────────────────────────────────────────────────── */
#share-overlay {
    position:fixed; inset:0; background:rgba(2,6,2,.88);
    display:flex; align-items:center; justify-content:center;
    z-index:900; backdrop-filter:blur(3px);
}
#share-card {
    background:var(--bg-term); border:1px solid var(--green);
    box-shadow:0 0 28px var(--green-glow2),inset 0 0 18px rgba(0,0,0,.6);
    padding:2rem 2.4rem; text-align:center; min-width:280px; max-width:360px;
    width:90%;
}
#share-icon { font-size:2.2rem; margin-bottom:.3rem; }
#share-game-title {
    font-family:var(--font-title); font-size:1.5rem;
    color:var(--green-bright); letter-spacing:.12em; margin-bottom:.4rem;
}
#share-card.victory-card #share-icon::after { content: ' ✦'; }
#share-card.victory-card #share-game-title { color:var(--gold); text-shadow:0 0 14px var(--gold-glow); }
.share-divider { color:var(--green-dim); margin:.6rem 0; letter-spacing:.05em; }
.share-row {
    display:flex; justify-content:space-between; align-items:baseline;
    padding:.18rem 0; font-size:.82rem;
}
.share-lbl { color:var(--green-dim); font-size:.7rem; letter-spacing:.08em; }
#share-room  { color:var(--white); max-width:180px; text-align:right; }
#share-pct   { color:var(--cyan); }
#share-time  { color:var(--green); }
#share-deaths { color:var(--red); }
#share-diary {
    font-size:.74rem; color:var(--white); line-height:1.55;
    margin:.7rem 0 .3rem; padding:.6rem .8rem;
    border-left:2px solid var(--green-dim);
    text-align:left; font-style:italic;
    animation: fadein .4s ease;
}
#share-site {
    font-size:.68rem; color:var(--green-dim); letter-spacing:.06em; margin:.2rem 0;
}
#share-actions { display:flex; gap:.6rem; margin-top:1.1rem; justify-content:center; }
#share-copy-btn, #share-close-btn, #share-forum-btn {
    background:transparent; border:1px solid var(--green); color:var(--green);
    font-family:var(--font); font-size:.8rem; padding:.45rem 1rem;
    cursor:pointer; letter-spacing:.04em; transition:background .14s;
}
#share-copy-btn:hover  { background:rgba(32,194,14,.15); }
#share-forum-btn { border-color:var(--cyan); color:var(--cyan); }
#share-forum-btn:hover { background:rgba(0,232,255,.10); }
#share-forum-btn:disabled { opacity:.45; cursor:default; }
#share-close-btn { border-color:var(--green-dim); color:var(--green-dim); }
#share-close-btn:hover { border-color:var(--red); color:var(--red); }
#share-copied {
    margin-top:.6rem; font-size:.72rem; color:var(--cyan);
    letter-spacing:.06em; animation:fadein .2s ease;
}
#share-forum-status {
    margin-top:.5rem; font-size:.72rem; color:var(--amber, #ffb000);
    letter-spacing:.05em; animation:fadein .2s ease;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
#menu-lb-btn {
    background:transparent; border:1px solid var(--green-dim); color:var(--green-dim);
    font-family:var(--font); font-size:.78rem; padding:.38rem .9rem;
    cursor:pointer; letter-spacing:.06em; transition:all .15s;
}
#menu-lb-btn:hover { border-color:var(--gold); color:var(--gold); }

#menu-foro-btn {
    display:inline-block;
    background:transparent; border:1px solid var(--green-dim); color:var(--green-dim);
    font-family:var(--font); font-size:.78rem; padding:.38rem .9rem;
    letter-spacing:.06em; transition:all .15s; text-decoration:none;
}
#menu-foro-btn:hover { border-color:var(--cyan); color:var(--cyan); }

#lb-overlay {
    position:fixed; inset:0; background:rgba(2,6,2,.9);
    display:flex; align-items:center; justify-content:center;
    z-index:800; backdrop-filter:blur(3px);
}
#lb-box {
    background:var(--bg-term); border:1px solid var(--green);
    box-shadow:0 0 32px var(--green-glow2); padding:0;
    width:min(600px,95vw); max-height:80vh; display:flex; flex-direction:column;
}
#lb-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:.8rem 1.2rem; border-bottom:1px solid var(--green-dim);
    background:rgba(32,194,14,.06);
}
#lb-title {
    font-family:var(--font-title); font-size:1.4rem;
    color:var(--green-bright); letter-spacing:.14em;
}
#lb-close {
    background:transparent; border:none; color:var(--green-dim);
    font-size:1rem; cursor:pointer; padding:.2rem .4rem;
}
#lb-close:hover { color:var(--red); }
#lb-tabs {
    display:flex; border-bottom:1px solid var(--green-dim);
    background:rgba(0,0,0,.3);
}
.lb-tab {
    flex:1; background:transparent; border:none; border-right:1px solid var(--green-dim);
    color:var(--green-dim); font-family:var(--font); font-size:.75rem;
    padding:.55rem .4rem; cursor:pointer; letter-spacing:.06em;
    transition:all .15s;
}
.lb-tab:last-child { border-right:none; }
.lb-tab:hover    { background:rgba(32,194,14,.07); color:var(--green); }
.lb-tab.active   { background:rgba(32,194,14,.12); color:var(--green-bright); border-bottom:2px solid var(--green-bright); }
#lb-content { overflow-y:auto; padding:1rem 1.2rem; flex:1; }
.lb-loading  { color:var(--green-dim); text-align:center; padding:2rem; font-size:.82rem; }
.lb-empty    { color:var(--green-dim); text-align:center; padding:2rem; font-size:.82rem; }
.lb-table    { width:100%; border-collapse:collapse; font-size:.78rem; }
.lb-table th {
    color:var(--green-dim); font-weight:normal; letter-spacing:.08em;
    font-size:.68rem; text-align:left; padding:.3rem .4rem;
    border-bottom:1px solid var(--green-dim);
}
.lb-table th:not(:first-child) { text-align:right; }
.lb-table td { padding:.4rem .4rem; border-bottom:1px solid rgba(32,194,14,.08); }
.lb-table td:not(:first-child) { text-align:right; }
.lb-table tr:first-child td { color:var(--gold); }
.lb-table tr:nth-child(2) td { color:var(--white); }
.lb-table tr:nth-child(3) td { color:var(--green); opacity:.9; }
.lb-rank   { color:var(--green-dim); min-width:28px; }
.lb-name   { color:inherit; }
.lb-won    { color:var(--cyan); }
.lb-time   { color:var(--green-dim); }
.lb-deaths { color:var(--red); opacity:.7; }

/* ══ CHAT BBS MODAL ════════════════════════════════════════════════════════ */

/* Unread badges */
#chat-badge, #game-chat-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--red); color: #fff;
    border-radius: 9px; font-size: .6rem;
    padding: .05rem .32rem; margin-left: .3rem;
    min-width: 16px; height: 16px;
    font-family: var(--font); vertical-align: middle;
    animation: badge-pop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badge-pop { from { transform:scale(0); } to { transform:scale(1); } }

/* Game header chat button */
#game-chat-btn {
    background:transparent; border:1px solid var(--green-dim); color:var(--green-dim);
    font-family:var(--font); font-size:.72rem; padding:.3rem .55rem; cursor:pointer;
    letter-spacing:.06em; transition:all .15s;
}
#game-chat-btn:hover { border-color:var(--cyan); color:var(--cyan); }

/* Overlay backdrop */
#chat-overlay {
    position:fixed; inset:0;
    background:rgba(2,6,2,.88);
    display:flex; align-items:center; justify-content:center;
    z-index:750; backdrop-filter:blur(3px);
}

/* Panel container */
#chat-panel {
    background:var(--bg-term); border:1px solid var(--green);
    box-shadow:0 0 40px var(--green-glow2);
    width:min(560px,96vw); height:min(78vh,620px);
    display:flex; flex-direction:column; overflow:hidden;
}

/* Panel header */
#cp-hdr {
    display:flex; align-items:center; gap:.7rem;
    padding:.65rem 1rem; border-bottom:1px solid var(--green-dim);
    background:rgba(32,194,14,.06); flex-shrink:0;
}
#cp-logo {
    font-family:var(--font-title); font-size:1.25rem; color:var(--green-bright);
    letter-spacing:.1em; text-shadow:0 0 8px var(--green-glow2);
}
#cp-online { font-size:.75rem; color:var(--amber); flex:1; }
#cp-user   { font-size:.75rem; color:var(--cyan); }
#cp-close  {
    background:transparent; border:none; color:var(--green-dim);
    font-size:.95rem; cursor:pointer; padding:.2rem .4rem; line-height:1;
}
#cp-close:hover { color:var(--red); }

/* Auth wall */
#cp-auth {
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:1.4rem 1.8rem;
}
.cp-auth-title {
    font-family:var(--font-title); font-size:1.15rem; color:var(--green);
    margin-bottom:1rem; letter-spacing:.1em;
}
.cp-auth-lbl {
    display:block; font-size:.68rem; color:var(--green-dim);
    letter-spacing:.08em; margin:.55rem 0 .2rem;
}
.cp-auth-input {
    width:100%; background:rgba(32,194,14,.05);
    border:1px solid var(--green-dim); color:var(--green);
    font-family:var(--font); font-size:.82rem; padding:.38rem .6rem; outline:none;
}
.cp-auth-input:focus { border-color:var(--green); }
#cp-auth-err {
    color:var(--red); font-size:.72rem; min-height:.9rem; margin:.4rem 0;
}
#cp-auth-btn {
    width:100%; margin-top:.5rem;
    font-family:var(--font-title); font-size:1rem;
    background:transparent; border:1px solid var(--green); color:var(--green);
    padding:.42rem; cursor:pointer; letter-spacing:.06em;
}
#cp-auth-btn:hover { background:rgba(32,194,14,.1); }
#cp-auth-skip {
    width:100%; margin-top:.45rem; background:transparent; border:none;
    color:var(--green-dim); font-family:var(--font); font-size:.74rem;
    cursor:pointer; letter-spacing:.04em; padding:.3rem;
}
#cp-auth-skip:hover { color:var(--green); }

/* Messages log */
#cp-log {
    flex:1; overflow-y:auto; padding:.6rem .9rem;
    display:flex; flex-direction:column; gap:.2rem;
    scroll-behavior:smooth;
}
#cp-log::-webkit-scrollbar { width:5px; }
#cp-log::-webkit-scrollbar-track { background:var(--dim); }
#cp-log::-webkit-scrollbar-thumb { background:#336633; }

.cp-msg       { font-size:.8rem; line-height:1.5; word-break:break-word; animation:fadein .18s ease; }
.cp-ts        { color:#2a5a2a; font-size:.7rem; margin-right:.35rem; }
.cp-user      { color:var(--cyan); margin-right:.3rem; }
.cp-user-me   { color:var(--gold); }
.cp-text      { color:#c8e8c8; }

.cp-msg-logro .cp-text    { color:var(--gold); }
.cp-msg-logro::before     { content:'🏆 '; }
.cp-logro-badge {
    font-size:.65rem; color:#886622; margin:0 .3rem;
    background:rgba(255,215,0,.08); padding:.05rem .3rem; border-radius:3px;
}
.cp-msg-system {
    color:#336633; font-size:.72rem; font-style:italic;
}
.cp-sep {
    text-align:center; color:#224422; font-size:.68rem;
    border-top:1px solid #1a3a1a; padding:.35rem 0 .1rem; margin:.2rem 0;
}

/* Notification permission bar */
#cp-notif-bar {
    display:flex; align-items:center; gap:.5rem;
    padding:.45rem .9rem; border-top:1px solid var(--green-dim);
    background:rgba(0,232,255,.04); font-size:.75rem; flex-shrink:0;
    color:var(--cyan);
}
#cp-notif-bar button {
    background:transparent; border:1px solid var(--cyan); color:var(--cyan);
    font-family:var(--font); font-size:.72rem; padding:.2rem .6rem;
    cursor:pointer;
}
#cp-notif-bar button:hover { background:rgba(0,232,255,.1); }
#cp-notif-bar span { flex:1; }

/* Input row */
#cp-input-row {
    display:flex; align-items:center; gap:.4rem;
    padding:.5rem .9rem; border-top:1px solid #1a3a1a;
    background:rgba(0,0,0,.3); flex-shrink:0;
}
.cp-prompt { color:var(--green); font-size:1rem; flex-shrink:0; }
#cp-input  {
    flex:1; background:none; border:none; border-bottom:1px solid #336633;
    color:var(--green); font-family:var(--font); font-size:.82rem; outline:none; padding:.2rem 0;
}
#cp-input::placeholder { color:#2a5a2a; }
#cp-input:focus { border-color:var(--green); }
#cp-send {
    font-size:1.1rem; background:transparent;
    border:1px solid #336633; color:var(--green);
    padding:.2rem .65rem; cursor:pointer;
}
#cp-send:hover { background:rgba(32,194,14,.08); }

/* Status line */
#cp-status {
    padding:.2rem .9rem; font-size:.67rem;
    color:#1e3e1e; border-top:1px solid #0d1e0d; flex-shrink:0;
}

/* Mobile: panel takes more vertical space */
@media (max-width: 600px) {
    #chat-panel { width:100vw; height:100dvh; border:none; }
}
.lb-pct    { color:inherit; }