:root {
  --sumi: #0a0d14; /* sumi ink — the night behind the shrine */
  --sumi-deep: #05070c;
  --washi: #f2ece2; /* washi paper */
  --washi-dim: rgba(242, 236, 226, 0.6);
  --foxfire: #6ecbff; /* THE foxfire accent — kitsune-bi */
  --foxfire-bright: #c4eeff;
  --foxfire-dim: rgba(110, 203, 255, 0.38);
  --foxfire-faint: rgba(110, 203, 255, 0.16);
  --foxfire-deep: #2e7fb8;
  --oni: #c22f20; /* oni lacquer crimson — danger only */
  --oni-bright: #ff5e4d;
  --oni-deep: #7c130d;
  --kin: #c9a24b; /* kin — shrine leaf-gold */
  --kin-bright: #f2cd72;
  --kin-dim: rgba(201, 162, 75, 0.38);
  --ai: #1b3a5c; /* aizome indigo cloth */
  --ai-bright: #3a6f9e;
  --panel: rgba(10, 14, 22, 0.86);
  --panel-solid: rgba(9, 12, 19, 0.97);
  --hairline: rgba(110, 203, 255, 0.34);
  --sumi-edge: rgba(0, 0, 0, 0.65);
  --bg-glass: rgba(10, 14, 22, 0.62);
  --hp: #ff4f56;
  --stam: #f5c518;
  --xp: #6ecbff;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080b12;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  color: var(--washi);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
canvas {
  display: block;
  outline: none;
}
#app {
  position: fixed;
  inset: 0;
}
::selection {
  background: rgba(110, 203, 255, 0.35);
}

/* ============== HUD CHROME ============== */
.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* ===== Blood Rite (Akane's crimson mist) screen effect — bold pulsing
         red vignette + on-screen text so the frenzy is impossible to miss. ===== */
.bloodlust-tint {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 20, 30, 0) 28%,
    rgba(200, 20, 30, 0.28) 62%,
    rgba(150, 10, 18, 0.62) 100%
  );
}
.bloodlust-tint.show {
  opacity: 1;
  animation: bloodlustPulse 1.1s ease-in-out infinite;
}
@keyframes bloodlustPulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
/* The text block — pinned high-center, pulses while active */
.bloodlust-text {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  text-shadow:
    0 0 22px rgba(255, 40, 60, 0.9),
    0 3px 10px rgba(0, 0, 0, 0.8);
}
.bloodlust-tint.show .bloodlust-text {
  animation:
    bloodlustTextIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) forwards,
    bloodlustTextPulse 1.1s ease-in-out 0.5s infinite;
}
@keyframes bloodlustTextIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(2.2);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes bloodlustTextPulse {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}
.bloodlust-tag {
  font-family: "Shippori Mincho", serif;
  font-size: 22px;
  letter-spacing: 0.18em;
  color: #ffd0d0;
  margin-bottom: 2px;
}
.bloodlust-name {
  font-family: "Yuji Syuku", serif;
  font-size: 52px;
  letter-spacing: 0.1em;
  color: #ff3a4a;
  -webkit-text-stroke: 1px rgba(255, 200, 200, 0.5);
}
.bloodlust-sub {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.4em;
  color: #ffe0a0;
  margin-top: 4px;
}

/* ===== Large side-of-screen HORAGAI indicator (held-item prompt)
         — the player's boon, so it wears the foxfire, never the oni's red. */
.horn-indicator {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%) translateX(40px);
  z-index: 8;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 22, 38, 0.85),
    rgba(5, 10, 20, 0.72)
  );
  border: 2px solid var(--foxfire);
  box-shadow:
    0 0 28px rgba(110, 203, 255, 0.45),
    inset 0 0 22px rgba(110, 203, 255, 0.15),
    0 8px 30px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  opacity: 0;
  text-align: center;
}
.horn-indicator.show {
  display: flex;
  opacity: 1;
  animation:
    hornIn 0.4s ease,
    hornPulse 1.6s ease-in-out 0.4s infinite;
}
@keyframes hornIn {
  from {
    transform: translateY(-50%) translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }
}
@keyframes hornPulse {
  0%,
  100% {
    box-shadow:
      0 0 28px rgba(110, 203, 255, 0.45),
      inset 0 0 22px rgba(110, 203, 255, 0.15),
      0 8px 30px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow:
      0 0 46px rgba(110, 203, 255, 0.8),
      inset 0 0 30px rgba(110, 203, 255, 0.3),
      0 8px 30px rgba(0, 0, 0, 0.6);
  }
}
.horn-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 35%,
    #c9ecff 0%,
    #3f9fd6 45%,
    #0e2c44 100%
  );
  box-shadow:
    0 0 26px rgba(110, 203, 255, 0.75),
    inset 0 0 14px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hornSpin 3s linear infinite;
}
.horn-core {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #ffffff 0%,
    #dff4ff 60%,
    transparent 100%
  );
  box-shadow: 0 0 16px rgba(223, 244, 255, 0.95);
}
@keyframes hornSpin {
  to {
    transform: rotate(360deg);
  }
}
.horn-label {
  font-family: "Shippori Mincho", serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--foxfire-bright);
  text-shadow: 0 0 10px rgba(110, 203, 255, 0.6);
}
.horn-key {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--washi);
  margin-top: 2px;
}
.horn-key span {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  margin-left: 4px;
  border: 1.5px solid var(--foxfire);
  border-radius: 4px;
  background: rgba(110, 203, 255, 0.16);
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0 12px rgba(110, 203, 255, 0.45);
}
.horn-sub {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--washi-dim);
}
/* Shrine panel: indigo fill, foxfire hairline, sumi edge, blade fittings */
.hud .top-left,
.hud .top-center,
.hud .top-right {
  background: linear-gradient(
    180deg,
    rgba(14, 20, 32, 0.88) 0%,
    rgba(7, 11, 18, 0.88) 100%
  );
  border: 1px solid var(--hairline);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(242, 236, 226, 0.06),
    0 10px 28px rgba(4, 6, 12, 0.45);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
/* the Foxfire Mark — corner fittings (blade-point brackets) */
.hud .top-left::before,
.hud .top-center::before,
.hud .top-right::before,
.hud .top-left::after,
.hud .top-center::after,
.hud .top-right::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
  border-style: solid;
  border-color: var(--foxfire);
}
.hud .top-left::before,
.hud .top-center::before,
.hud .top-right::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}
.hud .top-left::after,
.hud .top-center::after,
.hud .top-right::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.hud .top-left {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 320px;
  padding: 13px 16px 14px;
}
.level-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(110, 203, 255, 0.24);
  padding-bottom: 9px;
}
.level-text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--washi-dim);
  font-weight: 700;
}
.level-num {
  font-family: "Yuji Syuku", serif;
  font-size: 32px;
  color: var(--foxfire);
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 0 18px rgba(110, 203, 255, 0.4);
}
.player-name {
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  color: var(--washi);
  margin-left: auto;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  opacity: 0.92;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.stat-row:last-child {
  margin-bottom: 0;
}
.stat-label {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--washi-dim);
  width: 34px;
  text-align: right;
  font-weight: 700;
}
.bar {
  flex: 1;
  position: relative;
  height: 13px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72),
    rgba(8, 11, 18, 0.6)
  );
  border: 1px solid rgba(110, 203, 255, 0.4);
  overflow: hidden;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(242, 236, 226, 0.05);
}
.bar-ghost {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: rgba(196, 238, 255, 0.8);
}
.bar-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transition: transform 0.12s ease-out;
}
.bar-fill::after {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0)
  );
}
.bar-fill.hp {
  background: linear-gradient(180deg, #ff6b5e 0%, #e03a30 55%, #9e1f17 100%);
}
.bar-fill.stam {
  background: linear-gradient(180deg, #ffe66a 0%, #f5c518 55%, #b8900f 100%);
}
/* XP wears the foxfire — spirit gathered from the fallen */
.bar-fill.xp {
  background: repeating-linear-gradient(
      -55deg,
      rgba(255, 255, 255, 0.14) 0 2px,
      transparent 2px 7px
    ),
    linear-gradient(180deg, #c4eeff 0%, #6ecbff 55%, #2e7fb8 100%);
}
.stat-num {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--washi);
  opacity: 0.92;
  min-width: 56px;
  text-align: right;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
/* low-HP alarm — set by JS on the panel */
.top-left.hp-low {
  animation: hpLowPulse 1.1s ease-in-out infinite;
}
.top-left.hp-low .bar-fill.hp {
  filter: saturate(1.25) brightness(1.1);
}
@keyframes hpLowPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px var(--sumi-edge),
      0 10px 28px rgba(4, 6, 12, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(194, 47, 32, 0.9),
      0 0 26px rgba(194, 47, 32, 0.45),
      0 10px 28px rgba(4, 6, 12, 0.45);
  }
}

.hud .top-center {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 10px 30px 11px;
  min-width: 240px;
}
.wave-eyebrow {
  font-family: "Shippori Mincho", serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--foxfire);
  text-transform: uppercase;
  margin-bottom: 3px;
  text-shadow: 0 0 12px rgba(110, 203, 255, 0.4);
}
.wave-number {
  font-family: "Yuji Syuku", serif;
  font-size: 30px;
  line-height: 1;
  color: var(--washi);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.6),
    0 0 22px rgba(110, 203, 255, 0.18);
}
.wave-meta {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--washi-dim);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.wave-meta b {
  color: var(--kin-bright);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.hud .top-right {
  position: absolute;
  top: 16px;
  right: 16px;
  text-align: right;
  padding: 12px 16px;
  min-width: 170px;
}
.ko-label {
  font-family: "Shippori Mincho", serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--washi-dim);
  text-transform: uppercase;
}
.ko-num {
  font-family: "Yuji Syuku", serif;
  font-size: 32px;
  line-height: 1.05;
  color: var(--foxfire);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.6),
    0 0 20px rgba(110, 203, 255, 0.32);
  font-variant-numeric: tabular-nums;
}
.timer-row {
  margin-top: 5px;
  font-size: 10px;
  color: var(--washi-dim);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.timer-row b {
  color: var(--washi);
}

/* ============== SKILL BAR ============== */
.hud .bottom-bar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  padding: 7px;
  background: linear-gradient(
    180deg,
    rgba(14, 20, 32, 0.82) 0%,
    rgba(7, 11, 18, 0.86) 100%
  );
  border: 1px solid var(--hairline);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    0 10px 28px rgba(4, 6, 12, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.skill-slot {
  width: 54px;
  height: 54px;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(17, 24, 36, 0.9),
    rgba(8, 11, 17, 0.95)
  );
  border: 1px solid rgba(110, 203, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(242, 236, 226, 0.07),
    inset 0 -4px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.skill-slot.locked {
  background: rgba(4, 6, 11, 0.6);
  border: 1px dashed rgba(110, 203, 255, 0.26);
  box-shadow: none;
}
.skill-slot.locked .skill-icon {
  font-size: 24px;
  color: rgba(242, 236, 226, 0.28);
  font-family: "Yuji Syuku", serif;
  filter: none;
}
.skill-slot.locked .skill-key {
  color: rgba(242, 236, 226, 0.55);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(110, 203, 255, 0.26);
}
.skill-icon {
  font-size: 27px;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 6px rgba(110, 203, 255, 0.28));
}
.skill-key {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 8px;
  color: var(--foxfire);
  font-weight: 900;
  letter-spacing: 0.06em;
  background: rgba(4, 6, 11, 0.92);
  padding: 1px 4px;
  border: 1px solid rgba(110, 203, 255, 0.42);
}
.skill-cooldown {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 8, 0.78);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.05s linear;
}
.skill-level {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 8px;
  color: var(--sumi);
  font-weight: 900;
  background: var(--foxfire);
  padding: 1px 4px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  letter-spacing: 0.04em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============== BOSS HUD — the villain's great-bar ============== */
.boss-hud {
  position: fixed;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 56vw;
  max-width: 740px;
  min-width: 420px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  padding: 18px 26px 14px;
  background: radial-gradient(
    ellipse at center,
    rgba(4, 6, 12, 0.55) 0%,
    rgba(4, 6, 12, 0) 72%
  );
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.boss-hud.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.boss-hud-eyebrow {
  font-family: "Shippori Mincho", serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--oni-bright);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 3px;
  text-shadow:
    0 0 14px rgba(255, 94, 77, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.8);
}
.boss-hud-name {
  font-family: "Yuji Syuku", serif;
  font-size: 26px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--washi);
  text-align: center;
  margin-bottom: 9px;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.75),
    0 4px 16px rgba(0, 0, 0, 0.7),
    0 0 26px rgba(255, 94, 77, 0.2);
}
.boss-hud-bar {
  position: relative;
  height: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(16, 9, 7, 0.7));
  border: 1px solid rgba(255, 94, 77, 0.5);
  overflow: visible;
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 2px 5px rgba(0, 0, 0, 0.75),
    0 6px 20px rgba(0, 0, 0, 0.55);
}
/* foxfire finials — the ward bracketing the champion's life */
.boss-hud-bar::before,
.boss-hud-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  background: var(--foxfire);
  transform: translateY(-50%) rotate(45deg);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(110, 203, 255, 0.5);
}
.boss-hud-bar::before {
  left: -7px;
}
.boss-hud-bar::after {
  right: -7px;
}
.boss-hud-chip,
.boss-hud-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
}
.boss-hud-chip {
  background: rgba(196, 238, 255, 0.85);
  transition: transform 0.08s linear;
  transform: scaleX(1);
}
.boss-hud-fill {
  background: linear-gradient(180deg, #ff7264 0%, #c22f20 52%, #6e110b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.18s cubic-bezier(0.4, 0.05, 0.4, 1);
  transform: scaleX(1);
}
/* Enraged phase — the bar burns hotter, finials pulse */
.boss-hud.enraged .boss-hud-fill {
  background: linear-gradient(180deg, #ffc24a 0%, #ff6a2c 48%, #a82408 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 106, 44, 0.55);
}
.boss-hud.enraged .boss-hud-eyebrow {
  color: #ffb24a;
  text-shadow:
    0 0 16px rgba(255, 138, 40, 0.7),
    0 1px 0 rgba(0, 0, 0, 0.8);
}
.boss-hud.enraged .boss-hud-name {
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.75),
    0 4px 16px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(255, 106, 44, 0.4);
}
.boss-hud.enraged .boss-hud-bar::before,
.boss-hud.enraged .boss-hud-bar::after {
  background: #ffb24a;
  animation: finialPulse 0.8s ease-in-out infinite;
}
@keyframes finialPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 0 10px rgba(255, 178, 74, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 0 22px rgba(255, 106, 44, 0.95);
  }
}

/* ===== Boss cast tell — a brief color-keyed glow on the boss bar when a
         signature move begins its windup. No words: the COLOR carries the
         flavor (cyan=Tengu, bronze=Bonsho, ember=Rasetsu, violet=Tamamo) and the
         glow is peripheral so it never steals focus from the 3D threat tell. */
.boss-hud.casting .boss-hud-bar {
  animation: bossCastGlow 0.5s ease-out 1;
}
@keyframes bossCastGlow {
  0% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 0 4px 0 var(--cast-col, #fff);
  }
  40% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 0 26px 6px var(--cast-col, #fff);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 0 4px 0 var(--cast-col, #fff);
  }
}
.boss-hud.casting .boss-hud-name {
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.75),
    0 0 16px var(--cast-col, #fff);
}

/* ===== Arena-wide danger vignette — reserved for the two "the whole floor
         is the threat" moves (Rasetsu's Ashfire Rite, Tamamo's Curse),
         where there is no single in-world spot to look at. Still wordless: a
         red edge-glow blooms inward to say "find your safe spot NOW". */
.arena-danger {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.18s ease-out;
  box-shadow: inset 0 0 120px 30px rgba(194, 47, 32, 0);
}
.arena-danger.show {
  opacity: 1;
  box-shadow: inset 0 0 140px 50px rgba(194, 47, 32, 0.55);
  animation: arenaDangerPulse 0.9s ease-in-out infinite;
}
@keyframes arenaDangerPulse {
  0%,
  100% {
    box-shadow: inset 0 0 120px 36px rgba(194, 47, 32, 0.4);
  }
  50% {
    box-shadow: inset 0 0 170px 64px rgba(194, 47, 32, 0.7);
  }
}

/* ===== Tamamo's Curse countdown — tells the player exactly how long until
         the lightning falls, so reaching the charmed ring is a fair race. The
         ring itself glows foxfire in-world; the sub line matches it. */
.storm-warn {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.2s ease-out;
}
.storm-warn.show {
  opacity: 1;
}
.storm-warn-label {
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: #d8f0ff;
  text-transform: uppercase;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 18px rgba(110, 203, 255, 0.65);
}
.storm-warn-count {
  font-family: "Yuji Syuku", serif;
  font-size: 68px;
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.8),
    0 0 30px rgba(110, 203, 255, 0.85);
  animation: stormCountPulse 1s ease-in-out infinite;
}
.storm-warn-sub {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--foxfire);
  margin-top: 2px;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(110, 203, 255, 0.5);
}
@keyframes stormCountPulse {
  0%,
  100% {
    transform: scale(1);
    text-shadow:
      0 3px 0 rgba(0, 0, 0, 0.8),
      0 0 30px rgba(110, 203, 255, 0.8);
  }
  50% {
    transform: scale(1.12);
    text-shadow:
      0 3px 0 rgba(0, 0, 0, 0.8),
      0 0 44px rgba(196, 238, 255, 1);
  }
}

/* ============== WAVE BANNER ============== */
.banner {
  position: fixed;
  top: 27%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 10;
}
.banner.show {
  opacity: 1;
  animation: bannerPulse 1.6s ease-out;
}
@keyframes bannerPulse {
  0% {
    transform: translateX(-50%) scale(0.7);
    opacity: 0;
  }
  18% {
    transform: translateX(-50%) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}
.banner .eyebrow {
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  letter-spacing: 0.32em;
  color: var(--foxfire);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow:
    0 0 18px rgba(110, 203, 255, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.7);
}
.banner .title {
  font-family: "Yuji Syuku", serif;
  font-size: 96px;
  line-height: 1;
  color: var(--washi);
  letter-spacing: 0.02em;
  text-shadow:
    0 5px 0 var(--sumi-deep),
    0 8px 26px rgba(0, 0, 0, 0.65),
    0 0 50px rgba(110, 203, 255, 0.22);
}
.banner .sub {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-top: 12px;
  color: var(--foxfire-bright);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ============== LEVEL UP — prayer slips on the line ============== */
.levelup {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(13, 19, 29, 0.6) 0%,
    rgba(4, 6, 11, 0.84) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  flex-direction: column;
}
.levelup.show {
  display: flex;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.levelup .lu-title {
  font-family: "Shippori Mincho", serif;
  font-size: 20px;
  letter-spacing: 0.3em;
  color: var(--foxfire);
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 0 0 24px rgba(110, 203, 255, 0.55);
}
.levelup .lu-sub {
  font-family: "Yuji Syuku", serif;
  font-size: 58px;
  color: var(--washi);
  margin-bottom: 34px;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.5),
    0 0 34px rgba(110, 203, 255, 0.22);
}
.lu-cards {
  display: flex;
  gap: 26px;
  overflow: visible;
}
/* Each card is an ema tablet hung at the shrine — washi, iron
         nail, hemp twine — swinging as it settles. */
.lu-card {
  width: 224px;
  height: 352px;
  position: relative;
  background: repeating-linear-gradient(
      90deg,
      rgba(110, 90, 40, 0.045) 0 1px,
      transparent 1px 5px
    ),
    linear-gradient(180deg, #f9f0da 0%, #efe2c4 100%);
  border: 1px solid rgba(100, 80, 35, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 240, 0.6),
    inset 0 0 34px rgba(110, 90, 40, 0.14),
    0 14px 30px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.4);
  padding: 30px 18px 16px;
  color: #22190f;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transform-origin: top center;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
  animation: posterHang 0.65s cubic-bezier(0.25, 0.9, 0.3, 1.15) backwards;
}
/* iron nail head at the top of each poster */
.lu-card::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #d8d4c8 0%,
    #8a877a 55%,
    #3c3a32 100%
  );
  box-shadow:
    inset 0 1px 3px rgba(20, 18, 12, 0.8),
    0 1px 0 rgba(255, 252, 240, 0.8);
}
/* hemp twine running up from the nail */
.lu-card::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 2px;
  height: 24px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(154, 120, 70, 0) 0%,
    #9a7846 35%,
    #6b5230 100%
  );
}
.lu-card:nth-child(1) {
  animation-delay: 0.05s;
}
.lu-card:nth-child(2) {
  animation-delay: 0.16s;
}
.lu-card:nth-child(3) {
  animation-delay: 0.27s;
}
@keyframes posterHang {
  0% {
    transform: translateY(-46px) rotate(-3.5deg);
    opacity: 0;
  }
  55% {
    transform: translateY(4px) rotate(1.6deg);
    opacity: 1;
  }
  80% {
    transform: translateY(-2px) rotate(-0.7deg);
  }
  100% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}
.lu-card:hover {
  transform: translateY(-9px) rotate(-0.5deg) scale(1.03);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 240, 0.6),
    inset 0 0 34px rgba(110, 90, 40, 0.14),
    0 22px 48px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(110, 203, 255, 0.25);
}
.lu-card.selected {
  transform: translateY(-12px) scale(1.05);
  box-shadow:
    inset 0 0 0 2px var(--foxfire-deep),
    inset 0 0 34px rgba(46, 127, 184, 0.12),
    0 0 0 2px var(--foxfire),
    0 24px 52px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(110, 203, 255, 0.45);
}
.lu-card-rarity {
  font-family: "Shippori Mincho", serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #7c5a1e;
  text-align: center;
  margin-bottom: 7px;
}
.lu-card-name {
  font-family: "Yuji Syuku", serif;
  font-size: 26px;
  line-height: 1.1;
  margin-bottom: 6px;
  text-align: center;
  color: #1c1406;
}
.lu-card-icon {
  width: 92px;
  height: 92px;
  margin: 14px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  border: 1px solid rgba(100, 80, 35, 0.45);
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 252, 240, 0.9),
    rgba(232, 216, 180, 0.55)
  );
  box-shadow: inset 0 0 14px rgba(110, 90, 40, 0.18);
  filter: drop-shadow(0 2px 2px rgba(50, 40, 20, 0.3));
}
.lu-card-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(34, 25, 15, 0.85);
  margin-top: auto;
  font-weight: 500;
  text-align: center;
}
.lu-card-key {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--foxfire);
  color: var(--sumi);
  font-size: 11px;
  font-weight: 900;
  font-family: "Zen Kaku Gothic New", sans-serif;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(18, 40, 62, 0.4);
}
.lu-card-level {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--sumi);
  color: var(--foxfire);
  font-size: 9px;
  font-weight: 900;
  padding: 3px 7px;
  border: 1px solid var(--foxfire-deep);
  letter-spacing: 0.14em;
}
.lu-invoke {
  margin-top: 30px;
  padding: 15px 60px;
  background: linear-gradient(180deg, #c4eeff 0%, #6ecbff 55%, #2e7fb8 100%);
  color: var(--sumi);
  border: 1px solid var(--foxfire-deep);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 16px rgba(30, 110, 170, 0.5);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.2s ease,
    filter 0.2s;
}
.lu-invoke:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.lu-invoke:not(:disabled):hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 26px rgba(110, 203, 255, 0.5);
}
.lu-invoke:not(:disabled):active {
  transform: translateY(1px);
}

/* ============== SACRIFICE MODAL ============== */
.sacrifice-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(46, 10, 12, 0.55) 0%,
    rgba(12, 4, 5, 0.88) 100%
  );
  z-index: 35;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sacrifice-modal.show {
  display: flex;
  animation: fadeIn 0.45s ease;
}
.sac-tag {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--oni-bright);
  text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 0 0 16px rgba(255, 94, 77, 0.55);
}
.sac-card {
  width: 360px;
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(30, 12, 12, 0.97) 0%,
    rgba(14, 6, 7, 0.97) 100%
  );
  border: 1px solid rgba(194, 47, 32, 0.7);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(255, 120, 110, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(194, 47, 32, 0.3);
  color: var(--washi);
  margin-bottom: 22px;
}
.sac-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--oni-bright),
    transparent
  );
}
.sac-icon {
  font-size: 52px;
  text-align: center;
  margin-bottom: 8px;
  color: #ff8a7e;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
.sac-name {
  font-family: "Yuji Syuku", serif;
  font-size: 28px;
  text-align: center;
  margin-bottom: 16px;
  color: var(--washi);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.sac-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(242, 236, 226, 0.18);
}
.sac-row.sac-buff {
  border-color: rgba(110, 203, 255, 0.5);
  color: #b8e4ff;
}
.sac-row.sac-nerf {
  border-color: rgba(255, 94, 77, 0.55);
  color: #ffb3ab;
  margin-bottom: 0;
}
.sac-duration {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(201, 162, 75, 0.4);
  font-family: "Shippori Mincho", serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--kin-bright);
  text-transform: uppercase;
}
.sac-tag-chip {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  font-weight: 900;
  text-transform: uppercase;
  padding: 2px 8px;
  min-width: 54px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid currentColor;
}
.sac-actions {
  display: flex;
  gap: 18px;
}
.sac-btn {
  padding: 14px 36px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--washi);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    0 5px 14px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.sac-decline {
  background: linear-gradient(180deg, #1e2a3c 0%, #101724 100%);
  border: 1px solid rgba(242, 236, 226, 0.35);
}
.sac-accept {
  background: linear-gradient(180deg, #c4eeff 0%, #6ecbff 55%, #2e7fb8 100%);
  border: 1px solid var(--foxfire-deep);
  color: var(--sumi);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sac-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.sac-btn:active {
  transform: translateY(1px);
}

/* ============== SETTINGS BUTTON / DEV PANEL / SETTINGS ============== */
.settings-btn {
  display: none !important;
  position: fixed;
  top: 16px;
  right: 50%;
  transform: translateX(220px);
  z-index: 6;
  width: 36px;
  height: 36px;
  background: var(--bg-glass);
  border: 1px solid var(--foxfire-dim);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--washi);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition:
    transform 0.25s ease,
    border-color 0.2s,
    color 0.2s;
}
.settings-btn:hover {
  transform: translateX(220px) rotate(90deg);
  border-color: var(--foxfire);
  color: var(--foxfire);
}

.settings {
  display: none !important;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  background: linear-gradient(
    180deg,
    rgba(12, 17, 26, 0.95) 0%,
    rgba(7, 10, 16, 0.96) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--hairline);
  box-shadow: -16px 0 50px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  padding: 26px 24px;
  z-index: 30;
  overflow-y: auto;
}
.settings.show {
  transform: translateX(0);
}
.settings h2 {
  font-family: "Yuji Syuku", serif;
  font-size: 30px;
  margin-bottom: 3px;
  color: var(--foxfire);
}
.settings .sub-flavor {
  font-family: "Shippori Mincho", serif;
  color: var(--washi-dim);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.setting-group {
  margin-bottom: 19px;
}
.setting-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 7px;
  color: var(--washi-dim);
}
.setting-label b {
  color: var(--foxfire);
  font-weight: 700;
}
.setting-group input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.setting-group input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(110, 203, 255, 0.26);
  border-radius: 2px;
}
.setting-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: var(--foxfire);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  margin-top: -6px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(110, 203, 255, 0.45);
}
.setting-group input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(110, 203, 255, 0.26);
  border-radius: 2px;
}
.setting-group input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--foxfire);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  cursor: pointer;
}
.reset-btn {
  margin-top: 12px;
  width: 100%;
  padding: 11px;
  background: linear-gradient(180deg, #e8483c 0%, #c12d22 55%, #7c130d 100%);
  color: #fdf2dc;
  border: 1px solid rgba(255, 94, 77, 0.6);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    filter 0.2s,
    transform 0.15s;
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    0 4px 12px rgba(124, 19, 13, 0.4);
}
.reset-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.setting-music-group .music-mini-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.music-mini-btn {
  flex: 1;
  padding: 6px 10px;
  background: linear-gradient(180deg, #c4eeff 0%, #4fb0e8 100%);
  color: var(--sumi);
  border: 1px solid var(--foxfire-deep);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--sumi-edge);
  transition: filter 0.15s;
}
.music-mini-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}
.music-mini-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.music-mini-toggle {
  padding: 6px;
  font-size: 13px;
  letter-spacing: 0;
}
#musicStatus {
  font-size: 10px;
  opacity: 0.7;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

/* ============== TIER BANNER ============== */
.tier-banner {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translate(-50%, 0);
  pointer-events: none;
  z-index: 50;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tier-banner.show {
  opacity: 1;
}
.tier-banner-flavor {
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  letter-spacing: 0.24em;
  color: var(--kin-bright);
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(242, 205, 114, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.8);
  margin-bottom: 14px;
}
.tier-banner-num {
  font-family: "Yuji Syuku", serif;
  font-size: 76px;
  line-height: 1;
  color: var(--oni-bright);
  letter-spacing: 0.14em;
  text-shadow:
    0 5px 0 rgba(40, 8, 6, 0.9),
    0 12px 36px rgba(255, 94, 77, 0.55);
  margin-bottom: 10px;
}
.tier-banner-name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 19px;
  letter-spacing: 0.45em;
  color: var(--washi);
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

/* ============== GAME OVER — the ballad ends ============== */
.gameover {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 42%,
    rgba(24, 16, 12, 0.82) 0%,
    rgba(6, 5, 4, 0.95) 100%
  );
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 40;
  overflow: hidden;
}
.gameover.show {
  display: flex;
  animation: fadeIn 0.6s ease;
}
/* ONI — the kanji watermarks the death notice */
.gameover::before {
  content: "鬼";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-family: "Yuji Syuku", serif;
  font-size: min(80vh, 76vw);
  color: rgba(194, 47, 32, 0.08);
  pointer-events: none;
  line-height: 1;
}
.go-tag {
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  letter-spacing: 0.3em;
  color: var(--oni-bright);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 18px rgba(255, 94, 77, 0.5);
}
.go-title {
  font-family: "Yuji Syuku", serif;
  font-size: 104px;
  color: var(--washi);
  letter-spacing: 0.05em;
  text-shadow:
    0 6px 0 var(--oni-deep),
    0 10px 34px rgba(0, 0, 0, 0.75);
  margin-bottom: 30px;
}
.go-stats {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 13px 56px;
  margin-bottom: 38px;
  padding: 22px 38px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  background: rgba(7, 11, 18, 0.6);
  border: 1px solid var(--foxfire-dim);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    0 12px 34px rgba(0, 0, 0, 0.45);
}
.go-stat-label {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--washi-dim);
  text-transform: uppercase;
  align-self: center;
}
.go-stat-val {
  font-size: 22px;
  color: var(--foxfire);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.go-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  width: 280px;
  position: relative;
}
.go-restart {
  padding: 15px 36px;
  background: linear-gradient(180deg, #c4eeff 0%, #6ecbff 55%, #2e7fb8 100%);
  border: 1px solid var(--foxfire-deep);
  color: var(--sumi);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.22s;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 18px rgba(30, 110, 170, 0.5);
}
.go-restart:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 12px 32px rgba(110, 203, 255, 0.5);
}
.go-menu {
  padding: 12px 30px;
  background: rgba(10, 14, 22, 0.6);
  border: 1px solid var(--foxfire-dim);
  color: var(--washi-dim);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.22s;
  backdrop-filter: blur(6px);
}
.go-menu:hover {
  border-color: var(--foxfire);
  color: var(--washi);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* ============== SCREEN LAYERS ============== */
.flash {
  position: fixed;
  inset: 0;
  background: white;
  pointer-events: none;
  opacity: 0;
  z-index: 8;
  mix-blend-mode: screen;
}
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 42%,
    rgba(13, 19, 29, 0.5) 100%
  );
  z-index: 4;
}
.damage-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(255, 40, 40, 0.6) 100%
  );
  z-index: 7;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.death-fade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  z-index: 9;
  transition: background 1.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.death-fade.show {
  background: rgba(0, 0, 0, 0.92);
}

/* ============== LOADER + COUNTDOWN ============== */
/* ===== LOADING SCREEN — World of Warcraft style =====
         Full-bleed art fills the screen; the title sits low and the loading bar
         is pinned near the bottom with foxfire trim. Drop your image into
         BG_LOADER_SRC (top of the script) and it fills the whole background. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: #080b12;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: auto;
  overflow: hidden;
}
.loader.show {
  display: flex;
  animation: fadeIn 0.35s ease;
}
.loader.hide {
  animation: fadeOutLoader 0.5s ease forwards;
}
@keyframes fadeOutLoader {
  to {
    opacity: 0;
    pointer-events: none;
  }
}
/* Soft dark gradient along the bottom so text + bar stay legible over any art */
.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 11, 0) 45%,
    rgba(4, 6, 11, 0.35) 70%,
    rgba(4, 6, 11, 0.85) 100%
  );
}
.loader-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 900px;
  padding: 0 32px 7vh;
}
.loader-tag {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--foxfire);
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow:
    0 0 18px rgba(110, 203, 255, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.9);
}
.loader-title {
  font-family: "Yuji Syuku", serif;
  font-size: 46px;
  line-height: 1;
  color: var(--washi);
  text-shadow:
    0 3px 0 var(--sumi-deep),
    0 6px 24px rgba(0, 0, 0, 0.9);
  margin-bottom: 22px;
  letter-spacing: 0.05em;
}
/* Ornate bar frame — pointed foxfire ends, dark inset channel */
.loader-bar-wrap {
  position: relative;
  width: min(620px, 80vw);
  height: 22px;
  margin: 0 auto 14px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.85),
    rgba(9, 13, 20, 0.8)
  );
  border: 2px solid var(--foxfire-deep);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    inset 0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(110, 203, 255, 0.3),
    0 6px 20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
/* Foxfire diamond finials at each end of the bar */
.loader-bar-wrap::before,
.loader-bar-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--foxfire);
  transform: translateY(-50%) rotate(45deg);
  z-index: 3;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(110, 203, 255, 0.6);
}
.loader-bar-wrap::before {
  left: -9px;
}
.loader-bar-wrap::after {
  right: -9px;
}
.loader-bar {
  height: 100%;
  width: 0%;
  position: relative;
  background: repeating-linear-gradient(
      -55deg,
      rgba(255, 255, 255, 0.16) 0 2px,
      transparent 2px 8px
    ),
    linear-gradient(180deg, #c4eeff 0%, #4fb0e8 48%, #256d9e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 14px rgba(110, 203, 255, 0.6);
  transition: width 0.18s ease-out;
}
/* Glossy highlight sweep across the top of the fill, WoW-style */
.loader-bar::after {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0)
  );
}
.loader-status {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--washi);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
  min-height: 18px;
}

.countdown {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
  text-align: center;
  display: none;
}
.countdown.show {
  display: block;
}
.countdown-tag {
  font-family: "Shippori Mincho", serif;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--oni-bright);
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(255, 94, 77, 0.65);
}
.countdown-num {
  font-family: "Yuji Syuku", serif;
  font-size: 148px;
  line-height: 1;
  color: var(--washi);
  text-shadow:
    0 7px 0 var(--sumi-deep),
    0 12px 32px rgba(0, 0, 0, 0.7),
    0 0 44px rgba(110, 203, 255, 0.25);
  animation: countPulse 1s ease-out;
  font-variant-numeric: tabular-nums;
}
.countdown-sub {
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  letter-spacing: 0.3em;
  color: var(--foxfire);
  text-transform: uppercase;
  margin-top: 12px;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(110, 203, 255, 0.4);
}
@keyframes countPulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  25% {
    transform: scale(1.22);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============== TITLE SCREEN ============== */
.title-screen {
  position: fixed;
  inset: 0;
  background: #070a10;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 40px;
  overflow: hidden;
}
.title-screen.hidden {
  display: none;
}
.title-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.05) brightness(0.9);
}
.title-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
      ellipse at center,
      rgba(8, 11, 18, 0) 0%,
      rgba(8, 11, 18, 0.38) 55%,
      rgba(5, 7, 12, 0.82) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 7, 12, 0.5) 0%,
      rgba(5, 7, 12, 0.08) 26%,
      rgba(5, 7, 12, 0.3) 74%,
      rgba(5, 7, 12, 0.76) 100%
    );
}
.title-motto,
.title-name,
.title-tagline,
.title-controls,
.title-start,
.title-music {
  position: relative;
  z-index: 3;
}
.title-motto {
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--foxfire);
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow:
    0 0 26px rgba(110, 203, 255, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.85);
}
.title-name {
  font-family: "Yuji Syuku", serif;
  font-size: 118px;
  line-height: 0.95;
  color: var(--washi);
  letter-spacing: 0.02em;
  text-shadow:
    0 5px 0 var(--sumi-deep),
    0 9px 0 rgba(7, 10, 16, 0.55),
    0 16px 54px rgba(0, 0, 0, 0.78),
    0 0 70px rgba(110, 203, 255, 0.2);
  margin-bottom: 14px;
}
.title-tagline {
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  color: var(--washi-dim);
  margin-bottom: 40px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.title-controls {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px 36px;
  margin-bottom: 38px;
  text-align: left;
  font-size: 13px;
  color: var(--washi);
  opacity: 0.96;
  background: rgba(7, 11, 18, 0.55);
  padding: 18px 28px;
  border: 1px solid var(--foxfire-dim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    0 8px 30px rgba(0, 0, 0, 0.5);
}
.title-controls .k {
  background: rgba(110, 203, 255, 0.1);
  padding: 3px 12px;
  color: var(--foxfire);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 1px solid rgba(110, 203, 255, 0.4);
  min-width: 92px;
  text-align: center;
}
.title-controls > span:not(.k) {
  color: var(--washi-dim);
}

/* ============ TITLE MENU BUTTONS — chunky lacquer plates ============ */
.title-menu {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 330px;
}

.title-btn {
  padding: 12px 26px 13px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  border-radius: 7px;
  color: #fff8ec;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  transition:
    transform 0.11s ease,
    box-shadow 0.11s ease,
    filter 0.16s ease;
}

.title-btn-tag {
  font-family: "Shippori Mincho", serif;
  font-size: 9px;
  letter-spacing: 0.34em;
  opacity: 0.72;
  text-transform: uppercase;
}
.title-btn-label {
  font-family: "Yuji Syuku", serif;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* the chunky plate: hard outline + solid drop face + soft ground shadow */
.title-btn::before {
  content: "";
  position: absolute;
  inset: 3px 3px auto;
  height: 42%;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

.title-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.07);
}
.title-btn:active {
  transform: translateY(4px);
}

/* colour-coded per action — matched to the shrine palette.
         Casual = green (free, the way in). Ranked = gold (the pool). */
#btnCasual {
  background: #4f8f3f;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #2f5c24,
    0 7px 0 3px #0a0d14,
    0 14px 26px rgba(0, 0, 0, 0.45);
}
#btnCasual:hover {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 10px 0 0 #2f5c24,
    0 10px 0 3px #0a0d14,
    0 20px 34px rgba(0, 0, 0, 0.5);
}
#btnCasual:active {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 3px 0 0 #2f5c24,
    0 3px 0 3px #0a0d14,
    0 8px 16px rgba(0, 0, 0, 0.45);
}
#btnRanked {
  color: #20180a;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.22);
}
#btnRanked {
  background: #c9a24b;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #8a6c26,
    0 7px 0 3px #0a0d14,
    0 14px 26px rgba(0, 0, 0, 0.45);
}
#btnRanked:hover {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 10px 0 0 #8a6c26,
    0 10px 0 3px #0a0d14,
    0 20px 34px rgba(0, 0, 0, 0.5);
}
#btnRanked:active {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 3px 0 0 #8a6c26,
    0 3px 0 3px #0a0d14,
    0 8px 16px rgba(0, 0, 0, 0.45);
}
#btnHowToPlay {
  background: #3f5f96;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #26395c,
    0 7px 0 3px #0a0d14,
    0 14px 26px rgba(0, 0, 0, 0.45);
}
#btnHowToPlay:hover {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 10px 0 0 #26395c,
    0 10px 0 3px #0a0d14,
    0 20px 34px rgba(0, 0, 0, 0.5);
}
#btnHowToPlay:active {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 3px 0 0 #26395c,
    0 3px 0 3px #0a0d14,
    0 8px 16px rgba(0, 0, 0, 0.45);
}
#btnLeaderboard {
  background: #3d8ab5;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #23566f,
    0 7px 0 3px #0a0d14,
    0 14px 26px rgba(0, 0, 0, 0.45);
}
#btnLeaderboard:hover {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 10px 0 0 #23566f,
    0 10px 0 3px #0a0d14,
    0 20px 34px rgba(0, 0, 0, 0.5);
}
#btnLeaderboard:active {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 3px 0 0 #23566f,
    0 3px 0 3px #0a0d14,
    0 8px 16px rgba(0, 0, 0, 0.45);
}
#btnHowToEarn {
  background: #c22f20;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #7c130d,
    0 7px 0 3px #0a0d14,
    0 14px 26px rgba(0, 0, 0, 0.45);
}
#btnHowToEarn:hover {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 10px 0 0 #7c130d,
    0 10px 0 3px #0a0d14,
    0 20px 34px rgba(0, 0, 0, 0.5);
}
#btnHowToEarn:active {
  box-shadow:
    0 0 0 3px #0a0d14,
    0 3px 0 0 #7c130d,
    0 3px 0 3px #0a0d14,
    0 8px 16px rgba(0, 0, 0, 0.45);
}

/* to drop the small eyebrow labels entirely, uncomment: */
/* .title-btn-tag { display: none; } */

/* ============== MENU MODALS ============== */
.menu-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 12, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 105;
}
.menu-modal.show {
  display: flex;
  animation: fadeIn 0.32s ease;
}
.menu-modal-card {
  width: 460px;
  max-width: 92vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 30px 36px;
  background: linear-gradient(
    180deg,
    rgba(14, 20, 30, 0.98) 0%,
    rgba(7, 11, 18, 0.98) 100%
  );
  border: 1px solid var(--hairline);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(242, 236, 226, 0.07),
    0 24px 70px rgba(0, 0, 0, 0.7);
  position: relative;
  color: var(--washi);
  animation: cardRise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes cardRise {
  from {
    transform: translateY(26px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* the foxfire blue and the shrine gold, woven along the top edge */
.menu-modal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--foxfire) 18%,
    var(--kin-bright) 50%,
    var(--foxfire) 82%,
    transparent 100%
  );
}
.menu-modal-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(110, 203, 255, 0.14);
}
.menu-modal-eyebrow {
  font-family: "Shippori Mincho", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--foxfire);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 7px;
  text-shadow: 0 0 14px rgba(110, 203, 255, 0.35);
}
.menu-modal-title {
  font-family: "Yuji Syuku", serif;
  font-size: 38px;
  line-height: 1;
  color: var(--washi);
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.45);
}
.menu-modal-icon {
  font-size: 52px;
  text-align: center;
  margin-bottom: 12px;
  color: var(--foxfire);
  text-shadow:
    0 0 26px rgba(110, 203, 255, 0.45),
    0 3px 0 rgba(0, 0, 0, 0.6);
}
.menu-modal-text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--washi-dim);
  text-align: center;
  margin-bottom: 22px;
  padding: 0 8px;
}
.menu-modal-eta {
  padding: 15px;
  margin-bottom: 22px;
  background: rgba(5, 7, 12, 0.55);
  border: 1px solid var(--foxfire-dim);
  text-align: center;
}
.menu-modal-eta-label {
  font-family: "Shippori Mincho", serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--washi-dim);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.menu-modal-eta-date {
  font-family: "Yuji Syuku", serif;
  font-size: 28px;
  color: var(--foxfire);
  letter-spacing: 0.12em;
  text-shadow:
    0 0 18px rgba(110, 203, 255, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.5);
}
.menu-modal-close {
  display: block;
  margin: 0 auto;
  padding: 12px 38px;
  cursor: pointer;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 900;
  background: linear-gradient(180deg, #c4eeff 0%, #6ecbff 55%, #2e7fb8 100%);
  border: 1px solid var(--foxfire-deep);
  color: var(--sumi);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 5px 14px rgba(30, 110, 170, 0.45);
  transition:
    transform 0.15s ease,
    filter 0.2s ease;
}
.menu-modal-close:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}
.menu-modal-close:active {
  transform: translateY(1px);
}

/* === Leaderboard === */
.menu-modal-card-wide {
  width: 640px;
  max-width: 95vw;
}
.leaderboard-note {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kin);
  margin: -4px 0 12px;
  font-family: "Shippori Mincho", serif;
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 22px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}
.leaderboard-list::-webkit-scrollbar {
  width: 6px;
}
.leaderboard-list::-webkit-scrollbar-track {
  background: rgba(9, 13, 20, 0.4);
}
.leaderboard-list::-webkit-scrollbar-thumb {
  background: rgba(110, 203, 255, 0.35);
}
.leaderboard-list::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 203, 255, 0.55);
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 44px 1fr 80px 100px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(5, 7, 12, 0.45);
  border: 1px solid rgba(110, 203, 255, 0.12);
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.leaderboard-row.is-header {
  background: transparent;
  border: none;
  padding: 2px 14px 6px;
  font-family: "Shippori Mincho", serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--washi-dim);
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* the top three ride in foxfire with a kin-gold thread */
.leaderboard-row.is-top-3 {
  background: linear-gradient(
    90deg,
    rgba(110, 203, 255, 0.16) 0%,
    rgba(110, 203, 255, 0.04) 100%
  );
  border-color: rgba(110, 203, 255, 0.4);
}
.lb-rank {
  font-family: "Yuji Syuku", serif;
  font-size: 16px;
  color: var(--kin);
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.leaderboard-row.is-top-3 .lb-rank {
  font-size: 22px;
  color: var(--foxfire);
}
.lb-player {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lb-player-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--washi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-player-handle {
  font-size: 11px;
  color: var(--washi-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-games,
.lb-wave {
  font-family: "Yuji Syuku", serif;
  font-size: 17px;
  color: var(--washi);
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.lb-wave {
  color: var(--foxfire);
}
.leaderboard-empty,
.leaderboard-loading,
.leaderboard-error {
  padding: 40px 20px;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  color: var(--washi-dim);
}
.leaderboard-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.6;
}
.leaderboard-error {
  color: #e08a80;
}
@media (max-width: 520px) {
  .leaderboard-row {
    grid-template-columns: 36px 1fr 56px 72px;
    gap: 8px;
    padding: 8px 10px;
  }
  .lb-games,
  .lb-wave {
    font-size: 14px;
  }
}

/* === Player setup === */
.skin-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px auto 6px;
}
.skin-preview-canvas {
  background: radial-gradient(
      ellipse at center bottom,
      rgba(110, 203, 255, 0.12) 0%,
      rgba(5, 7, 12, 0) 62%
    ),
    linear-gradient(180deg, rgba(20, 30, 44, 0.5) 0%, rgba(5, 7, 12, 0.75) 100%);
  border: 1px solid var(--foxfire-dim);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.55);
  display: block;
}
.skin-arrow {
  width: 36px;
  height: 60px;
  background: rgba(7, 11, 18, 0.6);
  border: 1px solid var(--foxfire-dim);
  color: var(--washi);
  font-family: "Yuji Syuku", serif;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.18s,
    transform 0.12s,
    border-color 0.18s,
    color 0.18s;
}
.skin-arrow:hover {
  background: rgba(18, 27, 40, 0.7);
  border-color: var(--foxfire);
  color: var(--foxfire);
  transform: translateY(-2px);
}
.skin-arrow:active {
  transform: translateY(0);
}
.skin-info {
  text-align: center;
  margin: 0 0 16px;
}
.skin-info-sub {
  font-family: "Shippori Mincho", serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--washi-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.skin-info-name {
  font-family: "Yuji Syuku", serif;
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--washi);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* ===== Character stats / signature-power panel on the select screen ===== */
.char-stats {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    rgba(10, 15, 23, 0.7),
    rgba(5, 7, 12, 0.55)
  );
  border: 1px solid var(--foxfire-dim);
  box-shadow:
    inset 0 1px 0 rgba(200, 238, 255, 0.08),
    0 2px 10px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}
.char-power-label {
  font-family: "Shippori Mincho", serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--foxfire-deep);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.char-power-name {
  font-family: "Yuji Syuku", serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--foxfire);
  text-shadow: 0 0 10px rgba(110, 203, 255, 0.35);
  margin-bottom: 3px;
}
.char-power-desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--washi-dim);
  margin-bottom: 10px;
}
.char-tilt {
  display: flex;
  gap: 8px;
  justify-content: center;
  border-top: 1px solid rgba(110, 203, 255, 0.16);
  padding-top: 9px;
}
.char-tilt-row {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 2px;
  white-space: nowrap;
}
.char-tilt-up {
  color: #a8dcff;
  background: rgba(110, 203, 255, 0.1);
  border: 1px solid rgba(110, 203, 255, 0.35);
}
.char-tilt-down {
  color: #f0a890;
  background: rgba(200, 80, 50, 0.12);
  border: 1px solid rgba(220, 110, 80, 0.3);
}

.username-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 4px;
  padding: 12px 14px;
  background: rgba(5, 7, 12, 0.65);
  border: 1px solid var(--foxfire-dim);
  color: var(--washi);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.username-input:focus {
  border-color: var(--foxfire);
  background: rgba(12, 17, 26, 0.7);
  box-shadow: 0 0 0 1px rgba(110, 203, 255, 0.25);
}
.username-input::placeholder {
  color: rgba(242, 236, 226, 0.35);
}
.username-error {
  min-height: 18px;
  margin-bottom: 14px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  color: #e08a80;
  text-align: center;
}
.setup-x-hint {
  padding: 13px 18px;
  margin-bottom: 16px;
  background: rgba(5, 7, 12, 0.45);
  border: 1px solid rgba(110, 203, 255, 0.16);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: var(--washi-dim);
  text-align: left;
}
.setup-x-hint strong {
  color: var(--foxfire);
  font-weight: 700;
}
.setup-x-mark {
  font-weight: 900;
  color: var(--washi);
}
.setup-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.setup-btn {
  padding: 13px 22px;
  cursor: pointer;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition:
    transform 0.15s,
    filter 0.2s,
    background 0.2s,
    border-color 0.2s;
}
.setup-btn-x {
  background: linear-gradient(180deg, #26405c 0%, #182739 60%, #0d1826 100%);
  border: 1px solid rgba(120, 190, 235, 0.5);
  color: var(--washi);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    0 4px 16px rgba(12, 32, 52, 0.5);
}
.setup-btn-x:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}
.setup-btn-continue {
  background: linear-gradient(180deg, #c4eeff 0%, #6ecbff 55%, #2e7fb8 100%);
  border: 1px solid var(--foxfire-deep);
  color: var(--sumi);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 5px 14px rgba(30, 110, 170, 0.45);
}
.setup-btn-continue:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}
.setup-btn-sub {
  font-size: 10px;
  opacity: 0.75;
  margin-left: 4px;
  letter-spacing: 0.18em;
  text-transform: none;
  font-style: italic;
}
.setup-or {
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(242, 236, 226, 0.4);
  margin: 2px 0;
}

/* === Auth badge === */
.auth-badge {
  display: none;
  position: relative;
  z-index: 3;
  margin-top: 14px;
  padding: 8px 16px;
  align-items: center;
  gap: 10px;
  background: rgba(7, 11, 18, 0.6);
  border: 1px solid var(--foxfire-dim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.auth-badge.show {
  display: inline-flex;
}
.auth-badge-label {
  font-family: "Shippori Mincho", serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--washi-dim);
}
.auth-badge-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--washi);
  letter-spacing: 0.05em;
}
.auth-badge-verified {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(110, 203, 255, 0.16);
  border: 1px solid rgba(110, 203, 255, 0.5);
  color: var(--foxfire);
  letter-spacing: 0.1em;
}
.auth-badge-change {
  margin-left: 4px;
  background: none;
  border: none;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  color: rgba(242, 236, 226, 0.45);
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s;
}
.auth-badge-change:hover {
  color: var(--washi);
}

.lb-verified-mark {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  background: rgba(110, 203, 255, 0.16);
  border: 1px solid rgba(110, 203, 255, 0.5);
  color: var(--foxfire);
  vertical-align: middle;
  letter-spacing: 0.08em;
}

/* How-to-play grid inside a modal */
.menu-modal-controls {
  display: grid !important;
  grid-template-columns: repeat(2, auto);
  gap: 8px 24px;
  margin-bottom: 24px;
  text-align: left;
  font-size: 13px;
  color: var(--washi);
  background: rgba(5, 7, 12, 0.4);
  padding: 16px 20px;
  border: 1px solid rgba(110, 203, 255, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  justify-content: center;
}

.setting-music-group .music-mini-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* Drifting sakura petals over the title screen — pale, with every fourth
         petal touched by foxfire (a little Yomihara magic). */
.leaf-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.leaf-bg span {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 9px;
  background: radial-gradient(ellipse, #e8c860 30%, #b8862a 100%);
  border-radius: 50% 0 50% 0;
  will-change: transform;
  box-shadow: 0 0 6px rgba(232, 200, 96, 0.45);
}
.leaf-bg span:nth-child(4n) {
  background: radial-gradient(ellipse, #c4eeff 30%, #3d90c8 100%);
  box-shadow: 0 0 8px rgba(110, 203, 255, 0.55);
}

/* Quality floor */
@media (max-width: 900px) {
  .hud .top-left {
    width: 250px;
  }
  .title-name {
    font-size: 68px;
  }
  .banner .title {
    font-size: 62px;
  }
  .lu-cards {
    gap: 14px;
  }
  .lu-card {
    width: 178px;
    height: 300px;
    padding: 26px 12px 12px;
  }
}
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--foxfire);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== SETUP MODAL — height-adaptive: fits without scrolling =====
         The muster roll is the tallest modal in the game; everything here is
         scoped to it alone. The preview canvas breathes with the viewport
         (clamp on vh) and the copy tightens in steps on shorter screens, so
         the card stays inside the window from 1440p monitors down to a
         768-tall laptop with browser chrome. */
#playerSetupModal .menu-modal-card {
  padding: clamp(14px, 2.6vh, 26px) 34px;
  max-height: 96vh;
}
#playerSetupModal .menu-modal-title {
  margin-bottom: clamp(6px, 1.4vh, 14px);
}
#playerSetupModal .skin-preview-canvas {
  width: auto;
  height: clamp(150px, 30vh, 280px);
  aspect-ratio: 6 / 7;
}
#playerSetupModal .skin-info {
  margin-bottom: clamp(6px, 1.2vh, 12px);
}
#playerSetupModal .char-stats {
  margin-bottom: clamp(6px, 1.2vh, 12px);
  padding: 10px 14px;
}
#playerSetupModal .char-power-desc {
  margin-bottom: 7px;
}
#playerSetupModal .username-error {
  margin-bottom: clamp(4px, 1vh, 10px);
}
#playerSetupModal .setup-x-hint {
  margin-bottom: clamp(6px, 1.2vh, 12px);
  padding: 10px 14px;
}
#playerSetupModal .setup-buttons {
  gap: 8px;
}

@media (max-height: 880px) {
  #playerSetupModal .menu-modal-title {
    font-size: 30px;
  }
  #playerSetupModal .skin-info-name {
    font-size: 18px;
  }
  #playerSetupModal .setup-btn {
    padding: 11px 20px;
  }
  #playerSetupModal .setup-x-hint {
    font-size: 11.5px;
    line-height: 1.45;
  }
}
@media (max-height: 790px) {
  #playerSetupModal .menu-modal-title {
    font-size: 26px;
  }
  #playerSetupModal .menu-modal-eyebrow {
    margin-bottom: 4px;
  }
  #playerSetupModal .setup-x-hint {
    display: none;
  }
  #playerSetupModal .char-power-desc {
    font-size: 10.5px;
    margin-bottom: 6px;
  }
}
@media (max-height: 710px) {
  #playerSetupModal .setup-buttons {
    flex-direction: row;
  }
  #playerSetupModal .setup-buttons .setup-btn {
    flex: 1 1 0;
    padding: 11px 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }
  #playerSetupModal .setup-or {
    display: none;
  }
  #playerSetupModal .username-input {
    padding: 10px 12px;
    font-size: 15px;
  }
}

/* ===== MUSIC TOGGLE — one-click mute, lobby + in-game (M) ===== */
.music-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(110, 203, 255, 0.35);
  background: rgba(8, 11, 18, 0.55);
  color: #6ecbff;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
  pointer-events: auto;
}
.music-toggle:hover {
  border-color: rgba(110, 203, 255, 0.7);
}
.music-toggle.is-muted {
  color: rgba(200, 214, 228, 0.5);
  border-color: rgba(200, 214, 228, 0.25);
}
.music-toggle.is-muted::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 2px;
  background: rgba(200, 214, 228, 0.65);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.music-toggle-hud {
  position: fixed;
}

/* ===== X (twitter) LINK — sits beside the music toggle, same accent color ===== */
.x-link-toggle {
  position: absolute;
  right: 66px;
  bottom: 16px;
  z-index: 40;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(110, 203, 255, 0.35);
  background: rgba(8, 11, 18, 0.55);
  color: #6ecbff;
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.15s ease;
  pointer-events: auto;
}
.x-link-toggle:hover {
  border-color: rgba(110, 203, 255, 0.7);
}

/* ===== CA BAR — top of page, always visible, copy-to-clipboard ===== */
.ca-bar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: linear-gradient(
    180deg,
    rgba(14, 20, 30, 0.92) 0%,
    rgba(7, 11, 18, 0.94) 100%
  );
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 12px 22px 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(242, 236, 226, 0.07),
    0 16px 44px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(110, 203, 255, 0.07);
  font-family: "Zen Kaku Gothic New", sans-serif;
}
/* woven chain-and-gold thread along the top edge, matching the modal cards */
.ca-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--foxfire) 18%,
    var(--kin-bright) 50%,
    var(--foxfire) 82%,
    transparent 100%
  );
}
/* corner ticks, like a pinned wanted poster */
.ca-bar::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background:
    linear-gradient(var(--foxfire-dim), var(--foxfire-dim)) top left / 10px 1px,
    linear-gradient(var(--foxfire-dim), var(--foxfire-dim)) top left / 1px 10px,
    linear-gradient(var(--foxfire-dim), var(--foxfire-dim)) top right / 10px 1px,
    linear-gradient(var(--foxfire-dim), var(--foxfire-dim)) top right / 1px 10px,
    linear-gradient(var(--foxfire-dim), var(--foxfire-dim)) bottom left / 10px
      1px,
    linear-gradient(var(--foxfire-dim), var(--foxfire-dim)) bottom left / 1px
      10px,
    linear-gradient(var(--foxfire-dim), var(--foxfire-dim)) bottom right/ 10px
      1px,
    linear-gradient(var(--foxfire-dim), var(--foxfire-dim)) bottom right/ 1px
      10px;
  background-repeat: no-repeat;
}
.ca-bar-eyebrow {
  font-family: "Shippori Mincho", serif;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kin-bright);
  opacity: 0.92;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(201, 162, 75, 0.35);
}
.ca-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ca-bar-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--washi);
  max-width: min(72vw, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-bar-copy {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 1px solid var(--foxfire-dim);
  background: var(--foxfire-faint);
  color: var(--foxfire);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.1s ease;
}
.ca-bar-copy:hover {
  border-color: var(--foxfire);
  background: rgba(110, 203, 255, 0.2);
}
.ca-bar-copy:active {
  transform: scale(0.92);
}
/* "Copied" toast hangs below the plaque so nothing shifts */
.ca-bar-copied {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--foxfire-bright);
  background: rgba(7, 11, 18, 0.9);
  border: 1px solid var(--foxfire-dim);
  padding: 4px 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ca-bar-copied.show {
  opacity: 1;
}

/* ===== MOBILE / TABLET GATE — desktop-only experience ===== */
.mobile-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #070a10 url("img/background.webp") center/cover no-repeat;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.mobile-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
      ellipse at center,
      rgba(8, 11, 18, 0) 0%,
      rgba(8, 11, 18, 0.45) 55%,
      rgba(5, 7, 12, 0.9) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 7, 12, 0.62) 0%,
      rgba(5, 7, 12, 0.22) 30%,
      rgba(5, 7, 12, 0.42) 70%,
      rgba(5, 7, 12, 0.86) 100%
    );
}
.mobile-gate-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(400px, 94vw);
  padding: 30px 26px 26px;
  background: linear-gradient(
    180deg,
    rgba(14, 20, 30, 0.96) 0%,
    rgba(7, 11, 18, 0.97) 100%
  );
  border: 1px solid var(--hairline);
  box-shadow:
    0 0 0 1px var(--sumi-edge),
    inset 0 1px 0 rgba(242, 236, 226, 0.07),
    0 24px 70px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(110, 203, 255, 0.06);
  animation: cardRise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.mobile-gate-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--foxfire) 18%,
    var(--kin-bright) 50%,
    var(--foxfire) 82%,
    transparent 100%
  );
}
.mobile-gate-eyebrow {
  font-family: "Shippori Mincho", serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kin-bright);
  opacity: 0.9;
}
.mobile-gate-name {
  font-family: "Yuji Syuku", serif;
  font-size: 46px;
  line-height: 1;
  color: var(--washi);
  letter-spacing: 0.03em;
  text-shadow:
    0 4px 0 var(--sumi-deep),
    0 6px 20px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(110, 203, 255, 0.22);
}
.mobile-gate-divider {
  width: 120px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--foxfire-dim),
    transparent
  );
}
.mobile-gate-msg {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  color: var(--washi-dim);
  line-height: 1.6;
  max-width: 300px;
}
.mobile-gate-msg strong {
  color: var(--foxfire);
  font-weight: 700;
}
.mobile-gate-ca {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: rgba(110, 203, 255, 0.05);
  border: 1px solid var(--foxfire-faint);
  padding: 12px 14px 13px;
}
.mobile-gate-ca .ca-bar-value {
  max-width: 100%;
}
.mobile-gate-x {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--foxfire);
  background: var(--foxfire-faint);
  border: 1px solid var(--foxfire-dim);
  padding: 12px 22px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.mobile-gate-x:hover {
  border-color: var(--foxfire);
  background: rgba(110, 203, 255, 0.2);
}

/* Phones and tablets: the title screen IS the landing. Only the 3D canvas
   and in-run HUD are hidden — the run is desktop-only, everything else
   works. Layout rules for small screens live in the MOBILE block at the
   end of this file. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  /* hidden on the title screen; revealed while a run is live (js/touch.js) */
  body:not(.is-playing) #app,
  body:not(.is-playing) .hud,
  .settings-btn, .settings { display: none !important; }
}

/* ===== UPDATES MODAL — work-in-progress list ===== */
.update-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 4px 0 2px;
}
.update-item {
  text-align: left;
  padding: 12px 14px;
  background: rgba(110, 203, 255, 0.05);
  border: 1px solid var(--foxfire-faint);
  border-left: 2px solid var(--foxfire-dim);
}
.update-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.update-item-name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--washi);
}
.update-item-eta {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--foxfire);
  background: var(--foxfire-faint);
  border: 1px solid var(--foxfire-dim);
  padding: 3px 9px;
  white-space: nowrap;
}
.update-item-desc {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12.5px;
  color: var(--washi-dim);
  line-height: 1.5;
  margin-top: 4px;
}
.update-dm-note strong {
  color: var(--foxfire);
  font-weight: 700;
}
.update-dm-link {
  color: var(--foxfire);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--foxfire-dim);
}
.update-dm-link:hover {
  text-decoration-color: var(--foxfire);
}

/* ===== LEADERBOARD PRIZE BANNER — week one bounty ===== */
.lb-prize-banner {
  width: 100%;
  margin: 2px 0 12px;
  padding: 14px 16px 16px;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(110, 203, 255, 0.09) 0%,
    rgba(110, 203, 255, 0.03) 100%
  );
  border: 1px solid var(--foxfire-dim);
  box-shadow:
    inset 0 1px 0 rgba(110, 203, 255, 0.12),
    0 0 26px rgba(110, 203, 255, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lb-prize-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--foxfire) 18%,
    var(--kin-bright) 50%,
    var(--foxfire) 82%,
    transparent 100%
  );
}
.lb-prize-week {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lb-prize-week-name {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kin-bright);
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(201, 162, 75, 0.4);
}
.lb-prize-ends {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sumi-deep);
  background: var(--foxfire);
  padding: 4px 12px;
  box-shadow: 0 0 18px rgba(110, 203, 255, 0.45);
}
.lb-prize-rows {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lb-prize-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 150px;
  padding: 10px 22px 11px;
  background: rgba(7, 11, 18, 0.55);
  border: 1px solid var(--foxfire-dim);
  box-shadow: inset 0 1px 0 rgba(110, 203, 255, 0.1);
}
.lb-prize-row-gold {
  border-color: rgba(201, 162, 75, 0.55);
  background: linear-gradient(
    180deg,
    rgba(201, 162, 75, 0.14) 0%,
    rgba(7, 11, 18, 0.6) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(201, 162, 75, 0.25),
    0 0 22px rgba(201, 162, 75, 0.18);
}
.lb-prize-rank {
  font-family: "Shippori Mincho", serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--washi-dim);
  white-space: nowrap;
}
.lb-prize-reward {
  font-family: "Yuji Syuku", serif;
  font-size: 30px;
  line-height: 1.1;
  color: var(--foxfire);
  white-space: nowrap;
  text-shadow:
    0 0 22px rgba(110, 203, 255, 0.55),
    0 2px 0 var(--sumi-deep);
}
.lb-prize-row-gold .lb-prize-reward {
  color: var(--kin-bright);
  text-shadow:
    0 0 24px rgba(201, 162, 75, 0.65),
    0 2px 0 var(--sumi-deep);
}
.lb-prize-sub {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--washi-dim);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
         CHUNKY LACQUER PLATE PASS
         Applies the title-menu plate treatment to every remaining control.
         Appended last so it overrides the rules above.
         ══════════════════════════════════════════════════════════════════ */

/* --- motto removed --- */
.title-motto {
  display: none !important;
}

/* --- shared plate gloss --- */
.ca-bar::before,
.auth-badge::before,
.setup-btn::before,
.settings-btn::before,
.reset-btn::before,
.sac-btn::before {
  content: "";
  position: absolute;
  inset: 3px 3px auto;
  height: 42%;
  border-radius: 5px 5px 2px 2px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0)
  );
}

/* ─── CONTRACT ADDRESS BAR ─────────────────────────────────────── */
.ca-bar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: #1b3a5c;
  border: 0;
  border-radius: 8px;
  padding: 11px 24px 13px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #10233a,
    0 7px 0 3px #0a0d14,
    0 16px 30px rgba(0, 0, 0, 0.5);
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.ca-bar::after {
  display: none;
}
.ca-bar-eyebrow {
  color: var(--kin-bright);
  opacity: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.ca-bar-value {
  color: #fff8ec;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.ca-bar-copy {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 0;
  background: #c9a24b;
  color: #20180a;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 4px 0 0 #8a6c26,
    0 4px 0 2px #0a0d14;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    filter 0.15s ease;
}
.ca-bar-copy:hover {
  background: #c9a24b;
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 6px 0 0 #8a6c26,
    0 6px 0 2px #0a0d14;
}
.ca-bar-copy:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 1px 0 0 #8a6c26,
    0 1px 0 2px #0a0d14;
}
.ca-bar-copied {
  border-radius: 5px;
  border: 0;
  color: #fff8ec;
  background: #0a0d14;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ─── PLAYING AS / AUTH BADGE ──────────────────────────────────── */
.auth-badge {
  position: relative;
  z-index: 3;
  margin-top: 18px;
  padding: 9px 18px 11px;
  align-items: center;
  gap: 10px;
  background: #2c3a4d;
  border: 0;
  border-radius: 7px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 5px 0 0 #1a2432,
    0 5px 0 3px #0a0d14,
    0 12px 22px rgba(0, 0, 0, 0.45);
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.auth-badge-label {
  color: rgba(255, 248, 236, 0.6);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.auth-badge-name {
  color: #fff8ec;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.auth-badge-verified {
  border-radius: 4px;
  border: 0;
  background: #3d8ab5;
  color: #fff8ec;
  box-shadow: 0 0 0 2px #0a0d14;
}
.auth-badge-change {
  border-radius: 4px;
  padding: 3px 9px;
  background: #46586e;
  color: rgba(255, 248, 236, 0.75);
  border: 0;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 3px 0 0 #26313f,
    0 3px 0 2px #0a0d14;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    color 0.15s ease;
}
.auth-badge-change:hover {
  color: #fff8ec;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 4px 0 0 #26313f,
    0 4px 0 2px #0a0d14;
}
.auth-badge-change:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 1px 0 0 #26313f,
    0 1px 0 2px #0a0d14;
}

/* ─── X + MUSIC CIRCLE TOGGLES ─────────────────────────────────── */
.music-toggle,
.x-link-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #3f5f96;
  color: #fff8ec;
  backdrop-filter: none;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 5px 0 0 #26395c,
    0 5px 0 3px #0a0d14,
    0 10px 20px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    filter 0.15s ease;
}
.music-toggle:hover,
.x-link-toggle:hover {
  filter: brightness(1.1);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 8px 0 0 #26395c,
    0 8px 0 3px #0a0d14,
    0 14px 26px rgba(0, 0, 0, 0.5);
}
.music-toggle:active,
.x-link-toggle:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 2px 0 0 #26395c,
    0 2px 0 3px #0a0d14,
    0 6px 14px rgba(0, 0, 0, 0.45);
}
.music-toggle.is-muted {
  background: #46586e;
  color: rgba(255, 248, 236, 0.55);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 5px 0 0 #26313f,
    0 5px 0 3px #0a0d14,
    0 10px 20px rgba(0, 0, 0, 0.45);
}
.music-toggle.is-muted::after {
  background: rgba(255, 248, 236, 0.7);
}
.x-link-toggle {
  right: 70px;
}

/* ─── LOADING SCREEN ───────────────────────────────────────────── */
.loader-tag {
  color: var(--kin-bright);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.6),
    0 0 18px rgba(201, 162, 75, 0.35);
}
.loader-bar-wrap {
  border: 0;
  border-radius: 8px;
  height: 26px;
  background: #10151f;
  box-shadow:
    0 0 0 3px #0a0d14,
    inset 0 3px 8px rgba(0, 0, 0, 0.9),
    0 6px 0 0 #060a11,
    0 6px 0 3px #0a0d14,
    0 14px 26px rgba(0, 0, 0, 0.55);
}
.loader-bar-wrap::before,
.loader-bar-wrap::after {
  display: none;
}
.loader-bar {
  background: repeating-linear-gradient(
      -55deg,
      rgba(255, 255, 255, 0.18) 0 3px,
      transparent 3px 10px
    ),
    linear-gradient(180deg, #6fb75c 0%, #4f8f3f 55%, #2f5c24 100%);
  border-radius: 5px;
}

/* ─── SETUP / MODAL BUTTONS ────────────────────────────────────── */
.setup-btn,
.settings-btn,
.reset-btn,
.sac-btn {
  position: relative;
  border: 0;
  border-radius: 7px;
  color: #fff8ec;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  transition:
    transform 0.11s ease,
    box-shadow 0.11s ease,
    filter 0.16s ease;
}
.setup-btn-continue {
  background: #4f8f3f;
  color: #fff8ec;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 6px 0 0 #2f5c24,
    0 6px 0 3px #0a0d14,
    0 12px 22px rgba(0, 0, 0, 0.45);
}
.setup-btn-continue:hover {
  filter: brightness(1.07);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 9px 0 0 #2f5c24,
    0 9px 0 3px #0a0d14,
    0 18px 30px rgba(0, 0, 0, 0.5);
}
.setup-btn-continue:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 3px 0 0 #2f5c24,
    0 3px 0 3px #0a0d14;
}
.setup-btn-x {
  background: #3d8ab5;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 6px 0 0 #23566f,
    0 6px 0 3px #0a0d14,
    0 12px 22px rgba(0, 0, 0, 0.45);
}
.setup-btn-x:hover {
  filter: brightness(1.07);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 9px 0 0 #23566f,
    0 9px 0 3px #0a0d14,
    0 18px 30px rgba(0, 0, 0, 0.5);
}
.setup-btn-x:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 3px 0 0 #23566f,
    0 3px 0 3px #0a0d14;
}
.settings-btn {
  background: #3f5f96;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 5px 0 0 #26395c,
    0 5px 0 3px #0a0d14;
}
.settings-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #26395c,
    0 7px 0 3px #0a0d14;
}
.settings-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 2px 0 0 #26395c,
    0 2px 0 3px #0a0d14;
}
.reset-btn,
.sac-decline {
  background: #c22f20;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 5px 0 0 #7c130d,
    0 5px 0 3px #0a0d14;
}
.reset-btn:hover,
.sac-decline:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #7c130d,
    0 7px 0 3px #0a0d14;
}
.reset-btn:active,
.sac-decline:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 2px 0 0 #7c130d,
    0 2px 0 3px #0a0d14;
}
.sac-accept {
  background: #4f8f3f;
  box-shadow:
    0 0 0 3px #0a0d14,
    0 5px 0 0 #2f5c24,
    0 5px 0 3px #0a0d14;
}
.sac-accept:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 7px 0 0 #2f5c24,
    0 7px 0 3px #0a0d14;
}
.sac-accept:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 2px 0 0 #2f5c24,
    0 2px 0 3px #0a0d14;
}

/* ─── MODAL BUTTONS — flatter plate, 2px outline, shallow drop ──── */
.menu-modal-close {
  border: 0;
  border-radius: 6px;
  position: relative;
  background: #3d8ab5;
  color: #fff8ec;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 3px 0 0 #23566f,
    0 3px 0 2px #0a0d14,
    0 6px 14px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    filter 0.15s ease;
}
.menu-modal-close:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 5px 0 0 #23566f,
    0 5px 0 2px #0a0d14,
    0 9px 18px rgba(0, 0, 0, 0.45);
}
.menu-modal-close:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 1px 0 0 #23566f,
    0 1px 0 2px #0a0d14;
}

/* ─── KEY CHIPS (WASD / SPACE / LMB …) ─────────────────────────── */
.title-controls .k {
  background: #2c3a4d;
  color: #cfe6f5;
  border: 0;
  border-radius: 5px;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 2px 0 0 #1a2432,
    0 2px 0 2px #0a0d14;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* ─── SKIN CAROUSEL ARROWS ─────────────────────────────────────── */
.skin-arrow {
  border: 0;
  border-radius: 6px;
  background: #3f5f96;
  color: #fff8ec;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 3px 0 0 #26395c,
    0 3px 0 2px #0a0d14;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    filter 0.15s ease;
}
.skin-arrow:hover {
  background: #3f5f96;
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 5px 0 0 #26395c,
    0 5px 0 2px #0a0d14;
}
.skin-arrow:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 1px 0 0 #26395c,
    0 1px 0 2px #0a0d14;
}

/* ─── SETUP / SETTINGS BUTTONS — flatten to match modals ───────── */
.setup-btn-continue {
  box-shadow:
    0 0 0 2px #0a0d14,
    0 3px 0 0 #2f5c24,
    0 3px 0 2px #0a0d14,
    0 6px 14px rgba(0, 0, 0, 0.4);
}
.setup-btn-continue:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 5px 0 0 #2f5c24,
    0 5px 0 2px #0a0d14,
    0 9px 18px rgba(0, 0, 0, 0.45);
}
.setup-btn-continue:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 1px 0 0 #2f5c24,
    0 1px 0 2px #0a0d14;
}
.setup-btn-x {
  box-shadow:
    0 0 0 2px #0a0d14,
    0 3px 0 0 #23566f,
    0 3px 0 2px #0a0d14,
    0 6px 14px rgba(0, 0, 0, 0.4);
}
.setup-btn-x:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 5px 0 0 #23566f,
    0 5px 0 2px #0a0d14,
    0 9px 18px rgba(0, 0, 0, 0.45);
}
.setup-btn-x:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 1px 0 0 #23566f,
    0 1px 0 2px #0a0d14;
}
.setup-btn::before {
  display: none;
}

/* ─── RETURN TO WORLD MAP — top-left, breaks out of the iframe ─── */
.world-map-back {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 320;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 11px;
  border: 0;
  border-radius: 7px;
  background: #2c3a4d;
  color: #fff8ec;
  cursor: pointer;
  text-decoration: none;
  font-family: "Shippori Mincho", serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 5px 0 0 #1a2432,
    0 5px 0 3px #0a0d14,
    0 12px 22px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.11s ease,
    box-shadow 0.11s ease,
    filter 0.16s ease;
}
.world-map-back::before {
  content: "";
  position: absolute;
  inset: 3px 3px auto;
  height: 44%;
  border-radius: 5px 5px 2px 2px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.24),
    rgba(255, 255, 255, 0)
  );
}
.world-map-back:hover {
  filter: brightness(1.1);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 8px 0 0 #1a2432,
    0 8px 0 3px #0a0d14,
    0 16px 28px rgba(0, 0, 0, 0.5);
}
.world-map-back:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 3px #0a0d14,
    0 2px 0 0 #1a2432,
    0 2px 0 3px #0a0d14;
}
.world-map-back .wmb-arrow {
  font-size: 15px;
  line-height: 1;
  color: var(--kin-bright);
  transition: transform 0.16s ease;
}
.world-map-back:hover .wmb-arrow {
  transform: translateX(-3px);
}
/* hide once a run starts so it can't be misclicked mid-fight */
body.in-game .world-map-back {
  display: none;
}

/* ─── REQUIREMENT / STEP LISTS (Ranked + How to Earn modals) ────── */
.req-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 6px 0 20px;
  text-align: left;
}
.req-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.req-mark {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3f5f96;
  color: #fff8ec;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 2px 0 0 #26395c,
    0 2px 0 2px #0a0d14;
}
.req-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.req-name {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #fff8ec;
}
.req-desc {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(242, 236, 226, 0.62);
}

/* gold marks for the numbered How-to-Earn steps */
#howToEarnModal .req-mark {
  background: #c9a24b;
  color: #20180a;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 2px 0 0 #8a6c26,
    0 2px 0 2px #0a0d14;
}

/* ─── LEADERBOARD MODE TABS ─────────────────────────────────────── */
.lb-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 2px 0 14px;
}
.lb-tab {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  padding: 9px 26px 10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: #2c3a4d;
  color: rgba(255, 248, 236, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 3px 0 0 #1a2432,
    0 3px 0 2px #0a0d14;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.lb-tab:hover {
  color: #fff8ec;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 5px 0 0 #1a2432,
    0 5px 0 2px #0a0d14;
}
.lb-tab:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px #0a0d14,
    0 1px 0 0 #1a2432,
    0 1px 0 2px #0a0d14;
}
.lb-tab.is-active {
  background: #3d8ab5;
  color: #fff8ec;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 3px 0 0 #23566f,
    0 3px 0 2px #0a0d14;
}
.lb-tab.is-active:hover {
  transform: none;
  box-shadow:
    0 0 0 2px #0a0d14,
    0 3px 0 0 #23566f,
    0 3px 0 2px #0a0d14;
}

/* ─── RANKED PANEL STEPS ────────────────────────────────────────── */
.rk-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 18px;
  text-align: left;
}
.rk-step {
  padding: 13px 15px 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.rk-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.rk-mark {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3f5f96;
  color: #fff8ec;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px #0a0d14, 0 2px 0 0 #26395c, 0 2px 0 2px #0a0d14;
}
.rk-title {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #fff8ec;
}
.rk-state {
  margin-left: auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 236, 226, 0.42);
  white-space: nowrap;
}
.rk-state.is-ok {
  color: #7fd6a2;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.rk-body {
  margin: 11px 0 0 35px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rk-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rk-input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 6px;
  padding: 10px 13px 11px;
  background: #10151f;
  color: #fff8ec;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13.5px;
  box-shadow: 0 0 0 2px #0a0d14, inset 0 2px 6px rgba(0, 0, 0, 0.7);
  outline: none;
}
.rk-input::placeholder {
  color: rgba(242, 236, 226, 0.3);
}
.rk-input:focus {
  box-shadow: 0 0 0 2px #3d8ab5, inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
.rk-addr {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: #fff8ec;
}
.rk-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  padding: 10px 20px 11px;
  color: #fff8ec;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  background: #3d8ab5;
  box-shadow: 0 0 0 2px #0a0d14, 0 3px 0 0 #23566f, 0 3px 0 2px #0a0d14;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.rk-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px #0a0d14, 0 5px 0 0 #23566f, 0 5px 0 2px #0a0d14;
}
.rk-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 0 0 2px #0a0d14, 0 1px 0 0 #23566f, 0 1px 0 2px #0a0d14;
}
.rk-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rk-btn-ghost {
  background: #46586e;
  box-shadow: 0 0 0 2px #0a0d14, 0 3px 0 0 #26313f, 0 3px 0 2px #0a0d14;
}
.rk-btn-ghost:hover:not(:disabled) {
  box-shadow: 0 0 0 2px #0a0d14, 0 5px 0 0 #26313f, 0 5px 0 2px #0a0d14;
}
.rk-msg {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 1.55;
  min-height: 17px;
  color: rgba(242, 236, 226, 0.45);
}
.rk-msg.is-muted {
  color: rgba(242, 236, 226, 0.45);
}
.rk-msg.is-ok {
  color: #7fd6a2;
}
.rk-msg.is-err {
  color: #ff8a7a;
}

/* ─── DOCS MODAL (How to Earn) ──────────────────────────────────────────── */
.docs-card { width: 760px; max-width: 95vw; text-align: left; }
.docs-card .menu-modal-eyebrow, .docs-card .menu-modal-title { text-align: center; }

.docs-timer { margin: 4px 0 18px; padding: 16px 20px; border-radius: 7px; text-align: center;
  background: linear-gradient(180deg, rgba(201,162,75,0.14), rgba(7,11,18,0.55));
  box-shadow: inset 0 0 0 1px rgba(201,162,75,0.45), 0 0 26px rgba(201,162,75,0.12); }
.docs-timer-label { font-family: 'Shippori Mincho', serif; font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase; color: rgba(242,236,226,0.55); }
.docs-timer-value { font-family: 'Yuji Syuku', serif; font-size: 30px; line-height: 1.15;
  color: #f2cd72; letter-spacing: 0.06em; margin-top: 4px;
  text-shadow: 0 0 22px rgba(242,205,114,0.45), 0 2px 0 rgba(0,0,0,0.5);
  font-variant-numeric: tabular-nums; }
.docs-timer-sub { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 11.5px;
  color: rgba(242,236,226,0.55); margin-top: 4px; min-height: 14px; }

.docs-nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08); }
.docs-nav a { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,236,226,0.55); text-decoration: none; padding: 6px 11px; border-radius: 5px;
  background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  transition: color 0.15s, background 0.15s; }
.docs-nav a:hover { color: #fff8ec; background: rgba(255,255,255,0.08); }

.docs-body { max-height: 52vh; overflow-y: auto; padding-right: 10px; scroll-behavior: smooth; }
.docs-body::-webkit-scrollbar { width: 6px; }
.docs-body::-webkit-scrollbar-thumb { background: rgba(110,203,255,0.3); border-radius: 3px; }
.docs-body section { padding: 6px 0 20px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06); scroll-margin-top: 8px; }
.docs-body section:last-child { border-bottom: 0; }
.docs-body h3 { font-family: 'Yuji Syuku', serif; font-size: 22px; letter-spacing: 0.04em;
  color: #fff8ec; margin: 0 0 10px; text-shadow: 0 2px 0 rgba(0,0,0,0.5); }
.docs-body p { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 13.5px;
  line-height: 1.7; color: rgba(242,236,226,0.78); margin: 0 0 10px; }
.docs-body p b { color: #fff8ec; font-weight: 700; }
.docs-note { font-size: 12px !important; color: rgba(242,236,226,0.5) !important; font-style: italic; }

.docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 12px; }
.docs-tile { padding: 14px 16px; border-radius: 7px; background: rgba(255,255,255,0.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.docs-tile p { font-size: 12.5px; margin: 0; }
.docs-tile-head { font-family: 'Shippori Mincho', serif; font-size: 13px;
  letter-spacing: 0.08em; color: #fff8ec; margin-bottom: 7px; }
.docs-tile-gold { background: rgba(201,162,75,0.08);
  box-shadow: inset 0 0 0 1px rgba(201,162,75,0.38); }
.docs-tile-gold .docs-tile-head { color: #f2cd72; }

.docs-steps { margin: 6px 0 10px; padding-left: 0; list-style: none; counter-reset: st; }
.docs-steps li { position: relative; padding: 0 0 0 40px; margin-bottom: 10px;
  font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 13px; line-height: 1.65;
  color: rgba(242,236,226,0.78); counter-increment: st; }
.docs-steps li b { color: #fff8ec; }
.docs-steps li::before { content: counter(st); position: absolute; left: 0; top: 2px;
  width: 26px; height: 26px; border-radius: 5px; display: flex; align-items: center;
  justify-content: center; background: #c9a24b; color: #20180a;
  font-weight: 900; font-size: 12px;
  box-shadow: 0 0 0 2px #0a0d14, 0 2px 0 0 #8a6c26, 0 2px 0 2px #0a0d14; }

.docs-status { list-style: none; padding: 0; margin: 6px 0 12px; }
.docs-status li { display: flex; align-items: center; gap: 10px;
  font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 13px;
  color: rgba(242,236,226,0.8); padding: 6px 0; }
.docs-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.docs-dot.live { background: #7fd6a2; box-shadow: 0 0 10px rgba(127,214,162,0.7); }
.docs-dot.soon { background: rgba(242,205,114,0.5); box-shadow: 0 0 0 1px rgba(242,205,114,0.5); }

@media (max-width: 640px) { .docs-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   THEME: MODERN ARCADE
   Flat glass, one accent, motion on hover. Supersedes the chunky lacquer
   pass above — appended last so the cascade resolves to this.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ui-accent: #6ecbff;
  --ui-accent-2: #f2cd72;
  --ui-glass: rgba(8, 12, 20, 0.62);
  --ui-glass-solid: rgba(8, 12, 20, 0.86);
  --ui-line: rgba(255, 255, 255, 0.10);
  --ui-line-strong: rgba(255, 255, 255, 0.18);
  --ui-text: #f2ece2;
  --ui-text-dim: rgba(242, 236, 226, 0.58);
}

/* ─── TITLE MENU ─────────────────────────────────────────────────────── */
.title-menu { width: 400px; gap: 10px; }
.title-btn, .title-btn:hover, .title-btn:active {
  transform: none; filter: none; box-shadow: none; border-radius: 3px;
  background: var(--ui-glass); color: var(--ui-text);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-shadow: none; padding: 14px 22px 15px 26px;
  align-items: flex-start; text-align: left; gap: 3px;
  position: relative; overflow: hidden;
  transition: background 0.18s ease, transform 0.18s cubic-bezier(.2,.8,.2,1);
}
.title-btn::before {                                   /* accent bar */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ui-accent); transform: scaleY(0.32); transform-origin: center;
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), width 0.22s ease;
  border-radius: 0;
}
.title-btn::after {                                    /* hairline */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--ui-line); border-radius: 3px;
  transition: box-shadow 0.18s ease;
}
.title-btn:hover { background: rgba(110, 203, 255, 0.10); transform: translateX(6px); }
.title-btn:hover::before { transform: scaleY(1); width: 4px; }
.title-btn:hover::after { box-shadow: inset 0 0 0 1px rgba(110, 203, 255, 0.55); }
.title-btn:active { transform: translateX(4px) scale(0.995); }
.title-btn-tag { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.34em; opacity: 0.55; text-transform: uppercase; }
.title-btn-label { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900;
  font-size: 24px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.05;
  font-style: italic; }

/* per-action colour: only the accent bar and hover tint change */
#btnCasual, #btnRanked, #btnHowToPlay, #btnLeaderboard, #btnHowToEarn,
#btnCasual:hover, #btnRanked:hover, #btnHowToPlay:hover, #btnLeaderboard:hover, #btnHowToEarn:hover,
#btnCasual:active, #btnRanked:active, #btnHowToPlay:active, #btnLeaderboard:active, #btnHowToEarn:active
  { background: var(--ui-glass); box-shadow: none; color: var(--ui-text); text-shadow: none; }
#btnCasual::before      { background: #7fd6a2; }
#btnRanked::before      { background: var(--ui-accent-2); }
#btnHowToPlay::before   { background: var(--ui-accent); }
#btnLeaderboard::before { background: var(--ui-accent); }
#btnHowToEarn::before   { background: #ff7a6a; }
#btnCasual:hover      { background: rgba(127,214,162,0.10); }
#btnRanked:hover      { background: rgba(242,205,114,0.10); }
#btnHowToEarn:hover   { background: rgba(255,122,106,0.10); }
#btnRanked .title-btn-label { color: var(--ui-accent-2); }
#btnCasual .title-btn-label { color: #cfeedd; }

/* ─── MODALS ─────────────────────────────────────────────────────────── */
.menu-modal { background: rgba(4, 6, 11, 0.70);
  backdrop-filter: blur(14px) saturate(0.8); -webkit-backdrop-filter: blur(14px) saturate(0.8); }
.menu-modal-card, .docs-card {
  background: var(--ui-glass-solid); border: 1px solid var(--ui-line-strong); border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6); padding: 34px 40px;
  animation: cardRise 0.36s cubic-bezier(.2,.9,.2,1);
}
.menu-modal-card::before { height: 2px; background: var(--ui-accent);
  left: 40px; right: auto; width: 56px; opacity: 0.9; }
.menu-modal-card::after { display: none; }
.menu-modal-eyebrow { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 0.4em; color: var(--ui-accent); text-shadow: none;
  text-align: left; margin-bottom: 6px; }
.menu-modal-title { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900;
  font-size: 34px; letter-spacing: 0.02em; text-transform: uppercase; font-style: italic;
  text-align: left; text-shadow: none; margin-bottom: 18px; }
.menu-modal-icon { display: none; }
.menu-modal-text { text-align: left; padding: 0; color: var(--ui-text-dim); font-size: 14px; }
.menu-modal-eta { background: rgba(255,255,255,0.03); border: 1px solid var(--ui-line);
  border-radius: 3px; text-align: left; padding: 14px 16px;
  display: flex; align-items: baseline; gap: 14px; }
.menu-modal-eta-label { margin: 0; }
.menu-modal-eta-date { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900;
  font-size: 17px; letter-spacing: 0.04em; text-shadow: none; }

/* every "primary" button in a modal — flat accent, sharp */
.menu-modal-close, .setup-btn-continue, .setup-btn-x, .rk-btn, .wallet-btn, .lb-tab.is-active,
.menu-modal-close:hover, .setup-btn-continue:hover, .setup-btn-x:hover,
.rk-btn:hover:not(:disabled), .wallet-btn:hover:not(:disabled),
.menu-modal-close:active, .setup-btn-continue:active, .setup-btn-x:active,
.rk-btn:active:not(:disabled) {
  transform: none; filter: none; box-shadow: none; text-shadow: none; border-radius: 3px;
  background: var(--ui-accent); color: #061018;
  font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900;
  letter-spacing: 0.22em; text-transform: uppercase;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.menu-modal-close:hover, .setup-btn-continue:hover, .setup-btn-x:hover,
.rk-btn:hover:not(:disabled), .wallet-btn:hover:not(:disabled) {
  background: #8fdbff; box-shadow: 0 0 0 4px rgba(110,203,255,0.18); transform: translateY(-1px);
}
.menu-modal-close:active, .setup-btn-continue:active, .rk-btn:active:not(:disabled) { transform: translateY(0); }
.menu-modal-close { padding: 13px 34px; font-size: 12px; margin-left: 0; }
.setup-btn-continue { background: #7fd6a2; }
.setup-btn-continue:hover { background: #9be6b8; box-shadow: 0 0 0 4px rgba(127,214,162,0.18); }
.setup-btn-x { background: transparent; color: var(--ui-text); box-shadow: inset 0 0 0 1px var(--ui-line-strong); }
.setup-btn-x:hover { background: rgba(255,255,255,0.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.setup-btn-sub { color: inherit; opacity: 0.6; }

/* secondary / ghost */
.rk-btn-ghost, .wallet-btn-ghost, .auth-badge-change, .lb-tab, .skin-arrow,
.rk-btn-ghost:hover:not(:disabled), .wallet-btn-ghost:hover:not(:disabled), .auth-badge-change:hover, .lb-tab:hover, .skin-arrow:hover {
  background: transparent; color: var(--ui-text-dim); border: 0; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--ui-line); transform: none; text-shadow: none; filter: none;
  transition: color 0.15s, box-shadow 0.15s, background 0.15s;
}
.rk-btn-ghost:hover:not(:disabled), .wallet-btn-ghost:hover:not(:disabled), .auth-badge-change:hover, .lb-tab:hover, .skin-arrow:hover {
  color: var(--ui-text); box-shadow: inset 0 0 0 1px var(--ui-line-strong); background: rgba(255,255,255,0.04);
}
.lb-tab.is-active, .lb-tab.is-active:hover { color: #061018; box-shadow: none; background: var(--ui-accent); transform: none; }

/* ranked panel + docs tiles: thinner, cleaner */
.rk-step, .req-item, .docs-tile, .wallet-panel, .char-stats, .title-controls, .menu-modal-controls, .lb-prize-banner {
  background: rgba(255,255,255,0.025); box-shadow: inset 0 0 0 1px var(--ui-line); border: 0; border-radius: 3px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.docs-tile-gold { box-shadow: inset 0 0 0 1px rgba(242,205,114,0.4); background: rgba(242,205,114,0.05); }
.rk-mark, .req-mark, .docs-steps li::before { background: var(--ui-accent); color: #061018;
  box-shadow: none; border-radius: 3px; font-size: 11px; }
#howToEarnModal .req-mark, .docs-steps li::before { background: var(--ui-accent-2); }
.rk-title, .req-name, .docs-tile-head { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700;
  letter-spacing: 0.02em; }
.rk-input { background: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1px var(--ui-line); border-radius: 3px; }
.rk-input:focus { box-shadow: inset 0 0 0 1px var(--ui-accent), 0 0 0 3px rgba(110,203,255,0.15); }
.username-input { border-radius: 3px; border: 0; box-shadow: inset 0 0 0 1px var(--ui-line); background: rgba(0,0,0,0.35); }
.username-input:focus { box-shadow: inset 0 0 0 1px var(--ui-accent), 0 0 0 3px rgba(110,203,255,0.15); }
.title-controls .k { background: rgba(255,255,255,0.06); color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-line); border-radius: 3px; text-shadow: none; }

/* leaderboard */
.lb-prize-banner::before { display: none; }
.lb-prize-ends { background: var(--ui-accent); color: #061018; box-shadow: none; border-radius: 3px; }
.lb-prize-row, .lb-prize-row-gold { background: rgba(255,255,255,0.03); border: 0; box-shadow: inset 0 0 0 1px var(--ui-line); border-radius: 3px; }
.lb-prize-row-gold { box-shadow: inset 0 0 0 1px rgba(242,205,114,0.4); }
.leaderboard-row { border-radius: 3px; border-color: var(--ui-line); }
.leaderboard-row.is-top-3 { box-shadow: inset 0 0 0 1px rgba(110,203,255,0.35); }

/* docs */
.docs-timer { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(242,205,114,0.4); }
.docs-timer-value { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: 26px;
  letter-spacing: 0.02em; text-shadow: none; }
.docs-nav a { border-radius: 3px; }
.docs-body h3 { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: 20px;
  text-transform: uppercase; font-style: italic; letter-spacing: 0.02em; text-shadow: none; }

/* chrome: badge, CA bar, toggles */
.auth-badge, .ca-bar {
  background: var(--ui-glass); border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ui-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.auth-badge::before, .ca-bar::before, .ca-bar::after { display: none; }
.auth-badge-name, .ca-bar-value { text-shadow: none; }
.auth-badge-verified { background: rgba(110,203,255,0.15); color: var(--ui-accent); box-shadow: inset 0 0 0 1px rgba(110,203,255,0.4); border-radius: 3px; }
.ca-bar-eyebrow { color: var(--ui-accent-2); text-shadow: none; }
.ca-bar-copy, .ca-bar-copy:hover, .ca-bar-copy:active { background: var(--ui-accent-2); color: #20180a; box-shadow: none; transform: none; border-radius: 3px; }
.ca-bar-copy:hover { background: #ffe08a; }
.music-toggle, .x-link-toggle, .music-toggle:hover, .x-link-toggle:hover, .music-toggle:active, .x-link-toggle:active {
  background: var(--ui-glass); color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-line);
  transform: none; filter: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.music-toggle:hover, .x-link-toggle:hover { box-shadow: inset 0 0 0 1px rgba(110,203,255,0.5); background: rgba(110,203,255,0.08); }
.music-toggle.is-muted { color: var(--ui-text-dim); }
.world-map-back, .world-map-back:hover, .world-map-back:active {
  background: var(--ui-glass); box-shadow: inset 0 0 0 1px var(--ui-line); transform: none; filter: none;
  border-radius: 3px; text-shadow: none; backdrop-filter: blur(12px);
  font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700;
}
.world-map-back::before { display: none; }
.world-map-back:hover { box-shadow: inset 0 0 0 1px rgba(110,203,255,0.5); }

/* loading bar */
.loader-bar-wrap { border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ui-line-strong); background: rgba(0,0,0,0.5); height: 8px; }
.loader-bar { background: var(--ui-accent); border-radius: 2px; }

/* title: tighten the big name and give it a slant */
.title-name { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-style: italic;
  letter-spacing: -0.01em; text-transform: uppercase; }
/* unify the last serif holdouts with the theme */
.lb-prize-reward, .lb-rank, .lb-wave, .lb-games, .leaderboard-row.is-top-3 .lb-rank,
.lb-prize-week-name, .auth-badge-label, .ca-bar-eyebrow, .menu-modal-eta-label,
.rk-state, .skin-info-name, .loader-title, .go-title, .wave-number, .ko-num, .level-num {
  font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; text-shadow: none;
}
.lb-prize-reward { font-size: 28px; letter-spacing: 0.02em; font-style: italic; }
.lb-prize-week-name { font-size: 12px; letter-spacing: 0.3em; }
.auth-badge-label, .menu-modal-eta-label, .ca-bar-eyebrow { font-weight: 700; }
.go-title, .wave-number, .loader-title { font-style: italic; text-transform: uppercase; }


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE
   One column, full-width sheets, thumb-sized targets, safe-area aware.
   ══════════════════════════════════════════════════════════════════════════ */
.desk-actions { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }

@media (max-width: 760px) {
  body:not(.is-playing) { overflow: auto; }
  body.is-playing { overflow: hidden; position: fixed; inset: 0; }
  .title-screen { padding: 0; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .title-screen > .title-name, .title-screen > .title-menu, .title-screen > .auth-badge {
    position: relative; z-index: 3; }
  .title-name { font-size: clamp(46px, 15vw, 72px); margin: calc(env(safe-area-inset-top) + 88px) 20px 16px; }
  .title-menu { width: calc(100% - 40px); margin: 0 20px; gap: 8px; }
  .title-btn { padding: 15px 18px 16px 22px; min-height: 64px; }
  .title-btn:hover { transform: none; }              /* no hover on touch; keep the tap state */
  .title-btn:active { transform: scale(0.985); background: rgba(110,203,255,0.12); }
  .title-btn-label { font-size: 21px; }
  .auth-badge { margin: 14px 20px calc(env(safe-area-inset-bottom) + 90px); width: calc(100% - 40px);
    flex-wrap: wrap; row-gap: 8px; justify-content: center; }

  /* chrome pinned to the corners, above the notch */
  .world-map-back { top: calc(env(safe-area-inset-top) + 12px); left: 12px; font-size: 10px; padding: 9px 12px 10px; }
  .ca-bar { top: auto; bottom: calc(env(safe-area-inset-bottom) + 14px); left: 12px; right: 12px; transform: none;
    width: auto; flex-direction: row; justify-content: space-between; padding: 10px 14px; gap: 10px; }
  .ca-bar-eyebrow { font-size: 9px; }
  .ca-bar-value { max-width: 46vw; font-size: 12px; }
  .music-toggle, .x-link-toggle { bottom: auto; top: calc(env(safe-area-inset-top) + 12px); right: 12px; width: 40px; height: 40px; }
  .x-link-toggle { right: 60px; }

  /* modals become bottom sheets */
  .menu-modal { align-items: flex-end; }
  .menu-modal-card, .menu-modal-card-wide, .docs-card {
    width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh;
    border-radius: 14px 14px 0 0; border-bottom: 0;
    padding: 22px 20px calc(env(safe-area-inset-bottom) + 20px);
    animation: sheetUp 0.32s cubic-bezier(.2,.9,.2,1);
  }
  .menu-modal-card::before { left: 20px; }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .menu-modal-title { font-size: 28px; }
  .menu-modal-close, .setup-btn, .rk-btn, .wallet-btn, .lb-tab { min-height: 48px; }
  .menu-modal-close { width: 100%; }
  .menu-modal-eta { flex-direction: column; gap: 4px; }

  /* ranked panel */
  .rk-body { margin-left: 0; margin-top: 12px; }
  .rk-inline { flex-wrap: wrap; }
  .rk-input { flex: 1 1 100%; font-size: 16px; }   /* 16px stops iOS zooming the page on focus */
  .rk-btn { flex: 1 1 auto; }
  .rk-state.is-ok { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }

  /* leaderboard */
  .leaderboard-list { max-height: 56vh; }
  .leaderboard-row { grid-template-columns: 30px 1fr 46px 60px; gap: 8px; padding: 10px 10px; }
  .lb-games, .lb-wave { font-size: 15px; }
  .lb-prize-week { flex-direction: column; gap: 8px; }
  .lb-prize-row { min-width: 0; width: 100%; }
  .lb-tabs { width: 100%; }
  .lb-tab { flex: 1; }

  /* docs */
  .docs-body { max-height: none; overflow: visible; padding-right: 0; }
  .docs-card { max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
  .docs-grid { grid-template-columns: 1fr; }
  .docs-nav { gap: 5px; }
  .docs-nav a { padding: 7px 9px; font-size: 9px; }
  .docs-timer-value { font-size: 22px; }
  .docs-body h3 { font-size: 18px; }

  /* setup modal: stack, big preview */
  #playerSetupModal .skin-preview-canvas { height: clamp(140px, 34vh, 240px); }
  .setup-buttons { flex-direction: column; }
  .setup-buttons .setup-btn { width: 100%; }
  .username-input { font-size: 16px; }
  .title-controls, .menu-modal-controls { grid-template-columns: 1fr; gap: 6px 0; }
  .title-controls .k { min-width: 0; display: inline-block; margin-bottom: 2px; }
}

@media (max-width: 400px) {
  .title-btn-label { font-size: 19px; }
  .menu-modal-title { font-size: 25px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   TOUCH CONTROLS  (js/touch.js) — only exists in the DOM on touch devices
   ══════════════════════════════════════════════════════════════════════════ */
#touchUI { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none;
  font-family: 'Zen Kaku Gothic New', sans-serif; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; }
#touchUI.is-playing { display: block; }
#touchUI * { touch-action: none; }

.t-zone { position: absolute; top: 0; bottom: 0; pointer-events: auto; }
.t-zone-l { left: 0; width: 46%; }
.t-zone-r { right: 0; width: 54%; pointer-events: none; }

/* floating stick — appears under the thumb */
.t-stick { position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%;
  background: rgba(8,12,20,0.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), 0 0 0 1px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.12s; pointer-events: none; }
/* resting: visible at a default spot so the thumb knows where to go.
   Touching anywhere on the left half snaps it under the thumb. */
.t-stick.is-rest { opacity: 0.55; left: calc(env(safe-area-inset-left) + 96px); top: auto;
  bottom: calc(env(safe-area-inset-bottom) + 30px); margin: 0 0 0 -66px; }
.t-stick.is-on { opacity: 1; }
.t-stick-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: rgba(110,203,255,0.85);
  box-shadow: 0 0 0 3px rgba(8,12,20,0.6), 0 0 22px rgba(110,203,255,0.45); }

/* action buttons, bottom-right, safe-area aware */
.t-actions { position: absolute; right: calc(env(safe-area-inset-right) + 18px); bottom: calc(env(safe-area-inset-bottom) + 18px);
  display: flex; align-items: flex-end; gap: 14px; pointer-events: auto; }
.t-btn { border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #061018; font-weight: 900; letter-spacing: 0.16em; font-size: 12px;
  box-shadow: 0 0 0 3px rgba(8,12,20,0.55), 0 8px 24px rgba(0,0,0,0.45);
  transition: transform 0.08s, filter 0.08s; }
.t-btn-attack { width: 104px; height: 104px; background: #6ecbff; font-size: 13px; }
.t-btn-dash   { width: 72px;  height: 72px;  background: #f2cd72; margin-bottom: 10px; }
.t-btn.is-down { transform: scale(0.92); filter: brightness(1.15); }

/* skill bar, above the action buttons */
.t-skills { position: absolute; right: calc(env(safe-area-inset-right) + 18px); bottom: calc(env(safe-area-inset-bottom) + 142px);
  display: flex; gap: 10px; pointer-events: auto; }
.t-skill { position: relative; width: 56px; height: 56px; border: 0; border-radius: 10px; overflow: hidden;
  background: rgba(8,12,20,0.7); color: #f2ece2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.22), 0 6px 18px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.08s; }
.t-skill-ico { font-size: 20px; line-height: 1; position: relative; z-index: 2; }
.t-skill-lab { font-size: 8px; letter-spacing: 0.2em; font-weight: 700; opacity: 0.8; position: relative; z-index: 2; }
.t-skill-cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(110,203,255,0.35); z-index: 1;
  transition: height 0.1s linear; }
.t-skill.is-cooling { color: rgba(242,236,226,0.5); }
.t-skill.is-down { transform: scale(0.9); }
.t-hidden { display: none !important; }

/* rotate prompt */
.t-rotate { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: rgba(5,7,11,0.94); pointer-events: auto; z-index: 5; text-align: center; padding: 30px; }
.t-rotate.is-on { display: flex; }
.t-rotate-icon { font-size: 64px; color: #6ecbff; animation: tRot 1.6s ease-in-out infinite; }
@keyframes tRot { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }
.t-rotate-title { color: #fff; font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.t-rotate-sub { color: rgba(242,236,226,0.6); font-size: 14px; }

/* landscape phone: compact HUD so it doesn't cover the fight */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .hud { transform: scale(0.78); transform-origin: top left; }
  .hud-right, .hud-boss { transform-origin: top right; }
  .music-toggle-hud { display: none; }
}

/* chrome steps aside while a modal is up — it was sitting on top of the sheets */
body.modal-open .ca-bar,
body.modal-open .music-toggle,
body.modal-open .x-link-toggle,
body.modal-open .auth-badge { opacity: 0; pointer-events: none; transition: opacity 0.15s; }

/* ─── EARN-STOCKS MESSAGING ─────────────────────────────────────────────── */
.docs-hero { padding: 22px 24px 24px; margin: 2px 0 16px; border-radius: 4px; text-align: center;
  background: linear-gradient(180deg, rgba(110,203,255,0.10), rgba(7,11,18,0.5));
  box-shadow: inset 0 0 0 1px rgba(110,203,255,0.35); }
.docs-hero-kicker { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-style: italic;
  font-size: 26px; letter-spacing: 0.01em; text-transform: uppercase; color: rgba(242,236,226,0.75); line-height: 1.1; }
.docs-hero-line { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-style: italic;
  font-size: 40px; letter-spacing: 0.01em; text-transform: uppercase; color: #fff8ec; line-height: 1.05; margin-top: 2px; }
.docs-hero-hl { color: #6ecbff; text-shadow: 0 0 26px rgba(110,203,255,0.45); }
.docs-hero-sub { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 13.5px; line-height: 1.7;
  color: rgba(242,236,226,0.68); max-width: 460px; margin: 12px auto 0; }

.docs-callout { padding: 16px 18px; border-radius: 4px; margin: 4px 0 14px;
  background: rgba(110,203,255,0.07); box-shadow: inset 0 0 0 1px rgba(110,203,255,0.32); }
.docs-callout-big { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-style: italic;
  font-size: 20px; text-transform: uppercase; color: #6ecbff; margin-bottom: 8px; }
.docs-callout p { margin: 0; }

.docs-tile-flag { font-family: 'Zen Kaku Gothic New', sans-serif !important; font-weight: 700 !important;
  font-size: 10px !important; letter-spacing: 0.2em !important; text-transform: uppercase;
  color: rgba(242,236,226,0.42) !important; margin-bottom: 8px !important; }
.docs-tile-flag.is-gold { color: #f2cd72 !important; }

.mode-flag { display: inline-block; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 6px 12px 7px;
  border-radius: 3px; margin-bottom: 14px; color: rgba(242,236,226,0.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.mode-flag.is-gold { color: #f2cd72; background: rgba(242,205,114,0.10);
  box-shadow: inset 0 0 0 1px rgba(242,205,114,0.45); }

.rk-timer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding: 12px 14px; border-radius: 3px; margin-bottom: 16px;
  background: rgba(242,205,114,0.07); box-shadow: inset 0 0 0 1px rgba(242,205,114,0.32); }
.rk-timer-label { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.28em; text-transform: uppercase; color: rgba(242,236,226,0.5); }
.rk-timer-value { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: 17px;
  letter-spacing: 0.02em; color: #f2cd72; font-variant-numeric: tabular-nums; }
.rk-timer-note { flex: 1 1 100%; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 11.5px;
  color: rgba(242,236,226,0.5); }

/* under an hour, the countdown pulses */
[data-payout-countdown].is-urgent { color: #ff8a5c !important; animation: payoutPulse 1.6s ease-in-out infinite; }
@keyframes payoutPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (max-width: 760px) {
  .docs-hero-line { font-size: 30px; }
  .docs-hero-kicker { font-size: 20px; }
  .docs-callout-big { font-size: 17px; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH — in-run layout. Everything scoped to html.is-touch (set by
   js/touch.js on touch devices only). !important throughout: these have to
   beat the desktop HUD rules whatever order the cascade lands in.
   ═══════════════════════════════════════════════════════════════════════════ */
html.is-touch body.is-playing .ca-bar,
html.is-touch body.is-playing .music-toggle-hud,
html.is-touch body.is-playing .settings-btn,
html.is-touch .bottom-bar,
html.is-touch .hud .top-right { display: none !important; }   /* KO panel: gone */

html.is-touch .hud { transform: none !important; }

html.is-touch .hud .top-left,
html.is-touch .hud .top-center {
  position: absolute !important; top: calc(env(safe-area-inset-top) + 8px) !important;
  padding: 6px 10px 7px !important; border: 0 !important; border-radius: 4px !important;
  background: rgba(8,12,20,0.5) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
}
html.is-touch .hud .top-left::before,  html.is-touch .hud .top-left::after,
html.is-touch .hud .top-center::before,html.is-touch .hud .top-center::after { display: none !important; }

/* LEFT — level + bars, compact */
html.is-touch .hud .top-left { left: calc(env(safe-area-inset-left) + 10px) !important; width: 176px !important; }
html.is-touch .hud .level-block { margin-bottom: 3px !important; padding-bottom: 3px !important; }
html.is-touch .hud .level-text { font-size: 7.5px !important; letter-spacing: 0.2em !important; }
html.is-touch .hud .level-num { font-size: 16px !important; line-height: 1 !important; }
html.is-touch .hud .player-name { font-size: 10px !important; max-width: 104px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html.is-touch .hud .stat-row { gap: 5px !important; margin: 2px 0 !important; }
html.is-touch .hud .stat-label { font-size: 7px !important; width: 20px !important; letter-spacing: 0.08em !important; }
html.is-touch .hud .bar { height: 5px !important; }
html.is-touch .hud .stat-num { font-size: 8.5px !important; min-width: 38px !important; }

/* WAVE — moves to the top-right where KOs used to be */
html.is-touch .hud .top-center {
  left: auto !important; right: calc(env(safe-area-inset-right) + 10px) !important;
  transform: none !important; width: auto !important; min-width: 0 !important; text-align: right !important;
}
html.is-touch .hud .wave-eyebrow { font-size: 7px !important; letter-spacing: 0.2em !important; }
html.is-touch .hud .wave-number { font-size: 20px !important; line-height: 1 !important; margin: 1px 0 !important; }
html.is-touch .hud .wave-meta { font-size: 8.5px !important; gap: 8px !important; justify-content: flex-end !important; }

/* ── LEVEL-UP: fit three cards AND the button on a landscape phone ────── */
html.is-touch .levelup { padding: calc(env(safe-area-inset-top) + 6px) 10px calc(env(safe-area-inset-bottom) + 6px) !important;
  justify-content: center !important; overflow: hidden !important; }
html.is-touch .lu-title { font-size: 18px !important; margin: 0 !important; line-height: 1 !important; }
html.is-touch .lu-sub { font-size: 9px !important; margin: 2px 0 6px !important; }
html.is-touch .lu-cards { gap: 10px !important; }
html.is-touch .lu-card { width: 150px !important; height: 214px !important; padding: 22px 10px 8px !important; }
html.is-touch .lu-card-rarity { font-size: 7.5px !important; letter-spacing: 0.24em !important; top: 38px !important; }
html.is-touch .lu-card-name { font-size: 15px !important; margin-top: 0 !important; letter-spacing: 0.03em !important; }
html.is-touch .lu-card-icon { width: 46px !important; height: 46px !important; font-size: 26px !important; margin: 6px auto !important; }
html.is-touch .lu-card-desc { font-size: 9.5px !important; line-height: 1.35 !important; bottom: 8px !important; padding: 0 6px !important; }
html.is-touch .lu-card .lu-card-key, html.is-touch .lu-card .k { display: none !important; }   /* keyboard hints: no keys on a phone */
html.is-touch .lu-invoke { margin-top: 8px !important; padding: 11px 32px !important; font-size: 12px !important; }
/* the "New" ribbon and the pin at the top of each card scale with it */
html.is-touch .lu-card-level { font-size: 8px !important; padding: 3px 6px !important; top: 8px !important; right: 8px !important; }
html.is-touch .lu-card::before { transform: scale(0.6) !important; }   /* the hanging pin */
html.is-touch .lu-card::after  { height: 22px !important; }            /* the string above it */

@media (max-height: 380px) {
  html.is-touch .lu-card { width: 136px !important; height: 190px !important; }
  html.is-touch .lu-card-icon { width: 38px !important; height: 38px !important; font-size: 22px !important; }
  html.is-touch .lu-card-desc { font-size: 9px !important; }
}