:root {
  color-scheme: dark;
  --ink: #090817;
  --ink-soft: rgba(9, 8, 23, 0.72);
  --paper: #fff0d0;
  --muted: #c5b9bd;
  --orange: #ff8a2a;
  --orange-bright: #ffb84c;
  --mint: #93e2bd;
  --line: rgba(255, 240, 208, 0.16);
  font-family: ui-rounded, "Avenir Next", "SF Pro Rounded", system-ui, sans-serif;
  background: var(--ink);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--ink);
}

button { font: inherit; }

.game-shell {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: #0e0d21 url("./assets/haunted-road.webp") center/cover no-repeat;
  transition: background-image .5s ease;
}

.game-shell.boss-mode { background-image: url("./assets/castle-courtyard.webp"); }
.game-shell.witch-mode { background-image: url("./assets/witch-road.webp"); }
.game-shell.castle-interior-mode { background-image: url("./assets/castle-interior.webp"); }
.game-shell.crypt-mode { background-image: url("./assets/castle-crypts.webp"); }
.game-shell.frankenstein-mode { background-image: url("./assets/frankenstein-lab.webp"); }
.game-shell.marsh-mode, .game-shell.deep-marsh-mode { background-image: url("./assets/phantom-marsh.webp"); }
.game-shell.deep-marsh-mode::before { background: linear-gradient(180deg, rgba(12, 34, 26, .08) 18%, rgba(9, 26, 24, .56) 70%, rgba(4, 7, 14, .96) 100%), radial-gradient(circle at 50% 32%, rgba(115, 255, 196, .1), rgba(14, 4, 28, .62) 76%); }
.game-shell.phantom-mode { background-image: url("./assets/phantom-marsh.webp"); }
.game-shell.phantom-mode::before { background: linear-gradient(180deg, rgba(25, 4, 42, .2) 18%, rgba(9, 12, 28, .64) 70%, rgba(3, 4, 12, .97) 100%), radial-gradient(circle at 50% 28%, rgba(163, 92, 255, .16), rgba(3, 5, 14, .74) 76%); }

.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 7, 20, .02) 24%, rgba(8, 7, 20, .48) 72%, rgba(8, 7, 20, .94) 100%),
    radial-gradient(circle at 50% 35%, transparent 0 20%, rgba(4, 3, 13, .14) 65%, rgba(4, 3, 13, .62) 100%);
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hud {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto 48px;
  align-items: center;
  gap: 20px;
  padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(7, 6, 18, .84), transparent);
  pointer-events: none;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--paper);
  border: 0;
  background: transparent;
  font-size: clamp(.95rem, 2vw, 1.1rem);
  font-weight: 850;
  letter-spacing: .11em;
  text-align: left;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: pointer;
}

.brand:active, .brand-mark:active { transform: translateY(1px); }
.brand-mobile { display: none; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  color: var(--ink);
  border-radius: 50%;
  background: var(--orange-bright);
  box-shadow: 0 0 30px rgba(255, 157, 58, .46);
  font-size: 1.35rem;
  flex: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.moon-awake .brand-mark {
  animation: moon-awaken 1.4s ease-out;
}

@keyframes moon-awaken {
  0%, 100% { transform: scale(1); background: var(--orange-bright); }
  35% { transform: scale(1.65) rotate(-18deg); background: #66f5ff; box-shadow: 0 0 70px #8f65ff; }
  70% { transform: scale(1.15) rotate(12deg); background: #d9faff; box-shadow: 0 0 48px #66f5ff; }
}

.stats { display: flex; gap: clamp(22px, 5vw, 58px); }
.stats div, .result-grid div { display: grid; gap: 1px; text-align: center; }
.stats span, .result-grid span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.stats strong { color: var(--paper); font-size: 1.28rem; font-variant-numeric: tabular-nums; }

.icon-button, .pause-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(7, 6, 18, .52);
  color: var(--paper);
  pointer-events: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.panel {
  position: absolute;
  z-index: 5;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(44px, env(safe-area-inset-bottom));
  width: min(460px, calc(100vw - 56px));
  padding: clamp(24px, 4vw, 38px);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(15, 13, 35, .88), rgba(10, 9, 25, .72));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  transition: opacity .28s ease, transform .28s ease;
}

.start-card { max-height: calc(100svh - 104px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }

.eyebrow {
  color: var(--orange-bright);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .2em;
}

h1, h2 {
  margin: 12px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
}

h1 { font-size: clamp(3rem, 8vw, 5rem); }
h2 { font-size: clamp(2.4rem, 7vw, 4rem); }
h1 em { color: var(--orange); font-weight: 700; }
.panel p { max-width: 34ch; color: #d9d0d0; font-size: 1.02rem; line-height: 1.55; }

.primary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  margin-top: 24px;
  padding: 0 20px;
  color: #160b07;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffc65d, var(--orange));
  box-shadow: 0 10px 28px rgba(255, 104, 24, .28);
  font-weight: 950;
  letter-spacing: .08em;
  cursor: pointer;
}

.primary-button:active { transform: translateY(2px); }
.primary-button:focus-visible, button:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }

.secondary-button {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  font-weight: 850;
  letter-spacing: .08em;
  cursor: pointer;
}

.stage-two-button { color: #b9b2ff; border-color: rgba(139, 124, 255, .42); }
.stage-two-button:disabled { color: #827b91; border-color: var(--line); cursor: not-allowed; opacity: .62; }
.stage-three-button { color: #8fffc7; border-color: rgba(95, 255, 183, .42); }
.stage-three-button:disabled { color: #75867e; border-color: var(--line); cursor: not-allowed; opacity: .62; }

.reward-chest {
  display: block;
  width: min(210px, 58%);
  height: 142px;
  margin: 6px auto -8px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(81, 224, 255, .28));
}

.pet-roster {
  margin-top: 15px;
  color: var(--mint);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.baa-progress {
  margin-top: 7px;
  color: #d7ff72;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .07em;
}
.baa-progress.hidden { display: none; }

.runner-select { margin-top: 14px; }
.runner-select > span { color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .14em; }
.runner-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px; margin-top: 7px; }
.runner-choice {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 70px;
  padding: 4px;
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.runner-choice img, .runner-human { width: 42px; height: 46px; object-fit: contain; }
.runner-human {
  display: block;
  background: url("./assets/runner-home-clean.webp") center / contain no-repeat;
}
.runner-choice small { font-size: .52rem; font-weight: 900; letter-spacing: .08em; }
.runner-choice.selected { border-color: var(--orange-bright); background: rgba(255,138,42,.13); box-shadow: 0 0 18px rgba(255,138,42,.15); }
.runner-choice.locked { cursor: not-allowed; filter: grayscale(1); opacity: .35; }
.runner-choice:active:not(:disabled) { transform: translateY(1px); }
.runner-choice.secret-runner.hidden, .pet-choice.secret-choice.hidden { display: none; }
.runner-ability { margin-top: 7px; color: var(--orange-bright); font-size: .61rem; font-weight: 850; letter-spacing: .08em; }

.pet-select-card {
  left: 50%;
  top: clamp(92px, 15vh, 124px);
  bottom: auto;
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100svh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  transform: translateX(-50%);
  text-align: center;
}

.relic-select-card {
  left: 50%;
  top: clamp(82px, 11vh, 106px);
  bottom: auto;
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100svh - 94px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-50%);
  text-align: center;
}

.relic-select-card p { max-width: 580px; margin-inline: auto; }
.frankenstein-chest { width: min(210px, 38vw); height: 128px; margin: 2px auto -2px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(94, 255, 195, .34)); }
.relic-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.relic-choice {
  display: grid;
  grid-template-columns: minmax(68px, 38%) 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  color: var(--paper);
  border: 1px solid rgba(102, 245, 255, .42);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(42, 20, 65, .92), rgba(7, 31, 37, .88));
  cursor: pointer;
  text-align: left;
}
.relic-choice img { width: 100%; height: 104px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(91, 255, 211, .35)); }
.relic-choice span { display: grid; gap: 7px; }
.relic-choice strong { color: #c9fff0; font-size: .96rem; }
.relic-choice small { color: #9ee9ff; font-size: .58rem; font-weight: 900; line-height: 1.35; letter-spacing: .08em; }
.relic-choice:active { transform: translateY(2px); }

.pet-select-card p { max-width: none; margin-inline: auto; }

.pet-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.pet-choice {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 10px 10px 14px;
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  cursor: pointer;
}

.pet-choice img {
  width: min(130px, 17vw);
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 9px 14px rgba(0,0,0,.5));
}

.pet-choice strong { font-size: 1.05rem; }
.pet-choice small { margin-top: 5px; color: var(--orange-bright); font-size: .6rem; font-weight: 900; letter-spacing: .12em; }
.pet-choice.rescued { border-color: rgba(147, 226, 189, .55); }
.pet-choice.rescued small { color: var(--mint); }
.pet-choice:active { transform: translateY(2px); }

.castle-meter {
  position: absolute;
  z-index: 5;
  top: max(76px, calc(env(safe-area-inset-top) + 57px));
  left: 50%;
  width: min(330px, calc(100vw - 150px));
  transform: translateX(-50%);
  color: var(--paper);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-align: center;
}

.castle-meter > div {
  height: 8px;
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8,7,20,.72);
}

.castle-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7b24, #ffd36d);
  box-shadow: 0 0 16px rgba(255, 126, 38, .7);
  transition: width .2s linear;
}

.boss-mode .castle-meter i { background: linear-gradient(90deg, #ff3f2f, #ff9d38); }
.castle-interior-mode .castle-meter i { background: linear-gradient(90deg, #7f6cff, #8fe9ff); box-shadow: 0 0 16px rgba(143, 233, 255, .72); }
.crypt-mode .castle-meter i { background: linear-gradient(90deg, #48bca6, #b5ff7a); box-shadow: 0 0 16px rgba(117, 255, 210, .7); }
.frankenstein-mode .castle-meter i { background: linear-gradient(90deg, #66f5ff, #76ff4b); box-shadow: 0 0 20px rgba(102, 245, 255, .82); }
.marsh-mode .castle-meter i, .deep-marsh-mode .castle-meter i { background: linear-gradient(90deg, #51f5b1, #a35cff); box-shadow: 0 0 20px rgba(81, 245, 177, .72); }
.phantom-mode .castle-meter i { background: linear-gradient(90deg, #8f4dff, #62ffd0); box-shadow: 0 0 22px rgba(163, 92, 255, .8); }

.how-to {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.how-to div { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr 1fr; align-items: center; }
.how-to div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: rgba(255,255,255,.08); color: var(--orange-bright); font-weight: 900; }
.how-to b { font-size: .76rem; }
.how-to small { color: var(--muted); font-size: .64rem; }

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0 4px;
}
.result-grid div { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.result-grid strong { margin-top: 3px; color: var(--orange-bright); font-size: 1.85rem; }

.pause-button { position: absolute; z-index: 4; right: max(24px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); }
.pause-pill, .power-pill, .toast {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  color: var(--paper);
  border: 1px solid var(--line);
  background: rgba(8, 7, 20, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-weight: 900;
  letter-spacing: .16em;
}
.pause-pill { top: 48%; padding: 14px 22px; border-radius: 999px; }
.power-pill {
  top: max(112px, calc(env(safe-area-inset-top) + 94px));
  padding: 9px 15px;
  border-color: rgba(255, 167, 64, .55);
  border-radius: 999px;
  color: var(--orange-bright);
  box-shadow: 0 0 24px rgba(255, 116, 32, .2);
  font-size: .75rem;
}
.power-pill.bat-power {
  border-color: rgba(139, 124, 255, .7);
  color: #b9b2ff;
  box-shadow: 0 0 28px rgba(105, 88, 255, .28);
}
.power-pill.cage-power {
  border-color: rgba(125, 255, 76, .68);
  color: #b7ff8f;
  box-shadow: 0 0 28px rgba(73, 255, 50, .22);
}
.power-pill.freeze-power {
  border-color: rgba(143, 233, 255, .75);
  color: #bdf4ff;
  box-shadow: 0 0 28px rgba(91, 216, 255, .25);
}
.power-pill.ember-power {
  border-color: rgba(255, 142, 43, .82);
  color: #ffd06a;
  box-shadow: 0 0 30px rgba(255, 91, 30, .34);
}
.power-pill.hex-power {
  border-color: rgba(198, 102, 255, .78);
  color: #e7b8ff;
  box-shadow: 0 0 30px rgba(160, 63, 255, .3);
}
.power-pill.volt-power {
  border-color: rgba(84, 237, 255, .82);
  color: #bdfaff;
  box-shadow: 0 0 30px rgba(45, 214, 255, .3);
}
.power-pill.grit-power {
  border-color: rgba(255, 173, 66, .82);
  color: #ffd49a;
  box-shadow: 0 0 30px rgba(255, 126, 38, .28);
}
.power-pill.relic-power {
  border-color: rgba(98, 255, 208, .82);
  color: #c9fff0;
  box-shadow: 0 0 30px rgba(48, 238, 183, .3);
}
.power-pill.luma-power {
  border-color: rgba(102, 245, 255, .86);
  color: #d8c8ff;
  box-shadow: 0 0 32px rgba(126, 84, 255, .34);
}
.power-pill.goat-power {
  border-color: rgba(166, 255, 69, .88);
  color: #dfff9c;
  box-shadow: 0 0 34px rgba(125, 255, 50, .34);
}
.toast { top: 21%; padding: 10px 16px; border-radius: 12px; color: var(--orange-bright); font-size: .8rem; }
.storm-crown-button, .frankenstein-relic-button {
  position: absolute;
  z-index: 7;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  width: 112px;
  padding: 7px 8px 9px;
  color: #d9fbff;
  border: 1px solid rgba(102, 245, 255, .68);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20, 13, 43, .92), rgba(7, 25, 37, .88));
  box-shadow: 0 0 28px rgba(102, 245, 255, .24);
  cursor: pointer;
}
.storm-crown-button img, .frankenstein-relic-button img { width: 62px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(102, 245, 255, .68)); }
.storm-crown-button span, .frankenstein-relic-button span { font-size: .62rem; font-weight: 950; letter-spacing: .08em; }
.storm-crown-button small, .frankenstein-relic-button small { margin-top: 2px; color: #76ff4b; font-size: .52rem; font-weight: 900; letter-spacing: .09em; }
.storm-crown-button:active, .frankenstein-relic-button:active { transform: translateY(2px); }
.frankenstein-relic-button { border-color: rgba(91, 255, 211, .7); box-shadow: 0 0 30px rgba(91, 255, 211, .26); }
.hidden { opacity: 0 !important; transform: translateY(12px) !important; pointer-events: none !important; visibility: hidden; }

@media (max-width: 700px), (max-height: 720px) {
  .hud { grid-template-columns: 1fr auto 42px; gap: 10px; padding-inline: 14px; }
  .brand-group { gap: 6px; }
  .brand { font-size: .72rem; letter-spacing: .055em; min-height: 42px; }
  .brand-desktop { display: none; }
  .brand-mobile { display: inline; }
  .brand-mark { width: 40px; height: 40px; }
  .stats { gap: 14px; }
  .stats div:nth-child(3) { display: none; }
  .panel { left: 18px; bottom: 88px; width: calc(100vw - 36px); padding: 22px; }
  h1 { font-size: clamp(2.7rem, 15vw, 4.2rem); }
  .how-to { display: none; }
  .panel p { margin-bottom: 0; }
  .pause-button { bottom: auto; top: max(78px, calc(env(safe-area-inset-top) + 64px)); right: 16px; }
  .castle-meter { width: min(250px, calc(100vw - 120px)); }
  .pet-select-card { left: 50%; top: max(78px, calc(env(safe-area-inset-top) + 68px)); bottom: auto; width: calc(100vw - 28px); max-height: calc(100svh - 90px); padding: 18px; transform: translateX(-50%); }
  .relic-select-card { left: 50%; top: max(72px, calc(env(safe-area-inset-top) + 60px)); bottom: auto; width: calc(100vw - 24px); max-height: calc(100svh - 80px); padding: 16px; transform: translateX(-50%); }
  .frankenstein-chest { height: 96px; }
  .relic-choices { gap: 8px; }
  .relic-choice { grid-template-columns: 1fr; justify-items: center; padding: 7px; text-align: center; }
  .relic-choice img { width: 92px; height: 78px; }
  .pet-select-card h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .pet-select-card p { font-size: .88rem; }
  .pet-choices { gap: 8px; margin-top: 14px; }
  .pet-choice { padding: 7px 5px 10px; }
  .pet-choice img { width: min(100px, 25vw); height: 86px; }
  .reward-chest { height: 100px; }
  .storm-crown-button, .frankenstein-relic-button { right: 12px; bottom: 14px; width: 92px; padding: 5px 6px 7px; }
  .storm-crown-button img, .frankenstein-relic-button img { width: 50px; height: 34px; }
  .runner-choice { height: 62px; }
  .runner-choice img, .runner-human { width: 36px; height: 39px; }
}

@media (min-width: 900px) and (orientation: landscape) {
  .panel { left: 6vw; bottom: 8vh; }
  .panel.pet-select-card { left: 50%; top: clamp(92px, 15vh, 124px); bottom: auto; transform: translateX(-50%); }
  .panel.relic-select-card { left: 50%; top: clamp(76px, 10vh, 96px); bottom: auto; transform: translateX(-50%); }
}

@media (orientation: landscape) and (max-height: 620px) {
  .start-card { top: max(70px, calc(env(safe-area-inset-top) + 60px)); bottom: auto; max-height: calc(100svh - 78px); }
  .stage-two-button, .stage-three-button { min-height: 38px; margin-top: 6px; font-size: .7rem; }
  .pet-select-card { top: max(72px, calc(env(safe-area-inset-top) + 62px)); max-height: calc(100svh - 80px); padding: 14px 18px; }
  .relic-select-card { top: max(66px, calc(env(safe-area-inset-top) + 56px)); max-height: calc(100svh - 72px); padding: 12px 16px; }
  .relic-select-card h2 { margin: 5px 0; font-size: clamp(1.65rem, 7vh, 2.3rem); }
  .relic-select-card p { margin: 4px auto 0; font-size: .75rem; }
  .frankenstein-chest { height: 72px; }
  .relic-choice { grid-template-columns: 72px 1fr; text-align: left; }
  .relic-choice img { width: 72px; height: 62px; }
  .pet-select-card .eyebrow { font-size: .62rem; }
  .pet-select-card h2 { margin: 7px 0; font-size: clamp(1.8rem, 7vh, 2.5rem); }
  .pet-select-card p { margin: 6px auto 0; font-size: .78rem; line-height: 1.3; }
  .pet-choices { gap: 8px; margin-top: 10px; }
  .pet-choice { padding: 5px 5px 8px; }
  .pet-choice img { width: min(86px, 15vw); height: min(72px, 15vh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Hall of Victories: keep every trophy visible and scrollable on small tablets. */
.hall-open { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 8px; }
.hall-card { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 30px)); max-height: calc(100svh - 86px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; text-align: center; }
.hall-card.hidden { transform: translate(-50%, calc(-50% + 12px)) !important; }
.hall-card p { max-width: 54ch; margin: 10px auto 16px; }
.hall-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hall-trophy { min-width: 0; min-height: 112px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; padding: 7px 4px; border: 1px solid rgba(255,190,94,.3); border-radius: 16px; background: radial-gradient(circle at 50% 30%, rgba(114,77,157,.3), rgba(15,13,35,.8)); }
.hall-trophy.earned { border-color: #ffca69; box-shadow: inset 0 0 22px rgba(255,196,89,.13), 0 0 15px rgba(255,174,75,.1); }
.hall-trophy img { width: 56px; height: 55px; object-fit: contain; }
.hall-trophy.mystery img { filter: brightness(0) drop-shadow(0 0 4px #75658e); opacity: .7; }
.hall-trophy strong { font-size: .75rem; color: #ffe0a1; }
.hall-trophy small { color: #b9a8c9; font-size: .65rem; }
.hall-reward { margin: 16px 0; padding: 10px; border-radius: 13px; color: #e8c8ff; background: rgba(103,65,137,.28); font-weight: 700; }
.hall-reward img { display: block; width: 105px; height: 100px; object-fit: contain; margin: 0 auto 4px; }
.hall-card .secondary-button { width: 100%; }
@media (max-height: 620px) { .hall-card { top: 60px; transform: translateX(-50%); max-height: calc(100svh - 70px); } .hall-card.hidden { transform: translate(-50%, 12px) !important; } .hall-trophy { min-height: 90px; } .hall-trophy img { height: 40px; } }