@font-face {
  font-family: "Pixelated Elegance";
  src: url("assets/fonts/pixelated-elegance/PixelatedEleganceRegular-ovawB.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #020609;
  --ink-soft: #071217;
  --panel: rgba(3, 12, 16, 0.92);
  --panel-strong: rgba(2, 8, 12, 0.97);
  --ivory: #dcfbff;
  --muted: #87bac3;
  --gold: #35eaff;
  --gold-bright: #c7faff;
  --gold-deep: #087f93;
  --violet: #8b2039;
  --violet-deep: #3e0b19;
  --cyan: #35eaff;
  --red: #ff5f6f;
  --green: #63f5a5;
  --line: rgba(53, 234, 255, 0.34);
  --line-soft: rgba(117, 220, 235, 0.14);
  --shadow: 8px 8px 0 rgba(0, 0, 0, 0.74), 0 0 28px rgba(21, 204, 231, 0.08);
  --display: "Pixelated Elegance", "Courier New", monospace;
  --ui: "Pixelated Elegance", "Courier New", monospace;
  --ease-out: cubic-bezier(0.18, 0.75, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

html {
  background: #06050c;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  color: var(--ivory);
  font-family: var(--ui);
  background:
    radial-gradient(circle at 18% 20%, rgba(75, 48, 112, 0.34), transparent 31rem),
    radial-gradient(circle at 80% 74%, rgba(95, 48, 44, 0.22), transparent 34rem),
    linear-gradient(145deg, #0c0a16 0%, #05050b 55%, #0b0810 100%);
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 10% 18%, rgba(255, 239, 188, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 37% 72%, rgba(203, 186, 255, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 15%, rgba(255, 239, 188, 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 89% 42%, rgba(203, 186, 255, 0.5) 0 1px, transparent 1.5px);
  background-size: 17rem 19rem, 23rem 21rem, 29rem 24rem, 31rem 27rem;
}

body::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.018), transparent);
  transform: skewX(-24deg) translateX(-35%);
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.page-shell {
  display: flex;
  min-height: 100dvh;
  padding: clamp(0.65rem, 2vh, 1.35rem) clamp(0.65rem, 2vw, 1.5rem);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.5rem, 1.2vh, 0.9rem);
}

.shell-header,
.shell-footer {
  display: flex;
  width: min(1280px, 100%);
  color: #8f8691;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-items: center;
  justify-content: space-between;
}

.shell-brand {
  color: #d8c5a2;
  font-family: var(--display);
  font-size: 0.73rem;
  letter-spacing: 0.24em;
}

.shell-footer {
  justify-content: center;
  gap: 2.2rem;
  letter-spacing: 0.07em;
  text-transform: none;
}

.shell-footer b {
  display: inline-flex;
  min-width: 1.35rem;
  min-height: 1.25rem;
  padding: 0 0.28rem;
  margin: 0 0.1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.25rem;
  color: #cfc6bd;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.58rem;
  align-items: center;
  justify-content: center;
}

.game-frame {
  position: relative;
  width: min(1280px, 100%, calc((100dvh - 7rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(251, 221, 154, 0.34);
  border-radius: clamp(0.75rem, 1.2vw, 1.2rem);
  isolation: isolate;
  background: #090812;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 0 7px rgba(16, 13, 25, 0.65),
    0 0 0 8px rgba(244, 201, 107, 0.09),
    var(--shadow);
  container-name: azrael-stage;
  container-type: inline-size;
}

.game-frame::before {
  position: absolute;
  inset: 0.55rem;
  z-index: 80;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: calc(clamp(0.75rem, 1.2vw, 1.2rem) - 0.35rem);
  pointer-events: none;
  content: "";
}

.game-frame::after {
  position: absolute;
  inset: 0;
  z-index: 79;
  pointer-events: none;
  content: "";
  opacity: 0;
  mix-blend-mode: normal;
  background-image: none;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 45%, rgba(75, 49, 111, 0.28), transparent 45%),
    linear-gradient(180deg, #111124, #080713 70%);
  image-rendering: pixelated;
  touch-action: none;
}

.stage-finish {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 4, 10, 0.34), transparent 14%, transparent 86%, rgba(4, 4, 10, 0.4)),
    linear-gradient(180deg, rgba(5, 4, 12, 0.2), transparent 35%, rgba(5, 4, 10, 0.22));
}

.global-mute-button {
  position: absolute;
  right: clamp(0.7rem, 1.2cqw, 1.2rem);
  bottom: clamp(0.7rem, 1.2cqw, 1.2rem);
  z-index: 90;
  display: inline-flex;
  min-height: clamp(2.25rem, 3.25cqw, 3.25rem);
  padding: 0.48rem 0.72rem;
  border: 1px solid rgba(53, 234, 255, 0.72);
  border-radius: 2px;
  color: #d8fbff;
  background: linear-gradient(180deg, rgba(5, 68, 81, 0.96), rgba(2, 25, 32, 0.97));
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.78), 0 0 1rem rgba(53, 234, 255, 0.18);
  font-family: var(--display);
  font-size: clamp(0.5rem, 0.62cqw, 0.62rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  align-items: center;
  gap: 0.48rem;
}

.global-mute-button:hover {
  border-color: #bffaff;
  background: linear-gradient(180deg, rgba(8, 91, 108, 0.98), rgba(2, 34, 43, 0.98));
}

.global-mute-icon {
  position: relative;
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  color: #bffaff;
  font-size: 1rem;
  place-items: center;
}

.global-mute-button.is-muted {
  border-color: rgba(255, 82, 111, 0.82);
  color: #ffd8df;
  background: linear-gradient(180deg, rgba(107, 17, 41, 0.97), rgba(40, 4, 15, 0.98));
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.78), 0 0 1rem rgba(181, 43, 73, 0.2);
}

.global-mute-button.is-muted .global-mute-icon { color: #ffb1bf; }

.global-mute-button.is-muted .global-mute-icon::after {
  position: absolute;
  width: 1.35rem;
  height: 2px;
  background: currentColor;
  content: "";
  transform: rotate(-48deg);
  box-shadow: 1px 1px 0 #31040f;
}

.screen-corner-copy,
.title-version {
  right: clamp(4.4rem, 8cqw, 8rem);
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.screen::after {
  position: absolute;
  inset: 1.15rem;
  z-index: -1;
  border: 1px solid rgba(244, 201, 107, 0.1);
  pointer-events: none;
  content: "";
  clip-path: polygon(0 0, 4rem 0, 4rem 1px, calc(100% - 4rem) 1px, calc(100% - 4rem) 0, 100% 0, 100% 100%, calc(100% - 4rem) 100%, calc(100% - 4rem) calc(100% - 1px), 4rem calc(100% - 1px), 4rem 100%, 0 100%);
}

.screen h1,
.screen h2,
.screen h3,
.screen p {
  margin-top: 0;
}

.screen h1,
.screen h2,
.screen h3 {
  font-family: var(--display);
}

.eyebrow,
.hud-eyebrow {
  margin-bottom: 0.45rem;
  color: var(--gold);
  font-size: clamp(0.58rem, 0.75vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow::before {
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  margin-right: 0.65rem;
  vertical-align: middle;
  content: "";
  background: currentColor;
  opacity: 0.62;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 2.85rem;
  padding: 0.78rem 1.15rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0.58rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 180ms var(--ease-out), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 28%;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-22deg);
  transition: left 420ms var(--ease-out), opacity 160ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.button:hover:not(:disabled)::before {
  left: 110%;
  opacity: 1;
}

.button:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(0.7);
}

.button-primary {
  border-color: #f8d47f;
  color: #21150a;
  background: linear-gradient(135deg, #ffe9a4, #e8ab48 62%, #bb7830);
  box-shadow: 0 8px 30px rgba(214, 149, 54, 0.2), 0 1px 0 rgba(255, 255, 255, 0.52) inset;
}

.button-primary:hover:not(:disabled) {
  box-shadow: 0 12px 36px rgba(214, 149, 54, 0.34), 0 1px 0 rgba(255, 255, 255, 0.52) inset;
}

.button-secondary {
  border-color: rgba(174, 148, 221, 0.42);
  color: #f0eafa;
  background: linear-gradient(135deg, rgba(86, 63, 132, 0.82), rgba(42, 31, 72, 0.92));
  box-shadow: 0 10px 30px rgba(28, 19, 52, 0.3), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.button-ghost {
  border-color: rgba(255, 255, 255, 0.13);
  color: #d9d0c8;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(0.7rem);
}

.button-ghost:hover:not(:disabled) {
  border-color: rgba(244, 201, 107, 0.42);
  color: #fff4dc;
  background: rgba(244, 201, 107, 0.08);
}

.button-compact {
  min-height: 2.45rem;
  padding: 0.62rem 0.9rem;
  font-size: 0.65rem;
}

.button-wide {
  width: 100%;
}

.icon-button {
  display: inline-flex;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  color: #e7ddd2;
  background: rgba(10, 9, 18, 0.62);
  backdrop-filter: blur(0.75rem);
  transition: transform 160ms var(--ease-out), border-color 160ms ease, background 160ms ease;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  border-color: rgba(244, 201, 107, 0.65);
  background: rgba(244, 201, 107, 0.1);
  transform: rotate(4deg) scale(1.05);
}

/* Boot */
.boot-screen {
  background:
    radial-gradient(circle at 50% 44%, rgba(112, 83, 164, 0.26), transparent 27%),
    radial-gradient(circle at 50% 72%, rgba(174, 108, 55, 0.12), transparent 35%),
    linear-gradient(155deg, #11101f 0%, #080711 58%, #0d0911 100%);
  align-items: center;
  justify-content: center;
}

.screen-atmosphere,
.screen-atmosphere::before,
.screen-atmosphere::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.screen-atmosphere {
  opacity: 0.55;
  background:
    radial-gradient(circle at 13% 23%, rgba(255, 237, 184, 0.9) 0 1px, transparent 1.4px),
    radial-gradient(circle at 74% 18%, rgba(202, 178, 255, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 64%, rgba(255, 237, 184, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 78%, rgba(202, 178, 255, 0.5) 0 1px, transparent 1.5px);
  background-size: 11rem 13rem, 16rem 17rem, 19rem 14rem, 21rem 20rem;
}

.screen-atmosphere::before {
  background: conic-gradient(from 180deg at 50% 50%, transparent 0 36%, rgba(244, 201, 107, 0.06) 42%, transparent 47% 83%, rgba(162, 138, 223, 0.07) 88%, transparent 94%);
  animation: slow-turn 32s linear infinite;
}

.screen-atmosphere::after {
  top: auto;
  height: 34%;
  opacity: 0.45;
  background: linear-gradient(180deg, transparent, rgba(5, 4, 10, 0.88));
}

.boot-lockup {
  position: relative;
  z-index: 1;
  width: min(34rem, 78%);
  text-align: center;
}

.azrael-sigil,
.relic-ring,
.result-crown {
  position: relative;
  display: grid;
  border: 1px solid rgba(244, 201, 107, 0.46);
  border-radius: 50%;
  place-items: center;
}

.azrael-sigil {
  width: clamp(4.5rem, 8cqw, 7.4rem);
  height: clamp(4.5rem, 8cqw, 7.4rem);
  margin: 0 auto 1.05rem;
  color: var(--gold-bright);
  background: radial-gradient(circle, rgba(244, 201, 107, 0.13), transparent 63%);
  box-shadow: 0 0 3rem rgba(162, 138, 223, 0.2), 0 0 0 0.55rem rgba(244, 201, 107, 0.025);
  animation: sigil-breathe 3.8s ease-in-out infinite;
}

.azrael-sigil::before,
.azrael-sigil::after,
.relic-ring::before,
.relic-ring::after {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(162, 138, 223, 0.42);
  content: "";
  transform: rotate(45deg);
}

.azrael-sigil::after,
.relic-ring::after {
  inset: -13%;
  border-color: rgba(244, 201, 107, 0.16);
  border-radius: 50%;
  transform: none;
}

.azrael-sigil span {
  font-size: clamp(1.5rem, 3cqw, 2.8rem);
  text-shadow: 0 0 1rem currentColor;
}

.boot-lockup h1 {
  margin: 0 0 1.45rem;
  font-size: clamp(2.35rem, 5.1cqw, 5.25rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.76;
  text-shadow: 0 4px 30px #000;
}

.boot-lockup h1 em {
  display: inline-block;
  margin: 0 0.15em;
  color: var(--gold);
  font-size: 0.34em;
  font-weight: 400;
  letter-spacing: 0.02em;
  transform: translateY(-0.3em);
}

.boot-progress-wrap {
  width: min(27rem, 88%);
  margin: 0 auto;
}

.progress-track,
.meter-track,
.boss-track {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(3, 3, 8, 0.7);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

.progress-track {
  height: 0.42rem;
  border-radius: 999px;
}

.progress-fill,
.meter-fill,
.boss-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 320ms var(--ease-out);
}

.progress-fill {
  position: relative;
  background: linear-gradient(90deg, #795ac3, #f5ca6e 75%, #fff4ca);
  box-shadow: 0 0 1rem rgba(244, 201, 107, 0.55);
}

.progress-fill::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.7) 50%, transparent 75%);
  animation: progress-glint 1.5s linear infinite;
}

#bootStatus {
  margin: 0.65rem 0 0;
  color: #9e94a5;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.screen-corner-copy {
  position: absolute;
  right: 2rem;
  bottom: 1.55rem;
  margin: 0;
  color: #766d78;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Title */
.title-screen {
  background:
    linear-gradient(90deg, rgba(7, 6, 14, 0.99) 0%, rgba(10, 8, 18, 0.94) 45%, rgba(11, 8, 20, 0.68) 70%, rgba(7, 6, 14, 0.92) 100%),
    radial-gradient(circle at 78% 44%, rgba(135, 99, 194, 0.48), transparent 30%),
    linear-gradient(145deg, #151327, #080711);
}

.title-screen::before {
  position: absolute;
  top: -35%;
  right: -4%;
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 201, 107, 0.1);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 5rem rgba(162, 138, 223, 0.025), 0 0 0 10rem rgba(244, 201, 107, 0.016);
}

.title-stars {
  position: absolute;
  inset: 0;
  opacity: 0.36;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 16%, #fff3bd 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 28%, #cbb6ff 0 1px, transparent 1.5px),
    radial-gradient(circle at 67% 62%, #fff3bd 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 75%, #cbb6ff 0 1px, transparent 1.5px);
  background-size: 8rem 9rem, 11rem 12rem, 13rem 10rem, 17rem 14rem;
}

.title-layout {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  padding: clamp(2.4rem, 5cqw, 5rem) clamp(2.25rem, 6.5cqw, 6.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(13rem, 0.7fr);
  align-items: center;
  gap: 3rem;
}

.title-copy {
  max-width: 42rem;
}

.title-copy h1 {
  max-width: 43rem;
  margin: 0 0 1.15rem;
  font-size: clamp(3.15rem, 7.1cqw, 7.15rem);
  font-weight: 500;
  letter-spacing: -0.068em;
  line-height: 0.76;
  text-wrap: balance;
  text-shadow: 0 5px 38px rgba(0, 0, 0, 0.8);
}

.title-copy h1 span {
  display: inline-block;
  margin: 0 0.1em;
  color: var(--gold);
  font-size: 0.32em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  transform: translateY(-0.36em);
}

.title-lede {
  max-width: 33rem;
  margin-bottom: 1.55rem;
  color: #bdb1aa;
  font-size: clamp(0.75rem, 1.05cqw, 1.05rem);
  line-height: 1.7;
}

.title-actions {
  display: grid;
  width: min(24rem, 100%);
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.title-actions .button-primary {
  min-height: 3.65rem;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 0.2rem;
}

.title-actions .button-primary small {
  font-size: 0.51rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  opacity: 0.63;
}

.button-admin-entry {
  border-color: rgba(162, 138, 223, 0.42);
  color: #eee7ff;
  background:
    linear-gradient(135deg, rgba(113, 80, 169, 0.22), rgba(244, 201, 107, 0.045)),
    rgba(9, 7, 17, 0.72);
  box-shadow: 0 0 1.4rem rgba(113, 80, 169, 0.08) inset;
}

.button-admin-entry > span[aria-hidden="true"] {
  color: var(--gold);
  text-shadow: 0 0 0.75rem rgba(244, 201, 107, 0.55);
}

.button-admin-entry:hover:not(:disabled) {
  border-color: rgba(244, 201, 107, 0.55);
  background:
    linear-gradient(135deg, rgba(113, 80, 169, 0.34), rgba(244, 201, 107, 0.09)),
    rgba(9, 7, 17, 0.82);
}

.button-admin-entry.is-active {
  border-color: rgba(114, 215, 154, 0.62);
  background: linear-gradient(135deg, rgba(46, 111, 78, 0.3), rgba(15, 35, 28, 0.78));
  box-shadow: 0 0 1.2rem rgba(114, 215, 154, 0.12) inset;
}

.admin-entry-state {
  margin-left: auto;
  color: #a8a0ae;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.button-admin-entry.is-active .admin-entry-state {
  color: #9ff1ba;
  text-shadow: 0 0 0.7rem rgba(114, 215, 154, 0.52);
}

.title-actions .button-admin-entry {
  min-height: 2.55rem;
  grid-column: 1 / -1;
}

.title-relic {
  position: relative;
  display: flex;
  min-height: 64%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.title-world-logo {
  display: block;
  width: clamp(10rem, 18cqw, 16rem);
  height: auto;
  max-height: 58cqh;
  margin: 0 auto clamp(1rem, 1.8cqw, 1.8rem);
  object-fit: contain;
  filter:
    drop-shadow(0 0 1rem rgba(53, 234, 255, 0.18))
    drop-shadow(0 0.8rem 0.9rem rgba(0, 0, 0, 0.78));
  animation: relic-float 5s ease-in-out infinite;
  transform-origin: 50% 52%;
}

.relic-ring {
  width: clamp(7.5rem, 16cqw, 16rem);
  height: clamp(7.5rem, 16cqw, 16rem);
  margin-bottom: clamp(1.1rem, 2.3cqw, 2.3rem);
  color: var(--gold-bright);
  background:
    radial-gradient(circle, rgba(244, 201, 107, 0.15), transparent 48%),
    conic-gradient(from 45deg, rgba(162, 138, 223, 0.18), transparent 22% 47%, rgba(244, 201, 107, 0.12) 58%, transparent 70%);
  box-shadow: 0 0 6rem rgba(101, 67, 154, 0.38), 0 0 0 1.2rem rgba(255, 255, 255, 0.01);
  animation: relic-float 5s ease-in-out infinite;
}

.relic-ring span {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6cqw, 6rem);
  text-shadow: 0 0 2.4rem currentColor;
}

.title-facts {
  display: grid;
  width: min(20rem, 100%);
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}

.title-facts div {
  display: flex;
  padding: 0 1rem;
  border-right: 1px solid var(--line-soft);
  text-align: center;
  flex-direction: column-reverse;
}

.title-facts div:last-child {
  border-right: 0;
}

.title-facts dt {
  margin-top: 0.2rem;
  color: #8f8490;
  font-size: 0.52rem;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.title-facts dd {
  margin: 0;
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2cqw, 1.9rem);
}

.title-version {
  position: absolute;
  right: 2rem;
  bottom: 1.35rem;
  margin: 0;
  color: #6e6672;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Shared panel screens */
.panel-screen {
  padding: clamp(2rem, 4.1cqw, 4.15rem) clamp(2rem, 4.7cqw, 4.7rem) clamp(1.5rem, 2.9cqw, 2.9rem);
  background:
    linear-gradient(135deg, rgba(18, 15, 29, 0.98), rgba(7, 7, 13, 0.97)),
    #0b0912;
  flex-direction: column;
}

.panel-screen::before {
  position: absolute;
  top: -16rem;
  right: -10rem;
  width: 38rem;
  height: 38rem;
  border: 1px solid rgba(244, 201, 107, 0.07);
  border-radius: 50%;
  pointer-events: none;
  content: "";
  box-shadow: 0 0 0 5rem rgba(162, 138, 223, 0.018), 0 0 0 10rem rgba(244, 201, 107, 0.012);
}

.screen-header {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 4.6rem;
  margin-bottom: clamp(1rem, 2cqw, 2rem);
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.screen-header h2 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.85rem, 3.25cqw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.screen-header p:not(.eyebrow) {
  max-width: 40rem;
  margin-bottom: 0;
  color: #9f9498;
  font-size: clamp(0.68rem, 0.9cqw, 0.9rem);
  line-height: 1.55;
}

.character-grid,
.store-grid {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  flex: 1;
  align-items: stretch;
  gap: clamp(0.7rem, 1.25cqw, 1.25rem);
}

.character-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.character-card {
  --character-accent: var(--gold);
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: clamp(0.75rem, 1.25cqw, 1.25rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.85rem;
  cursor: pointer;
  color: var(--ivory);
  text-align: left;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--character-accent) 12%, transparent), transparent 45%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease;
}

.character-card::after {
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: 8rem;
  height: 8rem;
  border: 1px solid color-mix(in srgb, var(--character-accent) 38%, transparent);
  border-radius: 50%;
  content: "";
  opacity: 0.42;
}

.character-card:hover,
.character-card.is-selected,
.character-card.selected {
  border-color: color-mix(in srgb, var(--character-accent) 72%, white 12%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36), 0 0 2.2rem color-mix(in srgb, var(--character-accent) 13%, transparent);
  transform: translateY(-0.35rem);
}

.character-card.is-locked:not(:hover) {
  border-color: rgba(255, 255, 255, 0.065);
  filter: saturate(0.35) brightness(0.72);
}

.character-access {
  display: inline-flex;
  margin-top: 0.7rem;
  padding: 0.32rem 0.52rem;
  border: 1px solid color-mix(in srgb, var(--character-accent) 35%, transparent);
  border-radius: 999px;
  color: var(--character-accent);
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.character-portrait,
.character-card canvas,
.character-card img {
  display: grid;
  width: 100%;
  height: clamp(6.25rem, 12.5cqw, 12.5rem);
  margin-bottom: 0.8rem;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  place-items: end center;
}

.character-card h3,
.character-name {
  margin: 0 0 0.18rem;
  font-family: var(--display);
  font-size: clamp(1rem, 1.55cqw, 1.55rem);
  font-weight: 600;
}

.character-title {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--character-accent);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.character-card p {
  color: #a89ca2;
  font-size: clamp(0.55rem, 0.72cqw, 0.72rem);
  line-height: 1.5;
}

.character-kit,
.move-list {
  display: flex;
  margin-top: 0.7rem;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.move-chip,
.character-kit span {
  padding: 0.3rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: #c7bdba;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.48rem;
  font-weight: 750;
}

.screen-footer-hint {
  display: flex;
  min-height: 2.2rem;
  padding-top: 0.9rem;
  color: #716a75;
  font-size: 0.55rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.screen-footer-hint i {
  width: 1px;
  height: 1rem;
  margin: 0 0.6rem;
  background: rgba(255, 255, 255, 0.1);
}

.keycap {
  display: inline-flex;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.32rem;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.32rem;
  color: #dfd4ca;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 850;
  align-items: center;
  justify-content: center;
}

.keycap.wide {
  min-width: 3.6rem;
}

/* World map */
.map-screen {
  z-index: 8;
  padding: clamp(1.8rem, 3.3cqw, 3.3rem) clamp(1.8rem, 3.7cqw, 3.7rem);
  background:
    linear-gradient(90deg, rgba(7, 6, 13, 0.88), transparent 28%, transparent 62%, rgba(7, 6, 13, 0.78)),
    linear-gradient(180deg, rgba(8, 7, 16, 0.72), transparent 25%, transparent 69%, rgba(8, 7, 14, 0.9));
  flex-direction: column;
  pointer-events: none;
}

.map-screen > * {
  pointer-events: auto;
}

.map-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.world-heading h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.3cqw, 3.35rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-shadow: 0 3px 18px #000;
}

.map-screen.is-rescuing button {
  pointer-events: none;
}

.map-screen.is-rescuing .map-topbar,
.map-screen.is-rescuing .course-dossier,
.map-screen.is-rescuing .map-services {
  transition: opacity 180ms ease;
  opacity: 0.72;
}

.map-actions,
.store-header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.map-guide {
  position: absolute;
  right: 32%;
  bottom: 31%;
  left: 9%;
  display: flex;
  height: 5rem;
  align-items: center;
  justify-content: space-between;
}

.map-guide-line {
  position: absolute;
  right: 1.6rem;
  left: 1.6rem;
  height: 3px;
  opacity: 0.75;
  background: repeating-linear-gradient(90deg, var(--gold) 0 0.55rem, transparent 0.55rem 1rem);
  filter: drop-shadow(0 2px 6px #000);
}

.map-node {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(2.6rem, 4.4cqw, 4.4rem);
  height: clamp(2.6rem, 4.4cqw, 4.4rem);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #19110a;
  background: #e1bd6c;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 0 0.42rem rgba(11, 9, 18, 0.7);
  font-family: var(--display);
  font-size: clamp(0.9rem, 1.5cqw, 1.5rem);
  place-items: center;
}

.map-node.is-cleared::after {
  position: absolute;
  right: -0.35rem;
  bottom: -0.2rem;
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #0a0a0f;
  border-radius: 50%;
  color: #102116;
  background: var(--green);
  content: "✓";
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 900;
  place-items: center;
}

.map-node.is-current {
  color: #fff9e9;
  background: #5c408a;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 0 0.42rem rgba(11, 9, 18, 0.7), 0 0 2rem rgba(162, 138, 223, 0.72);
  animation: current-node 2s ease-in-out infinite;
}

.map-node.is-locked {
  border-color: rgba(255, 255, 255, 0.16);
  color: #746d73;
  background: #25222b;
}

.course-dossier {
  position: absolute;
  top: clamp(6rem, 12cqw, 12rem);
  right: clamp(1.8rem, 3.7cqw, 3.7rem);
  width: clamp(15.5rem, 27cqw, 27rem);
  padding: clamp(1.25rem, 2.1cqw, 2.1rem);
  border: 1px solid rgba(244, 201, 107, 0.28);
  border-radius: 0.9rem;
  background:
    linear-gradient(145deg, rgba(28, 22, 39, 0.94), rgba(10, 9, 17, 0.97)),
    var(--panel-strong);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(1.1rem);
}

.dossier-number {
  position: absolute;
  top: -1.15rem;
  right: 1.15rem;
  display: flex;
  min-width: 4rem;
  padding: 0.52rem 0.7rem;
  border: 1px solid rgba(244, 201, 107, 0.4);
  border-radius: 0.5rem;
  color: #20150b;
  background: linear-gradient(135deg, #f6d886, #c78a3e);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  text-align: center;
  flex-direction: column;
}

.dossier-number span {
  font-size: 0.42rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dossier-number strong {
  font-family: var(--display);
  font-size: 1rem;
}

.course-dossier h3 {
  margin: 0 0 0.75rem;
  padding-right: 3.6rem;
  font-size: clamp(1.3rem, 2.1cqw, 2.1rem);
  font-weight: 500;
  line-height: 1.05;
}

.map-details > p {
  color: #a99da0;
  font-size: clamp(0.62rem, 0.8cqw, 0.8rem);
  line-height: 1.55;
}

.map-details ul {
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}

.map-details li {
  display: flex;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #948a91;
  font-size: clamp(0.55rem, 0.7cqw, 0.7rem);
  justify-content: space-between;
}

.map-details li b {
  color: #e8ddd0;
  font-weight: 750;
}

.crossroads-dock {
  position: absolute;
  bottom: clamp(1.6rem, 3cqw, 3rem);
  left: clamp(1.8rem, 3.7cqw, 3.7rem);
  display: flex;
  gap: 0.65rem;
}

.crossroads-dock button {
  display: flex;
  min-width: clamp(10.5rem, 17cqw, 17rem);
  padding: 0.66rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.65rem;
  cursor: pointer;
  color: #e9dfd6;
  background: rgba(12, 10, 20, 0.8);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.27);
  text-align: left;
  backdrop-filter: blur(0.7rem);
  transition: transform 180ms var(--ease-out), border-color 180ms ease, background 180ms ease;
  align-items: center;
  gap: 0.65rem;
}

.crossroads-dock button:hover {
  border-color: rgba(244, 201, 107, 0.48);
  background: rgba(47, 35, 65, 0.88);
  transform: translateY(-0.2rem);
}

.dock-icon {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(244, 201, 107, 0.06);
  font-size: 0.9rem;
  flex: 0 0 auto;
  place-items: center;
}

.crossroads-dock b,
.crossroads-dock small {
  display: block;
}

.crossroads-dock b {
  font-family: var(--display);
  font-size: clamp(0.68rem, 0.9cqw, 0.9rem);
}

.crossroads-dock small {
  margin-top: 0.18rem;
  color: #8e8490;
  font-size: 0.48rem;
}

/* Store */
.store-header {
  align-items: center;
}

.store-currency {
  display: flex;
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(244, 201, 107, 0.32);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(244, 201, 107, 0.07);
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  align-items: center;
  gap: 0.45rem;
}

.upgrade-category-tabs {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(44rem, 100%);
  min-height: 3.5rem;
  margin: -0.15rem auto 0.25rem;
  padding: 0.28rem;
  border: 1px solid rgba(53, 234, 255, 0.24);
  background: rgba(1, 10, 14, 0.88);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.72);
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.upgrade-category-tabs[hidden] { display: none; }

.upgrade-category-tabs button {
  display: grid;
  min-width: 0;
  padding: 0.58rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #779ca4;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--display);
  text-align: left;
  cursor: pointer;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.08rem 0.6rem;
}

.upgrade-category-tabs button > span {
  color: #54747b;
  font-size: 1.25rem;
  grid-row: 1 / 3;
  align-self: center;
}

.upgrade-category-tabs button b { color: inherit; font-size: 0.76rem; }
.upgrade-category-tabs button small { color: #55757d; font-size: 0.44rem; line-height: 1.3; }

.upgrade-category-tabs button.is-active {
  border-color: var(--cyan);
  color: #e4fdff;
  background: linear-gradient(180deg, rgba(53, 234, 255, 0.17), rgba(53, 234, 255, 0.055));
  box-shadow: 0 0 1.25rem rgba(53, 234, 255, 0.18) inset, 0 0 0.8rem rgba(53, 234, 255, 0.12);
}

.upgrade-category-tabs button[data-upgrade-category="health"].is-active {
  border-color: #ff526f;
  background: linear-gradient(180deg, rgba(181, 43, 73, 0.26), rgba(89, 14, 34, 0.1));
  box-shadow: 0 0 1.25rem rgba(181, 43, 73, 0.2) inset, 0 0 0.8rem rgba(181, 43, 73, 0.12);
}

.upgrade-category-tabs button.is-active > span,
.upgrade-category-tabs button.is-active small { color: inherit; }

.store-grid {
  overflow: auto hidden;
  padding: 0.35rem 0.1rem 0.8rem;
  grid-auto-columns: minmax(12rem, 1fr);
  grid-auto-flow: column;
  scrollbar-color: rgba(244, 201, 107, 0.35) transparent;
  scrollbar-width: thin;
}

.store-grid[data-store-type="upgrades"] {
  grid-auto-columns: minmax(15rem, 1fr);
}

.store-card,
.store-item {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: clamp(0.8rem, 1.3cqw, 1.3rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.85rem;
  color: var(--ivory);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.store-card:hover,
.store-item:hover {
  border-color: rgba(244, 201, 107, 0.38);
}

.store-card.owned,
.store-item.owned,
.store-card.is-owned,
.store-item.is-owned {
  border-color: rgba(114, 215, 154, 0.38);
}

.store-card.locked,
.store-item.locked,
.store-card.is-locked,
.store-item.is-locked {
  opacity: 0.56;
  filter: grayscale(0.48);
}

.store-preview,
.store-card img,
.store-card canvas,
.store-item img,
.store-item canvas {
  display: grid;
  width: 100%;
  height: clamp(7.5rem, 15cqw, 15rem);
  margin-bottom: 0.85rem;
  border-radius: 0.55rem;
  object-fit: contain;
  image-rendering: pixelated;
  background:
    radial-gradient(circle, rgba(162, 138, 223, 0.18), transparent 54%),
    rgba(0, 0, 0, 0.2);
  place-items: center;
}

.store-card h3,
.store-item h3,
.store-name {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.35cqw, 1.35rem);
}

.store-card p,
.store-item p,
.store-meta {
  color: #978d96;
  font-size: 0.56rem;
  line-height: 1.45;
}

.store-price,
.price-tag {
  display: inline-flex;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(244, 201, 107, 0.07);
  font-size: 0.55rem;
  font-weight: 850;
  align-items: center;
  gap: 0.25rem;
}

.store-card button,
.store-item button,
.purchase-button {
  width: 100%;
  min-height: 2.35rem;
  margin-top: 0.7rem;
  border: 1px solid rgba(244, 201, 107, 0.4);
  border-radius: 0.5rem;
  cursor: pointer;
  color: #21150a;
  background: linear-gradient(135deg, #f4d27d, #c98b3e);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-card-action {
  display: grid;
  margin-top: auto;
  color: var(--gold-bright);
  font-size: 0.62rem;
  font-weight: 850;
}

.store-card.is-actionable {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, translate 0.16s ease, opacity 0.16s ease;
}

.store-card.is-actionable:hover,
.store-card.is-actionable:focus-visible {
  z-index: 2;
  border-color: var(--cyan);
  opacity: 1;
  filter: none;
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
  box-shadow: 5px 5px 0 rgba(0, 9, 13, 0.92), 0 0 1.2rem rgba(53, 234, 255, 0.26);
  translate: 0 -0.18rem;
}

.store-card[aria-disabled="true"] {
  cursor: default;
}

.store-card-command {
  display: grid;
  width: 100%;
  min-height: 2.35rem;
  margin-top: 0.7rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(53, 234, 255, 0.48);
  border-radius: 2px;
  color: #c9faff;
  background: rgba(3, 31, 39, 0.88);
  box-shadow: 3px 3px 0 rgba(0, 13, 18, 0.94);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  place-items: center;
}

.store-card.is-actionable:hover .store-card-command,
.store-card.is-actionable:focus-visible .store-card-command {
  color: #001015;
  background: var(--cyan);
}

.purchase-confirm {
  position: absolute;
  z-index: 70;
  display: grid;
  padding: clamp(1rem, 4cqw, 3rem);
  background: rgba(0, 5, 8, 0.84);
  backdrop-filter: blur(0.55rem);
  inset: 0;
  place-items: center;
}

.purchase-confirm-card {
  width: min(31rem, 100%);
  max-height: 100%;
  padding: clamp(1rem, 2.4cqw, 1.8rem);
  overflow: auto;
  border: 2px solid var(--cyan);
  border-radius: 2px;
  color: #e9fdff;
  background: linear-gradient(145deg, #04151b, #02090d);
  box-shadow: 7px 7px 0 #00090d, 0 0 2rem rgba(53, 234, 255, 0.28);
}

.purchase-confirm-eyebrow,
.purchase-confirm-item small {
  display: block;
  color: var(--cyan);
  font-size: 0.48rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.purchase-confirm-card h3 {
  margin: 0.35rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.5cqw, 2rem);
  text-transform: uppercase;
}

.purchase-confirm-item {
  display: grid;
  padding: 0.75rem;
  border: 1px solid rgba(53, 234, 255, 0.28);
  background: rgba(53, 234, 255, 0.045);
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: 0.8rem;
}

.purchase-confirm-icon {
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  background: #02090d;
  box-shadow: 3px 3px 0 #001015, 0 0 0.8rem rgba(53, 234, 255, 0.24);
  font-size: 1.35rem;
  place-items: center;
}

.purchase-confirm-item strong {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: clamp(0.85rem, 1.5cqw, 1.15rem);
}

.purchase-confirm-card > p {
  margin: 0.9rem 0;
  color: #91b5bc;
  font-size: 0.58rem;
  line-height: 1.55;
}

.purchase-confirm-cost {
  display: flex;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(53, 234, 255, 0.16);
  border-bottom: 1px solid rgba(53, 234, 255, 0.16);
  color: #84a9b1;
  font-size: 0.58rem;
  align-items: center;
  justify-content: space-between;
}

.purchase-confirm-cost strong {
  color: var(--cyan);
  font-size: 0.75rem;
}

.purchase-confirm-actions {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 0.75rem;
}

.purchase-confirm-actions .button {
  width: 100%;
  min-height: 2.8rem;
}

.store-card button:disabled {
  cursor: default;
  opacity: 0.58;
  filter: saturate(0.45);
}

.character-shop-guide {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  inset: 0;
}

.character-shop-guide-card {
  position: absolute;
  width: min(27rem, calc(100% - 2rem));
  padding: 1rem 1.15rem;
  border: 2px solid var(--cyan);
  border-radius: 0.85rem;
  color: #effdff;
  background: linear-gradient(145deg, rgba(2, 10, 15, 0.98), rgba(3, 22, 30, 0.96));
  box-shadow: 0 0 0 0.35rem rgba(53, 234, 255, 0.08), 0 1.2rem 3rem rgba(0, 0, 0, 0.62), 0 0 2rem rgba(53, 234, 255, 0.22);
  pointer-events: auto;
  animation: character-guide-arrive 0.32s ease-out both;
}

.character-shop-guide[data-step="counter"] .character-shop-guide-card {
  top: clamp(6.2rem, 12cqw, 9.2rem);
  right: clamp(1rem, 5cqw, 5rem);
}

.character-shop-guide[data-step="character"] .character-shop-guide-card {
  right: clamp(1rem, 2cqw, 2rem);
  bottom: clamp(1rem, 2cqw, 1.7rem);
  pointer-events: none;
}

.character-shop-guide[data-step="more"] .character-shop-guide-card {
  bottom: clamp(1.2rem, 3cqw, 2.5rem);
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
}

.character-shop-guide-step {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--cyan);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.character-shop-guide h3 {
  margin: 0 0 0.35rem;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.35cqw, 1.35rem);
}

.character-shop-guide p {
  margin: 0;
  color: #a9c6cb;
  font-size: 0.56rem;
  line-height: 1.55;
}

.character-shop-guide .button { margin-top: 0.75rem; }

.store-currency.is-guide-target {
  position: relative;
  z-index: 32;
  border-color: var(--cyan);
  color: #fff;
  background: rgba(5, 35, 43, 0.98);
  box-shadow: 0 0 0 0.35rem rgba(53, 234, 255, 0.12), 0 0 2rem rgba(53, 234, 255, 0.58);
  animation: character-guide-pulse 1s ease-in-out infinite;
}

.store-currency.is-guide-target::after {
  position: absolute;
  top: calc(100% + 0.28rem);
  left: 50%;
  color: var(--cyan);
  content: "↓";
  font-size: 1.6rem;
  filter: drop-shadow(0 0 0.45rem var(--cyan));
  transform: translateX(-50%);
  animation: character-guide-arrow 0.7s ease-in-out infinite alternate;
}

.store-card.is-guide-target {
  z-index: 31;
  border-color: var(--cyan);
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 0.4rem rgba(53, 234, 255, 0.12), 0 0 2.4rem rgba(53, 234, 255, 0.48);
  transform: translateY(-0.3rem);
  animation: character-guide-pulse 1s ease-in-out infinite;
}

.store-card.is-guide-target::after {
  position: absolute;
  z-index: 4;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.35rem 0.48rem;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  color: #031015;
  background: var(--cyan);
  content: "↓ RECRUIT";
  font-size: 0.46rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  box-shadow: 0 0 1.2rem rgba(53, 234, 255, 0.7);
  animation: character-guide-arrow 0.7s ease-in-out infinite alternate;
}

.store-card.is-guide-target .store-card-command {
  position: relative;
  z-index: 5;
  border-color: var(--cyan);
  box-shadow: 0 0 1.2rem rgba(53, 234, 255, 0.3);
}

.record-shop-guide[data-step="character"] .character-shop-guide-card {
  pointer-events: none;
}

.store-card.is-record-guide-affordable {
  border-color: rgba(53, 234, 255, 0.58);
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 0.2rem rgba(53, 234, 255, 0.08), 0 0 1.3rem rgba(53, 234, 255, 0.28);
}

.store-card.music-card.is-guide-target::after {
  content: "↓ BUY RECORD";
}

@keyframes character-guide-arrive { from { opacity: 0; translate: 0 0.8rem; } to { opacity: 1; translate: 0 0; } }
@keyframes character-guide-pulse { 50% { box-shadow: 0 0 0 0.55rem rgba(53, 234, 255, 0.16), 0 0 2.8rem rgba(53, 234, 255, 0.68); } }
@keyframes character-guide-arrow { to { translate: 0 0.28rem; } }

.record-art {
  position: relative;
  display: grid;
  width: 100%;
  height: clamp(7.5rem, 15cqw, 15rem);
  margin-bottom: 0.85rem;
  overflow: hidden;
  border-radius: 0.55rem;
  background:
    radial-gradient(circle, #0b0a12 0 11%, transparent 12%),
    repeating-radial-gradient(circle, color-mix(in srgb, var(--record-accent) 52%, #17131e) 0 4px, #09080d 5px 9px);
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.72), 0 0 2rem color-mix(in srgb, var(--record-accent) 16%, transparent);
  place-items: center;
}

.record-art::after {
  position: absolute;
  width: 33%;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--record-accent) 65%, white);
  border-radius: 50%;
  background: color-mix(in srgb, var(--record-accent) 52%, #18121e);
  content: "";
}

.record-art span {
  z-index: 1;
  color: #fff6d5;
  font-size: clamp(1rem, 2.4cqw, 2.4rem);
}

.store-grid[data-store-type="music"] {
  overflow: auto;
  padding-right: 0.45rem;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  align-content: start;
}

.store-grid[data-store-type="music"] .music-card {
  display: flex;
  min-height: 21rem;
  flex-direction: column;
}

.music-card .record-cover {
  height: clamp(8.2rem, 11.5cqw, 11.5rem);
  padding: 0.45rem;
  border: 1px solid rgba(53, 234, 255, 0.18);
  border-radius: 2px;
  image-rendering: auto;
  background:
    radial-gradient(circle, rgba(53, 234, 255, 0.13), transparent 58%),
    #01080b;
}

.music-card.is-owned .record-cover {
  filter: drop-shadow(0 0 0.65rem rgba(53, 234, 255, 0.22));
}

.record-cover-locked {
  filter: grayscale(1) brightness(0.38);
}

.store-legend {
  display: flex;
  min-height: 1.6rem;
  padding-right: clamp(4rem, 8cqw, 8rem);
  color: #796f7b;
  font-size: 0.52rem;
  font-weight: 750;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.store-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #756d77;
}

.legend-dot.owned { background: var(--green); }
.legend-dot.available { background: var(--gold); }
.legend-dot.locked { background: #655d68; }

/* Admin console */
.admin-screen {
  background:
    radial-gradient(circle at 77% 13%, rgba(133, 94, 199, 0.23), transparent 29rem),
    radial-gradient(circle at 9% 86%, rgba(244, 201, 107, 0.09), transparent 24rem),
    linear-gradient(135deg, rgba(15, 12, 27, 0.99), rgba(5, 5, 11, 0.99));
}

.admin-screen::before {
  border-color: rgba(162, 138, 223, 0.12);
  box-shadow: 0 0 0 5rem rgba(162, 138, 223, 0.022), 0 0 0 10rem rgba(244, 201, 107, 0.014);
}

.admin-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 11% 21%, rgba(255, 237, 184, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 19%, rgba(205, 186, 255, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 73%, rgba(255, 237, 184, 0.65) 0 1px, transparent 1.5px);
  background-size: 13rem 15rem, 19rem 17rem, 23rem 21rem;
}

.admin-header {
  flex: 0 0 auto;
}

.admin-console-layout {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.8fr);
  gap: clamp(0.8rem, 1.5cqw, 1.5rem);
}

.admin-command-card,
.admin-level-select {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.9rem;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.015)),
    rgba(7, 6, 14, 0.72);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.27), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(0.8rem);
}

.admin-command-card {
  position: relative;
  display: flex;
  padding: clamp(0.9rem, 1.45cqw, 1.45rem);
  overflow: hidden auto;
  flex-direction: column;
}

.admin-command-card::after {
  position: absolute;
  right: -4.6rem;
  bottom: -5.8rem;
  width: 12rem;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 201, 107, 0.07);
  border-radius: 50%;
  pointer-events: none;
  content: "";
  box-shadow: 0 0 0 2.3rem rgba(162, 138, 223, 0.018), 0 0 0 4.6rem rgba(244, 201, 107, 0.012);
}

.admin-sigil {
  display: grid;
  width: clamp(2.8rem, 4.2cqw, 4.2rem);
  aspect-ratio: 1;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(244, 201, 107, 0.3);
  border-radius: 50%;
  color: var(--gold-bright);
  background:
    radial-gradient(circle, rgba(244, 201, 107, 0.14), transparent 58%),
    rgba(32, 23, 49, 0.72);
  box-shadow: 0 0 1.8rem rgba(162, 138, 223, 0.21);
  place-items: center;
}

.admin-sigil span {
  text-shadow: 0 0 0.75rem currentColor;
}

.admin-command-card h3,
.admin-level-heading h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.9cqw, 1.9rem);
  font-weight: 500;
}

.admin-command-copy {
  margin: 0.55rem 0 0.9rem;
  color: #a49aa5;
  font-size: clamp(0.58rem, 0.72cqw, 0.72rem);
  line-height: 1.55;
}

.admin-toggle {
  display: flex;
  width: 100%;
  min-height: 3.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(162, 138, 223, 0.35);
  border-radius: 0.65rem;
  cursor: pointer;
  color: #eae1ef;
  text-align: left;
  background: linear-gradient(135deg, rgba(85, 59, 132, 0.54), rgba(25, 19, 42, 0.82));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  transition: transform 180ms var(--ease-out), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  align-items: center;
  gap: 0.65rem;
}

.admin-toggle:hover {
  border-color: rgba(244, 201, 107, 0.5);
  transform: translateY(-2px);
}

.admin-toggle-mark {
  position: relative;
  width: 2.35rem;
  height: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) inset;
  flex: 0 0 auto;
}

.admin-toggle-mark i {
  position: absolute;
  top: 0.17rem;
  left: 0.17rem;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background: #948a9a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  transition: transform 220ms var(--ease-out), background 180ms ease, box-shadow 180ms ease;
}

.admin-toggle b,
.admin-toggle small {
  display: block;
}

.admin-toggle b {
  font-family: var(--display);
  font-size: clamp(0.7rem, 0.88cqw, 0.88rem);
}

.admin-toggle small {
  margin-top: 0.16rem;
  color: #9e93a4;
  font-size: 0.48rem;
}

.admin-toggle[aria-checked="true"],
.admin-toggle[aria-pressed="true"],
.admin-toggle.is-active {
  border-color: rgba(114, 215, 154, 0.55);
  background: linear-gradient(135deg, rgba(46, 111, 78, 0.48), rgba(17, 45, 35, 0.83));
  box-shadow: 0 0 1.6rem rgba(114, 215, 154, 0.1) inset, 0 8px 22px rgba(0, 0, 0, 0.24);
}

.admin-toggle[aria-checked="true"] .admin-toggle-mark i,
.admin-toggle[aria-pressed="true"] .admin-toggle-mark i,
.admin-toggle.is-active .admin-toggle-mark i {
  background: #9ff1ba;
  box-shadow: 0 0 0.75rem rgba(114, 215, 154, 0.78);
  transform: translateX(1.05rem);
}

.cheat-console-screen {
  overflow: hidden;
}

.cheat-console-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
  background:
    radial-gradient(circle at 14% 26%, rgba(53, 234, 255, 0.14), transparent 24%),
    radial-gradient(circle at 88% 76%, rgba(118, 14, 42, 0.22), transparent 28%);
}

.cheat-console-layout {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.6fr);
  gap: clamp(0.8rem, 1.5cqw, 1.5rem);
}

.cheat-console-entry,
.cheat-console-saved {
  min-width: 0;
  min-height: 0;
  padding: clamp(1rem, 1.7cqw, 1.7rem);
  border: 1px solid rgba(53, 234, 255, 0.2);
  border-radius: 0.75rem;
  background:
    linear-gradient(145deg, rgba(53, 234, 255, 0.045), rgba(103, 9, 34, 0.045)),
    rgba(1, 8, 11, 0.82);
  box-shadow: 5px 5px 0 rgba(0, 3, 5, 0.72), 0 0 2rem rgba(53, 234, 255, 0.04) inset;
}

.cheat-console-entry {
  display: flex;
  overflow: hidden auto;
  flex-direction: column;
}

.cheat-console-entry h3,
.cheat-console-heading h3 {
  margin: 0;
  color: #dffcff;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7cqw, 1.7rem);
  letter-spacing: 0.04em;
}

.cheat-console-entry > p:not(.eyebrow) {
  margin: 0.75rem 0 1.2rem;
  color: #7fa6ad;
  font-size: clamp(0.56rem, 0.68cqw, 0.68rem);
  line-height: 1.65;
}

.cheat-console-saved {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 0.8rem;
}

.cheat-console-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.7rem;
}

.cheat-console-heading .eyebrow {
  margin: 0 0 0.2rem;
}

.cheat-console-heading > small {
  color: #688f97;
  font-size: 0.45rem;
  text-transform: uppercase;
}

.cheat-console-grid {
  display: grid;
  overflow: hidden auto;
  padding: 0.1rem 0.2rem 0.2rem 0.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.45rem;
}

.cheat-console-toggle {
  min-height: 3.1rem;
  padding: 0.55rem 0.62rem;
}

.cheat-console-toggle em {
  margin-left: auto;
  color: #9cf5ff;
  font-size: 0.46rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cheat-character-unlock,
.cheat-character-unlock:hover {
  cursor: default;
  transform: none;
}

.cheat-unlock-mark {
  flex: 0 0 auto;
  color: #9cf5ff;
}

.cheat-console-empty {
  grid-column: 1 / -1;
  padding: 0.65rem;
  margin: 0;
  border: 1px dashed rgba(53, 234, 255, 0.2);
  color: #688f97;
  font-size: 0.52rem;
  line-height: 1.55;
}

.button-cheat-entry {
  border-color: rgba(53, 234, 255, 0.48);
  color: #c9fbff;
  background: linear-gradient(180deg, rgba(5, 38, 48, 0.92), rgba(2, 16, 22, 0.96));
}

.button-cheat-entry > span {
  margin-right: 0.35rem;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(53, 234, 255, 0.75);
}

.admin-mode-state {
  display: flex;
  padding: 0.65rem 0.1rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #8f8594;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  align-items: center;
  justify-content: space-between;
}

.admin-mode-state strong {
  color: #aa9faf;
}

#adminStatus.is-active,
.admin-screen.is-active #adminStatus {
  color: #9ff1ba;
  text-shadow: 0 0 0.75rem rgba(114, 215, 154, 0.42);
}

.admin-reset-progress {
  border-color: rgba(213, 44, 74, 0.58);
  color: #ffd6de;
  background: rgba(69, 7, 20, 0.24);
}

.admin-reset-progress:hover:not(:disabled) {
  border-color: #ff526f;
  background: rgba(105, 9, 29, 0.38);
  box-shadow: 0 0 1.3rem rgba(255, 55, 88, 0.18);
}

.admin-wallet {
  position: relative;
  z-index: 1;
  display: grid;
  margin-top: auto;
  padding-top: 0.8rem;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.admin-wallet > div {
  display: grid;
  min-width: 0;
  padding: 0.62rem;
  border: 1px solid rgba(244, 201, 107, 0.15);
  border-radius: 0.55rem;
  background: rgba(244, 201, 107, 0.035);
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.42rem;
}

.admin-wallet > div > span {
  color: var(--gold);
  grid-row: 1 / 3;
}

.admin-wallet p {
  margin: 0;
  overflow: hidden;
  color: #827985;
  font-size: 0.43rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-wallet b {
  overflow: hidden;
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: clamp(0.75rem, 1cqw, 1rem);
  text-overflow: ellipsis;
}

.admin-level-select {
  display: flex;
  padding: clamp(0.8rem, 1.35cqw, 1.35rem);
  flex-direction: column;
}

.admin-level-heading {
  display: flex;
  min-height: 3.3rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.admin-level-heading .eyebrow {
  margin-bottom: 0.22rem;
}

.admin-level-heading > span {
  padding-bottom: 0.18rem;
  color: #807687;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.admin-level-grid {
  display: grid;
  min-height: 0;
  padding: clamp(0.6rem, 1cqw, 1rem) 0 0;
  overflow: auto;
  flex: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(0.45rem, 0.72cqw, 0.72rem);
  scrollbar-color: rgba(244, 201, 107, 0.35) transparent;
  scrollbar-width: thin;
}

.admin-world-group,
.admin-level-world {
  display: flex;
  min-width: 0;
  padding: clamp(0.42rem, 0.62cqw, 0.62rem);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.65rem;
  background: linear-gradient(180deg, rgba(162, 138, 223, 0.075), rgba(255, 255, 255, 0.018));
  flex-direction: column;
  gap: 0.42rem;
}

.admin-world-title,
.admin-level-world h4 {
  min-height: 2.2rem;
  margin: 0;
  color: #cfc3d3;
  font-family: var(--display);
  font-size: clamp(0.55rem, 0.68cqw, 0.68rem);
  font-weight: 600;
  line-height: 1.2;
}

.admin-level-grid button,
.admin-course-button {
  display: flex;
  width: 100%;
  min-height: clamp(2.45rem, 3.6cqw, 3.6rem);
  padding: 0.46rem 0.48rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.46rem;
  cursor: pointer;
  color: #d9cfd8;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  transition: transform 160ms var(--ease-out), border-color 160ms ease, background 160ms ease;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
}

.admin-level-grid button:hover,
.admin-course-button:hover {
  border-color: rgba(244, 201, 107, 0.46);
  background: rgba(244, 201, 107, 0.075);
  transform: translateY(-1px);
}

.admin-level-grid button:disabled,
.admin-course-button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
  filter: saturate(0.45);
  transform: none;
}

.admin-level-grid button b,
.admin-course-button b {
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: clamp(0.58rem, 0.72cqw, 0.72rem);
}

.admin-level-grid button small,
.admin-course-button small {
  overflow: hidden;
  color: #887e8a;
  font-size: clamp(0.4rem, 0.46cqw, 0.46rem);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* HUD */
.hud {
  position: absolute;
  inset: 0;
  z-index: 30;
  padding: clamp(0.8rem, 1.6cqw, 1.6rem);
  pointer-events: none;
}

.hud-topline {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.45rem, 0.75cqw, 0.75rem);
}

.hud-panel {
  min-height: clamp(2.65rem, 4.25cqw, 4.25rem);
  padding: clamp(0.5rem, 0.75cqw, 0.75rem) clamp(0.65rem, 1cqw, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.65rem;
  background: linear-gradient(145deg, rgba(13, 11, 22, 0.86), rgba(6, 6, 11, 0.7));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(0.7rem);
}

.hud-eyebrow {
  display: block;
  margin-bottom: 0.18rem;
  font-size: clamp(0.38rem, 0.5cqw, 0.5rem);
  letter-spacing: 0.17em;
}

.course-panel {
  min-width: clamp(10rem, 19cqw, 19rem);
}

.course-panel strong {
  font-family: var(--display);
  font-size: clamp(0.7rem, 1.02cqw, 1.02rem);
  font-weight: 600;
}

.vitals-panel {
  display: flex;
  min-width: clamp(6rem, 9.5cqw, 9.5rem);
  align-items: flex-start;
  gap: clamp(0.5rem, 0.75cqw, 0.75rem);
}

.vitality-readout {
  display: grid;
  min-width: max-content;
}

.health-pips {
  display: flex;
  gap: clamp(0.18rem, 0.32cqw, 0.32rem);
}

.health-pip {
  width: clamp(0.75rem, 1.18cqw, 1.18rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  transform: rotate(45deg) scale(0.72);
}

.health-pip.is-full,
.health-pip.full {
  border-color: rgba(255, 203, 211, 0.78);
  background: linear-gradient(135deg, #ff8b98, #c73f5b);
  box-shadow: 0 0 0.8rem rgba(255, 95, 111, 0.48);
}

.armor-pip {
  border-color: rgba(134, 181, 255, 0.34);
  background: rgba(65, 116, 201, 0.12);
}

.armor-pip.is-full {
  border-color: rgba(172, 211, 255, 0.9);
  background: linear-gradient(135deg, #9fd2ff, #3767d2);
  box-shadow: 0 0 0.85rem rgba(74, 137, 255, 0.58);
}

.currency-panel {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: clamp(0.55rem, 0.9cqw, 0.9rem);
}

.hud-upgrade-button {
  position: relative;
  display: grid;
  min-height: clamp(2.65rem, 4.25cqw, 4.25rem);
  padding: clamp(0.42rem, 0.62cqw, 0.62rem) clamp(0.65rem, 0.9cqw, 0.9rem);
  overflow: hidden;
  border: 1px solid rgba(53, 234, 255, 0.72);
  border-radius: 2px;
  color: #d8fcff;
  background: linear-gradient(145deg, rgba(4, 38, 46, 0.97), rgba(1, 12, 17, 0.95));
  background-size: auto;
  box-shadow: 4px 4px 0 rgba(0, 8, 11, 0.88), 0 0 1rem rgba(53, 234, 255, 0.2);
  font-family: var(--display);
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  grid-template-columns: auto auto;
  align-items: center;
  gap: clamp(0.45rem, 0.65cqw, 0.65rem);
  animation: hud-upgrade-pulse 1.8s ease-in-out infinite;
}

.hud-upgrade-button[hidden] { display: none; }

.hud-upgrade-button[hidden] + .currency-panel { margin-left: auto; }

.hud-upgrade-button::after {
  position: absolute;
  top: -55%;
  bottom: -55%;
  left: -45%;
  width: 32%;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(210, 251, 255, 0.62), transparent);
  transform: skewX(-20deg);
  animation: hud-upgrade-shimmer 1.65s ease-in-out infinite;
}

.hud-upgrade-button:hover,
.hud-upgrade-button:focus-visible {
  border-color: #d9fdff;
  color: #fff;
  background-color: rgba(7, 61, 70, 0.98);
  outline: 2px solid rgba(53, 234, 255, 0.34);
  outline-offset: 2px;
}

.hud-upgrade-icon {
  display: grid;
  width: clamp(1.55rem, 2.1cqw, 2.1rem);
  aspect-ratio: 1;
  border: 1px solid rgba(53, 234, 255, 0.58);
  color: #8ff6ff;
  background: rgba(53, 234, 255, 0.09);
  font-size: clamp(0.76rem, 1.1cqw, 1.1rem);
  place-items: center;
}

.hud-upgrade-copy { display: grid; gap: 0.16rem; }
.hud-upgrade-copy small {
  color: #69dcea;
  font-size: clamp(0.34rem, 0.43cqw, 0.43rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.hud-upgrade-copy strong {
  font-size: clamp(0.54rem, 0.68cqw, 0.68rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@keyframes hud-upgrade-pulse {
  0%, 100% { box-shadow: 4px 4px 0 rgba(0, 8, 11, 0.88), 0 0 0.6rem rgba(53, 234, 255, 0.14); }
  50% { box-shadow: 4px 4px 0 rgba(0, 8, 11, 0.88), 0 0 1.45rem rgba(53, 234, 255, 0.42); }
}

@keyframes hud-upgrade-shimmer {
  0%, 18% { left: -45%; opacity: 0; }
  28% { opacity: 1; }
  68%, 100% { left: 125%; opacity: 0; }
}

.currency-readout {
  display: inline-flex;
  font-family: var(--display);
  font-size: clamp(0.72rem, 1cqw, 1rem);
  align-items: center;
  gap: 0.35rem;
}

.currency-readout > span {
  display: grid;
  width: clamp(1.25rem, 1.8cqw, 1.8rem);
  height: clamp(1.25rem, 1.8cqw, 1.8rem);
  border-radius: 50%;
  font-size: clamp(0.6rem, 0.85cqw, 0.85rem);
  place-items: center;
}

.currency-yin > span {
  border: 1px solid rgba(244, 201, 107, 0.55);
  color: var(--gold-bright);
  background: rgba(244, 201, 107, 0.08);
}

.currency-red > span {
  border: 1px solid rgba(255, 95, 111, 0.56);
  color: #ff929c;
  background: rgba(255, 95, 111, 0.09);
}

.currency-lives > span {
  border: 1px solid rgba(157, 229, 255, 0.58);
  color: #bdefff;
  background: rgba(99, 205, 255, 0.11);
  box-shadow: 0 0 0.8rem rgba(99, 205, 255, 0.14);
}

.currency-lives .life-head-icon {
  width: clamp(2rem, 2.7cqw, 2.7rem);
  height: clamp(2rem, 2.7cqw, 2.7rem);
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 0.42rem rgba(111, 229, 255, 0.38));
}

.pause-button {
  width: clamp(2.65rem, 4.25cqw, 4.25rem);
  height: clamp(2.65rem, 4.25cqw, 4.25rem);
  pointer-events: auto;
}

.pause-button span {
  width: 3px;
  height: 0.9rem;
  border-radius: 999px;
  background: #e8ddd2;
}

.store-screen.is-ingame-overlay {
  inset: clamp(2.9rem, 4.8cqw, 4.8rem) clamp(1.45rem, 5.4cqw, 5.4rem) clamp(2rem, 3.2cqw, 3.2rem);
  z-index: 55;
  padding: clamp(1.2rem, 2.1cqw, 2.1rem) clamp(1.35rem, 2.6cqw, 2.6rem) clamp(1rem, 1.8cqw, 1.8rem);
  border: 1px solid rgba(53, 234, 255, 0.62);
  background: rgba(1, 10, 14, 0.91);
  background-size: auto;
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.72), 0 0 2rem rgba(53, 234, 255, 0.18), 8px 8px 0 rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(0.42rem);
}

.store-screen.is-ingame-overlay::before { opacity: 0.2; }
.store-screen.is-ingame-overlay::after { inset: 0.65rem; border-color: rgba(53, 234, 255, 0.28); }
.store-screen.is-ingame-overlay .screen-header { margin-bottom: clamp(0.65rem, 1.1cqw, 1.1rem); }
.store-screen.is-ingame-overlay .upgrade-card {
  display: flex;
  min-height: 0;
  padding: clamp(0.65rem, 0.9cqw, 0.9rem);
  flex-direction: column;
}
.store-screen.is-ingame-overlay .upgrade-card .record-art {
  height: clamp(5.25rem, 8.25cqw, 7rem);
  margin-bottom: 0.55rem;
  flex: 0 0 auto;
}
.store-screen.is-ingame-overlay .upgrade-card p {
  margin-bottom: 0.4rem;
  line-height: 1.32;
}
.store-screen.is-ingame-overlay .upgrade-card .store-card-action {
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  z-index: 3;
  min-width: 3.9rem;
  padding: 0.36rem 0.48rem;
  border: 1px solid rgba(53, 234, 255, 0.48);
  color: #d2fbff;
  background: rgba(1, 14, 19, 0.92);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.72);
  text-align: center;
}
.store-screen.is-ingame-overlay .upgrade-card .store-card-command { min-height: 1.65rem; margin-top: 0.3rem; }

@container azrael-stage (max-width: 850px) {
  .hud-upgrade-button {
    width: clamp(2.65rem, 4.25cqw, 4.25rem);
    padding: 0.35rem;
    grid-template-columns: 1fr;
  }
  .hud-upgrade-icon { width: 100%; }
  .hud-upgrade-copy { display: none; }
  .store-screen.is-ingame-overlay { inset: 1.3rem 1.55rem 1rem; }
}

.special-cluster {
  position: absolute;
  bottom: clamp(1rem, 1.7cqw, 1.7rem);
  left: clamp(1rem, 1.7cqw, 1.7rem);
  display: flex;
  width: clamp(15rem, 27cqw, 27rem);
  padding: clamp(0.45rem, 0.7cqw, 0.7rem);
  border: 1px solid rgba(162, 138, 223, 0.32);
  border-radius: 999px;
  background: rgba(10, 8, 18, 0.83);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(0.8rem);
  align-items: center;
  gap: clamp(0.5rem, 0.75cqw, 0.75rem);
}

.special-orb {
  padding: 0;
  display: grid;
  width: clamp(1.9rem, 3cqw, 3rem);
  height: clamp(1.9rem, 3cqw, 3rem);
  border: 1px solid rgba(244, 201, 107, 0.45);
  border-radius: 50%;
  color: var(--gold-bright);
  background: radial-gradient(circle, rgba(162, 138, 223, 0.56), rgba(45, 28, 78, 0.82));
  box-shadow: 0 0 1.1rem rgba(162, 138, 223, 0.32);
  font-size: clamp(0.68rem, 1.1cqw, 1.1rem);
  flex: 0 0 auto;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.special-orb:hover,
.special-orb:focus-visible {
  border-color: rgba(255, 224, 133, 0.9);
  box-shadow: 0 0 1.5rem rgba(203, 130, 255, 0.58);
  transform: scale(1.06);
}

.relic-deploy {
  position: relative;
  display: grid;
  width: clamp(2.3rem, 3.65cqw, 3.65rem);
  height: clamp(2.3rem, 3.65cqw, 3.65rem);
  padding: 0;
  border: 1px solid rgba(109, 229, 255, 0.58);
  border-radius: 0.75rem 0.75rem 1.15rem 1.15rem;
  cursor: pointer;
  color: #e9fcff;
  background:
    radial-gradient(circle at 50% 42%, rgba(225, 252, 255, 0.85) 0 6%, transparent 7%),
    conic-gradient(from 45deg, #243c64, #7552a7, #216a80, #243c64);
  box-shadow: inset 0 0 1rem rgba(136, 237, 255, 0.18), 0 0 1rem rgba(83, 210, 255, 0.2);
  pointer-events: auto;
  flex: 0 0 auto;
  place-items: center;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.relic-deploy:hover,
.relic-deploy:focus-visible {
  border-color: #d4f8ff;
  box-shadow: inset 0 0 1rem rgba(136, 237, 255, 0.3), 0 0 1.35rem rgba(83, 210, 255, 0.42);
  transform: translateY(-0.1rem);
}

.relic-deploy:disabled {
  cursor: default;
  opacity: 0.42;
  filter: grayscale(0.65);
}

.relic-deploy > span {
  position: absolute;
  top: 14%;
  font-size: clamp(0.8rem, 1.25cqw, 1.25rem);
  text-shadow: 0 0 0.65rem #92ecff;
}

.relic-deploy > b {
  position: absolute;
  right: 8%;
  bottom: 7%;
  display: grid;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.18rem;
  border-radius: 999px;
  color: #09121a;
  background: #c9f6ff;
  font-size: 0.53rem;
  place-items: center;
}

.relic-deploy > small {
  position: absolute;
  bottom: 8%;
  left: 10%;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.42rem;
  font-weight: 900;
}

.special-copy {
  min-width: 0;
  flex: 1;
}

.special-heading,
.boss-heading {
  display: flex;
  margin-bottom: 0.3rem;
  color: #b7aabf;
  font-size: clamp(0.42rem, 0.56cqw, 0.56rem);
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  justify-content: space-between;
}

.special-heading strong {
  color: var(--gold-bright);
}

.special-track {
  height: clamp(0.34rem, 0.5cqw, 0.5rem);
  border-radius: 999px;
}

.special-track .meter-fill {
  background: linear-gradient(90deg, #7c54bd, #d85eb6 55%, #ffd06f);
  box-shadow: 0 0 0.8rem rgba(205, 89, 181, 0.46);
}

.invincibility-timer {
  margin-top: 0.25rem;
  color: #bdefff;
  font-size: clamp(0.4rem, 0.52cqw, 0.52rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 0.75rem rgba(91, 220, 255, 0.72);
}

.life-card .record-art {
  background:
    radial-gradient(circle at 50% 45%, rgba(184, 240, 255, 0.9) 0 3%, rgba(85, 174, 232, 0.35) 4% 16%, transparent 17%),
    conic-gradient(from 45deg, #172745, #45376d, #172745, #356b80, #172745);
}

.life-card .record-art::after {
  border-color: rgba(199, 241, 255, 0.8);
  background: radial-gradient(circle, #eefcff 0 18%, #79c6ec 20% 43%, #223a63 45% 100%);
  box-shadow: 0 0 2rem rgba(100, 216, 255, 0.52);
}

.upgrade-card .record-art {
  background:
    linear-gradient(135deg, rgba(255,255,255,.1), transparent 35%),
    conic-gradient(from 35deg, #192542, var(--upgrade-accent, #65d9ff), #372553, #192542);
}

.upgrade-card .record-art::after {
  border-color: color-mix(in srgb, var(--upgrade-accent, #65d9ff) 70%, white);
  background: color-mix(in srgb, var(--upgrade-accent, #65d9ff) 46%, #131525);
  box-shadow: 0 0 2rem color-mix(in srgb, var(--upgrade-accent, #65d9ff) 42%, transparent);
}

.combo-label {
  position: absolute;
  top: 17%;
  right: clamp(1.2rem, 2.5cqw, 2.5rem);
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: clamp(1.05rem, 2cqw, 2rem);
  font-style: italic;
  text-shadow: 0 2px 10px #000, 0 0 1.4rem rgba(244, 201, 107, 0.45);
  transform: rotate(-3deg);
}

.boss-hud {
  position: absolute;
  right: 50%;
  bottom: clamp(1.2rem, 2cqw, 2rem);
  width: clamp(18rem, 39cqw, 39rem);
  padding: clamp(0.55rem, 0.85cqw, 0.85rem) clamp(0.75rem, 1.15cqw, 1.15rem);
  border: 1px solid rgba(255, 105, 120, 0.32);
  border-radius: 0.65rem;
  background: rgba(10, 7, 14, 0.86);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(0.8rem);
  transform: translateX(50%);
}

.boss-heading span {
  color: #b35b68;
}

.boss-heading strong {
  color: #eadde0;
  font-family: var(--display);
  letter-spacing: 0.05em;
}

.boss-track {
  height: clamp(0.45rem, 0.7cqw, 0.7rem);
  border-radius: 999px;
}

.boss-fill {
  width: 100%;
  background: linear-gradient(90deg, #6f1d3b, #e34f64 65%, #ffb069);
  box-shadow: 0 0 0.9rem rgba(255, 79, 100, 0.35);
}

/* Pause and results */
.modal-screen {
  z-index: 42;
  padding: clamp(1rem, 3cqw, 3rem);
  background: rgba(4, 3, 9, 0.74);
  backdrop-filter: blur(0.7rem) saturate(0.7);
  align-items: center;
  justify-content: center;
}

.modal-card {
  position: relative;
  width: min(47rem, 82%);
  padding: clamp(1.65rem, 3cqw, 3rem);
  border: 1px solid rgba(244, 201, 107, 0.28);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(27, 22, 39, 0.98), rgba(9, 8, 16, 0.99)),
    var(--panel-strong);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.68), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.modal-card::before {
  position: absolute;
  inset: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 0.65rem;
  pointer-events: none;
  content: "";
}

.modal-ornament {
  position: absolute;
  top: -1.2rem;
  left: 50%;
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(244, 201, 107, 0.42);
  color: var(--gold);
  background: #15101f;
  transform: translateX(-50%) rotate(45deg);
  place-items: center;
}

.modal-ornament::first-letter {
  transform: rotate(-45deg);
}

.modal-card > .eyebrow,
.modal-card > h2 {
  text-align: center;
}

.modal-card > .eyebrow::before {
  display: none;
}

.modal-card > h2 {
  margin: 0 0 clamp(1rem, 2cqw, 2rem);
  font-size: clamp(2rem, 3.8cqw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.pause-layout {
  display: grid;
  grid-template-columns: minmax(10rem, 0.85fr) minmax(14rem, 1.3fr);
  gap: clamp(1rem, 2cqw, 2rem);
}

.pause-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pause-actions .button {
  width: 100%;
}

.settings-list {
  padding: clamp(0.75rem, 1.2cqw, 1.2rem);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.16);
}

.settings-list > label:not(.toggle-row) {
  display: flex;
  margin-bottom: 0.35rem;
  color: #c5b9b7;
  font-size: clamp(0.56rem, 0.7cqw, 0.7rem);
  font-weight: 750;
  justify-content: space-between;
}

.settings-list output {
  color: var(--gold);
}

.settings-list input[type="range"] {
  width: 100%;
  height: 0.28rem;
  margin: 0 0 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  background: linear-gradient(90deg, #8a62ca 0 80%, rgba(255, 255, 255, 0.1) 80%);
  pointer-events: auto;
  touch-action: none;
}

.settings-list input[type="range"]::-webkit-slider-thumb {
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid #21152f;
  border-radius: 50%;
  cursor: grab;
  appearance: none;
  background: var(--gold-bright);
  box-shadow: 0 0 0.75rem rgba(244, 201, 107, 0.36);
}

.settings-list input[type="range"]::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #21152f;
  border-radius: 50%;
  cursor: grab;
  background: var(--gold-bright);
}

.toggle-row {
  display: flex;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.toggle-row span {
  display: flex;
  flex-direction: column;
}

.toggle-row b {
  color: #cfc4c0;
  font-size: clamp(0.55rem, 0.7cqw, 0.7rem);
}

.toggle-row small {
  margin-top: 0.16rem;
  color: #796f7b;
  font-size: clamp(0.44rem, 0.55cqw, 0.55rem);
}

.toggle-row input {
  position: relative;
  width: 2.45rem;
  height: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  background: rgba(255, 255, 255, 0.07);
  transition: background 160ms ease;
}

.toggle-row input::after {
  position: absolute;
  top: 0.16rem;
  left: 0.18rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  content: "";
  background: #a89da4;
  transition: transform 180ms var(--ease-out), background 180ms ease;
}

.toggle-row input:checked {
  background: rgba(129, 88, 190, 0.58);
}

.toggle-row input:checked::after {
  background: var(--gold-bright);
  transform: translateX(1.08rem);
}

.result-card {
  width: min(39rem, 76%);
  text-align: center;
}

/* Record recovery pause */
.music-unlock-screen {
  position: absolute;
  z-index: 72;
  display: grid;
  overflow: hidden;
  padding: clamp(1rem, 2.2cqw, 2.2rem);
  color: #dffcff;
  background: rgba(0, 5, 8, 0.91);
  backdrop-filter: blur(0.45rem) saturate(0.75);
  inset: 0;
  place-items: center;
}

.music-unlock-screen[hidden] {
  display: none;
}

.music-unlock-atmosphere {
  position: absolute;
  inset: -20%;
  opacity: 0.7;
  background:
    radial-gradient(circle at 50% 48%, rgba(143, 26, 50, 0.42), transparent 23%),
    repeating-radial-gradient(circle at 50% 48%, transparent 0 3rem, rgba(53, 234, 255, 0.075) 3.05rem 3.1rem, transparent 3.15rem 5rem);
  animation: record-atmosphere-turn 18s linear infinite;
}

.music-unlock-card {
  position: relative;
  display: flex;
  width: min(37rem, 86%);
  max-height: 94%;
  padding: clamp(1rem, 1.8cqw, 1.8rem) clamp(1.2rem, 2.5cqw, 2.5rem);
  border: 1px solid rgba(53, 234, 255, 0.7);
  text-align: center;
  background: linear-gradient(145deg, rgba(3, 18, 23, 0.99), rgba(12, 3, 8, 0.99));
  background-size: auto;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.88), 0 0 2rem rgba(53, 234, 255, 0.18);
  align-items: center;
  flex-direction: column;
}

.music-unlock-card::before,
.music-unlock-card::after {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-color: #35eaff;
  border-style: solid;
  content: "";
}

.music-unlock-card::before {
  top: 0.55rem;
  left: 0.55rem;
  border-width: 1px 0 0 1px;
}

.music-unlock-card::after {
  right: 0.55rem;
  bottom: 0.55rem;
  border-width: 0 1px 1px 0;
}

.music-unlock-card .eyebrow {
  margin-bottom: 0.1rem;
  color: #72efff;
}

.music-unlock-card .eyebrow::before {
  display: none;
}

.music-unlock-vinyl-wrap {
  position: relative;
  display: grid;
  width: clamp(9rem, 20cqw, 16rem);
  aspect-ratio: 1;
  margin: 0.15rem 0 0.2rem;
  place-items: center;
}

.music-unlock-orbit {
  position: absolute;
  border: 1px dashed rgba(53, 234, 255, 0.45);
  animation: record-orbit-turn 7s linear infinite reverse;
  inset: -0.35rem;
}

.music-unlock-orbit::before,
.music-unlock-orbit::after {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: #35eaff;
  box-shadow: 0 0 0.85rem #35eaff;
  content: "";
}

.music-unlock-orbit::before {
  top: -0.25rem;
  left: 50%;
}

.music-unlock-orbit::after {
  right: 12%;
  bottom: 4%;
  background: #b52b49;
  box-shadow: 0 0 0.85rem #b52b49;
}

.music-unlock-vinyl {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0.65rem 0.75rem rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.85rem rgba(212, 45, 72, 0.32));
  animation: record-vinyl-spin 2.8s linear infinite;
}

.music-unlock-kicker {
  margin: 0.1rem 0 0.25rem;
  color: #b62f4c;
  font-size: clamp(0.55rem, 0.75cqw, 0.75rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.music-unlock-card h2 {
  max-width: 100%;
  margin: 0;
  color: #e4fcff;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2cqw, 3.2rem);
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-shadow: 3px 3px 0 #001319, 0 0 0.9rem rgba(53, 234, 255, 0.24);
}

.music-unlock-count {
  margin: 0.65rem 0;
  color: #7fb4bd;
  font-size: clamp(0.52rem, 0.66cqw, 0.66rem);
}

.music-unlock-card .button {
  min-width: 10rem;
}

.music-unlock-actions {
  display: flex;
  width: min(24rem, 100%);
  gap: 0.65rem;
  justify-content: center;
}

.music-unlock-actions .button {
  flex: 1 1 0;
}

.music-unlock-hint {
  margin-top: 0.45rem;
  color: #54747a;
  font-size: 0.46rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes record-vinyl-spin {
  to { transform: rotate(360deg); }
}

@keyframes record-orbit-turn {
  to { transform: rotate(360deg); }
}

@keyframes record-atmosphere-turn {
  to { transform: rotate(360deg) scale(1.03); }
}

.result-crown {
  width: clamp(3.5rem, 6cqw, 6rem);
  height: clamp(3.5rem, 6cqw, 6rem);
  margin: -0.3rem auto 1rem;
  color: var(--gold-bright);
  background: radial-gradient(circle, rgba(244, 201, 107, 0.19), transparent 62%);
  box-shadow: 0 0 2.6rem rgba(244, 201, 107, 0.18);
}

.result-crown::before,
.result-crown::after {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(162, 138, 223, 0.42);
  content: "";
  transform: rotate(45deg);
}

.result-crown::after {
  inset: -14%;
  border-color: rgba(244, 201, 107, 0.13);
  border-radius: 50%;
  transform: none;
}

.result-stats {
  display: grid;
  margin-bottom: clamp(1rem, 1.7cqw, 1.7rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.15);
  grid-template-columns: repeat(auto-fit, minmax(5.8rem, 1fr));
}

.shop-tutorial-screen,
.world-unlock-screen {
  z-index: 46;
  display: grid;
  overflow: hidden;
  padding: clamp(1rem, 3cqw, 3rem);
  background: rgba(1, 6, 10, 0.94);
  place-items: center;
}

.shop-tutorial-atmosphere {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 28% 48%, rgba(53, 234, 255, 0.19), transparent 24%),
    radial-gradient(circle at 75% 45%, rgba(181, 43, 73, 0.22), transparent 28%);
  animation: shop-tutorial-drift 10s ease-in-out infinite alternate;
}

.shop-tutorial-card {
  position: relative;
  display: flex;
  width: min(42rem, 90%);
  padding: clamp(1.35rem, 2.8cqw, 2.8rem);
  border: 1px solid rgba(53, 234, 255, 0.72);
  text-align: center;
  background: linear-gradient(145deg, rgba(3, 18, 23, 0.99), rgba(14, 3, 8, 0.99));
  background-size: auto;
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.88), 0 0 3rem rgba(53, 234, 255, 0.18);
  align-items: center;
  flex-direction: column;
}

.shop-tutorial-card::before,
.shop-tutorial-card::after {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-color: var(--cyan);
  border-style: solid;
  content: "";
}

.shop-tutorial-card::before { top: 0.55rem; left: 0.55rem; border-width: 2px 0 0 2px; }
.shop-tutorial-card::after { right: 0.55rem; bottom: 0.55rem; border-width: 0 2px 2px 0; }

.shop-tutorial-progress {
  display: flex;
  width: 100%;
  color: #75adb6;
  font-size: 0.52rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  align-items: center;
  justify-content: space-between;
}

.shop-tutorial-dots { display: flex; gap: 0.35rem; }
.shop-tutorial-dots i { width: 1.8rem; height: 0.2rem; background: rgba(255, 255, 255, 0.14); }
.shop-tutorial-dots i.is-active { background: var(--cyan); box-shadow: 0 0 0.7rem rgba(53, 234, 255, 0.7); }

.shop-tutorial-icon {
  display: grid;
  width: clamp(5rem, 9cqw, 8rem);
  aspect-ratio: 1;
  margin: 0.55rem 0;
  border: 1px solid rgba(53, 234, 255, 0.48);
  color: #c9fbff;
  background: radial-gradient(circle, rgba(53, 234, 255, 0.24), rgba(2, 12, 17, 0.92) 64%);
  box-shadow: 0 0 2rem rgba(53, 234, 255, 0.17), 0 0 0 0.55rem rgba(53, 234, 255, 0.04);
  font-family: var(--display);
  font-size: clamp(2rem, 4cqw, 4rem);
  place-items: center;
  transform: rotate(45deg);
  animation: shop-icon-pulse 1.8s ease-in-out infinite;
}

.shop-tutorial-icon > * { transform: rotate(-45deg); }
.shop-tutorial-card .eyebrow { margin: 0.25rem 0; color: var(--cyan); }
.shop-tutorial-card .eyebrow::before { display: none; }
.shop-tutorial-card h2 { margin: 0.2rem 0 0.55rem; color: #edfdff; font-family: var(--display); font-size: clamp(1.7rem, 3.6cqw, 3.6rem); }
.shop-tutorial-card > p:not(.eyebrow) { max-width: 37rem; margin: 0 0 0.8rem; color: #c6dadd; font-size: clamp(0.63rem, 0.82cqw, 0.82rem); line-height: 1.65; }

.shop-tutorial-currency {
  display: grid;
  min-width: min(25rem, 82%);
  margin-bottom: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(53, 234, 255, 0.22);
  background: rgba(0, 0, 0, 0.26);
  grid-template-columns: auto 1fr;
  text-align: left;
  gap: 0.1rem 0.7rem;
}

.shop-tutorial-currency > span { color: var(--cyan); font-size: 1.45rem; grid-row: 1 / 3; align-self: center; }
.shop-tutorial-currency b { color: #effdff; font-family: var(--display); font-size: 0.85rem; }
.shop-tutorial-currency small { color: #749da4; font-size: 0.5rem; text-transform: uppercase; }
.shop-tutorial-card .button { min-width: 15rem; }
.shop-tutorial-hint { margin-top: 0.55rem; color: #58777d; font-size: 0.46rem; }

.tutorial-complete-screen {
  background: rgba(1, 6, 10, 0.52);
  backdrop-filter: blur(3px);
}

.tutorial-complete-card {
  width: min(46rem, 92%);
  border-color: rgba(53, 234, 255, 0.9);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.9), 0 0 4rem rgba(53, 234, 255, 0.32);
}

.tutorial-complete-icon {
  color: #061015;
  background: radial-gradient(circle, #e8feff, #35eaff 54%, #08758d);
  box-shadow: 0 0 2.8rem rgba(53, 234, 255, 0.55), 0 0 0 0.55rem rgba(53, 234, 255, 0.1);
}

.world-unlock-screen {
  --unlock-accent: #35eaff;
  --unlock-deep: #132a38;
  isolation: isolate;
  background: #010609;
}

.world-unlock-backdrop {
  position: absolute;
  z-index: -4;
  inset: -5%;
  background-color: var(--unlock-deep);
  background-position: center;
  background-size: cover;
  filter: brightness(0.35) saturate(1.35) blur(2px);
  transform: scale(1.08);
}

.world-unlock-screen.is-revealing .world-unlock-backdrop { animation: unlock-backdrop-arrive 1.45s cubic-bezier(.16,.84,.28,1) both; }

.world-unlock-screen::after {
  position: absolute;
  z-index: -3;
  background: radial-gradient(circle, color-mix(in srgb, var(--unlock-accent) 42%, transparent), transparent 35%), linear-gradient(rgba(1, 6, 10, 0.2), rgba(1, 6, 10, 0.86));
  content: "";
  inset: 0;
}

.world-unlock-rays {
  position: absolute;
  z-index: -2;
  width: min(68rem, 110%);
  aspect-ratio: 1;
  opacity: 0.4;
  background: repeating-conic-gradient(from 0deg, transparent 0 10deg, var(--unlock-accent) 11deg 12deg, transparent 13deg 25deg);
  mask-image: radial-gradient(circle, #000 0 48%, transparent 72%);
}

.world-unlock-screen.is-revealing .world-unlock-rays { animation: unlock-rays-spin 18s linear infinite, unlock-rays-in 1.2s ease-out both; }

.world-unlock-portal {
  position: absolute;
  display: grid;
  width: clamp(14rem, 34cqw, 32rem);
  aspect-ratio: 1;
  place-items: center;
}

.world-unlock-portal i {
  position: absolute;
  border: clamp(2px, 0.3cqw, 4px) solid var(--unlock-accent);
  border-radius: 50%;
  box-shadow: 0 0 1rem var(--unlock-accent), 0 0 3rem color-mix(in srgb, var(--unlock-accent) 42%, transparent) inset;
  inset: 8%;
}

.world-unlock-screen.is-revealing .world-unlock-portal i { animation: unlock-ring-bloom 1.3s cubic-bezier(.12,.78,.2,1) both, unlock-ring-turn 8s linear 1.3s infinite; }

.world-unlock-portal i:nth-child(2) { inset: 20%; border-style: dashed; animation-delay: 0.14s, 1.44s; animation-direction: normal, reverse; }
.world-unlock-portal i:nth-child(3) { inset: 33%; animation-delay: 0.28s, 1.58s; }
.world-unlock-portal span { color: #fff; font-size: clamp(2rem, 5cqw, 5rem); text-shadow: 0 0 1rem #fff, 0 0 3rem var(--unlock-accent); }
.world-unlock-screen.is-revealing .world-unlock-portal span { animation: unlock-star-arrive 1s 0.55s cubic-bezier(.18,.86,.25,1.2) both; }

.world-unlock-copy {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: min(48rem, 90%);
  padding-top: clamp(12rem, 32cqw, 26rem);
  text-align: center;
  align-items: center;
  flex-direction: column;
}

.world-unlock-screen.is-revealing .world-unlock-copy { animation: unlock-copy-rise 0.8s 0.8s ease-out both; }

.world-unlock-copy .eyebrow { margin: 0 0 0.3rem; color: var(--unlock-accent); text-shadow: 0 0 0.8rem var(--unlock-accent); }
.world-unlock-copy .eyebrow::before { display: none; }
.world-unlock-number { color: #fff; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.24em; text-transform: uppercase; }
.world-unlock-copy h2 { margin: 0.35rem 0 0.25rem; color: #fff; font-family: var(--display); font-size: clamp(2rem, 5.5cqw, 5.5rem); line-height: 0.95; text-shadow: 4px 4px 0 #010609, 0 0 1.4rem var(--unlock-accent); }
.world-unlock-copy p:not(.eyebrow) { max-width: 34rem; margin: 0.25rem 0 0.8rem; color: #d9e6e8; font-size: clamp(0.58rem, 0.74cqw, 0.74rem); }
.world-unlock-copy .button { border-color: var(--unlock-accent); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--unlock-accent) 22%, transparent); }

@keyframes shop-tutorial-drift { to { transform: translate3d(3%, -2%, 0) scale(1.04); } }
@keyframes shop-icon-pulse { 50% { box-shadow: 0 0 3.4rem rgba(53, 234, 255, 0.34), 0 0 0 0.85rem rgba(53, 234, 255, 0.07); transform: rotate(45deg) scale(1.05); } }
@keyframes unlock-backdrop-arrive { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: scale(1.08); } }
@keyframes unlock-rays-spin { to { transform: rotate(360deg); } }
@keyframes unlock-rays-in { from { opacity: 0; scale: 0.45; } to { opacity: 0.4; scale: 1; } }
@keyframes unlock-ring-bloom { from { opacity: 0; transform: scale(0.05) rotate(-120deg); } 65% { opacity: 1; } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes unlock-ring-turn { to { transform: rotate(360deg); } }
@keyframes unlock-star-arrive { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes unlock-copy-rise { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: translateY(0); } }

.result-stats div {
  display: flex;
  min-height: clamp(4rem, 6.5cqw, 6.5rem);
  padding: 0.65rem;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.result-stats div:last-child {
  border-right: 0;
}

.result-stats span {
  margin-bottom: 0.3rem;
  color: #8a808b;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.result-stats strong {
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: clamp(0.9rem, 1.45cqw, 1.45rem);
}

.result-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
}

/* Controls */
.controls-layout {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: clamp(0.8rem, 1.4cqw, 1.4rem);
}

.control-group,
.control-tip {
  min-height: 0;
  padding: clamp(0.85rem, 1.5cqw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.025);
}

.control-group h3,
.control-tip h3 {
  margin: 0 0 0.9rem;
  color: #eee2d7;
  font-size: clamp(0.9rem, 1.25cqw, 1.25rem);
  font-weight: 600;
}

.control-list {
  margin: 0;
}

.control-list > div {
  display: flex;
  min-height: clamp(3rem, 4.4cqw, 4.4rem);
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.control-list > div:last-child {
  border-bottom: 0;
}

.control-list dt {
  display: flex;
  gap: 0.3rem;
}

.control-list dd {
  margin: 0;
  color: #a99da0;
  font-size: clamp(0.56rem, 0.72cqw, 0.72rem);
  text-align: right;
}

.control-tip {
  position: relative;
  overflow: hidden;
  border-color: rgba(162, 138, 223, 0.24);
  background:
    radial-gradient(circle at 86% 18%, rgba(162, 138, 223, 0.19), transparent 32%),
    rgba(72, 49, 109, 0.1);
}

.control-tip > span {
  display: grid;
  width: clamp(3rem, 5.5cqw, 5.5rem);
  height: clamp(3rem, 5.5cqw, 5.5rem);
  margin-bottom: 1.15rem;
  border: 1px solid rgba(244, 201, 107, 0.34);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(244, 201, 107, 0.05);
  box-shadow: 0 0 2rem rgba(162, 138, 223, 0.19);
  font-size: clamp(0.95rem, 1.7cqw, 1.7rem);
  place-items: center;
}

.control-tip p {
  color: #9e929c;
  font-size: clamp(0.58rem, 0.75cqw, 0.75rem);
  line-height: 1.6;
}

/* Touch controls */
.touch-controls {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 36;
  padding: max(0.8rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(0.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  pointer-events: none;
}

.touch-movement,
.touch-utility,
.touch-combat {
  position: absolute;
  display: flex;
  pointer-events: auto;
  align-items: flex-end;
  gap: 0.5rem;
}

.touch-movement {
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
}

.touch-utility {
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 28%;
}

.touch-combat {
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
}

.touch-button {
  display: grid;
  width: clamp(2.8rem, 6.2cqw, 5rem);
  height: clamp(2.8rem, 6.2cqw, 5rem);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  color: #f5ecdf;
  background: rgba(11, 9, 20, 0.64);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  font-size: clamp(0.58rem, 1cqw, 0.8rem);
  font-weight: 900;
  text-transform: uppercase;
  backdrop-filter: blur(0.5rem);
  touch-action: none;
  user-select: none;
  place-items: center;
}

.touch-button:active,
.touch-button.is-active {
  border-color: var(--gold-bright);
  background: rgba(126, 83, 186, 0.72);
  box-shadow: 0 0 1.4rem rgba(162, 138, 223, 0.42);
  transform: scale(0.92);
}

.touch-small {
  width: clamp(2.35rem, 4.5cqw, 3.8rem);
  height: clamp(2.35rem, 4.5cqw, 3.8rem);
  opacity: 0.82;
}

.touch-interact {
  border-color: rgba(244, 201, 107, 0.55);
  color: #fff1bf;
  background: rgba(86, 62, 26, 0.72);
}

.touch-jump {
  border-color: rgba(116, 220, 255, 0.45);
  background: rgba(29, 89, 111, 0.62);
}

.touch-light {
  border-color: rgba(244, 201, 107, 0.48);
  background: rgba(132, 87, 34, 0.66);
}

.touch-heavy {
  border-color: rgba(255, 95, 111, 0.48);
  background: rgba(118, 39, 58, 0.66);
}

.touch-special {
  align-self: flex-start;
  width: clamp(2.35rem, 4.7cqw, 4rem);
  height: clamp(2.35rem, 4.7cqw, 4rem);
  border-color: rgba(203, 174, 255, 0.62);
  color: var(--gold-bright);
  background: rgba(86, 50, 129, 0.7);
}

.touch-relic {
  align-self: flex-start;
  width: clamp(2.35rem, 4.7cqw, 4rem);
  height: clamp(2.35rem, 4.7cqw, 4rem);
  border-color: rgba(124, 229, 255, 0.68);
  color: #d8faff;
  background: rgba(37, 92, 123, 0.72);
  box-shadow: 0 0 1rem rgba(89, 218, 255, 0.18);
}

/* Toast and loading */
.toast {
  position: absolute;
  top: 12%;
  left: 50%;
  z-index: 60;
  display: flex;
  min-width: 14rem;
  padding: 0.78rem 1rem;
  border: 1px solid rgba(244, 201, 107, 0.38);
  border-radius: 999px;
  color: #eee2d5;
  background: rgba(15, 12, 24, 0.9);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.46), 0 0 2rem rgba(162, 138, 223, 0.12);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  backdrop-filter: blur(0.8rem);
  transform: translateX(-50%);
  animation: toast-enter 360ms var(--ease-out) both;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.toast-mark {
  color: var(--gold);
}

.loading-curtain {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  color: #bbb0b5;
  background:
    radial-gradient(circle at 50% 46%, rgba(115, 80, 168, 0.2), transparent 27%),
    rgba(6, 5, 11, 0.97);
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.loading-glyph {
  display: grid;
  width: clamp(3.7rem, 7cqw, 7rem);
  height: clamp(3.7rem, 7cqw, 7rem);
  border: 1px solid rgba(244, 201, 107, 0.42);
  border-radius: 50%;
  color: var(--gold-bright);
  background: rgba(244, 201, 107, 0.03);
  box-shadow: 0 0 3rem rgba(162, 138, 223, 0.2);
  animation: loading-turn 2.2s linear infinite;
  place-items: center;
}

.loading-curtain p {
  margin: 1.2rem 0 0;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@keyframes slow-turn {
  to { transform: rotate(360deg); }
}

@keyframes sigil-breathe {
  0%, 100% { box-shadow: 0 0 2.2rem rgba(162, 138, 223, 0.17), 0 0 0 0.55rem rgba(244, 201, 107, 0.025); transform: scale(0.985); }
  50% { box-shadow: 0 0 4rem rgba(162, 138, 223, 0.32), 0 0 0 0.8rem rgba(244, 201, 107, 0.035); transform: scale(1.025); }
}

@keyframes progress-glint {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes relic-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-0.65rem) rotate(1deg); }
}

@keyframes ennidi-title-float {
  0%, 100% {
    transform: translateY(0) rotate(-0.35deg);
    filter: drop-shadow(0 0 0.7rem rgba(53, 234, 255, 0.38)) drop-shadow(0 0.85rem 0.8rem rgba(0, 0, 0, 0.82));
  }
  50% {
    transform: translateY(-0.65rem) rotate(0.35deg);
    filter: drop-shadow(0 0 1.25rem rgba(53, 234, 255, 0.62)) drop-shadow(0 1rem 0.9rem rgba(0, 0, 0, 0.76));
  }
}

@keyframes current-node {
  0%, 100% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 0 0.42rem rgba(11, 9, 18, 0.7), 0 0 1.3rem rgba(162, 138, 223, 0.52); }
  50% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 0 0.62rem rgba(100, 70, 145, 0.25), 0 0 2.2rem rgba(162, 138, 223, 0.78); }
}

@keyframes toast-enter {
  from { opacity: 0; transform: translate(-50%, -0.7rem) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes loading-turn {
  0% { transform: rotate(0deg) scale(0.96); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(0.96); }
}

@container azrael-stage (max-width: 850px) {
  .global-mute-button {
    width: 2.45rem;
    min-height: 2.45rem;
    padding: 0;
    justify-content: center;
  }

  .global-mute-label { display: none; }

  .panel-screen {
    padding: 1.35rem 1.55rem 1rem;
  }

  .screen-header {
    min-height: 3.5rem;
    margin-bottom: 0.75rem;
  }

  .screen-header h2 {
    font-size: 1.55rem;
  }

  .screen-header p:not(.eyebrow) {
    display: none;
  }

  .character-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .character-card {
    padding: 0.65rem;
  }

  .character-portrait,
  .character-card canvas,
  .character-card img {
    height: 6.4rem;
  }

  .character-card p,
  .character-kit,
  .move-list {
    display: none;
  }

  .title-layout {
    padding: 2rem 2.8rem;
    grid-template-columns: 1.2fr 0.6fr;
    gap: 1.5rem;
  }

  .title-copy h1 {
    font-size: 3.55rem;
  }

  .title-lede {
    margin-bottom: 0.85rem;
    font-size: 0.65rem;
  }

  .title-actions {
    width: 19rem;
  }

  .title-actions .button {
    min-height: 2.35rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.57rem;
  }

  .title-actions .button-primary {
    min-height: 2.9rem;
  }

  .course-dossier {
    top: 5rem;
    width: 16.5rem;
    padding: 1rem;
  }

  .course-dossier h3 {
    font-size: 1.22rem;
  }

  .map-details > p {
    display: none;
  }

  .crossroads-dock button {
    min-width: 10rem;
  }

  .admin-console-layout {
    grid-template-columns: 12.5rem minmax(0, 1fr);
  }

  .cheat-console-layout {
    grid-template-columns: 13rem minmax(0, 1fr);
  }

  .cheat-console-entry,
  .cheat-console-saved {
    padding: 0.8rem;
  }

  .admin-command-card,
  .admin-level-select {
    padding: 0.7rem;
  }

  .admin-sigil,
  .admin-command-copy {
    display: none;
  }

  .admin-toggle {
    min-height: 3rem;
  }

  .admin-level-grid {
    gap: 0.35rem;
  }

  .admin-world-group,
  .admin-level-world {
    padding: 0.35rem;
  }
}

@media (max-height: 680px), (max-width: 860px) {
  .shell-header,
  .shell-footer {
    display: none;
  }

  .page-shell {
    padding: 0;
    gap: 0;
  }

  .game-frame {
    width: min(100vw, calc(100dvh * 16 / 9));
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  .game-frame::before {
    inset: 0.3rem;
    border-radius: 0;
  }
}

@media (pointer: coarse) and (max-width: 1100px) {
  .global-mute-button {
    top: max(0.7rem, env(safe-area-inset-top));
    right: max(4.25rem, calc(env(safe-area-inset-right) + 4.25rem));
    bottom: auto;
  }

  .touch-controls:not([hidden]) {
    display: block;
  }

  .shell-footer {
    display: none;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  body {
    overflow-y: auto;
  }

  .page-shell {
    min-height: 100dvh;
  }

  .game-frame {
    width: 100vw;
    min-height: auto;
    max-height: none;
  }

  .title-relic,
  .title-version,
  .screen-corner-copy {
    display: none;
  }

  .title-layout {
    display: flex;
    padding: 1.4rem;
    align-items: center;
    justify-content: center;
  }

  .title-copy {
    width: 100%;
  }

  .title-copy h1 {
    font-size: clamp(2.1rem, 10vw, 3.4rem);
  }

  .title-actions {
    width: 100%;
  }

  .admin-console-layout {
    grid-template-columns: minmax(10rem, 0.72fr) minmax(0, 1.4fr);
  }

  .cheat-console-layout {
    grid-template-columns: minmax(11rem, 0.72fr) minmax(0, 1.4fr);
  }

  .admin-level-grid {
    grid-template-columns: repeat(5, minmax(5.5rem, 1fr));
  }
}

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

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after,
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

/* Retro terminal theme */
body {
  color: var(--ivory);
  background:
    radial-gradient(circle at 82% 18%, rgba(111, 14, 38, 0.3), transparent 31rem),
    radial-gradient(circle at 13% 82%, rgba(0, 111, 137, 0.2), transparent 28rem),
    linear-gradient(145deg, #03080b 0%, #010406 62%, #09030a 100%);
  letter-spacing: 0.025em;
}

body::before {
  opacity: 0.3;
  background-image: radial-gradient(circle at 72% 22%, rgba(176, 245, 255, 0.82) 0 1px, transparent 1.5px);
  background-size: 173px 149px;
}

body::after {
  opacity: 0;
  background: none;
  transform: none;
}

.shell-header,
.shell-footer {
  color: #5797a3;
  text-shadow: 2px 2px 0 #001318;
}

.shell-brand,
.shell-footer b {
  color: #9cf5ff;
}

.shell-footer b {
  border-color: rgba(53, 234, 255, 0.28);
  border-radius: 1px;
  background: #031117;
  box-shadow: 2px 2px 0 #001014;
}

.game-frame {
  border-color: rgba(53, 234, 255, 0.72);
  border-radius: 2px;
  background: #010609;
  box-shadow:
    0 0 0 2px #00181f,
    0 0 0 5px #020306,
    8px 8px 0 rgba(0, 0, 0, 0.82),
    0 0 30px rgba(53, 234, 255, 0.12);
}

.game-frame::before {
  inset: 0.38rem;
  border-color: rgba(53, 234, 255, 0.14);
  border-radius: 0;
}

.game-frame::after {
  opacity: 0;
  mix-blend-mode: normal;
  background-image: none;
}

.stage-finish {
  background:
    linear-gradient(90deg, rgba(0, 8, 12, 0.4), transparent 12%, transparent 88%, rgba(0, 8, 12, 0.46)),
    linear-gradient(180deg, rgba(0, 12, 17, 0.17), transparent 35%, rgba(2, 5, 8, 0.25));
}

.screen::after {
  inset: 0.82rem;
  border-color: rgba(53, 234, 255, 0.2);
  clip-path: polygon(0 0, 2.5rem 0, 2.5rem 2px, calc(100% - 2.5rem) 2px, calc(100% - 2.5rem) 0, 100% 0, 100% 100%, calc(100% - 2.5rem) 100%, calc(100% - 2.5rem) calc(100% - 2px), 2.5rem calc(100% - 2px), 2.5rem 100%, 0 100%);
}

.screen h1,
.screen h2,
.screen h3,
.shell-brand,
.course-panel strong,
.currency-readout {
  text-shadow: 2px 2px 0 #001319;
}

.eyebrow,
.hud-eyebrow {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(53, 234, 255, 0.42);
}

.button,
.icon-button,
.keycap,
.store-card button,
.store-item button,
.purchase-button {
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(0, 13, 18, 0.94);
}

.button {
  letter-spacing: 0.1em;
}

.button::before {
  width: 3px;
  opacity: 0.36;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(53, 234, 255, 0.75);
  transform: none;
}

.button:hover:not(:disabled) {
  transform: translate(-1px, -1px);
}

.button-primary,
.store-card button,
.store-item button,
.purchase-button {
  border-color: #8ff5ff;
  color: #001015;
  background: linear-gradient(180deg, #b9fbff 0 16%, #36def3 17% 75%, #0791ac 76% 100%);
  box-shadow: 3px 3px 0 #00141a, 0 0 14px rgba(53, 234, 255, 0.18);
}

.button-primary:hover:not(:disabled) {
  box-shadow: 4px 4px 0 #00141a, 0 0 18px rgba(53, 234, 255, 0.28);
}

.button-secondary {
  border-color: #a23a52;
  color: #ffdce4;
  background: linear-gradient(180deg, #701a31, #3b0918);
  box-shadow: 3px 3px 0 #130108;
}

.button-ghost,
.icon-button {
  border-color: rgba(53, 234, 255, 0.28);
  color: #a9eef5;
  background: rgba(2, 13, 18, 0.92);
  backdrop-filter: none;
}

.button-ghost:hover:not(:disabled),
.icon-button:hover {
  border-color: rgba(53, 234, 255, 0.82);
  color: #d9fcff;
  background: #05222b;
}

.button-admin-entry {
  border-color: rgba(140, 40, 63, 0.72);
  color: #ffc8d5;
  background: linear-gradient(180deg, rgba(91, 17, 36, 0.94), rgba(36, 5, 15, 0.96));
  box-shadow: 3px 3px 0 #120106, 0 0 12px rgba(128, 27, 50, 0.14) inset;
}

.button-admin-entry > span[aria-hidden="true"] {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(53, 234, 255, 0.55);
}

.button-admin-entry:hover:not(:disabled) {
  border-color: var(--cyan);
  background: linear-gradient(180deg, #741c35, #360716);
}

.boot-screen,
.title-screen,
.panel-screen,
.admin-screen,
.loading-curtain {
  background:
    radial-gradient(circle at 80% 18%, rgba(111, 14, 38, 0.35), transparent 31%),
    linear-gradient(145deg, #061014, #010507 70%, #0b030a);
  background-size: auto, auto;
}

.boot-screen::before,
.title-screen::before,
.panel-screen::before,
.admin-screen::before {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  opacity: 0;
  background: none;
  box-shadow: none;
}

.boot-screen::after,
.title-screen::after,
.panel-screen::after,
.admin-screen::after {
  border-color: rgba(53, 234, 255, 0.24);
}

.screen-atmosphere,
.title-stars,
.admin-atmosphere {
  opacity: 0.32;
  filter: hue-rotate(135deg) saturate(1.5);
}

.azrael-sigil,
.relic-ring,
.admin-sigil,
.loading-glyph {
  border-color: rgba(53, 234, 255, 0.58);
  border-radius: 2px;
  color: #baf8ff;
  background: #041217;
  background-size: auto;
  box-shadow: 5px 5px 0 #001016, 0 0 22px rgba(53, 234, 255, 0.2);
}

.azrael-sigil::before,
.azrael-sigil::after {
  border-color: rgba(122, 26, 49, 0.55);
  border-radius: 1px;
}

.progress-track,
.meter-track,
.boss-track {
  border-color: rgba(53, 234, 255, 0.22);
  border-radius: 1px;
  background: #010a0e;
}

.progress-fill,
.meter-fill {
  border-radius: 0;
  background: linear-gradient(90deg, #6c1730, #11b8d1 58%, #baf8ff);
  box-shadow: 0 0 10px rgba(53, 234, 255, 0.48);
}

.title-copy h1 {
  color: #d9fcff;
  letter-spacing: -0.025em;
  line-height: 0.86;
  text-shadow: 4px 4px 0 #00303a, 0 0 22px rgba(53, 234, 255, 0.14);
}

.title-copy h1 span,
.title-facts dd,
.title-facts dt {
  color: var(--cyan);
}

.title-lede,
.screen-header p:not(.eyebrow) {
  color: #80aeb6;
}

.title-facts div {
  border-color: rgba(53, 234, 255, 0.18);
}

.character-card,
.store-card,
.store-item,
.admin-command-card,
.admin-level-select,
.admin-world-group,
.admin-level-world,
.control-group,
.control-tip,
.settings-list,
.result-stats {
  border-color: rgba(53, 234, 255, 0.22);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(53, 234, 255, 0.035), transparent 42%),
    rgba(2, 12, 16, 0.93);
  box-shadow: 4px 4px 0 rgba(0, 9, 13, 0.9);
}

.character-card:hover,
.character-card.is-selected,
.store-card:hover,
.store-item:hover {
  border-color: rgba(53, 234, 255, 0.7);
  box-shadow: 5px 5px 0 rgba(0, 9, 13, 0.92), 0 0 15px rgba(53, 234, 255, 0.12);
}

.character-card.is-selected::before,
.character-card.selected::before {
  color: #001116;
  background: var(--cyan);
}

.keycap {
  border-color: rgba(53, 234, 255, 0.32);
  border-bottom-color: rgba(53, 234, 255, 0.58);
  color: #b9f8ff;
  background: #04171d;
}

.map-screen {
  background:
    linear-gradient(90deg, rgba(1, 8, 12, 0.92), transparent 27%, transparent 64%, rgba(1, 8, 12, 0.84)),
    linear-gradient(180deg, rgba(2, 12, 17, 0.82), transparent 24%, transparent 70%, rgba(2, 9, 13, 0.92));
}

.map-guide-line {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 0.42rem, transparent 0.42rem 0.72rem);
  filter: drop-shadow(2px 2px 0 #001116) drop-shadow(0 0 5px rgba(53, 234, 255, 0.55));
}

.map-node {
  border-color: rgba(53, 234, 255, 0.72);
  border-radius: 2px;
  color: #bffaff;
  background: #06171c;
  box-shadow: 4px 4px 0 #001015, 0 0 12px rgba(53, 234, 255, 0.12);
}

.map-node.is-cleared::after {
  border-color: #001015;
  border-radius: 1px;
  color: #00140c;
  background: var(--green);
}

.map-node.is-current {
  color: #001014;
  background: var(--cyan);
  box-shadow: 4px 4px 0 #001015, 0 0 18px rgba(53, 234, 255, 0.58);
}

.map-node.is-locked {
  border-color: rgba(103, 137, 144, 0.25);
  color: #526d73;
  background: #071014;
}

.course-dossier,
.crossroads-dock button {
  border-color: rgba(53, 234, 255, 0.36);
  border-radius: 2px;
  background: rgba(2, 11, 15, 0.96);
  background-size: auto;
  box-shadow: 5px 5px 0 rgba(0, 7, 11, 0.9);
  backdrop-filter: blur(0.45rem);
}

.dossier-number {
  border-color: #9af6ff;
  border-radius: 1px;
  color: #001015;
  background: linear-gradient(180deg, #aaf8ff, #20bdd4);
  box-shadow: 3px 3px 0 #001015;
}

.crossroads-dock button:hover {
  border-color: var(--cyan);
  background: #06242c;
  box-shadow: 6px 6px 0 #001015, 0 0 12px rgba(53, 234, 255, 0.12);
}

.dock-icon,
.store-currency,
.store-price,
.price-tag {
  border-color: rgba(53, 234, 255, 0.44);
  border-radius: 2px;
  color: #bffaff;
  background: #04171d;
}

.store-grid,
.admin-level-grid {
  scrollbar-color: rgba(53, 234, 255, 0.52) #020b0f;
}

.store-preview,
.store-card img,
.store-card canvas,
.store-item img,
.store-item canvas,
.record-art {
  border-radius: 1px;
}

.store-card.owned,
.store-item.owned,
.store-card.is-owned,
.store-item.is-owned {
  border-color: rgba(53, 234, 255, 0.58);
}

.store-legend {
  color: #5f8b94;
}

.legend-dot {
  border-radius: 1px;
}

.legend-dot.owned,
.legend-dot.available {
  background: var(--cyan);
}

.admin-screen {
  --admin-burgundy: #741a33;
}

.admin-toggle {
  border-color: rgba(139, 32, 57, 0.74);
  border-radius: 2px;
  color: #ffd7e0;
  background: linear-gradient(180deg, #5b1027, #290611);
  box-shadow: 3px 3px 0 #110105;
}

.admin-toggle:hover {
  border-color: var(--cyan);
}

.admin-toggle-mark {
  border-color: rgba(53, 234, 255, 0.36);
  border-radius: 1px;
  background: #030d11;
  box-shadow: 2px 2px 0 #000;
}

.admin-toggle-mark i {
  border-radius: 0;
  background: #47717a;
}

.admin-toggle[aria-checked="true"],
.admin-toggle[aria-pressed="true"],
.admin-toggle.is-active {
  border-color: var(--cyan);
  background: linear-gradient(180deg, #075e70, #032c36);
  box-shadow: 3px 3px 0 #001015, 0 0 14px rgba(53, 234, 255, 0.14) inset;
}

.admin-toggle[aria-checked="true"] .admin-toggle-mark i,
.admin-toggle[aria-pressed="true"] .admin-toggle-mark i,
.admin-toggle.is-active .admin-toggle-mark i,
#adminStatus.is-active,
.admin-screen.is-active #adminStatus {
  color: var(--cyan);
  background: var(--cyan);
  text-shadow: 0 0 8px rgba(53, 234, 255, 0.58);
}

#adminStatus.is-active,
.admin-screen.is-active #adminStatus {
  background: transparent;
}

.admin-wallet > div {
  border-color: rgba(53, 234, 255, 0.24);
  border-radius: 1px;
  background: #03141a;
}

.admin-level-grid button,
.admin-course-button {
  border-color: rgba(53, 234, 255, 0.25);
  border-radius: 1px;
  color: #a8e4eb;
  background: #04151a;
  box-shadow: 2px 2px 0 #001015;
}

.admin-level-grid button:hover,
.admin-course-button:hover {
  border-color: var(--cyan);
  background: #07303a;
}

.hud-panel,
.special-cluster,
.boss-hud {
  border-color: rgba(53, 234, 255, 0.42);
  border-radius: 2px;
  background: rgba(1, 10, 14, 0.9);
  background-size: auto;
  box-shadow: 4px 4px 0 rgba(0, 8, 11, 0.88), 0 0 12px rgba(53, 234, 255, 0.08);
  backdrop-filter: blur(0.35rem);
}

.boss-hud {
  border-color: rgba(255, 95, 111, 0.46);
}

.health-pip {
  border-radius: 0;
}

.currency-readout > span {
  border-radius: 1px;
}

.currency-yin > span,
.currency-lives > span {
  border-color: rgba(53, 234, 255, 0.64);
  color: #bffaff;
  background: rgba(5, 72, 85, 0.52);
  box-shadow: 2px 2px 0 #001015, 0 0 8px rgba(53, 234, 255, 0.2);
}

.currency-red > span {
  border-radius: 1px;
}

.pause-button span {
  border-radius: 0;
  background: #bffaff;
}

.special-cluster {
  border-color: rgba(139, 32, 57, 0.72);
}

.special-orb {
  border-color: rgba(53, 234, 255, 0.68);
  border-radius: 1px;
  color: #bffaff;
  background: linear-gradient(135deg, #721a33, #260711);
  box-shadow: 3px 3px 0 #100105, 0 0 12px rgba(53, 234, 255, 0.18);
}

.special-orb:hover,
.special-orb:focus-visible {
  border-color: #c7faff;
  box-shadow: 4px 4px 0 #100105, 0 0 16px rgba(53, 234, 255, 0.4);
}

.relic-deploy {
  border-radius: 1px;
  background:
    radial-gradient(circle at 50% 42%, rgba(225, 252, 255, 0.85) 0 6%, transparent 7%),
    linear-gradient(135deg, #052e3a, #6d1730);
}

.relic-deploy > b {
  border-radius: 0;
}

.special-heading,
.boss-heading {
  color: #7fb4bd;
}

.special-heading strong,
.combo-label,
.result-stats strong {
  color: var(--cyan);
  text-shadow: 2px 2px 0 #001319, 0 0 8px rgba(53, 234, 255, 0.35);
}

.special-track .meter-fill {
  background: linear-gradient(90deg, #70182f, #13bfd6 58%, #c7faff);
  box-shadow: 0 0 8px rgba(53, 234, 255, 0.52);
}

.modal-screen {
  background: rgba(0, 5, 8, 0.82);
  backdrop-filter: blur(0.3rem) saturate(0.8);
}

.modal-card {
  border-color: rgba(53, 234, 255, 0.52);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(3, 18, 23, 0.99), rgba(2, 7, 10, 0.99));
  background-size: auto;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.82), 0 0 24px rgba(53, 234, 255, 0.12);
}

.modal-card::before {
  border-color: rgba(53, 234, 255, 0.12);
  border-radius: 0;
}

.modal-ornament {
  border-color: rgba(53, 234, 255, 0.72);
  color: var(--cyan);
  background: #04161c;
  box-shadow: 3px 3px 0 #001015;
}

.settings-list input[type="range"] {
  border-radius: 0;
  background: linear-gradient(90deg, #21cadf 0 80%, #3a0b18 80%);
}

.settings-list input[type="range"]::-webkit-slider-thumb,
.settings-list input[type="range"]::-moz-range-thumb {
  border-color: #00171d;
  border-radius: 1px;
  background: var(--cyan);
  box-shadow: 2px 2px 0 #001015, 0 0 8px rgba(53, 234, 255, 0.35);
}

.toggle-row input {
  border-color: rgba(53, 234, 255, 0.32);
  border-radius: 1px;
  background: #041217;
}

.toggle-row input::after {
  border-radius: 0;
  background: #527a82;
}

.toggle-row input:checked {
  background: #6b1730;
}

.toggle-row input:checked::after {
  background: var(--cyan);
}

.result-crown {
  color: var(--cyan);
  background: radial-gradient(circle, rgba(53, 234, 255, 0.16), transparent 62%);
  box-shadow: 0 0 20px rgba(53, 234, 255, 0.16);
}

.result-crown::before,
.result-crown::after {
  border-color: rgba(139, 32, 57, 0.68);
  border-radius: 0;
}

.result-crown::after {
  border-color: rgba(53, 234, 255, 0.22);
}

.control-tip {
  border-color: rgba(139, 32, 57, 0.58);
  background: #12060b;
  background-size: auto;
}

.control-tip > span {
  border-color: rgba(53, 234, 255, 0.48);
  border-radius: 1px;
  color: var(--cyan);
  background: #04161c;
  box-shadow: 3px 3px 0 #001015;
}

.touch-button {
  border-color: rgba(53, 234, 255, 0.42);
  border-radius: 2px;
  color: #c8faff;
  background: rgba(2, 15, 20, 0.82);
  box-shadow: 3px 3px 0 rgba(0, 6, 9, 0.9);
}

.touch-button:active,
.touch-button.is-active {
  border-color: var(--cyan);
  background: #6d1730;
  box-shadow: 2px 2px 0 #100105, 0 0 12px rgba(53, 234, 255, 0.24);
}

.touch-interact,
.touch-light,
.touch-jump,
.touch-relic {
  border-color: rgba(53, 234, 255, 0.62);
  color: #c8faff;
  background: rgba(3, 62, 74, 0.8);
}

.touch-special {
  border-color: rgba(53, 234, 255, 0.62);
  color: #c8faff;
  background: rgba(105, 19, 47, 0.82);
}

.toast {
  border-color: rgba(53, 234, 255, 0.6);
  border-radius: 2px;
  color: #c8faff;
  background: #031218;
  box-shadow: 4px 4px 0 #001015, 0 0 16px rgba(53, 234, 255, 0.16);
  backdrop-filter: none;
}

.toast-mark,
.loading-glyph {
  color: var(--cyan);
}

@keyframes current-node {
  0%, 100% { box-shadow: 4px 4px 0 #001015, 0 0 10px rgba(53, 234, 255, 0.42); }
  50% { box-shadow: 4px 4px 0 #001015, 0 0 22px rgba(53, 234, 255, 0.82); }
}

@keyframes sigil-breathe {
  0%, 100% { box-shadow: 5px 5px 0 #001016, 0 0 14px rgba(53, 234, 255, 0.14); transform: scale(0.99); }
  50% { box-shadow: 5px 5px 0 #001016, 0 0 26px rgba(53, 234, 255, 0.32); transform: scale(1.015); }
}

/* Start gate, map-camera HUD safety, and creator tools */
.start-screen,
.parallax-screen,
.cutscene-screen {
  background:
    radial-gradient(circle at 76% 24%, rgba(139, 32, 57, 0.35), transparent 34%),
    linear-gradient(145deg, #061014, #010507 70%, #0b030a);
  background-size: auto, auto;
}

.parallax-screen {
  padding: clamp(1rem, 1.7cqw, 1.7rem) clamp(1.1rem, 2.2cqw, 2.2rem) clamp(0.8rem, 1.4cqw, 1.4rem);
}

.parallax-screen .screen-header {
  min-height: 3.25rem;
  margin-bottom: 0.65rem;
}

.parallax-screen .screen-header h2 {
  font-size: clamp(1.45rem, 2.25cqw, 2.25rem);
}

.start-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  opacity: 0;
  background: none;
}

.start-lockup {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(46rem, 82%);
  margin: auto;
  text-align: center;
  align-items: center;
  flex-direction: column;
}

.start-lockup h1 {
  margin: 0.5rem 0 1.2rem;
  color: #dcfbff;
  font-family: var(--display);
  font-size: clamp(3.5rem, 8.6cqw, 7.4rem);
  line-height: 0.78;
  letter-spacing: -0.035em;
  text-shadow: 5px 5px 0 #00303a, 0 0 28px rgba(53, 234, 255, 0.25);
}

.start-lockup h1 em {
  color: var(--cyan);
  font-size: 0.42em;
}

.start-premise {
  max-width: 40rem;
  color: #9bc8cf;
  font-size: clamp(0.72rem, 1.08cqw, 1.02rem);
  line-height: 1.65;
}

.press-start {
  margin-top: 2rem;
  padding: 0.85rem 2rem;
  border: 1px solid var(--cyan);
  border-radius: 2px;
  color: #c7faff;
  background: rgba(2, 14, 19, 0.9);
  box-shadow: 4px 4px 0 #001015, 0 0 18px rgba(53, 234, 255, 0.24);
  font-family: var(--display);
  font-size: clamp(0.82rem, 1.35cqw, 1.28rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  animation: press-start-flash 0.85s steps(2, end) infinite;
}

@keyframes press-start-flash {
  0%, 42% { opacity: 1; color: #e5fdff; }
  43%, 100% { opacity: 0.3; color: var(--cyan); }
}

.button-admin-entry.is-active {
  border-color: rgba(53, 234, 255, 0.78);
  color: #d7fcff;
  background: linear-gradient(180deg, #075e70, #032c36);
  box-shadow: 3px 3px 0 #001015, 0 0 14px rgba(53, 234, 255, 0.18) inset;
}

.button-admin-entry.is-active .admin-entry-state {
  color: #c7faff;
  text-shadow: 0 0 8px rgba(53, 234, 255, 0.6);
}

.upgrade-card .record-art {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 35%),
    conic-gradient(from 35deg, #04171d, var(--upgrade-accent, #35eaff), #66162e, #04171d);
}

.upgrade-card .record-art::after {
  background: color-mix(in srgb, var(--upgrade-accent, #35eaff) 46%, #190711);
}

.map-topbar,
.course-dossier,
.crossroads-dock {
  z-index: 6;
}

.course-dossier {
  background: rgba(1, 10, 14, 0.94);
}

/* Celestial Ring: the physical map nodes are the Crossroads navigation. */
.map-screen.is-lobby .course-dossier {
  top: clamp(5.2rem, 8.5cqw, 8.5rem);
  width: clamp(14rem, 21cqw, 21rem);
  padding: clamp(0.8rem, 1.25cqw, 1.25rem);
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
}

.map-screen.is-lobby .course-dossier h3 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.05rem, 1.55cqw, 1.55rem);
}

.map-screen.is-lobby .map-details > p {
  margin: 0 0 0.45rem;
  font-size: clamp(0.52rem, 0.66cqw, 0.66rem);
}

.map-screen.is-lobby .map-details li {
  padding: 0.3rem 0;
}

.map-screen.is-lobby.is-neutral-node .course-dossier {
  opacity: 0;
  pointer-events: none;
  transform: translateX(1rem);
}

/* World maps provide one route to the playable space-rock Market station. */
.map-screen.is-lobby .crossroads-dock,
.map-screen.is-market .crossroads-dock {
  display: none;
}

.map-screen:not(.is-lobby):not(.is-market) .crossroads-dock {
  display: flex;
}

.map-screen.is-market .course-dossier {
  top: clamp(4.5rem, 6.5cqw, 6.5rem);
  right: clamp(0.65rem, 1.1cqw, 1.1rem);
  width: clamp(12rem, 16cqw, 16rem);
  padding: clamp(0.65rem, 0.85cqw, 0.85rem);
  border-color: rgba(104, 100, 94, 0.58);
  box-shadow: 5px 5px 0 rgba(0, 3, 5, 0.9);
}

.map-screen.is-market .course-dossier > .eyebrow,
.map-screen.is-market .dossier-number {
  display: none;
}

.map-screen.is-market .course-dossier h3 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.05rem, 1.55cqw, 1.55rem);
}

.map-screen.is-market .map-details > p {
  display: none;
}

.map-screen.is-market .map-details ul {
  display: none;
}

.parallax-editor-layout {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(15rem, 0.52fr) minmax(0, 1.7fr);
  gap: 0.85rem;
}

.parallax-editor-controls,
.parallax-layer-panel {
  min-height: 0;
  padding: 1rem;
  border: 1px solid rgba(53, 234, 255, 0.28);
  border-radius: 2px;
  background: rgba(2, 12, 16, 0.94);
  box-shadow: 4px 4px 0 rgba(0, 8, 12, 0.9);
}

.parallax-editor-controls {
  display: flex;
  overflow: auto;
  flex-direction: column;
  gap: 0.75rem;
}

.parallax-editor-controls label,
.select-row {
  display: flex;
  color: #99d5dd;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.parallax-editor-controls select,
.select-row select,
.cheat-code-panel input,
.parallax-layer-row input[type="text"],
.parallax-layer-row input[type="number"] {
  min-width: 0;
  border: 1px solid rgba(53, 234, 255, 0.36);
  border-radius: 1px;
  color: #d8fcff;
  background: #03151a;
  font: inherit;
}

.parallax-editor-controls select,
.select-row select {
  padding: 0.55rem 0.65rem;
}

.select-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.select-row small {
  color: #688f97;
  font-size: 0.5rem;
}

.parallax-editor-actions {
  display: grid;
  margin-top: 0.35rem;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.parallax-export-stack {
  min-height: 2.55rem;
  grid-column: 1 / -1;
  border-color: rgba(137, 246, 255, 0.88);
  background: linear-gradient(180deg, #08758a, #03434f);
  box-shadow: 3px 3px 0 #001015, 0 0 16px rgba(53, 234, 255, 0.16) inset;
}

.parallax-ready-download {
  min-height: 2.55rem;
  grid-column: 1 / -1;
  border-color: #a9fbff;
  color: #e5feff;
  background: linear-gradient(180deg, #0a8aa0, #04505d);
  box-shadow: 3px 3px 0 #001015, 0 0 18px rgba(53, 234, 255, 0.26);
}

.file-button {
  position: relative;
  justify-content: center;
  cursor: pointer;
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.parallax-editor-note {
  margin-top: auto;
  color: #6899a2;
  font-size: 0.58rem;
  line-height: 1.55;
}

.parallax-save-state {
  display: flex;
  margin-top: auto;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(53, 234, 255, 0.22);
  color: #a9e7ee;
  background: rgba(0, 30, 37, 0.72);
  font-size: 0.55rem;
  line-height: 1.45;
  align-items: center;
  gap: 0.55rem;
}

.parallax-save-state > span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(53, 234, 255, 0.75);
  flex: none;
}

.parallax-save-state[data-state="inherited"] > span {
  background: #d6a55f;
  box-shadow: 0 0 10px rgba(214, 165, 95, 0.65);
}

.parallax-save-state[data-state="packing"] > span {
  animation: press-start-flash 0.65s steps(2, end) infinite;
}

.parallax-save-state[data-state="error"] > span {
  background: #ff5c7b;
  box-shadow: 0 0 10px rgba(255, 92, 123, 0.72);
}

.parallax-save-state + .parallax-editor-note {
  margin-top: 0;
}

.parallax-layer-panel {
  display: flex;
  flex-direction: column;
}

.parallax-layer-heading {
  display: flex;
  margin-bottom: 0.65rem;
  align-items: end;
  justify-content: space-between;
}

.parallax-layer-heading h3 {
  margin: 0;
}

.parallax-layer-heading span {
  color: #6999a2;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.parallax-preview-shell {
  position: relative;
  width: min(100%, clamp(22rem, 42cqw, 34rem));
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin-bottom: 0.75rem;
  align-self: center;
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(53, 234, 255, 0.36);
  border-radius: 2px;
  background: #020b0f;
  box-shadow: 3px 3px 0 rgba(0, 8, 12, 0.9), 0 0 18px rgba(53, 234, 255, 0.08) inset;
}

.parallax-preview-shell canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  image-rendering: pixelated;
}

.parallax-preview-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%);
  pointer-events: none;
}

.parallax-preview-guide {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  opacity: 0.42;
  background: repeating-linear-gradient(90deg, rgba(181, 250, 255, 0.72) 0 4px, transparent 4px 10px);
  filter: drop-shadow(0 0 3px rgba(53, 234, 255, 0.65));
}

.parallax-preview-guide.guide-quarter { top: 25%; }
.parallax-preview-guide.guide-center { top: 50%; opacity: 0.64; }
.parallax-preview-guide.guide-three-quarter { top: 75%; }

.parallax-preview-label {
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #9ef8ff;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 2px 2px 0 #001015, 0 0 8px rgba(53, 234, 255, 0.36);
}

.parallax-preview-label b {
  min-width: 0;
  color: #dffeff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parallax-preview-controls {
  display: grid;
  margin: -0.1rem 0 0.75rem;
  padding: 0.42rem;
  border: 1px solid rgba(53, 234, 255, 0.18);
  background: rgba(1, 15, 20, 0.92);
  grid-template-columns: auto auto auto minmax(5rem, 0.65fr) minmax(7rem, 1fr);
  gap: 0.35rem;
  align-items: end;
}

.parallax-preview-controls label {
  display: grid;
  min-width: 0;
  color: #79aeb6;
  font-size: 0.49rem;
  letter-spacing: 0.06em;
  gap: 0.25rem;
  text-transform: uppercase;
}

.parallax-preview-controls label > span {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.parallax-preview-controls output { color: #c7faff; }
.parallax-preview-controls input[type="range"] { width: 100%; accent-color: var(--cyan); }
.parallax-scrub-control { grid-column: auto; }

.parallax-layer-list {
  min-height: 0;
  overflow: auto;
  flex: 1;
  scrollbar-color: rgba(53, 234, 255, 0.52) #020b0f;
}

.parallax-layer-row {
  display: grid;
  padding: 0.65rem;
  border-bottom: 1px solid rgba(53, 234, 255, 0.15);
  grid-template-columns: 5.5rem minmax(8rem, 1.35fr) repeat(6, minmax(3.6rem, 0.45fr)) 3.8rem;
  gap: 0.55rem;
  align-items: end;
}

.parallax-layer-row.is-solo {
  background: rgba(53, 234, 255, 0.075);
  box-shadow: 3px 0 0 var(--cyan) inset;
}

.parallax-layer-thumb {
  position: relative;
  min-height: 4rem;
  overflow: hidden;
  border: 1px solid rgba(53, 234, 255, 0.26);
  background: #020b0f;
  background-size: auto;
  grid-row: 1 / span 2;
  align-self: stretch;
}

.parallax-layer-thumb img {
  width: 100%;
  height: 100%;
  min-height: 4rem;
  object-fit: cover;
  image-rendering: pixelated;
}

.parallax-layer-thumb span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2rem 0.3rem;
  color: #d9fdff;
  background: rgba(0, 9, 12, 0.78);
  font-size: 0.45rem;
  text-align: center;
  text-transform: uppercase;
}

.parallax-layer-thumb.is-loading::after,
.parallax-layer-thumb.is-missing::after {
  position: absolute;
  inset: 0;
  display: grid;
  color: #8bc8cf;
  background: rgba(1, 12, 16, 0.9);
  content: "Loading image";
  font-size: 0.43rem;
  place-items: center;
  text-transform: uppercase;
}

.parallax-layer-thumb.is-missing::after {
  color: #ff9aae;
  content: "Image not found";
}

.parallax-layer-row label {
  display: grid;
  color: #6f9ea6;
  font-size: 0.5rem;
  gap: 0.25rem;
  text-transform: uppercase;
}

.parallax-layer-row input {
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
}

.parallax-layer-row .layer-file {
  display: none;
}

.layer-visible {
  display: flex !important;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
}

.layer-visible input { width: auto; min-height: 0; accent-color: var(--cyan); }

.layer-row-actions {
  display: flex;
  min-width: 0;
  grid-column: 2 / -1;
  gap: 0.35rem;
  align-items: center;
}

.layer-row-actions .button {
  min-height: 1.75rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.48rem;
}

.pause-card {
  width: min(64rem, 92%);
  max-height: 92%;
  overflow: auto;
}

.settings-list {
  min-width: 0;
}

.pause-now-playing {
  display: grid;
  margin-bottom: 0.75rem;
  padding: 0.65rem;
  border: 1px solid rgba(53, 234, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(53, 234, 255, 0.07), rgba(128, 18, 44, 0.08)),
    #020c10;
  box-shadow: 3px 3px 0 #001015;
  grid-template-columns: 3.7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.pause-now-record {
  width: 3.7rem;
  height: 3.7rem;
  object-fit: contain;
  image-rendering: auto;
  filter: grayscale(0.75) brightness(0.6);
}

.pause-now-record.is-playing {
  filter: drop-shadow(0 0 0.5rem rgba(53, 234, 255, 0.35));
  animation: record-vinyl-spin 2.8s linear infinite;
}

.pause-now-copy {
  min-width: 0;
}

.pause-now-copy p {
  margin: 0 0 0.18rem;
  color: var(--cyan);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pause-now-copy h3 {
  margin: 0;
  overflow: hidden;
  color: #e0fbff;
  font-family: var(--display);
  font-size: clamp(0.78rem, 1.05cqw, 1.05rem);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pause-now-copy small {
  display: block;
  margin-top: 0.2rem;
  overflow: hidden;
  color: #6e9ba3;
  font-size: 0.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pause-now-controls {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.pause-now-controls .button {
  width: 100%;
  min-height: 1.85rem;
}

.cheat-code-panel {
  display: grid;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(53, 234, 255, 0.18);
  gap: 0.45rem;
}

.cheat-code-panel > label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cheat-code-panel small {
  color: #688f97;
  font-size: 0.5rem;
}

.cheat-code-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.cheat-code-panel input {
  padding: 0.55rem;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  text-transform: uppercase;
}

html[data-device-layout="phone"] .cheat-code-panel input,
html[data-device-layout="tablet"] .cheat-code-panel input {
  font-size: 16px;
}

.cheat-code-panel p {
  min-height: 0.8rem;
  margin: 0;
  color: var(--cyan);
  font-size: 0.54rem;
}

.cutscene-screen {
  z-index: 35;
  overflow: hidden;
  padding: 2rem;
  background: #000;
}

.cutscene-frame {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(62rem, 92%);
  height: min(32rem, 86%);
  margin: auto;
  border: 1px solid rgba(53, 234, 255, 0.55);
  background: #010609;
  box-shadow: 8px 8px 0 #001015, 0 0 26px rgba(53, 234, 255, 0.16);
  grid-template-rows: minmax(0, 1fr) auto;
}

.cutscene-visual {
  display: grid;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 70% 38%, rgba(139, 32, 57, 0.5), transparent 22%), linear-gradient(145deg, #071720, #020609 58%, #190711);
  background-position: center;
  background-size: cover;
  place-items: center;
}

.cutscene-sprite-canvas,
.cutscene-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cutscene-sprite-canvas {
  display: block;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #000;
  image-rendering: pixelated;
}

.cutscene-sprite-canvas[hidden] {
  display: none;
}

.cutscene-screen.is-sprite-cinematic {
  padding: 0;
  background: #000;
}

.cutscene-screen.is-sprite-cinematic .cutscene-frame {
  position: absolute;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  background: #000;
  box-shadow: none;
  grid-template-rows: 1fr;
  inset: 0;
}

.cutscene-screen.is-sprite-cinematic .cutscene-visual {
  width: 100%;
  height: 100%;
  background: #000;
}

.cutscene-screen.is-sprite-cinematic .cutscene-sprite-canvas {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: fill;
}

.cutscene-screen.is-sprite-cinematic .cutscene-caption {
  display: none;
}

.cutscene-fade {
  position: absolute;
  z-index: 10;
  background: #000;
  opacity: 1;
  pointer-events: none;
  inset: 0;
}

.cutscene-caption {
  padding: 1rem 1.2rem;
  border-top: 1px solid rgba(53, 234, 255, 0.32);
}

.cutscene-caption h2,
.cutscene-caption p {
  margin-top: 0;
}

.cutscene-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.cutscene-skip-hold {
  position: absolute;
  z-index: 12;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  width: min(15rem, calc(100% - 2rem));
  gap: 0.42rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(53, 234, 255, 0.62);
  background: rgba(0, 7, 12, 0.88);
  color: #dffcff;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(0, 32, 43, 0.9), 0 0 18px rgba(53, 234, 255, 0.16);
}

.cutscene-skip-hold kbd {
  color: var(--cyan);
}

.cutscene-skip-track {
  display: block;
  height: 0.34rem;
  overflow: hidden;
  border: 1px solid rgba(53, 234, 255, 0.55);
  background: #001016;
}

.cutscene-skip-progress {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #167f9e, var(--cyan), #c9fbff);
  box-shadow: 0 0 12px rgba(53, 234, 255, 0.85);
  transition: width 60ms linear;
}

.cutscene-skip-hold.is-holding {
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 rgba(0, 32, 43, 0.9), 0 0 26px rgba(53, 234, 255, 0.35);
}

.disco-screen {
  pointer-events: none;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 50% 38%, rgba(255, 65, 190, 0.13), rgba(0, 4, 12, 0.16) 55%, rgba(0, 3, 9, 0.72));
}

.disco-copy {
  pointer-events: auto;
  width: min(46rem, calc(100% - 2rem));
  padding: 1rem 1.4rem 1.15rem;
  text-align: center;
  border: 2px solid var(--cyan);
  background: rgba(0, 7, 14, 0.9);
  box-shadow: 6px 6px 0 #001c27, 0 0 34px rgba(53, 234, 255, 0.28), inset 0 0 24px rgba(190, 35, 255, 0.12);
}

.disco-copy h2 {
  margin: 0.15rem 0 0.35rem;
  color: #fff;
  text-shadow: 3px 3px 0 #5d0a5f, 0 0 18px #ff47d4;
}

.disco-copy p:not(.eyebrow) {
  margin: 0 0 0.75rem;
  color: #dffaff;
}

/* Post-ending title and permanent journey completion. */
.ending-title-screen {
  background: #000;
  align-items: center;
  justify-content: center;
}

.ending-title-screen::after,
.ending-thanks-screen::after { display: none; }

.ending-title-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ending-logo-rise { width: min(96%, 1040px); }
.ending-logo-rise .ending-logo {
  width: 100%;
  max-width: none;
  margin: 0;
  animation: none;
}

.ending-title-lockup .ending-subtitle {
  z-index: 2;
  width: 94%;
  margin: -9cqw 0 0;
  color: #d9faff;
  font-size: clamp(18px, 3.7cqw, 48px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.ending-title-continue {
  position: absolute;
  bottom: 3%;
  left: 3%;
  font-size: clamp(10px, 1cqw, 14px);
}

.ending-thanks-screen {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 3.1cqw, 42px) clamp(18px, 5cqw, 68px);
  background: radial-gradient(ellipse at 50% 0%, #05232e 0%, #01080c 48%, #000 85%);
  scrollbar-width: thin;
  scrollbar-color: #166579 #02090d;
}

.ending-thanks-content { width: min(100%, 930px); margin: 0 auto; }
.ending-kicker {
  margin-bottom: clamp(8px, 1.2cqw, 16px);
  color: #7fcedb;
  font-size: clamp(9px, 1cqw, 13px);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ending-thanks-content h2 {
  margin-bottom: clamp(12px, 1.6cqw, 22px);
  color: #effeff;
  font-size: clamp(23px, 3.5cqw, 44px);
  line-height: 1.3;
  outline: none;
}

.ending-future {
  max-width: 74ch;
  color: #c0dce2;
  font-size: clamp(11px, 1.3cqw, 17px);
  line-height: 1.65;
  margin-bottom: clamp(16px, 2cqw, 27px);
}

.ending-progress-heading { display: flex; align-items: center; gap: clamp(15px, 2cqw, 28px); }
.ending-progress-heading strong {
  color: #69edff;
  font-size: clamp(40px, 6cqw, 74px);
  font-weight: 400;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.ending-progress-heading span { display: block; color: #eaffff; font-size: clamp(11px, 1.5cqw, 18px); }
.ending-progress-heading small { display: block; margin-top: 8px; color: #9bbec7; font-size: clamp(9px, 0.9cqw, 12px); line-height: 1.5; }
.ending-completion-meter { height: 7px; margin: 13px 0 18px; background: #17343b; overflow: hidden; }
.ending-completion-meter span { display: block; width: 100%; height: 100%; background: #57e6ff; transform-origin: left; }
.ending-completion-breakdown { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.ending-completion-breakdown div { border-left: 1px solid #23535e; padding-left: 12px; }
.ending-completion-breakdown dt { color: #9fc2ca; font-size: clamp(9px, 1cqw, 12px); line-height: 1.5; }
.ending-completion-breakdown dd { margin: 7px 0 0; color: #e8fdff; font-size: clamp(12px, 1.5cqw, 18px); font-variant-numeric: tabular-nums; }
.ending-completion-message { margin-bottom: 10px; color: #e8fdff; font-size: clamp(11px, 1.3cqw, 16px); line-height: 1.65; }
.ending-completion-note { margin-bottom: 20px; color: #86a9b1; font-size: clamp(9px, 0.9cqw, 11px); line-height: 1.65; }
.ending-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ending-actions .button { min-height: 42px; padding: 12px 16px; font-size: clamp(10px, 1.1cqw, 14px); }
.ending-thanks-content .ending-signoff { margin: 18px 0 0; color: #65939e; font-size: clamp(9px, 0.9cqw, 11px); letter-spacing: 0.12em; text-transform: uppercase; }

@container azrael-stage (max-width: 600px) {
  .ending-thanks-screen { padding: 20px 18px 65px; }
  .ending-completion-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .ending-completion-breakdown div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .ending-completion-breakdown dd { margin: 0; white-space: nowrap; }
  .ending-actions .button { flex: 1 1 130px; }
}

/* ENNiDi: Ashes of Azrael title lockup */
.ennidi-title-logo {
  position: relative;
  z-index: 1;
  display: block;
  height: auto;
  aspect-ratio: 1830 / 1080;
  background: transparent;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  animation: ennidi-title-float 4.8s ease-in-out infinite;
  transform-origin: 50% 58%;
}

.boot-lockup .ennidi-title-logo-boot {
  width: clamp(24rem, 52cqw, 46rem);
  max-width: 100%;
  margin: -4.1rem auto -3.6rem;
}

.start-lockup .ennidi-title-logo-start {
  width: clamp(29rem, 63cqw, 52rem);
  max-width: 100%;
  margin: -5rem auto -4.1rem;
}

.title-copy .ennidi-title-logo-menu {
  width: clamp(20rem, 34cqw, 31rem);
  max-width: 88%;
  margin: -3rem 0 -2.2rem;
}

.boot-lockup h1,
.start-lockup h1,
.title-copy h1 {
  color: #e8fdff;
}

.boot-lockup h1,
.start-lockup h1 {
  line-height: 0.9;
}

.boot-lockup h1 {
  font-size: clamp(2.15rem, 4.5cqw, 4.5rem);
}

.start-lockup h1 {
  margin-top: 0;
  font-size: clamp(2.8rem, 6.5cqw, 5.7rem);
}

.title-copy h1 {
  font-size: clamp(2.9rem, 5.8cqw, 5.8rem);
}

@container azrael-stage (max-width: 850px) {
  .title-copy .ennidi-title-logo-menu {
    width: clamp(17rem, 44cqw, 25rem);
    max-width: 92%;
  }
}

@media (max-width: 800px) {
  .parallax-editor-layout { grid-template-columns: 1fr; overflow: auto; }
  .parallax-layer-row { grid-template-columns: 4.5rem minmax(7rem, 1fr) repeat(2, minmax(3.8rem, 0.55fr)); }
  .parallax-layer-row .layer-visible { grid-column: auto; }
  .parallax-layer-row .layer-row-actions { grid-column: 2 / -1; flex-wrap: wrap; }
  .parallax-preview-controls { grid-template-columns: repeat(3, 1fr); }
  .parallax-speed-control,
  .parallax-scrub-control { grid-column: 1 / -1; }
  .pause-card { width: 96%; }
}

/* Device-aware console layouts */
.device-layout-screen,
.install-game-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow: auto;
  background:
    radial-gradient(circle at 50% 35%, rgba(53, 234, 255, 0.11), transparent 36%),
    rgba(0, 3, 7, 0.96);
  place-items: center;
}

.device-layout-card {
  position: relative;
  width: min(58rem, 100%);
  padding: clamp(1.25rem, 3vw, 2.4rem);
  overflow: hidden;
  border: 2px solid #35eaff;
  color: #dffcff;
  background:
    linear-gradient(rgba(0, 8, 12, 0.83), rgba(0, 5, 9, 0.92)),
    url("assets/ui/ennidi-console-texture.jpg") center / 31rem repeat;
  box-shadow:
    8px 8px 0 #00141b,
    0 0 0 5px #020508,
    0 0 3rem rgba(53, 234, 255, 0.2);
}

.device-layout-card::before,
.device-layout-card::after {
  position: absolute;
  width: 4.5rem;
  height: 0.55rem;
  content: "";
  background: repeating-linear-gradient(90deg, #8b2039 0 0.55rem, #280913 0.55rem 0.82rem);
  box-shadow: 0 0 0.75rem rgba(139, 32, 57, 0.52);
}

.device-layout-card::before { top: 0.65rem; right: 0.7rem; }
.device-layout-card::after { bottom: 0.65rem; left: 0.7rem; }

.device-layout-brand {
  display: flex;
  margin-bottom: 1.25rem;
  color: #35eaff;
  align-items: baseline;
  gap: 0.65rem;
}

.device-layout-brand b {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-shadow: 2px 2px 0 #061c24, 0 0 0.8rem rgba(53, 234, 255, 0.45);
}

.device-layout-brand span {
  color: #789da5;
  font-size: 0.52rem;
  letter-spacing: 0.15em;
}

.device-layout-card h1 {
  margin: 0.15rem 0 0.5rem;
  color: #f4feff;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 4.3rem);
  line-height: 0.95;
  text-shadow: 4px 4px 0 #00222d;
}

.device-layout-card > p:not(.eyebrow) {
  max-width: 45rem;
  margin: 0 0 1.5rem;
  color: #8fb0b8;
  font-size: clamp(0.6rem, 1.2vw, 0.78rem);
  line-height: 1.6;
}

.device-layout-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.5vw, 1rem);
}

.device-layout-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 13rem;
  padding: 1rem;
  border: 1px solid rgba(53, 234, 255, 0.34);
  border-radius: 2px;
  color: #dffcff;
  background: rgba(0, 11, 16, 0.8);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  text-align: left;
  cursor: pointer;
  align-content: end;
  gap: 0.22rem;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.device-layout-option:hover,
.device-layout-option:focus-visible,
.device-layout-option.is-recommended,
.device-layout-option.is-current {
  border-color: #35eaff;
  background: rgba(3, 34, 43, 0.9);
  box-shadow: 4px 4px 0 #001018, 0 0 1.25rem rgba(53, 234, 255, 0.17);
  transform: translateY(-2px);
}

.device-layout-option.is-current { border-color: #ff496c; }

.device-layout-option strong {
  font-family: var(--display);
  font-size: clamp(0.82rem, 1.5vw, 1.08rem);
  letter-spacing: 0.06em;
}

.device-layout-option small {
  color: #779aa3;
  font-size: 0.54rem;
}

.device-layout-option em {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.24rem 0.34rem;
  border: 1px solid rgba(255, 73, 108, 0.55);
  color: #ffd5dc;
  background: #4e0d1c;
  font-size: 0.42rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.device-layout-preview {
  position: absolute;
  top: 1rem;
  left: 50%;
  display: block;
  width: min(9.5rem, 76%);
  height: 6rem;
  color: #8ff5ff;
  transform: translateX(-50%);
}

.device-layout-preview i,
.device-layout-preview b {
  position: absolute;
  display: grid;
  border: 1px solid rgba(53, 234, 255, 0.55);
  color: #b9faff;
  background: #06151a;
  font-size: 0.65rem;
  font-style: normal;
  place-items: center;
}

.device-layout-preview-phone i { top: 0; left: 25%; width: 50%; height: 3rem; }
.device-layout-preview-phone b:nth-of-type(1) { bottom: 0.35rem; left: 19%; width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.device-layout-preview-phone b:nth-of-type(2) { right: 18%; bottom: 0.5rem; width: 2.7rem; height: 1.75rem; border-radius: 50%; }
.device-layout-preview-tablet i { top: 0.6rem; left: 18%; width: 64%; height: 4.1rem; }
.device-layout-preview-tablet b:first-child { top: 0.6rem; left: 0; width: 18%; height: 4.1rem; border-radius: 1rem 0 0 1rem; }
.device-layout-preview-tablet b:last-child { top: 0.6rem; right: 0; width: 18%; height: 4.1rem; border-radius: 0 1rem 1rem 0; }
.device-layout-preview-desktop i { top: 0; left: 12%; width: 76%; height: 4.3rem; }
.device-layout-preview-desktop b { bottom: 0.25rem; left: 32%; width: 36%; height: 0.5rem; }

.device-layout-close { margin-top: 1rem; }
.install-game-button { margin-top: 1rem; }

.install-game-card {
  width: min(31rem, 100%);
  text-align: center;
}

.install-game-card .device-layout-brand { justify-content: center; }
.install-game-card > p:not(.eyebrow) { margin-right: auto; margin-left: auto; }

.install-game-icon {
  display: grid;
  width: 7.5rem;
  height: 7.5rem;
  margin: 1.15rem auto;
  border: 2px solid rgba(53, 234, 255, 0.72);
  border-radius: 1.2rem;
  overflow: hidden;
  background: #010407;
  box-shadow: 5px 5px 0 #001017, 0 0 1.5rem rgba(53, 234, 255, 0.22);
  place-items: center;
}

.install-game-icon img { width: 100%; height: 100%; object-fit: cover; }

.install-game-actions {
  display: grid;
  width: min(100%, 27rem);
  margin: 1rem auto 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
}
.console-shell { display: contents; }
.console-branding { display: none; }

.touch-button b,
.touch-button small {
  pointer-events: none;
}

.touch-button b {
  font-family: var(--display);
  font-size: 0.7rem;
  line-height: 1;
}

.touch-button small {
  color: rgba(213, 250, 255, 0.72);
  font-size: 0.36rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-device-layout="desktop"] .touch-controls {
  display: none !important;
}

html[data-device-layout="phone"] body,
html[data-device-layout="tablet"] body {
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(10, 74, 88, 0.15), transparent 42%),
    #010407;
}

html[data-device-layout="phone"] .shell-header,
html[data-device-layout="phone"] .shell-footer,
html[data-device-layout="tablet"] .shell-header,
html[data-device-layout="tablet"] .shell-footer {
  display: none;
}

html[data-device-layout="phone"] .page-shell,
html[data-device-layout="tablet"] .page-shell {
  min-height: 100dvh;
  padding: max(0.45rem, env(safe-area-inset-top)) max(0.45rem, env(safe-area-inset-right)) max(0.45rem, env(safe-area-inset-bottom)) max(0.45rem, env(safe-area-inset-left));
  gap: 0;
}

html[data-device-layout="phone"] .console-shell,
html[data-device-layout="tablet"] .console-shell {
  position: relative;
  isolation: isolate;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  border: 2px solid #142329;
  background:
    linear-gradient(rgba(7, 12, 15, 0.34), rgba(0, 4, 7, 0.52)),
    url("assets/ui/ennidi-console-texture.jpg") center / 28rem repeat;
  box-shadow:
    inset 0 0 0 2px rgba(119, 161, 169, 0.12),
    inset 0 0 2.6rem rgba(0, 0, 0, 0.72),
    8px 10px 0 rgba(0, 0, 0, 0.72),
    0 0 2.5rem rgba(53, 234, 255, 0.12);
}

html[data-device-layout="phone"] .console-shell::before,
html[data-device-layout="tablet"] .console-shell::before {
  content: none;
}

html[data-device-layout="phone"] .console-branding,
html[data-device-layout="tablet"] .console-branding {
  position: absolute;
  z-index: 5;
  display: flex;
  color: #35eaff;
  pointer-events: none;
  align-items: baseline;
  gap: 0.4rem;
  text-shadow: 2px 2px 0 #001117, 0 0 0.65rem rgba(53, 234, 255, 0.42);
}

.console-branding b { font-family: var(--display); letter-spacing: 0.08em; }
.console-branding span { color: #b9f9ff; font-size: 0.4rem; letter-spacing: 0.12em; }
.console-branding small { color: #9e334b; font-size: 0.36rem; letter-spacing: 0.12em; }

html[data-device-layout="phone"] .touch-controls:not([hidden]),
html[data-device-layout="tablet"] .touch-controls:not([hidden]) {
  display: block !important;
  pointer-events: none;
}

html[data-device-layout="phone"] .touch-button,
html[data-device-layout="tablet"] .touch-button {
  display: grid;
  padding: 0;
  border: 2px solid #4e6d75;
  border-radius: 50%;
  color: #dffcff;
  background:
    radial-gradient(circle at 38% 30%, #263940, #071015 68%),
    #071015;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.08),
    inset -3px -4px 0 rgba(0, 0, 0, 0.45),
    3px 4px 0 #00080b,
    0 0 0 2px rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  place-content: center;
  gap: 0.16rem;
}

html[data-device-layout="phone"] .game-frame,
html[data-device-layout="phone"] .game-frame canvas,
html[data-device-layout="phone"] .touch-controls,
html[data-device-layout="tablet"] .game-frame,
html[data-device-layout="tablet"] .game-frame canvas,
html[data-device-layout="tablet"] .touch-controls {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

html[data-device-layout="phone"] .game-frame > .panel-screen,
html[data-device-layout="phone"] .game-frame > .modal-screen,
html[data-device-layout="tablet"] .game-frame > .panel-screen,
html[data-device-layout="tablet"] .game-frame > .modal-screen {
  touch-action: pan-y;
}

html[data-device-layout="phone"] .touch-button.is-active,
html[data-device-layout="phone"] .touch-button:active,
html[data-device-layout="tablet"] .touch-button.is-active,
html[data-device-layout="tablet"] .touch-button:active {
  border-color: #35eaff;
  background: radial-gradient(circle at 50% 55%, #71304a, #250914 72%);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.06), 1px 2px 0 #000, 0 0 0.9rem rgba(53, 234, 255, 0.4);
  transform: translateY(2px) scale(0.96);
}

html[data-device-layout="phone"] .touch-movement,
html[data-device-layout="phone"] .touch-utility,
html[data-device-layout="phone"] .touch-face,
html[data-device-layout="tablet"] .touch-movement,
html[data-device-layout="tablet"] .touch-utility,
html[data-device-layout="tablet"] .touch-face {
  pointer-events: auto;
}

/* Portrait phone: screen above a Game Boy-like control deck. */
html[data-device-layout="phone"] .console-shell {
  display: grid;
  grid-template-rows: auto minmax(17rem, 1fr);
  width: min(100%, 31rem);
  height: min(
    calc(100dvh - max(0.9rem, env(safe-area-inset-top) + env(safe-area-inset-bottom))),
    calc((100vw - 0.8rem) * 1.94),
    50rem
  );
  max-height: 50rem;
  padding: clamp(0.7rem, 2.5vw, 1rem);
  border-radius: 1.65rem 1.65rem 3.2rem 3.2rem;
}

html[data-device-layout="phone"] .game-frame {
  position: relative;
  z-index: 2;
  grid-row: 1;
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  border: 3px solid #020507;
  border-radius: 0.65rem;
  box-shadow: 0 0 0 0.42rem #172329, 0 0 0 0.52rem #000, 0 0 1.4rem rgba(53, 234, 255, 0.16);
}

html[data-device-layout="phone"] .game-frame::before { inset: 0.18rem; border-radius: 0.35rem; }

html[data-device-layout="phone"] .console-branding {
  top: calc(min((100vw - 2.5rem) * 0.5625, 16rem) + 1.45rem);
  left: 50%;
  transform: translateX(-50%);
}

html[data-device-layout="phone"] .console-branding b { font-size: 0.78rem; }

html[data-device-layout="phone"] .touch-controls {
  position: relative;
  z-index: 3;
  grid-row: 2;
  inset: auto;
  min-height: 0;
  padding: 2.5rem 0.15rem 0.35rem;
}

html[data-device-layout="phone"] .touch-controls::before {
  position: absolute;
  top: 13%;
  left: 50%;
  width: 3.7rem;
  height: 2.35rem;
  background: radial-gradient(circle, rgba(0, 4, 7, 0.92) 0 2px, transparent 2.5px) 0 0 / 0.75rem 0.75rem;
  content: "";
  opacity: 0.72;
  pointer-events: none;
  transform: translateX(-50%) rotate(-2deg);
}

html[data-device-layout="phone"] .touch-movement {
  top: 10%;
  bottom: auto;
  left: 4%;
  display: grid;
  width: 8.2rem;
  height: 8.2rem;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

html[data-device-layout="phone"] .touch-movement::before {
  position: absolute;
  z-index: 0;
  content: "";
  inset: 0;
  clip-path: polygon(
    33.333% 0, 66.667% 0,
    66.667% 33.333%, 100% 33.333%,
    100% 66.667%, 66.667% 66.667%,
    66.667% 100%, 33.333% 100%,
    33.333% 66.667%, 0 66.667%,
    0 33.333%, 33.333% 33.333%
  );
  background:
    radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.09), transparent 12%),
    linear-gradient(145deg, #202b30, #080d10 68%);
  filter: drop-shadow(4px 5px 0 #00070a) drop-shadow(0 0 2px rgba(183, 218, 224, 0.2));
  pointer-events: none;
}

html[data-device-layout="phone"] .touch-movement .touch-button {
  z-index: 1;
  width: 100%;
  height: 100%;
  border-color: transparent;
  border-radius: 0.32rem;
  background: transparent;
  box-shadow: none;
}

html[data-device-layout="phone"] .touch-movement .touch-button.is-active,
html[data-device-layout="phone"] .touch-movement .touch-button:active {
  border-color: rgba(53, 234, 255, 0.6);
  background: rgba(53, 234, 255, 0.12);
  box-shadow: inset 0 0 0.7rem rgba(53, 234, 255, 0.2);
}

html[data-device-layout="phone"] .touch-diagonal,
html[data-device-layout="tablet"] .touch-diagonal {
  position: absolute;
  z-index: 2;
  top: 0;
  width: 33.333%;
  height: 33.333%;
  border-radius: 0.35rem;
  opacity: 0;
  pointer-events: none;
}

html[data-device-layout="phone"] .touch-up-left,
html[data-device-layout="tablet"] .touch-up-left { left: 0; }

html[data-device-layout="phone"] .touch-up-right,
html[data-device-layout="tablet"] .touch-up-right { right: 0; }

html[data-device-layout="phone"] .touch-movement [data-action="up"] { grid-area: up; }
html[data-device-layout="phone"] .touch-movement [data-action="left"] { grid-area: left; }
html[data-device-layout="phone"] .touch-movement [data-action="right"] { grid-area: right; }
html[data-device-layout="phone"] .touch-movement [data-action="down"] { grid-area: down; }

html[data-device-layout="phone"] .touch-utility {
  top: 45%;
  bottom: auto;
  left: 50%;
  display: flex;
  transform: translateX(-50%) rotate(-5deg);
  gap: 0.75rem;
}

html[data-device-layout="phone"] .touch-utility .touch-button {
  width: 3.35rem;
  height: 2rem;
  border-radius: 1rem;
}

html[data-device-layout="phone"] .touch-face {
  top: 7%;
  right: 2%;
  bottom: auto;
  display: grid;
  width: 10.2rem;
  height: 10.2rem;
  grid-template-areas:
    ". heavy ."
    "light . jump"
    ". dash .";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: 0;
}

html[data-device-layout="phone"] .touch-face .touch-button {
  width: calc(3.45rem + 5px);
  height: calc(3.45rem + 5px);
}
html[data-device-layout="phone"] .touch-jump { grid-area: dash; }
html[data-device-layout="phone"] .touch-heavy { grid-area: heavy; }
html[data-device-layout="phone"] .touch-dash { grid-area: jump; }
html[data-device-layout="phone"] .touch-light { grid-area: light; }

/* Tablet: centered 16:9 display with physical-looking side controllers. */
html[data-device-layout="tablet"] .console-shell {
  --console-rail: clamp(6.7rem, 11.5vw, 10.5rem);
  display: grid;
  width: min(calc(100vw - 1rem), calc(92dvh * 2.05));
  grid-template-columns: var(--console-rail) minmax(0, 1fr) var(--console-rail);
  align-items: center;
  padding: clamp(0.55rem, 1vw, 0.85rem);
  border-radius: clamp(1.2rem, 2vw, 2.2rem);
}

html[data-device-layout="tablet"] .game-frame {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-height: calc(100dvh - 2.2rem);
  aspect-ratio: 16 / 9;
  border: 3px solid #020507;
  border-radius: 0.45rem;
  box-shadow: 0 0 0 0.45rem #172329, 0 0 0 0.57rem #000, 0 0 1.5rem rgba(53, 234, 255, 0.15);
}

html[data-device-layout="tablet"] .game-frame::before { inset: 0.18rem; border-radius: 0.2rem; }

html[data-device-layout="tablet"] .console-branding {
  bottom: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
}

html[data-device-layout="tablet"] .console-branding b { font-size: 0.72rem; }

html[data-device-layout="tablet"] .touch-controls {
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 0;
}

html[data-device-layout="tablet"] .touch-movement {
  bottom: 9%;
  left: 1.1rem;
  display: grid;
  width: calc(var(--console-rail) - 2.2rem);
  height: calc(var(--console-rail) - 2.2rem);
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 0;
  gap: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #17262c 0 25%, transparent 26%);
}

html[data-device-layout="tablet"] .touch-movement .touch-button {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 0.35rem;
}

html[data-device-layout="tablet"] .touch-movement [data-action="up"] { grid-area: up; }
html[data-device-layout="tablet"] .touch-movement [data-action="left"] { grid-area: left; }
html[data-device-layout="tablet"] .touch-movement [data-action="right"] { grid-area: right; }
html[data-device-layout="tablet"] .touch-movement [data-action="down"] { grid-area: down; }

html[data-device-layout="tablet"] .touch-utility {
  top: 16%;
  left: 1rem;
  display: flex;
  width: calc(var(--console-rail) - 2rem);
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

html[data-device-layout="tablet"] .touch-utility .touch-button {
  width: clamp(3rem, 5vw, 4.4rem);
  height: clamp(2rem, 3.1vw, 2.65rem);
  border-radius: 1rem;
}

html[data-device-layout="tablet"] .touch-face {
  top: 50%;
  right: 0.7rem;
  bottom: auto;
  display: grid;
  width: calc(var(--console-rail) - 1.4rem);
  aspect-ratio: 1;
  grid-template-areas:
    ". heavy ."
    "light . jump"
    ". dash .";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  transform: translateY(-50%);
  gap: 0;
}

html[data-device-layout="tablet"] .touch-face .touch-button {
  width: calc(clamp(2.2rem, 3.3vw, 2.8rem) + 5px);
  height: calc(clamp(2.2rem, 3.3vw, 2.8rem) + 5px);
}

html[data-device-layout="tablet"] .touch-jump { grid-area: dash; }
html[data-device-layout="tablet"] .touch-heavy { grid-area: heavy; }
html[data-device-layout="tablet"] .touch-dash { grid-area: jump; }
html[data-device-layout="tablet"] .touch-light { grid-area: light; }

/* Keep the upgrade shortcut readable and tappable below the handheld HUD. */
html[data-device-layout="phone"] .hud-upgrade-button:not([hidden]) {
  position: absolute;
  top: 3rem;
  left: 0.35rem;
  z-index: 8;
  display: grid;
  width: auto;
  min-width: 6.6rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.5rem;
  grid-template-columns: 1.4rem auto;
  gap: 0.35rem;
  /* The phone HUD is half-scale; restore this touch target to physical size. */
  scale: 2;
  transform-origin: top left;
}

html[data-device-layout="phone"] .hud-upgrade-button .hud-upgrade-copy {
  display: grid;
}

html[data-device-layout="phone"] .hud-upgrade-button .hud-upgrade-copy small {
  max-width: 6rem;
  font-size: 0.65rem;
  line-height: 1.45;
}

html[data-device-layout="phone"] .hud-upgrade-button .hud-upgrade-copy strong {
  display: none;
}

html[data-device-layout="tablet"] .global-mute-button,
html[data-device-layout="phone"] .global-mute-button {
  top: auto;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 200;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

@container azrael-stage (max-width: 520px) {
  html[data-device-layout="phone"] .hud { padding: 0.28rem; }
  html[data-device-layout="phone"] .hud-topline { gap: 0.18rem; }
  html[data-device-layout="phone"] .hud-panel { min-height: 1.8rem; padding: 0.2rem 0.3rem; border-radius: 1px; }
  html[data-device-layout="phone"] .course-panel { min-width: 0; max-width: 36%; flex: 1 1 auto; }
  html[data-device-layout="phone"] .course-panel strong { display: block; overflow: hidden; font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; }
  html[data-device-layout="phone"] .hud-eyebrow { display: none; }
  html[data-device-layout="phone"] .vitals-panel { min-width: 3.8rem; padding-top: 0.42rem; }
  html[data-device-layout="phone"] .health-pip { width: 0.58rem; }
  html[data-device-layout="phone"] .currency-panel { min-width: 4.8rem; }
  html[data-device-layout="phone"] .currency-readout { font-size: 0.45rem; }
  html[data-device-layout="phone"] .life-head-icon { width: 1rem; height: 1rem; }
  html[data-device-layout="phone"] .special-cluster { bottom: 0.3rem; left: 0.3rem; width: 44%; padding: 0.22rem; }
  html[data-device-layout="phone"] .special-copy { min-width: 0; }
  html[data-device-layout="phone"] .special-heading { font-size: 0.4rem; }
  html[data-device-layout="phone"] .relic-deploy { width: 1.55rem; height: 1.55rem; }
  html[data-device-layout="phone"] .panel-screen { overflow: auto; padding: 0.7rem; }
  html[data-device-layout="phone"] .controls-layout { grid-template-columns: 1fr; overflow: auto; }
}

@media (max-width: 720px) {
  .device-layout-options { grid-template-columns: 1fr; }
  .device-layout-option {
    min-height: 7.25rem;
    padding: 1rem 0.8rem 1rem 8.3rem;
    align-content: center;
  }
  .device-layout-preview {
    top: 50%;
    left: 0.65rem;
    width: 6.8rem;
    height: 5.3rem;
    transform: translateY(-50%);
  }
  .device-layout-option em { top: 0.45rem; right: 0.45rem; bottom: auto; }
}

@media (orientation: portrait) and (max-width: 350px) {
  html[data-device-layout="phone"] .console-shell { padding: 0.55rem; }
  html[data-device-layout="phone"] .touch-movement {
    left: 1%;
    top: 10%;
    bottom: auto;
    width: 7rem;
    height: 7rem;
  }
  html[data-device-layout="phone"] .touch-movement .touch-button { width: 2.55rem; height: 2.55rem; }
  html[data-device-layout="phone"] .touch-face {
    right: 0;
    top: 7%;
    bottom: auto;
    width: 8.6rem;
    height: 8.6rem;
  }
  html[data-device-layout="phone"] .touch-face .touch-button { width: 2.75rem; height: 2.75rem; }
  html[data-device-layout="phone"] .touch-relic { width: 2.15rem !important; height: 2.15rem !important; }
  html[data-device-layout="phone"] .touch-utility { top: 45%; bottom: auto; gap: 0.45rem; }
  html[data-device-layout="phone"] .touch-utility .touch-button { width: 2.75rem; height: 1.7rem; }
}

@media (orientation: landscape) and (max-height: 590px) {
  html[data-device-layout="phone"] .console-shell {
    --console-rail: clamp(5.8rem, 13vw, 7.2rem);
    display: grid;
    width: calc(100vw - 0.9rem);
    height: calc(100dvh - 0.9rem);
    max-width: none;
    padding: 0.45rem;
    grid-template-columns: var(--console-rail) minmax(0, 1fr) var(--console-rail);
    grid-template-rows: 1fr;
    border-radius: 1.3rem;
  }
  html[data-device-layout="phone"] .game-frame {
    grid-column: 2;
    grid-row: 1;
    width: min(100%, calc(100dvh - 1.8rem));
    aspect-ratio: 1 / 1;
    align-self: center;
    justify-self: center;
  }
  html[data-device-layout="phone"] .touch-controls { position: absolute; inset: 0; grid-row: auto; padding: 0; }
  html[data-device-layout="phone"] .console-branding { top: auto; bottom: 0.2rem; left: 50%; transform: translateX(-50%); }
  html[data-device-layout="phone"] .touch-movement { left: 0.6rem; bottom: 8%; width: calc(var(--console-rail) - 1.2rem); height: calc(var(--console-rail) - 1.2rem); }
  html[data-device-layout="phone"] .touch-movement .touch-button { width: 100%; height: 100%; }
  html[data-device-layout="phone"] .touch-utility { top: 14%; bottom: auto; left: calc(var(--console-rail) / 2); flex-direction: column; transform: translateX(-50%); }
  html[data-device-layout="phone"] .touch-utility .touch-button { width: 3rem; height: 1.8rem; }
  html[data-device-layout="phone"] .touch-face { right: 0.3rem; bottom: 12%; width: calc(var(--console-rail) - 0.6rem); height: calc(var(--console-rail) - 0.6rem); }
  html[data-device-layout="phone"] .touch-face .touch-button {
    width: calc(2.7rem + 5px);
    height: calc(2.7rem + 5px);
  }
}

/* The phone's physical display is small, so render interface screens against a
   larger logical stage and then reduce them uniformly into the 16:9 window. */
html[data-device-layout="phone"] .game-frame > .screen,
html[data-device-layout="phone"] .game-frame > .hud,
html[data-device-layout="phone"] .game-frame > .music-unlock-screen,
html[data-device-layout="phone"] .game-frame > .loading-curtain,
html[data-device-layout="phone"] .game-frame > .save-confirm {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 200%;
  height: 200%;
  max-width: none;
  max-height: none;
  transform-origin: 0 0;
  scale: 0.5;
}

html[data-device-layout="phone"] .game-frame > .save-warning {
  right: auto;
  bottom: 16px;
  left: 16px;
  width: calc(200% - 32px);
  transform-origin: 0 100%;
  scale: 0.5;
}

html[data-device-layout="phone"] .game-frame > .panel-screen,
html[data-device-layout="phone"] .game-frame > .modal-screen {
  overflow: auto;
  overscroll-behavior: contain;
}

/* These responsive ending pages use the physical display, not a half-scale UI. */
html[data-device-layout="phone"] .game-frame > .ending-title-screen,
html[data-device-layout="phone"] .game-frame > .ending-thanks-screen {
  width: 100%;
  height: 100%;
  scale: 1;
}

html[data-device-layout="phone"] .ending-future,
html[data-device-layout="phone"] .ending-completion-message { font-size: 12px; }
html[data-device-layout="phone"] .ending-completion-note { font-size: 10px; }
html[data-device-layout="phone"] .ending-actions .button,
html[data-device-layout="phone"] .ending-title-continue { min-height: 44px; font-size: 11px; }

html[data-device-layout="phone"] .game-frame > .title-screen .title-lede {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

html[data-device-layout="phone"] .global-mute-button {
  top: auto;
  right: 0.35rem;
  bottom: 0.35rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.38rem;
}

html[data-device-layout="phone"] .settings-list input[type="range"] {
  height: 5.5rem;
  margin: -1.55rem 0 -0.2rem;
  background: linear-gradient(90deg, #21cadf 0 var(--range-progress, 50%), #3a0b18 var(--range-progress, 50%));
  background-clip: content-box;
  border-top: 2.48rem solid transparent;
  border-bottom: 2.48rem solid transparent;
}

html[data-device-layout="phone"] .settings-list input[type="range"]::-webkit-slider-thumb {
  width: 3rem;
  height: 3rem;
  margin-top: -1.34rem;
}

html[data-device-layout="tablet"] .settings-list input[type="range"] {
  min-height: 2.4rem;
  background: linear-gradient(90deg, #21cadf 0 var(--range-progress, 50%), #3a0b18 var(--range-progress, 50%));
  background-clip: content-box;
  border-top: 0.95rem solid transparent;
  border-bottom: 0.95rem solid transparent;
}

html[data-device-layout="phone"] .global-mute-label { display: none; }
html[data-device-layout="phone"] .global-mute-icon { width: 0.85rem; height: 0.85rem; font-size: 0.75rem; }

html[data-device-layout="phone"] .touch-start,
html[data-device-layout="tablet"] .touch-start {
  border-color: #8f3850;
  color: #ffe1e7;
  background: radial-gradient(circle at 38% 30%, #512031, #14070c 70%);
}

.handheld-music-player { display: none; }
.handheld-now-playing-marquee { display: none; }
html[data-device-layout="phone"] .handheld-now-playing-marquee { overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Portrait handheld layout: mirrored D-pad and face-button grids, three
   centered utility controls, and an MP3 strip—no analog sticks. */
@media (orientation: portrait) {
  html[data-device-layout="phone"] .game-frame {
    aspect-ratio: 1 / 1;
  }

  html[data-device-layout="phone"] .console-branding {
    top: calc(min((100vw - 2.5rem), 29rem) + 1.35rem);
  }

  html[data-device-layout="phone"] .touch-utility {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    pointer-events: none;
    transform: none;
  }

  html[data-device-layout="phone"] .touch-utility .touch-button {
    position: absolute;
    width: 3.15rem;
    height: 3.15rem;
    margin: 0;
    border-radius: 50%;
    pointer-events: auto;
  }

  html[data-device-layout="phone"] .touch-face {
    position: absolute;
    top: 10%;
    right: 4%;
    bottom: auto;
    display: grid;
    width: 8.2rem;
    height: 8.2rem;
    padding: 0;
    grid-template-areas:
      ". heavy ."
      "light . jump"
      ". dash .";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
    background: none;
    pointer-events: none;
    transform: none;
  }

  html[data-device-layout="phone"] .touch-face .touch-button {
    position: relative;
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    margin: 0;
    border-radius: 50%;
    align-self: center;
    justify-self: center;
    pointer-events: auto;
  }

  html[data-device-layout="phone"] .touch-face .touch-button b {
    font-size: 1.15rem;
  }

  html[data-device-layout="phone"] .touch-light {
    grid-area: light;
    border-color: #388bc6;
    color: #dff8ff;
    background: radial-gradient(circle at 38% 30%, #176ba9, #07131d 70%);
  }

  html[data-device-layout="phone"] .touch-heavy {
    grid-area: heavy;
    border-color: #b59a36;
    color: #fff3b8;
    background: radial-gradient(circle at 38% 30%, #806713, #171204 70%);
  }

  html[data-device-layout="phone"] .touch-dash {
    grid-area: jump;
    border-color: #b94f3b;
    color: #ffe2da;
    background: radial-gradient(circle at 38% 30%, #913624, #1c0905 70%);
  }

  html[data-device-layout="phone"] .touch-interact {
    grid-area: dash;
    border-color: #6a9d55;
    color: #ebffdc;
    background: radial-gradient(circle at 38% 30%, #467b32, #091807 70%);
  }

  html[data-device-layout="phone"] .touch-special {
    top: 35%;
    left: calc(50% - 1.55rem);
    width: 3.1rem !important;
    height: 3.1rem !important;
    border-color: #ad5bd1;
    color: #f7d9ff;
    background: radial-gradient(circle at 38% 30%, #783596, #17071f 70%);
  }

  html[data-device-layout="phone"] .touch-relic {
    top: 50%;
    left: calc(50% - 4.725rem);
    width: 2.65rem !important;
    height: 2.65rem !important;
    border-color: #4e8190;
  }

  html[data-device-layout="phone"] .touch-start {
    top: 50%;
    left: calc(50% + 2.075rem);
    width: 2.65rem !important;
    height: 2.65rem !important;
    border-radius: 50% !important;
  }

  html[data-device-layout="phone"] .handheld-music-player {
    position: absolute;
    top: 72%;
    left: 50%;
    z-index: 6;
    display: grid;
    width: 8.7rem;
    height: 2.7rem;
    padding: 0.25rem;
    border: 2px solid rgba(203, 235, 239, 0.66);
    border-radius: 0.35rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.18rem;
    background: linear-gradient(180deg, rgba(214, 228, 228, 0.96), rgba(137, 158, 161, 0.94));
    box-shadow: inset 0 0 0 2px rgba(20, 33, 37, 0.3), 3px 4px 0 rgba(0, 0, 0, 0.62);
    pointer-events: auto;
    transform: translateX(-50%) rotate(-1deg);
  }

  html[data-device-layout="phone"] .handheld-music-player button {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0.2rem;
    color: #10181b;
    background: rgba(244, 249, 249, 0.44);
    font-family: var(--display);
    font-size: 0.72rem;
    line-height: 1;
    box-shadow: inset 0 -2px 0 rgba(3, 8, 10, 0.2);
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
  }

  html[data-device-layout="phone"] .handheld-music-player button:active {
    background: rgba(62, 231, 246, 0.48);
    box-shadow: inset 0 2px 0 rgba(3, 8, 10, 0.28);
    transform: translateY(1px);
  }

  html[data-device-layout="phone"] .handheld-music-player button:disabled {
    opacity: 0.34;
  }

  html[data-device-layout="phone"] .handheld-now-playing-marquee {
    position: absolute;
    top: 84%;
    left: 50%;
    z-index: 6;
    display: block;
    width: min(13.2rem, 62%);
    height: 2.1rem;
    overflow: hidden;
    border: 2px solid #071218;
    border-radius: 0.2rem;
    color: #43efff;
    background: #010507;
    box-shadow: inset 0 0 0 1px rgba(53, 234, 255, 0.2), 3px 4px 0 rgba(0, 0, 0, 0.66);
    font-family: var(--display);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    line-height: 2.1rem;
    pointer-events: none;
    text-shadow: 0 0 0.42rem rgba(53, 234, 255, 0.72);
    transform: translateX(-50%) rotate(-0.35deg);
    white-space: nowrap;
  }

  html[data-device-layout="phone"] .handheld-now-playing-track {
    display: flex;
    width: max-content;
    height: 100%;
    align-items: center;
    animation: handheld-now-playing-scroll 9s linear infinite !important;
    animation-iteration-count: infinite !important;
    backface-visibility: hidden;
    gap: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  html[data-device-layout="phone"] .handheld-now-playing-track span {
    display: block;
    padding: 0 0.8rem;
    flex: none;
  }

  html[data-device-layout="phone"] .handheld-now-playing-marquee.is-resetting .handheld-now-playing-track {
    animation: none !important;
    transform: translate3d(0, 0, 0);
  }

}

@keyframes handheld-now-playing-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Tomb seals use the same keyboard, controller and touch menu navigation. */
.tomb-puzzle-interact {
  position: absolute; z-index: 22; left: 50%; bottom: 8%; transform: translateX(-50%);
  padding: 0.7rem 1rem; min-height: 44px; white-space: nowrap;
  color: #fff0b6; border: 1px solid #e5ce87; background: #20152ef2;
  box-shadow: 0 0 28px #e5ce8738;
}
.ally-dialogue-screen {
  align-items: flex-start;
  padding: 3.2%;
  background: linear-gradient(rgba(3, 8, 19, .55), transparent 58%);
}
.ally-dialogue-screen::after { display: none; }
.game-frame:has(#allyDialogueScreen:not([hidden])) .global-mute-button { top: auto; bottom: 12px; }
.ally-dialogue-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px 22px;
  width: 100%;
  padding: 22px 26px 16px;
  border: 1px solid var(--ally-accent, #8bddff);
  border-radius: 16px;
  background: rgba(7, 13, 28, .97);
  box-shadow: 0 12px 40px #0008;
}
.ally-dialogue-portrait { width: 88px; height: 88px; object-fit: contain; align-self: center; }
.ally-dialogue-copy { min-width: 0; grid-column: 2; }
.ally-dialogue-label { color: var(--ally-accent); font: 700 11px/1.3 sans-serif; letter-spacing: .15em; }
.ally-dialogue-copy h2 { color: #fff; font: 700 25px/1.2 sans-serif; margin: 6px 0 9px; }
.ally-dialogue-copy #allyDialogueLine { color: #edf2ff; font: 500 21px/1.4 sans-serif; }
.ally-dialogue-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.ally-dialogue-actions span { color: #90a0b9; margin-right: auto; font: 13px sans-serif; }
.ally-dialogue-actions button { min-height: 42px; padding: 9px 16px; border: 1px solid #53617a; border-radius: 8px; color: #fff; background: #1b273d; font: 700 14px sans-serif; cursor: pointer; }
.ally-dialogue-actions #btnAllyNext { background: var(--ally-accent); color: #07121e; border-color: transparent; }
.ally-dialogue-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html[data-device-layout="phone"] .ally-dialogue-screen { align-items: flex-start; padding: 6px; }
html[data-device-layout="phone"] .ally-dialogue-card {
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px 18px;
  width: 100%;
  height: 50%;
  min-height: 50%;
  padding: 16px 18px;
  border-radius: 11px;
  align-content: center;
}
html[data-device-layout="phone"] .ally-dialogue-portrait { width: 108px; height: 108px; }
html[data-device-layout="phone"] .ally-dialogue-copy { align-self: center; }
html[data-device-layout="phone"] .ally-dialogue-copy h2 { margin: 3px 0 6px; font-size: 30px; }
html[data-device-layout="phone"] .ally-dialogue-copy #allyDialogueLine { font-size: 26px; line-height: 1.22; }
html[data-device-layout="phone"] .ally-dialogue-label { font-size: 15px; }
html[data-device-layout="phone"] .ally-dialogue-actions { gap: 12px; }
html[data-device-layout="phone"] .ally-dialogue-actions button { min-height: 52px; padding: 8px 16px; font-size: 19px; }
html[data-device-layout="phone"] .ally-dialogue-actions span { font-size: 16px; }

.finale-ally-screen { display: grid; place-items: center; padding: 3%; background: #040816dc; }
.finale-ally-screen::after { display: none; }
.finale-ally-card { width: min(1120px, 100%); max-height: 100%; overflow: auto; padding: 24px; border: 1px solid #8dbaff; border-radius: 18px; background: #0b1327f5; box-shadow: 0 0 65px #3768aa44; }
.finale-ally-card h2 { margin: 10px 0; font: 800 34px/1.15 sans-serif; color: #fff; }
.finale-ally-card > p { color: #bed0ea; font: 17px/1.4 sans-serif; }
.finale-ally-card .eyebrow { color: #86dcff; letter-spacing: .12em; font-size: 14px; }
.finale-ally-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.finale-ally-choices button { display: grid; justify-items: center; gap: 8px; min-height: 150px; padding: 14px 10px; color: #fff; background: #182540; border: 1px solid #4b6389; border-radius: 12px; cursor: pointer; }
.finale-ally-choices img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.finale-ally-choices strong { font: 800 20px/1.2 sans-serif; color: var(--ally-accent, #b8e6ff); }
.finale-ally-choices span { font: 14px/1.3 sans-serif; }
.finale-ally-choices button:hover, .finale-ally-choices button:focus-visible { outline: 3px solid #bfeaff; outline-offset: 2px; background: #253c61; }
.finale-ally-card .finale-ally-note { margin-bottom: 0; font-size: 13px; }
.game-frame:has(#finaleAllyScreen:not([hidden])) .global-mute-button { display: none; }
html[data-device-layout="phone"] .finale-ally-card { padding: 28px; }
html[data-device-layout="phone"] .finale-ally-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-device-layout="phone"] .finale-ally-choices button { min-height: 116px; padding: 10px; gap: 4px; }
html[data-device-layout="phone"] .finale-ally-choices img { width: 36px; height: 36px; }
html[data-device-layout="phone"] .finale-ally-choices strong { font-size: 26px; }
html[data-device-layout="phone"] .finale-ally-choices span { font-size: 18px; }
html[data-device-layout="phone"] .finale-ally-card > p { font-size: 24px; }
html[data-device-layout="phone"] .finale-ally-card h2 { font-size: 42px; }
html[data-device-layout="phone"] .finale-ally-card .finale-ally-note { font-size: 18px; }

.tomb-puzzle-screen {
  display: grid; place-items: center; padding: 1.2rem; overflow: auto;
  background: #080813dc; color: #f7efda;
}
.tomb-puzzle-card {
  width: min(850px, 100%); max-height: 100%; overflow: auto; padding: 1.3rem;
  border: 1px solid #b49b66; border-radius: 18px;
  background: radial-gradient(ellipse at top right, #42314a 0, #191623 60%);
  box-shadow: 0 20px 80px #0009;
}
.tomb-puzzle-card h2 { margin: 0.2rem 0 0.7rem; font-size: clamp(1.35rem, 2.6vw, 2rem); }
.tomb-puzzle-card .eyebrow { margin: 0; color: #e5ce87; font-size: 0.7rem; }
.tomb-puzzle-layout { display: grid; grid-template-columns: 1fr 290px; align-items: center; gap: 1.5rem; }
.tomb-puzzle-guide p { margin: 0 0 0.7rem; line-height: 1.45; }
.tomb-puzzle-clue { padding: 0.7rem; border-left: 2px solid #e5ce87; background: #e5ce8710; color: #ffe7a1; }
#tombPuzzleStatus { color: #92e9e0; min-height: 1.4em; font-weight: 700; }
.tomb-puzzle-progress { color: #b5adbb; font-size: 0.8rem; }
.tomb-puzzle-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tomb-puzzle-board[data-puzzle-type="memory"] { grid-template-columns: repeat(2, 1fr); }
.tomb-puzzle-board[data-puzzle-type="mosaic"] { grid-template-columns: repeat(4, 1fr); }
.tomb-puzzle-board[data-puzzle-type="mosaic"] .tomb-puzzle-cell:not(.is-lit) { background: linear-gradient(145deg, #20182d, #0e0c17); }
.tomb-puzzle-board[data-puzzle-type="mosaic"] .tomb-puzzle-cell.is-lit { color: #baf8df; background: #275e53; border-color: #78edc8; }
.tomb-puzzle-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; min-height: 74px; padding: 6px; border: 1px solid #756680; border-radius: 10px;
  background: #12101f; color: #d5cedd; cursor: pointer; touch-action: manipulation;
}
.tomb-puzzle-cell:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tomb-puzzle-cell:hover { border-color: #ead396; }
.tomb-puzzle-cell.is-lit { color: #ffe9a3; background: #785c26; border-color: #ffe9a3; box-shadow: inset 0 0 18px #ffda7244; }
.tomb-puzzle-cell:disabled { cursor: default; opacity: 0.75; }
.tomb-puzzle-symbol { font-size: 2rem; line-height: 1.15; }
.tomb-puzzle-cell small { font-size: 0.65rem; font-weight: 700; }
.tomb-puzzle-symbol svg { display: block; width: 62px; height: 62px; fill: currentColor; stroke: currentColor; stroke-width: 7; }
.tomb-puzzle-board[data-puzzle-type="conduits"] .tomb-puzzle-cell { padding: 0; }
.tomb-puzzle-board[data-puzzle-type="conduits"] .tomb-puzzle-symbol { width: 100%; }
.tomb-puzzle-board[data-puzzle-type="conduits"] svg { width: 100%; }
.tomb-puzzle-board[data-puzzle-type="conduits"] small { position: absolute; font-size: 0.55rem; color: #fff5b1; background: #292131; bottom: 0; padding: 1px 3px; }
.tomb-puzzle-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tomb-puzzle-actions .button { min-height: 42px; }
.tomb-puzzle-reward { padding: 0.75rem; border: 1px solid #78edc8; border-radius: 10px; background: #78edc813; color: #baf8df; }
.tomb-puzzle-reward strong { display: block; font-size: 1rem; overflow-wrap: anywhere; }
.tomb-puzzle-reward p { margin: 0.4rem 0 0; font-size: 0.85rem; }
html[data-device-layout="phone"] .tomb-puzzle-screen { padding: 0.6rem; }
html[data-device-layout="phone"] .tomb-puzzle-card { padding: 0.8rem; }
html[data-device-layout="phone"] .tomb-puzzle-layout { grid-template-columns: 1fr 288px; gap: 1rem; }
html[data-device-layout="phone"] .tomb-puzzle-cell { min-height: 88px; }
html[data-device-layout="phone"] .tomb-puzzle-card h2 { font-size: 1.8rem; margin-bottom: 0.5rem; }
html[data-device-layout="phone"] .tomb-puzzle-card .eyebrow { font-size: 0.9rem; }
html[data-device-layout="phone"] .tomb-puzzle-guide { font-size: 1.25rem; }
html[data-device-layout="phone"] .tomb-puzzle-actions { margin-top: 0.5rem; }
html[data-device-layout="phone"] .tomb-puzzle-actions .button { min-height: 58px; font-size: 1rem; }
html[data-device-layout="phone"] .tomb-puzzle-progress { font-size: 1rem; }
html[data-device-layout="phone"] .tomb-puzzle-reward p { font-size: 1.1rem; }
html[data-device-layout="phone"] .tomb-puzzle-reward strong { font-size: 1.25rem; }

/* Save recovery and deliberate offline installation. */
.journey-data {
  overflow: auto;
}

.journey-data p {
  color: #a8bdc2;
  font-size: 0.7rem;
  line-height: 1.5;
}

.journey-data-actions {
  display: grid;
  margin: 0.6rem 0 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.journey-data-actions .button { width: 100%; }
.journey-data progress { width: 100%; accent-color: var(--cyan); }

.save-confirm {
  position: absolute;
  z-index: 500;
  display: grid;
  padding: 1.5rem;
  background: rgba(0, 5, 8, 0.9);
  backdrop-filter: blur(0.65rem);
  inset: 0;
  place-items: center;
}

.save-confirm-card {
  width: min(34rem, 100%);
  padding: clamp(1.2rem, 3cqw, 2.2rem);
  border: 2px solid var(--cyan);
  color: #e9fdff;
  background: linear-gradient(145deg, #06171d, #02090d);
  box-shadow: 8px 8px 0 #00090d, 0 0 2rem rgba(53, 234, 255, 0.25);
}

.save-confirm-card h2 { margin: 0.35rem 0 0.8rem; font-family: var(--display); font-size: clamp(1.5rem, 3cqw, 2.4rem); }
.save-confirm-card > p:not(.eyebrow) { color: #a8bdc2; line-height: 1.55; }
.save-confirm-actions { display: grid; margin-top: 1rem; grid-template-columns: 1.15fr 1fr; gap: 0.7rem; }

.save-warning {
  position: absolute;
  z-index: 450;
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  display: flex;
  min-height: 2.8rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid #ffb45f;
  color: #fff3df;
  background: #32180df2;
  box-shadow: 5px 5px 0 #110703;
  font-size: 0.7rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.save-warning button {
  min-height: 2.2rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #ffd39d;
  color: #2d1409;
  background: #ffd39d;
  font-weight: 900;
  white-space: nowrap;
}

/* Phone UI is rendered on a 2x logical stage and then halved. These sizes
   produce real 44px targets and 14–16px body copy on the physical display. */
html[data-device-layout="phone"] .panel-screen,
html[data-device-layout="phone"] .modal-screen,
html[data-device-layout="phone"] .map-screen,
html[data-device-layout="phone"] .tomb-puzzle-screen {
  font-size: 28px;
}

html[data-device-layout="phone"] .panel-screen .button,
html[data-device-layout="phone"] .modal-screen .button,
html[data-device-layout="phone"] .map-screen .button,
html[data-device-layout="phone"] .purchase-confirm-actions .button,
html[data-device-layout="phone"] .journey-data-actions .button,
html[data-device-layout="phone"] .save-confirm-actions .button {
  min-height: 88px;
  padding: 18px 24px;
  font-size: 28px;
  line-height: 1.15;
}

html[data-device-layout="phone"] .screen-header { gap: 20px; }
html[data-device-layout="phone"] .screen-header h2 { font-size: 48px; }
html[data-device-layout="phone"] .screen-header p:not(.eyebrow),
html[data-device-layout="phone"] .character-card p,
html[data-device-layout="phone"] .store-card p,
html[data-device-layout="phone"] .store-item p,
html[data-device-layout="phone"] .purchase-confirm-card > p,
html[data-device-layout="phone"] .map-details > p,
html[data-device-layout="phone"] .journey-data p { font-size: 28px; line-height: 1.4; }
html[data-device-layout="phone"] .eyebrow { font-size: 22px; }

html[data-device-layout="phone"] .character-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
html[data-device-layout="phone"] .character-card { min-height: 300px; padding: 20px; }
html[data-device-layout="phone"] .character-card canvas,
html[data-device-layout="phone"] .character-card img { height: 150px; }
html[data-device-layout="phone"] .character-card h3,
html[data-device-layout="phone"] .character-name { font-size: 36px; }
html[data-device-layout="phone"] .character-title,
html[data-device-layout="phone"] .character-access,
html[data-device-layout="phone"] .move-chip,
html[data-device-layout="phone"] .character-kit span { font-size: 20px; }

html[data-device-layout="phone"] .store-grid {
  overflow: auto;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-auto-columns: auto;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 18px;
}
html[data-device-layout="phone"] .store-header { grid-template-columns: minmax(0, 1fr) auto; }
html[data-device-layout="phone"] .store-header-actions { min-width: 0; gap: 10px; }
html[data-device-layout="phone"] .store-header-actions .button { min-height: 88px; padding: 12px 16px; font-size: 28px; white-space: normal; }
html[data-device-layout="phone"] .store-card,
html[data-device-layout="phone"] .store-item { height: max-content; min-height: 580px; padding: 22px; }
html[data-device-layout="phone"] .store-card img,
html[data-device-layout="phone"] .store-card canvas { height: 180px; }
html[data-device-layout="phone"] .store-card h3,
html[data-device-layout="phone"] .store-item h3 { font-size: 38px; }
html[data-device-layout="phone"] .store-card-command,
html[data-device-layout="phone"] .store-card button { min-height: 88px; font-size: 26px; }
html[data-device-layout="phone"] .upgrade-category-tabs button { min-height: 88px; font-size: 25px; }
html[data-device-layout="phone"] .upgrade-category-tabs small { font-size: 20px; }

html[data-device-layout="phone"] #mapOverlay .course-dossier {
  top: 180px;
  right: auto;
  left: 24px;
  width: calc(100% - 48px);
  max-height: calc(100% - 204px);
  padding: 28px;
  overflow: auto;
}
html[data-device-layout="phone"] .course-dossier h3 { font-size: 42px; }
html[data-device-layout="phone"] .map-details li { min-height: 52px; font-size: 25px; align-items: center; }
html[data-device-layout="phone"] .crossroads-dock button { min-height: 88px; padding: 16px 22px; font-size: 26px; }
html[data-device-layout="phone"] .crossroads-dock small { font-size: 20px; }

html[data-device-layout="phone"] .purchase-confirm-card,
html[data-device-layout="phone"] .save-confirm-card { width: min(620px, 100%); padding: 18px; }
html[data-device-layout="phone"] .purchase-confirm-card h3,
html[data-device-layout="phone"] .save-confirm-card h2 { font-size: 44px; }
html[data-device-layout="phone"] .purchase-confirm-item strong,
html[data-device-layout="phone"] .purchase-confirm-cost,
html[data-device-layout="phone"] .save-confirm-card > p { font-size: 28px; line-height: 1.35; }
html[data-device-layout="phone"] .purchase-confirm-actions { grid-template-columns: 1fr; }
html[data-device-layout="phone"] .save-confirm-actions { grid-template-columns: 1fr 1fr; }
html[data-device-layout="phone"] .save-confirm-actions .button { padding: 12px 16px; font-size: 24px; }
html[data-device-layout="phone"] .pause-card { width: 98%; max-height: 98%; }
html[data-device-layout="phone"] .controls-layout {
  display: grid;
  overflow: auto;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 18px;
}
html[data-device-layout="phone"] .control-group,
html[data-device-layout="phone"] .control-tip { height: max-content; min-height: max-content; padding: 24px; }
html[data-device-layout="phone"] .control-group h3,
html[data-device-layout="phone"] .control-tip h3 { font-size: 34px; }
html[data-device-layout="phone"] .control-list > div { min-height: 88px; font-size: 26px; }
html[data-device-layout="phone"] .control-list dt,
html[data-device-layout="phone"] .control-list dd { font-size: 30px; line-height: 1.2; }
html[data-device-layout="phone"] .control-list dt { min-width: 150px; }
html[data-device-layout="phone"] .save-warning { min-height: 88px; padding: 14px 18px; font-size: 24px; }
html[data-device-layout="phone"] .save-warning button { min-height: 88px; font-size: 28px; }

html[data-device-layout="phone"] .store-header { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; }
html[data-device-layout="phone"] .store-header-actions { display: flex; flex-direction: column; align-items: stretch; }
html[data-device-layout="phone"] .store-header-actions .button { width: 100%; }
html[data-device-layout="phone"] .store-currency { font-size: 28px; }
html[data-device-layout="phone"] .control-list .keycap { min-height: 64px; min-width: 64px; font-size: 28px; }
html[data-device-layout="phone"] .control-tip p,
html[data-device-layout="phone"] .pause-card label,
html[data-device-layout="phone"] .pause-card p,
html[data-device-layout="phone"] .pause-card select { font-size: 28px; line-height: 1.35; }
html[data-device-layout="phone"] .pause-card select,
html[data-device-layout="phone"] .pause-card input[type="range"] { min-height: 88px; }
html[data-device-layout="phone"] .tomb-puzzle-card { max-height: 100%; overflow: auto; }
html[data-device-layout="phone"] .tomb-puzzle-layout { grid-template-columns: 1fr; }
html[data-device-layout="phone"] .tomb-puzzle-guide,
html[data-device-layout="phone"] .tomb-puzzle-progress,
html[data-device-layout="phone"] .tomb-puzzle-reward p,
html[data-device-layout="phone"] .tomb-puzzle-reward strong { font-size: 28px; line-height: 1.35; }
html[data-device-layout="phone"] .tomb-puzzle-actions .button { min-height: 88px; font-size: 28px; }
html[data-device-layout="phone"] .tomb-puzzle-cell { min-width: 88px; }
html[data-device-layout="phone"] .tomb-puzzle-cell small { font-size: 24px; }
html[data-device-layout="phone"] #mapOverlay .course-dossier h3 { font-size: 42px; }
html[data-device-layout="phone"] .save-confirm-card { max-height: 100%; overflow: auto; }
html[data-device-layout="phone"] #bootStatus { font-size: 28px; line-height: 1.4; letter-spacing: 0.03em; }
html[data-device-layout="phone"] #btnAssetRetry { min-height: 88px; font-size: 28px; padding: 16px 24px; }
html[data-device-layout="phone"] .purchase-confirm-cost strong,
html[data-device-layout="phone"] .character-kit span { font-size: 28px; }
html[data-device-layout="phone"] #mapOverlay .map-topbar { display: grid; grid-template-columns: 1fr; gap: 8px; }
html[data-device-layout="phone"] #mapOverlay .world-heading .eyebrow { display: none; }
html[data-device-layout="phone"] #mapOverlay .world-heading h2 { font-size: 32px; }
html[data-device-layout="phone"] #mapOverlay .map-actions { display: flex; gap: 10px; }
html[data-device-layout="phone"] #mapOverlay .map-actions .button { flex: 1; padding: 12px; }
html[data-device-layout="phone"] #btnMapSettings { min-width: 88px; width: 88px; min-height: 88px; height: 88px; font-size: 36px; }
html[data-device-layout="phone"] .map-details li span,
html[data-device-layout="phone"] .map-details li b { font-size: 28px; }
html[data-device-layout="phone"] #mapOverlay .course-dossier { top: 200px; max-height: calc(100% - 224px); }
html[data-device-layout="phone"] .pause-card { display: block; overflow: auto; }
html[data-device-layout="phone"] .pause-layout { grid-template-columns: 1fr; gap: 24px; }
html[data-device-layout="phone"] .pause-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html[data-device-layout="phone"] .pause-actions .button { white-space: normal; }
html[data-device-layout="phone"] .pause-now-playing { padding: 20px; }
html[data-device-layout="phone"] .pause-now-record { width: 90px; height: 90px; }
html[data-device-layout="phone"] .pause-now-copy h3 { font-size: 30px; }
html[data-device-layout="phone"] .pause-now-copy small,
html[data-device-layout="phone"] .settings-list small { font-size: 24px; line-height: 1.4; }
html[data-device-layout="phone"] .settings-list b,
html[data-device-layout="phone"] .settings-list output { font-size: 28px; }
html[data-device-layout="phone"] .settings-list .select-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
html[data-device-layout="phone"] .settings-list .toggle-row { min-height: 88px; }

/* Keep the mobile Crossroads visible. Details are an explicit, temporary
   expansion, not a permanent card over the navigation artwork. */
.map-details-toggle { display: none; }
#btnArcadeTitle, #btnArcadeMarket {
  background: linear-gradient(110deg,#ad235e,#7438b0,#176dba,#137b68,#9b7621,#ad235e);
  background-size: 400% 100%; color: #fff; border: 2px solid #f3d7ff;
  text-shadow: 0 2px 3px #000; box-shadow: 0 0 14px #c66cff88, inset 0 0 10px #ffffff33;
  animation: arcade-rainbow 7s linear infinite;
}
@keyframes arcade-rainbow { to { background-position: 400% 0; filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #btnArcadeTitle, #btnArcadeMarket { animation: none; } }
.tomb-puzzle-board[data-puzzle-type="wanted"] { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 2px; background: #071019; padding: 6px; align-content: start; max-height: 240px; overflow: auto; }
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) .tomb-puzzle-layout { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) .tomb-puzzle-board { order: -1; }
#tombPuzzleScreen:has([data-puzzle-type="wanted"]):not(.help-open) #tombPuzzleInstructions,
#tombPuzzleScreen:has([data-puzzle-type="wanted"]):not(.help-open) #tombPuzzleClue,
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) #tombPuzzleProgress { display: none; }
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) #btnPuzzleHelp { display: block; }
.wanted-poster { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; background: #e8d8af; color: #351e21; padding: 8px; font: bold 16px sans-serif; position: sticky; top: 0; z-index: 2; }
.wanted-poster img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.tomb-puzzle-board[data-puzzle-type="wanted"] { position: relative; isolation: isolate; }
.wanted-poster { z-index: 4; }
.wanted-crowd { position: relative; height: 200px; overflow: hidden; isolation: isolate; }
.wanted-crowd.wanted-intro::after { content: attr(data-round); position: absolute; inset: 0; display: grid; place-items: center; background: #071019; color: #ffe475; font-size: 26px; z-index: 200; }
.wanted-crowd.wanted-intro .tomb-puzzle-cell { visibility: hidden; }
.wanted-crowd.wanted-found { background: #f5dc68; }
.wanted-bonus { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 96px; color: #157842; text-shadow: 3px 3px #fff; z-index: 150; pointer-events: none; }
html[data-device-layout="phone"] .wanted-bonus { font-size: 120px; }
html[data-device-layout="phone"] .wanted-crowd.wanted-intro::after { font-size: 40px; }
.tomb-puzzle-board[data-puzzle-type="wanted"] .wanted-crowd .tomb-puzzle-cell { position: absolute; width: 52px; height: 60px; border-radius: 50%; }
html[data-device-layout="phone"] .wanted-crowd { height: 300px; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="wanted"] .wanted-crowd .tomb-puzzle-cell { width: 88px; height: 88px; }
.tomb-puzzle-board[data-puzzle-type="wanted"], html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="wanted"] { display: block; max-height: none; overflow: hidden; }
.wanted-penalty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 96px; color: #ff405c; text-shadow: 3px 3px #000; z-index: 20; pointer-events: none; }
.wanted-penalty[hidden], .wanted-pause-menu[hidden] { display: none; }
.wanted-controls { position: absolute; top: 12px; right: 12px; z-index: 25; }
.wanted-controls .button { min-height: 44px; font-size: 16px; }
.wanted-pause-menu { position: absolute; inset: 0; z-index: 30; background: #071019ed; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.wanted-pause-menu .button { min-height: 48px; font-size: 18px; }
.wanted-pause-menu h2 { font-size: 28px; }
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) { padding: 0; overflow: hidden; }
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) .tomb-puzzle-card { width: 100%; height: 100%; max-height: none; padding: 0; border: 0; border-radius: 0; overflow: hidden; }
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) .tomb-puzzle-card > header,
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) .tomb-puzzle-guide,
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) .tomb-puzzle-actions { display: none; }
#tombPuzzleScreen:has([data-puzzle-type="wanted"]) .tomb-puzzle-layout { height: 100%; gap: 0; }
#tombPuzzleScreen #tombPuzzleBoard[data-puzzle-type="wanted"] { height: 100%; max-height: none; padding: 0; display: flex; flex-direction: column; }
#tombPuzzleScreen .wanted-poster { flex: 0 0 30%; min-height: 150px; max-height: 230px; display: flex; flex-wrap: nowrap; gap: clamp(24px,5cqw,80px); padding: 12px; background: #080b10; color: #ffe472; border-bottom: 2px solid #65512c; box-sizing: border-box; }
#tombPuzzleScreen .wanted-bounty { align-self: stretch; width: 170px; max-width: 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 12px; box-sizing: border-box; color: #3a261b; border: 3px double #8e693e; background: repeating-linear-gradient(0deg,#0000 0 3px,#7d592509 3px 4px),linear-gradient(105deg,#b38d51,#f3dfac 15%,#e7c88b 80%,#b38d51); box-shadow: 3px 4px 0 #0008; font-family: Georgia,serif; }
#tombPuzzleScreen .wanted-bounty > strong { font-size: 27px; letter-spacing: .12em; line-height: 1; }
#tombPuzzleScreen .wanted-bounty > span { font-size: 15px; font-weight: bold; text-align: center; line-height: 1.1; }
#tombPuzzleScreen .wanted-bounty-portrait { position: relative; flex: 1 1 0; min-height: 0; width: 100%; background: #312c27; border: 1px solid #73532e; overflow: hidden; }
#tombPuzzleScreen .wanted-bounty-portrait img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center; }
#tombPuzzleScreen .wanted-timer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--display); }
#tombPuzzleScreen .wanted-timer > span { font-size: 18px; letter-spacing: .12em; }
#tombPuzzleScreen #wantedClock { font-size: clamp(64px,10cqw,120px); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 4px 4px #000; }
#tombPuzzleScreen .wanted-timer .wanted-score { font-size: 14px; color: #d9d2b9; }
html[data-device-layout="phone"] #tombPuzzleScreen .wanted-poster { min-height: 210px; max-height: 300px; }
html[data-device-layout="phone"] #tombPuzzleScreen .wanted-bounty { width: 210px; }
html[data-device-layout="phone"] #tombPuzzleScreen .wanted-bounty > strong { font-size: 36px; }
html[data-device-layout="phone"] #tombPuzzleScreen .wanted-bounty > span { font-size: 24px; }
html[data-device-layout="phone"] #tombPuzzleScreen .wanted-bounty-portrait img { max-height: none; }
html[data-device-layout="phone"] #tombPuzzleScreen .wanted-timer > span { font-size: 28px; }
html[data-device-layout="phone"] #tombPuzzleScreen #wantedClock { font-size: 120px; }
html[data-device-layout="phone"] #tombPuzzleScreen .wanted-timer .wanted-score { font-size: 22px; }
#tombPuzzleScreen .wanted-crowd { flex: 1 1 auto; height: auto; min-height: 0; }
.game-frame:has(#tombPuzzleScreen:not([hidden]) [data-puzzle-type="wanted"]) #btnGlobalMute { display: inline-flex; top: 68px; bottom: auto; right: 12px; min-height: 44px; font-size: 16px; }
.wanted-spotlight { position: absolute; inset: 0 0 auto; pointer-events: none; z-index: 3; background: radial-gradient(circle 85px at var(--light-x,50%) var(--light-y,65%),transparent 55%,rgba(0,0,0,.2) 75%,#000 100%); }
html[data-device-layout="phone"] .wanted-spotlight { background: radial-gradient(circle 150px at var(--light-x,50%) var(--light-y,65%),transparent 55%,rgba(0,0,0,.2) 75%,#000 100%); }
@media(prefers-reduced-motion:reduce) { .wanted-moving .tomb-puzzle-cell { animation:none; } }
.tomb-puzzle-board[data-puzzle-type="wanted"] .tomb-puzzle-cell { min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 2px solid transparent; box-shadow: none; }
.tomb-puzzle-board[data-puzzle-type="wanted"] .tomb-puzzle-cell.is-lit { border-color: #ffe070; background: #816622; }
.tomb-puzzle-board[data-puzzle-type="wanted"] .tomb-puzzle-symbol img { display: block; width: 100%; height: 56px; object-fit: contain; image-rendering: pixelated; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="wanted"] { grid-template-columns: repeat(5,minmax(0,1fr)); max-height: 410px; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="wanted"] .tomb-puzzle-cell { min-height: 88px; min-width: 0; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="wanted"] .tomb-puzzle-symbol img { height: 80px; }
html[data-device-layout="phone"] .wanted-poster { font-size: 24px; }
html[data-device-layout="phone"] .wanted-poster img { width: 80px; height: 80px; }
.arcade-card { width: min(850px, 95%); max-height: 96%; overflow: auto; }
.arcade-games { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.arcade-games .button { white-space: normal; min-height: 60px; text-align: left; line-height: 1.4; }
.arcade-control-hint { font-size: 14px; }
#btnPuzzleHelp { display: none; }
.arcade-market-entry { position: absolute; left: 24px; bottom: 24px; }
.tomb-puzzle-board[data-puzzle-type="arrows"] { display: block; overflow: auto; max-height: 460px; min-width: 0; background: #07151d; border-radius: 12px; }
.winding-arrow { cursor: pointer; outline: none; }
.winding-arrow.is-escaping .arrow-line { stroke: #8affd5; }
.winding-arrow[aria-disabled="true"] { pointer-events: none; }
.arrow-zoom { min-height: 44px; width: 100%; font-size: 12px; }
html[data-device-layout="phone"] .arrow-zoom { min-height: 88px; font-size: 24px; }
.winding-arrow path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.winding-arrow .arrow-line { stroke: var(--arrow-color,#cde9ee); stroke-width: .17; pointer-events: none; }
.winding-arrow .arrow-tip { stroke-width: .22; }
.winding-arrow .arrow-hit { stroke: transparent; stroke-width: .85; pointer-events: stroke; }
.winding-arrow:hover .arrow-line, .winding-arrow:focus .arrow-line { stroke: #fff0a3; stroke-width: .23; }
.tomb-puzzle-board[data-puzzle-type="arrows"] .tomb-puzzle-cell { min-width: 44px; min-height: 44px; padding: 4px; aspect-ratio: 1; }
.tomb-puzzle-board .tomb-puzzle-cell.is-escaped { opacity: 0.12; border-style: dashed; }
.game-frame button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
html[data-device-layout="phone"] .arcade-card { width: 100%; padding: 22px; max-height: 100%; }
html[data-device-layout="phone"] .arcade-card h2 { font-size: 40px; }
html[data-device-layout="phone"] .arcade-card p { font-size: 28px; line-height: 1.4; }
html[data-device-layout="phone"] .arcade-games { grid-template-columns: 1fr; }
html[data-device-layout="phone"] .arcade-games .button { min-height: 88px; font-size: 28px; padding: 16px; }
html[data-device-layout="phone"] #btnArcadeBack { min-height: 88px; font-size: 28px; }
html[data-device-layout="phone"] .arcade-market-entry { left: 12px; bottom: 140px; min-height: 88px; padding: 12px 18px; font-size: 25px; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="arrows"] .tomb-puzzle-cell { min-width: 88px; min-height: 88px; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="arrows"] .tomb-puzzle-symbol { font-size: 56px; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="arrows"] { overflow: auto; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="arrows"] { width: 100%; max-width: 100%; max-height: 500px; }
html[data-device-layout="phone"] .tomb-puzzle-board[data-puzzle-type="arrows"] svg { min-width: 100%; }
html[data-device-layout="phone"] .tomb-puzzle-layout { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
html[data-device-layout="phone"] .tomb-puzzle-board { order: -1; }
html[data-device-layout="phone"] #tombPuzzleScreen:not(.help-open) #tombPuzzleInstructions,
html[data-device-layout="phone"] #tombPuzzleScreen:not(.help-open) #tombPuzzleClue { display: none; }
html[data-device-layout="phone"] #btnPuzzleHelp { display: block; }
html[data-device-layout="phone"] .game-frame:has(#arcadeScreen:not([hidden])) .global-mute-button,
html[data-device-layout="phone"] .game-frame:has(#tombPuzzleScreen:not([hidden])) .global-mute-button { display: none; }
html[data-device-layout="phone"] .title-screen { overflow-y: auto; }
html[data-device-layout="phone"] .title-layout { min-height: 100%; height: auto; padding: 24px; }
html[data-device-layout="phone"] .title-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; }
html[data-device-layout="phone"] .title-actions .button { min-height: 88px; padding: 16px; font-size: 28px; line-height: 1.3; white-space: normal; }
html[data-device-layout="phone"] .title-actions .button-primary small { font-size: 20px; }
html[data-device-layout="phone"] .game-frame > .title-screen .title-lede { font-size: 24px; line-height: 1.35; }
html[data-device-layout="phone"] .game-frame:has(#titleScreen:not([hidden])) .global-mute-button { display: none; }
html[data-device-layout="phone"] .game-frame:has(#mapOverlay:not([hidden])) .global-mute-button {
  top: 6px; left: 6px; right: auto; bottom: auto;
}
html[data-device-layout="phone"] #resultScreen { padding: 18px; }
/* The handheld player below the screen remains available; do not cover results. */
html[data-device-layout="phone"] .game-frame:has(#resultScreen:not([hidden])) .global-mute-button { display: none; }
html[data-device-layout="phone"] #resultScreen .result-card {
  width: 100%; max-width: none; max-height: 100%; padding: 20px; overflow: auto;
}
html[data-device-layout="phone"] #resultScreen .result-crown { display: none; }
html[data-device-layout="phone"] #resultScreen .eyebrow { font-size: 22px; margin: 0 0 8px; }
html[data-device-layout="phone"] #resultScreen h2 { font-size: 36px; margin: 0 0 16px; }
html[data-device-layout="phone"] #resultScreen .result-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 16px; }
html[data-device-layout="phone"] #resultScreen .result-stats div { min-height: 70px; padding: 8px; }
html[data-device-layout="phone"] #resultScreen .result-stats span { font-size: 20px; letter-spacing: 0; }
html[data-device-layout="phone"] #resultScreen .result-stats strong { font-size: 28px; }
html[data-device-layout="phone"] #resultScreen .result-actions { grid-template-columns: 1fr; gap: 12px; }
html[data-device-layout="phone"] #resultScreen .result-actions .button {
  min-width: 0; min-height: 88px; padding: 12px; font-size: 28px; white-space: normal; line-height: 1.3;
}
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) { background: none; }
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) .world-heading { display: none; }
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) .map-topbar {
  position: absolute; top: 12px; right: 12px; left: auto;
  display: flex; width: auto; padding: 0;
}
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) .map-actions .button { flex: none; padding: 12px 18px; }
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) .course-dossier {
  top: auto; bottom: 12px; left: 12px; right: 12px; width: auto;
  max-height: 65%; padding: 12px; display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 88px; gap: 10px;
  align-items: center; border-radius: 8px; box-shadow: none;
  background: rgba(1, 10, 14, 0.88); backdrop-filter: none;
}
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) .course-dossier > .eyebrow,
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) .dossier-number,
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market):not(.details-open) #mapDetails { display: none; }
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) .course-dossier h3 {
  margin: 0; font-size: 28px; line-height: 1.25; white-space: normal;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) #btnEnterCourse,
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) #btnMapDetails {
  min-height: 88px; margin: 0; padding: 10px; width: 100%;
}
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market) #btnMapDetails { display: block; font-size: 36px; }
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market).details-open .course-dossier h3 { grid-column: 1 / -1; white-space: normal; }
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market).details-open #mapDetails { display: block; grid-column: 1 / -1; }
html[data-device-layout="phone"] #mapOverlay:is(.is-lobby, .is-market).details-open #btnEnterCourse { grid-column: 2; }
html[data-device-layout="phone"] #mapOverlay.is-market.details-open #mapDetails > p {
  display: block; margin: 0; font-size: 28px; line-height: 1.35;
}

/* Phone menus share a compact map dock and fixed puzzle header/actions.
   The interface stage is 2x the physical display; 88px is a 44px target. */
.game-frame .menu-selected { outline: 3px solid #fff2a6; outline-offset: -3px; box-shadow: inset 0 0 0 5px #00c7df80; }
#btnMapMenu[aria-pressed="true"] { background: #07515c; color: #fff; }
html[data-device-layout="phone"] #mapOverlay .world-heading { display: none; }
html[data-device-layout="phone"] #mapOverlay .map-topbar {
  position: absolute; inset: 12px 12px auto auto; display: flex; width: auto; padding: 0; max-width: calc(100% - 24px);
}
html[data-device-layout="phone"] #mapOverlay .map-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
html[data-device-layout="phone"] #mapOverlay .map-actions .button {
  flex: none; min-width: 88px; min-height: 88px; padding: 12px 16px; font: 700 28px/1.15 Arial,sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
html[data-device-layout="phone"] #mapOverlay .map-actions :is(#btnMapMenu,#btnBackCrossroads) { width: 88px; padding: 10px; font-size: 26px; }
html[data-device-layout="phone"] #mapOverlay .map-actions #btnChangeCharacter { width: 112px; padding: 10px; font-size: 26px; }
html[data-device-layout="phone"] #mapOverlay .course-dossier {
  inset: auto 12px 12px; width: auto; max-height: 62%; padding: 12px; display: grid;
  grid-template-columns: minmax(0,1fr) 100px 88px; gap: 10px; align-items: center;
  border-radius: 8px; box-shadow: none; background: #010c11ee; backdrop-filter: none; overflow: auto;
}
html[data-device-layout="phone"] #mapOverlay .course-dossier > .eyebrow,
html[data-device-layout="phone"] #mapOverlay .dossier-number,
html[data-device-layout="phone"] #mapOverlay:not(.details-open) #mapDetails { display: none; }
html[data-device-layout="phone"] #mapOverlay .course-dossier h3 {
  margin: 0; min-width: 0; font-size: 28px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere;
}
html[data-device-layout="phone"] #mapOverlay #btnEnterCourse,
html[data-device-layout="phone"] #mapOverlay #btnMapDetails { display: block; width: 100%; min-height: 88px; padding: 10px; margin: 0; }
html[data-device-layout="phone"] #mapOverlay #btnMapDetails { font-size: 34px; }
html[data-device-layout="phone"] #mapOverlay.details-open .course-dossier { grid-template-rows: auto minmax(0,1fr) auto; }
html[data-device-layout="phone"] #mapOverlay.details-open .course-dossier h3 { grid-column: 1 / -1; }
html[data-device-layout="phone"] #mapOverlay.details-open #mapDetails { display: block; grid-column: 1 / -1; overflow: auto; min-height: 0; }
html[data-device-layout="phone"] #mapOverlay.details-open #btnEnterCourse { grid-column: 2; }
html[data-device-layout="phone"] #mapOverlay .map-details > p { font-size: 26px; line-height: 1.25; margin: 0 0 8px; }
html[data-device-layout="phone"] #mapOverlay .map-details ul { margin: 0; }
html[data-device-layout="phone"] #mapOverlay .map-details li { min-height: 40px; padding: 4px 0; gap: 10px; }
html[data-device-layout="phone"] #mapOverlay .map-details li :is(span,b) { font-size: 26px; line-height: 1.2; }
html[data-device-layout="phone"] #mapOverlay .crossroads-dock { top: 12px; left: 12px; bottom: auto; width: 130px; }
html[data-device-layout="phone"] #mapOverlay .crossroads-dock button { width: 100%; min-width: 0; min-height: 88px; padding: 10px; justify-content: center; }
html[data-device-layout="phone"] #mapOverlay .crossroads-dock :is(small,.dock-icon) { display: none; }
html[data-device-layout="phone"] #mapOverlay .crossroads-dock b { font: 700 28px/1.15 Arial,sans-serif; }
html[data-device-layout="phone"] #btnArcadeMarket { top: 12px; left: 12px; bottom: auto; min-height: 88px; padding: 12px; font-size: 26px; }
html[data-device-layout="phone"] .game-frame:has(#mapOverlay:not([hidden])) #btnGlobalMute { display: none; }
html[data-device-layout="phone"] #mapOverlay.is-menu-navigation .course-dossier { border-color: #fff2a6; }

html[data-device-layout="phone"] #resultScreen .result-card { box-sizing: border-box; padding: 20px; overflow: auto; }
html[data-device-layout="phone"] #resultScreen .result-actions { display: grid; grid-template-columns: minmax(0,1fr); }
html[data-device-layout="phone"] #resultScreen .result-actions .button { width: 100%; max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
html[data-device-layout="phone"] #resultScreen .result-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
html[data-device-layout="phone"] #resultScreen .result-stats div { min-width: 0; }
html[data-device-layout="phone"] #resultScreen .result-stats span { font-size: 22px; }

html[data-device-layout="phone"] #tombPuzzleScreen:not(:has([data-puzzle-type="wanted"])) { padding: 12px; overflow: hidden; }
html[data-device-layout="phone"] #tombPuzzleScreen:not(:has([data-puzzle-type="wanted"])) .tomb-puzzle-card {
  height: 100%; max-height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; padding: 16px;
  display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 12px;
}
html[data-device-layout="phone"] #tombPuzzleScreen .tomb-puzzle-card > header .eyebrow { font-size: 22px; }
html[data-device-layout="phone"] #tombPuzzleScreen .tomb-puzzle-card > header h2 { font-size: 32px; line-height: 1.15; margin: 4px 0 0; }
html[data-device-layout="phone"] #tombPuzzleScreen:not(:has([data-puzzle-type="wanted"])) .tomb-puzzle-layout {
  display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); min-height: 0; gap: 8px;
}
html[data-device-layout="phone"] #tombPuzzleScreen .tomb-puzzle-guide { min-height: 0; overflow: auto; font-size: 28px; }
html[data-device-layout="phone"] #tombPuzzleScreen:not(.help-open) :is(#tombPuzzleInstructions,#tombPuzzleClue,#tombPuzzleProgress) { display: none; }
html[data-device-layout="phone"] #tombPuzzleScreen #tombPuzzleStatus { margin: 0; min-height: 0; font-size: 28px; line-height: 1.2; }
html[data-device-layout="phone"] #tombPuzzleScreen.help-open .tomb-puzzle-guide { max-height: 160px; }
html[data-device-layout="phone"] #tombPuzzleScreen #tombPuzzleBoard:not([data-puzzle-type="wanted"]) { order: 0; min-height: 0; max-height: 100%; overflow: auto; align-content: stretch; }
html[data-device-layout="phone"] #tombPuzzleScreen .tomb-puzzle-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
html[data-device-layout="phone"] #tombPuzzleScreen .tomb-puzzle-actions .button { flex: 1 1 auto; min-height: 88px; min-width: 88px; padding: 10px 14px; font-size: 26px; line-height: 1.15; white-space: normal; }
html[data-device-layout="phone"] #tombPuzzleScreen .tomb-puzzle-actions #btnPuzzleHelp { flex: 0 0 136px; font-size: 22px; }
html[data-device-layout="phone"] .game-frame:has(#tombPuzzleScreen:not([hidden]) #tombPuzzleBoard:not([data-puzzle-type="wanted"])) #btnGlobalMute { display: none; }

.arcade-games .button { display: flex; align-items: center; gap: 16px; padding: 16px; }
.mini-game-icon { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #406778; border-radius: 10px; background: #0c2631; color: #99dbe8; }
.mini-game-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mini-game-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mini-game-copy strong { font-size: 16px; line-height: 1.35; }
.mini-game-copy small { color: #9ab3be; font: 13px/1.3 Arial,sans-serif; letter-spacing: 0; }
html[data-device-layout="phone"] .mini-game-icon { flex-basis: 88px; width: 88px; height: 88px; }
html[data-device-layout="phone"] .mini-game-icon svg { width: 60px; height: 60px; }
html[data-device-layout="phone"] .mini-game-copy strong { font-size: 28px; }
html[data-device-layout="phone"] .mini-game-copy small { font-size: 24px; }
html[data-device-layout="phone"] .arcade-card h2 { font-size: 34px; line-height: 1.3; }
#tombPuzzleScreen:has([data-puzzle-type="arrows"]) .tomb-puzzle-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
#tombPuzzleBoard[data-puzzle-type="arrows"] { padding: 12px; background: #0c1520; border: 1px solid #344858; border-radius: 12px; }
#tombPuzzleBoard[data-puzzle-type="arrows"] svg { display: block; min-height: 300px; margin: auto; }
.arrow-zoom { position: absolute; right: 0; top: 0; width: 64px; padding: 8px; margin: 0; background: #172635; border: 1px solid #405569; box-shadow: none; font-family: Arial,sans-serif; letter-spacing: 0; }
#tombPuzzleScreen:has([data-puzzle-type="arrows"]) .tomb-puzzle-card > header { position: relative; padding-right: 82px; }
html[data-device-layout="phone"] #tombPuzzleScreen .arrow-zoom { width: 88px; padding: 8px; font: 700 26px/1 Arial,sans-serif; }
html[data-device-layout="phone"] #tombPuzzleScreen:has([data-puzzle-type="arrows"]) .tomb-puzzle-card > header { padding-right: 100px; }
html[data-device-layout="phone"] #tombPuzzleBoard[data-puzzle-type="arrows"] { display: flex; flex-direction: column; }
html[data-device-layout="phone"] #tombPuzzleBoard[data-puzzle-type="arrows"] svg { flex: 1 1 auto; min-height: 0; width: 100%; }