/* ==========================================================================
   Dirección visual pixel art 16 bits (se carga la última).
   Tipografía autoalojada (OFL, en fonts/): «Press Start 2P» para títulos y cifras grandes,
   «Silkscreen» para botones, pestañas y etiquetas (las dos en su rejilla de 8 px: 8, 16, 24, 32,
   40 o 48 px) y «VT323» para los textos largos, con espaciado amplio. Esquinas a 0 px en todo,
   marcos biselados (luz arriba e izquierda, sombra abajo y derecha), botones arcade con sombra
   dura que se hunden al pulsarlos, barras segmentadas y gráficos sin suavizado (crispEdges y
   pixelated). Modo ligero al final.
   ========================================================================== */

@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323.woff") format("woff");
  font-display: swap;
}

html:root,
html[data-app]:root {
  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-arcade: "Silkscreen", ui-monospace, monospace;
  --font-term: "VT323", ui-monospace, Consolas, monospace;
  /* Las familias del resto de hojas pasan a las pixel. */
  --font-display: var(--font-pixel);
  --font-ui: var(--font-term);
  --font-mono: var(--font-term);
  --pixel-shadow: 6px 6px 0 #000;
  --bevel-hi: color-mix(in srgb, var(--cy-line, #4a5262) 45%, #ffffff);
  --bevel-lo: color-mix(in srgb, var(--cy-line, #4a5262) 35%, #000000);
  --bevel-inset: inset 2px 2px 0 rgba(255, 255, 255, 0.14), inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}

/* ---------- Reglas globales de nitidez y forma ---------- */

html[data-app] *,
html[data-app] *::before,
html[data-app] *::after {
  border-radius: 0 !important;
}

canvas,
img,
svg,
.fs-canvas,
.fs-bg,
.matrix-canvas,
.fx-canvas {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

svg,
svg * {
  shape-rendering: crispEdges;
}

/* Los textos SVG (fichas, cartas) van en fuente pixel, sin negritas sintéticas. */
svg text {
  font-synthesis: none;
}

.px-icon,
.tab-icon {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  overflow: visible;
}

/* ---------- Tipografía ---------- */

/* Textos largos, diálogos y descripciones: VT323 con espaciado amplio. font-size-adjust la iguala
   en tamaño aparente a una fuente normal sin tocar los rem del resto de la maqueta. */
html[data-app] body {
  font-family: var(--font-term);
  font-size-adjust: 0.52;
  letter-spacing: 0.04em;
  word-spacing: 0.14em;
  line-height: 1.35;
}

html[data-app] :is(input, select, textarea, button) {
  font-family: inherit;
}

/* Títulos y cifras grandes: Press Start 2P. */
html[data-app] :is(
  .cyber-title, .boot-logo, .cine-title, .zt-name, .access-floor, .cr-mult, .hud-value, .floor-num,
  .floor-door-num, .tower-floor-num, .dossier-title, .modal-head h2, .chest-title, .tele-title,
  .meter-value, .fs-boss, .slot-banner-text, .marquee-title, .float-text, .level-badge
) {
  font-family: var(--font-pixel);
  font-weight: normal;
  font-style: normal;
  font-size-adjust: none;
  font-synthesis: none;
  letter-spacing: 0;
  word-spacing: 0;
  -webkit-font-smoothing: none;
  text-transform: none;
}

/* Botones, pestañas, etiquetas y cifras pequeñas: Silkscreen. */
html[data-app] :is(
  .btn, .seg, .tab, .side-tab, .spin-button, .tab-floor, .brand-sub, .hud-label, .goal-label,
  .goal-text, .floor-name, .floor-range, .dossier-kicker, .level-rank, .mission-count, .cine-kicker,
  .zt-level, .access-name, .log-title, .log-speaker, .log-time, .log-dealer, .contract-title,
  .contract-reward, .contract-progress, .tele-label, .tele-subtitle, .modal-subtitle, .stats-title,
  .field-label, .seg-label, .bet-label, .bet-input, .meter-label, .arcade-stats dt, .arcade-stats dd,
  .recent-item, .unlock-game, .tower-floor-name, .stat dt, .achievement-name, .volume-label,
  .volume-value, .cr-state, .tw-tile, .relic-name, .relic-rarity, .vault-chest-name, .potion-badge,
  .sticky-count, .audio-state, .audio-name
) {
  font-family: var(--font-arcade);
  font-weight: normal;
  font-style: normal;
  font-size-adjust: none;
  font-synthesis: none;
  letter-spacing: 0;
  word-spacing: 0;
  -webkit-font-smoothing: none;
}

/* Escala 8 px: etiquetas y metadatos (en mayúsculas). */
html[data-app] :is(
  .brand-sub, .hud-label, .goal-label, .goal-text, .floor-range, .dossier-kicker, .level-badge,
  .level-rank, .mission-count, .tab-floor, .access-name, .log-speaker,
  .log-time, .contract-title, .contract-progress, .tele-label, .stats-title, .field-label,
  .seg-label, .bet-label, .meter-label, .arcade-stats dt, .recent-item, .btn-small, .stat dt,
  .volume-label, .cr-state, .relic-rarity
) {
  font-size: 8px;
  line-height: 16px;
  text-transform: uppercase;
}

/* Escala 16 px: cifras, nombres, pestañas y botones. */
html[data-app] :is(
  .hud-value, .floor-name, .floor-num, .floor-door-num, .dossier-title, .tab, .side-tab, .btn,
  .seg, .spin-button, .log-title, .log-dealer, .contract-reward, .tele-title, .tele-subtitle,
  .modal-head h2, .chest-title, .modal-subtitle, .bet-input, .meter-value, .marquee-title,
  .arcade-stats dd, .fs-boss, .unlock-game, .tower-floor-num, .tower-floor-name, .achievement-name,
  .volume-value, .float-text, .tw-tile, .relic-name, .vault-chest-name, .potion-badge, .audio-name,
  .audio-state, .cine-kicker, .zt-level
) {
  font-size: 16px;
  line-height: 24px;
}

html[data-app] .hud-stat-dim .hud-value {
  font-size: 16px;
}

/* Escala grande: marca, cinemáticas y el multiplicador arcade del Crash. */
html[data-app] .cyber-title {
  font-size: 24px;
  line-height: 32px;
}

html[data-app] :is(.cine-title, .zt-name, .access-floor) {
  font-size: 32px;
  line-height: 40px;
}

html[data-app] .slot-banner-text {
  font-size: 24px;
  line-height: 32px;
}

html[data-app] .cr-mult {
  font-size: 48px;
  line-height: 56px;
  color: var(--cy-ink);
  text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}

html[data-app] .cr-stage[data-state="flying"] .cr-mult {
  color: #ffe14a;
  animation: cr-mult-blink 0.5s steps(1) infinite;
}

html[data-app] .cr-stage.is-cashed .cr-mult {
  color: var(--cy-ok);
  animation: none;
}

html[data-app] .cr-stage.is-crashed .cr-mult {
  color: var(--cy-danger);
  animation: cr-mult-shake 0.12s steps(2) 6;
}

@keyframes cr-mult-blink {
  50% { opacity: 0.7; }
}

@keyframes cr-mult-shake {
  0% { transform: translate(-4px, 0); }
  100% { transform: translate(4px, 0); }
}

html[data-app] .cine-title span {
  font-style: normal;
}

/* Textos largos con más aire. */
html[data-app] :is(.log-text, .cine-text, .zt-desc, .dossier-sub, .tower-floor-desc, .tower-floor-meta, .modal-text, .contract-text, .ticker-text, .achievement-desc, .throne-owner, .hall, .rule, .hint) {
  font-family: var(--font-term);
  letter-spacing: 0.05em;
  word-spacing: 0.18em;
  line-height: 1.4;
}

/* Sombras de texto: duras de 2 px (ni halos ni desenfoques). */
html[data-app] :is(.cyber-title, .hud-value, .dossier-title, .cine-title, .zt-name, .access-floor, .log-title, .tele-title, .neon-sign, .neon-sign span, .slot-banner-text) {
  text-shadow: 2px 2px 0 #000;
}

/* Título del epílogo: oro sólido (un degradado recortado sobre la fuente pixel se ve ruidoso). */
html[data-app] .cinematic-finale .cine-title {
  background: none;
  color: #e3bd5a;
  -webkit-text-fill-color: currentColor;
  filter: none;
  animation: none;
}

html[data-app] .floor-widget .floor-name {
  max-width: none;
}

/* ---------- Marcos biselados (luz arriba e izquierda, sombra abajo y derecha) ---------- */

html[data-app] :is(
  .panel, .modal, .arcade-stage, .arcade-controls, .fish-stage, .telemetry, .log-panel,
  .tower-floor, .toast, .contract, .slot-cabinet, .vp-machine, .wh-stage, .zt-card, .terminal,
  .paytable, .stage, .access-card, .relic-card, .vault-chest, .hud-stat, .goal
) {
  border-style: solid;
  border-width: 4px;
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  box-shadow: var(--bevel-inset), var(--pixel-shadow);
}

html[data-app] :is(.hud-stat, .goal, .contract, .relic-card, .toast) {
  border-width: 2px;
  box-shadow: var(--bevel-inset), 4px 4px 0 #000;
}

/* Casillas de juego (minas, torres, slots y tapete de la ruleta): bloques biselados. */
html[data-app] :is(.mn-cell, .tw-tile, .slot-cell, .rb-spot, .rt-cell, .bet-spot) {
  border-style: solid;
  border-width: 2px;
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  box-shadow: var(--bevel-inset);
}

html[data-app] :is(.mn-cell, .tw-tile) {
  background: var(--cy-panel-2);
}

html[data-app] .mn-cell[data-state="gem"] {
  border-color: var(--cy-ok) #0d5a32 #0d5a32 var(--cy-ok);
  background: #0e3a24;
}

html[data-app] .mn-cell[data-state="boom"] {
  border-color: var(--cy-danger) #5a0010 #5a0010 var(--cy-danger);
  background: #2a0008;
}

html[data-app] :is(.mn-grid.is-live .mn-cell[data-state="hidden"], .tw-tile):hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: var(--bevel-inset), 2px 2px 0 #000;
}

html[data-app] .tw-icon {
  width: 24px;
  height: 24px;
}

html[data-app] .tw-tile[data-state="safe"] .tw-icon {
  color: #3dff9a;
}

html[data-app] .tw-tile[data-state="trap"] .tw-icon {
  color: var(--cy-danger);
}

/* ---------- Botones arcade ---------- */

html[data-app] :is(.btn, .seg, .spin-button, .floor-door, .relic-slot, .btn-career, .btn-dossier) {
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.25), inset -3px -3px 0 rgba(0, 0, 0, 0.35), 4px 4px 0 #000;
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2), background-color 0.12s, color 0.12s;
}

/* Fondo plano: sin degradados en los controles. */
html[data-app] .btn {
  background: var(--cy-panel-2);
}

html[data-app] .btn-primary {
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
}

html[data-app] .btn-gold {
  background: var(--cy-panel-2);
  color: var(--cy-accent-2);
}

html[data-app] .btn-buy {
  background: #5b1d8c;
  color: #f5e8ff;
}

html[data-app] :is(.btn, .seg, .spin-button, .floor-door, .relic-slot, .btn-career, .btn-dossier):not(:disabled):hover {
  transform: translate(-1px, -1px);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.3), inset -3px -3px 0 rgba(0, 0, 0, 0.35), 5px 5px 0 #000;
}

html[data-app] :is(.btn, .seg, .spin-button, .floor-door, .relic-slot, .btn-career, .btn-dossier, .tab, .side-tab):not(:disabled):active {
  transform: translate(2px, 2px);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.3), inset -3px -3px 0 rgba(255, 255, 255, 0.12), 2px 2px 0 #000;
}

html[data-app] :is(.btn-primary, .btn-gold, .seg[aria-pressed="true"], .floor-door.is-current, .btn-toggle-icon[aria-pressed="true"], .fs-toggle[aria-pressed="true"]) {
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.4), inset -3px -3px 0 rgba(0, 0, 0, 0.3), 4px 4px 0 #000;
}

html[data-app] :is(.tab, .side-tab) {
  border-width: 3px;
  border-style: solid;
  border-color: #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.18), inset -2px -2px 0 rgba(0, 0, 0, 0.35);
}

html[data-app] :is(.tab, .side-tab)[aria-selected="true"] {
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 4px 0 var(--cy-accent);
}

html[data-app] .tab .tab-icon {
  width: 24px;
  height: 24px;
}

html[data-app] :is(.btn, .seg, .tab, .floor-door, .relic-slot, .side-tab, input, select):focus-visible {
  outline: 2px dashed var(--cy-accent-2);
  outline-offset: 4px;
}

/* Las fichas siguen siendo fichas: su silueta la pone el sprite pixel, no el botón. */
html[data-app] .chip-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-app] .chip-btn:not(:disabled):active {
  transform: translate(2px, 2px);
}

/* ---------- Barras de estado segmentadas (la máscara va en la pista: los segmentos no se
   estiran al animar el relleno) ---------- */

html[data-app] :is(.goal-track, .xp-track, .abundance-track, .contract-bar, .tower-floor-progress, .xp-bar-lg, .mission-track) {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
}

html[data-app] :is(.goal-track, .xp-track, .contract-bar, .tower-floor-progress, .mission-track) {
  height: 8px;
}

html[data-app] .goal-marks i {
  border-right-width: 2px;
}

/* ---------- Fondo con tramado y cabecera ---------- */

html[data-app] .game-shell {
  background-image: repeating-conic-gradient(rgba(255, 255, 255, 0.022) 0% 25%, transparent 0% 50%);
  background-size: 4px 4px;
}

html[data-app] .topbar {
  border-bottom: 4px solid var(--bevel-lo);
  box-shadow: inset 0 -2px 0 var(--bevel-hi);
}

html[data-app] .cyber-logo {
  box-shadow: 4px 4px 0 #000;
}

html[data-app] .floor-num {
  min-width: 40px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}

/* Piso actual: cursor de terminal que parpadea bajo el número. */
html[data-app] .floor-door.is-current::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 4px;
  left: 6px;
  height: 2px;
  background: currentColor;
  animation: pixel-blink 1.2s steps(1) infinite;
}

@keyframes pixel-blink {
  50% { opacity: 0; }
}

/* ---------- Retratos, reliquias, cofre y tarjeta de acceso ---------- */

html[data-app] .npc-portrait {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -4px;
}

html[data-app] .npc-portrait-lg {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  border: 2px solid #000;
  background: #0b0d14;
  box-shadow: 2px 2px 0 #000;
}

html[data-app] .log-dealer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html[data-app] .zt-portrait {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  border: 4px solid #000;
  background: #0b0d14;
  box-shadow: 4px 4px 0 #000;
}

html[data-app] .relic-icon .px-icon {
  width: 32px;
  height: 32px;
}

html[data-app] .relic-slot-icon .px-icon {
  width: 24px;
  height: 24px;
}

html[data-app] .access-chip {
  width: 48px;
  height: 48px;
  background: none;
  box-shadow: none;
}

html[data-app] .chest {
  width: 144px;
  height: 120px;
}

html[data-app] :is(.chest-lid, .chest-body) {
  width: 144px;
  border: 0;
  background: none;
  box-shadow: none;
}

html[data-app] .chest-lid {
  height: 48px;
}

html[data-app] .chest-body {
  height: 66px;
}

html[data-app] .chest.is-open .chest-lid {
  transform: translateY(-24px);
  transition: transform 0.3s steps(4);
}

html[data-app] .chest-legendary :is(.chest-lid, .chest-body) {
  filter: hue-rotate(250deg) saturate(1.4);
}

html[data-app] .chest-glow {
  background: repeating-conic-gradient(rgba(255, 240, 180, 0.55) 0deg 15deg, transparent 15deg 30deg);
}

html[data-app] :is(.potion-badge, .sticky-lock, .floor-door-lock) {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ---------- Avisos y cinemáticas ---------- */

html[data-app] .toast {
  animation: toast-pixel-in 0.24s steps(4);
}

@keyframes toast-pixel-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

html[data-app] .zt-card {
  padding: 24px 28px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: var(--bevel-inset), 8px 8px 0 #000;
}

html[data-app] .cinematic::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 4px);
}

/* ---------- Sonido: silencio, volumen y diálogo de ajustes ---------- */

.sound-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.volume-range {
  width: 96px;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.volume-range::-webkit-slider-runnable-track {
  height: 8px;
  border: 2px solid #000;
  background: repeating-linear-gradient(90deg, var(--cy-line) 0 6px, rgba(0, 0, 0, 0.5) 6px 8px);
}

.volume-range::-moz-range-track {
  height: 4px;
  border: 2px solid #000;
  background: repeating-linear-gradient(90deg, var(--cy-line) 0 6px, rgba(0, 0, 0, 0.5) 6px 8px);
}

.volume-range::-webkit-slider-thumb {
  width: 12px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid #000;
  background: var(--cy-accent);
  box-shadow: 2px 2px 0 #000;
  -webkit-appearance: none;
  appearance: none;
}

.volume-range::-moz-range-thumb {
  width: 10px;
  height: 14px;
  border: 2px solid #000;
  border-radius: 0;
  background: var(--cy-accent);
}

.volume-range.is-muted {
  opacity: 0.45;
}

.btn-mute.is-muted {
  border-color: var(--cy-danger);
  color: var(--cy-danger);
}

.settings-dialog {
  width: min(94vw, 560px);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

html[data-app] .settings-dialog :is(.audio-text, .btn-toggle-text) {
  display: inline;
}

.settings-dialog .btn-audio {
  justify-content: flex-start;
  gap: 10px;
}

.volume-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.volume-field .volume-range {
  width: 100%;
}

/* ---------- Teléfono ---------- */

@media (max-width: 720px) {
  html[data-app] .cyber-title {
    font-size: 16px;
    line-height: 24px;
  }

  html[data-app] :is(.floor-name, .dossier-title, .tab, .btn, .seg, .hud-value, .hud-stat-dim .hud-value) {
    font-size: 16px;
  }

  html[data-app] body .floor-widget .floor-name {
    max-width: 100%;
    font-size: 8px;
    line-height: 16px;
  }

  html[data-app] :is(.cine-title, .zt-name, .access-floor) {
    font-size: 24px;
    line-height: 32px;
  }

  html[data-app] .cr-mult {
    font-size: 32px;
    line-height: 40px;
  }

  html[data-app] .slot-banner-text {
    font-size: 16px;
    line-height: 24px;
  }

  /* En la cabecera del teléfono el volumen se regula en Ajustes; aquí queda el silencio. */
  html[data-app] .hud .volume-range {
    display: none;
  }

  html[data-app] .hud .sound-group,
  html[data-app] .hud #btn-settings {
    order: 9;
    grid-column: span 1;
  }

  html[data-app] .hud .sound-group .btn {
    width: 100%;
  }
}

/* ---------- Sala Arcade, récords y Núcleo ---------- */

html[data-app] :is(.trophy-name, .shop-name, .daily-text, .hof-initials, .hof-score, .hof-rank, .trophy-toast .trophy-name) {
  font-family: var(--font-arcade);
  font-size-adjust: none;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}

html[data-app] :is(.trophy-count, .trophy-toast-kicker, .daily-date) {
  font-family: var(--font-arcade);
  font-size-adjust: none;
  font-size: 8px;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
}

html[data-app] :is(.daily-name, .boss-title, #boss-score) {
  font-family: var(--font-pixel);
  font-size-adjust: none;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}

html[data-app] .initial-char {
  font-family: var(--font-pixel);
  font-size-adjust: none;
  font-size: 32px;
  line-height: 40px;
}

@media (max-width: 720px) {
  html[data-app] .boss-title {
    font-size: 8px;
    line-height: 16px;
  }
}

/* ---------- Modo ligero: ambiente estático y menos capas animadas ---------- */

html.is-lite .floor-scenery {
  display: none;
}

html.is-lite :is(.glitch, .neon-sign, .cinematic-finale .cine-title, .cine-rain, .floor-door.is-new::after, .relic-slots.has-chests::after, .fs-boss, .cr-mult) {
  animation: none;
}

html.is-lite .glitch::before,
html.is-lite .glitch::after {
  display: none;
}