/* Guess the Celebrity — page-specific styles.
   Layout + Dify embed overrides. The page background comes from styles.css. */

:root {
  /* Tune these to taste: lower = more see-through */
  --chat-opacity: 0.82;
  /* The panel sits *behind* the faded iframe and acts as a scrim: without it
     the background image shows through the chat text and kills legibility. */
  --panel-alpha: 0.42;
}

/* --- Dify embed overrides --- */

#dify-chatbot-bubble-button {
  background-color: #1C64F2 !important;
}

#dify-chatbot-bubble-window {
  position: fixed !important;
  width: 24rem !important;
  height: 40rem !important;
  opacity: var(--chat-opacity);
}

/* Keep the floating chat window inside small screens */
@media (max-width: 480px) {
  #dify-chatbot-bubble-window {
    width: calc(100vw - 1rem) !important;
    height: calc(100dvh - 6rem) !important;
    max-height: 40rem !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
  }
}

/* --- Page layout: fill the viewport on desktop, adapt on mobile --- */

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: sans-serif;
  text-align: center;
  /* Background is intentionally NOT set here — the site-wide
     main_background.png from styles.css applies. */
}

#gameContainer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(100%, 1400px);
  margin: 0 auto;
  /* fallback first, then dynamic viewport units for mobile browser chrome */
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  border-radius: 0;
  /* Glassy panel so the page background reads through */
  background-color: rgba(255, 255, 255, var(--panel-alpha));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#gameContainer h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 4vw, 2.5rem);
  color: #1a1a1a;
  /* main_background.png is bright at the top — light halo keeps this legible */
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85);
}

#gameContainer .game-intro {
  /* flex-shrink:0 so the intro never gets squeezed when the iframe grows */
  flex: 0 0 auto;
  max-width: 80ch;
  /* auto inline margins: body sets text-align:center (numberguessing.css), so
     without this the block hugs the left edge while its text centers inside. */
  margin: 0 auto 0.75rem;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  line-height: 1.45;
  color: #1a1a1a;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85);
}

#gameContainer iframe {
  flex: 1 1 auto;
  width: 100%;
  /* min-height:0 lets the flex item shrink below its content on short screens */
  min-height: 0;
  border: 0;
  border-radius: 20px;
  display: block;
  opacity: var(--chat-opacity);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
  #gameContainer {
    border-radius: 30px;
  }

  #gameContainer iframe {
    min-height: 500px;
  }
}

/* iOS handles background-attachment:fixed badly (rescales/jumps) */
@media (max-width: 767px) {
  body {
    background-attachment: scroll;
  }
}