/* =================== DRAGON TOWER (Stake clone) =================== */
/* Theme variables are set on .gp-tower-wrap by tower.js based on difficulty. */
.gp-tower-wrap {
  --flame: #ff8a1a;
  --egg-fill: #b6b6c2;
  --egg-accent: #6b6b7a;
  --row-active-bg: rgba(192, 22, 34, 0.28);
  --row-active-edge: rgba(255, 80, 80, 0.55);
  --stone-lit: #2b3548;
  --stone-dim: #151c2d;
  --stone-border: #20283a;
  --stone-inset: rgba(0, 0, 0, 0.55);
}

/* Difficulty pills — align with Stake's dark chip style. Flex-wrap so the
   five Spanish labels (Fácil / Medio / Difícil / Experto / Maestro) never
   overflow the narrow left panel. */
.gp-tower-diff {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}
.gp-tower-diff button {
  flex: 1 1 auto;
  min-width: 0;
  background: #121b2d; border: 1px solid #1d2a44; color: #cfe2f0;
  padding: 5px 6px; border-radius: 7px; font-size: 10px; cursor: pointer; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.gp-tower-diff button.active[data-d="easy"]   { background: rgba(255,138,26,.16);  border-color: #ff8a1a; color: #ffb066; }
.gp-tower-diff button.active[data-d="medium"] { background: rgba(38,214,107,.16);  border-color: #26d66b; color: #73edab; }
.gp-tower-diff button.active[data-d="hard"]   { background: rgba(42,167,255,.16);  border-color: #2aa7ff; color: #7ec9ff; }
.gp-tower-diff button.active[data-d="expert"] { background: rgba(183,107,255,.20); border-color: #b76bff; color: #d6b1ff; }
.gp-tower-diff button.active[data-d="master"] { background: rgba(255,59,122,.20);  border-color: #ff3b7a; color: #ff91b3; }
.gp-tower-diff button:disabled { opacity: .55; cursor: not-allowed; }

/* HUD (current/next/row/payout) */
.gp-tower-hud {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  background: #0c1524; border: 1px solid #1e2b40; border-radius: 12px; padding: 12px; margin-bottom: 14px;
}
.gp-tower-hud .gp-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.gp-tower-hud .gp-cell small { color: var(--s-muted, #89a); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.gp-tower-hud .gp-cell strong { color: #fff; font-size: 18px; font-weight: 800; }
.gp-tower-hud .payout strong { color: #f5b400; }

/* Playfield wrapper: full-bleed dragon background art (de-watermarked
 * via gemini-watermark-remover). Three image variants — one per
 * gold-pillar count (2 / 3 / 4) — picked via [data-cols="N"] which
 * tower.js sets in applyThemeVars().
 *
 * Pillar X positions (measured by tower_bg_measure.py, % of width):
 *   2col:           22.4 ── 48.2 ── 73.9
 *   3col:           22.4 ── 35.7 ── 60.8 ── 73.9
 *   4col:           22.4 ── 35.6 ── 48.2 ── 60.8 ── 73.9
 *   head ends ≈ 10.1% of height, base starts ≈ 89% of height.
 *
 * The grid is absolutely positioned to land EXACTLY between the
 * outermost pillars (X: 22.4%–73.9%) and the head/base zones (Y:
 * 10.5%–88.5%) — that's why the gold pillars in the art read as the
 * actual visible borders of each tile column. No dark overlay sits on
 * top of the art; the dragon is the focal point and the tiles' own
 * stone-brick fills give the eye somewhere to land for actions. */
.gp-tower-wrap {
  /* Wrap aspect-ratio is intentionally TALLER than the source image
   * (image is 2156×1952 ≈ 1.105:1, wrap is 3:4 ≈ 0.75:1 → 1.33× taller
   * than wide). The image stretches to fill via background-size: 100%
   * 100%; horizontal pillar percentages are preserved unchanged (so
   * grid alignment to the gold pillars is identical), and vertical
   * percentages stay relative to the wrap height. The reason for the
   * stretch: with 9 rows splitting the column zone, a square-ish wrap
   * gave each row ~55px height vs ~88px width → cells looked like
   * horizontal strips. The taller aspect plus the `gap` bump below
   * gives each row ~72px and turns the cells into proper bricks. */
  aspect-ratio: 5 / 7;
  width: 100%;
  max-width: 500px;   /* was 580 — even narrower wrap.
                       * The aspect-ratio also tightened from 3:4 (1.33×
                       * taller than wide) to 5:7 (1.40× taller than wide)
                       * so each pixel of width-reduction shrinks height
                       * LESS than width — matching "less wide AND
                       * slightly less tall". At 1080p the wrap goes
                       * 580×773 → 500×700; cells go ~70×62 → ~60×56. */
  /* Viewport-aware height cap. Keeps the entire playable area (page
   * header + HUD + wrap) inside the visible viewport on any laptop /
   * desktop, instead of forcing a scroll for the wrap alone. CSS picks
   * whichever constraint is tighter:
   *   - On 1080p+ screens, max-width: 660 wins → wrap is 660×880 only
   *     when 75vh ≥ 880, i.e. viewport_height ≥ 1173px (high-DPI / 1440p).
   *   - On most laptops (typically 720p–900p), 75vh wins and the wrap
   *     scales DOWN proportionally (aspect-ratio preserved) so width
   *     drops below 660. e.g. 1080p: max-height 810 → width 607; 900p:
   *     max-height 675 → width 506.
   *   Cells stay proper bricks across the range because the aspect
   *   ratio is preserved when the cap kicks in. */
  max-height: 73vh;
  margin: 0 auto;
  background-image: url('/img/games/tower-bg-4col.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #060912;
  border: 1px solid #3a2a18;
  border-radius: 14px;
  padding: 0;
  position: relative;
  /* Clip image to rounded corners. */
  overflow: hidden;
  /* Drop the old flex layout — children are absolutely positioned. */
}

/* Per-difficulty image. tower.js sets [data-cols] on the wrap based on
 * the active difficulty (easy/master=4, medium/expert=3, hard=2). */
.gp-tower-wrap[data-cols="2"] { background-image: url('/img/games/tower-bg-2col.png'); }
.gp-tower-wrap[data-cols="3"] { background-image: url('/img/games/tower-bg-3col.png'); }
.gp-tower-wrap[data-cols="4"] { background-image: url('/img/games/tower-bg-4col.png'); }

/* The old SVG dragon-head silhouette (injected by tower.js) is now
 * redundant — the background art already paints a full dragon. Hide
 * it but keep the JS that injects it untouched (so existing tests
 * and the structure don't break). */
.gp-tower-dragonhead {
  display: none;
}

/* The tile grid sits in the COLUMN ZONE — the rectangle bounded by the
 * outermost gold pillars on the sides and the head/base ornaments top
 * and bottom. Absolutely positioned so the alignment matches the image
 * regardless of wrap width. */
.gp-tower-grid {
  position: absolute;
  left:   22.4%;
  right:  26.1%;  /* = 100 − 73.9 */
  top:    10.5%;  /* just below the head crown (head_end ≈ 10.1%) */
  bottom: 11.5%;  /* just above the base ornament (base_top ≈ 89%) */
  display: flex;
  flex-direction: column;
  gap: 5px;       /* bumped from 3px so adjacent rows read as separate bricks instead of a continuous strip */
  width: auto;
  max-width: none;
  z-index: 2;
}

/* The skull marker stays hidden — its function (signalling the death
 * row) is now handled by the .death row's red strip + dragon icon
 * reveal in cells. The PER-ROW MULTIPLIER LABEL, on the other hand,
 * is brought back: tower.js populates each .gp-tower-rowlabel with
 * the row's potential payout (e.g. "1.32×", "1.74×", "2.30×" …)
 * computed via Math.pow(c.step, r). We position it absolutely so it
 * sits OUTSIDE the column zone — overlaid on the dark frame area to
 * the right of the rightmost gold pillar, NOT eating into cell width. */
.gp-tower-rowmarker {
  display: none;
}
.gp-tower-rowlabel {
  position: absolute;
  /* `left: 100%` puts the label's left edge flush with the row's
   * right edge (= grid right edge = ~73.9% of wrap width = the
   * rightmost gold pillar). The 8px nudge moves it just past the
   * pillar onto the dark-frame area painted in the bg image. The
   * label is rendered ON TOP of the background art (z-index above
   * the wrap's bg, since absolute children stack above the bg). */
  left: 100%;
  margin-left: 8px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  /* Compact, prominent type. tabular-nums keeps the decimal points
   * aligned vertically across all 9 rows so the column reads cleanly
   * as a "ladder of payouts" up the right side. */
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  /* Dual shadows — a hard 1px drop for legibility on lighter bg
   * regions (the warm-tinted lava + nebula glow), plus a soft outer
   * glow so the text reads against any stretch of the dragon
   * scenery. */
  text-shadow:
    0 1px 4px rgba(0, 0, 0, .85),
    0 0 8px rgba(0, 0, 0, .6);
  pointer-events: none;
  z-index: 3;
}
/* Death row: tint the multiplier red so the eye reads the red strip
 * + the highlighted "what you missed" multiplier as one cue. */
.gp-tower-row.death .gp-tower-rowlabel {
  color: #ffd2c2;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, .85),
    0 0 10px rgba(255, 120, 80, .55);
}
/* Cleared rows (already climbed past): subtle green so the eye sees
 * the "ladder so far" as a coloured trail beneath the active row. */
.gp-tower-row.cleared .gp-tower-rowlabel { color: #c2e9d1; }

/* Each row inside the column zone stretches equally, splitting the
 * vertical space among 9 rows. The marker/label gutters are hidden
 * (above), so the row is just a single full-width cells container. */
.gp-tower-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  position: relative;
  transition: background .2s, box-shadow .2s;
}

/* Current row during climbing — subtle-only signal so the player knows which
   row is clickable. The dramatic red strip + skull + eggs reveals are now
   reserved for the loss (.death) state to keep the climbing view clean. */
.gp-tower-row.current {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Death row — added when a dragon is hit. Shows the full red strip, the
   skull-with-flame marker, the dragons in their cells, and the safe eggs
   that could have been picked. Only ONE row can be in .death at a time. */
.gp-tower-row.death {
  background: var(--row-active-bg);
  box-shadow: inset 0 0 0 1px var(--row-active-edge);
}

/* The original rules for `.gp-tower-rowmarker` (display: flex, min-height
 * 40px) and `.gp-tower-rowlabel` (display: flex) used to live here. They
 * have been removed because the column-zone layout above hides both
 * elements via `display: none` (see line ~127). Leaving the later
 * `display: flex` declarations here re-enabled the marker / label —
 * since they have equal specificity they would override the hide rule,
 * and each row's grid (`grid-template-columns: 1fr`) would stack the
 * marker (~40px) + cells + label (~19px) in 3 auto-rows, squeezing the
 * tile cells into a 2–4px sliver at the bottom (the "tiles look like a
 * line" bug). The cosmetic colour overrides for .death / .cleared row
 * states also referred to those hidden elements and have been removed
 * — death rows now signal via `.gp-tower-row.death` background + cell
 * art reveals only. */

/* The cells inside a row.
 *
 * Default template = equal columns matching --cols (set per row in
 * tower.js). Per-difficulty overrides below tune the proportions to
 * match the gold-pillar spacing in the image:
 *   2col image: 50/50 split (default `repeat(2, 1fr)` works)
 *   3col image: middle pillar gap is ~2× wider than the side gaps
 *               (measured 25.7 / 48.8 / 25.5) → use 1fr 2fr 1fr
 *   4col image: ~equal (measured 25.6 / 24.4 / 24.5 / 25.5) → repeat 4 */
.gp-tower-cells {
  display: grid;
  grid-template-columns: var(--tower-tile-cols, repeat(var(--cols, 3), 1fr));
  gap: 6px;       /* bumped from 4px to match the bigger row gap above */
  height: 100%;
}
.gp-tower-wrap[data-cols="2"] { --tower-tile-cols: 1fr 1fr; }
.gp-tower-wrap[data-cols="3"] { --tower-tile-cols: 1fr 2fr 1fr; }
.gp-tower-wrap[data-cols="4"] { --tower-tile-cols: 1fr 1fr 1fr 1fr; }

/* Base stone-brick cell: beveled rectangle with inset shadow.
 * Sized to fill its grid cell — the row's flex:1 share of the column
 * zone height divided by 9 gives the row height; grid-template-columns
 * gives the width. NO aspect-ratio (would overflow the tight column
 * zone at narrow viewports) and NO min-height (rows on a 360px-tall
 * mobile wrap would exceed 9 × 44 = 396px and burst out). */
.gp-tower-cell {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--stone-border);
  background:
    linear-gradient(180deg, #26304a 0%, #141a2c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 2px 6px rgba(255, 255, 255, 0.04),
    inset 0 -3px 8px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(0, 0, 0, 0.55);
  color: #cbd5e1;
  font-weight: 800; font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s, background .18s, border-color .18s;
}

/* Dashed inner border to mimic Stake's brick bevel */
.gp-tower-cell::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.gp-tower-cell .gp-tower-cell-art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.gp-tower-cell .gp-tower-cell-art svg,
.gp-tower-cell .gp-tower-cell-art img {
  width: 58%; height: 58%;
  object-fit: contain;        /* keeps the dragon PNG square + un-cropped */
  opacity: .85;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;       /* clicks pass through to the cell button */
}

.gp-tower-cell:disabled { cursor: not-allowed; }

/* Cells on the current row — lifted, slightly brighter */
.gp-tower-row.current .gp-tower-cell:not(:disabled) {
  background: linear-gradient(180deg, #32405e 0%, #1a2338 100%);
  border-color: #3a4a6e;
}
.gp-tower-row.current .gp-tower-cell:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -3px 8px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(255, 120, 80, 0.35);
}

/* Reveal states */
.gp-tower-cell.safe,
.gp-tower-cell.picked.safe {
  background: linear-gradient(180deg, #1e2e4d 0%, #0d1628 100%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -3px 8px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(255, 255, 255, 0.08);
  animation: gp-tower-safe-pop .35s ease;
}
.gp-tower-cell.safe .gp-tower-cell-art svg { opacity: 1; transform: scale(1.05); }

.gp-tower-cell.safe-reveal {
  background: linear-gradient(180deg, #1b2a44 0%, #0b1322 100%);
  border-color: rgba(255, 255, 255, 0.12);
  opacity: .7;
}
.gp-tower-cell.safe-reveal-dim {
  background: #0d1322;
  border-color: #13203a;
  opacity: .45;
}

.gp-tower-cell.dragon,
.gp-tower-cell.dragon-reveal {
  background: linear-gradient(180deg, #7a1a22 0%, #3a0910 100%);
  border-color: #ef4444;
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 180, 0.45),
    inset 0 -3px 8px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(220, 38, 38, 0.5);
  animation: gp-tower-hit-shake .4s ease;
}
.gp-tower-cell.dragon .gp-tower-cell-art svg,
.gp-tower-cell.dragon .gp-tower-cell-art img,
.gp-tower-cell.dragon-reveal .gp-tower-cell-art svg,
.gp-tower-cell.dragon-reveal .gp-tower-cell-art img { opacity: 1; transform: scale(1.05); }

/* Burning dragon — fire aura hugs the dragon SVG itself, not the whole cell.
   The .gp-tower-cell-art wrapper is positioned inside the cell and centers a
   58%-wide SVG; we attach the fire ::before to that wrapper and size it to
   match the SVG's visual footprint so the fire stays tightly around the
   dragon icon. */
.gp-tower-cell.dragon-burning .gp-tower-cell-art {
  position: absolute;
  inset: 0;
}
.gp-tower-cell.dragon-burning .gp-tower-cell-art::before {
  content: '';
  position: absolute;
  /* Mirror the SVG's 58% width/height, plus a small aura margin. The
     percentages are relative to the .gp-tower-cell-art box, which fills
     the entire cell. */
  top: 50%;
  left: 50%;
  width: 72%;
  height: 72%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 65%, rgba(255, 220, 120, .95) 0%, rgba(255, 140, 30, .7) 30%, rgba(255, 70, 0, .3) 55%, rgba(255, 0, 0, 0) 75%);
  box-shadow:
    0 0 14px rgba(255, 150, 40, .8),
    0 0 28px rgba(255, 90, 0, .55);
  animation: gp-tower-fire-flicker 140ms ease-in-out infinite alternate;
  mix-blend-mode: screen;
  z-index: 0;
}
.gp-tower-cell.dragon-burning .gp-tower-cell-art svg,
.gp-tower-cell.dragon-burning .gp-tower-cell-art img {
  position: relative;
  z-index: 1; /* keep the dragon drawing on top of the fire */
}
@keyframes gp-tower-fire-flicker {
  0%   { opacity: .8; transform: translate(-50%, -50%) scale(.94); filter: hue-rotate(0deg) brightness(1); }
  100% { opacity: 1;  transform: translate(-50%, -50%) scale(1.06); filter: hue-rotate(-8deg) brightness(1.18); }
}

/* Pressing animation — plays when the player clicks a tower cell, before
   the server responds. Same idea as the mines pressing animation: a short
   wobble to build pressure. */
.gp-tower-cell.pressing {
  animation: gp-tower-press 260ms ease-in-out infinite;
  cursor: default;
}
@keyframes gp-tower-press {
  0%   { transform: scale(1)   rotate(0deg); }
  25%  { transform: scale(.93) rotate(-2deg); }
  50%  { transform: scale(.97) rotate(0deg); }
  75%  { transform: scale(.93) rotate(2deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

@keyframes gp-tower-safe-pop {
  0%   { transform: scale(.9); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes gp-tower-hit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Bottom action bar */
.gp-tower-actions {
  display: flex; justify-content: center; margin-top: 14px;
}
.gp-tower-actions .gp-btn { min-width: 220px; }

/* Responsive tweaks.
 *
 * The wrap uses aspect-ratio + absolute-positioned grid, so most of
 * the old fixed-pixel overrides (grid-template-columns: 26px 1fr 52px,
 * cell min-height, etc.) are intentionally NOT carried into the mobile
 * media queries — they would conflict with the column-zone alignment
 * to the gold pillars in the image. */
@media (max-width: 720px) {
  /* Row markers/labels are hidden globally (display:none) — these
   * inherited overrides for them are now no-ops, kept out for clarity. */

  /* ---- Mobile button redesign (Blackjack pattern) ----
     Tower's primary game UI lives in the tile grid above; the action-bar
     buttons in the side panel are just Start round + Cash out. On phones
     we pack them into a flex-wrap row, hoist the contextual primary
     (Start when idle, Cash out when a streak is running) to full width,
     and hide the non-legal button entirely so the bar reflects exactly
     one obvious move.

     The .gp-actions-original parent appears at runtime (game-nav.js
     flattens .gp-panel descendants on mobile); selectors target the
     buttons via #id and via that wrapper so both layouts pick up the
     mobile sizing. */
  #start-btn,
  #cashout-btn,
  .gp-actions-original #start-btn,
  .gp-actions-original #cashout-btn {
    flex: 1 1 calc(50% - 6px);
    min-height: 40px;
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.1;
  }
  /* The legal button is the obvious move — make it full-width + slightly
     taller so it visually reads as the primary action. */
  #start-btn.is-legal,
  #cashout-btn.is-legal,
  .gp-actions-original #start-btn.is-legal,
  .gp-actions-original #cashout-btn.is-legal {
    flex-basis: 100%;
    min-height: 44px;
    font-size: 14px;
  }
  /* Hide the non-legal one on mobile so the action bar is single-purpose. */
  #start-btn:not(.is-legal),
  #cashout-btn:not(.is-legal),
  .gp-actions-original #start-btn:not(.is-legal),
  .gp-actions-original #cashout-btn:not(.is-legal) {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* DON'T override .gp-tower-wrap padding or min-height — the aspect-
   * ratio-driven layout needs padding:0 and aspect-ratio to control
   * sizing, otherwise the column zone shifts off the gold pillars. */
  .gp-tower-cell {
    font-size: 11px;
    border-radius: 4px;
  }
  .gp-tower-cell .gp-tower-cell-art svg,
  .gp-tower-cell .gp-tower-cell-art img {
    width: 50%;
    height: 50%;
  }
  .gp-tower-cells {
    gap: 3px;
  }
  .gp-tower-hud {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .gp-tower-hud .gp-cell strong {
    font-size: 14px;
  }
  .gp-tower-diff button {
    padding: 4px 4px;
    font-size: 9px;
  }
  .gp-tower-actions .gp-btn {
    min-width: 160px;
  }
}