/* Estación Terminal — interfaz.
   El juego se pinta en el lienzo; aquí van los papeles, los menús y lo que flota encima. */

@font-face { font-family: 'Barlow Condensed'; src: url(../fuentes/barlow-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(../fuentes/barlow-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(../fuentes/barlow-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(../fuentes/courier-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(../fuentes/courier-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(../fuentes/courier-400-i.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url(../fuentes/caveat-500.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url(../fuentes/oldstandard-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url(../fuentes/oldstandard-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url(../fuentes/oldstandard-400-i.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --negro: #050608;
  --panel: #0d0f12;
  --panel2: #15181d;
  --linea: #2a2f36;
  --texto: #dcd8cc;
  --tenue: #8b8a84;
  --ambar: #e8c860;
  --ambar2: #f0d878;
  --rojo: #c0392b;
  --verde: #4dff88;
  --tam-texto: 1;
  --ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --maquina: 'Courier Prime', 'Courier New', monospace;
  --mano: 'Caveat', 'Segoe Print', cursive;
  --prensa: 'Old Standard TT', Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--negro); color: var(--texto); overflow: hidden; }
body { font-family: var(--ui); font-size: calc(17px * var(--tam-texto)); -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; }
kbd { font-family: var(--ui); font-size: .8em; border: 1px solid #4a4f58; border-bottom-width: 2px; border-radius: 3px; padding: 0 .35em; margin: 0 .1em; color: var(--ambar2); background: #121418; }

#marco { position: fixed; inset: 0; display: grid; place-items: center; }
#juego { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; cursor: crosshair; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; height: auto; }

.btn { background: #16191e; border: 1px solid #3a3f47; color: var(--texto); padding: .45em 1.1em; font-size: 1.05em; letter-spacing: .04em; cursor: pointer; border-radius: 2px; transition: background .15s, border-color .15s, color .15s; }
.btn:hover, .btn:focus-visible { border-color: var(--ambar); color: #fff; outline: none; background: #1d2026; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-fuerte { border-color: var(--ambar); color: var(--ambar2); }
.btn-fuerte:hover { background: var(--ambar); color: #111; }

/* ------------------------------------------------------------ pantalla de entrada */
#inicio { position: fixed; inset: 0; background: #000; display: grid; place-items: center; z-index: 50; cursor: pointer; }
.inicio-caja { text-align: center; padding: 24px; animation: aparece 2.4s ease both; }
.inicio-tit { font-weight: 700; font-size: clamp(30px, 6vw, 54px); letter-spacing: .32em; color: var(--ambar2); margin: 0 0 .5em; text-indent: .32em; }
.inicio-caja p { color: var(--tenue); margin: .4em 0 1.2em; }
.inicio-nota { font-size: .85em; opacity: .6; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------ menú */
#menu { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.72) 70%); }
#menu[hidden], #final[hidden], #ventana[hidden] { display: none; }
.tablero-titulo { background: #0b0c0e; border: 2px solid #1d1f22; box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0,0,0,.8); padding: 10px 16px 16px; }
.tab-cab { display: flex; justify-content: space-between; gap: 40px; font-size: 13px; letter-spacing: .25em; color: var(--ambar); margin-bottom: 10px; }
.tablero-titulo .fila { display: flex; gap: 4px; justify-content: center; margin: 6px 0; }
.paleta { display: inline-grid; place-items: center; width: clamp(26px, 5.4vw, 52px); height: clamp(38px, 7.6vw, 72px); background: linear-gradient(#1c1d21 49%, #050506 49%, #050506 52%, #141518 52%); color: #f2ead2; font-weight: 700; font-size: clamp(24px, 5.2vw, 50px); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 #000; }
.paleta.gira { animation: gira .07s linear; }
.paleta.fija { color: var(--ambar2); }
@keyframes gira { 0% { transform: scaleY(1); } 50% { transform: scaleY(.2); } 100% { transform: scaleY(1); } }
.menu-sub { margin: 0; color: var(--tenue); letter-spacing: .08em; font-size: .95em; text-align: center; }
.menu-lista { display: flex; flex-direction: column; width: min(460px, 92vw); border-top: 1px solid #23262b; }
.menu-op { display: flex; justify-content: space-between; align-items: baseline; padding: .55em .8em; background: rgba(8,9,11,.82); border: 0; border-bottom: 1px solid #23262b; cursor: pointer; text-align: left; letter-spacing: .14em; font-size: 1.15em; }
.menu-op .x { font-size: .72em; color: var(--tenue); letter-spacing: .1em; }
.menu-op:hover, .menu-op:focus-visible { background: #16181c; outline: none; }
.menu-op:hover .n, .menu-op:focus-visible .n { color: var(--ambar2); }
.menu-op:disabled { opacity: .35; cursor: default; }
.menu-pie { color: #6f6e69; font-size: .85em; text-align: center; max-width: 520px; margin: 0; }

/* ------------------------------------------------------------ capa del juego */
#capa { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#capa.oculta > *:not(#tactil) { opacity: 0; }
#capa.oculta #tactil { display: none; }

#pensamiento { position: absolute; left: max(16px, 3vw); bottom: max(22px, 5vh); max-width: min(560px, 80vw); padding: 12px 18px 14px 16px; background: linear-gradient(90deg, rgba(4,5,7,.9), rgba(4,5,7,.6)); border-left: 2px solid var(--ambar); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
#pensamiento.visible { opacity: 1; transform: none; }
#pensamiento .quien, .quien { display: block; font-size: .72em; letter-spacing: .25em; color: var(--ambar); text-transform: uppercase; margin-bottom: 2px; }
#pensamiento .txt { font-family: var(--mano); font-size: calc(25px * var(--tam-texto)); line-height: 1.12; color: #ece6d6; }

#subtitulos { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(96px, 15vh); width: min(820px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sin-subtitulos #subtitulos { display: none; }
.sub { opacity: 0; transition: opacity .4s; padding: 4px 12px; background: rgba(0,0,0,.72); font-size: calc(21px * var(--tam-texto)); line-height: 1.25; }
.sub.visible { opacity: 1; }
.sub .etq { display: block; font-size: .55em; letter-spacing: .3em; color: var(--tenue); }
.sub-megafonia { color: var(--ambar2); text-transform: uppercase; letter-spacing: .08em; border-top: 1px solid rgba(232,200,96,.4); font-weight: 600; }
.sub-voz { color: #f2efe6; }
.sub-susurro { color: #a8a8a2; font-style: italic; background: transparent; font-size: calc(19px * var(--tam-texto)); }
.sub-grabacion, .sub-radio, .sub-telefono { font-family: var(--maquina); font-size: calc(18px * var(--tam-texto)); }
.sub-grabacion { color: #a8e0b4; }
.sub-grabacion .etq { color: #e05050; }
.sub-telefono { color: #d8d0f0; }
.sub-radio { color: #e8d0a0; }
.sub-acotacion { color: #8a8a84; font-style: italic; background: transparent; font-family: var(--maquina); font-size: calc(16px * var(--tam-texto)); }

#rotulos { position: absolute; top: max(14px, 3vh); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rot { font-family: var(--maquina); font-style: italic; font-size: calc(14px * var(--tam-texto)); color: #9a9890; background: rgba(0,0,0,.55); padding: 1px 8px; opacity: 0; transition: opacity .4s; }
.rot.visible { opacity: 1; }

#avisos { position: absolute; top: max(14px, 3vh); right: max(14px, 2vw); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.aviso { background: rgba(10,11,13,.88); border-left: 3px solid var(--ambar); padding: 5px 12px; font-size: .95em; letter-spacing: .04em; opacity: 0; transform: translateX(10px); transition: opacity .35s, transform .35s; }
.aviso.visible { opacity: 1; transform: none; }

#hud { position: absolute; right: max(14px, 2vw); bottom: max(14px, 3vh); display: flex; gap: 14px; align-items: center; font-size: .9em; }
#hud-rec { display: flex; align-items: center; gap: 5px; letter-spacing: .15em; color: #55524c; opacity: .6; }
#hud-rec .punto { width: 8px; height: 8px; border-radius: 50%; background: #3a1515; }
#hud-rec.cerca { color: #e8a0a0; opacity: 1; }
#hud-rec.cerca .punto { background: #ff3b30; box-shadow: 0 0 8px #ff3b30; animation: late 1.1s ease-in-out infinite; }
@keyframes late { 50% { opacity: .25; } }
#hud-bat { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .6s; color: #b8b4a8; }
#hud-bat.visible, #hud-bat.baja { opacity: 1; }
#hud-bat .pila { width: 34px; height: 13px; border: 1px solid #8a8780; border-radius: 2px; padding: 1px; position: relative; }
#hud-bat .pila::after { content: ''; position: absolute; right: -4px; top: 3px; width: 3px; height: 5px; background: #8a8780; }
#hud-bat .nivel { display: block; height: 100%; width: calc(var(--nivel, 1) * 100%); background: #cfd8e0; }
#hud-bat.baja .nivel { background: var(--rojo); animation: late .8s infinite; }
#hud-bat:not(.on) .nivel { background: #6a6a66; }
#hud-bat .cargas { color: var(--ambar); font-size: .85em; }

#vu { position: absolute; left: 50%; bottom: max(28px, 5vh); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.7); padding: 6px 12px; border: 1px solid #2a2a2a; opacity: 0; transition: opacity .3s; color: #9a9890; font-size: .85em; letter-spacing: .12em; }
#vu.visible { opacity: 1; }
#vu .esfera { width: 52px; height: 28px; border-radius: 52px 52px 0 0; background: #d8cfa8; position: relative; overflow: hidden; border: 1px solid #000; }
#vu .esfera::before { content: ''; position: absolute; right: 4px; top: 6px; width: 12px; height: 4px; background: #c0392b; transform: rotate(35deg); }
#vu .aguja { position: absolute; left: 50%; bottom: 0; width: 1px; height: 24px; background: #111; transform-origin: bottom center; transition: transform .08s; }

/* táctil */
#tactil { display: none; }
.tactil-on #tactil { display: block; pointer-events: none; }
.tb { pointer-events: auto; position: absolute; width: 64px; height: 64px; border-radius: 50%; background: rgba(20,22,26,.55); border: 1px solid rgba(255,255,255,.18); color: #ddd; font-size: 13px; letter-spacing: .08em; touch-action: none; }
.tb.activo { background: rgba(232,200,96,.35); }
.tb.izq { left: 12px; bottom: 66px; font-size: 20px; width: 56px; height: 56px; }
.tb.der { left: 124px; bottom: 66px; font-size: 20px; width: 56px; height: 56px; }
.tb.arr { left: 68px; bottom: 118px; font-size: 20px; width: 56px; height: 56px; }
.tb.aba { left: 68px; bottom: 14px; font-size: 20px; width: 56px; height: 56px; }
.tb.usar { right: 16px; bottom: 28px; width: 78px; height: 78px; border-color: rgba(232,200,96,.5); }
.tb.luz { right: 104px; bottom: 22px; }
.tb.rec { right: 22px; bottom: 116px; font-size: 10px; }
.tb.carga { right: 100px; bottom: 100px; font-size: 10px; width: 54px; height: 54px; }
.tb.mochila { right: 16px; top: 16px; width: 78px; height: 36px; border-radius: 4px; font-size: 12px; }
.tb.pausa { left: 16px; top: 16px; width: 40px; height: 36px; border-radius: 4px; }

/* ------------------------------------------------------------ ventanas */
.ventana { position: fixed; inset: 0; z-index: 20; background: rgba(2,3,4,.86); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(2px); }

/* documento */
.doc-caja { width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; }
.doc-cab { display: flex; justify-content: space-between; color: var(--tenue); font-size: .9em; letter-spacing: .1em; padding: 0 4px 6px; }
.doc-titulo { color: var(--ambar); text-transform: uppercase; }
.doc-scroll { overflow: auto; max-height: calc(100vh - 140px); padding: 6px 4px 18px; scrollbar-color: #3a3f47 transparent; }
.doc-pie { display: flex; justify-content: flex-end; padding-top: 10px; }

.papel { position: relative; margin: 0 auto; max-width: 660px; padding: 34px 40px 38px; color: #201d18; background: #e7dfc7; box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 0 70px rgba(120,90,40,.28); font-family: var(--maquina); font-size: calc(16px * var(--tam-texto)); line-height: 1.5; user-select: text; }
.papel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.18), transparent 50%), radial-gradient(ellipse at 85% 90%, rgba(110,80,30,.18), transparent 55%); }
.papel p { margin: 0 0 .9em; }
.papel h4 { margin: 0 0 .8em; font-size: 1.05em; letter-spacing: .06em; text-transform: uppercase; }
.papel table { border-collapse: collapse; width: 100%; margin: .4em 0 1em; font-size: .92em; }
.papel th, .papel td { border: 1px solid rgba(40,30,20,.45); padding: 3px 7px; text-align: left; vertical-align: top; }
.papel th { background: rgba(40,30,20,.1); font-weight: 700; }
.papel s { text-decoration-thickness: 2px; text-decoration-color: rgba(20,20,30,.85); }
.sello { display: inline-block; padding: 2px 10px; border: 3px double currentColor; color: rgba(150,30,30,.78); font-family: var(--ui); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(var(--giro, -3deg)); mix-blend-mode: multiply; }
.linea-sello { text-align: right; margin-top: 1.2em !important; }
.censura { display: inline-block; width: 7em; height: .95em; vertical-align: middle; background: #141414; }
.firma { font-family: var(--mano); font-size: 1.7em; color: #232a5a; display: inline-block; transform: rotate(-3deg); }
.linea-firma { text-align: right; }
.arrancada { height: 34px; margin: 10px -40px; background: linear-gradient(135deg, #e7dfc7 25%, transparent 25%) -10px 0, linear-gradient(225deg, #e7dfc7 25%, transparent 25%) -10px 0, #0d0f12; background-size: 20px 20px; opacity: .9; }
.ilegible { filter: blur(2.5px); opacity: .7; }
.mancha { display: inline-block; width: 3.4em; height: 1.3em; vertical-align: middle; border-radius: 50%; background: radial-gradient(circle, rgba(90,60,20,.55), rgba(90,60,20,.15) 70%, transparent); }
.alterado { font-family: var(--maquina); font-weight: 700; color: #3a0d0d; letter-spacing: .08em; border-top: 1px dashed rgba(60,20,20,.4); padding-top: .8em; }

.papel-mano { font-family: var(--mano); font-size: calc(25px * var(--tam-texto)); line-height: 1.32; color: #23285a; background-color: #ece6d2; background-image: linear-gradient(transparent 31px, rgba(80,110,160,.28) 32px); background-size: 100% 33px; padding-left: 64px; }
.papel-mano::after { content: ''; position: absolute; left: 46px; top: 0; bottom: 0; width: 1px; background: rgba(190,60,60,.4); }
.papel-mano h4 { font-family: var(--mano); text-transform: none; font-size: 1.1em; }
.papel-libreta { font-family: var(--mano); font-size: calc(24px * var(--tam-texto)); line-height: 1.3; color: #1f2758; background-color: #e9e6d8; background-image: linear-gradient(rgba(90,120,160,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(90,120,160,.18) 1px, transparent 1px); background-size: 22px 22px; }
.papel-libreta h4 { font-family: var(--mano); text-transform: none; font-size: 1.05em; color: #6a2020; border-bottom: 1px solid rgba(106,32,32,.3); display: inline-block; }
.papel-nota { max-width: 420px; font-family: var(--mano); font-size: calc(26px * var(--tam-texto)); line-height: 1.25; color: #1f2758; background: #ece2b4; transform: rotate(-1.2deg); }
.papel-telegrama { background: #e8d9a4; text-transform: uppercase; letter-spacing: .05em; }
.papel-telegrama p { background: rgba(255,255,255,.55); padding: 2px 8px; display: inline-block; }
.papel-telegrama h4 { font-family: var(--ui); letter-spacing: .3em; color: #5a3a10; }
.papel-formulario { background: #e6e1d0; }
.papel-formulario h4 { font-family: var(--ui); letter-spacing: .2em; border-bottom: 2px solid #3a3226; padding-bottom: 4px; }
.papel-placa { background: #1f2e36; color: #e6e0cc; font-family: var(--ui); font-size: calc(19px * var(--tam-texto)); border: 3px solid #0e1418; box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 0 0 2px #5a6a72; }
.papel-placa::before { background: radial-gradient(circle at 10px 10px, #8a9aa2 3px, transparent 4px), radial-gradient(circle at calc(100% - 10px) 10px, #8a9aa2 3px, transparent 4px), radial-gradient(circle at 10px calc(100% - 10px), #8a9aa2 3px, transparent 4px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #8a9aa2 3px, transparent 4px); }
.papel-placa th, .papel-placa td { border-color: rgba(230,224,204,.25); }
.papel-placa th { background: rgba(230,224,204,.08); }
.papel-placa .sello { color: rgba(232,200,96,.8); mix-blend-mode: normal; }
.papel-placa u { text-decoration-color: var(--ambar); }
.papel-moderno { background: #f3f1ec; color: #1c1c1c; font-family: var(--ui); font-size: calc(18px * var(--tam-texto)); box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.papel-moderno h4 { color: #b01010; letter-spacing: .1em; font-size: 1.4em; }
.papel-tarjeta { background: transparent; box-shadow: none; padding: 20px; }
.papel-tarjeta::before { display: none; }
.tarjeta-visita { max-width: 460px; margin: 0 auto; padding: 26px 30px; background: #f2eedf; box-shadow: 0 16px 40px rgba(0,0,0,.7); font-family: var(--prensa); }
.tarjeta-visita h4 { font-family: var(--prensa); letter-spacing: .15em; text-align: center; }
.papel-plano { background: #e2d7ad; font-size: calc(15px * var(--tam-texto)); }

/* periódico */
.papel-periodico { background: #ddd4ba; font-family: var(--prensa); font-size: calc(15px * var(--tam-texto)); line-height: 1.38; max-width: 720px; padding: 26px 30px 30px; }
.papel-periodico .cabecera { font-weight: 700; font-size: clamp(30px, 6vw, 48px); text-align: center; letter-spacing: .04em; border-bottom: 3px double #2a241a; line-height: 1.1; padding-bottom: 6px; }
.papel-periodico .sub-cabecera { display: flex; justify-content: space-between; font-size: .8em; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid #2a241a; padding: 3px 0; margin-bottom: 12px; }
.papel-periodico .columnas { column-count: 3; column-gap: 18px; column-rule: 1px solid rgba(42,36,26,.4); }
.papel-periodico .art { break-inside: avoid; margin-bottom: 14px; }
.papel-periodico .art h3 { font-size: 1.12em; margin: 0 0 4px; line-height: 1.15; }
.papel-periodico .art-grande { column-span: all; text-align: center; }
.papel-periodico .art-grande h3 { font-size: 1.8em; }
.papel-periodico .art-breve h3 { font-size: .95em; text-transform: uppercase; }
.papel-periodico h5 { margin: 0 0 6px; font-style: italic; font-weight: 400; }
.papel-periodico .censurado .hueco { height: 170px; border: 1px dashed rgba(42,36,26,.25); background: rgba(255,255,255,.12); }
.papel-periodico .anuncios { display: flex; flex-wrap: wrap; gap: 8px; border-top: 2px solid #2a241a; padding-top: 8px; margin-top: 6px; }
.papel-periodico .anuncio { flex: 1 1 140px; border: 1px solid #2a241a; padding: 6px 8px; font-size: .82em; text-align: center; }

/* inspección */
.insp-caja { width: min(780px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.insp-marco { position: relative; display: inline-block; box-shadow: 0 30px 80px rgba(0,0,0,.9); }
.insp-marco canvas { display: block; width: min(720px, 92vw); height: auto; }
.insp-detalles { position: absolute; inset: 0; }
.det { position: absolute; background: transparent; border: 1px dashed rgba(232,200,96,0); cursor: zoom-in; padding: 0; transition: border-color .2s; }
.det:hover, .det:focus-visible { border-color: rgba(232,200,96,.8); outline: none; }
.det.visto { border-color: rgba(232,200,96,.25); }
.insp-pista { position: absolute; right: 6px; bottom: -22px; font-size: .78em; color: var(--tenue); }
.insp-nombre { margin-top: 14px; letter-spacing: .2em; color: var(--ambar); text-transform: uppercase; font-size: .95em; }
.insp-texto { max-width: 640px; text-align: center; font-family: var(--mano); font-size: calc(24px * var(--tam-texto)); line-height: 1.2; color: #ece6d6; min-height: 2.4em; }
.insp-texto .quien { font-family: var(--ui); }

/* confirmación */
.conf-caja { width: min(520px, 100%); background: var(--panel); border: 1px solid var(--linea); padding: 26px; text-align: center; }
.conf-texto { font-family: var(--mano); font-size: calc(26px * var(--tam-texto)); margin: 0 0 18px; color: #ece6d6; }
.conf-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* pausa, opciones, créditos */
.pausa { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--linea); padding: 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.pausa h2 { margin: 0 0 4px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ambar2); font-size: 1.5em; }
.pausa h3 { margin: 14px 0 2px; font-size: .9em; letter-spacing: .25em; color: var(--tenue); text-transform: uppercase; }
.pausa-sala { margin: 0 0 8px; color: var(--tenue); }
.pausa .btn { text-align: left; }
.pausa p { margin: 0 0 8px; line-height: 1.4; }
.pausa .nota { color: var(--tenue); font-size: .9em; }
.controles table { border-collapse: collapse; width: 100%; font-size: .95em; }
.controles td { padding: 6px 6px; border-bottom: 1px solid #1f2328; vertical-align: top; }
.controles td:first-child { color: var(--tenue); width: 42%; }
.op-lista { display: flex; flex-direction: column; gap: 6px; }
.op { display: grid; grid-template-columns: 1fr 160px 48px; gap: 10px; align-items: center; }
.op output { color: var(--ambar); font-size: .9em; text-align: right; }
.op input[type=range] { accent-color: var(--ambar); width: 100%; }
.op-c { grid-template-columns: 22px 1fr; cursor: pointer; }
.op-c input { accent-color: var(--ambar); width: 18px; height: 18px; }
.creditos p { line-height: 1.5; }

/* mochila */
.inv { width: min(980px, 100%); height: min(620px, calc(100vh - 32px)); background: var(--panel); border: 1px solid var(--linea); display: flex; flex-direction: column; }
.inv-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--linea); }
.inv-tab { background: transparent; border: 0; border-right: 1px solid var(--linea); padding: 10px 16px; letter-spacing: .14em; text-transform: uppercase; font-size: .9em; color: var(--tenue); cursor: pointer; }
.inv-tab.activa { color: var(--ambar2); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--ambar); }
.inv-tab:hover { color: #fff; }
.inv-cerrar { margin-left: auto; border: 0; border-left: 1px solid var(--linea); }
.inv-cuerpo { flex: 1; overflow: auto; padding: 16px; display: flex; gap: 18px; }
.inv-izq { flex: 1 1 52%; display: flex; flex-direction: column; gap: 10px; }
.inv-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; align-content: start; }
.inv-celda { aspect-ratio: 1; background: #0a0b0d; border: 1px solid #22262c; display: grid; place-items: center; cursor: pointer; padding: 4px; }
.inv-celda canvas { width: 48px; height: 48px; }
.inv-celda.sel, .inv-celda:hover { border-color: var(--ambar); }
.inv-detalle { flex: 1 1 48%; display: flex; flex-direction: column; gap: 8px; }
.inv-detalle canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid #22262c; }
.inv-detalle h3 { margin: 4px 0 0; letter-spacing: .12em; color: var(--ambar2); font-size: 1.15em; }
.inv-detalle p { margin: 0; line-height: 1.45; }
.inv-detalle .alba { font-family: var(--mano); font-size: 1.35em; color: #e6dfcc; }
.inv-detalle .btn { align-self: flex-start; }
.inv-nota { color: var(--tenue); font-size: .88em; margin: 0; }
.inv-lista { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.inv-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; text-align: left; background: #0a0b0d; border: 1px solid #1f2328; padding: 8px 12px; cursor: pointer; }
.inv-fila:hover { border-color: var(--ambar); }
.inv-fila .f, .inv-fila .l { color: var(--tenue); font-size: .9em; }
.vacio { color: var(--tenue); }
.inv-grab { background: #0a0b0d; border: 1px solid #1f2328; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.inv-grab .t { color: var(--ambar2); letter-spacing: .08em; }
.inv-grab .l { color: var(--tenue); font-size: .85em; margin-left: 8px; }
.inv-grab .trans { font-family: var(--maquina); color: #a8e0b4; font-size: .85em; }
.inv-grab .trans p { margin: 0 0 2px; }
.inv-grab .btn { align-self: flex-start; }
.inv-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; width: 100%; align-content: start; }
.inv-foto { background: #0a0b0d; border: 1px solid #1f2328; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.inv-foto canvas { width: 100%; height: auto; }
.inv-foto:hover { border-color: var(--ambar); }
.cuaderno { flex: 1; max-width: 720px; margin: 0 auto; padding: 18px 26px; background-color: #e6e1cf; background-image: linear-gradient(rgba(90,120,160,.2) 1px, transparent 1px); background-size: 100% 30px; color: #232a5a; font-family: var(--mano); font-size: calc(22px * var(--tam-texto)); line-height: 30px; }
.cuaderno .entrada { margin-bottom: 18px; opacity: .72; }
.cuaderno .entrada.actual { opacity: 1; }
.cuaderno h4 { margin: 0; font-size: 1.1em; color: #6a2020; }
.cuaderno p { margin: 0; }
.plano { width: 100%; max-height: 100%; }
.plano line { stroke-width: 2; }
.plano .c-on { stroke: #6a6658; }
.plano .c-off { stroke: #2e2d29; stroke-dasharray: 4 4; }
.plano .sala rect { fill: #121418; stroke: #3a3f47; }
.plano .sala text { fill: #b8b4a8; font-family: var(--ui); font-size: 13px; letter-spacing: .03em; }
.plano .sala.novista rect { fill: #0b0c0e; stroke: #24272c; stroke-dasharray: 3 3; }
.plano .sala.novista text { fill: #5a5a56; }
.plano .sala.actual rect { stroke: var(--ambar); stroke-width: 2; }
.plano .aqui { fill: #ff3b30; }

/* puzles */
.puzle-caja { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--linea); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.puzle-caja h3 { margin: 0; letter-spacing: .25em; text-transform: uppercase; color: var(--ambar2); }
.pz-nota { margin: 0; color: #c8c4b8; line-height: 1.45; }
.pz-msg { margin: 0; min-height: 1.4em; font-family: var(--mano); font-size: calc(23px * var(--tam-texto)); color: #ece6d6; }
.pz-fila { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pz-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pz-etq { font-size: .8em; letter-spacing: .2em; color: var(--tenue); }
.rueda { display: flex; flex-direction: column; align-items: center; background: linear-gradient(#2a2418, #4a3e26 50%, #2a2418); border: 1px solid #000; border-radius: 4px; padding: 4px 6px; touch-action: none; }
.r-flecha { background: transparent; border: 0; color: #c8b070; cursor: pointer; padding: 2px 12px; font-size: 14px; }
.r-flecha:hover { color: #fff; }
.r-valor { font-family: var(--maquina); font-weight: 700; font-size: 34px; color: #f2e6c0; min-width: 1.4em; text-align: center; text-shadow: 0 1px 0 #000; }
.sacude { animation: sacude .35s; }
@keyframes sacude { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.fus-fila { gap: 10px; }
.fus { width: 112px; padding: 10px 6px; background: #121412; border: 1px solid #2a2e2a; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fus:hover { border-color: var(--ambar); }
.fus-luz { width: 9px; height: 9px; border-radius: 50%; background: #1a2a1a; }
.fus.vivo .fus-luz { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.fus-cuerpo { width: 22px; height: 56px; border: 2px dashed #3a3e3a; border-radius: 3px; }
.fus.puesto .fus-cuerpo { border: 0; background: linear-gradient(#8a8478 0 12%, #e8e2d0 12% 88%, #8a8478 88%); }
.fus-nombre { font-size: .8em; letter-spacing: .08em; color: #c8c4b8; }
.gen-mandos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.gen-ctl { background: #121416; border: 1px solid #2e3238; padding: 12px; cursor: pointer; letter-spacing: .05em; }
.gen-ctl:hover { border-color: var(--ambar); }
.gen-ctl.on { border-color: #5a7a5a; color: #c8f0c8; }
.pz-ruta { display: flex; gap: 8px; align-items: center; font-size: .95em; letter-spacing: .08em; color: #c8c4b8; }
.lamp { width: 11px; height: 11px; border-radius: 50%; background: #2a1a1a; border: 1px solid #000; }
.lamp.verde { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.palancas-banco { display: flex; gap: 8px; justify-content: center; padding: 18px 16px 10px; background: linear-gradient(#202422, #141615); border: 1px solid #000; border-radius: 3px; flex-wrap: wrap; }
.palanca { position: relative; width: 32px; height: 132px; background: transparent; border: 0; cursor: pointer; padding: 0; }
.palanca .mango { position: absolute; left: 12px; bottom: 26px; width: 9px; height: 96px; border-radius: 3px; transform-origin: bottom center; transform: rotate(-8deg); transition: transform .25s cubic-bezier(.4,1.6,.6,1); box-shadow: inset -2px 0 0 rgba(0,0,0,.35); }
.palanca .mango::before { content: ''; position: absolute; left: -3px; top: -6px; width: 15px; height: 9px; border-radius: 3px; background: #d8d2c0; }
.palanca.tirada .mango { transform: rotate(22deg); }
.p-roja .mango { background: #b3161b; } .p-negra .mango { background: #2a2a28; } .p-azul .mango { background: #1f43a0; } .p-blanca .mango { background: #d8d0b8; }
.palanca .num { position: absolute; left: 4px; right: 4px; bottom: 2px; background: #d8d0b8; color: #111; font-weight: 700; font-size: 13px; border-radius: 2px; }
.palanca .precinto { position: absolute; left: 11px; bottom: 26px; width: 11px; height: 11px; border-radius: 50%; background: #9a9a8a; box-shadow: inset 0 0 0 2px #6a6a5a; }
.palanca:hover .num { background: var(--ambar); }

/* ------------------------------------------------------------ tarjetas (intro y finales) */
#final { position: fixed; inset: 0; z-index: 40; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.tarjeta { max-width: 720px; opacity: 0; transition: opacity .9s; text-align: center; }
.tarjeta.visible { opacity: 1; }
.tarjeta p { font-family: var(--maquina); font-size: calc(21px * var(--tam-texto)); line-height: 1.6; color: #d8d4c8; margin: 0; }
.tarjeta.prensa { text-align: left; }
.tarjeta.prensa .papel { font-size: calc(17px * var(--tam-texto)); }
.tarjeta-pie { position: absolute; bottom: 22px; color: #45443f; font-size: .85em; letter-spacing: .15em; }
.tarjeta.nombres { max-height: 80vh; width: min(640px, 100%); }
.nombres-col { max-height: 76vh; overflow: hidden; display: flex; flex-direction: column; gap: 8px; mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); padding: 10vh 0; }
.nombres-col p { opacity: 0; transition: opacity 1.2s; display: flex; flex-direction: column; }
.nombres-col p.visible { opacity: 1; }
.nombres-col .nom { font-family: var(--ui); font-size: calc(23px * var(--tam-texto)); letter-spacing: .12em; text-transform: uppercase; color: #ece6d6; }
.nombres-col .nota { font-family: var(--mano); font-size: calc(21px * var(--tam-texto)); color: #b8b2a2; }
.fin { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; animation: aparece 2s ease both; }
.fin-pre { margin: 0; letter-spacing: .5em; color: var(--tenue); }
.fin h2 { margin: 0; font-size: clamp(30px, 6vw, 52px); letter-spacing: .12em; color: var(--ambar2); font-weight: 700; text-transform: uppercase; }
.fin-n { color: var(--tenue); margin: 0 0 14px; }
.intro .tarjeta p { color: #e2ded2; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; color: #ccc; }

@media (max-width: 720px) {
  .papel { padding: 22px 18px 26px; }
  .papel-mano { padding-left: 34px; }
  .papel-mano::after { left: 22px; }
  .papel-periodico .columnas { column-count: 1; }
  .inv-cuerpo { flex-direction: column; }
  .op { grid-template-columns: 1fr 110px 40px; }
  .gen-mandos { grid-template-columns: 1fr; }
  #subtitulos { bottom: 150px; }
  #pensamiento { bottom: 110px; }
  .tactil-on #hud { bottom: auto; top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .paleta.gira { animation: none; }
  * { transition-duration: .01s !important; }
}