/* Hex Royale — Sprint A styles */
:root {
  --bg: #0b0f23;
  --panel: #141e43;
  --text: #e7ebff;
  --accent: #4d8cf5;
  --barbg: #1b2b62;
  --barfg: #76e0ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Use a subtle radial gradient in the background to give depth and richness.
   The gradient emanates from the top centre, fading into darker tones at the
   edges. */
body {
  /* Use a bespoke backdrop rather than a plain radial gradient.  The
     background image (bg1.png) features softly blended pastels and
     subtle hex patterns that compliment the jewel palette.  We layer
     the image on top of the base colour and fix it so it stays
     stationary behind the board. */
  background-color: var(--bg);
  background-image: url('bg1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

.frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Enhance the board with a soft glow and a subtle border to make it pop from
   the background.  The additional box shadow provides a coloured halo that
   compliments the gem hues. */
#board {
  display: block;
  width: min(96vmin, 96vw, 96vh);
  height: min(96vmin, 96vw, 96vh);
  /* Apply a textured backdrop to the board using bg2.png.  The image
     contains dark nebulous colours and faint hex outlines that add
     depth without distracting from the gems.  We blend it with the
     panel colour so that the overall tone remains consistent with
     the rest of the UI. */
  background-color: var(--panel);
  background-image: url('bg2.png');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  border-radius: 24px;
  box-shadow: 0 6px 28px rgba(0,0,0,.55), 0 0 14px rgba(76, 126, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.04);
  /* Gently pulse the board’s halo to draw the eye.  The animation
     alternates between a slightly brighter and dimmer outer glow. */
  animation: glowPulse 8s infinite ease-in-out;
  /* Positioning relative allows us to attach a shimmering overlay via
     ::after without affecting layout.  Overflow hidden ensures the
     overlay stays within the board boundary. */
  position: relative;
  overflow: hidden;
}

/* Add a shimmering overlay that drifts across the board.  This layer
   uses a soft radial gradient that moves slowly to create a subtle
   sparkle effect, enhancing the richness of the board visuals. */
#board::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);
  animation: sparkleMove 20s linear infinite;
  transform-origin: center;
}

@keyframes sparkleMove {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(50%, 50%) rotate(360deg); }
}

/* Keyframes for pulsing the board glow.  At the midpoint the halo
   intensifies to emphasise the board. */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 6px 28px rgba(0,0,0,.55), 0 0 14px rgba(76, 126, 255, 0.3);
  }
  50% {
    box-shadow: 0 6px 28px rgba(0,0,0,.55), 0 0 22px rgba(76, 126, 255, 0.6);
  }
}

.hud {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; pointer-events: none;

  /* Elevate the HUD above the board and its animated overlay.  Without a
     z-index the shimmering overlay attached to the board can overlap
     the controls on very small screens, causing the timer and score to
     become hard to see.  Assigning a higher z-index ensures the HUD
     remains visible on top of the board. */
  z-index: 20;
}
.hud .left, .hud .right { pointer-events: auto; display: flex; align-items: center; gap: 12px; }

.combo { display:flex; align-items:center; gap:8px; }
.combo .bar {
  width: 180px; height: 10px; border-radius: 999px; background: var(--barbg); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.combo .fill {
  height: 100%; width: 0%;
  /* Animated gradient that moves to create a sense of energy while the
     combo bar fills.  The gradient colours shift horizontally across the
     bar thanks to the moveGradient animation. */
  background: linear-gradient(90deg, var(--barfg), #a0ffd9, var(--barfg));
  background-size: 200% 100%;
  animation: moveGradient 4s linear infinite;
  box-shadow: 0 0 10px #76e0ff, 0 0 18px rgba(160,255,217,.6);
}

/* Animate the combo bar gradient horizontally to impart motion and energy */
@keyframes moveGradient {
  from { background-position: 0 0; }
  to   { background-position: -100% 0; }
}
.combo #mult { min-width: 40px; text-align: right; opacity: .9; }

/* Timer display next to combo bar */
.timer {
  font-size: 14px;
  opacity: 0.9;
  white-space: nowrap;
}

/* Style the action buttons in the HUD.  Removed the select element for mode
   selection on mobile so only buttons remain. */
.right button {
  appearance: none;
  border: 0;
  border-radius: 10px;
  /* Reduce vertical padding to make buttons thinner without shrinking
     the text horizontally.  A slimmer profile prevents buttons from
     overlapping the board on small screens. */
  padding: 6px 10px;
  font-weight: 600;
  background: #1f2e66;
  color: #c7d7ff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.right button:hover {
  filter: brightness(1.06);
}

.mobile-hint {
  position: absolute; bottom: env(safe-area-inset-bottom, 12px);
  left: 12px; right: 12px; text-align: center;
  /* Increase font size and give the hint a pill backdrop on mobile for
     better legibility.  The semi‑transparent background and rounded
     corners help the hint stand out without blocking the board. */
  font-size: 14px; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
  border-radius: 12px;
  pointer-events: none;
}
@media (pointer: fine) { .mobile-hint { display: none; } }

.seed {
  position: absolute; bottom: 12px; left: 14px; right: 14px; text-align: center;
  font-size: 12px; opacity: .75;
}

/* Responsive adjustments for small screens.  On narrow viewports the HUD
   items (score, combo, timer, mode selector and restart) wrap into a
   column so that the mode selector (“Classic/Daily/Weekly”) doesn’t get
   truncated or cut off.  The board is also reduced slightly to leave
   room for the controls. */
@media (max-width: 550px) {
  /* Stack the HUD items on mobile and tighten spacing.  Reducing the
     gaps and padding makes the header area more compact so the board
     and UI elements are not clipped underneath any host page header. */
  .hud {
    flex-direction: column;
    align-items: flex-start;
    /* Reduce vertical gaps between HUD items for a slimmer header */
    gap: 4px;
  }
  .hud .left, .hud .right {
    gap: 4px;
  }
  /* Increase the board size slightly on mobile to better utilise the
     available space.  Leaving more headroom via frame padding (see
     below) prevents the HUD from overlapping the host site’s header,
     while allowing the hex grid to grow. */
  #board {
    /* Expand the board on mobile to better utilise available space.  Bumping
       from 94vmin to 95vmin fills out the vertical layout without
       overflowing. */
    width: min(95vmin, 96vw, 95vh);
    height: min(95vmin, 96vw, 95vh);
  }

  /* Push the entire game area further down to avoid overlapping the host
     header on very small screens.  Increasing the top padding here
     ensures that both the HUD and the introductory overlays are fully
     visible below any persistent navigation bar. */
  .frame {
    /* Move the game board further up on mobile.  Lowering the top padding
       to 130px elevates the hexagonal grid slightly closer to the top
       edge while still leaving adequate space for the host header and
       HUD.  This small reduction from 140px raises the board a bit
       more while still ensuring the HUD and intro overlays never overlap
       the site’s header. */
    padding-top: 130px;
  }

  /* Offset the HUD slightly from the very top of the game area.  A small
     positive top value creates additional separation from the host
     header and contributes to a more compact overall header height. */
  .hud {
    /* Push the HUD further down relative to the frame to clear the host header */
    top: 40px;
  }

  /* Further shrink HUD font sizes and bold numbers on narrow viewports.
     This helps prevent the score and timer from wrapping and makes the
     header feel more compact. */
  .hud .left .score,
  .hud .left .timer,
  .hud .left .combo {
    /* Make text slightly smaller to thin out the header */
    font-size: 0.75rem;
  }
  .hud .left .score strong,
  .hud .left .timer strong {
    font-size: 0.85rem;
  }

  /* Reduce button padding and font size further on mobile to ensure
     multiple controls fit comfortably in the limited horizontal space.
     The smaller vertical padding also contributes to a lower header
     height overall. */
  .hud .right button {
    /* Further reduce padding and font size on very small screens */
    padding: 1px 5px;
    font-size: 0.6rem;
  }

  /* Narrow the combo bar on portrait devices.  A shorter bar prevents
     the timer and multiplier text from spilling off the right edge of
     the screen. */
  .combo .bar {
    width: 140px;
  }

  /* On small screens, enlarge the tutorial text and improve legibility.
     Increase the font size to 1.25rem and adjust line height to
     preserve readability without overflowing. */
  #introOverlay div {
    font-size: 1.25rem;
    line-height: 1.45;
  }
}

/* Ensure intro and tips overlays always sit above any host page headers.  The
   !important flags guarantee these overlays take precedence over any
   external styles injected by the embedding site. */
#introOverlay,
#tipsOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 100%;
  /* Raise the z-index further to ensure the overlay always appears above
     any host header or other third‑party elements.  Using a value
     slightly larger than the previous maximum gives the intro and
     tips overlays the highest stacking context. */
  z-index: 2147483650 !important;
}

/* On small portrait screens, push the overlay content down so it isn’t
   clipped by the host site’s header.  Adding a margin-top to the inner
   container preserves the overlay’s full height while offsetting its
   content below any persistent navigation bar. */
@media (max-width: 550px) {
  #introOverlay > div,
  #tipsOverlay > div {
    /* Offset the overlay content even further down on portrait screens
       to ensure it is never clipped by the host header.  A margin of
       200px keeps the guide modal entirely visible. */
    margin-top: 200px;
  }
  /* Constrain the width of the tips overlay on small screens so long
     descriptions don't run off the right edge.  Limiting the max
     width to 90% of the viewport prevents clipping while preserving
     readability. */
  #tipsOverlay > div {
    max-width: 90vw;
  }
}