/* Local practice changes; core pixel scene and controls are from OpenKrillion. */
:root {
  --stage-bottom: 24px;
  --stage-rail: 0px;
}
@media (min-width: 1200px) {
  :root {
    --stage-rail: 110px;
  }
}
.hero {
  top: clamp(68px, 13vh, 140px);
}
.hero .hero-word {
  font-size: clamp(54px, 11vw, 102px);
  letter-spacing: 0.05em;
}
.hero .open-label {
  font-size: 13px;
  letter-spacing: 0.14em;
}
.hero .tagline {
  font-size: 20px;
  margin-top: 6px;
}
.subline {
  font-size: 18px;
  margin-top: 8px;
}
.intro {
  bottom: clamp(18px, 4.5vh, 42px);
  gap: 10px;
}
.sample-note {
  max-width: 500px;
  margin: 6px auto 0;
  font-size: 14px;
  line-height: 1.3;
  color: #a6bdd7;
}
.intro-links {
  font-size: 15px;
}
.result-header .result-brand {
  font-size: 18px;
}
.logbook-line,
.practice-score-note {
  font-size: 16px;
  color: #a6bdd7;
}
.source-note {
  font-size: 16px;
  line-height: 1.4;
  color: #a6bdd7;
}
.source-note a {
  color: #4de3ff;
}
.timer-hot #answer-status {
  color: #fff;
}
@media (max-width: 480px) {
  .hero {
    top: clamp(56px, 11vh, 100px);
  }
  .hero .hero-word {
    font-size: 58px;
  }
  .hero .open-label {
    font-size: 11px;
  }
  .subline {
    font-size: 15px;
  }
  .sample-note {
    max-width: 290px;
    font-size: 13px;
  }
  .intro-links {
    font-size: 14px;
  }
}

body[data-phase="done"] .hero,
body[data-phase="done"] .hud {
  display: none;
}
.storage-warning {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  max-width: 220px;
  padding: 6px 10px;
  background: #30220f;
  color: #ffdc9a;
  font-size: 14px;
  text-align: center;
}