/* ============================================
   HEADER BAR - CharmsBot
   ============================================ */

.top-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: rgba(91, 45, 132, 0.85);
  border-bottom: 1px solid rgba(160, 120, 220, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 10000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* ============================================
   BOT STATUS (Izquierda)
   ============================================ */

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}

.bot-status-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.4s ease;
}

.bot-status-text {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Colores Dinámicos */
.header-left.offline .bot-status-indicator {
  background: #e74c3c;
  box-shadow: 0 0 12px rgba(231, 76, 60, 0.6);
  animation: pulse-offline 2s infinite;
}
.header-left.offline .bot-status-text { color: #e74c3c; }

.header-left.online .bot-status-indicator {
  background: #2ecc71;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.6);
  animation: pulse-online 2s infinite;
}
.header-left.online .bot-status-text { color: #2ecc71; }

@keyframes pulse-offline {
  0%, 100% { box-shadow: 0 0 8px rgba(231, 76, 60, 0.4); }
  50%       { box-shadow: 0 0 16px rgba(231, 76, 60, 0.8); }
}

@keyframes pulse-online {
  0%, 100% { box-shadow: 0 0 8px rgba(46, 204, 113, 0.4); }
  50%       { box-shadow: 0 0 16px rgba(46, 204, 113, 0.8); }
}

/* ============================================
   SERVER SAVE COUNTDOWN (Centro)
   ============================================ */

.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.countdown-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.countdown-timer {
  color: #00d4ff;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* ============================================
   TODAY'S BOOSTED (Derecha) — SISTEMA DE SLOTS
   ============================================ */

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 250px;
  justify-content: flex-end;
}

.boosted-label {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.boosted-pedestal {
  /* One calibration, scaled. Every number below is measured against the
     pedestal art at full size; --ped-k shrinks the whole thing uniformly,
     which keeps the slots on their frames because object-fit: contain scales
     the artwork by exactly the same factor.

     The phone used to carry its own four coordinates, and they had drifted:
     the creature sat at 25px where the calibration puts it at 33.5, and the
     boss at 105 where it belongs at 83.5, so both sprites stood beside their
     frames instead of in them. Two sets of numbers for one layout is what
     made that possible. */
  --ped-k: 1;

  position: relative;
  width: calc(235px * var(--ped-k));
  height: calc(91px * var(--ped-k));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pedestal-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 1;
}

/* ===== SLOTS AUTO-AJUSTABLES ===== */
.pedestal-slot-creature,
.pedestal-slot-boss {
  position: absolute;
  width: calc(55px * var(--ped-k));
  height: calc(55px * var(--ped-k));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
  /* DEBUG: descomenta para ver los slots
  background: rgba(255, 0, 0, 0.3);
  border: 2px dashed red; */
}

/* Coordenadas exactas — NO cambiar sin probar */
.pedestal-slot-creature {
  bottom: calc(33px * var(--ped-k));
  left: calc(44px * var(--ped-k));
}

.pedestal-slot-boss {
  bottom: calc(32px * var(--ped-k));
  left: calc(109px * var(--ped-k));
}

/* Sprites AUTO-AJUSTABLES */
.boosted-sprite-creature,
.boosted-sprite-boss {
  max-width: 110%;
  max-height: 110%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.8));
  /* Scaled like everything else on the pedestal. Left at a flat 3px it was
     3/91 of the height at full size but 3/56 on a phone -- proportionally
     almost double -- so the sprites sat visibly higher in their frames than
     the calibration puts them. */
  margin-bottom: calc(3px * var(--ped-k, 1));
}

/* ============================================
   LANGUAGE SWITCHER — Banderas SVG verticales
   ============================================ */

.lang-switcher {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  flex-shrink: 0;
  /* Sin fondo — solo las banderas */
}

.lang-btn {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-btn img {
  display: block;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.lang-btn:hover {
  transform: scale(1.12);
}

.lang-btn.active {
  border-color: rgba(255, 255, 255, 0.70);
  border-radius: 6px;
  transform: scale(1.08);
}

.lang-btn {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 3px 5px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.lang-btn:hover {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.08);
}

.lang-btn.active {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.10);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

/* ============================================
   SOLUCIÓN AL DESPLAZAMIENTO
   ============================================ */

/* The bar is fixed, so the page needs a gap the same height underneath it.
   That height was written by hand for each breakpoint and did not match: the
   stacked header measured 202px against a reserved 160, so 42px of the page
   sat behind the bar on every phone.

   --header-h is measured from the bar itself by header-bar.js and kept in
   sync with a ResizeObserver, which matters because the height is not a
   constant even at one width -- the boosted sprites arrive late, and the
   status text changes length when the bot goes online. 90px is the desktop
   height, used until the script runs. */
body {
  padding-top: var(--header-h, 90px) !important;
}

.container {
  padding-top: 40px !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Hidden only where the header is still one row and the label would push the
   pedestal into the countdown. The mobile block below brings it back, beside
   the pedestal rather than above it, where it costs no height. */
@media (max-width: 1100px) and (min-width: 993px) {
  .boosted-label { display: none; }
}

/* Stacking the three groups in a column cost 202px of an 812px screen -- a
   quarter of the phone given to a status line, a clock and two flags, before
   the page starts.

   Two rows instead: the status and the countdown share the first, since
   neither is wide, and the pedestal takes the second because it cannot
   shrink. Grid rather than flex order: the pedestal has to span both columns
   on its row, and column ordering alone cannot say that. */
@media (max-width: 992px) {
  .top-header-bar {
    height: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 3px;
    column-gap: 14px;
    padding: 6px 16px;
  }

  .header-left {
    grid-area: 1 / 1;
    min-width: 0;
    gap: 8px;
  }

  /* Was absolutely centred against the whole bar, which only makes sense
     while it is one row. */
  .header-center {
    grid-area: 1 / 2;
    position: static;
    transform: none;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  /* Spans the row and pushes its two children to the edges, so the pedestal
     lines up under the status and the flags under the countdown. Centring it
     instead left the second row floating against a first row that was
     edge-to-edge -- four items on four different alignments. */
  /* Two areas: the pedestal with its caption above it on the left, the flags
     on the right spanning both. Grid rather than space-between, which with
     three children parked the pedestal in the middle of the row with nothing
     to line up against. */
  .header-right {
    grid-area: 2 / 1 / 3 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "label    flags"
      "pedestal flags";
    justify-content: space-between;
    align-items: end;
    column-gap: 8px;
    row-gap: 2px;
  }

  .boosted-label {
    grid-area: label;
    display: block;
    /* Centred over the pedestal rather than flush left: the column is sized by
       the pedestal, so this centres the caption on what it captions. */
    justify-self: center;
    font-size: 9px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.75);
  }

  .boosted-pedestal { grid-area: pedestal; justify-self: start; }
  .lang-switcher    { grid-area: flags; align-self: center; }

  /* Pinned to the top of its row instead of centred against the taller
     countdown beside it. */
  .header-left { align-self: start; }

  .bot-status-text { font-size: 11px; letter-spacing: 0.5px; }
  .countdown-label { font-size: 10px; letter-spacing: 1px; }

  /* Side by side down here: stacked, the two flags are taller than the row
     needs, and there is width to spare beside the pedestal. */
  .lang-switcher { flex-direction: row; margin-left: 0; }
}

@media (max-width: 576px) {
  .countdown-timer { font-size: 18px; }



  .lang-btn { font-size: 18px; padding: 2px 4px; }

  /* On a 375px screen the status text and the countdown do not both fit on
     one line laid out side by side, and the status wrapped mid-phrase. The
     countdown goes back to a two-line stack -- narrow but no taller than the
     status beside it -- which buys the width the status needs to stay on
     one. */
  .bot-status-text { white-space: nowrap; font-size: 10px; }

  /* One line instead of two. The countdown is the tallest thing in the first
     row, so stacking its label above the timer set the whole row's height --
     side by side it costs about 14px less. The label drops to 8px to buy the
     width that needs, which still fits a 360px phone; below about 330 it
     wraps again. */
  .header-center   { flex-direction: row; align-items: baseline; gap: 6px; }
  .countdown-label { font-size: 8px; letter-spacing: 0.8px; }
  .countdown-timer { font-size: 15px; }

  /* 0.62 rather than 0.766: the row now carries the label as well, and this is
     the largest factor that still fits a 360px phone -- half of Android. */
  .boosted-pedestal { --ped-k: 0.62; }
}