/* ==========================================================================
   Cripto-Casino y menú principal: fondo del tema, lluvia Matrix, scanlines CRT, menú,
   cabecera cyber (nivel, reliquias, turbo, terminal), telemetría provably fair y diálogos
   (carrera y misiones, bóveda de reliquias, cofres y verificador).
   ========================================================================== */

html[data-app] body,
html[data-mode="menu"] body {
  background-color: var(--cy-bg);
  background-image: radial-gradient(1100px 600px at 50% -10%, var(--ambient-top) 0% 15%, color-mix(in srgb, transparent 33%, var(--ambient-top)) 15% 30%, color-mix(in srgb, transparent 67%, var(--ambient-top)) 30% 45%, transparent 45% 60%, transparent 60%),
    radial-gradient(900px 700px at 100% 100%, var(--ambient-corner) 0% 15%, color-mix(in srgb, transparent 33%, var(--ambient-corner)) 15% 30%, color-mix(in srgb, transparent 67%, var(--ambient-corner)) 30% 45%, transparent 45% 60%, transparent 60%),
    linear-gradient(180deg, var(--cy-bg-2) 0% 25%, color-mix(in srgb, var(--cy-bg) 33%, var(--cy-bg-2)) 25% 50%, color-mix(in srgb, var(--cy-bg) 67%, var(--cy-bg-2)) 50% 75%, var(--cy-bg) 75% 100%, var(--cy-bg) 100%);
  color: var(--cy-ink);
}

.matrix-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.16;
  pointer-events: none;
}

.game-shell,
.main-menu {
  position: relative;
  z-index: 1;
}

/* Scanlines CRT: una rejilla fija sobre todo (sin animar). */
.crt-overlay {
  display: none;
}

html.has-crt .crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62% 71.5%, color-mix(in srgb, rgba(0, 0, 0, 0.45) 33%, transparent) 71.5% 81%, color-mix(in srgb, rgba(0, 0, 0, 0.45) 67%, transparent) 81% 90.5%, rgba(0, 0, 0, 0.45) 90.5% 100%, rgba(0, 0, 0, 0.45) 100%);
  opacity: 0.5;
}

/* ---------- Menú principal ---------- */

.main-menu {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) var(--gutter) 36px;
  font-family: var(--font-mono);
}

.menu-inner {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(1000px, 100%);
  text-align: center;
}

.menu-kicker {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cy-dim);
}

.menu-title {
  margin: 0;
  font-size: clamp(2.4rem, 10vw, 5.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--cy-accent);
  text-shadow: none;
}

.menu-sub {
  margin: 0 0 8px;
  color: var(--cy-dim);
}

.menu-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.menu-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: var(--cy-panel);
  text-align: left;
  box-shadow: 0 22px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
}

.menu-card:hover,
.menu-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--cy-accent);
  box-shadow: 0 0 0 2px var(--cy-accent), 0 26px 0 rgba(0, 0, 0, 0.6);
}

.menu-card-story {
  border-color: rgba(212, 175, 55, 0.45);
  background: radial-gradient(420px 220px at 0% 0%, rgba(193, 18, 31, 0.22) 0% 17.5%, color-mix(in srgb, transparent 33%, rgba(193, 18, 31, 0.22)) 17.5% 35%, color-mix(in srgb, transparent 67%, rgba(193, 18, 31, 0.22)) 35% 52.5%, transparent 52.5% 70%, transparent 70%),
    linear-gradient(180deg, rgba(22, 16, 8, 0.94) 0% 25%, color-mix(in srgb, rgba(8, 6, 4, 0.94) 33%, rgba(22, 16, 8, 0.94)) 25% 50%, color-mix(in srgb, rgba(8, 6, 4, 0.94) 67%, rgba(22, 16, 8, 0.94)) 50% 75%, rgba(8, 6, 4, 0.94) 75% 100%, rgba(8, 6, 4, 0.94) 100%);
}

.menu-card-story:hover,
.menu-card-story:focus-within {
  border-color: #d4af37;
  box-shadow: 0 0 0 2px #d4af37, 0 26px 0 rgba(0, 0, 0, 0.6);
}

.menu-card-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cy-dim);
}

.menu-card-title {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--cy-accent);
}

.menu-card-story .menu-card-title {
  font-family: var(--font-display);
  background: linear-gradient(180deg, #fff3b0 0% 11.25%, color-mix(in srgb, #f2c94c 33%, #fff3b0) 11.25% 22.5%, color-mix(in srgb, #f2c94c 67%, #fff3b0) 22.5% 33.75%, #f2c94c 33.75% 45%, #f2c94c 45% 58.75%, color-mix(in srgb, #b5851b 33%, #f2c94c) 58.75% 72.5%, color-mix(in srgb, #b5851b 67%, #f2c94c) 72.5% 86.25%, #b5851b 86.25% 100%, #b5851b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.menu-card-text {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--cy-dim);
  line-height: 1.5;
}

.menu-card-story .menu-card-text {
  color: #d9ccb0;
}

.menu-save {
  min-height: 1.4em;
  margin: 0;
  font-size: 0.82rem;
  color: var(--cy-accent-2);
}

.menu-card-story .menu-save {
  color: #f7e08a;
}

.menu-play {
  width: 100%;
  margin-top: 6px;
}

.menu-card-free .menu-play {
  border-color: var(--cy-accent);
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
  box-shadow: none;
}

.menu-foot {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--cy-mute);
}

/* ---------- Botones y controles con el tema cyber ---------- */

html[data-app] .btn {
  border-color: var(--cy-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0% 25%, color-mix(in srgb, rgba(0, 0, 0, 0.35) 33%, rgba(255, 255, 255, 0.06)) 25% 50%, color-mix(in srgb, rgba(0, 0, 0, 0.35) 67%, rgba(255, 255, 255, 0.06)) 50% 75%, rgba(0, 0, 0, 0.35) 75% 100%, rgba(0, 0, 0, 0.35) 100%), var(--cy-panel-2);
  color: var(--cy-ink);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

html[data-app] .btn-primary {
  border-color: var(--cy-accent);
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

html[data-app] .btn-gold {
  border-color: var(--cy-accent-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0% 25%, color-mix(in srgb, rgba(0, 0, 0, 0.4) 33%, rgba(255, 255, 255, 0.08)) 25% 50%, color-mix(in srgb, rgba(0, 0, 0, 0.4) 67%, rgba(255, 255, 255, 0.08)) 50% 75%, rgba(0, 0, 0, 0.4) 75% 100%, rgba(0, 0, 0, 0.4) 100%), var(--cy-panel-2);
  color: var(--cy-accent-2);
}

html[data-app] .btn-action {
  border-color: var(--cy-line);
}

html[data-app] .btn-buy {
  border-color: #b566ff;
  background: linear-gradient(180deg, #5b1d8c 0% 25%, color-mix(in srgb, #2a0b45 33%, #5b1d8c) 25% 50%, color-mix(in srgb, #2a0b45 67%, #5b1d8c) 50% 75%, #2a0b45 75% 100%, #2a0b45 100%);
  color: #f5e8ff;
}

html[data-app] .seg[aria-pressed="true"],
html[data-app] .seg-radio input:checked + span {
  border-color: var(--cy-accent);
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
}

html[data-app] .modal {
  border-color: var(--cy-line);
  background: linear-gradient(180deg, var(--cy-panel-2) 0% 25%, color-mix(in srgb, var(--cy-bg) 33%, var(--cy-panel-2)) 25% 50%, color-mix(in srgb, var(--cy-bg) 67%, var(--cy-panel-2)) 50% 75%, var(--cy-bg) 75% 100%, var(--cy-bg) 100%);
  color: var(--cy-ink);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 30px 0 rgba(0, 0, 0, 0.8);
}

html[data-app] .modal-head h2 {
  font-family: var(--font-mono);
  background: none;
  color: var(--cy-accent);
  text-shadow: none;
}

html[data-app] .toast {
  border-color: var(--cy-line);
  background: var(--cy-panel-2);
  color: var(--cy-ink);
  font-family: var(--font-mono);
}

html[data-app] .toast-success {
  border-color: var(--cy-accent);
  box-shadow: none;
}

html[data-app] .table-message {
  font-family: var(--font-mono);
  color: var(--cy-ink);
}

html[data-app] .controls {
  border-color: var(--cy-line);
  background: var(--cy-panel);
}

html[data-app] .slot-cabinet {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0% 7.5%, color-mix(in srgb, transparent 33%, rgba(255, 255, 255, 0.06)) 7.5% 15%, color-mix(in srgb, transparent 67%, rgba(255, 255, 255, 0.06)) 15% 22.5%, transparent 22.5% 30%, transparent 30%),
    linear-gradient(135deg, var(--cy-panel-2) 0% 11.25%, color-mix(in srgb, var(--cy-bg) 33%, var(--cy-panel-2)) 11.25% 22.5%, color-mix(in srgb, var(--cy-bg) 67%, var(--cy-panel-2)) 22.5% 33.75%, var(--cy-bg) 33.75% 45%, var(--cy-bg) 45% 48.75%, color-mix(in srgb, var(--cy-panel-2) 33%, var(--cy-bg)) 48.75% 52.5%, color-mix(in srgb, var(--cy-panel-2) 67%, var(--cy-bg)) 52.5% 56.25%, var(--cy-panel-2) 56.25% 60%, var(--cy-panel-2) 60% 70%, color-mix(in srgb, var(--cy-bg) 33%, var(--cy-panel-2)) 70% 80%, color-mix(in srgb, var(--cy-bg) 67%, var(--cy-panel-2)) 80% 90%, var(--cy-bg) 90% 100%, var(--cy-bg) 100%);
  box-shadow: 0 0 0 4px var(--cy-accent), 0 0 0 6px var(--cy-bg), 0 0 0 8px var(--cy-accent-2), var(--shadow-lg);
}

html[data-app] .marquee-title {
  font-family: var(--font-mono);
}

/* ---------- Cabecera del Cripto-Casino ---------- */

/* Sin desenfoque de fondo: con la lluvia animada detrás habría que recalcularlo en cada fotograma. */
html[data-app] .topbar {
  border-bottom-color: var(--cy-line);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.96) 0% 25%, color-mix(in srgb, rgba(0, 0, 0, 0.9) 33%, rgba(0, 0, 0, 0.96)) 25% 50%, color-mix(in srgb, rgba(0, 0, 0, 0.9) 67%, rgba(0, 0, 0, 0.96)) 50% 75%, rgba(0, 0, 0, 0.9) 75% 100%, rgba(0, 0, 0, 0.9) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand-cyber {
  gap: 12px;
}

.cyber-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 2px solid var(--cy-accent);
  border-radius: 0;
  color: var(--cy-accent);
  font: 900 1.05rem var(--font-mono);
  box-shadow: none;
}

.cyber-title {
  margin: 0;
  font: 900 clamp(1.05rem, 2.6vw, 1.5rem) var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--cy-accent);
  text-shadow: none;
  white-space: nowrap;
}

html[data-app] .brand-sub {
  color: var(--cy-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
}

html[data-app] .hud-stat {
  border-color: var(--cy-line);
  background: rgba(0, 0, 0, 0.4);
}

html[data-app] .hud-value {
  font-family: var(--font-mono);
  color: var(--cy-accent);
  text-shadow: none;
}

html[data-app] .hud-stat-dim .hud-value {
  color: var(--cy-dim);
  text-shadow: none;
}

html[data-app] .hud-label {
  color: var(--cy-mute);
  font-family: var(--font-mono);
}

.hud-stat-balance {
  position: relative;
}

.abundance-track {
  position: absolute;
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 2px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
}

.abundance-fill {
  display: block;
  height: 100%;
  background: var(--cy-accent-2);
  transform: scaleX(0);
  transform-origin: left center;
}

.btn-career {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 0 12px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  color: var(--cy-ink);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.btn-career:hover {
  border-color: var(--cy-accent);
  box-shadow: none;
}

.btn-career.is-levelup {
  animation: rankup 1.4s var(--ease-out);
}

.level-badge {
  padding: 3px 8px;
  border-radius: 0;
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.level-badge output {
  font: inherit;
}

.level-meta {
  display: grid;
  gap: 4px;
  min-width: 72px;
  text-align: left;
}

.level-rank {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cy-dim);
}

.btn-career[data-rank="silver"] .level-rank { color: #c9d1d9; }
.btn-career[data-rank="gold"] .level-rank { color: #e3bd5a; }
.btn-career[data-rank="platinum"] .level-rank { color: #9fe8ff; }
.btn-career[data-rank="diamond"] .level-rank { color: #6fb6ff; }
.btn-career[data-rank="godfather"] .level-rank { color: #ff3b5c; }

.btn-career .xp-fill,
.career-level .xp-bar-fill {
  background: linear-gradient(90deg, var(--cy-accent) 0% 25%, color-mix(in srgb, var(--cy-accent-2) 33%, var(--cy-accent)) 25% 50%, color-mix(in srgb, var(--cy-accent-2) 67%, var(--cy-accent)) 50% 75%, var(--cy-accent-2) 75% 100%, var(--cy-accent-2) 100%);
}

.mission-count {
  font-size: 0.78rem;
  color: var(--cy-accent-2);
  white-space: nowrap;
}

.mission-count output {
  font: inherit;
}

/* Ranuras de reliquias */

.relic-slots {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.relic-slot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.45);
  color: var(--cy-ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.relic-slot:hover {
  transform: translateY(-1px);
}

.relic-slot.is-empty {
  border-style: dashed;
  color: var(--cy-mute);
}

.relic-slot[data-rarity="common"] {
  border-color: #b8c4cf;
}

.relic-slot[data-rarity="rare"] {
  border-color: #3fa9ff;
  box-shadow: none;
}

.relic-slot[data-rarity="epic"] {
  border-color: #b566ff;
  box-shadow: none;
}

.relic-slot[data-rarity="legendary"] {
  border-color: #ffb52e;
  box-shadow: none;
}

.relic-slots.has-chests::after {
  content: attr(data-chests);
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 0;
  background: var(--cy-danger);
  color: #fff;
  font: 800 0.66rem/18px var(--font-mono);
  text-align: center;
  pointer-events: none;
  animation: badge-pop 1.8s ease-in-out infinite;
}

.potion-badge {
  padding: 2px 6px;
  border: 1px solid #b566ff;
  border-radius: 0;
  background: rgba(181, 102, 255, 0.22);
  color: #f0e2ff;
  font-size: 0.72rem;
  white-space: nowrap;
}

.btn-toggle-icon,
.btn-menu {
  gap: 6px;
  padding: 0 12px;
}

.btn-toggle-icon[aria-pressed="true"] {
  border-color: var(--cy-accent);
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
  box-shadow: none;
}

.btn-terminal > span:first-child {
  font-family: var(--font-mono);
  font-weight: 900;
}

/* Pestañas: con 10 juegos la barra se desplaza en horizontal. */

html[data-app] .tablist {
  max-width: min(1200px, 100%);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  border-color: var(--cy-line);
}

html[data-app] .tablist::-webkit-scrollbar {
  display: none;
}

html[data-app] .tab {
  flex: none;
  padding: 0 14px;
  font-family: var(--font-mono);
  scroll-snap-align: start;
}

html[data-app] .tab[aria-selected="true"] {
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
  box-shadow: none;
}

/* Mensaje flotante sobre el saldo (+50 de la abundancia). */
.float-text {
  position: fixed;
  z-index: 70;
  padding: 2px 8px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.7);
  color: var(--cy-accent-2);
  font: 800 0.9rem var(--font-mono);
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: float-up 1.8s var(--ease-out) forwards;
}

/* ---------- Telemetría ---------- */

.telemetry {
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0 var(--gutter) 24px;
  padding: 14px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: var(--cy-panel);
  font-family: var(--font-mono);
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.45);
}

@media (min-width: 1180px) {
  .telemetry {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 100px);
    margin: 16px 0 24px;
    overflow: auto;
  }
}

.tele-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tele-title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--cy-accent);
}

.tele-title span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cy-dim);
}

.tele-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--cy-ok);
}

.tele-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--cy-ok);
  box-shadow: none;
  animation: tele-blink 1.6s ease-in-out infinite;
}

@keyframes tele-blink {
  50% {
    opacity: 0.25;
  }
}

.tele-seeds {
  display: grid;
  gap: 10px;
}

.tele-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tele-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy-mute);
}

.tele-hash {
  display: block;
  padding: 8px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.45);
  color: var(--cy-accent-2);
  font-size: 0.72rem;
  word-break: break-all;
}

.tele-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.tele-input,
.verify-form input,
.verify-form select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--cy-ink);
  font: 0.85rem var(--font-mono);
}

.tele-input:focus,
.verify-form input:focus,
.verify-form select:focus {
  outline: none;
  border-color: var(--cy-accent);
  box-shadow: 0 0 0 2px var(--cy-glow);
}

.tele-nonce output {
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 40px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.45);
  color: var(--cy-accent);
  font-weight: 800;
}

.tele-actions {
  justify-content: flex-start;
  gap: 6px;
}

.tele-actions .btn {
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.78rem;
}

.tele-revealed {
  margin: 0;
  font-size: 0.72rem;
  color: var(--cy-dim);
  word-break: break-all;
}

.tele-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.tele-stats div {
  padding: 8px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
}

.tele-stats dt {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cy-mute);
}

.tele-stats dd {
  margin: 2px 0 0;
  color: var(--cy-ink);
  font-weight: 800;
  font-size: 0.86rem;
}

.tele-subtitle {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cy-dim);
}

.tele-feed {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tele-bet-btn {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto minmax(54px, auto) minmax(64px, auto);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  color: var(--cy-ink);
  font: 0.74rem var(--font-mono);
  text-align: left;
  cursor: pointer;
}

.tele-bet-btn:hover {
  border-color: var(--cy-line);
  background: rgba(255, 255, 255, 0.06);
}

.tele-bet-game {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tele-bet-nonce {
  color: var(--cy-mute);
}

.tele-bet-mult,
.tele-bet-pay {
  text-align: right;
}

.tele-bet.is-win .tele-bet-pay,
.tele-bet.is-win .tele-bet-mult {
  color: var(--cy-ok);
}

.tele-bet.is-loss .tele-bet-pay {
  color: var(--cy-danger);
}

.tele-bet.is-new {
  animation: feed-in 0.6s var(--ease-out);
}

.tele-empty {
  font-size: 0.74rem;
  color: var(--cy-mute);
}

/* ---------- Diálogos del Cripto-Casino ---------- */

.cyber-modal {
  width: min(94vw, 640px);
  font-family: var(--font-mono);
}

.cyber-modal .modal-subtitle {
  color: var(--cy-dim);
}

.career-level {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
}

.career-info {
  display: grid;
  flex: 1;
  gap: 6px;
  min-width: 200px;
}

.career-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cy-dim);
}

.career-level-num {
  font-size: 1.6rem;
  color: var(--cy-accent);
}

.career-xp {
  font-size: 0.8rem;
  color: var(--cy-dim);
}

.career-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  width: 100%;
  margin: 0;
  font-size: 0.78rem;
}

.career-facts dt {
  color: var(--cy-mute);
}

.career-facts dd {
  margin: 0;
  color: var(--cy-ink);
}

.career-reset {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--cy-mute);
}

.career-ranks .rank-row {
  grid-template-columns: auto minmax(84px, 1fr) auto minmax(0, 2.2fr);
  font-size: 0.78rem;
}

.career-ranks .rank-row.is-current {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 2px var(--cy-accent);
}

.career-ranks .rank-row-name {
  grid-column: auto;
}

.rank-row-req {
  color: var(--cy-accent-2);
  white-space: nowrap;
}

.rank-row-perk {
  color: var(--cy-dim);
}

.mission-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8rem;
}

.mission.is-done {
  border-color: var(--cy-accent);
  background: rgba(255, 255, 255, 0.07);
}

.mission-check {
  color: var(--cy-accent);
}

.mission-text {
  color: var(--cy-ink);
}

.mission-progress {
  color: var(--cy-dim);
}

.mission-track {
  grid-column: 2 / 4;
  height: 5px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.1);
}

.mission-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cy-accent) 0% 25%, color-mix(in srgb, var(--cy-accent-2) 33%, var(--cy-accent)) 25% 50%, color-mix(in srgb, var(--cy-accent-2) 67%, var(--cy-accent)) 50% 75%, var(--cy-accent-2) 75% 100%, var(--cy-accent-2) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}

.mission-reward {
  grid-column: 2 / 4;
  font-size: 0.72rem;
  color: var(--cy-accent-2);
}

/* Bóveda de reliquias */

.vault-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vault-slot {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
}

.vault-slot.is-empty {
  border-style: dashed;
}

.vault-slot-num {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cy-mute);
}

.vault-slot-empty {
  font-size: 0.76rem;
  color: var(--cy-dim);
}

.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vault-item {
  display: grid;
  gap: 6px;
  align-content: start;
}

.relic-card {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #b8c4cf;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
}

.relic-card.rarity-rare {
  border-color: #3fa9ff;
  box-shadow: none;
}

.relic-card.rarity-epic {
  border-color: #b566ff;
  box-shadow: none;
}

.relic-card.rarity-legendary {
  border-color: #ffb52e;
  box-shadow: none;
}

.relic-card.is-locked {
  border-style: dashed;
  opacity: 0.55;
  filter: grayscale(1);
}

.relic-icon {
  font-size: 1.6rem;
}

.relic-name {
  color: var(--cy-ink);
  font-weight: 800;
  font-size: 0.86rem;
}

.relic-rarity {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy-dim);
}

.rarity-rare .relic-rarity { color: #3fa9ff; }
.rarity-epic .relic-rarity { color: #c79bff; }
.rarity-legendary .relic-rarity { color: #ffb52e; }

.relic-text {
  font-size: 0.72rem;
  color: var(--cy-dim);
  line-height: 1.4;
}

.btn-small {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.76rem;
}

.btn-small.is-on {
  border-color: var(--cy-accent);
  color: var(--cy-accent);
}

.vault-store {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.vault-chest,
.vault-potion {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
}

.vault-chest.chest-legendary {
  border-color: #ffb52e;
  background: linear-gradient(180deg, rgba(255, 181, 46, 0.12) 0% 25%, color-mix(in srgb, rgba(0, 0, 0, 0.35) 33%, rgba(255, 181, 46, 0.12)) 25% 50%, color-mix(in srgb, rgba(0, 0, 0, 0.35) 67%, rgba(255, 181, 46, 0.12)) 50% 75%, rgba(0, 0, 0, 0.35) 75% 100%, rgba(0, 0, 0, 0.35) 100%);
}

.vault-chest-name {
  color: var(--cy-ink);
}

.vault-chest-odds,
.vault-chest-owned {
  font-size: 0.72rem;
  color: var(--cy-dim);
}

.vault-chest .btn-row {
  justify-content: flex-start;
  gap: 6px;
}

.vault-chest .btn,
.vault-potion .btn {
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.76rem;
}

/* Cofre (gacha) */

.chest-dialog {
  text-align: center;
}

.chest-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: var(--cy-accent);
}

.chest-stage {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 240px;
}

.chest {
  position: relative;
  width: 140px;
  height: 110px;
}

.chest-body,
.chest-lid,
.chest-glow {
  position: absolute;
  left: 0;
  right: 0;
}

.chest-body {
  bottom: 0;
  height: 62%;
  border: 3px solid #d4a017;
  border-radius: 0;
  background: linear-gradient(90deg, transparent 44%, #d4a017 44% 56%, transparent 56%),
    linear-gradient(180deg, #7a4a1c 0% 25%, color-mix(in srgb, #3d220a 33%, #7a4a1c) 25% 50%, color-mix(in srgb, #3d220a 67%, #7a4a1c) 50% 75%, #3d220a 75% 100%, #3d220a 100%);
}

.chest-lid {
  top: 0;
  height: 44%;
  border: 3px solid #d4a017;
  border-radius: 0;
  background: linear-gradient(180deg, #9a5f26 0% 25%, color-mix(in srgb, #5a3510 33%, #9a5f26) 25% 50%, color-mix(in srgb, #5a3510 67%, #9a5f26) 50% 75%, #5a3510 75% 100%, #5a3510 100%);
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.chest-legendary .chest-body,
.chest-legendary .chest-lid {
  border-color: #ffe27a;
  background-color: #4a1d7a;
}

.chest-legendary .chest-lid {
  background: linear-gradient(180deg, #7c3aed 0% 25%, color-mix(in srgb, #3b0f73 33%, #7c3aed) 25% 50%, color-mix(in srgb, #3b0f73 67%, #7c3aed) 50% 75%, #3b0f73 75% 100%, #3b0f73 100%);
}

.chest-legendary .chest-body {
  background: linear-gradient(90deg, transparent 44%, #ffe27a 44% 56%, transparent 56%),
    linear-gradient(180deg, #5b21b6 0% 25%, color-mix(in srgb, #2e0f5c 33%, #5b21b6) 25% 50%, color-mix(in srgb, #2e0f5c 67%, #5b21b6) 50% 75%, #2e0f5c 75% 100%, #2e0f5c 100%);
}

.chest-glow {
  top: -30%;
  bottom: -30%;
  border-radius: 0;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.9) 0% 16.25%, color-mix(in srgb, transparent 33%, rgba(255, 240, 180, 0.9)) 16.25% 32.5%, color-mix(in srgb, transparent 67%, rgba(255, 240, 180, 0.9)) 32.5% 48.75%, transparent 48.75% 65%, transparent 65%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s, transform 0.5s;
}

.chest.is-shaking {
  animation: chest-shake 0.35s ease-in-out 4;
}

.chest.is-open .chest-lid {
  transform: translateY(-18px) rotateX(70deg) rotate(-14deg);
}

.chest.is-open .chest-glow {
  opacity: 1;
  transform: scale(1.3);
}

.chest-reveal {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.chest-reveal .relic-card {
  width: min(260px, 80vw);
  text-align: left;
}

.relic-card.is-revealed {
  animation: relic-reveal 0.7s var(--ease-out);
}

.chest-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--cy-dim);
}

.chest-chips {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--cy-accent);
}

/* Verificador */

.verify-dialog {
  width: min(96vw, 760px);
}

.verify-dialog code {
  color: var(--cy-accent-2);
}

.verify-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.verify-form .field {
  display: grid;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--cy-dim);
}

.verify-form .field-wide {
  grid-column: 1 / -1;
}

.verify-result {
  margin-top: 12px;
}

.verify-title {
  margin: 0 0 6px;
  color: var(--cy-accent);
  font-weight: 800;
}

.verify-rows {
  display: grid;
  gap: 4px;
  margin: 0;
}

.verify-rows div {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.4fr);
  gap: 10px;
  padding: 6px 8px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.76rem;
}

.verify-rows dt {
  color: var(--cy-mute);
}

.verify-rows dd {
  margin: 0;
  color: var(--cy-ink);
  word-break: break-all;
}

.verify-rows .is-ok dd {
  color: var(--cy-ok);
}

.verify-rows .is-bad dd {
  color: var(--cy-danger);
}

.verify-note {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 12px;
  border: 1px dashed var(--cy-line);
  border-radius: 0;
  font-size: 0.8rem;
  color: var(--cy-dim);
}

.verify-note p {
  margin: 0;
}

.verify-error {
  margin: 0;
  color: var(--cy-danger);
  font-size: 0.8rem;
}

/* Carrera global en el expediente del Modo Historia */

.dossier-global {
  margin-top: 12px;
}

.dossier-global-text,
.dossier-global-meta {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

/* ---------- Responsivo ---------- */

@media (max-width: 720px) {
  .menu-cards {
    grid-template-columns: 1fr;
  }

  /* Cabecera compacta y no fija: marca con el menú a la derecha, saldo y carrera, y una fila
     de reliquias y botones de solo icono. */
  html[data-app] .topbar {
    position: relative;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
  }

  html[data-app] .brand-sub {
    display: none;
  }

  html[data-app] .cyber-logo {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  html[data-app] .hud {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-areas: none;
    width: 100%;
    gap: 6px;
  }

  html[data-app] .hud > * {
    grid-area: auto;
    min-width: 0;
  }

  html[data-app] .hud-stat-balance {
    grid-column: span 3;
  }

  html[data-app] .hud-stat-dim {
    grid-column: span 2;
  }

  html[data-app] .hud .btn-career {
    grid-column: span 3;
    gap: 6px;
    padding: 0 8px;
  }

  html[data-app] .hud .relic-slots {
    grid-column: span 4;
    justify-content: flex-start;
  }

  html[data-app] .hud .btn {
    min-width: 0;
    padding: 0;
  }

  html[data-app] .hud .btn-menu {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;
    min-height: 36px;
  }

  html[data-app] .btn-toggle-text,
  html[data-app] .audio-text {
    display: none;
  }

  .level-meta {
    min-width: 0;
  }

  .level-rank {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btn-career .xp-track {
    width: 100%;
  }

  .mission-count {
    display: none;
  }

  .career-ranks .rank-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .rank-row-perk {
    grid-column: 1 / -1;
  }

  .verify-form,
  .vault-slots {
    grid-template-columns: 1fr;
  }

  .tele-bet-btn {
    grid-template-columns: minmax(0, 1.4fr) auto minmax(50px, auto) minmax(56px, auto);
  }
}

@media (max-width: 420px) {
  .cyber-title {
    font-size: 1rem;
    letter-spacing: 0.08em;
  }

  .relic-slot {
    width: 32px;
    height: 32px;
  }
}