:root {
  color-scheme: dark;
  --bg: #0d1d20;
  --panel: #142b2b;
  --line: #2c4842;
  --muted: #a2bdb1;
  --mint: #b9ecc7;
  --gold: #ffd28c;
}

/* Classroom growth goals share the existing dragon art and saved level rules. */
.growth-goals {
  margin: 28px 0 30px;
}
.growth-goals .section-title {
  align-items: baseline;
}
.growth-goals .section-title > span {
  font-size: 12px;
  color: #acbbcd;
}
.growth-goal-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 0.9fr;
  gap: 16px;
}
.growth-goal-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #35475d;
  border-radius: 20px;
  padding: 22px;
  background: linear-gradient(145deg, #18283c, #0c1829);
}
.growth-goal-card .eyebrow {
  margin: 0 0 8px;
  color: #c9d8ee;
  font-size: 11px;
  letter-spacing: 0.09em;
}
.growth-goal-card h3 {
  font-size: 22px;
  line-height: 1.4;
  margin: 6px 0 10px;
}
.growth-goal-card p {
  font-size: 13px;
  color: #b5c6dc;
  margin: 12px 0;
}
.next-level-card {
  background:
    radial-gradient(ellipse at 0 0, #47322255, transparent 75%),
    linear-gradient(145deg, #18283c, #0c1829);
}
.growth-needed {
  color: #ffd59b;
  font-size: 18px;
  display: block;
}
#growth-meter {
  width: 100%;
  height: 9px;
  appearance: none;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  margin: 16px 0 0;
  background: #26344b;
}
#growth-meter::-webkit-progress-bar {
  background: #26344b;
  border-radius: 10px;
}
#growth-meter::-webkit-progress-value {
  background: linear-gradient(90deg, #ed9c4b, #ffe6a8);
  border-radius: 10px;
}
#growth-meter::-moz-progress-bar {
  background: #ffd59b;
  border-radius: 10px;
}
#growth-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #a0b4cf;
  margin: 4px 0 14px;
}
.growth-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.growth-benefits li {
  border-left: 2px solid #a98756;
  padding-left: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.growth-benefits strong,
.growth-benefits span {
  display: block;
}
.growth-benefits strong {
  color: #f2e6d5;
  font-weight: 600;
}
.growth-benefits span {
  color: #a9bdd6;
  margin-top: 3px;
  font-size: 12px;
}
.form-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 6px -10px 0;
}
.form-pair figure {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: center;
}
.form-pair img {
  width: 128px;
  height: 128px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px #0006);
}
.form-pair figcaption strong {
  display: block;
  font-size: 13px;
  color: #f8e2c2;
}
.form-pair figcaption small {
  display: block;
  font-size: 11px;
  color: #9cb3d0;
}
.form-arrow {
  font-size: 32px;
  color: #f1c382;
  flex: 0 0 14px;
}
#form-needed {
  min-height: 22px;
}
#preview-upgrade {
  font-size: 13px;
  padding: 7px 14px;
}
.boss-goal-card {
  background: radial-gradient(ellipse at 100% 0, #66689a36, transparent 68%), #101e31;
}
.boss-goal-emblem {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #a59ace88;
  border-radius: 16px;
  color: #dbd1ff;
  background: linear-gradient(145deg, #54477866, #132941);
  font-size: 36px;
  margin: 10px 0;
}
#boss-goal-name {
  font-size: 23px;
}
#boss-goal-level {
  font-size: 15px;
  color: #e9d5ff;
  border: 1px solid #766894;
  padding: 3px 12px;
  border-radius: 20px;
}
#boss-goal-status {
  min-height: 40px;
}
#boss-goal-status[data-ready="true"] {
  color: #bce6ce;
}
.boss-goal-card a {
  font-size: 13px;
}
.dragon-ready img {
  object-fit: contain;
}

.upgrade-dialog {
  color: #f7ede1;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 20px 28px;
  border: 1px solid #caa27299;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 35%, #69453055, transparent 60%),
    linear-gradient(160deg, #1c2940, #0a1324);
  box-shadow:
    0 20px 120px #000a,
    0 0 70px #b6713122;
}
.upgrade-dialog::backdrop {
  background: #030a17d9;
  backdrop-filter: blur(8px);
}
.upgrade-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.upgrade-heading .eyebrow {
  margin: 0;
  color: #f1cf9b;
}
.upgrade-heading > strong {
  font-size: 15px;
  color: #ffe6b3;
  white-space: nowrap;
}
.upgrade-dialog h2 {
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.25;
  text-align: center;
  margin: 14px 0 0;
  color: #ffdfad;
}
.upgrade-scene {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 245px;
  overflow: hidden;
  isolation: isolate;
}
.upgrade-scene figure {
  margin: 0;
  text-align: center;
  z-index: 1;
}
.upgrade-scene img {
  object-fit: contain;
  max-width: 100%;
  filter: drop-shadow(0 10px 24px #0a081baa);
}
.upgrade-old {
  width: 140px;
  margin-right: 15px !important;
  padding-bottom: 25px;
  opacity: 0.7;
}
.upgrade-new {
  width: 230px;
}
.upgrade-new img {
  width: 230px;
  height: 230px;
}
.upgrade-scene figcaption {
  font-size: 13px;
  color: #f6d8a2;
}
.evolution-halo {
  position: absolute;
  width: 240px;
  height: 240px;
  top: 10px;
  left: calc(50% + 70px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #eaa46024, #9b592324 45%, transparent 69%);
  z-index: -1;
}
.evolution-halo i {
  position: absolute;
  inset: 12px;
  border: 1px solid #f6cf8b99;
  border-radius: 50%;
  box-shadow:
    0 0 20px #f6be6522,
    inset 0 0 24px #f6be6522;
}
.evolution-halo i:nth-child(2) {
  inset: 38px;
  border: 2px dashed #ffc77555;
}
.evolution-halo i:nth-child(3) {
  inset: 3px;
  border: 1px solid #ecd8b144;
  transform: rotateX(64deg) rotateZ(-20deg);
}
.evolution-sparks {
  position: absolute;
  top: 52px;
  width: 100%;
  text-align: center;
  word-spacing: 22px;
  color: #ffdfaa;
  font-size: 21px;
  text-shadow: 0 0 15px #ffb466;
  z-index: -1;
}
.evolving .upgrade-new img {
  animation:
    dragon-evolve-arrive 1.4s cubic-bezier(0.16, 0.65, 0.25, 1) both,
    dragon-evolve-float 4s 1.4s ease-in-out infinite;
}
.evolving .evolution-halo i:nth-child(2) {
  animation: dragon-halo-turn 16s linear infinite;
}
.evolving .evolution-sparks {
  animation: dragon-spark-rise 1.8s ease-out both;
}
.upgrade-benefits {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #e8bd6c33;
  background: #121c2f88;
  border-radius: 14px;
}
.upgrade-dialog .muted {
  font-size: 12px;
  margin: 14px 0;
  line-height: 1.7;
  color: #aabbd2;
}
.upgrade-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
@keyframes dragon-evolve-arrive {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.55);
    filter: brightness(1.7) drop-shadow(0 0 20px #ffcf85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes dragon-evolve-float {
  50% {
    transform: translateY(-8px);
  }
}
@keyframes dragon-halo-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes dragon-spark-rise {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.55);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 0.6;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 900px) {
  .growth-goal-grid {
    grid-template-columns: 1fr 1fr;
  }
  .boss-goal-card {
    grid-column: 1/-1;
    padding-left: 105px;
  }
  .boss-goal-emblem {
    position: absolute;
    left: 22px;
    top: 50px;
  }
  #boss-goal-status {
    min-height: 0;
  }
}
@media (max-width: 640px) {
  .growth-goals .section-title {
    flex-direction: column;
    align-items: start;
    gap: 0;
    margin-bottom: 14px;
  }
  .growth-goal-grid {
    grid-template-columns: 1fr;
  }
  .growth-goal-card {
    padding: 20px;
  }
  .boss-goal-card {
    grid-column: auto;
    padding-left: 98px;
  }
  .boss-goal-emblem {
    left: 20px;
    top: 44px;
    width: 54px;
    height: 54px;
  }
  .form-pair img {
    width: 136px;
    height: 136px;
  }
  .upgrade-dialog {
    padding: 20px 18px;
    border-radius: 20px;
  }
  .upgrade-heading {
    gap: 8px;
  }
  .upgrade-heading .eyebrow {
    font-size: 10px;
  }
  .upgrade-heading > strong {
    font-size: 13px;
  }
  .upgrade-scene {
    min-height: 245px;
  }
  .upgrade-old {
    width: 86px;
    margin-right: 4px !important;
    padding-bottom: 16px;
  }
  .upgrade-old img {
    width: 86px;
    height: 86px;
  }
  .upgrade-new {
    width: 208px;
  }
  .upgrade-new img {
    width: 208px;
    height: 208px;
  }
  .evolution-halo {
    width: 218px;
    height: 218px;
    left: calc(50% + 25px);
  }
  .evolution-sparks {
    font-size: 16px;
    word-spacing: 8px;
  }
  .upgrade-benefits {
    padding: 13px;
    gap: 12px;
  }
  .upgrade-benefits li {
    font-size: 12px;
  }
  .upgrade-benefits span {
    font-size: 11px;
  }
  .upgrade-actions button {
    padding: 10px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .upgrade-dialog *,
  .upgrade-dialog *::before,
  .upgrade-dialog *::after {
    animation: none !important;
    transition: none !important;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: radial-gradient(ellipse at 80% 0, #254b3f, transparent 48%), var(--bg);
  color: #f0f5e9;
  font:
    16px/1.65 system-ui,
    sans-serif;
}
main {
  max-width: 1280px;
  margin: auto;
  padding: 28px 36px;
}
header,
.section-title,
.hud,
.buttons,
.side-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
a {
  color: var(--mint);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.badge,
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.13em;
  color: var(--mint);
}
.badge {
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 30px;
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 30px 0 18px;
}
h1 {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin: 12px 0;
}
h1 span {
  display: block;
  font-size: 20px;
  letter-spacing: 0.04em;
  margin-top: 16px;
  color: var(--gold);
}
.hero p {
  color: var(--muted);
}
.growth {
  min-width: 172px;
  padding: 18px 22px;
  border: 1px solid #50725b;
  border-radius: 20px;
  transform: rotate(2deg);
  background: #244037;
}
.growth span,
.growth small {
  display: block;
}
.growth strong {
  display: block;
  font-size: 42px;
  color: var(--gold);
}
.growth small {
  font-size: 12px;
  color: var(--muted);
}
.notice {
  font-size: 13px;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: #27372c;
  color: #d9dfbd;
  border-radius: 0 10px 10px 0;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 17px;
}
.section-title {
  margin: 22px 0 10px;
}
.section-title span {
  font-size: 13px;
  color: var(--muted);
}
.pets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
button,
select {
  font: inherit;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 11px 16px;
}
button {
  background: var(--mint);
  color: #173529;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s;
}
button:hover:not(:disabled) {
  background: #d5f8c4;
  transform: translateY(-1px);
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.secondary {
  color: var(--mint);
  background: transparent;
}
.pet {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: #f0f5e9;
  background: linear-gradient(140deg, #243e36, #172e2c);
  min-width: 0;
  padding: 15px;
}
.pet:hover:not(:disabled) {
  background: #2c4b3d;
}
.pet[aria-pressed="true"] {
  border: 2px solid var(--gold);
  padding: 14px;
  background: #344b39;
}
.pet img {
  width: 82px;
  height: 86px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px #0005);
}
.pet strong {
  font-size: 20px;
  display: block;
}
.pet small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.pet em {
  font-size: 11px;
  color: var(--gold);
  font-style: normal;
}
.levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.level {
  text-align: left;
  color: #d5e5d5;
  background: #142d2b;
  padding: 13px;
}
.level[aria-pressed="true"] {
  border-color: var(--mint);
  background: #2a483b;
}
.level span {
  display: block;
  font-size: 25px;
  font-weight: 500;
  color: var(--gold);
}
.level strong {
  font-size: 14px;
  display: block;
}
.level small {
  font-size: 11px;
  color: var(--muted);
  display: block;
}
.launch {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  align-items: center;
  margin: 25px 0;
  padding: 22px;
  background: #19302e;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.prototype-note {
  color: #e6ca91;
  font-size: 13px;
  padding: 12px 16px;
  border: 1px solid #a0874d45;
  border-radius: 12px;
  background: #65513416;
}
.battle-hud {
  position: absolute;
  top: 58px;
  left: 18px;
  right: 18px;
  z-index: 3;
  pointer-events: none;
  color: #f4d695;
  font-size: 12px;
}
.battle-readout,
.journey,
.boss-row > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.battle-readout strong {
  min-width: 0;
  font-size: 12px;
}
#firepower[data-surge="true"] {
  color: #fff0b0;
  text-shadow: 0 0 10px #ffc75a70;
}
.battle-readout span,
.journey span {
  white-space: nowrap;
  color: #bfd4cc;
  font-size: 11px;
}
.journey {
  margin-top: 7px;
}
.battle-hud progress {
  height: 5px;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  background: #061b2c9c;
  flex: 1;
  min-width: 0;
  accent-color: #d2ab61;
}
.battle-hud progress::-webkit-progress-bar {
  background: #061b2c9c;
}
.battle-hud progress::-webkit-progress-value {
  background: linear-gradient(90deg, #9f8856, #ffe1a2);
}
.boss-row {
  margin-top: 14px;
  padding: 8px 12px;
  border: 1px solid #d9aaa44a;
  border-radius: 10px;
  background: #10212cc7;
}
.flight-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  color: #bbebd4;
  font-size: 11px;
}
.flight-readout time {
  flex-shrink: 0;
  color: #f3ddab;
  font-variant-numeric: tabular-nums;
}
.level .level-guardian {
  color: #eed3a2;
  margin: 4px 0;
}
.boss-row strong {
  font-size: 12px;
  color: #f5dcb6;
}
.boss-row span {
  font-size: 11px;
  color: #deb4c4;
}
.boss-row progress {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.boss-row progress::-webkit-progress-value {
  background: linear-gradient(90deg, #ad6686, #f0b4be);
}
.overlay[data-outcome="won"] {
  background: radial-gradient(ellipse at 50% 45%, #816c3a6b, #0b232cea 68%);
}
.overlay[data-outcome="won"] h2 {
  color: #ffe1a2;
}
label {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}
select {
  width: 100%;
  background: #102525;
  color: #e6f1df;
}
.launch p {
  font-size: 12px;
  margin: 6px 0;
  color: var(--muted);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.consent input {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  accent-color: var(--mint);
}
.buttons {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.immersive-controls {
  display: none;
}
.arena {
  display: grid;
  grid-template-columns: minmax(0, min(720px, 74svh)) 300px;
  justify-content: center;
  gap: 20px;
  scroll-margin-top: 12px;
}
.arena.sky-battle {
  grid-template-columns: minmax(0, min(720px, 62svh)) 300px;
}
.game {
  align-self: start;
  position: relative;
  background: #10272b;
  border: 1px solid #426450;
  border-radius: 22px;
  overflow: hidden;
  min-width: 0;
}
.game.sky-battle {
  padding-top: 186px;
  background: linear-gradient(145deg, #172c45, #091423);
  border-color: #a88750;
  box-shadow:
    0 12px 45px #05111f66,
    inset 0 1px 0 #f5daa233;
}
.game.sky-battle .hud {
  background: linear-gradient(#11243bf5, #11243b00);
}
.game.sky-battle .battle-hud {
  color: #ffe0a0;
}
.game.sky-battle .skillbar {
  background: linear-gradient(transparent, #0c172ce8);
}
#game {
  width: 100%;
  display: block;
  aspect-ratio: 720/760;
}
.hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  padding: 17px 20px;
  background: linear-gradient(#0c272be6, transparent);
  font-size: 14px;
}
#health {
  color: #dcffe9;
  font-weight: 700;
}
.player-health {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 1 180px;
  min-width: 84px;
}
.player-health progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 12px;
  border: 1px solid #c1dfa766;
  border-radius: 5px;
  background: #203344;
  overflow: hidden;
}
.player-health progress::-webkit-progress-bar {
  background: #203344;
  border-radius: 4px;
}
.player-health progress::-webkit-progress-value {
  background: linear-gradient(#9befbc, #339875);
  border-radius: 4px;
}
.player-health progress::-moz-progress-bar {
  background: linear-gradient(#9befbc, #339875);
}
.player-health[data-tone="warning"] #health {
  color: #ffe5ab;
}
.player-health[data-tone="warning"] progress::-webkit-progress-value {
  background: linear-gradient(#ffe2a0, #c1923e);
}
.player-health[data-tone="warning"] progress::-moz-progress-bar {
  background: linear-gradient(#ffe2a0, #c1923e);
}
.player-health[data-tone="danger"] #health {
  color: #ffc4cc;
}
.player-health[data-tone="danger"] progress::-webkit-progress-value {
  background: linear-gradient(#ff899a, #c63f63);
}
.player-health[data-tone="danger"] progress::-moz-progress-bar {
  background: linear-gradient(#ff899a, #c63f63);
}
#game-stop {
  padding: 6px 10px;
  font-size: 12px;
  flex-shrink: 0;
  color: #ffcebb;
  border-color: #a26f62;
  background: #2e3430;
}
.skillbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 16px 22px;
  background: linear-gradient(transparent, #092125f5);
}
.skillbar span,
.skillbar strong {
  display: block;
}
.skillbar span {
  font-size: 12px;
  color: var(--muted);
}
.skillbar strong {
  font-size: 18px;
  color: var(--gold);
}
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: #0b232cbb;
  backdrop-filter: blur(5px);
  padding: 30px;
  z-index: 2;
}
.overlay h2 {
  font-size: clamp(24px, 4vw, 40px);
  margin: 5px 0;
}
.overlay p:not(.eyebrow) {
  max-width: 450px;
  color: #c5ded0;
}
.overlay[hidden],
[hidden] {
  display: none !important;
}
aside {
  background: #152e2b;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  align-self: start;
}
#status {
  font-size: 14px;
  color: var(--mint);
  min-height: 66px;
}
.side-title {
  justify-content: flex-start;
  font-weight: 700;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
#camera iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 240px;
  border-radius: 12px;
  background: #0b141b;
}
#recal {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
}
.muted,
footer {
  font-size: 12px;
  color: var(--muted);
}
.instructions {
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.instructions p {
  font-size: 13px;
  color: var(--muted);
}
.instructions b {
  color: #e1eada;
}
.demo-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.demo-buttons button {
  font-size: 12px;
  padding: 8px 12px;
}
footer {
  padding: 24px 0;
}
#continue {
  margin-top: 16px;
}
@media (max-width: 900px) {
  main {
    padding: 20px;
  }
  .arena,
  .arena.sky-battle {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
  .pets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pet {
    flex-direction: column;
    text-align: center;
  }
  .launch {
    grid-template-columns: 1fr;
  }
  .growth {
    min-width: 140px;
  }
}
@media (max-width: 640px) {
  main {
    padding: 16px;
  }
  .hero {
    align-items: flex-start;
  }
  .hero > div:first-child {
    min-width: 0;
  }
  .growth {
    min-width: 94px;
    padding: 10px;
  }
  .growth strong {
    font-size: 30px;
  }
  .growth small {
    max-width: 84px;
  }
  .hero p {
    font-size: 13px;
  }
  h1 span {
    font-size: 16px;
  }
  .arena,
  .arena.sky-battle {
    grid-template-columns: 1fr;
  }
  .game.sky-battle {
    padding-top: 166px;
  }
  .levels {
    grid-template-columns: repeat(3, 1fr);
  }
  .pet {
    padding: 10px 5px;
  }
  .pet[aria-pressed="true"] {
    padding: 9px 4px;
  }
  .pet img {
    width: 65px;
    height: 70px;
  }
  .pet strong {
    font-size: 16px;
  }
  .pet small {
    font-size: 11px;
  }
  .section-title {
    align-items: flex-start;
  }
  .section-title span {
    max-width: 110px;
    text-align: right;
  }
  .badge {
    font-size: 10px;
  }
  #camera iframe {
    height: 260px;
  }
  .launch {
    padding: 16px;
  }
  .hud {
    padding: 12px;
    font-size: 12px;
  }
  .player-health {
    flex-basis: 120px;
  }
  .skillbar {
    padding: 10px 14px;
  }
  .skillbar strong {
    font-size: 15px;
  }
  .battle-hud {
    top: 48px;
    left: 12px;
    right: 12px;
  }
  .battle-readout strong,
  .boss-row strong {
    font-size: 10px;
  }
  .battle-readout span,
  .boss-row span {
    font-size: 10px;
  }
  .boss-row {
    margin-top: 7px;
    padding: 6px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

/* Dragon campaign, two original worlds, with compact equipment and map cards. */
body {
  background: radial-gradient(ellipse at 82% 0, #24475a, transparent 50%), #0b1725;
  color: #edf0ec;
}
:root {
  --panel: #14263a;
  --line: #304b61;
  --muted: #a1b5c4;
  --mint: #bedbde;
  --gold: #f3d498;
}
.growth {
  transform: none;
  background: linear-gradient(135deg, #203949, #162735);
  border-color: #607e85;
}
.notice {
  background: #233243;
  border-color: #b9cbd9;
  color: #b9cbd9;
  font-size: 12px;
  padding: 10px 14px;
}
.dragon-ready {
  display: flex;
  gap: 22px;
  align-items: center;
  border: 1px solid #667c864a;
  border-radius: 20px;
  padding: 16px 24px;
  background: linear-gradient(120deg, #23415455, #15273c);
}
.dragon-ready img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 5px 15px #de93442f);
}
.dragon-ready strong {
  font-size: 22px;
  color: #ffe2b0;
  overflow-wrap: anywhere;
}
.dragon-ready > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.dragon-ready p {
  color: var(--muted);
  margin: 8px 0;
  font-size: 14px;
}
.dragon-ready a {
  font-size: 13px;
  color: var(--gold);
}
#trial-level-row {
  margin-left: auto;
  min-width: 205px;
}
#trial-level-row label {
  color: var(--muted);
  font-size: 12px;
}
.trial-pet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  border: 1px solid #667c864a;
  border-radius: 18px;
  background: #142c4055;
}
.trial-pet-row label {
  font-weight: 700;
  color: var(--gold);
}
.trial-pet-row p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.trial-pet-row select {
  min-width: 185px;
}
.dragon-ready #pet-description {
  color: var(--pet-accent, #b7d6dc);
  font-size: 12px;
}
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.equipment-card {
  position: relative;
  border: 1px solid #61768b69;
  border-radius: 17px;
  background: linear-gradient(130deg, #21394b88, #13243a);
  padding: 20px;
}
.equipment-card label {
  font-weight: 700;
  color: #e5dac1;
  font-size: 15px;
  padding-left: 29px;
}
.gear-symbol {
  position: absolute;
  top: 15px;
  font-size: 23px;
}
.flame-symbol {
  color: #ffd184;
  text-shadow: 0 0 16px #df7226;
}
.shield-symbol {
  color: #9eeafd;
  text-shadow: 0 0 16px #49b2e3;
}
.wing-symbol {
  color: #b9b2fb;
  text-shadow: 0 0 16px #8970c1;
}
select {
  background: #122539;
  border-color: #415c74;
  color: #ecede8;
  padding: 9px 12px;
}
option:disabled {
  color: #758c9c;
}
.equipment-card p {
  color: var(--muted);
  font-size: 12px;
  margin: 9px 0 0;
  min-height: 20px;
}
.world-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.world-tabs button,
.adventure-modes button {
  background: #162c41;
  color: #abc4d5;
  font-size: 13px;
}
.world-tabs button[aria-pressed="true"],
.adventure-modes button[aria-pressed="true"] {
  border-color: #d7bb80;
  color: #f5dba8;
  background: #3d3b3555;
}
.world-banner {
  border-radius: 17px;
  min-height: 168px;
  padding: 22px 28px;
  background-size: cover;
  background-position: 50% 46%;
  border: 1px solid #80988966;
  margin-bottom: 12px;
}
.world-banner[data-world="frost"] {
  border-color: #6f99bc;
}
.world-banner p {
  margin: 0 0 4px;
  color: #c0d5dc;
  font-size: 13px;
}
.world-banner .eyebrow {
  font-size: 10px;
  color: #b0c5c7;
}
.world-banner h3 {
  margin: 0 0 3px;
  font-size: 27px;
  color: #f1e9d3;
}
.world-banner strong {
  font-size: 12px;
  font-weight: 500;
  color: #f4d5a1;
}
.levels {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.level {
  background: #14283c;
  color: #d3e0e7;
  min-height: 115px;
  border-color: #405669;
  padding: 13px 14px;
}
.level strong {
  font-size: 14px;
}
.level small {
  color: #a6b9c8;
  font-size: 11px;
}
.level[aria-pressed="true"] {
  background: #333d41;
  border-color: #eccb8e;
  box-shadow: inset 0 0 0 1px #e5bd80;
}
.level.boss-level {
  border-color: #a38365;
  background: linear-gradient(120deg, #3d344155, #13273b);
}
.level.boss-level span {
  color: #ffd5a0;
}
.adventure-modes {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 15px;
}
.adventure-modes span {
  color: var(--muted);
  font-size: 12px;
}
.launch {
  background: #14283c;
  border-color: #3b566a;
  margin-top: 22px;
}
.launch .buttons {
  align-items: center;
}
.selected-note {
  flex-basis: 100%;
  margin: 0 !important;
  color: #dfcfae !important;
}
#start {
  background: linear-gradient(125deg, #efd29b, #d5ae6b);
  color: #2c2c2d;
}
.secondary {
  background: #142c40;
  border-color: #405c72;
  color: #bdd3db;
}
aside {
  background: #13283b;
  border-color: #355467;
}
@media (max-width: 640px) {
  .dragon-ready {
    gap: 10px;
    padding: 12px;
    flex-wrap: wrap;
  }
  .dragon-ready img {
    width: 75px;
    height: 85px;
  }
  .dragon-ready > div:nth-child(2) {
    flex: 1;
    min-width: 190px;
  }
  .dragon-ready strong {
    font-size: 18px;
  }
  .dragon-ready p {
    font-size: 11px;
  }
  #trial-level-row {
    margin-left: 0;
    width: 100%;
  }
  .trial-pet-row {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }
  .equipment-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .equipment-card {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 55px 1fr;
    column-gap: 8px;
  }
  .equipment-card label {
    padding-left: 22px;
    align-self: center;
    margin: 0;
    font-size: 13px;
  }
  .gear-symbol {
    top: 10px;
    font-size: 19px;
  }
  .equipment-card p {
    grid-column: 1/-1;
    margin-top: 5px;
    min-height: 0;
  }
  .equipment-card select {
    font-size: 12px;
    padding: 7px;
  }
  .world-tabs {
    gap: 6px;
  }
  .world-tabs button {
    flex: 1;
    font-size: 11px;
    padding: 9px 6px;
  }
  .world-banner {
    min-height: 150px;
    padding: 18px;
  }
  .world-banner p {
    font-size: 11px;
  }
  .levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .level {
    min-height: 94px;
    padding: 10px 12px;
  }
  .adventure-modes button {
    font-size: 12px;
    padding: 9px 12px;
  }
  .adventure-modes span {
    flex-basis: 100%;
  }
}

.level:disabled {
  opacity: 0.72;
}
.adventure-wish,
.rematch-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  margin: 20px 0;
  border: 1px solid #776246;
  border-radius: 22px;
  background: radial-gradient(ellipse at 90% 0%, #b99e5824, transparent 65%), #16242d;
}
.adventure-wish > span {
  font-size: 40px;
  color: #e5c680;
}
.adventure-wish small {
  color: #cbb994;
  font-size: 12px;
}
.adventure-wish h2,
.rematch-card h2 {
  font-size: 23px;
  margin: 6px 0 8px;
}
.adventure-wish p,
.rematch-card p {
  margin: 6px 0;
  font-size: 13px;
  color: #c6d3cf;
}
.rematch-card > div {
  flex: 1;
  min-width: 0;
}
.rematch-card button {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .adventure-wish,
  .rematch-card {
    padding: 18px;
    gap: 12px;
  }
  .adventure-wish h2,
  .rematch-card h2 {
    font-size: 19px;
  }
  .rematch-card {
    flex-direction: column;
    align-items: stretch;
  }
}
.coach-opening {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin: 18px 0;
  background: linear-gradient(100deg, #253528, #182b33);
  border: 1px solid #62794e;
  border-radius: 18px;
}
.coach-opening p {
  margin: 7px 0 0;
  color: #c8ddc0;
  font-size: 14px;
}
#coach-battle-time {
  font-size: 11px;
  color: #d1e1b7;
  white-space: nowrap;
}
#coach-return {
  pointer-events: auto;
}
@media (max-width: 600px) {
  .coach-opening {
    align-items: flex-start;
    padding: 14px;
    flex-direction: column;
    gap: 12px;
  }
  .coach-opening button {
    width: 100%;
  }
}
.guide-choice,
.sound-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #c9d7df;
  margin: 14px 0;
}
.guide-choice input,
.sound-choice input {
  width: 16px;
  height: 16px;
  accent-color: var(--pet-accent, #ffd696);
}
.tutorial-panel {
  position: absolute;
  z-index: 3;
  top: 180px;
  left: 14px;
  right: 14px;
  padding: 16px;
  border: 1px solid #ecce8d66;
  border-radius: 16px;
  background: linear-gradient(140deg, #132b3df2, #172132f2);
  box-shadow: 0 8px 32px #0005;
}
.tutorial-panel[hidden] {
  display: none;
}
.tutorial-panel h3 {
  margin: 8px 0;
  color: #fff0c8;
  font-size: 20px;
}
.tutorial-panel p {
  margin: 8px 0 14px;
  font-size: 13px;
  color: #d0dfeb;
}
.tutorial-panel button {
  padding: 9px 13px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .tutorial-panel {
    top: 166px;
    padding: 12px;
  }
  .tutorial-panel h3 {
    font-size: 17px;
  }
}
/* A short launch path, with secondary choices available on demand. */
.quiet-interface main {
  max-width: 1120px;
  padding: 22px 30px;
}
.quiet-interface .hero {
  padding: 20px 0 10px;
  gap: 18px;
}
.quiet-interface h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 7px;
}
.quiet-interface .hero p {
  margin: 0;
  font-size: 14px;
}
.quiet-interface .hero .growth {
  min-width: 160px;
  padding: 9px 15px;
  transform: none;
}
.quiet-interface .hero .growth strong {
  font-size: 24px;
  line-height: 1.3;
}
.quiet-interface .quiet-notice {
  margin: 8px 0 14px;
  padding: 9px 14px;
  font-size: 12px;
}
.quiet-notice summary {
  cursor: pointer;
}
.quiet-notice p {
  margin: 10px 0 2px;
}
.quiet-interface .dragon-ready {
  padding: 12px 20px;
  gap: 18px;
}
.quiet-interface .dragon-ready > div {
  flex: 1;
}
.quiet-interface .dragon-ready p {
  margin: 5px 0;
  font-size: 13px;
}
.quiet-interface .launch {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  padding: 18px 20px;
  gap: 24px;
}
.quiet-interface .launch select {
  width: 100%;
}
.quiet-interface #mode-note {
  font-size: 12px;
  margin: 6px 0 0;
}
.launch-route > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.quiet-interface .selected-note {
  margin: 3px 0 12px;
  font-size: 14px;
  line-height: 1.6;
}
.quiet-interface .consent {
  font-size: 12px;
}
.quiet-interface .buttons {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.quiet-interface #start {
  min-width: 190px;
  padding: 12px 25px;
}
.quiet-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 20px;
}
.quiet-fold {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #10223588;
}
.quiet-fold > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 12px 35px 12px 16px;
  font-size: 14px;
  font-weight: 600;
}
.quiet-fold > summary::-webkit-details-marker {
  display: none;
}
.quiet-fold > summary::after {
  content: "+";
  position: absolute;
  right: 15px;
  top: 12px;
  color: var(--muted);
}
.quiet-fold[open] > summary::after {
  content: "−";
}
.quiet-fold > summary > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.quiet-fold > summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 14px;
}
.quiet-options > .quiet-fold[open] {
  grid-column: 1 / -1;
}
.quiet-fold-body {
  padding: 0 16px 16px;
}
.quiet-interface .growth-goals {
  margin: 0;
}
.quiet-interface .trial-pet-row {
  margin: 8px 0 16px;
}
.quiet-interface #trial-level-row {
  width: 100%;
}
.trial-settings {
  margin-top: 18px;
}
.guide-setting {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 10px;
}
.quiet-interface aside .instructions {
  margin-top: 14px;
}
.quiet-interface aside .instructions h3 {
  font-size: 14px;
}
.quiet-interface footer {
  margin-top: 16px;
}
.quiet-interface .quiet-about {
  border: 0;
  background: transparent;
  color: var(--muted);
}
@media (max-width: 700px) {
  .quiet-interface main {
    padding: 16px;
  }
  .quiet-interface .hero .growth {
    min-width: 115px;
  }
  .quiet-interface .hero .growth small {
    display: none;
  }
  .quiet-interface .dragon-ready {
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
  }
  .quiet-interface .dragon-ready img {
    width: 86px;
    height: 86px;
  }
  .quiet-interface .launch {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .quiet-options {
    grid-template-columns: 1fr;
  }
  .quiet-interface #start {
    width: 100%;
  }
}

/* Battle fills the viewport; the full portrait playfield stays proportional. */
body.immersive-battle {
  overflow: hidden;
  overscroll-behavior: none;
}
.immersive-battle main {
  margin: 0;
  padding: 0;
  max-width: none;
}
.immersive-battle main > :not(#arena) {
  display: none;
}
.immersive-battle .arena.sky-battle {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  overflow: hidden;
  background: #102235 url("/art/sky-v1/canyon-v1.webp") center / cover no-repeat;
  isolation: isolate;
}
.immersive-battle[data-battle-world="1"] .arena.sky-battle {
  background-image: url("/art/sky-v3/frost-sea-v1.png");
}
.immersive-battle .arena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #071b35a6, #0b233633 32%, #0b233633 68%, #071b35a6);
  z-index: -1;
  pointer-events: none;
}
.immersive-battle .game.sky-battle {
  align-self: center;
  width: min(100vw, calc(100dvh * 720 / 760));
  height: min(100dvh, calc(100vw * 760 / 720));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 0 100px #0b213977;
}
.immersive-battle #game {
  width: 100%;
  height: 100%;
  aspect-ratio: 720 / 760;
}
.immersive-battle .game .hud {
  top: 50px;
  padding: 4px 12px;
  font-size: 12px;
  background: none;
  gap: 8px;
}
.immersive-battle .player-health {
  flex: 0 0 74px;
  min-width: 74px;
}
.immersive-battle #health {
  display: none;
}
.immersive-battle .player-health progress {
  height: 6px;
}
.immersive-battle .game .battle-hud {
  top: 78px;
  padding: 5px 12px;
  background: linear-gradient(#0a1c3280, transparent);
  font-size: 11px;
}
.immersive-battle .battle-readout strong {
  font-size: 11px;
}
.immersive-battle .flight-readout {
  font-size: 10px;
}
.immersive-battle .game .skillbar {
  padding: 6px 12px;
  pointer-events: none;
}
.immersive-battle .skillbar strong {
  font-size: 13px;
}
.immersive-battle .skillbar span {
  font-size: 10px;
}
.immersive-battle .immersive-controls {
  position: fixed;
  display: flex;
  gap: 6px;
  right: 12px;
  top: 54px;
  z-index: 12;
}
.immersive-battle .immersive-controls button {
  padding: 6px 10px;
  min-height: 32px;
  font-size: 12px;
  background: #142b3dd9;
  border-color: #d5d8bc77;
  backdrop-filter: blur(8px);
}
.immersive-battle .arena > aside {
  display: none;
}
.immersive-battle[data-input-mode="camera"] .arena > aside {
  /* Keep the active detector iframe rendered so its frame loop continues. */
  display: block;
  position: fixed;
  top: 98px;
  right: 12px;
  width: 180px;
  z-index: 10;
  padding: 8px;
  background: #102738d9;
  border: 1px solid #e8e0be66;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
}
.immersive-battle[data-input-mode="camera"][data-camera-preview="true"] .arena > aside {
  opacity: 1;
  pointer-events: auto;
}
.immersive-battle .arena > aside > :not(#camera):not(#status):not(#recal) {
  display: none;
}
.immersive-battle #camera iframe {
  height: 120px;
}
.immersive-battle #status {
  min-height: 0;
  font-size: 11px;
  line-height: 1.5;
  margin: 3px 0;
}
.immersive-battle #recal {
  padding: 5px;
  margin-top: 5px;
}
.immersive-battle[data-managed-game="true"] #game-stop {
  display: none;
}
.immersive-battle .tutorial-panel {
  top: 150px;
  bottom: auto;
  left: 50%;
  right: auto;
  width: min(430px, calc(100% - 28px));
  transform: translateX(-50%);
}
@media (max-width: 600px) {
  .immersive-battle .game .hud {
    font-size: 10px;
    top: 46px;
  }
  .immersive-battle .game .battle-hud {
    top: 72px;
  }
  .immersive-battle .immersive-controls {
    top: 46px;
    right: 8px;
  }
  .immersive-battle[data-input-mode="camera"] .arena > aside {
    top: 84px;
    width: 145px;
    right: 8px;
  }
  .immersive-battle #camera iframe {
    height: 96px;
  }
}

/* Keep the energy gauge inside the visible game frame, including immersive mode. */
.skillbar {
  z-index: 5;
  box-sizing: border-box;
  gap: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.ultimate-hud {
  width: min(52%, 240px);
  min-width: 150px;
  padding: 7px 10px;
  border: 1px solid #8cbac566;
  border-radius: 12px;
  background: #0c2234db;
}
.ultimate-hud progress {
  display: block;
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #284451;
  margin: 5px 0;
}
.ultimate-hud progress::-webkit-progress-bar {
  background: #284451;
  border-radius: 20px;
}
.ultimate-hud progress::-webkit-progress-value {
  background: linear-gradient(90deg, #5bbbe1, #b5e7fa);
  border-radius: 20px;
  transition: width 0.1s linear;
}
.ultimate-hud strong {
  font-size: 12px;
  color: #b5e7fa;
}
.ultimate-hud[data-state="ready"] {
  border-color: #ffe184;
  box-shadow: 0 0 18px #e6c45c55;
}
.ultimate-hud[data-state="ready"] strong {
  color: #ffe8a1;
}
.ultimate-hud[data-state="ready"] progress::-webkit-progress-value {
  background: linear-gradient(90deg, #edb844, #fff1ae);
}
.ultimate-hud[data-state="cooldown"] strong,
.ultimate-hud[data-state="paused"] strong {
  color: #c0c9d0;
}
.immersive-battle .game .skillbar {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.victory-scene {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse, #225a6899, #091c32cc);
  color: #fff2bc;
  text-align: center;
  animation: victory-arrive 0.4s ease-out;
}
.victory-scene[hidden] {
  display: none;
}
.victory-scene > :not(.victory-rays) {
  position: relative;
}
.victory-scene p {
  font-size: 16px;
  letter-spacing: 0.12em;
  margin: 10px 0;
  color: #d4e8d0;
}
.victory-scene h2 {
  font-size: clamp(38px, 7vw, 66px);
  margin: 0 0 12px;
  text-shadow: 0 0 25px #f3d27566;
}
.victory-scene strong {
  font-size: 20px;
}
.victory-scene span {
  display: block;
  margin: 12px;
  color: #c2d8d5;
  font-size: 15px;
}
.victory-medal {
  width: 112px;
  height: 112px;
  border: 2px solid #f0d27d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 72px;
  color: #fff0ad;
  background: radial-gradient(circle, #d9a94199, #b1753022);
  box-shadow:
    0 0 60px #d8c05f66,
    inset 0 0 28px #edc46155;
  animation: victory-medal 1.2s ease-out;
}
.victory-rays {
  position: absolute;
  width: 160%;
  aspect-ratio: 1;
  background: repeating-conic-gradient(#f3db8c19 0deg 10deg, transparent 10deg 26deg);
  animation: victory-rays 12s linear infinite;
}
@keyframes victory-arrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes victory-medal {
  0% {
    transform: scale(0.2) rotate(-40deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.12) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
@keyframes victory-rays {
  to {
    transform: rotate(360deg);
  }
}
.overlay[data-outcome="won"]::before {
  content: "★ 通关成功 ★";
  display: block;
  font-size: 22px;
  letter-spacing: 0.1em;
  color: #ffe493;
}
@media (prefers-reduced-motion: reduce) {
  .victory-scene,
  .victory-medal,
  .victory-rays {
    animation: none;
  }
  .ultimate-hud progress::-webkit-progress-value {
    transition: none;
  }
}

/* Keep status and skill bars outside the 720 × 760 combat surface.
   The canvas keeps its intrinsic aspect ratio, so camera/drag coordinates stay unchanged. */
.game.sky-battle {
  display: flex;
  flex-direction: column;
  padding-top: 0;
}
.game.sky-battle .battle-header {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
  padding: 8px 12px;
  background: #102438f5;
  border-bottom: 1px solid #8fa2a52e;
  z-index: 3;
}
.game.sky-battle .battle-header .hud {
  grid-column: 1;
  position: static;
  width: auto;
  padding: 0;
  gap: 8px;
  font-size: 11px;
  line-height: 1.35;
  background: none;
}
.game.sky-battle .battle-header #wave {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.game.sky-battle .battle-header .player-health {
  flex: 0 0 74px;
  min-width: 74px;
  gap: 3px;
}
.game.sky-battle .battle-header .player-health progress {
  height: 6px;
}
.game.sky-battle .battle-header .battle-hud {
  grid-column: 1 / -1;
  position: static;
  display: grid;
  gap: 4px;
  padding: 0;
  font-size: 11px;
  line-height: 1.35;
  background: none;
}
.game.sky-battle .battle-header .battle-readout strong {
  font-size: 11px;
}
.game.sky-battle .battle-header .journey,
.game.sky-battle .battle-header .flight-readout {
  margin-top: 0;
}
.game.sky-battle .battle-header .flight-readout {
  font-size: 10px;
}
.game.sky-battle .battle-header .boss-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 5px 8px;
}
.game.sky-battle .battle-header .boss-row > div {
  flex: 1;
  min-width: 0;
  gap: 6px;
}
.game.sky-battle .battle-header .boss-row progress {
  flex: 0 0 34%;
  width: 34%;
  margin-top: 0;
}
.game.sky-battle .battle-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #0a1929;
}
.game.sky-battle .battle-field #game {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 760;
}
.game.sky-battle .skillbar {
  position: static;
  flex: none;
  padding: 6px 12px max(6px, env(safe-area-inset-bottom));
  gap: 10px;
  background: #102438f5;
  border-top: 1px solid #8fa2a52e;
}
.game.sky-battle .skillbar > div {
  min-width: 0;
}
.game.sky-battle .skillbar span {
  font-size: 10px;
  line-height: 1.35;
}
.game.sky-battle .skillbar strong {
  font-size: 12px;
  line-height: 1.35;
}
.game.sky-battle .ultimate-hud {
  width: 52%;
  min-width: 0;
  padding: 4px 8px;
}
.game.sky-battle .ultimate-hud progress {
  height: 7px;
  margin: 3px 0;
}
.immersive-battle .game.sky-battle {
  width: 100vw;
  height: 100dvh;
  padding: 0;
}
.immersive-battle .game.sky-battle .battle-field {
  flex: 1;
  background: transparent;
}
.immersive-battle .game.sky-battle .battle-field #game {
  flex: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.immersive-battle .game.sky-battle .battle-header .immersive-controls {
  grid-column: 2;
  grid-row: 1;
  position: static;
  gap: 5px;
}
.immersive-battle .game.sky-battle .immersive-controls button {
  padding: 5px 8px;
  min-height: 28px;
  font-size: 10px;
}
.immersive-battle .game.sky-battle .battle-field .tutorial-panel {
  top: 12px;
}
@media (max-width: 600px) {
  .game.sky-battle .battle-header {
    padding: 6px 8px;
    gap: 4px 6px;
  }
  .game.sky-battle .battle-header .hud {
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 10px;
  }
  .immersive-battle .game.sky-battle .battle-header #wave {
    flex-basis: 100%;
  }
  .game.sky-battle .battle-header .boss-row span {
    font-size: 9px;
  }
  .game.sky-battle .skillbar {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-height: 540px) and (orientation: landscape) {
  .game.sky-battle .battle-header {
    padding: 4px 8px;
    gap: 3px 8px;
  }
  .game.sky-battle .battle-header .hud {
    flex-wrap: nowrap;
    font-size: 10px;
  }
  .game.sky-battle .battle-header #wave {
    flex-basis: auto;
  }
  .game.sky-battle .battle-header .battle-hud {
    grid-template-columns: minmax(0, 1fr) minmax(100px, 0.6fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 3px 10px;
  }
  .game.sky-battle .battle-header .battle-readout {
    grid-column: 1;
    min-width: 0;
    gap: 6px;
  }
  .game.sky-battle .battle-header .battle-readout strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
  }
  .game.sky-battle .battle-header .journey {
    grid-column: 2;
    gap: 5px;
  }
  .game.sky-battle .battle-header .flight-readout {
    grid-column: 3;
    gap: 6px;
    font-size: 9px;
  }
  .game.sky-battle .battle-header #flight-task {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .game.sky-battle .battle-header .boss-row {
    grid-column: 1 / -1;
    padding: 3px 6px;
  }
  .immersive-battle .game.sky-battle .immersive-controls button {
    min-height: 22px;
    padding: 3px 6px;
    font-size: 9px;
  }
  .game.sky-battle .skillbar {
    padding-top: 4px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    align-items: center;
  }
  .game.sky-battle .ultimate-hud {
    display: grid;
    grid-template-columns: auto minmax(50px, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: min(65%, 520px);
    padding: 4px 8px;
  }
  .game.sky-battle .ultimate-hud progress {
    margin: 0;
  }
  .game.sky-battle .skillbar strong {
    font-size: 11px;
  }
}