#app:has(.hero:not([hidden])) > :not(.hero) { visibility: hidden; }
#panel.hero {
  inset: 0;
  transform: none;
  width: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: auto;
  text-align: left;
  background: #110b24;
  box-shadow: none;
  isolation: isolate;
}
.hero-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
.hero::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,#100a22 0%,#100a22e8 24%,#100a228f 45%,#100a2215 70%),
              linear-gradient(0deg,#100a22a8,transparent 28%);
}
.hero-content {
  min-height: 100%;
  max-width: 660px;
  width: 54%;
  margin-left: clamp(26px,7vw,122px);
  padding: clamp(26px,7vh,90px) 12px clamp(28px,7vh,80px) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.hero-kicker {
  color: #f8d68d;
  font-weight: 850;
  letter-spacing: .21em;
  text-transform: uppercase;
}
#panel.hero h1 {
  margin: 12px 0 16px;
  font-size: clamp(41px,6.3vw,100px);
  line-height: .94;
  letter-spacing: -.055em;
  color: #ffe8a6;
  text-shadow: 0 3px 0 #8c4b55, 0 8px 28px #170b25;
}
#panel.hero h1 span { display: block; color: #ffd37a; }
#panel.hero .hero-copy {
  max-width: 37ch;
  margin: 4px 0 20px;
  color: #f7e8f7;
  font-size: clamp(15px,1.6vw,21px);
}
.hero-choice { color: #fff1c7; font-weight: 700; }
.hero #apprentice {
  background: #241536;
  color: #fff0d1;
  border: 1px solid #d2a36d;
  padding: 7px 9px;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 6px; }
.hero #begin {
  margin: 0;
  padding: 11px 23px;
  min-height: 46px;
  border-color: #fff0bf;
  color: #261328;
  background: linear-gradient(#fff1be,#ebbc65);
  box-shadow: 0 4px 20px #db965a41;
}
.hero #begin:hover:not(:disabled) { background: #fff0be; }
.hero #reset { background: #2b1942ad; border-color: #a57e9d; }
.hero #message { margin: 3px 0; }
.hero #asset-note { margin: 4px 0 0; }
.hero #asset-note:empty, .hero #message:empty { display: none; }
.hero.victory .hero-copy, .hero.victory .hero-choice { display: none; }
@media (max-width: 620px) and (orientation: portrait) {
  .hero-art { height: 56%; object-position: 72% 30%; }
  .hero::before { position: absolute; height: 61%; background: linear-gradient(0deg,#110b24 5%,#110b2480 39%,transparent 66%); }
  .hero-content { width: auto; margin: 0; padding: min(39dvh,320px) 22px 28px; min-height: 0; }
  #panel.hero h1 { font-size: clamp(43px,11vw,68px); margin: 9px 0 12px; }
  #panel.hero .hero-copy { margin-bottom: 13px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero-content { padding-block: 18px; }
  #panel.hero h1 { font-size: clamp(33px,7.5vh,53px); }
  #panel.hero .hero-copy { margin-bottom: 12px; }
}

.hero .level-choice { margin-top: 12px; }
.hero #level-select {
  max-width: min(67vw, 340px);
  margin-left: 5px;
  background: #241536;
  color: #fff0d1;
  border: 1px solid #d2a36d;
  border-radius: 6px;
  padding: 6px;
}
.hero.victory .level-choice:not([hidden]) { display: block; }