:root {
  color-scheme: dark;
  --ink: #111016;
  --night: #18151e;
  --wine: #6d1d31;
  --blood: #b93d48;
  --gold: #d3ad62;
  --ivory: #eee2c7;
  --mist: #bdb1a2;
  --violet: #423356;
  --blue: #5e9fd7;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
  user-select: none;
  touch-action: none;
}

button { font: inherit; }

#game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  background: #2b2930;
  isolation: isolate;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

#hud.visible { opacity: 1; }

.xp-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: rgba(10, 7, 13, .84);
  border-bottom: 2px solid rgba(238, 226, 199, .38);
}

#xp-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #2e5f9d, #75b9e9 75%, #d7f4ff);
  box-shadow: 0 0 10px rgba(94, 159, 215, .8);
  transition: width 160ms ease-out;
}

.hud-top {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--ivory);
  text-shadow: 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
}

.level-block {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 7px;
}

.level-block strong { font-size: 28px; line-height: 1; }
.hud-label { color: var(--gold); font-size: 13px; letter-spacing: .15em; }

.run-block {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-right: 86px;
  font-family: "Courier New", monospace;
  font-weight: 700;
}

#timer { font-size: 25px; letter-spacing: .04em; }
#kills, #coins, #stage-goal { color: #d4c7b4; font-size: 13px; }
#coins { color: #e4c878; }
#stage-goal { color: #9ba6ad; }

#combo-meter {
  position: absolute;
  top: 59px;
  right: 104px;
  display: grid;
  justify-items: end;
  gap: 5px;
  width: 124px;
  color: #f0cf77;
  font: 900 13px/1 "Courier New", monospace;
  text-shadow: 0 2px #000;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 140ms ease, transform 140ms ease;
}

#combo-meter.visible { opacity: 1; transform: translateY(0); }
.combo-rail { width: 82px; height: 4px; background: rgba(16,12,18,.75); }
#combo-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #7e263c, #efb957); }

#loadout {
  position: absolute;
  top: 58px;
  left: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: min(360px, 42vw);
}

#boss-wrap {
  position: absolute;
  top: 58px;
  left: 50%;
  width: min(440px, 52vw);
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

#boss-wrap.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.boss-label { display: flex; justify-content: space-between; margin-bottom: 5px; color: #e8d7b1; font: 700 11px/1 "Courier New", monospace; text-shadow: 0 1px #000; }
.boss-rail { height: 9px; padding: 2px; border: 1px solid #9f774d; background: rgba(12, 8, 14, .9); }
#boss-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #762339, #d65a46); transition: width 100ms linear; }

.loadout-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ivory);
  font: 700 11px/1 "Courier New", monospace;
  text-shadow: 0 1px 0 #000;
}
.loadout-item.passive { color: #b7b0bf; }
.loadout-item.passive .loadout-icon { background: #293548; color: #9ed4ed; }

.loadout-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 2px solid #1d1721;
  outline: 1px solid rgba(211, 173, 98, .7);
  background: #392c3d;
  color: #f0d586;
  font: 900 15px/1 "Courier New", monospace;
}

.health-wrap {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(330px, 46vw);
  transform: translateX(-50%);
}

.health-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--ivory);
  font: 700 10px/1 "Courier New", monospace;
  text-shadow: 0 1px #000;
}

#revive-status { display: none; margin-left: 7px; color: #e6c875; font-style: normal; letter-spacing: .04em; }
#revive-status.available { display: inline; }

.health-rail {
  height: 11px;
  padding: 2px;
  border: 1px solid #c8b98f;
  background: rgba(10, 7, 13, .86);
  box-shadow: 0 2px 7px #000;
}

#health-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #751c29, #d6474c);
  transition: width 120ms linear;
}

.corner-actions {
  position: absolute;
  z-index: 10;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.corner-actions.visible { opacity: 1; pointer-events: auto; }

.icon-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(238, 226, 199, .55);
  border-radius: 2px;
  background: rgba(20, 15, 24, .76);
  color: var(--ivory);
  font: 700 12px/1 "Courier New", monospace;
  cursor: pointer;
}

.icon-button:hover, .icon-button:focus-visible { background: #5c2638; outline: 2px solid var(--gold); }

.panel-screen {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  background: rgba(12, 9, 15, .82);
  backdrop-filter: blur(4px);
  transition: opacity 160ms ease, visibility 160ms ease;
}

.panel-screen.active { visibility: visible; opacity: 1; }

#start-screen {
  background:
    radial-gradient(circle at 50% 42%, rgba(109, 29, 49, .26), transparent 38%),
    linear-gradient(rgba(13, 11, 16, .83), rgba(13, 11, 16, .92));
  overflow-y: auto;
}

.start-card, .small-panel, .upgrade-panel {
  width: min(700px, 100%);
  text-align: center;
  color: var(--ivory);
}

.start-card { width: min(940px, 100%); margin: auto; padding-block: 18px; }

.start-card::before {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  margin: 0 auto 24px;
  background: linear-gradient(90deg, transparent, var(--blood), transparent);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font: 700 12px/1.2 "Courier New", monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; font-weight: 900; }

h1 {
  color: #f1e7d1;
  font-size: clamp(52px, 8vw, 88px);
  line-height: .88;
  letter-spacing: -.08em;
  text-shadow: 0 5px 0 #3b1420, 0 11px 28px #000;
}

h1 span { color: #b94049; }

h2 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -.04em; }

.intro {
  width: min(530px, 90%);
  margin: 20px auto 18px;
  color: #c8bdad;
  font-size: 15px;
  line-height: 1.9;
}

.pregame-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  margin: 0 auto 18px;
  text-align: left;
}

.hunter-select, .legacy-shop {
  padding: 12px;
  border: 1px solid rgba(166, 133, 87, .42);
  background: rgba(25, 20, 29, .76);
}

.pregame-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.pregame-heading span { color: #dac28b; font-size: 13px; font-weight: 800; }
.pregame-heading small { color: #7d747d; font: 10px/1 "Courier New", monospace; }
.hunter-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.legacy-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }

.hunter-card, .legacy-item {
  min-width: 0;
  border: 1px solid #4b404a;
  background: #211b25;
  color: #cbbfb1;
  cursor: pointer;
}

.hunter-card { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; padding: 7px; text-align: left; }
.hunter-card:hover, .hunter-card:focus-visible, .hunter-card.selected { border-color: #d0aa60; outline: 1px solid rgba(208, 170, 96, .28); background: #302331; }
.hunter-portrait { position: relative; grid-row: 1 / 3; display: block; width: 36px; height: 36px; overflow: hidden; background: #2a222d; }
.hunter-portrait::before { content: ""; position: absolute; top: 5px; left: 13px; width: 11px; height: 12px; background: #c49572; box-shadow: -3px -3px 0 #241a21; }
.hunter-portrait::after { content: ""; position: absolute; bottom: 2px; left: 8px; width: 21px; height: 17px; background: #7b2e48; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.hunter-card[data-hunter="mira"] .hunter-portrait::before { box-shadow: -3px -3px 0 #d8d0c1, 8px -1px 0 #d8d0c1; }
.hunter-card[data-hunter="mira"] .hunter-portrait::after { background: #31516f; }
.hunter-card[data-hunter="orin"] .hunter-portrait::before { width: 13px; background: #9b765b; box-shadow: -3px -3px 0 #403329, 1px 9px 0 #60473b; }
.hunter-card[data-hunter="orin"] .hunter-portrait::after { background: #50603b; }
.hunter-card[data-hunter="sera"] .hunter-portrait::before { background: #bd9677; box-shadow: -3px -3px 0 #e0d0ac, 7px 1px 0 #e0d0ac; }
.hunter-card[data-hunter="sera"] .hunter-portrait::after { background: #73536f; }
.hunter-card strong { align-self: end; font-size: 12px; }
.hunter-card small { align-self: start; color: #817780; font: 9px/1.2 "Courier New", monospace; }

.legacy-item { display: flex; flex-direction: column; gap: 3px; padding: 8px; text-align: center; }
.legacy-item:hover:not(:disabled), .legacy-item:focus-visible:not(:disabled) { border-color: #d0aa60; outline: 1px solid rgba(208, 170, 96, .28); }
.legacy-item span { color: #bdae9e; font-size: 11px; }
.legacy-item strong { color: #e5cb87; font: 700 10px/1.2 "Courier New", monospace; }
.legacy-item small { color: #746b74; font: 9px/1.2 "Courier New", monospace; }
.legacy-item:disabled { opacity: .42; cursor: not-allowed; }

.primary-button {
  min-width: 210px;
  padding: 14px 28px;
  border: 1px solid #e0c991;
  border-radius: 2px;
  background: linear-gradient(#852c3e, #5d1d2d);
  box-shadow: inset 0 0 0 2px rgba(22, 13, 19, .45), 0 7px 18px rgba(0, 0, 0, .35);
  color: #fff1d5;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .12em;
  cursor: pointer;
}

.primary-button:hover, .primary-button:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(#a23a4d, #6d2334);
  outline: 3px solid rgba(211, 173, 98, .35);
}

.controls {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 23px;
  color: #8f8792;
  font: 12px/1.6 "Courier New", monospace;
}

kbd {
  padding: 2px 5px;
  border: 1px solid #5f5764;
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #29242d;
  color: #d8cdbb;
}

.best-run { min-height: 1.2em; color: #746d76; font: 11px/1.3 "Courier New", monospace; }

.upgrade-panel { width: min(940px, 100%); }
.upgrade-queue {
  display: none;
  width: max-content;
  margin: 8px auto 0;
  padding: 5px 12px;
  border: 1px solid #8c534f;
  background: linear-gradient(90deg, rgba(83, 31, 44, .18), rgba(117, 45, 57, .5), rgba(83, 31, 44, .18));
  color: #f0cf83;
  box-shadow: inset 0 0 0 2px rgba(17, 12, 18, .68);
  font: 700 11px/1.2 "Courier New", monospace;
  letter-spacing: .12em;
}
.upgrade-queue.visible { display: block; }
.upgrade-queue::before { content: "◆"; margin-right: 8px; color: #bc4b59; }
.upgrade-subtitle { margin: 8px 0 24px; color: #9e929d; font-size: 14px; }

.upgrade-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.upgrade-options.fallback { max-width: 640px; margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.upgrade-card {
  position: relative;
  min-height: 250px;
  padding: 22px 18px 18px;
  overflow: hidden;
  border: 1px solid #8b7555;
  border-radius: 3px;
  background:
    linear-gradient(145deg, rgba(97, 60, 91, .3), transparent 40%),
    #221b27;
  box-shadow: inset 0 0 0 3px #17131b, 0 8px 24px rgba(0, 0, 0, .35);
  color: var(--ivory);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.upgrade-card::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -36px;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(211, 173, 98, .16);
  transform: rotate(45deg);
}

.upgrade-card:hover, .upgrade-card:focus-visible {
  transform: translateY(-5px);
  border-color: #e0c077;
  outline: 2px solid rgba(224, 192, 119, .3);
}

.upgrade-options.banish-mode .upgrade-card {
  border-color: #9b3c49;
  background: linear-gradient(145deg, #33202a, #241923 72%);
  box-shadow: inset 0 0 0 3px #171119, 0 0 0 1px rgba(180, 53, 68, .28);
  animation: banish-pulse 900ms ease-in-out infinite alternate;
}
.upgrade-options.banish-mode .upgrade-card::before {
  content: "点击放逐";
  position: absolute;
  top: 9px;
  left: 10px;
  padding: 4px 7px;
  border: 1px solid #8e3541;
  background: #2b171e;
  color: #e19a96;
  font: 800 9px/1 "Courier New", monospace;
  letter-spacing: .08em;
}
.upgrade-options.banish-mode .upgrade-card:hover,
.upgrade-options.banish-mode .upgrade-card:focus-visible { border-color: #e15b68; outline-color: rgba(225, 91, 104, .3); }
@keyframes banish-pulse { to { box-shadow: inset 0 0 0 3px #171119, 0 0 18px rgba(177, 47, 62, .24); } }

.upgrade-key {
  position: absolute;
  top: 10px;
  right: 11px;
  color: #746c76;
  font: 700 11px/1 "Courier New", monospace;
}

.upgrade-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border: 1px solid #9b835c;
  outline: 4px solid #17131b;
  background: #4a314b;
  color: #f5d884;
  font: 900 27px/1 "Courier New", monospace;
  text-shadow: 0 2px #000;
}

.upgrade-card h3 { margin: 0 0 8px; font-size: 21px; }
.upgrade-card p { margin: 0; color: #b4a9aa; font-size: 13px; line-height: 1.65; }
.upgrade-card .rank { display: block; margin-top: 15px; color: var(--gold); font: 700 11px/1 "Courier New", monospace; }
.evolution-hint { display: block; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(211,173,98,.18); color: #8d8490; font: 700 10px/1.45 "Courier New", monospace; }
.evolution-hint.ready { color: #e4c569; }

.upgrade-actions { display: grid; justify-items: center; gap: 7px; margin-top: 18px; }
.upgrade-actions p { margin: 0; color: #766e79; font: 10px/1 "Courier New", monospace; }
.upgrade-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; gap: 8px; }
#reroll-button,
#skip-button,
#banish-button {
  min-width: 178px;
  padding: 10px 16px;
  border: 1px solid #7c6549;
  border-radius: 2px;
  background: linear-gradient(90deg, #211922, #3a2532 48%, #211922);
  color: #e3d4bd;
  box-shadow: inset 0 0 0 2px #151118;
  cursor: pointer;
}
#skip-button { border-color: #684750; background: linear-gradient(90deg, #21191e, #352127 48%, #21191e); }
#banish-button { border-color: #713942; background: linear-gradient(90deg, #25181d, #3b2028 48%, #25181d); }
#reroll-button > span,
#skip-button > span,
#banish-button > span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: #762b40; color: #f2d27d; font: 900 16px/1 Georgia, serif; vertical-align: middle; }
#skip-button > span { border-radius: 2px; background: #4a2932; color: #d9b9b4; }
#banish-button > span { border-radius: 2px; background: #5d2631; color: #f0a7a0; transform: rotate(45deg); }
#reroll-button small,
#skip-button small,
#banish-button small { margin-left: 9px; color: #9d8b79; font: 10px/1 "Courier New", monospace; }
#reroll-button:hover:not(:disabled), #reroll-button:focus-visible,
#skip-button:hover:not(:disabled), #skip-button:focus-visible,
#banish-button:hover:not(:disabled), #banish-button:focus-visible { border-color: #dfbd70; outline: 2px solid rgba(223,189,112,.22); }
#banish-button[aria-pressed="true"] { border-color: #d95461; background: #4b2029; color: #f3c1b7; box-shadow: inset 0 0 0 2px #201118, 0 0 14px rgba(196, 53, 68, .23); }
#reroll-button:disabled,
#skip-button:disabled,
#banish-button:disabled { color: #6f6770; filter: grayscale(1); cursor: not-allowed; opacity: .6; }

.small-panel {
  width: min(520px, 100%);
  padding: 40px;
  border: 1px solid #725d49;
  background: #1d1821;
  box-shadow: inset 0 0 0 4px #121016, 0 18px 50px #000;
}

.small-panel .primary-button { margin-top: 30px; }
.pause-panel { width: min(680px, 100%); max-height: calc(100dvh - 30px); overflow-y: auto; padding: 28px 34px; }
.pause-panel h2 { font-size: clamp(38px, 5vw, 54px); }
.pause-copy { margin: 5px 0 13px; color: #8f858e; font: 700 10px/1 "Courier New", monospace; letter-spacing: .16em; }
.pause-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pause-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid #413743; background: #18131b; text-align: left; }
.pause-stat span { color: #8f858e; font-size: 10px; }
.pause-stat strong { color: #e2c875; font: 800 12px/1 "Courier New", monospace; }
.pause-record { margin: 11px 0 0; color: #a7989e; font: 10px/1.4 "Courier New", monospace; }
.pause-damage { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(132, 104, 76, .32); }
.pause-actions { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 22px; }
.pause-panel .primary-button { min-width: 190px; margin-top: 0; padding-block: 11px; }
.victory-panel { border-color: #b79a59; background: radial-gradient(circle at 50% 0, rgba(232, 202, 120, .14), transparent 42%), #1d1821; }
.victory-copy { margin: 14px auto 0; color: #a89da4; font-size: 13px; line-height: 1.7; }
.victory-screen { background: linear-gradient(rgba(26, 19, 27, .74), rgba(11, 12, 18, .9)), radial-gradient(circle at 50% 8%, rgba(226, 181, 91, .2), transparent 45%); }

.chest-panel {
  width: min(560px, 100%);
  padding: 30px 38px 38px;
  border: 1px solid #9f7b3e;
  background: radial-gradient(circle at 50% 34%, rgba(218, 174, 78, .2), transparent 34%), #1c1620;
  box-shadow: inset 0 0 0 4px #110e14, 0 20px 70px #000;
  color: var(--ivory);
  text-align: center;
}
.chest-panel.triple { width: min(760px, 100%); }

.reliquary {
  position: relative;
  width: 114px;
  height: 84px;
  margin: 8px auto 19px;
  filter: drop-shadow(0 0 18px rgba(232, 186, 75, .36));
}

.reliquary::before, .reliquary::after, .reliquary span {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  border: 4px solid #3b2319;
  background: #a76e2a;
}

.reliquary::before { top: 7px; height: 34px; border-radius: 40px 40px 3px 3px; background: linear-gradient(#d8a63e, #9c6124); }
.reliquary::after { bottom: 4px; height: 42px; border-radius: 2px; background: linear-gradient(#bb7d2d, #75421e); }
.reliquary span { z-index: 2; top: 38px; left: 48px; right: auto; width: 20px; height: 24px; border-width: 3px; background: #e2c66a; }

.loot-rewards {
  display: grid;
  gap: 10px;
  width: min(650px, 100%);
  margin: 22px auto 0;
}

.loot-rewards.triple { grid-template-columns: repeat(3, 1fr); }

.loot-reveal {
  display: flex;
  align-items: center;
  gap: 17px;
  width: min(380px, 100%);
  margin: 0 auto;
  padding: 15px;
  border-block: 1px solid rgba(211, 173, 98, .34);
  background: linear-gradient(90deg, rgba(79,48,71,.22), transparent);
  text-align: left;
  animation: relic-light 420ms both;
}

.loot-rewards.triple .loot-reveal { display: grid; grid-template-columns: 1fr; justify-items: center; min-height: 156px; text-align: center; }
.loot-rewards.triple .loot-reveal:nth-child(2) { animation-delay: 110ms; }
.loot-rewards.triple .loot-reveal:nth-child(3) { animation-delay: 220ms; }
.loot-reveal.evolution { border-color: rgba(235,197,98,.75); background: radial-gradient(circle at 50% 0, rgba(229,190,88,.18), transparent 60%), #261d29; }

@keyframes relic-light {
  from { opacity: 0; transform: translateY(8px); filter: brightness(.45); }
  to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

.chest-icon {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 1px solid #b79554;
  background: #4c304b;
  color: #f1d270;
  font: 900 24px/1 "Courier New", monospace;
}

.loot-reveal strong { font-size: 20px; }
.loot-reveal p { margin: 6px 0 0; color: #ab9ca3; font-size: 12px; }
.chest-panel .primary-button { margin-top: 24px; }

.text-button {
  display: block;
  margin: 18px auto 0;
  border: 0;
  background: transparent;
  color: #9f929a;
  text-decoration: underline;
  cursor: pointer;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 28px;
  background: #4a3e47;
}

.result-grid div { padding: 17px 8px; background: #211b25; }
.result-grid strong { display: block; color: #f0d080; font: 700 23px/1 "Courier New", monospace; }
.result-grid span { display: block; margin-top: 9px; color: #8d838c; font-size: 11px; }

.damage-summary { display: grid; gap: 7px; margin-top: 17px; text-align: left; }
.damage-title { margin: 0 0 2px; color: #b9aeb4; font: 700 10px/1 "Courier New", monospace; letter-spacing: .15em; text-transform: uppercase; }
.damage-row { display: grid; grid-template-columns: minmax(78px, 112px) 1fr 54px; align-items: center; gap: 9px; color: #d2c7c2; font-size: 11px; }
.damage-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.damage-row i { height: 5px; overflow: hidden; background: #352b35; }
.damage-row b { display: block; height: 100%; background: linear-gradient(90deg, #733047, #d1a855); box-shadow: 0 0 8px rgba(209,168,85,.28); }
.damage-row strong { color: #d9c98d; font: 700 11px/1 "Courier New", monospace; text-align: right; }
.damage-empty { margin: 0; color: #81767e; font-size: 11px; text-align: center; }

#joystick {
  position: absolute;
  z-index: 12;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(26px, env(safe-area-inset-bottom));
  display: none;
  width: 112px;
  height: 112px;
  border: 2px solid rgba(238, 226, 199, .24);
  border-radius: 50%;
  background: rgba(20, 15, 24, .28);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .45);
}

.joystick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px;
  border: 1px solid rgba(238, 226, 199, .45);
  border-radius: 50%;
  background: rgba(91, 42, 59, .8);
}

#toast {
  position: absolute;
  z-index: 30;
  top: 84px;
  left: 50%;
  padding: 8px 14px;
  border: 1px solid rgba(211, 173, 98, .45);
  background: rgba(25, 17, 27, .9);
  color: var(--ivory);
  font: 700 12px/1 "Courier New", monospace;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

#toast.show { opacity: 1; transform: translate(-50%, 0); }

#wave-banner {
  position: absolute;
  z-index: 18;
  top: 30%;
  left: 50%;
  min-width: min(480px, 78vw);
  padding: 11px 38px 14px;
  border-block: 1px solid rgba(216, 176, 91, .58);
  background: linear-gradient(90deg, transparent, rgba(24, 15, 24, .88) 17%, rgba(24, 15, 24, .88) 83%, transparent);
  color: var(--ivory);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

#wave-banner.show { opacity: 1; transform: translate(-50%, 0); }
#wave-banner span { display: block; margin-bottom: 5px; color: #bd3e4b; font: 800 10px/1 "Courier New", monospace; letter-spacing: .25em; }
#wave-banner strong { font-size: 28px; letter-spacing: .08em; text-shadow: 0 3px #34151e; }

@media (pointer: coarse), (max-width: 760px) {
  #joystick { display: block; }
  .health-wrap { width: min(280px, 58vw); bottom: max(20px, env(safe-area-inset-bottom)); }
  .controls { flex-direction: column; gap: 2px; }
  .upgrade-panel { align-self: center; }
  .upgrade-options { grid-template-columns: 1fr; gap: 8px; }
  .upgrade-options.fallback { grid-template-columns: 1fr; }
  .upgrade-card { min-height: 0; padding: 13px 42px 13px 72px; }
  .upgrade-icon { position: absolute; left: 13px; top: 14px; width: 44px; height: 44px; margin: 0; font-size: 20px; }
  .upgrade-card h3 { font-size: 17px; }
  .upgrade-card p { font-size: 11px; line-height: 1.45; }
  .upgrade-card .rank { margin-top: 7px; }
  .evolution-hint { margin-top: 6px; padding-top: 6px; }
  .upgrade-actions { margin-top: 10px; }
  .upgrade-tools { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #reroll-button, #skip-button, #banish-button { min-width: 0; padding: 9px 7px; font-size: 11px; }
  #banish-button { grid-column: 1 / -1; }
  #reroll-button small, #skip-button small, #banish-button small { margin-left: 5px; font-size: 9px; }
  .panel-screen { padding: 15px; }
  .pause-panel { padding: 21px 16px; }
  .pause-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pause-actions { margin-top: 16px; }
  .run-block { padding-right: 80px; gap: 9px; }
  #kills { display: none; }
  #stage-goal { display: none; }
  #combo-meter { top: 62px; right: 18px; }
  #loadout { width: 54vw; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .chest-panel { padding: 24px 18px 28px; }
  .chest-panel.triple { padding: 15px 18px 18px; }
  .chest-panel.triple .reliquary { width: 82px; height: 62px; margin: 0 auto 7px; transform: scale(.78); }
  .chest-panel.triple h2 { margin-block: 4px; font-size: 32px; }
  .loot-rewards.triple { grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
  .loot-rewards.triple .loot-reveal { display: grid; grid-template-columns: 44px 1fr; justify-items: stretch; min-height: 0; padding: 8px 10px; text-align: left; }
  .loot-rewards.triple .chest-icon { width: 40px; height: 40px; font-size: 18px; }
  .loot-rewards.triple .loot-reveal strong { font-size: 15px; }
  .loot-rewards.triple .loot-reveal p { margin-top: 3px; font-size: 10px; }
  .chest-panel.triple .primary-button { margin-top: 12px; }
  .pregame-grid { grid-template-columns: 1fr; }
  .hunter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-card { padding-block: 8px 24px; }
  #boss-wrap { top: 62px; width: 64vw; }
}

@media (max-height: 570px) {
  .intro { margin: 18px auto; line-height: 1.55; }
  .start-card::before { margin-bottom: 14px; }
  .controls { margin-top: 13px; }
  .pregame-grid { grid-template-columns: 1.15fr .85fr; }
  .start-card::before, .intro, .controls, .best-run { display: none; }
  .start-card { padding-block: 8px; }
  h1 { font-size: 54px; }
  .upgrade-panel > .eyebrow, .upgrade-subtitle { display: none; }
  .upgrade-queue { margin-top: 5px; padding-block: 4px; font-size: 10px; }
  .upgrade-panel h2 { margin-bottom: 10px; font-size: 34px; }
}

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