:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #050b14;
  color: #fff8df;
  user-select: none;
  touch-action: none;
  --stage-w: 390;
  --stage-h: 844;
  --gold: #ffe178;
  --ink: #150907;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  position: relative;
  background: #07101b;
}

body::before {
  content: "";
  position: fixed;
  inset: -4%;
  display: block;
  background: url("assets/generated/magical-kingdom-map.png") center / cover no-repeat;
  filter: blur(14px) brightness(0.62) saturate(0.9);
  transform: scale(1.04);
  pointer-events: none;
}

button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

img {
  object-fit: contain;
}

.game-stage {
  position: relative;
  z-index: 1;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  max-height: 100dvh;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  background: #07101b;
  box-shadow: 0 0 0 1px rgba(255, 225, 120, 0.12), 0 20px 80px rgba(0, 0, 0, 0.48);
}

@media (max-width: 768px) {
  html,
  body {
    height: 100dvh;
  }

  body {
    display: block;
    background: #07101b;
  }

  body::before {
    display: none;
  }

  .game-stage {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
    box-shadow: none;
  }
}

@media (max-width: 768px) and (min-aspect-ratio: 9 / 16) {
  .home-title {
    top: 17%;
  }

  .home-shortcuts {
    bottom: 17.2%;
    left: 15%;
    right: 15%;
    gap: 8px 12px;
  }

  .home-shortcut {
    height: 52px;
  }

  .adventure-button {
    bottom: 4%;
    left: 17%;
    right: 17%;
    height: 72px;
  }
}

.screen,
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  overflow: visible;
}

.screen.active,
.overlay:not([hidden]) {
  display: block;
}

.home-screen {
  overflow: clip;
}

.level-screen {
  overflow: clip;
}

.scene-art {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.home-art {
  inset: 0;
  object-position: 50% 49%;
  animation: homeDrift 9s ease-in-out infinite;
}

.home-glow {
  position: absolute;
  z-index: 4;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(158, 90, 255, 0.5));
  opacity: 0.72;
}

.home-glow-crystal {
  left: 43%;
  top: 39.5%;
  width: 15%;
  animation: floatSpark 2.8s ease-in-out infinite;
}

.home-glow-portal {
  right: 7.5%;
  top: 59%;
  width: 13%;
  animation: slowPulse 2.2s ease-in-out infinite;
}

.home-hud {
  position: absolute;
  z-index: 10;
  left: 5%;
  right: 5%;
  top: max(10px, env(safe-area-inset-top));
  height: 74px;
  pointer-events: none;
}

.home-profile {
  position: absolute;
  left: 0;
  top: 4px;
  width: min(37%, 144px);
  height: 50px;
}

.home-profile img,
.panel-art {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  object-fit: contain;
}

.home-profile img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-resources {
  position: absolute;
  right: 40px;
  top: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: min(33%, 126px);
}

.resource-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding-left: 27px;
  padding-right: 7px;
  font-size: clamp(9px, 2.4vw, 11px);
  font-weight: 900;
  text-shadow: 0 2px 0 var(--ink);
}

.resource-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/hud/resource-pill.png") center / 116% 116% no-repeat;
  z-index: -1;
}

.resource-pill img {
  position: absolute;
  left: 6px;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.icon-action {
  pointer-events: auto;
}

.settings-action {
  position: absolute;
  right: 0;
  top: 9px;
  width: 32px;
  height: 32px;
  animation: softButtonPulse 2.8s ease-in-out infinite;
}

.settings-action img,
.pause img,
.gold-button > img,
.adventure-button > img {
  width: 132%;
  height: 132%;
  margin: -16%;
  object-fit: contain;
}

.settings-action img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.home-title {
  position: absolute;
  z-index: 5;
  left: 9%;
  right: 9%;
  top: 17.6%;
  text-align: center;
  text-shadow: 0 3px 0 #150907, 0 0 14px #150907;
  animation: titleRise 650ms ease-out both;
}

.home-title p {
  margin: 0 0 1px;
  color: #8ff6ff;
  font-size: clamp(13px, 3.45vw, 16px);
  font-weight: 900;
  letter-spacing: 0;
}

.home-title h1 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(29px, 7.55vw, 37px);
  line-height: 1.03;
}

.home-shortcuts {
  position: absolute;
  z-index: 12;
  left: 15%;
  right: 15%;
  bottom: 18.6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px 13px;
}

.home-shortcut {
  position: relative;
  min-width: 0;
  height: 56px;
  pointer-events: auto;
  text-shadow: 0 2px 0 var(--ink);
  animation: menuFloat 3.6s ease-in-out infinite;
}

.home-shortcut:nth-child(2),
.home-shortcut:nth-child(5) {
  animation-delay: 0.18s;
}

.home-shortcut:nth-child(3),
.home-shortcut:nth-child(4) {
  animation-delay: 0.34s;
}

.home-shortcut::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/hud/square-frame.png") center / 132% 132% no-repeat;
}

.home-shortcut img {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 29px;
  height: 29px;
  margin: 0;
  transform: translateX(-50%);
  object-fit: contain;
}

.home-shortcut span {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  font-size: clamp(8px, 2.35vw, 10px);
  font-weight: 900;
  white-space: nowrap;
  line-height: 1;
}

.adventure-button {
  position: absolute;
  z-index: 13;
  left: 16%;
  right: 16%;
  bottom: 4.3%;
  height: 72px;
  pointer-events: auto;
  text-align: center;
  text-shadow: 0 2px 0 var(--ink);
  animation: adventureGlow 2.25s ease-in-out infinite;
}

.adventure-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.adventure-button b,
.adventure-button span {
  position: absolute;
  z-index: 1;
  display: block;
  left: 14px;
  right: 14px;
}

.adventure-button b {
  top: 23px;
  padding-top: 0;
  color: var(--gold);
  /* font-size: clamp(21px, 5.45vw, 28px); */
  line-height: 1;
}

.adventure-button span {
  top: 37px;
  margin-top: 0;
  color: #eaf9ff;
  font-size: clamp(9px, 2.35vw, 11px);
  font-weight: 800;
  line-height: 1;
}

.level-header {
  position: absolute;
  z-index: 10;
  left: 6%;
  right: 6%;
  top: 3.3%;
  height: 82px;
  text-align: center;
  text-shadow: 0 2px 0 var(--ink);
}

.level-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/hud/mission-banner.png") center / 132% 132% no-repeat;
  z-index: -1;
}

.level-card::before {
  content: "";
  position: absolute;
  inset: -6px -8px;
  background: url("assets/kit/panel-large.png") center / 100% 100% no-repeat;
  z-index: -1;
  opacity: 0.96;
}

.small-back {
  position: absolute;
  left: 11px;
  top: 27px;
  width: 54px;
  height: 26px;
  pointer-events: auto;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
}

.level-header h2 {
  margin: 16px 0 2px;
  color: var(--gold);
  font-size: clamp(22px, 5.8vw, 28px);
}

.level-header p {
  margin: 0;
  font-size: clamp(11px, 2.9vw, 13px);
}

.level-list {
  position: absolute;
  z-index: 11;
  left: 6%;
  right: 6%;
  top: 14.8%;
  display: grid;
  gap: 12px;
}

.level-card {
  position: relative;
  min-height: 118px;
  padding: 18px 74px 13px 88px;
  pointer-events: auto;
  text-align: left;
  text-shadow: 0 2px 0 var(--ink);
  animation: cardSettle 460ms ease-out both;
}

.level-thumb {
  position: absolute;
  z-index: 1;
  left: 18px;
  top: 32px;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.level-boss {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 20px;
  width: 52px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55));
  animation: bossCardIdle 2.4s ease-in-out infinite;
}

.level-card strong,
.level-card span,
.level-card b {
  display: block;
  position: relative;
  z-index: 3;
}

.level-card strong {
  color: var(--gold);
  font-size: clamp(13px, 3.4vw, 16px);
  line-height: 1.08;
  max-width: 92%;
}

.level-kicker {
  color: #8ff6ff;
  font-size: clamp(7px, 1.9vw, 9px);
  font-weight: 900;
  line-height: 1;
}

.level-objective {
  margin-top: 3px;
  font-size: clamp(8px, 2.15vw, 10px);
  font-weight: 800;
  line-height: 1.12;
}

.level-stars {
  margin-top: 3px;
  color: var(--gold);
  font-size: clamp(10px, 2.8vw, 13px);
  letter-spacing: 0;
}

.level-rewards {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}

.level-rewards i {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 34px;
  color: #eaf9ff;
  font-size: clamp(7px, 1.9vw, 8px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.level-rewards img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.level-enter {
  position: absolute !important;
  z-index: 4 !important;
  right: 18px;
  top: 18px;
  min-width: 48px;
  color: #fff8df;
  font-size: clamp(8px, 2.15vw, 10px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.level-card.locked {
  filter: grayscale(0.75) brightness(0.62);
}

.level-card.newly-unlocked {
  animation: cardSettle 460ms ease-out both, unlockGlow 2s ease-in-out infinite;
}

.level-card.lock-shake {
  animation: lockShake 0.34s ease-out;
}

.battle-scene {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.battle-bg {
  inset: 0;
  object-position: 50% 50%;
}

.battle-bg.far {
  transform: scale(1.04);
}

.battle-bg.near {
  opacity: 0.16;
  transform: scale(1.08);
}

.warning-layer,
.entity-layer,
.effect-layer,
.damage-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.warning-layer {
  z-index: 2;
}

.entity-layer {
  z-index: 4;
}

.effect-layer {
  z-index: 7;
}

.damage-layer {
  z-index: 15;
}

.sprite {
  position: absolute;
  transform: translate(-50%, -50%);
  object-fit: contain;
  height: auto;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.5));
  transition: filter 110ms ease, opacity 160ms ease;
  will-change: left, top, transform;
}

.state-idle {
  animation: idleBob 1.6s ease-in-out infinite;
}

.state-walk {
  animation: walkBob 0.48s ease-in-out infinite;
}

.state-attack,
.state-cast {
  animation: attackSnap 0.24s ease-out;
}

.state-hurt {
  filter: brightness(1.55) drop-shadow(0 0 14px #ff5c5c);
}

.boss-anticipate {
  filter: brightness(1.45) saturate(1.2) drop-shadow(0 0 18px rgba(255, 84, 84, 0.72));
}

.state-dodge {
  opacity: 0.55;
  filter: drop-shadow(0 0 16px #8bdfff);
}

.state-dead {
  opacity: 0;
}

.death-spin {
  animation: deathSpin 0.34s ease-in forwards;
}

.death-burst {
  animation: deathBurst 0.58s ease-in forwards;
}

.effect,
.projectile,
.warning,
.target-ring {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}

.effect {
  transform: translate(-50%, -50%);
  animation: effectPop 0.55s ease-out forwards;
}

.projectile {
  animation: projectileFly 0.42s linear forwards;
}

.warning {
  transform: translate(-50%, -50%);
  animation: warningPulse 0.82s ease-out forwards;
}

.target-ring {
  opacity: 0.72;
  animation: targetPulse 0.9s ease-in-out infinite;
  filter: hue-rotate(122deg) saturate(1.8) drop-shadow(0 0 10px rgba(116, 242, 255, 0.7));
}

.damage-number {
  position: absolute;
  z-index: 18;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 900;
  text-shadow: 0 2px 0 var(--ink), 0 0 9px var(--ink);
  animation: damageRise 0.72s ease-out forwards;
}

.damage-number.crit {
  color: #ff9d2f;
  font-size: clamp(24px, 6.5vw, 32px);
}

.battle-hud {
  position: absolute;
  z-index: 20;
  left: max(12px, calc(env(safe-area-inset-left) + 8px));
  right: max(12px, calc(env(safe-area-inset-right) + 8px));
  top: max(16px, calc(env(safe-area-inset-top) + 12px));
  height: 108px;
  pointer-events: none;
}

.combatant-panel {
  position: absolute;
  text-shadow: 0 2px 0 var(--ink);
}

.player-panel {
  left: 0;
  top: 0;
  width: min(46%, 180px);
  height: 64px;
}

.battle-portrait {
  position: absolute;
  z-index: 1;
  left: 6%;
  top: 11%;
  width: 27%;
  object-fit: contain;
}

.player-panel strong {
  position: absolute;
  z-index: 2;
  left: 38%;
  top: 16%;
  font-size: clamp(13px, 3.45vw, 16px);
  line-height: 1;
}

.player-panel span {
  position: absolute;
  z-index: 2;
  left: 39%;
  font-size: clamp(8px, 2.35vw, 11px);
  font-weight: 900;
  line-height: 1;
}

#hpLabel {
  top: 44%;
}

#manaLabel {
  top: 66%;
}

.status-bar {
  position: absolute;
  z-index: 2;
  display: block;
  height: 5px;
  overflow: hidden;
  background: rgba(5, 9, 16, 0.74);
}

.status-bar i {
  display: block;
  width: 100%;
  height: 100%;
}

.status-bar.hp,
.status-bar.mana {
  left: 39%;
  width: 50%;
}

.status-bar.hp {
  top: 58%;
}

.status-bar.mana {
  top: 80%;
}

.status-bar.hp i {
  background: #3fee72;
}

.status-bar.mana i {
  background: #4fc7ff;
}

.boss-panel {
  left: 19%;
  right: 10%;
  top: 66px;
  height: 50px;
}

.boss-panel strong {
  position: absolute;
  z-index: 2;
  left: 24%;
  right: 8%;
  top: 7px;
  color: #fff8df;
  font-size: clamp(13px, 3.45vw, 16px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.status-bar.boss {
  left: 27%;
  right: 10%;
  top: 27px;
  height: 7px;
}

.status-bar.boss i {
  background: #e93232;
}

.pause {
  position: absolute;
  right: 0;
  top: 3px;
  width: 38px;
  height: 38px;
  pointer-events: auto;
}

.quest-chip {
  position: absolute;
  z-index: 21;
  left: max(12px, calc(env(safe-area-inset-left) + 8px));
  top: 126px;
  width: min(35%, 138px);
  height: 68px;
  padding: 15px 11px 8px;
  text-shadow: 0 2px 0 var(--ink);
}

.quest-chip img {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  object-fit: contain;
}

.quest-chip strong,
.quest-chip span,
.quest-chip small {
  position: relative;
  z-index: 1;
  display: block;
}

.quest-chip strong {
  color: var(--gold);
  font-size: clamp(10px, 2.7vw, 12px);
  line-height: 1.05;
  white-space: nowrap;
}

.quest-chip span,
.quest-chip small {
  font-size: clamp(9px, 2.45vw, 11px);
  font-weight: 900;
  line-height: 1.15;
}

.combat-feedback {
  position: absolute;
  z-index: 22;
  right: 4%;
  top: 126px;
  max-width: 40%;
  text-align: right;
  text-shadow: 0 2px 0 var(--ink), 0 0 8px var(--ink);
}

.combat-feedback strong,
.combat-feedback span {
  display: block;
  white-space: nowrap;
}

.combat-feedback strong {
  color: #ffb33c;
  font-size: clamp(14px, 3.9vw, 18px);
}

.combat-feedback span {
  color: #e8fbff;
  font-size: clamp(9px, 2.55vw, 12px);
  font-weight: 800;
}

.move-control {
  position: absolute;
  z-index: 24;
  left: 5%;
  bottom: 5.3%;
  width: 76px;
  height: 76px;
  pointer-events: auto;
}

.move-control > img {
  width: 132%;
  height: 132%;
  margin: -16%;
  object-fit: contain;
  opacity: 0.82;
}

.move-control i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
}

.move-control i img {
  width: 132%;
  height: 132%;
  margin: -16%;
  object-fit: contain;
}

.spell-pad {
  position: absolute;
  z-index: 24;
  right: 3.6%;
  bottom: 5%;
  width: 132px;
  height: 136px;
  pointer-events: none;
}

.spell-button {
  position: absolute;
  width: 55px;
  height: 57px;
  pointer-events: auto;
  text-shadow: 0 2px 0 var(--ink);
}

.spell-button > img {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  object-fit: contain;
}

.spell-button b {
  position: absolute;
  inset: 11px 11px 18px;
}

.spell-button b img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.spell-button span {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 8px;
  font-size: clamp(6px, 1.85vw, 8px);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

.spell-button:nth-child(1) {
  right: 39px;
  bottom: 0;
}

.spell-button:nth-child(2) {
  right: 0;
  bottom: 39px;
}

.spell-button:nth-child(3) {
  right: 78px;
  bottom: 39px;
}

.spell-button:nth-child(4) {
  right: 39px;
  bottom: 78px;
}

.spell-button.ready {
  filter: saturate(1.12) brightness(1.06);
}

.spell-button.cooldown,
.spell-button.disabled {
  filter: grayscale(0.9) brightness(0.58);
}

.spell-button.cooldown::after,
.spell-button.disabled::after,
.item-button.cooldown::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: rgba(3, 8, 16, 0.5);
}

.spell-button.ready::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(142, 245, 255, 0.28);
  pointer-events: none;
}

.spell-button.cooldown::before,
.spell-button.disabled::before,
.item-button.cooldown::before {
  content: attr(data-cooldown);
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 43%;
  color: #fff8df;
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 #07101d, 0 0 8px #07101d;
}

.item-pad {
  position: absolute;
  z-index: 24;
  right: 5.2%;
  bottom: 21.2%;
  display: flex;
  gap: 8px;
}

.item-button {
  position: relative;
  width: 46px;
  height: 48px;
  pointer-events: auto;
  text-shadow: 0 2px 0 var(--ink);
}

.item-button > img {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  object-fit: contain;
}

.item-button b {
  position: absolute;
  inset: 10px 10px 17px;
}

.item-button b img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.item-button span {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 8px;
  font-size: clamp(6px, 1.85vw, 8px);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

.overlay {
  z-index: 40;
  text-align: center;
  text-shadow: 0 2px 0 var(--ink);
}

.overlay-frame {
  display: none;
}

.result-body {
  position: absolute;
  z-index: 1;
  left: 8%;
  right: 8%;
  top: 23%;
  min-height: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: clamp(68px, 9.5vh, 84px) clamp(28px, 8vw, 48px) clamp(24px, 4vh, 34px);
}

.result-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/kit/panel-large.png") center / 100% 100% no-repeat;
}

.overlay-badge {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: clamp(11px, 2vh, 18px);
  width: clamp(50px, 15vw, 66px);
  height: clamp(44px, 12vw, 58px);
  transform: translateX(-50%);
  object-fit: contain;
}

.overlay h2,
.overlay p,
.overlay-actions {
  position: relative;
  z-index: 1;
}

.overlay h2 {
  width: 100%;
  margin: 0;
  color: var(--gold);
  font-size: clamp(22px, 5.9vw, 30px);
  line-height: 1;
}

.overlay p {
  width: 100%;
  margin: 0;
  font-size: clamp(8px, 2.2vw, 10px);
  line-height: 1.1;
}

.overlay p strong {
  display: block;
  margin-top: 4px;
  color: var(--gold);
  font-size: clamp(9px, 2.45vw, 11px);
}

.overlay p small {
  display: block;
  margin-top: 4px;
  color: #eaf9ff;
  font-size: clamp(7px, 2vw, 9px);
  font-weight: 900;
}

.result-stars {
  display: block;
  color: var(--gold);
  font-size: clamp(18px, 4.85vw, 24px);
  line-height: 1;
  animation: starPop 0.68s ease-out both;
}

.reward-row {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 7px;
}

.reward-row i {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  color: #fff8df;
  font-size: clamp(7px, 2vw, 9px);
  font-style: normal;
  font-weight: 900;
}

.reward-row img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.defeat-tips i {
  min-width: auto;
}

.overlay-actions {
  width: 100%;
  display: grid;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}

.gold-button {
  position: relative;
  width: 176px;
  height: 47px;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 2px 0 var(--ink);
}

.gold-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.gold-button span {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  white-space: nowrap;
}

.game-screen.result-open .battle-hud,
.game-screen.result-open .quest-chip,
.game-screen.result-open .combat-feedback,
.game-screen.result-open .move-control,
.game-screen.result-open .spell-pad,
.game-screen.result-open .item-pad {
  opacity: 0;
  pointer-events: none;
}

.kingdom-panel {
  z-index: 42;
  text-align: center;
  text-shadow: 0 2px 0 var(--ink);
}

.kingdom-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 16, 0.58);
}

.kingdom-panel-frame {
  display: none;
}

.kingdom-panel-body {
  position: absolute;
  z-index: 1;
  left: 7%;
  right: 7%;
  top: 20%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(78px, 10.5vh, 92px) clamp(34px, 9vw, 58px) clamp(26px, 4vh, 38px);
}

.kingdom-panel-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/kit/panel-large.png") center / 100% 100% no-repeat;
}

.kingdom-panel-icon {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: clamp(18px, 3.2vh, 28px);
  width: clamp(48px, 12vw, 62px);
  height: clamp(48px, 12vw, 62px);
  transform: translateX(-50%);
  object-fit: contain;
  margin: 0;
}

.kingdom-panel h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--gold);
  font-size: clamp(20px, 5.25vw, 27px);
  line-height: 1;
  width: 100%;
}

.kingdom-panel p {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 4px 7px;
  color: #fff8df;
  font-size: clamp(10px, 2.55vw, 12px);
  font-weight: 800;
  line-height: 1.15;
  background: rgba(5, 12, 24, 0.58);
}

.kingdom-panel-stats {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  gap: 2px;
  color: #eaf9ff;
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 800;
  margin-top: 8px;
  flex: 0 0 auto;
  align-content: start;
}

.kingdom-panel-stats span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: clamp(27px, 3.45vh, 32px);
  padding: 4px 8px;
  background: rgba(5, 12, 24, 0.52);
  border: 1px solid rgba(255, 225, 120, 0.18);
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.kingdom-panel-stats span:active {
  transform: scale(0.98);
  filter: brightness(1.18);
}

.kingdom-panel-stats i {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
  font-style: normal;
}

.kingdom-panel-stats small {
  color: #c8f7ff;
  font-size: clamp(8px, 2vw, 9px);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.9;
}

.kingdom-panel-stats b {
  color: var(--gold);
  white-space: nowrap;
}

.kingdom-panel-actions {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  flex: 0 0 auto;
}

.kingdom-panel .gold-button {
  width: 206px;
  height: 50px;
  font-size: 14px;
}

.guide-panel {
  z-index: 44;
  text-align: center;
  text-shadow: 0 2px 0 var(--ink);
}

.guide-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 16, 0.34);
}

.guide-frame {
  display: none;
}

.guide-body {
  position: absolute;
  z-index: 1;
  left: 7%;
  right: 7%;
  top: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: clamp(76px, 10vh, 92px) clamp(32px, 8vw, 52px) clamp(26px, 4vh, 36px);
}

.guide-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/kit/panel-large.png") center / 100% 100% no-repeat;
}

.guide-hero {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: clamp(18px, 3vh, 26px);
  width: clamp(62px, 16vw, 82px);
  height: clamp(62px, 16vw, 82px);
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.42));
  animation: guideHeroFloat 2.4s ease-in-out infinite;
}

.guide-step,
.guide-panel h2,
.guide-panel p,
.guide-points,
.guide-actions {
  position: relative;
  z-index: 1;
}

.guide-step {
  width: 100%;
  margin: 0;
  color: #8ff6ff;
  font-size: clamp(9px, 2.45vw, 11px);
  font-weight: 900;
}

.guide-panel h2 {
  width: 100%;
  margin: 0;
  color: var(--gold);
  font-size: clamp(21px, 5.6vw, 28px);
  line-height: 1;
}

.guide-panel p#guideText {
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  color: #fff8df;
  font-size: clamp(10px, 2.75vw, 13px);
  font-weight: 800;
  line-height: 1.2;
  background: rgba(5, 12, 24, 0.58);
}

.guide-points {
  width: 100%;
  display: grid;
  gap: 5px;
  margin-top: 5px;
}

.guide-points span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  min-height: 29px;
  padding: 5px 8px;
  background: rgba(5, 12, 24, 0.42);
  border: 1px solid rgba(255, 225, 120, 0.2);
}

.guide-points b {
  color: var(--gold);
  font-size: clamp(10px, 2.65vw, 12px);
  white-space: nowrap;
}

.guide-points i {
  color: #c8f7ff;
  font-size: clamp(8px, 2.25vw, 10px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}

.guide-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.guide-actions .gold-button {
  width: 138px;
  height: 48px;
  font-size: 14px;
}

.home-screen.panel-open .home-shortcuts,
.home-screen.panel-open .adventure-button,
.home-screen.panel-open .home-title,
.home-screen.panel-open .home-hud,
.home-screen.panel-open .home-glow {
  opacity: 0.22;
  filter: saturate(0.72) brightness(0.58);
}

.gold-button.secondary {
  filter: brightness(0.82) saturate(0.9);
}

.pressed {
  transform: scale(0.94);
}

.camera-shake {
  animation: shake 0.22s linear;
}

@keyframes idleBob {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -4px;
  }
}

@keyframes walkBob {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -7px;
  }
}

@keyframes attackSnap {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes targetPulse {
  0%,
  100% {
    opacity: 0.46;
  }
  50% {
    opacity: 0.86;
  }
}

@keyframes effectPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.32);
  }
}

@keyframes projectileFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1);
  }
}

@keyframes warningPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  35% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@keyframes damageRise {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.75);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -115%) scale(1.12);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, -3px);
  }
  50% {
    transform: translate(-4px, 4px);
  }
  75% {
    transform: translate(3px, 2px);
  }
}

@keyframes cardSettle {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes unlockGlow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.16) drop-shadow(0 0 12px rgba(255, 225, 120, 0.28));
  }
}

@keyframes bossCardIdle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes lockShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}

@keyframes starPop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  60% {
    opacity: 1;
    transform: scale(1.14);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes deathSpin {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-10deg) scale(0.78);
  }
}

@keyframes deathBurst {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.16);
  }
}

@keyframes homeDrift {
  0%,
  100% {
    transform: scale(1.018) translate(0, 0);
  }
  50% {
    transform: scale(1.035) translate(-3px, -5px);
  }
}

@keyframes titleRise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes menuFloat {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-2px);
    filter: brightness(1.08);
  }
}

@keyframes adventureGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 225, 120, 0));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 225, 120, 0.36));
  }
}

@keyframes floatSpark {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.56;
  }
  50% {
    transform: translateY(-7px) scale(1.05);
    opacity: 0.86;
  }
}

@keyframes slowPulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.48;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.82;
  }
}

@keyframes softButtonPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.14);
  }
}

@keyframes guideHeroFloat {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-art,
  .home-glow,
  .home-title,
  .home-shortcut,
  .adventure-button,
  .settings-action,
  .level-card,
  .level-boss,
  .result-stars,
  .guide-hero {
    animation: none;
  }
}

@media (max-width: 370px) {
  .home-shortcuts {
    left: 14%;
    right: 14%;
    gap: 8px 10px;
  }

  .move-control {
    width: 76px;
    height: 76px;
  }

  .spell-pad {
    width: 132px;
    height: 136px;
  }

  .spell-button {
    width: 55px;
    height: 57px;
  }

  .item-button {
    width: 47px;
    height: 49px;
  }

  .spell-button:nth-child(1) {
    right: 39px;
  }

  .spell-button:nth-child(2) {
    bottom: 39px;
  }

  .spell-button:nth-child(3) {
    right: 78px;
    bottom: 39px;
  }

  .spell-button:nth-child(4) {
    right: 39px;
    bottom: 78px;
  }
}