@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --gold:#d1b67b;
  --muted:#89928b;
  --line:#ffffff20
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#101815;
  color:#e6e9df;
  font-family:'Space Grotesk',sans-serif;
  overflow:hidden;
  touch-action:none
}
canvas,.vignette {
  position:fixed;
  inset:0;
  width:100%;
  height:100%
}
canvas {
  image-rendering:pixelated
}
.vignette {
  pointer-events:none;
  background:linear-gradient(90deg,#0c1211ec 0%,#0c1211b0 36%,transparent 75%),linear-gradient(0deg,#0b1111a0,transparent 25%,transparent 85%,#0b1111b0)
}
header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 4vw
}
.brand {
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--gold);
  font-size:28px;
  text-decoration:none
}
.brand span {
  font-size:18px;
  letter-spacing:3px;
  font-weight:700
}
.brand small {
  display:block;
  font-size:9px;
  letter-spacing:5px;
  margin-top:4px;
  color:#b5bdb3
}
.header-actions {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:13px;
  color:var(--gold)
}
button {
  color:inherit;
  font:inherit;
  cursor:pointer;
  border:1px solid var(--line);
  background:#111a18b8;
  border-radius:3px;
  padding:10px 15px
}
button:hover {
  border-color:var(--gold);
  background:#26302a
}
button:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px
}
main {
  position:relative;
  margin: max(110px,12vh) 0 0 8vw;
  width:500px;
  max-width:86vw;
  z-index:2
}
.eyebrow {
  color:var(--gold);
  font-size:10px;
  letter-spacing:3px;
  margin-bottom:17px
}
h1 {
  font-family:'Noto Serif SC',serif;
  font-size:66px;
  letter-spacing:8px;
  line-height:1.2;
  margin:0;
  font-weight:900
}
h1 span {
  display:block;
  color:var(--gold)
}
.intro {
  font-size:13px;
  line-height:1.9;
  color:#a4afa5;
  margin:20px 0 25px
}
.chapter {
  display:flex;
  gap:20px;
  padding:18px 0;
  border-block:1px solid var(--line);
  align-items:center
}
.chapter-no {
  font-size:36px;
  color:#657168
}
.chapter small {
  font-size:8px;
  letter-spacing:2px;
  color:var(--gold)
}
h2 {
  font-family:'Noto Serif SC',serif;
  font-size:20px;
  margin:5px 0
}
.chapter p {
  font-size:10px;
  color:var(--muted);
  margin:5px 0
}
.difficulty {
  margin-left:auto;
  font-size:10px;
  color:#9aaf96;
  border:1px solid #66795c;
  padding:5px
}
.section-label {
  font-size:12px;
  margin:23px 0 12px
}
.section-label span {
  float:right;
  font-size:8px;
  color:#6d7b72;
  letter-spacing:1px
}
#characters {
  display:flex;
  gap:10px
}
.character {
  flex:1;
  position:relative;
  text-align:left;
  padding:12px 10px;
  border:1px solid var(--line);
  background:#111a18b8
}
.character.selected {
  border-color:var(--gold);
  background:#b4a06b16
}
.character.selected:after {
  content:'✓';
  position:absolute;
  right:8px;
  top:6px;
  color:var(--gold)
}
.portrait {
  font-size:26px;
  display:block;
  margin-bottom:7px
}
.character strong {
  font-size:12px;
  display:block
}
.character small {
  font-size:9px;
  color:#8f9c92;
  display:block;
  margin-top:5px
}
.start {
  background:var(--gold);
  border:1px solid var(--gold);
  color:#19201b;
  width:100%;
  text-align:left;
  font-weight:700;
  font-size:16px;
  padding:17px 23px;
  margin-top:18px;
  letter-spacing:3px
}
.start:hover {
  background:#e3cd9e;
  color:#101511
}
.start span {
  float:right
}
.menu-bottom {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:12px
}
.menu-bottom button {
  border:0;
  padding:9px 0;
  font-size:11px;
  color:#b7bdb0;
  background:none
}
.menu-bottom>span {
  margin-left:auto;
  font-size:10px;
  color:#718176
}
.controls-hint {
  display:flex;
  gap:22px;
  color:#738177;
  font-size:10px;
  margin-top:27px
}
footer {
  position:fixed;
  bottom:22px;
  left:4vw;
  right:4vw;
  font-size:8px;
  letter-spacing:2px;
  color:#5e6c63;
  display:flex;
  justify-content:space-between
}
footer span {
  letter-spacing:1px
}
#hud {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:4
}
#hud button {
  pointer-events:auto
}
.xp {
  height:5px;
  background:#12201e
}
.xp i {
  display:block;
  height:100%;
  background:#76b9c6;
  box-shadow:0 0 12px #72bdcf
}
.hud-top {
  display:flex;
  justify-content:space-between;
  align-items:start;
  padding:20px 24px
}
.hud-top small {
  color:#b3c2b0;
  font-size:10px
}
.hud-top #level {
  color:var(--gold);
  margin-top:5px;
  font-size:19px
}
.time {
  font-size:32px;
  letter-spacing:3px;
  text-shadow:0 2px 4px #000
}
.stats {
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--gold);
  font-size:12px
}
.stats button {
  padding:8px 12px
}
body.playing header,body.playing footer {
  display:none
}
body.playing .vignette {
  background:radial-gradient(ellipse,transparent 40%,#0008)
}
.hp {
  position:absolute;
  bottom:max(30px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:160px;
  height:8px;
  background:#311a20;
  border:1px solid #d2b78166
}
.hp i {
  display:block;
  background:#b75650;
  height:100%;
  transition:width .2s
}
.hp span {
  position:absolute;
  top:-19px;
  left:0;
  right:0;
  text-align:center;
  font-size:10px;
  color:#ddd
}
#loadout {
  position:absolute;
  left:24px;
  top:95px;
  display:flex;
  gap:6px
}
#loadout span {
  font-size:19px;
  background:#15211edb;
  padding:7px;
  border:1px solid #b6a47755
}
#loadout small {
  font-size:8px;
  color:var(--gold)
}
.mission {
  position:absolute;
  bottom:55px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:#a4b19e;
  white-space:nowrap
}
#nova {
  position:absolute;
  bottom:40px;
  right:35px;
  border-radius:50%;
  width:74px;
  height:74px;
  font-size:28px;
  color:var(--gold);
  border-color:#c1a36b80;
  background:#14211de0
}
#nova small {
  display:block;
  font-size:9px
}
#joystick {
  position:fixed;
  z-index:5;
  border:1px solid #cfbd8f70;
  background:#c7bb8f12;
  width:110px;
  height:110px;
  border-radius:50%;
  pointer-events:none
}
#joystick div {
  position:absolute;
  left:35px;
  top:35px;
  width:40px;
  height:40px;
  border:1px solid #e3ce99;
  background:#cfb87960;
  border-radius:50%
}
#overlay {
  position:fixed;
  inset:0;
  background:#070e0ee8;
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:8;
  padding:22px;
  overflow:auto
}
#overlay[hidden],[hidden] {
  display:none!important
}
.panel {
  width:680px;
  max-width:100%;
  text-align:center
}
.panel .eyebrow {
  margin-bottom:12px
}
.panel h2 {
  font-size:34px;
  margin:0 0 12px
}
.panel p {
  color:#9caa9e;
  font-size:13px;
  line-height:1.9
}
.choices {
  display:flex;
  gap:15px;
  margin:25px 0
}
.choice {
  flex:1;
  text-align:left;
  padding:24px 18px;
  min-height:170px
}
.choice .icon {
  font-size:32px;
  display:block;
  margin-bottom:20px
}
.choice strong {
  display:block;
  color:var(--gold);
  font-size:16px
}
.choice p {
  font-size:11px
}
.choice small {
  color:#6eb5b5
}
.panel .start {
  width:260px;
  text-align:center
}
.rows {
  margin:25px 0;
  display:grid;
  gap:10px
}
.row {
  display:flex;
  align-items:center;
  text-align:left;
  padding:14px;
  border:1px solid var(--line);
  gap:12px
}
.row>div {
  flex:1
}
.row small {
  display:block;
  color:var(--muted);
  margin-top:6px
}
.results {
  display:flex;
  justify-content:space-around;
  margin:30px 0
}
.results strong {
  display:block;
  font-size:30px;
  color:var(--gold)
}
.results small {
  font-size:11px;
  color:var(--muted)
}
#toast {
  position:fixed;
  top:24%;
  left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  font-size:18px;
  z-index:9;
  text-shadow:0 2px 8px #000;
  pointer-events:none;
  white-space:nowrap
}
#bossbar {
  position:absolute;
  top:90px;
  width:40%;
  left:30%;
  text-align:center;
  color:#dd9690;
  font-size:12px
}
#bossbar>div {
  height:7px;
  background:#341e24;
  margin-top:8px
}
#bossbar i {
  display:block;
  background:#b95765;
  height:100%
}
@media(max-height:760px) and (min-width:700px) {
  main {
    margin-top:90px
  }
  h1 {
    font-size:46px;
    display:flex;
    gap:15px
  }
  .intro {
    margin:12px 0
  }
  .chapter {
    padding:11px 0
  }
  .section-label {
    margin-top:14px
  }
  .controls-hint {
    margin-top:15px
  }
  footer {
    bottom:12px
  }
}
@media(max-width:600px) {
  header {
    padding:20px 6vw
  }
  .brand span {
    font-size:14px
  }
  .header-actions {
    gap:5px
  }
  .header-actions button {
    padding:8px;
    font-size:10px
  }
  main {
    margin:110px auto 0;
    width:88vw;
    max-width:none
  }
  h1 {
    font-size:54px;
    display:flex;
    gap:10px;
    letter-spacing:3px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:2px
  }
  .intro {
    font-size:12px;
    margin:18px 0 22px
  }
  .chapter {
    gap:12px
  }
  .controls-hint {
    justify-content:space-between;
    gap:4px;
    font-size:9px
  }
  footer {
    font-size:6px
  }
  .choices {
    flex-direction:column;
    gap:9px
  }
  .choice {
    min-height:0;
    padding:16px
  }
  .choice .icon {
    float:left;
    margin:0 18px 0 0
  }
  .choice p {
    margin:5px 0
  }
  .hud-top {
    padding:17px 14px
  }
  .stats {
    gap:10px
  }
  .time {
    font-size:27px
  }
  #loadout {
    left:14px;
    top:88px
  }
  #loadout span {
    padding:5px;
    font-size:16px
  }
  #nova {
    right:22px;
    bottom:35px;
    width:66px;
    height:66px
  }
  #bossbar {
    width:60%;
    left:20%;
    top:145px
  }
  .section-label span {
    font-size:7px
  }
}
@media(max-height:520px) {
  header {
    padding:15px 4vw
  }
  main {
    margin:72px 0 0 6vw;
    width:520px;
    max-width:70vw
  }
  h1 {
    font-size:34px;
    display:flex;
    gap:12px
  }
  .intro,.controls-hint,.section-label span,footer {
    display:none
  }
  .eyebrow {
    margin-bottom:8px
  }
  .chapter {
    padding:8px 0;
    margin-top:12px
  }
  .chapter-no {
    font-size:26px
  }
  .chapter h2 {
    font-size:16px
  }
  .section-label {
    margin:12px 0 8px
  }
  .character {
    padding:8px
  }
  .portrait {
    float:left;
    margin:0 10px 0 0
  }
  .start {
    padding:12px;
    margin-top:10px
  }
  .menu-bottom {
    margin-top:4px
  }
  .panel h2 {
    font-size:25px
  }
  .choices {
    flex-direction:row
  }
  .choice {
    padding:14px;
    min-height:130px
  }
  .choice .icon {
    float:none;
    margin:0 0 12px
  }
  .panel .eyebrow {
    margin-bottom:4px
  }
  .rows {
    gap:5px;
    margin:12px 0
  }
  .row {
    padding:7px
  }
  .results {
    margin:12px 0
  }
}
/* VisualViewport sizing keeps Safari browser chrome and rotation out of the play area. */
html, body {
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}
body {
  touch-action: auto;
  -webkit-tap-highlight-color: transparent;
}
#app {
  position: fixed;
  left: var(--viewport-left, 0px);
  top: var(--viewport-top, 0px);
  width: var(--viewport-width, 100vw);
  height: var(--viewport-height, 100dvh);
  transform: translateZ(0);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  touch-action: pan-y;
}
body.playing #app {
  overflow: hidden;
}
canvas, #hud, #joystick {
  touch-action: none;
}
body:not(.playing) canvas {
  pointer-events: none;
}
button, a {
  touch-action: manipulation;
}
button, .brand, #hud, #joystick {
  user-select: none;
  -webkit-user-select: none;
}
button {
  min-height: 44px;
}
header {
  padding-top: max(20px, env(safe-area-inset-top));
  padding-left: max(4vw, env(safe-area-inset-left));
  padding-right: max(4vw, env(safe-area-inset-right));
}
main {
  margin-bottom: max(64px, env(safe-area-inset-bottom));
}
footer {
  bottom: max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
#hud .xp {
  margin-top: env(safe-area-inset-top);
}
.hud-top {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
#loadout {
  top: calc(95px + env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
}
#bossbar {
  top: calc(100px + env(safe-area-inset-top));
}
#nova {
  right: max(22px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(35px, calc(env(safe-area-inset-bottom) + 16px));
}
.hp {
  bottom: calc(18px + env(safe-area-inset-bottom));
}
.mission {
  bottom: calc(50px + env(safe-area-inset-bottom));
}
#overlay {
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  align-items: flex-start;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.panel {
  margin: auto;
  flex-shrink: 0;
}
#toast {
  max-width: 90%;
  white-space: normal;
  text-align: center;
}
@media (max-width: 600px) {
  #bossbar {
    top: calc(132px + env(safe-area-inset-top));
  }
  .hud-top .stats {
    gap: 8px;
  }
  .hud-top .stats button {
    min-width: 44px;
  }
  #loadout {
    gap: 4px;
    flex-wrap: wrap;
    max-width: 70%;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  main {
    margin-left: max(6vw, calc(env(safe-area-inset-left) + 18px));
  }
  #loadout {
    top: calc(80px + env(safe-area-inset-top));
  }
  #bossbar {
    top: calc(86px + env(safe-area-inset-top));
  }
  .choices {
    flex-direction: row;
  }
  .choice {
    min-width: 0;
  }
  #overlay .panel {
    width: 680px;
  }
}
@media (max-width: 370px) {
  h1 {
    font-size: 43px;
  }
  .menu-bottom {
    gap: 10px;
  }
  .header-actions {
    gap: 3px;
  }
  .brand span {
    letter-spacing: 1px;
  }
}
@media (max-height: 650px) {
  footer {
    display: none;
  }
  main {
    margin-bottom: 24px;
  }
}
/* Short landscape screens use two columns instead of pushing Start below the fold. */
@media (orientation: landscape) and (min-width: 540px) and (max-height: 420px) {
  main {
    width: calc(100% - max(32px, env(safe-area-inset-left)) - max(32px, env(safe-area-inset-right)));
    max-width: 860px;
    margin: max(78px, calc(env(safe-area-inset-top) + 58px)) auto 20px;
    display: grid;
    grid-template-columns: minmax(175px, 0.85fr) minmax(230px, 1.15fr);
    gap: 10px 20px;
  }
  main > .eyebrow, main > .intro, .controls-hint {
    display: none;
  }
  main h1 {
    grid-column: 1;
    grid-row: 1;
    font-size: 28px;
    gap: 7px;
    align-self: center;
  }
  .chapter {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 8px 0;
    gap: 10px;
  }
  .chapter p {
    font-size: 9px;
  }
  .chapter h2 {
    font-size: 17px;
  }
  .difficulty {
    display: none;
  }
  .section-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
  }
  #characters {
    grid-column: 2;
    grid-row: 2;
    gap: 6px;
  }
  .character {
    min-width: 0;
    padding: 8px 6px;
  }
  .portrait {
    float: none;
    font-size: 22px;
    margin: 0 0 5px;
  }
  .character strong {
    font-size: 11px;
  }
  .character small {
    font-size: 8px;
  }
  main > .start {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
  }
  .menu-bottom {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    gap: 14px;
  }
  .menu-bottom > span {
    display: none;
  }
  #loadout {
    max-width: 25%;
  }
}

#debug-toggle { position:fixed; z-index:9; left:max(14px,env(safe-area-inset-left)); bottom:max(12px,env(safe-area-inset-bottom)); color:#cfb67c; font-size:11px; }
#debug-panel { position:fixed; z-index:10; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); width:min(430px,calc(100% - 24px)); background:#111c19fa; border:1px solid #b49c6e; padding:16px; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; box-shadow:0 5px 40px #0009; font-size:12px; }
.debug-heading { display:flex; align-items:center; justify-content:space-between; }
#debug-panel p { color:#9caa9f; line-height:1.7; }
#debug-panel h3 { color:#d0b981; font-size:13px; margin:20px 0 9px; }
#debug-status { color:#e0c78b; line-height:1.8; margin-bottom:12px; }
.debug-buttons { display:flex; gap:7px; flex-wrap:wrap; }
.debug-buttons button { font-size:11px; padding:8px 10px; }
.debug-stat { border-bottom:1px solid #ffffff18; padding:10px 0; }
.debug-stat strong { display:block; color:#d9dfd4; font-weight:500; }
.debug-stat b { float:right; color:#dec58b; }
.debug-stat small { display:block; color:#879d90; line-height:1.7; margin-top:4px; }
.debug-heading { position:sticky; top:-16px; z-index:1; background:#111c19; padding:10px 0; border-bottom:1px solid #ffffff18; }
#debug-time-input { display:block; width:100%; min-height:44px; margin:8px 0; padding:8px 12px; background:#0c1612; border:1px solid #6f7962; color:#e3d7ac; font:inherit; }
#debug-wave-readout small { display:block; color:#9dad9e; line-height:1.8; }
#debug-panel summary { cursor:pointer; padding:12px 0; color:#c5b483; }
#wave-label { display:block; margin-top:3px; font-size:9px; color:#9cae9b; }
#pickup-notice { position:absolute; bottom:calc(76px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); color:#add4b8; font-size:11px; white-space:nowrap; pointer-events:none; transition:opacity .15s; text-shadow:0 1px 3px #000; }

.upgrade-tools {display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.upgrade-tools button {min-height:44px;padding:10px 16px}
.upgrade-tools button:disabled {opacity:.35;cursor:default}
.upgrade-help {font-size:12px;color:var(--muted);margin-top:10px}

#passive-loadout {position:absolute;top:calc(140px + env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));display:flex;gap:5px;align-items:center;max-width:75%;pointer-events:none;color:#9dbeb0}
#passive-loadout span {display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border:1px solid #5a786344;background:#12221bc9;font-size:13px}
#passive-loadout small {font-size:10px}
@media(max-width:600px) {#passive-loadout {top:calc(160px + env(safe-area-inset-top));gap:3px}#passive-loadout span {padding:2px 4px;font-size:12px}}
@media(orientation:landscape) and (max-height:520px) {#passive-loadout {left:auto;right:16px;top:70px;max-width:46%;flex-wrap:wrap;justify-content:flex-end}}

.chest-view {max-width:620px;margin:auto}
.chest-view h2 {margin:10px 0;color:#e0c383}
.chest-art {position:relative;width:96px;height:58px;margin:42px auto 20px;border:4px solid #a78a4f;background:linear-gradient(90deg,#59422b 0 44%,#d5b66e 44% 56%,#59422b 56%);box-shadow:0 0 36px #d5b66e22;image-rendering:pixelated}
.chest-art i {position:absolute;left:-4px;right:-4px;top:-24px;height:24px;border:4px solid #a78a4f;background:#745732;transform-origin:bottom;transition:transform .25s}
.chest-art b {display:block;font-size:26px;color:#e4c97e;line-height:50px}
.chest-art.opened i {transform:translateY(-10px) rotate(-12deg)}
.chest-roll {color:#d4c28f;font-size:27px;letter-spacing:3px;animation:chest-roll .28s ease-in-out infinite alternate;overflow:hidden;white-space:nowrap}
.chest-totals {display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:14px 0;color:#dfcb94;font-size:14px}
.chest-rewards {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;text-align:left;margin:18px 0}
.chest-reward {display:flex;gap:12px;padding:14px;border:1px solid #8b87604d;background:#1b2822;animation:reward-in .3s ease both;animation-delay:calc(min(var(--order),5)*.065s)}
.chest-reward.evolution {border-color:#d8b86f;background:#302d20;grid-column:1/-1}
.reward-icon {font-size:28px;color:#e5cc8c;min-width:32px}
.chest-reward strong {display:block;color:#ead7a6;margin:4px 0;font-size:17px}
.chest-reward small {color:#9cbdae;font-size:11px}
.chest-reward.evolution small {color:#e3bc6c}
.chest-reward p {margin:3px 0;font-size:12px;line-height:1.5}
.chest-view .chest-help {font-size:11px;color:#94a299}
@keyframes chest-roll {to{transform:translateY(-5px);opacity:.6}}
@keyframes reward-in {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px) {.chest-rewards {grid-template-columns:1fr}.chest-view h2 {font-size:28px}.chest-art {margin-top:30px;transform:scale(.85)}.chest-reward {padding:11px}}
@media(orientation:landscape) and (max-height:520px) {.chest-art {display:none}.chest-view h2 {font-size:24px}.chest-rewards {margin:10px 0}.chest-reward {padding:10px}.chest-view .start {margin-top:5px}.chest-totals {margin:8px 0}}
@media(prefers-reduced-motion:reduce) {.chest-roll,.chest-reward {animation:none}.chest-art i {transition:none}}
@media(min-width:601px) {.chest-rewards.rewards-5 {grid-template-columns:repeat(5,minmax(0,1fr))}.rewards-5 .chest-reward {flex-direction:column;gap:6px;padding:11px;min-width:0}.rewards-5 .chest-reward strong {font-size:14px}.rewards-5 .chest-reward p {font-size:11px}}
/* 13: chest -> coloured upward reels -> staggered locks -> reward summary. */
.chest-view {max-width:680px}
.chest-view .chest-subtitle {margin:0 0 8px}
.treasure-stage {position:relative;isolation:isolate;overflow:hidden;height:390px;max-width:600px;margin:12px auto 18px;border:2px solid #eac763;outline:1px solid #695432;outline-offset:4px;background:radial-gradient(ellipse at 50% 78%,#fff0a2 0,#c89a39 25%,#634b28 60%,#1f2226 100%);box-shadow:0 0 45px #e1b34225}
.treasure-rays {position:absolute;z-index:-1;width:1100px;height:1100px;left:calc(50% - 550px);top:calc(78% - 550px);background:repeating-conic-gradient(#fff3ab55 0deg 7deg,transparent 7deg 25deg);opacity:.6;mask-image:radial-gradient(circle,#000 8%,#0009 28%,transparent 54%)}
.treasure-frame {position:absolute;inset:12px 22%;border:2px solid #c5a264;background:linear-gradient(#28384355,#24253644);box-shadow:0 0 0 2px #30292a,inset 0 0 28px #111b2644}
.treasure-fans {position:absolute;left:50%;bottom:96px;width:0;height:0}
.treasure-lane {position:absolute;width:70px;height:246px;bottom:0;left:-35px;transform-origin:50% 100%;transform:rotate(var(--angle));overflow:hidden;clip-path:polygon(0 0,100% 0,67% 100%,33% 100%);background:linear-gradient(hsl(var(--hue) 65% 67% / .85),hsl(var(--hue) 75% 60% / .32));border-top:3px solid #fff2b8;box-shadow:inset 0 0 12px #fff4}
.treasure-reel {position:absolute;top:6px;width:100%;will-change:transform}
.treasure-reel span {display:flex;height:64px;align-items:center;justify-content:center;font-size:34px;color:#fff5c7;text-shadow:3px 3px #36232c,-2px -2px #62492c;filter:drop-shadow(0 0 5px #fff7)}
.reel-prize {position:absolute;top:10px;left:0;right:0;color:#fff6b7;text-shadow:2px 3px #342322}
.reel-prize span {display:block;font-size:40px;line-height:1.3}
.reel-prize small {font-size:12px;color:#fff;display:block;font-weight:bold}
.reel-prize.evolution {color:#fff;filter:drop-shadow(0 0 10px #b6f7ff)}
.treasure-lane[data-settled="true"] {background:linear-gradient(#fff0ac,#ecb74044);border-top-color:white}
.treasure-stage .chest-art {display:block!important;position:absolute;left:calc(50% - 48px);bottom:64px;margin:0;height:55px;border-color:#f2c860;background:linear-gradient(90deg,#983b38 0 12%,#e6b84b 12% 19%,#8a2f38 19% 43%,#e9c75f 43% 57%,#8a2f38 57% 81%,#e6b84b 81% 88%,#983b38 88%);box-shadow:0 5px 0 #553c32,0 0 35px #fff4a2;z-index:3}
.treasure-stage .chest-art i {background:linear-gradient(#cf5e4b,#70272e);border-color:#ebbf59;transition:transform .2s}
.treasure-stage .chest-art.opened i {transform:translateY(-13px) rotate(-18deg);background:#302633}
.treasure-stage .chest-art b {font-size:23px;color:#fff1a2}
.treasure-coins {position:absolute;inset:0;pointer-events:none;z-index:4}
.treasure-coins i {position:absolute;left:calc(50% - 8px);bottom:106px;font-style:normal;font-size:22px;color:#ffdf62;text-shadow:2px 2px #7b4c25,-1px -1px #fffac2;will-change:transform}
.treasure-counter {position:absolute;bottom:28px;left:0;right:0;color:#ffeb96;font:700 24px ui-monospace,monospace;text-shadow:2px 2px #46312e;font-variant-numeric:tabular-nums}
.treasure-caption {position:absolute;bottom:6px;left:0;right:0;font-size:11px;color:#fff1b5;letter-spacing:2px}
.treasure-stage[data-phase="charging"] {background:radial-gradient(ellipse at 50% 78%,#9b7636,#192323 75%)}
.treasure-stage[data-phase="charging"] .treasure-fans,.treasure-stage[data-phase="charging"] .treasure-rays {opacity:0}
.treasure-stage[data-phase="result"] {height:230px;background:radial-gradient(ellipse at 50% 78%,#b68c39,#25282d 75%)}
.treasure-stage[data-phase="result"] .treasure-lane {height:130px}
.treasure-stage[data-phase="result"] .treasure-fans {bottom:70px}
.treasure-stage[data-phase="result"] .chest-art {bottom:38px;transform:scale(.65)!important;transform-origin:bottom}
.treasure-stage[data-phase="result"] .treasure-counter {bottom:8px;font-size:18px}
.treasure-stage[data-phase="result"] .treasure-caption {display:none}
.chest-reward {animation:none}
#chest-result:not([hidden]) .chest-reward {animation:reward-in .3s ease both;animation-delay:calc(var(--order)*.06s)}
@media(max-width:600px) {.treasure-stage {height:350px}.treasure-lane {width:58px;left:-29px;height:220px}.treasure-stage[data-phase="result"] {height:195px}.treasure-stage[data-phase="result"] .treasure-lane {height:115px}.chest-view h2 {font-size:26px}}
@media(orientation:landscape) and (max-height:520px) {.treasure-stage {height:240px;max-width:430px}.treasure-lane {height:155px}.treasure-fans {bottom:70px}.treasure-stage .chest-art {bottom:46px;transform:scale(.7)!important;transform-origin:bottom}.treasure-counter {bottom:20px;font-size:18px}.treasure-stage[data-phase="result"] {height:180px}.chest-view .eyebrow {margin-bottom:4px}.chest-view h2 {margin:4px 0}}
@media(prefers-reduced-motion:reduce) {.treasure-coins,.treasure-rays {display:none}.treasure-reel {visibility:hidden}.treasure-stage .chest-art {transform:none!important}.treasure-stage .chest-art i {transition:none}#chest-result:not([hidden]) .chest-reward {animation:none}}
@media(orientation:landscape) and (max-height:520px) {
 #overlay:has(.chest-view) {padding:8px 20px}
 .chest-view .eyebrow {display:none}
 .chest-view h2 {font-size:21px;line-height:1.2;margin:0 0 2px}
 .chest-view .chest-subtitle {font-size:10px;margin:0;line-height:1.3}
 .treasure-stage {height:170px;margin:7px auto;max-width:430px}
 .treasure-lane {height:110px;width:54px;left:-27px}
 .treasure-fans {bottom:44px}
 .treasure-stage .chest-art {bottom:28px;transform:scale(.48)!important}
 .treasure-counter {bottom:9px;font-size:14px}
 .treasure-caption {display:none}
 .reel-prize span {font-size:29px}
 .reel-prize small {font-size:10px}
 #chest-reveal {padding:8px 15px;min-height:36px}
 .treasure-stage[data-phase="result"] {height:170px}
}
.has-evolution .treasure-lane[data-settled="true"] {background:linear-gradient(#fffadd,#80dccbaa);border-top-color:#fff}
.has-evolution .treasure-stage[data-phase="result"] {box-shadow:0 0 40px #95e0cc35;border-color:#fff1b3}
/* Once locked, present the prizes as a readable row above the opened chest. */
.treasure-stage[data-phase="result"] .treasure-fans {left:6%;bottom:82px;width:88%;height:110px;display:flex;justify-content:center;gap:5px}
.treasure-stage[data-phase="result"] .treasure-lane {position:relative;left:auto;bottom:auto;width:64px;max-width:19%;height:100%;transform:none;clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}
@media(max-width:600px) {.treasure-stage[data-phase="result"] .treasure-fans {bottom:70px;height:108px;gap:2px}.treasure-stage[data-phase="result"] .reel-prize span {font-size:28px}.treasure-stage[data-phase="result"] .reel-prize small {font-size:10px}}
@media(orientation:landscape) and (max-height:520px) {.treasure-stage[data-phase="result"] .treasure-fans {bottom:60px;height:98px}}
/* Emitted streamers originate at the chest mouth; positions use the chest clock. */
.treasure-spiral {position:absolute;left:50%;bottom:112px;width:0;height:0;pointer-events:none;z-index:2}
.treasure-spiral svg {position:absolute;left:-300px;top:-310px;width:600px;height:500px;overflow:visible;filter:drop-shadow(0 0 2px #ffe9ab88)}
.treasure-spiral path {opacity:0;fill:#fffdf0}
.treasure-spiral path:nth-child(4n+1) {fill:#eac77c;fill-opacity:.65}
.treasure-spiral path:nth-child(4n+2) {fill:#ffe9ad;fill-opacity:.9}
.treasure-stage[data-phase="charging"] .treasure-spiral,.treasure-stage[data-phase="result"] .treasure-spiral {display:none}
@media(max-width:600px){.treasure-spiral{transform:scale(.8)}}
@media(orientation:landscape) and (max-height:520px) {.treasure-spiral {bottom:52px;transform:scale(.45)}}
@media(prefers-reduced-motion:reduce) {.treasure-spiral {display:none}}
/* Upgrade and reward feedback; animation never owns reward transactions. */
.upgrade-view {position:relative}
.level-burst {font-size:42px;line-height:1;color:#f6dc8f;margin-bottom:12px;animation:level-awaken .65s ease-out both;text-shadow:0 0 25px #edc76799}
.upgrade-view h2 {animation:upgrade-title .45s ease-out both}
.upgrade-view .choice {position:relative;overflow:hidden;animation:upgrade-card .5s cubic-bezier(.18,.75,.25,1) both;animation-delay:calc(var(--order)*.13s)}
.upgrade-view .choice .icon {animation:icon-awaken .65s ease-out both;animation-delay:calc(.1s + var(--order)*.13s)}
.upgrade-view .choice:active {filter:brightness(1.4)}
#chest-result:not([hidden]) .chest-reward {position:relative;overflow:hidden;animation:upgrade-card .55s ease-out both;animation-delay:calc(min(var(--order),8)*.16s)}
#chest-result:not([hidden]) .chest-reward::after {content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffeab44d 50%,transparent 70%);transform:translateX(-120%);animation:reward-sheen .9s ease-out both;animation-delay:calc(.15s + min(var(--order),8)*.16s);pointer-events:none}
#chest-result:not([hidden]) .reward-icon {animation:icon-awaken .7s ease-out both;animation-delay:calc(min(var(--order),8)*.16s)}
#chest-result:not([hidden]) .evolution .reward-icon {color:#fff5bd;filter:drop-shadow(0 0 12px #f3cf67)}
#reward-feedback {position:fixed;z-index:9;top:max(125px,22%);left:50%;width:min(340px,85vw);transform:translateX(-50%);pointer-events:none;text-align:center}
.reward-receipt {position:relative;padding:16px 20px;color:#f6df9d;border:1px solid #cbb679;background:linear-gradient(135deg,#1c2928f5,#302c1ef5);box-shadow:0 0 30px #d5bb5333;animation:receipt-life 1.7s ease both}
.reward-receipt strong,.reward-receipt small {display:block;position:relative;z-index:1}
.reward-receipt strong {font-size:18px;margin:8px 0}
.reward-receipt small {color:#d2cbb2;font-size:12px}
.receipt-icons {display:flex;justify-content:center;gap:16px}
.receipt-icons span {display:inline-block;font-size:32px;animation:receipt-icon 1.5s ease both;animation-delay:calc(var(--order)*.035s);text-shadow:0 0 14px #f6df9d88}
.reward-receipt i {position:absolute;left:calc(50% - 30px);top:15px;width:60px;height:60px;border:2px solid #f6df9d;border-radius:50%;animation:receipt-ring .8s ease-out both}
@keyframes upgrade-title {from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes upgrade-card {from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes icon-awaken {0%{transform:scale(.55);opacity:0}65%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes level-awaken {from{transform:scale(.3) rotate(-60deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes reward-sheen {to{transform:translateX(120%)}}
@keyframes receipt-life {0%{opacity:0;transform:translateY(20px) scale(.85)}15%,70%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-30px);visibility:hidden}}
@keyframes receipt-icon {0%{transform:scale(.4) rotate(-20deg)}30%{transform:scale(1.2)}55%,100%{transform:scale(1)}}
@keyframes receipt-ring {from{opacity:.8;transform:scale(.3)}to{opacity:0;transform:scale(2.8)}}
@media(orientation:landscape) and (max-height:520px) {.level-burst{font-size:25px;margin-bottom:4px}#reward-feedback{top:18%}.reward-receipt{padding:8px 16px}.receipt-icons span{font-size:24px}}
@media(prefers-reduced-motion:reduce) {.level-burst,.upgrade-view h2,.upgrade-view .choice,.upgrade-view .choice .icon,#chest-result:not([hidden]) .chest-reward,#chest-result:not([hidden]) .reward-icon,.receipt-icons span {animation:none}#chest-result:not([hidden]) .chest-reward::after,.reward-receipt i {display:none}.reward-receipt {animation:receipt-still 1.7s linear both}}
@keyframes receipt-still {0%,90%{opacity:1}100%{opacity:0;visibility:hidden}}

#start:disabled {opacity:.55;cursor:wait}
#boot-status {position:fixed;z-index:20;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(480px,90vw);padding:16px;background:#302520;border:1px solid #dfb975;color:#f2dbaf;text-align:center;box-sizing:border-box}
#boot-status span {display:block;margin-bottom:10px}
#map-hint {position:absolute;left:50%;bottom:94px;transform:translateX(-50%);font-size:11px;color:#c3b88e;text-align:center;pointer-events:none;max-width:70%;white-space:nowrap}
@media(orientation:landscape) and (max-height:520px) {#map-hint {bottom:68px;font-size:10px}}

/* 16: scrollable run report in both phone orientations. */
.run-result {text-align:left;max-width:760px;margin:auto}
.run-result h2,.run-result>.eyebrow,.run-result>p {text-align:center}
.run-result h3 {font-size:16px;margin:20px 0 10px;color:var(--gold,#d9bc7d)}
.run-result h3 small {float:right;font-weight:normal}
.result-loadout {display:flex;flex-wrap:wrap;gap:8px}
.result-loadout span {border:1px solid #485448;padding:8px 12px;font-size:14px;color:#d9dfcc;background:#17241e}
.run-result .damage-note,.run-result .reward-breakdown {font-size:12px;line-height:1.6;color:#a7b6a8}
.damage-row {display:grid;grid-template-columns:1fr auto;gap:6px;margin:12px 0;font-size:14px}
.damage-row strong {font-weight:normal;color:#d9bc7d}
.damage-track {grid-column:1/-1;height:4px;background:#25352b}
.damage-track i {display:block;height:100%;background:#87bfb2}
.run-result #again {display:block;margin:24px auto 12px}
.run-result #camp {display:block;margin:auto}
@media(max-width:480px){.damage-row{font-size:12px}.result-loadout span{font-size:12px;padding:6px}.run-result h2{font-size:26px}}

/* 17: readable, scrollable permanent upgrades on both phone orientations. */
.growth-view {text-align:left}
.growth-view h2,.growth-view>.eyebrow {text-align:center}
.growth-cards {display:grid;gap:12px;margin:18px 0}
.growth-card {border:1px solid #536452;padding:16px;background:#18251e}
.growth-card h3 {margin:0;color:#dfc58d;display:flex;justify-content:space-between;gap:12px}
.growth-card small {font-size:12px;color:#aaba9e}
.growth-card p {margin:10px 0!important;font-size:14px;line-height:1.7}
.growth-card button {width:100%;min-height:44px}
.growth-card button:disabled {opacity:.6;cursor:default}
.growth-notice {color:#dfc58d!important;min-height:24px}
.growth-view {padding-bottom:58px}

#arcana-hud{position:absolute;left:16px;top:190px;font-size:11px;color:#d5bc7b;pointer-events:none;max-width:80%}
@media(orientation:landscape) and (max-height:520px){#arcana-hud{top:102px;left:auto;right:16px;max-width:46%}}

#mode-hud{position:absolute;left:16px;top:212px;font-size:11px;color:#c3b88e;pointer-events:none;max-width:85%}@media(orientation:landscape) and (max-height:520px){#mode-hud{top:121px;left:auto;right:16px;max-width:65%}}

.camp-summary {white-space:pre-line;color:#b6c9bb;font-size:12px;line-height:1.65;margin:12px auto;max-width:560px}
@media(max-height:480px){.camp-summary{font-size:11px;margin:5px auto}}
@media (orientation:landscape) and (min-width:540px) and (max-height:420px){
 main > .camp-summary {grid-column:1/-1;grid-row:4;width:100%;margin:0;text-align:left;padding-left:0}
}

.equipment-art{display:inline-block;width:1.6em;height:1.6em;vertical-align:middle;flex-shrink:0;background-image:url("/nightfall/assets/wild-graves/equipment-icons.webp");background-size:600% 400%;background-repeat:no-repeat;image-rendering:pixelated}.choice .equipment-art,.reward-icon .equipment-art{width:1.8em;height:1.8em}

/* Chest material polish: separate hinged lid, bevelled body and shared world coins. */
.treasure-frame::before,.treasure-frame::after {content:"";position:absolute;inset:-4px;pointer-events:none;background:linear-gradient(#f4d78c,#a67b3c) top left/15px 4px no-repeat,linear-gradient(#f4d78c,#a67b3c) top right/15px 4px no-repeat,linear-gradient(#a67b3c,#e4bf70) bottom left/15px 4px no-repeat,linear-gradient(#a67b3c,#e4bf70) bottom right/15px 4px no-repeat}
.treasure-frame::after {background:linear-gradient(#f4d78c,#a67b3c) top left/4px 15px no-repeat,linear-gradient(#f4d78c,#a67b3c) top right/4px 15px no-repeat,linear-gradient(#a67b3c,#e4bf70) bottom left/4px 15px no-repeat,linear-gradient(#a67b3c,#e4bf70) bottom right/4px 15px no-repeat}
.treasure-stage .chest-art {width:104px;height:68px;left:calc(50% - 52px);border:0;background:url('./assets/chest/body.svg') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 4px 0 #201b23) drop-shadow(0 0 15px #ffdf7870)}
.treasure-stage .chest-art b {display:none}
.treasure-stage .chest-art i {left:0;right:0;top:-24px;height:39px;border:0;background:url('./assets/chest/lid.svg') center/100% 100% no-repeat;transform-origin:50% 100%;transition:transform .25s ease-out}
.treasure-stage .chest-art.opened i {transform:translateY(-9px) rotate(-5deg);background:url('./assets/chest/lid-open.svg') center/100% 100% no-repeat}
.treasure-coins i {width:24px;height:24px;left:calc(50% - 12px);font-size:0;filter:drop-shadow(1px 2px 0 #583b26);text-shadow:none}
.treasure-coins canvas {display:block;width:24px;height:24px;image-rendering:pixelated}
@media(prefers-reduced-motion:reduce){.treasure-stage .chest-art i{transition:none}}

/* Depth order: back lid < reels / trails / coins < chest front rim. */
.treasure-stage .chest-rear {background:none;filter:none;z-index:0;pointer-events:none}
.treasure-stage[data-phase="charging"] .chest-rear {z-index:4}
.treasure-fans {z-index:1}
.treasure-coins {z-index:2}
.treasure-stage .chest-rear.opened i {transform:translateY(-12px) rotate(-5deg)}

/* 0.0.2-01: paged roster avoids a 59-card start screen and remains touch-scrollable. */
#characters{flex-wrap:wrap}.roster-open{flex-basis:100%;padding:12px;color:var(--gold)}
.roster-view{max-width:1050px;text-align:left}.roster-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}.roster-controls input{min-width:100px;flex:1;background:#101b18;border:1px solid #46554d;color:#eee;padding:12px}.roster-controls select{background:#101b18;color:#eee;padding:12px}.roster-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}.roster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.roster-card{padding:12px 8px;min-height:100px;overflow-wrap:anywhere;text-align:left}.roster-card strong,.roster-card small{display:block}.roster-card small{font-size:11px;color:#b0bfb3}.roster-card.selected{border-color:var(--gold);background:#2b352a}.roster-monogram{display:inline-grid;place-items:center;width:40px;height:40px;background:#26382f;border:1px solid #ad985e;color:#e2d09a;font:bold 18px serif;margin-bottom:5px}.roster-detail{border:1px solid #46554d;padding:16px;overflow-wrap:anywhere}.roster-detail button{display:block;width:100%;padding:12px;margin:8px 0}.roster-detail p{font-size:13px;line-height:1.65}.roster-note{color:#d8bb79}.roster-detail summary{cursor:pointer}.roster-detail details{font-size:12px}
@media(max-width:700px){.roster-layout{grid-template-columns:1fr}.roster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.roster-card{min-height:88px;font-size:11px}.roster-view h2{font-size:24px}.roster-detail{padding:12px}}
#overlay:has(.roster-view){padding:12px;align-items:flex-start;overflow:hidden}
#overlay .panel:has(.roster-view){width:min(1060px,calc(100vw - 24px));max-width:100%;max-height:calc(100dvh - 24px);box-sizing:border-box;overflow-y:auto;padding:18px;margin:0}
.roster-view{min-width:0}.roster-layout>*{min-width:0}
@media(max-width:700px){.panel:has(.roster-view){padding:12px}.roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Character gift selection uses the same bounded touch scroll as the roster. */
#overlay .panel:has(.character-draft){width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto}
.character-gifts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.character-gifts button{padding:16px;min-height:76px}.character-gifts strong,.character-gifts small{display:block}.character-gifts small{font-size:12px;margin-top:8px}
@media(max-width:400px){.character-gifts{grid-template-columns:1fr}}

/* Keep the event dialog anchored to the viewport when the camp is scrolled. */
#app:has(#overlay:not([hidden]) .secret-guide) { transform: none; }

/* F09: long card descriptions remain readable without stretching the mobile panel. */
.character-gifts:has(>button:only-child){grid-template-columns:minmax(0,1fr)}
.character-gifts p{overflow-wrap:anywhere;line-height:1.6}
#arcana-hud{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Q purification: ring progress, ready edge and successful-cast flash. */
#nova{--nova-progress:100%;background:radial-gradient(circle,#14211df5 63%,transparent 65%),conic-gradient(#eedb97 var(--nova-progress),#354441 0);transition:box-shadow .15s,color .15s}
#nova:disabled{color:#8f978b;cursor:default;opacity:.78}
#nova.nova-ready{box-shadow:0 0 12px #daca7838,inset 0 0 8px #e8dba225;border-color:#ead79b}
#nova.nova-casting{box-shadow:0 0 22px #fff2b9aa,inset 0 0 22px #fff3b970;color:#fffbe5}