/* The question is the hero; the six-second reveal never counts as play time. */
#welcome #start {
  display: block;
  width: min(100%, 440px);
  min-height: 76px;
  margin: 20px auto 0;
  padding: 16px 32px;
  border: 2px solid #ffe7a5;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffe9a0, #f5bc39);
  color: #291031;
  box-shadow: 0 5px 0 #b72c8b;
  font: 700 clamp(28px, 4vw, 34px)/1.15 Inter, sans-serif;
  cursor: pointer;
}
#welcome #start:hover { background: #ffedae; }
#welcome #start:focus-visible { outline: 4px solid #fff; outline-offset: 5px; }
.question-intro-mode:not(.viewing-page) .compact-header,
.question-intro-mode:not(.viewing-page) .format-title { visibility: hidden; }
#question-intro[hidden] { display: none !important; }
#question-intro {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  gap: clamp(12px, 2.5vh, 28px);
  box-sizing: border-box;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: auto;
  text-align: center;
  color: #fff6dd;
  background: radial-gradient(ellipse at 50% 30%, #69215f 0, #291032 52%, #12091d 100%);
}
.question-intro-logo { width: clamp(112px, 17vw, 180px); height: auto; flex: 0 0 auto; }
#question-intro .question-intro-label { margin: 0; color: #f8cf66; font: 700 14px/1.3 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
#question-intro-title {
  max-width: 1100px;
  margin: 0;
  font: 700 clamp(32px, min(6.8vw, 8vh), 88px)/1.08 Inter, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
#question-intro-title:focus { outline: none; }
#question-intro .question-intro-hook { margin: 0; font-size: clamp(18px, 2.6vw, 28px); line-height: 1.3; color: #ffd36e; }
#question-intro-promise { margin: 0; font-size: clamp(14px, 1.8vw, 18px); color: #e9d7e9; }
.question-intro-timer { width: min(100%, 360px); margin-top: 8px; }
.question-intro-track { height: 5px; background: #ffffff24; border-radius: 99px; overflow: hidden; }
.question-intro-track::after { content: ''; display: block; height: 100%; background: #f8cf66; transform: scaleX(var(--question-progress, 0)); transform-origin: left; transition: transform .25s linear; }
#question-intro-count { display: block; margin-top: 12px; font: 400 14px/1.4 Inter, sans-serif; font-variant-numeric: tabular-nums; color: #d4bed4; }
.playing-mode .game-heading h1 { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; text-wrap: balance; }
@media (max-height: 600px) {
  #welcome #start { min-height: 58px; margin-top: 12px; padding: 10px 24px; }
  #question-intro { gap: 10px; }
  .question-intro-logo { width: 100px; }
  #question-intro-title { font-size: clamp(28px, 5vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  .question-intro-track::after { transition: none; }
}

#question-intro .logo-welcome{display:none;margin:0;color:#fff6dd;font:700 clamp(23px,5vw,34px)/1.25 Inter,sans-serif;text-wrap:balance}
#question-intro.logo-phase .logo-welcome{display:block}
#question-intro.logo-phase .question-intro-logo{width:min(72vw,360px);height:auto;mix-blend-mode:screen}
#question-intro.logo-phase .question-intro-label,
#question-intro.logo-phase #question-intro-title,
#question-intro.logo-phase .question-intro-hook,
#question-intro.logo-phase #question-intro-promise,
#question-intro.logo-phase .question-intro-timer{display:none}

#site-welcome[hidden]{display:none!important}
#site-welcome{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 30%,#69215f 0,#291032 52%,#12091d 100%);color:#fff6dd}
#site-welcome img{width:min(72vw,360px);height:auto;mix-blend-mode:screen}
#site-welcome p{margin:0;font:700 clamp(23px,5vw,34px)/1.25 Inter,sans-serif;text-wrap:balance}