@layer game {
/*
 * Escapista de patrones — consola táctica de PC, 1997–2002.
 * Todo el volumen viene de biseles, cortes duros y sombras desplazadas.
 * No hay blur, glass, degradados suaves ni bordes redondeados.
 */

@font-face {
  font-family: "Escapista Silk";
  src: url("./assets/Silkscreen-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body.game-mode {
  background-color: #FAFAF8 !important;
  background-image:
    repeating-linear-gradient(0deg, #FAFAF8 0 1px, #FAFAF8 1px 8px),
    repeating-linear-gradient(90deg, #FAFAF8 0 1px, transparent 1px 8px) !important;
  background-size: 8px 8px !important;
}

body.game-mode::before,
body.game-mode::after {
  display: none !important;
}

.esc {
  --void: #FAFAF8;
  --ink: #10150e;
  --coal: #20291f;
  --coal-hi: #35412f;
  --steel: #58634e;
  --steel-hi: #899071;
  --olive: #111111;
  --olive-hi: #5a5a5a;
  --dust: #d5ca92;
  --rust: #9c5336;
  --rust-hi: #cf7545;
  --signal: #2335C9;
  --signal-hi: #ffe28a;
  --blue: #3b718d;
  --blue-hi: #75a6b6;
  --danger: #b34935;
  --danger-hi: #e27752;
  --safe: #688957;
  --screen: #1a251a;
  --pixel: "Escapista Silk", "Geologica", ui-monospace, monospace;
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  overflow: hidden;
  color: var(--dust);
  font-family: var(--pixel);
  font-synthesis: none;
  background-color: #FAFAF8;
  background-image:
    repeating-linear-gradient(0deg, #263123 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, #263123 0 1px, transparent 1px 8px);
  background-size: 8px 8px;
}

.esc *,
.esc *::before,
.esc *::after {
  box-sizing: border-box;
  border-radius: 0;
}

.esc button,
.esc input {
  font: inherit;
}

.esc > * {
  position: relative;
  z-index: 1;
}

/* Marcos de chapa: luz arriba-izquierda, peso abajo-derecha. */
.esc-hud,
.esc-board-wrap,
.esc-card,
.esc-btn,
.esc-lvl-btn,
.esc-tab,
.esc-intro-enemy,
.esc-camera-readout,
.esc-corner-code,
.esc-status-line {
  border: 3px solid #090d09;
  border-top-color: #a6a77a;
  border-left-color: #a6a77a;
  border-right-color: #20291f;
  border-bottom-color: #20291f;
  box-shadow: 3px 3px 0 #111111;
}

/* HUD */
.esc-hud {
  flex: 0 0 auto;
  width: min(100%, 1120px);
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) repeat(5, minmax(4.7rem, 1fr)) minmax(6.8rem, 1.25fr) minmax(5.8rem, 1fr);
  overflow: hidden;
  border-color: #0b100a;
  background-color: #596348;
  background-image: repeating-linear-gradient(90deg, #667052 0 1px, transparent 1px 9px);
}

.esc-hud-field {
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 5px 8px;
  border-right: 2px solid #1a2319;
  border-bottom: 2px solid #1a2319;
  box-shadow: inset 1px 1px 0 #87906a;
}

.esc-hud-field.wide { min-width: 0; }
.esc-hud-field.stars { margin-left: 0; }

.esc-hud-label,
.esc-sheet-kind,
.esc-sheet-code {
  color: var(--ink-2);
  font: 500 var(--fs-label)/var(--lh-label) var(--f-text);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.esc-hud-value {
  overflow: hidden;
  color: #f1e9b2;
  font: 400 12px/1.1 var(--pixel);
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.esc-hud-field.wide .esc-hud-value,
.esc-card h2,
.esc-world-block h3,
.esc-intro-enemy .ie-name {
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.esc-hud-field.wide .esc-hud-value { color: var(--signal-hi); font-size: 13px; }
.esc-status.ok { color: #a9ca82; }
.esc-status.warn { color: #f1c260; }
.esc-status.bad { color: #ef8062; }
.esc-stars,
.esc-result-stars { display: inline-flex; align-items: center; gap: 2px; }
.esc-star {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #3d4735;
}

.esc-star::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  width: 3px;
  height: 3px;
  background: currentColor;
  box-shadow:
    -3px 3px 0 currentColor,
     3px 3px 0 currentColor,
    -6px 6px 0 currentColor,
    -3px 6px 0 currentColor,
     0 6px 0 currentColor,
     3px 6px 0 currentColor,
     6px 6px 0 currentColor,
    -3px 9px 0 currentColor,
     0 9px 0 currentColor,
     3px 9px 0 currentColor,
     0 12px 0 currentColor;
}

.esc-star.on { color: var(--signal); }

.esc-lock {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: #33402f;
}

.esc-lock::before {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 9px;
  border: 2px solid #11170e;
  background: currentColor;
  box-shadow: inset 2px 2px 0 #657158, 2px 2px 0 #11170e;
}

.esc-lock::after {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 9px;
  height: 8px;
  border: 3px solid currentColor;
  border-bottom: 0;
  box-shadow: -1px 0 0 #11170e, 1px 0 0 #11170e;
}

/* Escena: el canvas WebGL tiene siempre una lámina 16:10. */
.esc-stage {
  width: 100%;
  flex: 1 1 auto;
  min-height: 216px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.esc-board-wrap {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: auto;
  height: min(100%, 640px);
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-color: #0a0f0a;
  background-color: #303b2c;
  background-image:
    repeating-linear-gradient(0deg, #526048 0 2px, #3c4938 2px 10px),
    repeating-linear-gradient(90deg, #526048 0 2px, transparent 2px 10px);
  box-shadow: 5px 5px 0 #111111, 10px 10px 0 #1d261d;
}

.esc-board-wrap::before,
.esc-board-wrap::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.esc-board-wrap::before {
  inset: 0;
  border: 6px solid #0a0f0a;
  border-top-color: #a4a277;
  border-left-color: #a4a277;
  border-right-color: #151d15;
  border-bottom-color: #151d15;
}

.esc-board-wrap::after {
  inset: 6px;
  border-top: 2px solid #616c50;
  border-left: 2px solid #616c50;
  border-right: 2px solid #182018;
  border-bottom: 2px solid #182018;
}

.esc-canvas {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.esc-canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  background: #151d16;
  cursor: crosshair;
}

.esc-board-wrap.is-zoomed .esc-canvas { cursor: zoom-out; }

/* Lecturas de la cámara WebGL: siempre sólidas y por encima del canvas. */
.esc-camera-readout,
.esc-corner-code,
.esc-status-line {
  position: absolute;
  z-index: 5;
  min-height: 20px;
  padding: 4px 6px;
  border-width: 2px;
  background-color: #1c261b;
  color: #d9ce91;
  font: 400 8px/1.2 var(--pixel);
  letter-spacing: .07em;
  text-transform: uppercase;
  pointer-events: none;
}

.esc-camera-readout { top: 10px; left: 10px; color: #9dc1b0; }
.esc-corner-code { top: 10px; right: 10px; color: #dec46e; text-align: right; }
.esc-status-line { right: 10px; bottom: 10px; left: 10px; display: flex; align-items: center; justify-content: space-between; color: #d6d5a5; }
.esc-status-line b { width: 34px; height: 4px; background: repeating-linear-gradient(90deg, #6e9f68 0 4px, #263324 4px 6px); }
.esc-status-line.is-alert,
.esc-status-line.danger { color: #ffc38b; border-top-color: #d4764d; border-left-color: #d4764d; }
.esc-status-line.is-safe,
.esc-status-line.safe { color: #b6d394; border-top-color: #86aa68; border-left-color: #86aa68; }

/* Insignias pixeladas para las fichas de lectura, leyendas y modales. */
.esc-pixel-icon {
  --icon-main: #7a8265;
  --icon-light: #b6b78a;
  --icon-dark: #273126;
  position: relative;
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border: 2px solid #10150e;
  background-color: var(--icon-main);
  box-shadow: inset 2px 2px 0 var(--icon-light), inset -2px -2px 0 var(--icon-dark), 2px 2px 0 #0a0e09;
}

.esc-pixel-icon::before {
  content: "";
  width: 5px;
  height: 5px;
  background: #10150e;
  box-shadow: 4px 0 0 var(--icon-light), 0 4px 0 var(--icon-dark);
}

.esc-pixel-icon i {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  background: var(--icon-light);
}

.esc-pixel-icon i:nth-child(1) { top: 3px; right: 3px; }
.esc-pixel-icon i:nth-child(2) { right: 3px; bottom: 3px; background: var(--icon-dark); }
.esc-pixel-icon i:nth-child(3) { bottom: 3px; left: 3px; background: #11170e; }
.esc-pixel-icon i:nth-child(4) { top: 7px; left: 3px; background: var(--icon-light); }

.esc-pixel-icon--patrol,
.esc-pixel-icon.is-patrol,
.esc-pixel-icon.patrol,
.esc-pixel-icon[data-enemy="patrol"],
[data-enemy="patrol"] .esc-pixel-icon { --icon-main: #35799c; --icon-light: #84bfd1; --icon-dark: #21445c; }

.esc-pixel-icon--patrol i:nth-child(1),
.esc-pixel-icon.is-patrol i:nth-child(1) { top: 6px; right: 1px; width: 5px; height: 3px; }

.esc-pixel-icon--rotor,
.esc-pixel-icon.is-rotor,
.esc-pixel-icon.rotor,
.esc-pixel-icon[data-enemy="rotor"],
[data-enemy="rotor"] .esc-pixel-icon { --icon-main: #81729c; --icon-light: #b7a4d0; --icon-dark: #493d61; }

.esc-pixel-icon--rotor i:nth-child(1),
.esc-pixel-icon.is-rotor i:nth-child(1) { top: 1px; right: 7px; }
.esc-pixel-icon--rotor i:nth-child(2),
.esc-pixel-icon.is-rotor i:nth-child(2) { right: 1px; bottom: 7px; }

.esc-pixel-icon--mirror,
.esc-pixel-icon.is-mirror,
.esc-pixel-icon.mirror,
.esc-pixel-icon[data-enemy="mirror"],
[data-enemy="mirror"] .esc-pixel-icon { --icon-main: #9ba4a3; --icon-light: #d7e0d8; --icon-dark: #586565; }

.esc-pixel-icon--mirror i:nth-child(1),
.esc-pixel-icon.is-mirror i:nth-child(1) { top: 2px; right: 2px; width: 7px; height: 3px; }

.esc-pixel-icon--hunter,
.esc-pixel-icon.is-hunter,
.esc-pixel-icon.hunter,
.esc-pixel-icon[data-enemy="hunter"],
[data-enemy="hunter"] .esc-pixel-icon { --icon-main: #a54a36; --icon-light: #e37c56; --icon-dark: #57291f; }

.esc-pixel-icon--hunter i:nth-child(1),
.esc-pixel-icon.is-hunter i:nth-child(1) { top: 6px; right: 0; width: 6px; }

.esc-pixel-icon--bomb,
.esc-pixel-icon.is-bomb,
.esc-pixel-icon.bomb,
.esc-pixel-icon[data-enemy="bomb"],
[data-enemy="bomb"] .esc-pixel-icon { --icon-main: #b66d2c; --icon-light: #efaa55; --icon-dark: #633818; }

.esc-pixel-icon--bomb i:nth-child(1),
.esc-pixel-icon.is-bomb i:nth-child(1) { top: 0; right: 6px; height: 5px; background: #11170e; }

.esc-pixel-icon--player,
.esc-pixel-icon.is-player,
.esc-pixel-icon.player { --icon-main: #d3a63a; --icon-light: #ffe38a; --icon-dark: #73551a; }

.esc-pixel-icon--exit,
.esc-pixel-icon.is-exit,
.esc-pixel-icon.exit { --icon-main: #758455; --icon-light: #d6d47f; --icon-dark: #344127; }

/* Línea de control y botonera. */
.esc-hint-line {
  min-height: 16px;
  color: #c7c188;
  font: 400 8px/1.45 var(--pixel);
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
}

.esc-hint-line b { color: var(--signal-hi); font-weight: 400; }

.esc-gesture-tip {
  display: none;
  min-height: 15px;
  color: #bcb67e;
  font: 400 8px/1.35 var(--pixel);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.esc-gesture-tip span { color: var(--signal-hi); }
.esc-gesture-tip b { color: #6b7756; }

.esc-controls {
  width: min(100%, 1120px);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, auto)) minmax(9.5rem, 1fr);
  justify-content: center;
  gap: 6px;
}

.esc-btn,
.esc-lvl-btn,
.esc-tab {
  min-height: 38px;
  border-color: #0b100a;
  background-color: #687151;
  color: #11170e;
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.esc-btn {
  min-width: 0;
  padding: 7px 10px;
}

.esc-btn:hover,
.esc-btn:focus-visible,
.esc-lvl-btn:hover:not(:disabled),
.esc-lvl-btn:focus-visible,
.esc-tab:hover,
.esc-tab:focus-visible {
  outline: 2px solid #ffe28a;
  outline-offset: 2px;
  border-top-color: #f0dc85;
  border-left-color: #f0dc85;
  background-color: #a2a378;
  color: #10150e;
}

.esc-btn:active,
.esc-lvl-btn:active,
.esc-tab:active {
  transform: translate(3px, 3px);
  border-top-color: #273025;
  border-left-color: #273025;
  border-right-color: #90966c;
  border-bottom-color: #90966c;
  box-shadow: none;
}

.esc-btn:disabled,
.esc-lvl-btn:disabled { color: #394334; background: #4d5544; cursor: default; box-shadow: none; }
.esc-btn.primary { background-color: #c79a36; }
.esc-btn.primary:hover,
.esc-btn.primary:focus-visible { background-color: #e2bd55; }

.esc-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 7px;
  border: 2px solid #10150e;
  border-top-color: #85906a;
  border-left-color: #85906a;
  background: #303b2d;
  color: #d9d19a;
  font: 400 8px/1.2 var(--pixel);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.esc-toggle input { position: absolute; opacity: 0; }
.esc-switch {
  position: relative;
  width: 28px;
  height: 16px;
  border: 2px solid #10150e;
  background: #202a21;
  box-shadow: inset 1px 1px 0 #0a0e09;
}

.esc-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: #77815f;
  box-shadow: 1px 1px 0 #0b100a;
}

.esc-toggle input:checked + .esc-switch { background: #4e7445; }
.esc-toggle input:checked + .esc-switch::after { transform: translateX(12px); background: #e1c558; }
.esc-toggle:focus-within { outline: 2px solid #ffe28a; outline-offset: 2px; }

/* Modales, informes, selector de niveles. */
.esc-overlay {
  position: absolute;
  inset: 0;
  z-index: 40 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: auto;
  background: #0a0e0a;
}

.esc-overlay.show { display: flex; pointer-events: auto; }

.esc-card {
  width: min(36rem, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 14px;
  border-color: #0a0e0a;
  background-color: #717957;
  background-image: repeating-linear-gradient(0deg, #7c8460 0 1px, transparent 1px 7px);
  color: #11170e;
}

.esc-card h2 { margin: 0; color: #11170e; font-size: 18px; line-height: 1.1; }
.esc-card .esc-sub { margin: 0; color: #293427; font: 400 10px/1.55 var(--pixel); }
.esc-card .esc-sub b { color: #10150e; font-weight: 400; }
.esc-sheet { display: flex; flex-direction: column; gap: 8px; }
.esc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.esc-sheet-rule { height: 5px; background: repeating-linear-gradient(90deg, #1a2319 0 8px, #b5ad72 8px 12px); }
.esc-stamp-badge { padding: 3px 6px; border: 2px solid currentColor; font: 400 8px/1 var(--pixel); letter-spacing: .08em; }
.esc-stamp-badge.ok { color: #285d37; }
.esc-stamp-badge.bad { color: #8c3029; }
.esc-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 2px dotted #46543e; font: 400 10px/1.4 var(--pixel); }
.esc-field-row span { color: #3b4936; font-size: 8px; text-transform: uppercase; }
.esc-field-row.grade b { font-size: 20px; font-weight: 400; }
.esc-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.esc-card-actions .esc-btn { flex: 1 1 8.5rem; justify-content: center; }
.esc-worlds { display: flex; flex-direction: column; gap: 10px; }
.esc-world-block h3 { margin: 0 0 6px; font-size: 11px; }
.esc-world-block .esc-world-sub { color: #394735; font: 400 8px/1.35 var(--pixel); }
.esc-level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.esc-lvl-btn { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; font-size: 12px; }
.esc-lvl-btn.cleared { border-color: #315b39; }
.esc-lvl-btn.current { outline: 3px solid #ffe28a; outline-offset: 2px; }
.esc-lvl-btn .esc-mini-stars { display: flex; gap: 1px; height: 8px; }
.esc-lvl-btn .esc-mini-stars .esc-star { width: 9px; height: 9px; flex-basis: 9px; transform: scale(.6); transform-origin: top left; }
.esc-lvl-btn .esc-mini-stars { width: 18px; overflow: hidden; }
.esc-lvl-btn .esc-lock { transform: scale(.9); transform-origin: center; }
.esc-tabs { display: flex; gap: 6px; }
.esc-tab { flex: 1; min-height: 34px; padding: 7px; }
.esc-tab.active { background: #c89c38; }
.esc-intro-enemy { display: flex; align-items: center; gap: 9px; padding: 9px; background: #89916a; }
.esc-intro-enemy .esc-pixel-icon {
  flex-shrink: 0;
  margin: 9px;
  transform: scale(2);
  transform-origin: center;
}
.esc-intro-enemy .ie-name { font-size: 12px; }
.esc-intro-enemy .ie-hint { color: #2c3828; font: 400 9px/1.4 var(--pixel); }

.esc-webgl-failed {
  display: grid;
  place-items: center;
  background: #211b17;
}

.esc-render-error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(26rem, calc(100% - 28px));
  padding: 12px;
  border: 3px solid #0d100d;
  border-top-color: #cf764d;
  border-left-color: #cf764d;
  background: #5d3329;
  color: #ffe0a4;
  box-shadow: 4px 4px 0 #100d0b;
  font: 400 10px/1.5 var(--pixel);
  text-align: center;
}

.esc-render-error b { color: #ffe18a; font-weight: 400; }

.esc-board-wrap.shake { animation: esc-shake .3s steps(4, end); }
@keyframes esc-shake {
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, 2px); }
}
.esc-board-wrap.flash-win { outline: 4px solid #e4c25d; outline-offset: 3px; }

/* Tablet y móvil vertical: HUD breve, canvas 16:10 entero, botones grandes. */
@media (max-width: 768px) {
  .esc { gap: 4px; padding: 4px 0; }
  .esc-hud {
    width: 100%;
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(58px, 1fr));
  }
  .esc-hud-field { min-height: 42px; gap: 2px; padding: 3px 4px; }
  .esc-hud-field.wide { grid-column: auto; min-height: 42px; }
  .esc-hud-field:nth-child(2),
  .esc-hud-field:nth-child(3),
  .esc-hud-field:nth-child(7),
  .esc-hud-field.stars { display: none; }
  .esc-hud-label { font-size: 6px; letter-spacing: .06em; }
  .esc-hud-value { font-size: 9px; }
  .esc-hud-field.wide .esc-hud-value { font-size: 10px; }
  .esc-stage {
    min-height: 0;
    flex: 0 1 auto;
    aspect-ratio: 16 / 10;
    background-color: #20291f;
    background-image:
      repeating-linear-gradient(90deg, #c99c37 0 6px, #171e16 6px 12px),
      repeating-linear-gradient(0deg, #2a3527 0 1px, transparent 1px 8px),
      repeating-linear-gradient(90deg, #2a3527 0 1px, transparent 1px 8px);
    background-position: top, 0 0, 0 0;
    background-size: 100% 4px, 8px 8px, 8px 8px;
    background-repeat: no-repeat, repeat, repeat;
    box-shadow:
      inset 0 0 0 2px #090d09,
      inset 3px 3px 0 #4f5b45,
      inset -3px -3px 0 #111811;
  }
  .esc-board-wrap { width: auto; height: auto; min-width: 0; min-height: 0; padding: 0; }
  .esc-camera-readout,
  .esc-corner-code,
  .esc-status-line { min-height: 17px; padding: 3px 4px; border-width: 2px; font-size: 7px; }
  .esc-camera-readout { top: 8px; left: 8px; }
  .esc-corner-code { top: 8px; right: 8px; }
  .esc-status-line { right: 8px; bottom: 8px; left: 8px; }
  .esc-hint-line { display: none; }

  .esc-gesture-tip {
    width: 100%;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border: 2px solid #0a0e09;
    border-top-color: #697356;
    border-left-color: #697356;
    background: #20291f;
    box-shadow: 2px 2px 0 #FAFAF8;
    font-size: 7px;
  }

  .esc-controls {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(44px, auto));
    gap: 4px;
    padding: 4px;
    border: 2px solid #0a0e09;
    border-top-color: #7f8864;
    border-left-color: #7f8864;
    background: #20291f;
    box-shadow: 3px 3px 0 #FAFAF8;
  }
  .esc-controls > :nth-child(1) { grid-area: 1 / 1; }
  .esc-controls > :nth-child(2) { grid-area: 1 / 3; }
  .esc-controls > :nth-child(3) { grid-area: 1 / 2; }
  .esc-controls > :nth-child(4) { grid-area: 2 / 1; }
  .esc-controls > :nth-child(5) { grid-area: 2 / 2; }
  .esc-controls > :nth-child(6) { grid-area: 2 / 3; }
  .esc-controls > :nth-child(7) { grid-area: 2 / 4; }
  .esc-controls > :nth-child(8) { grid-area: 2 / 5; }
  .esc-controls > :nth-child(9) { grid-area: 1 / 4 / 2 / 6; }
  .esc-controls .esc-btn {
    min-height: 44px;
    padding: 5px 2px;
    font-size: 7px;
    line-height: 1.25;
    letter-spacing: 0;
  }
  .esc-controls #esc-levels { grid-column: 5; }
  .esc-controls .esc-toggle {
    min-height: 44px;
    gap: 3px;
    padding: 4px 2px;
    font-size: 0;
  }
  .esc-controls .esc-toggle::after {
    content: "RIESGO";
    font: 400 6px/1.15 var(--pixel);
    letter-spacing: 0;
  }
  .esc-switch { flex: 0 0 28px; }

  .esc-overlay {
    position: fixed;
    inset: 0;
    z-index: 200 !important;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .esc-card { width: 100%; max-height: 100%; min-height: 0; padding: 10px; gap: 9px; }
  .esc-card h2 { font-size: 15px; }
  .esc-card .esc-sub { font-size: 9px; }
  .esc-card-actions .esc-btn,
  .esc-tab { min-height: 44px; }
  .esc-tabs {
    position: sticky;
    top: -10px;
    z-index: 2;
    padding-block: 4px;
    background: #717957;
  }
  .esc-card-actions {
    position: sticky;
    bottom: -10px;
    z-index: 2;
    padding: 6px 0 2px;
    border-top: 2px solid #46543e;
    background: #717957;
  }
  .esc-level-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 7px; }
  .esc-lvl-btn { min-height: 48px; }
}

@media (min-width: 680px) and (max-width: 768px) and (min-height: 760px) {
  .esc-stage { min-height: 0; }
}

@media (max-width: 390px) {
  .esc-corner-code,
  .esc-status-line { display: none; }
  .esc-board-wrap { width: auto; }
  .esc-card-actions .esc-btn { min-width: 0; }
}

@media (max-width: 340px) {
  .esc { padding-inline: 0; }
  .esc-gesture-tip { font-size: 6px; }
  .esc-controls { border-inline: 0; }
  .esc-controls .esc-btn { padding-inline: 1px; font-size: 7px; }
  .esc-controls .esc-toggle::after { font-size: 6px; }
  .esc-card-actions { flex-direction: column; }
  .esc-card-actions .esc-btn { flex-basis: auto; width: 100%; }
}

@media (max-width: 390px) and (max-height: 620px) and (orientation: portrait) {
  .esc-hud-field,
  .esc-hud-field.wide { min-height: 38px; }
  .esc-stage { min-height: 0; }
  .esc-gesture-tip { display: none; }
}

/* Landscape bajo: se conserva un tablero físico de 320×200 y una sola botonera. */
@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  .esc {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(200px, 220px);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
    padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
  }
  .esc-hud {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  }
  .esc-hud-field.wide { grid-column: auto; }
  .esc-hud-field:nth-child(2),
  .esc-hud-field:nth-child(3),
  .esc-hud-field:nth-child(7),
  .esc-hud-field.stars { display: none; }
  .esc-hud-field { min-height: 28px; padding: 3px 4px; gap: 1px; }
  .esc-hud-label { font-size: 6px; }
  .esc-hud-value { font-size: 8px; }
  .esc-hud-field.wide .esc-hud-value { font-size: 9px; }
  .esc-stage {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    background-color: #20291f;
    background-image:
      repeating-linear-gradient(90deg, #c99c37 0 6px, #171e16 6px 12px),
      repeating-linear-gradient(0deg, #2a3527 0 1px, transparent 1px 8px),
      repeating-linear-gradient(90deg, #2a3527 0 1px, transparent 1px 8px);
    background-position: top, 0 0, 0 0;
    background-size: 100% 4px, 8px 8px, 8px 8px;
    background-repeat: no-repeat, repeat, repeat;
    box-shadow: inset 0 0 0 2px #090d09, inset 3px 3px 0 #4f5b45, inset -3px -3px 0 #111811;
  }
  .esc-board-wrap { width: auto; height: auto; min-width: 0; min-height: 0; padding: 0; }
  .esc-gesture-tip { display: none; }
  .esc-hint-line { display: none; }
  .esc-controls {
    grid-column: 2;
    grid-row: 2;
    align-content: center;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(44px, auto));
    gap: 3px;
    padding: 4px;
    border: 2px solid #0a0e09;
    border-top-color: #7f8864;
    border-left-color: #7f8864;
    background: #20291f;
    box-shadow: 3px 3px 0 #FAFAF8;
  }
  .esc-controls > :nth-child(1) { grid-area: 1 / 1; }
  .esc-controls > :nth-child(2) { grid-area: 1 / 3; }
  .esc-controls > :nth-child(3) { grid-area: 1 / 2; }
  .esc-controls > :nth-child(4) { grid-area: 2 / 1; }
  .esc-controls > :nth-child(5) { grid-area: 2 / 2; }
  .esc-controls > :nth-child(6) { grid-area: 2 / 3; }
  .esc-controls > :nth-child(7) { grid-area: 3 / 1; }
  .esc-controls > :nth-child(8) { grid-area: 3 / 2; }
  .esc-controls > :nth-child(9) { grid-area: 3 / 3; }
  .esc-controls .esc-btn { min-height: 44px; padding: 3px 2px; font-size: 7px; line-height: 1.2; }
  .esc-controls #esc-levels { grid-column: 2; }
  .esc-controls .esc-toggle { grid-column: 3; min-height: 44px; padding: 2px; font-size: 0; }
  .esc-controls .esc-toggle::after { font-size: 6px; }
  .esc-switch { width: 22px; height: 14px; flex-basis: 22px; transform: none; }
  .esc-overlay {
    position: fixed;
    inset: 0;
    z-index: 200 !important;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .esc-card { width: min(34rem, 100%); max-height: 100%; padding: 9px; }
}

.esc-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
  width: 100%;
}

.esc-controls > * {
  grid-area: auto !important;
  grid-column: auto !important;
}

.esc-controls .esc-btn,
.esc-controls .esc-toggle {
  min-height: var(--tap) !important;
  min-width: 0;
  padding: 0 var(--sp-2) !important;
  border: var(--rule) !important;
  background: transparent !important;
  color: var(--c-text) !important;
  box-shadow: none !important;
  font: 500 var(--fs-label)/var(--lh-label) var(--f-text) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: none !important;
}

.esc-controls .esc-switch,
.esc-controls .esc-toggle::after { display: none; content: none; }

.esc-controls .esc-btn.primary,
.esc-controls .esc-toggle:has(input:checked) {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-on-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .esc *,
  .esc *::before,
  .esc *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

}

#escapista-root { --ink-2: var(--c-text-2); }