/* @voltedge/ui — generic game control bar styles.
   LANDSCAPE (unchanged): bet (left) | speed · SPIN · auto (center) | win/balance boxes (right).
     The .vc-spincluster wrapper is display:contents here, so speed/spin/auto act as
     direct grid children (landscape is identical to the flat layout).
   PORTRAIT (per the Excalidraw mockup): surge on top · balance/win boxes · then
     [compact bet box] [SPIN with autoplay (upper-right) + speed (lower-right) satellites]. */

.vc-bar {
  --vc-gap: 16px;
  --vc-accent: #ffd34d;
  --vc-maxwidth: 800px; /* landscape: cap how far bet / win-balance drift from SPIN */
  font-family: system-ui, -apple-system, sans-serif;
  color: #fff;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

/* Surge / charge meter (surge.js) — GAME-PLACED (not part of the bottom bar).
   Vertical by default (fill bottom-up); add .ve-surge--h for horizontal. The game
   sets its position/size; .set(0..1) drives the fill via the --surge property. */
.ve-surge {
  border-radius: 6px; background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); overflow: hidden;
  display: flex; align-items: flex-end;
}
.ve-surge__fill {
  width: 100%; height: calc(var(--surge, 0) * 100%);
  background: linear-gradient(to top, #ffd34d, #ff7a18 55%, #ff2d2d);
  box-shadow: 0 0 8px rgba(255, 122, 24, 0.6); transition: height 0.35s ease;
}
.ve-surge--h { align-items: stretch; }
.ve-surge--h .ve-surge__fill {
  height: 100%; width: calc(var(--surge, 0) * 100%);
  background: linear-gradient(90deg, #ffd34d, #ff7a18 55%, #ff2d2d); transition: width 0.35s ease;
}

/* ---- Landscape: 5 columns; spincluster is transparent (display:contents) ---- */
.vc-controls {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: var(--vc-gap);
  max-width: var(--vc-maxwidth);
  margin-inline: auto;
}
.vc-spincluster { display: contents; }
.vc-bet { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 8px; }
.vc-speed { grid-column: 2; }
.vc-spin { grid-column: 3; }
.vc-auto { grid-column: 4; position: relative; display: inline-flex; }
.vc-meters { grid-column: 5; justify-self: end; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }

/* ---- Buttons ---- */
.vc-btn {
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; position: relative; line-height: 0;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.vc-btn img { display: block; pointer-events: none; }
.vc-btn--sm img { width: 46px; height: 46px; }
.vc-btn--md img { width: 56px; height: 56px; }
.vc-btn--xl img { width: 96px; height: 96px; }
.vc-btn:hover { transform: translateY(-1px) scale(1.05); filter: brightness(1.12); }
.vc-btn:active { transform: translateY(1px) scale(0.97); filter: brightness(0.92); }
.vc-btn:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 3px; border-radius: 50%; }

/* Speed label badge (hidden: the 3 icons already convey the state). */
.vc-badge--speed { display: none; }
.vc-badge {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.7); padding: 1px 6px; border-radius: 9px; white-space: nowrap;
}

/* Bet display. */
.vc-bet__amt { display: flex; flex-direction: column; align-items: center; min-width: 72px; }
.vc-bet__label, .vc-meter__label { font-size: 10px; color: #9aa0ab; letter-spacing: 0.08em; }
.vc-bet__val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Each meter is its own little box. */
.vc-meter {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 12px; min-width: 84px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.vc-win { font-size: 15px; font-weight: 700; color: var(--vc-accent); font-variant-numeric: tabular-nums; }
.vc-balance { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Spin button: press pulse only (no rotation). */
.vc-spin.is-pressed img { animation: vc-press 0.18s ease; transform-origin: 50% 50%; }
@keyframes vc-press { 45% { transform: scale(0.86); } 100% { transform: scale(1); } }
/* Round in progress / autoplay running: SPIN shows STOP (active, click to skip/stop). */
.vc-spin.is-spinning { filter: drop-shadow(0 0 9px rgba(255, 211, 77, 0.4)); }

/* Operator free spin active: SPIN pulses (accent ring), bet shows GRATIS, bet locked. */
.vc-spin--free img { animation: vc-fs-pulse 0.9s ease-in-out infinite alternate; }
@keyframes vc-fs-pulse {
  from { filter: drop-shadow(0 0 6px var(--vc-accent)); }
  to   { filter: drop-shadow(0 0 18px var(--vc-accent)) drop-shadow(0 0 6px #fff); }
}
.vc-fs .vc-bet__val { color: var(--vc-accent); text-shadow: 0 0 10px var(--vc-accent); font-weight: 800; }
.vc-btn:disabled { opacity: 0.3; filter: grayscale(0.85); cursor: not-allowed; }

/* Autoplay spin-count dropdown. */
.vc-auto-menu {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; gap: 3px; padding: 7px;
  background: rgba(12, 14, 20, 0.97); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); z-index: 30; min-width: 96px;
}
.vc-auto-menu.is-open { display: flex; }
.vc-auto-menu::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(12, 14, 20, 0.97);
}
.vc-auto-menu__title { font-size: 10px; letter-spacing: 0.06em; color: #8b909a; text-align: center; padding: 2px 0 4px; }
.vc-auto-opt {
  background: none; border: 0; color: #e6e8ee; font: 700 15px/1 system-ui, sans-serif;
  padding: 9px 14px; border-radius: 8px; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums;
}
.vc-auto-opt:hover { background: rgba(255, 255, 255, 0.1); }
.vc-auto-opt--stop { color: #ff9a9a; font-size: 12px; font-weight: 600; margin-top: 3px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Autoplay remaining-spins counter: small circle/pill at the top-right. */
.vc-autobtn { position: relative; overflow: visible; }
.vc-auto-count {
  position: absolute; top: -5px; right: -5px; z-index: 5; box-sizing: border-box;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: #ffce3a; color: #1a1205; border: 2px solid #0c0d12;
  font: 800 10.5px/1 system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums;
  pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.vc-auto-count--lg { font-size: 9px; letter-spacing: -0.03em; }
.vc-auto-count:empty { display: none; }
.vc-autobtn.is-on { filter: drop-shadow(0 0 7px rgba(255, 184, 40, 0.55)); }

/* ============================================================
   PORTRAIT — Excalidraw mockup. Forced with .vc-bar--portrait, or auto on a
   narrow/tall viewport (and not forced landscape).
   ============================================================ */
.vc-bar--portrait .vc-controls,
.vc-portrait-q { /* placeholder; real auto rules live in the @media below */ }

.vc-bar--portrait .vc-controls {
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "meters meters meters" "bet spin .";
  max-width: 380px; margin: 0 auto; align-items: center; gap: 16px 8px;
}
.vc-bar--portrait .vc-meters { grid-area: meters; justify-self: stretch; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; gap: 14px; }
.vc-bar--portrait .vc-bet {
  grid-area: bet; justify-self: start;
  display: grid; grid-template-columns: auto auto; grid-template-areas: "amt amt" "down up" "max max";
  gap: 5px; align-items: center; justify-items: center;
  padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.05);
}
.vc-bar--portrait .vc-bet [data-act="bet-down"] { grid-area: down; }
.vc-bar--portrait .vc-bet [data-act="bet-up"] { grid-area: up; }
.vc-bar--portrait .vc-bet .vc-bet__amt { grid-area: amt; min-width: 0; }
.vc-bar--portrait .vc-bet .vc-bet__max { grid-area: max; }
.vc-bar--portrait .vc-bet .vc-btn--sm img { width: 36px; height: 36px; }
/* Spin cluster: real box with satellite buttons hugging the spin's right edge. */
.vc-bar--portrait .vc-spincluster { grid-area: spin; justify-self: center; display: block; position: relative; }
.vc-bar--portrait .vc-spin img { width: 104px; height: 104px; }
.vc-bar--portrait .vc-spincluster .vc-auto { position: absolute; top: 25px; left: 102px; display: block; }
.vc-bar--portrait .vc-spincluster .vc-speed { position: absolute; top: 70px; left: 96px; }
.vc-bar--portrait .vc-spincluster .vc-auto-img { width: 48px; height: 48px; }
.vc-bar--portrait .vc-spincluster .vc-speed img { width: 30px; height: 30px; }

@media (max-width: 640px), (max-aspect-ratio: 3/4) {
  .vc-bar:not(.vc-bar--landscape) .vc-controls {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "meters meters meters" "bet spin .";
    max-width: 380px; margin: 0 auto; align-items: center; gap: 16px 8px;
  }
  .vc-bar:not(.vc-bar--landscape) .vc-meters { grid-area: meters; justify-self: stretch; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; gap: 14px; }
  .vc-bar:not(.vc-bar--landscape) .vc-bet {
    grid-area: bet; justify-self: start;
    display: grid; grid-template-columns: auto auto; grid-template-areas: "amt amt" "down up" "max max";
    gap: 5px; align-items: center; justify-items: center;
    padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.05);
  }
  .vc-bar:not(.vc-bar--landscape) .vc-bet [data-act="bet-down"] { grid-area: down; }
  .vc-bar:not(.vc-bar--landscape) .vc-bet [data-act="bet-up"] { grid-area: up; }
  .vc-bar:not(.vc-bar--landscape) .vc-bet .vc-bet__amt { grid-area: amt; min-width: 0; }
  .vc-bar:not(.vc-bar--landscape) .vc-bet .vc-bet__max { grid-area: max; }
  .vc-bar:not(.vc-bar--landscape) .vc-bet .vc-btn--sm img { width: 36px; height: 36px; }
  .vc-bar:not(.vc-bar--landscape) .vc-spincluster { grid-area: spin; justify-self: center; display: block; position: relative; }
  .vc-bar:not(.vc-bar--landscape) .vc-spin img { width: 104px; height: 104px; }
  .vc-bar:not(.vc-bar--landscape) .vc-spincluster .vc-auto { position: absolute; top: 25px; left: 102px; display: block; }
  .vc-bar:not(.vc-bar--landscape) .vc-spincluster .vc-speed { position: absolute; top: 70px; left: 96px; }
  .vc-bar:not(.vc-bar--landscape) .vc-spincluster .vc-auto-img { width: 48px; height: 48px; }
  .vc-bar:not(.vc-bar--landscape) .vc-spincluster .vc-speed img { width: 30px; height: 30px; }
}

/* ============================================================
   Sound controls — top-left button + popup (sound-menu.js).
   ============================================================ */
.vc-sound { position: relative; display: inline-flex; }
.vc-snd-btn img { width: 46px; height: 46px; display: block; }
.vc-snd-pop {
  position: absolute; top: calc(100% + 8px); left: 0;
  display: none; flex-direction: column; gap: 9px; padding: 12px 14px; width: 246px;
  background: rgba(12, 14, 20, 0.97); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); z-index: 40;
}
.vc-snd-pop.is-open { display: flex; }
.vc-snd-title { font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.08em; color: #8b909a; text-transform: uppercase; }
.vc-snd-row { display: grid; grid-template-columns: 62px 1fr 30px; align-items: center; gap: 8px; font-size: 12.5px; color: #e6e8ee; cursor: pointer; }
.vc-snd-lbl { white-space: nowrap; }
.vc-snd-val { text-align: right; color: #9aa0ab; font-variant-numeric: tabular-nums; }
.vc-snd-range { width: 100%; height: 4px; accent-color: #ffd34d; cursor: pointer; }
/* "Silenciar todo" — highlighted in red so it stands out as the master kill switch. */
.vc-snd-mute {
  margin-top: 4px; background: rgba(255, 77, 77, 0.10); border: 1px solid rgba(255, 77, 77, 0.55);
  color: #ff6b6b; padding: 8px; border-radius: 8px; cursor: pointer; font: 700 12.5px system-ui, sans-serif; letter-spacing: 0.02em;
}
.vc-snd-mute:hover { background: rgba(255, 77, 77, 0.18); }
/* Muted → solid red (active state). */
.vc-snd-mute.is-muted { color: #fff; background: rgba(214, 40, 40, 0.92); border-color: #ff6b6b; }

/* Storm full: the bet is locked (the Last Stand pays at the charge-time bet). */
.vc-bet-locked .vc-bet { opacity: 0.55; }
.vc-bet-locked .vc-bet .vc-btn { pointer-events: none; filter: grayscale(0.6); }

/* Storm full: the SPIN button shows the charged (bolt) icon with a soft pulse. */
.vc-spin.is-charged { animation: vc-charged 1.4s ease-in-out infinite; }
@keyframes vc-charged {
  0%, 100% { filter: drop-shadow(0 0 3px var(--bolt2, #7fb4ff)); }
  50% { filter: drop-shadow(0 0 12px var(--bolt, #bfe6ff)) brightness(1.12); }
}

/* Manual free spins: the SPIN button pulses to invite the player to advance. */
.vc-spin.is-await { animation: vc-await 1.1s ease-in-out infinite; }
@keyframes vc-await {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); }
  50% { transform: scale(1.07); filter: drop-shadow(0 0 12px rgba(255,255,255,0.85)); }
}

/* Spin button impact flash when the storm bolt lands on it (see chargeBolt). */
.vc-spin.is-zap { animation: vc-zap 0.48s ease; }
@keyframes vc-zap {
  0% { filter: brightness(2.4) drop-shadow(0 0 18px var(--bolt, #bfe6ff)); transform: scale(1.08); }
  100% { filter: none; transform: scale(1); }
}

/* ---- Settings menu (gear button + popup) -------------------------------- */
.vc-cfg { position: relative; display: inline-flex; }
.vc-cfg-btn img { width: 46px; height: 46px; display: block; }
.vc-cfg-pop {
  position: absolute; top: calc(100% + 8px); left: 0;
  display: none; flex-direction: column; gap: 4px; padding: 10px; min-width: 200px;
  background: rgba(12, 14, 20, 0.97); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); z-index: 40;
}
.vc-cfg-pop.is-open { display: flex; }
.vc-cfg-title { font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.08em; color: #8b909a; text-transform: uppercase; padding: 2px 4px 6px; }
.vc-cfg-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e6e8ee; padding: 9px 11px; border-radius: 8px; cursor: pointer; font: 600 13px system-ui, sans-serif;
}
.vc-cfg-item:hover { background: rgba(255, 255, 255, 0.12); }
.vc-cfg-item__ico { font-size: 15px; line-height: 1; }

/* ---- Shared modal overlay (Últimas jugadas / Reglas) -------------------- */
.vc-modal {
  position: absolute; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(3, 4, 8, 0.74); backdrop-filter: blur(3px); pointer-events: auto;
}
.vc-modal.is-open { display: flex; }
.vc-modal__panel {
  display: flex; flex-direction: column; width: min(680px, 96vw); max-height: 90vh;
  background: rgba(12, 14, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65); overflow: hidden;
}
.vc-modal--rules .vc-modal__panel { width: min(560px, 96vw); }
.vc-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(217,183,119,0.10), transparent);
}
.vc-modal__title { font: 800 15px/1 'Rye', system-ui, serif; letter-spacing: 0.04em; color: #f3ead0; text-transform: uppercase; }
.vc-modal__close {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e6e8ee; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
}
.vc-modal__close:hover { background: rgba(255, 255, 255, 0.14); }
.vc-modal__body { padding: 16px; overflow-y: auto; }
.vc-modal-empty { text-align: center; color: #9aa0ab; font: 500 14px system-ui, sans-serif; padding: 28px 0; }

/* ---- "Últimas jugadas" content ------------------------------------------ */
.vc-hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.vc-hist-card {
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.vc-hist-card.is-win { border-color: rgba(120, 220, 150, 0.4); background: rgba(60, 140, 90, 0.1); }
.vc-hist-board {
  display: grid; gap: 2px; padding: 4px; background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; aspect-ratio: 6 / 5;
}
.vc-hist-cell {
  background: rgba(255, 255, 255, 0.03); border-radius: 3px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vc-hist-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vc-hist-meta { display: flex; flex-direction: column; gap: 4px; }
.vc-hist-row { display: flex; align-items: center; justify-content: space-between; font: 500 11.5px system-ui, sans-serif; color: #c2c7d0; }
.vc-hist-time { color: #9aa0ab; font-variant-numeric: tabular-nums; }
.vc-hist-mode { color: #d9b777; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }
.vc-hist-bet { color: #9aa0ab; }
.vc-hist-win { font: 800 14px system-ui, sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.vc-hist-win.is-win { color: #7fe6a0; }
.vc-hist-win.is-loss { color: #6c727d; font-weight: 600; font-size: 12px; }
/* Round id (support/debug). Monospace, muted; full id in the title tooltip. */
.vc-hist-id { color: #7d828c; font: 600 10px ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.03em; }

/* ---- "Reglas" content ---------------------------------------------------- */
.vc-rules-intro { margin-bottom: 14px; }
.vc-rules-subtitle { font: 700 11px/1.2 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #d9b777; }
.vc-rules-lead { margin: 8px 0 0; font: 400 13.5px/1.5 system-ui, sans-serif; color: #c9cdd6; }
.vc-rules-sec { margin-top: 18px; }
.vc-rules-h {
  margin: 0 0 4px; font: 800 13px/1 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: #f3ead0; padding-bottom: 7px; border-bottom: 1px solid rgba(217, 183, 119, 0.25);
}
.vc-rules-note { margin: 6px 0 10px; font: 400 12px/1.4 system-ui, sans-serif; color: #8b909a; }
.vc-rules-syms { display: flex; flex-direction: column; gap: 8px; }
.vc-rules-sym {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px; padding: 9px 11px;
}
.vc-rules-sym__art {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(217,183,119,0.14), rgba(0,0,0,0.35));
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px;
}
.vc-rules-sym__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vc-rules-sym__name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font: 700 14px system-ui, sans-serif; color: #eef0f4;
}
.vc-rules-pay {
  font: 700 11px/1 system-ui, sans-serif; color: #ffd98a; white-space: nowrap;
  background: rgba(217, 183, 119, 0.12); border: 1px solid rgba(217, 183, 119, 0.3);
  padding: 3px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.vc-rules-sym__desc { margin-top: 3px; font: 400 12.5px/1.45 system-ui, sans-serif; color: #aeb3bd; }
.vc-rules-mech {
  margin-top: 9px; background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(217, 183, 119, 0.5); border-radius: 0 8px 8px 0; padding: 9px 12px;
}
.vc-rules-mech__t { font: 700 13px system-ui, sans-serif; color: #f0e6cf; display: flex; align-items: center; gap: 7px; }
.vc-rules-mech__ico { width: 18px; height: 18px; object-fit: contain; flex: none; }
.vc-rules-mech__b { margin-top: 3px; font: 400 12.5px/1.5 system-ui, sans-serif; color: #b3b8c2; }
.vc-rules-footer { margin: 18px 0 2px; font: 400 11px/1.45 system-ui, sans-serif; color: #6c727d; font-style: italic; }

/* ---- Paytable table (live multipliers per cluster size) ------------------ */
.vc-pt { width: 100%; border-collapse: collapse; margin-top: 6px; font: 600 12px system-ui, sans-serif; }
.vc-pt th, .vc-pt td {
  padding: 5px 4px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
}
.vc-pt thead th { color: #9aa0ab; font-weight: 700; font-size: 11px; }
.vc-pt th.vc-pt-h { text-align: left; color: #d9b777; }
.vc-pt td { color: #d6dae2; }
.vc-pt td.vc-pt-none { color: #5a5f69; }
.vc-pt-sym { width: 34px; }
.vc-pt-sym img { width: 28px; height: 28px; object-fit: contain; display: block; }

/* ---- Intro / presentation screen (generic, full-screen, responsive) ------
   The presentation fills the whole viewport: the artwork is the background, a
   bottom-weighted scrim keeps text legible (and leaves the title baked at the top
   of the image visible), and the info sits in a centred readable column at the
   bottom. Works landscape + portrait/mobile. Reusable across games — see
   doc/ESTRUCTURA-GAMES.md § «Pantalla de presentación (genérica)». */
.vc-intro {
  position: absolute; inset: 0; z-index: 120; display: none; opacity: 0; pointer-events: auto;
  background: #0b0c10 var(--vc-intro-img, none) center / cover no-repeat;
  transition: opacity 0.35s ease;
}
.vc-intro.is-open { display: block; opacity: 1; }
.vc-intro__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,7,11,0.15) 0%, rgba(6,7,11,0.5) 42%, rgba(6,7,11,0.93) 100%);
}
/* Full-screen content layer: the info spans the whole viewport — text block in
   the upper area (below the title baked at the top of the artwork) and the action
   button pinned to the bottom, so it FILLS the screen instead of sitting in a
   small bottom box. */
.vc-intro__panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: clamp(28px, 7vh, 72px) clamp(20px, 5vw, 56px) max(26px, env(safe-area-inset-bottom));
  overflow-y: auto; text-align: center;
}
/* Logo: centred at the top, fades in (transparent → opaque) once fully loaded
   (the --in class is added on the image's load event). */
.vc-intro__logo {
  display: block; width: min(320px, 58vw); max-height: 26vh; height: auto; margin: 0 auto;
  object-fit: contain; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.7));
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.vc-intro__logo--in { opacity: 1; transform: translateY(0); }
.vc-intro__content { width: min(820px, 100%); margin: auto 0; }   /* centred in the space above the actions */
.vc-intro__title { margin: 0; font: 400 clamp(38px, 9vw, 68px)/1 'Rye', system-ui, serif; color: #f3ead0; letter-spacing: 0.02em; text-shadow: 0 2px 14px rgba(0,0,0,0.85); }
.vc-intro__tag { margin-top: 10px; font: 700 clamp(12px, 3vw, 16px)/1 system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #d9b777; }
.vc-intro__p { margin: 20px 0 0; font: 400 clamp(15px, 4vw, 20px)/1.6 system-ui, sans-serif; color: #d7dbe2; text-shadow: 0 1px 5px rgba(0,0,0,0.7); }
.vc-intro__feats { margin: 26px auto 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 560px; text-align: left; }
.vc-intro__feats li { position: relative; padding-left: 30px; font: 600 clamp(14px, 3.8vw, 18px)/1.4 system-ui, sans-serif; color: #e7eaf0; text-shadow: 0 1px 5px rgba(0,0,0,0.7); }
.vc-intro__feats li::before { content: "⚡"; position: absolute; left: 0; font-size: 1.05em; color: var(--bolt, #bfe6ff); }
.vc-intro__actions { width: min(480px, 100%); margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vc-intro__play {
  width: 100%; padding: 18px 18px; cursor: pointer;
  font: 800 clamp(16px, 4.6vw, 20px)/1 system-ui, sans-serif; letter-spacing: 0.06em; color: #1a140a;
  background: linear-gradient(180deg, #e9cf8f, #caa44f); border: 1px solid #f0e3bf; border-radius: 13px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.vc-intro__play:hover { filter: brightness(1.06); transform: translateY(-1px); }
.vc-intro__play:active { transform: translateY(1px); }
.vc-intro__dont { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font: 500 clamp(13px, 3.4vw, 15px)/1 system-ui, sans-serif; color: #b3b8c2; text-shadow: 0 1px 3px rgba(0,0,0,0.75); }
.vc-intro__dont input { width: 19px; height: 19px; accent-color: #caa44f; cursor: pointer; }
/* Landscape on short screens (phones held sideways): tighten so it fits without scroll. */
@media (orientation: landscape) and (max-height: 540px) {
  .vc-intro__panel { padding: 16px clamp(20px, 5vw, 56px); }
  .vc-intro__content { margin: 0 0 auto; }
  .vc-intro__p { margin-top: 10px; }
  .vc-intro__feats { margin-top: 12px; gap: 6px; }
  .vc-intro__actions { padding-top: 12px; }
}