:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #060b13;
  color: #e8f8ff;
  --bg: #060b13;
  --bg-deep: #03070d;
  --bg-panel: rgba(8, 16, 29, 0.9);
  --bg-panel-strong: rgba(13, 23, 39, 0.96);
  --cyan: #7fe7ff;
  --cyan-soft: rgba(127, 231, 255, 0.48);
  --cyan-line: rgba(127, 231, 255, 0.5);
  --ink: #e8f8ff;
  --muted: #7892aa;
  --gold: #ffd65a;
  --mint: #5df0c3;
  --blue: #82b7ff;
  --violet: #b694ff;
  --pink: #ff4fb3;
  --orange: #ff8a3d;
  --danger: #ff6b8a;
  --stage-width: 2240px;
  --stage-height: 1260px;
  --stage-scale: 1;
  --cut-panel: 18px;
  --cut-button: 14px;
  --cut-chip: 10px;
  --stroke: 2px;
  --edge-pad: clamp(14px, 2.8cqh, 32px);
  --play-control-inset-x: 96px;
  --play-control-inset-y: 80px;
  --screen-pad: clamp(20px, 5cqh, 42px);
  --top-button-size: clamp(58px, 8.8cqh, 76px);
  --top-button-gap: clamp(10px, 2.2cqh, 16px);
  --screen-heading-size: clamp(78px, 14cqh, 112px);
  --result-heading-size: clamp(92px, 18cqh, 164px);
  --result-stat-size: clamp(46px, 8.6cqh, 82px);
  --upgrade-row-height: clamp(104px, 16cqh, 132px);
  --ui-font-small: 16px;
  --ui-font-body: 18px;
  --ui-font-action: 20px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  min-width: 0;
}

button {
  font: inherit;
}

:root[data-render-quality]:not([data-render-quality="0"]) .hud-panel,
:root[data-render-quality]:not([data-render-quality="0"]) .arena-how-to-dialog,
:root[data-render-quality]:not([data-render-quality="0"]) .settings-dialog,
:root[data-render-quality]:not([data-render-quality="0"]) .mission-dialog,
:root[data-render-quality]:not([data-render-quality="0"]) .leaderboard-dialog,
:root[data-render-quality]:not([data-render-quality="0"]) .daily-bonus-dialog,
:root[data-render-quality]:not([data-render-quality="0"]) .reset-confirm-dialog,
:root[data-render-quality]:not([data-render-quality="0"]) .skin-dialog {
  backdrop-filter: none;
}

:root[data-render-quality]:not([data-render-quality="0"]) .primary-button,
:root[data-render-quality]:not([data-render-quality="0"]) .secondary-button,
:root[data-render-quality]:not([data-render-quality="0"]) .settings-button,
:root[data-render-quality]:not([data-render-quality="0"]) .mission-button,
:root[data-render-quality]:not([data-render-quality="0"]) .leaderboard-button,
:root[data-render-quality]:not([data-render-quality="0"]) .daily-bonus-button,
:root[data-render-quality]:not([data-render-quality="0"]) .platform-home-button,
:root[data-render-quality]:not([data-render-quality="0"]) .skin-button,
:root[data-render-quality]:not([data-render-quality="0"]) .mission-claim-button {
  filter: none;
}

:root[data-render-quality="2"] .app[data-screen="playing"].is-time-warning::after,
:root[data-render-quality="2"] .app[data-screen="playing"].is-time-warning .time-hud {
  animation: none;
}

:root[data-render-quality="2"] .app[data-screen="playing"].is-time-warning::after {
  opacity: 0.6;
}

.app {
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--stage-width);
  height: var(--stage-height);
  overflow: hidden;
  background: var(--bg);
  container-type: size;
  isolation: isolate;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  touch-action: none;
  cursor: crosshair;
}

.app[data-screen="playing"] .game-canvas {
  pointer-events: auto;
}

.virtual-stick {
  --stick-x: 0px;
  --stick-y: 0px;
  --stick-size: clamp(280px, 25cqh, 320px);
  position: absolute;
  left: var(--stick-center-x, 0px);
  top: var(--stick-center-y, 0px);
  transform: translate(-50%, -50%);
  z-index: 48;
  width: var(--stick-size);
  pointer-events: none;
  opacity: 0.78;
  transition: opacity 120ms ease-out;
}

.virtual-stick[hidden] {
  display: none;
}

.virtual-stick-base {
  position: relative;
  width: var(--stick-size);
  height: var(--stick-size);
  border: 3px solid rgba(100, 221, 255, 0.58);
  border-radius: 50%;
  background: rgba(3, 17, 31, 0.68);
  box-shadow: inset 0 0 0 8px rgba(4, 28, 48, 0.38);
  pointer-events: none;
  touch-action: none;
  cursor: grab;
}

.virtual-stick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 45%;
  height: 45%;
  border: 3px solid rgba(185, 248, 255, 0.88);
  border-radius: 50%;
  background: rgba(66, 181, 232, 0.94);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.38);
  transform: translate(-50%, -50%) translate3d(var(--stick-x), var(--stick-y), 0);
  will-change: transform;
  pointer-events: none;
}

.virtual-stick.is-active {
  opacity: 1;
}

.virtual-stick.is-active .virtual-stick-base {
  border-color: rgba(151, 241, 255, 0.92);
  cursor: grabbing;
}

.app[data-mode-transition] .virtual-stick,
.app[data-mode-transition] .virtual-stick-base {
  opacity: 0;
  pointer-events: none;
}

@media (pointer: coarse) {
  .virtual-stick {
    --stick-size: clamp(400px, 34cqh, 440px);
  }
}

:root[data-render-quality="2"] .virtual-stick-base,
:root[data-battle-arena-render-quality="2"] .virtual-stick-base {
  background: rgba(4, 20, 36, 0.82);
  box-shadow: none;
}

:root[data-render-quality="2"] .virtual-stick-knob,
:root[data-battle-arena-render-quality="2"] .virtual-stick-knob {
  background: #42b5e8;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.36);
}

.app[data-screen="result"] .game-canvas,
.app[data-screen="upgrade"] .game-canvas,
.app[data-screen="home"] .game-canvas {
  visibility: hidden;
}

.hud {
  position: absolute;
  top: max(var(--edge-pad), env(safe-area-inset-top));
  left: max(var(--edge-pad), env(safe-area-inset-left));
  z-index: 3;
  display: grid;
  width: min(clamp(250px, 44cqh, 360px), calc(100cqw - var(--edge-pad) * 2));
  grid-template-columns: 1fr;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.app[data-screen="playing"] .hud {
  opacity: 1;
  transform: translateY(0);
}

.hud-panel {
  --cut: var(--cut-panel);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --accent: var(--cyan);
  --tint: rgba(127, 231, 255, 0.12);
  --chamfer-border: rgba(127, 231, 255, 0.62);
  --chamfer-fill: rgba(5, 12, 23, 0.88);
  position: relative;
  isolation: isolate;
  min-height: clamp(58px, 8.8cqh, 64px);
  padding: clamp(10px, 1.8cqh, 12px) clamp(12px, 2.3cqh, 16px);
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: blur(14px);
}

.hud-panel::before,
.hud-panel::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.hud-panel::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.hud-panel::after {
  inset: var(--stroke);
  background:
    linear-gradient(180deg, var(--tint), transparent 60%),
    var(--chamfer-fill);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.24);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.hud-label {
  display: block;
  color: var(--pink);
  font-size: clamp(14px, 2cqh, 16px);
  font-weight: 950;
  text-shadow: 0 0 12px rgba(255, 79, 179, 0.2);
}

.hud-value {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-size: clamp(21px, 3.2cqh, 24px);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px var(--tint);
}

.hud-energy {
  --accent: var(--pink);
  --tint: rgba(255, 79, 179, 0.16);
  --chamfer-border: rgba(255, 79, 179, 0.74);
  min-height: clamp(104px, 15.6cqh, 134px);
  padding: clamp(13px, 2.3cqh, 16px) clamp(16px, 2.8cqh, 20px);
}

.hud-energy .hud-value {
  margin-top: clamp(5px, 1.2cqh, 8px);
  font-size: clamp(44px, 7.4cqh, 58px);
  line-height: 0.86;
}

.hud-substat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(10px, 1.8cqh, 14px);
  padding-top: clamp(8px, 1.6cqh, 12px);
  border-top: 2px solid rgba(232, 248, 255, 0.14);
  color: var(--mint);
  font-size: clamp(15px, 2.2cqh, 17px);
  font-weight: 950;
  text-shadow: 0 0 12px rgba(93, 240, 195, 0.2);
}

.hud-substat strong {
  color: var(--mint);
  font-size: clamp(19px, 3cqh, 24px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(93, 240, 195, 0.22);
}

.time-hud {
  --cut: var(--cut-panel);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --accent: var(--cyan);
  --tint: rgba(127, 231, 255, 0.14);
  --chamfer-border: rgba(127, 231, 255, 0.58);
  --chamfer-fill: rgba(5, 12, 23, 0.9);
  position: absolute;
  left: 50%;
  bottom: max(var(--edge-pad), env(safe-area-inset-bottom));
  z-index: 3;
  width: min(660px, calc(100cqw - var(--edge-pad) * 2));
  min-height: clamp(52px, 8.6cqh, 66px);
  padding: clamp(9px, 1.7cqh, 12px) clamp(14px, 2.4cqh, 18px) clamp(11px, 2cqh, 15px);
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  isolation: isolate;
  transition: opacity 180ms ease, transform 180ms ease;
}

.app[data-screen="playing"] .time-hud {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tutorial-banner,
.tutorial-prompt,
.tutorial-skip-button {
  position: absolute;
  z-index: 12;
}

.tutorial-banner[hidden],
.tutorial-prompt[hidden],
.tutorial-skip-button[hidden],
.tutorial-callout[hidden] {
  display: none;
}

.tutorial-banner {
  top: max(var(--edge-pad), env(safe-area-inset-top));
  left: 50%;
  color: #fff;
  font-size: clamp(44px, 7.4cqh, 62px);
  font-weight: 950;
  letter-spacing: 0.14em;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.96),
    0 0 16px rgba(232, 248, 255, 0.92),
    0 0 38px rgba(127, 231, 255, 0.72),
    0 0 72px rgba(127, 231, 255, 0.34);
  animation: tutorial-title-glow 1.8s ease-in-out infinite;
}

.tutorial-prompt {
  --cut: 18px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  left: 50%;
  bottom: calc(max(var(--edge-pad), env(safe-area-inset-bottom)) + clamp(92px, 13cqh, 112px));
  display: grid;
  isolation: isolate;
  min-width: clamp(480px, 72cqh, 620px);
  max-width: min(760px, calc(100cqw - var(--edge-pad) * 2));
  gap: clamp(7px, 1.2cqh, 10px);
  padding: clamp(17px, 2.8cqh, 22px) clamp(28px, 4.8cqh, 38px);
  border: 0;
  background: transparent;
  filter: drop-shadow(0 0 22px rgba(127, 231, 255, 0.2));
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
}

.tutorial-prompt::before,
.tutorial-prompt::after,
.tutorial-skip-button::before,
.tutorial-skip-button::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.tutorial-prompt::before,
.tutorial-skip-button::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.tutorial-prompt::after,
.tutorial-skip-button::after {
  inset: var(--stroke);
  background: var(--chamfer-fill);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.tutorial-prompt::before {
  --chamfer-border: rgba(232, 248, 255, 0.88);
}

.tutorial-prompt::after {
  --chamfer-fill:
    linear-gradient(105deg, rgba(127, 231, 255, 0.15), transparent 48%, rgba(182, 148, 255, 0.1)),
    rgba(4, 12, 22, 0.94);
  box-shadow: inset 0 0 26px rgba(127, 231, 255, 0.08);
}

.tutorial-prompt strong,
.tutorial-prompt span {
  display: block;
}

.tutorial-prompt strong {
  color: #fff;
  font-size: clamp(25px, 4.2cqh, 34px);
  font-weight: 950;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.72),
    0 0 24px rgba(127, 231, 255, 0.42);
}

.tutorial-prompt span {
  color: var(--cyan);
  font-size: clamp(17px, 2.8cqh, 22px);
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.1;
  text-shadow: 0 0 14px rgba(127, 231, 255, 0.3);
}

.tutorial-skip-button {
  --cut: var(--cut-button);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --chamfer-border: rgba(127, 231, 255, 0.58);
  --chamfer-fill: rgba(5, 13, 24, 0.92);
  top: max(var(--edge-pad), env(safe-area-inset-top));
  right: max(var(--edge-pad), env(safe-area-inset-right));
  z-index: 30;
  isolation: isolate;
  min-width: clamp(132px, 20cqh, 170px);
  min-height: clamp(54px, 8cqh, 66px);
  padding: 0 clamp(22px, 3.5cqh, 30px);
  border: 0;
  background: transparent;
  color: rgba(232, 248, 255, 0.88);
  cursor: pointer;
  filter: drop-shadow(0 0 16px rgba(127, 231, 255, 0.14));
  font-size: clamp(17px, 2.7cqh, 21px);
  font-weight: 950;
  letter-spacing: 0.08em;
}

.tutorial-skip-button:hover,
.tutorial-skip-button:focus-visible {
  --chamfer-border: rgba(255, 255, 255, 0.9);
  --chamfer-fill: rgba(15, 33, 50, 0.96);
  color: #fff;
  outline: none;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 24px rgba(127, 231, 255, 0.18));
}

@keyframes tutorial-title-glow {
  0%,
  100% {
    opacity: 0.9;
    filter: brightness(0.94);
  }
  50% {
    opacity: 1;
    filter: brightness(1.18);
  }
}

.time-hud::before,
.time-hud::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.time-hud::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.time-hud::after {
  inset: var(--stroke);
  background: var(--chamfer-fill);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.26);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.time-label {
  display: block;
  margin-bottom: clamp(6px, 1.1cqh, 8px);
  color: var(--cyan);
  font-size: clamp(14px, 2cqh, 16px);
  font-weight: 950;
  text-shadow: 0 0 12px rgba(127, 231, 255, 0.22);
}

.time-segments {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: clamp(4px, 0.75cqh, 6px);
  height: clamp(13px, 2.3cqh, 18px);
}

.time-segments span {
  display: block;
  transform: skewX(-18deg);
  border: 2px solid rgba(127, 231, 255, 0.16);
  background: rgba(127, 231, 255, 0.05);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25);
}

.time-segments span.is-lit {
  border-color: rgba(127, 231, 255, 0.5);
  background: rgba(127, 231, 255, 0.78);
  box-shadow:
    0 0 10px rgba(127, 231, 255, 0.28),
    0 0 22px rgba(127, 231, 255, 0.16),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.app[data-screen="playing"].is-time-warning::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(255, 36, 66, 0.018) 34%,
    rgba(255, 36, 66, 0.12) 76%,
    rgba(255, 36, 66, 0.2) 100%
  );
  box-shadow: inset 0 0 220px rgba(255, 36, 66, 0.2);
  animation: time-warning-field-pulse 860ms ease-in-out infinite;
}

.app[data-screen="playing"].is-time-warning .time-hud {
  --accent: var(--danger);
  --tint: rgba(255, 72, 106, 0.2);
  --chamfer-border: rgba(255, 72, 106, 0.92);
  --chamfer-fill: rgba(28, 5, 12, 0.94);
  animation: time-warning-hud-pulse 860ms ease-in-out infinite;
}

.app[data-screen="playing"].is-time-warning .time-label {
  color: var(--danger);
  text-shadow:
    0 0 12px rgba(255, 72, 106, 0.72),
    0 0 28px rgba(255, 36, 66, 0.38);
}

.app[data-screen="playing"].is-time-warning .time-segments span {
  border-color: rgba(255, 72, 106, 0.28);
  background: rgba(255, 36, 66, 0.08);
}

.app[data-screen="playing"].is-time-warning .time-segments span.is-lit {
  border-color: rgba(255, 126, 144, 0.72);
  background: rgba(255, 72, 106, 0.92);
  box-shadow:
    0 0 12px rgba(255, 36, 66, 0.5),
    0 0 26px rgba(255, 36, 66, 0.28),
    inset 0 0 10px rgba(255, 255, 255, 0.12);
}

@keyframes time-warning-hud-pulse {
  0%,
  100% {
    filter: brightness(0.88) drop-shadow(0 0 8px rgba(255, 36, 66, 0.18));
  }
  50% {
    filter: brightness(1.35) drop-shadow(0 0 24px rgba(255, 36, 66, 0.52));
  }
}

@keyframes time-warning-field-pulse {
  0%,
  100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.82;
  }
}

.reset-gauge {
  position: absolute;
  top: 50%;
  right: max(var(--edge-pad), env(safe-area-inset-right));
  z-index: 3;
  display: grid;
  width: clamp(40px, 6.2cqh, 48px);
  justify-items: center;
  gap: clamp(5px, 1cqh, 7px);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.app[data-screen="playing"] .reset-gauge {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.reset-gauge-label {
  display: block;
  color: var(--cyan);
  font-size: clamp(18px, 2.8cqh, 22px);
  font-weight: 950;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 10px rgba(127, 231, 255, 0.42),
    0 0 22px rgba(127, 231, 255, 0.2);
  white-space: nowrap;
}

.reset-gauge-value {
  display: block;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.reset-gauge-value {
  color: var(--cyan);
  font-size: clamp(17px, 2.7cqh, 21px);
}

.reset-gauge-track {
  position: relative;
  width: clamp(18px, 3.2cqh, 24px);
  height: min(420px, 56cqh);
  min-height: min(260px, 44cqh);
  overflow: hidden;
  background: rgba(4, 12, 22, 0.88);
}

.reset-gauge-track::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  border: 2px solid rgba(127, 231, 255, 0.72);
  pointer-events: none;
}

.reset-gauge-fill {
  --reset-offset: 100%;
  --reset-wave-left: 0px;
  --reset-wave-mid: 0px;
  --reset-wave-right: 0px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  background: var(--cyan);
  transform: translateY(var(--reset-offset));
  clip-path: polygon(
    0 var(--reset-wave-left),
    50% var(--reset-wave-mid),
    100% var(--reset-wave-right),
    100% 100%,
    0 100%
  );
  will-change: transform, clip-path;
}

.reset-gauge.is-charged .reset-gauge-fill {
  clip-path: inset(0);
}

.credits-purchase-hint {
  position: absolute;
  top: calc(max(var(--edge-pad), env(safe-area-inset-top)) + var(--top-button-size) + clamp(16px, 2.8cqh, 22px));
  left: calc(
    max(var(--edge-pad), env(safe-area-inset-left)) +
      var(--top-button-size) +
      var(--top-button-gap) +
      var(--top-button-size) +
      var(--top-button-gap) +
      var(--top-button-size) +
      var(--top-button-gap)
  );
  z-index: 9;
  display: grid;
  width: clamp(360px, 60cqh, 460px);
  gap: clamp(6px, 1cqh, 8px);
  margin: 0;
  padding: clamp(16px, 2.8cqh, 22px) clamp(20px, 3.6cqh, 28px);
  border: 2px solid rgba(255, 214, 90, 0.8);
  background: rgba(8, 13, 22, 0.97);
  box-shadow:
    0 0 24px rgba(255, 214, 90, 0.22),
    inset 0 0 24px rgba(255, 214, 90, 0.07);
  color: var(--ink);
  text-align: left;
  pointer-events: none;
  animation: credits-purchase-hint-display 8s ease both;
}

.credits-purchase-hint[hidden] {
  display: none;
}

.credits-purchase-hint::after {
  position: absolute;
  top: -10px;
  left: clamp(20px, 3.6cqh, 28px);
  width: 18px;
  height: 18px;
  border-top: 2px solid rgba(255, 214, 90, 0.8);
  border-left: 2px solid rgba(255, 214, 90, 0.8);
  background: rgba(8, 13, 22, 0.97);
  content: "";
  transform: rotate(45deg);
}

.credits-purchase-hint strong,
.credits-purchase-hint span {
  display: block;
}

.credits-purchase-hint strong {
  color: var(--gold);
  font-size: clamp(21px, 3.5cqh, 27px);
  font-weight: 950;
  letter-spacing: 0.035em;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255, 214, 90, 0.34);
}

.credits-purchase-hint span {
  color: var(--ink);
  font-size: clamp(17px, 2.8cqh, 22px);
  font-weight: 850;
  line-height: 1.2;
}

@keyframes credits-purchase-hint-display {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  7%,
  86% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  min-height: 100%;
  padding: max(var(--screen-pad), env(safe-area-inset-top)) max(var(--screen-pad), env(safe-area-inset-right))
    max(var(--screen-pad), env(safe-area-inset-bottom)) max(var(--screen-pad), env(safe-area-inset-left));
  background:
    linear-gradient(rgba(127, 231, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 231, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at center 24%, rgba(74, 172, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #071421 0%, #081322 44%, #03070d 100%);
  background-size: 92px 92px, 92px 92px, auto, auto;
}

.app[data-screen="result"] #result-screen,
.app[data-screen="upgrade"] #upgrade-screen {
  display: flex;
}

.result-screen,
.upgrade-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.app[data-screen="result"] #result-screen {
  display: grid;
}

.screen-header,
.result-wallet,
.upgrade-top,
.result-grid,
.upgrade-list,
.screen-actions {
  width: min(1120px, 100%);
}

.result-grid,
.result-wallet,
.result-screen .screen-actions {
  width: 100%;
}

.upgrade-top {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.upgrade-top {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: start;
  align-items: center;
  gap: clamp(24px, 4.2cqh, 36px);
  width: min(1120px, 100%);
  max-width: 1160px;
}

.upgrade-top .screen-heading {
  justify-self: start;
}

.screen-heading {
  margin: 0;
  color: var(--ink);
  font-weight: 950;
  line-height: 0.86;
  letter-spacing: 0;
  text-shadow:
    0 0 12px rgba(127, 231, 255, 0.62),
    0 0 32px rgba(127, 231, 255, 0.28);
}

.screen-heading {
  font-size: var(--screen-heading-size);
}

.screen-label,
.stat-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.screen-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.primary-button,
.secondary-button {
  --cut: var(--cut-button);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --chamfer-border: var(--mint);
  --chamfer-fill: rgba(7, 31, 26, 0.84);
  position: relative;
  isolation: isolate;
  min-width: clamp(176px, 28cqh, 210px);
  min-height: clamp(46px, 7.2cqh, 54px);
  padding: 0 clamp(22px, 4cqh, 30px);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 950;
  cursor: pointer;
  filter: drop-shadow(0 0 14px rgba(127, 231, 255, 0.14));
}

.primary-button {
  color: #07121f;
  text-shadow: none;
}

.secondary-button {
  --chamfer-border: rgba(255, 107, 138, 0.82);
  --chamfer-fill: rgba(31, 10, 18, 0.72);
  color: #ffdbe4;
  filter: drop-shadow(0 0 16px rgba(255, 107, 138, 0.12));
}

.primary-button::before,
.primary-button::after,
.secondary-button::before,
.secondary-button::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.primary-button::before,
.secondary-button::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.primary-button::after,
.secondary-button::after {
  inset: var(--stroke);
  background: var(--chamfer-fill);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.06);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.primary-button:hover,
.primary-button:focus-visible {
  --chamfer-border: #8dffd9;
  --chamfer-fill: rgba(14, 210, 153, 0.92);
  filter: drop-shadow(0 0 20px rgba(93, 240, 195, 0.22));
  outline: none;
}

.secondary-button:hover,
.secondary-button:focus-visible {
  --chamfer-fill: rgba(44, 14, 25, 0.84);
  outline: none;
}

#result-upgrade-button,
#result-energy-ad-button,
#result-reset-button,
#upgrade-back-button,
#upgrade-start-button {
  min-width: clamp(280px, 38cqh, 360px);
  min-height: clamp(72px, 10.2cqh, 88px);
  padding: 0 clamp(38px, 5.6cqh, 50px);
  color: var(--ink);
  font-size: clamp(22px, 3.1cqh, 28px);
  line-height: 1;
  text-shadow: none;
}

#result-upgrade-button {
  --chamfer-border: #7fe7ff;
  --chamfer-fill: #24d6ff;
}

#upgrade-start-button {
  --chamfer-border: #5df0c3;
  --chamfer-fill: #18bd8a;
}

#upgrade-back-button {
  --chamfer-border: rgba(127, 231, 255, 0.72);
  --chamfer-fill: rgba(7, 22, 37, 0.88);
  color: var(--ink);
}

#result-reset-button {
  --chamfer-border: #ff91a8;
  --chamfer-fill: #ff6b8a;
}

#result-upgrade-button:hover,
#result-upgrade-button:focus-visible {
  --chamfer-border: #b9f4ff;
  --chamfer-fill: #58e4ff;
}

#upgrade-start-button:hover,
#upgrade-start-button:focus-visible {
  --chamfer-border: #8dffd9;
  --chamfer-fill: #23d79d;
}

#result-reset-button:hover,
#result-reset-button:focus-visible {
  --chamfer-border: #ffb2c1;
  --chamfer-fill: #ff829b;
}

.result-screen {
  --result-column-gap: clamp(28px, 6cqh, 72px);
  --result-row-gap: clamp(12px, 3cqh, 28px);
  --result-ring-size: clamp(132px, 23cqh, 210px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "status stats"
    "stored stats"
    "actions actions";
  align-items: stretch;
  align-content: center;
  justify-content: center;
  gap: var(--result-row-gap) var(--result-column-gap);
  padding: max(clamp(28px, 6cqh, 64px), env(safe-area-inset-top)) max(var(--screen-pad), env(safe-area-inset-right))
    max(clamp(24px, 5cqh, 52px), env(safe-area-inset-bottom)) max(var(--screen-pad), env(safe-area-inset-left));
  background:
    linear-gradient(105deg, rgba(127, 231, 255, 0.08), transparent 20% 78%, rgba(255, 79, 179, 0.06)),
    repeating-linear-gradient(
      118deg,
      transparent 0 38px,
      rgba(127, 231, 255, 0.045) 39px 40px
    ),
    linear-gradient(rgba(127, 231, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 231, 255, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, #071421 0%, #071322 48%, #03070d 100%);
  background-size: auto, auto, 92px 92px, 92px 92px, auto;
  text-align: left;
}

.result-status {
  grid-area: status;
  position: relative;
  align-self: center;
  display: grid;
  grid-template-areas:
    "kicker"
    "heading"
    "detail";
  justify-items: start;
  gap: clamp(18px, 3cqh, 26px);
  min-width: 0;
  padding-right: calc(var(--result-ring-size) + clamp(18px, 2.8cqw, 36px));
  padding-bottom: clamp(18px, 3cqh, 32px);
  text-align: left;
}

.result-status::after {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(127, 231, 255, 0.16);
  content: "";
  pointer-events: none;
}

.result-status .screen-heading {
  grid-area: heading;
  justify-self: start;
  max-width: 940px;
  color: var(--danger);
  font-size: var(--result-heading-size);
  line-height: 0.86;
  text-shadow:
    0 0 14px rgba(255, 107, 138, 0.54),
    0 0 40px rgba(255, 107, 138, 0.24);
}

.result-screen.is-clear .result-status .screen-heading {
  color: var(--mint);
  text-shadow:
    0 0 14px rgba(93, 240, 195, 0.5),
    0 0 40px rgba(93, 240, 195, 0.22);
}

.result-kicker {
  grid-area: kicker;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  gap: 10px;
  color: var(--danger);
  font-size: clamp(16px, 2.4cqh, 19px);
  font-weight: 950;
  line-height: 1.1;
  text-shadow:
    0 0 10px rgba(255, 107, 138, 0.36),
    0 0 22px rgba(255, 107, 138, 0.16);
}

.result-kicker::before {
  display: block;
  width: 26px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(0 0, 68% 0, 100% 50%, 68% 100%, 0 100%, 22% 50%);
  content: "";
  filter: drop-shadow(0 0 8px currentColor);
}

.result-kicker.is-clear {
  color: var(--mint);
  text-shadow:
    0 0 10px rgba(93, 240, 195, 0.34),
    0 0 22px rgba(93, 240, 195, 0.16);
}

.result-detail {
  grid-area: detail;
  margin: 0;
  color: var(--danger);
  font-size: clamp(16px, 2.7cqh, 21px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 107, 138, 0.22);
}

.result-screen.is-clear .result-detail {
  color: var(--mint);
  text-shadow: 0 0 12px rgba(93, 240, 195, 0.22);
}

.result-progress-ring {
  --ring-color: var(--danger);
  grid-area: status;
  align-self: center;
  justify-self: end;
  position: relative;
  display: grid;
  margin-right: clamp(14px, 2cqw, 28px);
  margin-bottom: clamp(8px, 1.6cqh, 16px);
  width: var(--result-ring-size);
  aspect-ratio: 1;
  align-content: center;
  justify-items: center;
  gap: 6px;
  border-radius: 50%;
  background: transparent;
  color: var(--danger);
  font-size: clamp(27px, 5.4cqh, 38px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 107, 138, 0.22);
}

.result-progress-ring.is-clear {
  --ring-color: var(--mint);
  color: var(--mint);
  text-shadow: 0 0 12px rgba(93, 240, 195, 0.24);
}

.result-progress-ring::before,
.result-progress-ring::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.result-progress-ring::before {
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(var(--ring-color) var(--result-progress), rgba(232, 248, 255, 0.1) 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 0);
}

.result-progress-ring::after {
  display: none;
}

.result-progress-ring span,
.result-progress-ring small {
  position: relative;
  z-index: 1;
}

.result-progress-ring small {
  color: rgba(232, 248, 255, 0.76);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 12px rgba(232, 248, 255, 0.16);
}

.result-grid {
  grid-area: stats;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(clamp(92px, 15.4cqh, 126px), clamp(106px, 18cqh, 150px)));
  gap: clamp(9px, 1.9cqh, 14px);
}

.stat-card,
.result-resource,
.resource-bank,
.credits-hud,
.upgrade-item {
  --cut: var(--cut-panel);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --accent: var(--cyan);
  --tint: rgba(127, 231, 255, 0.08);
  --chamfer-border: rgba(127, 231, 255, 0.58);
  --chamfer-fill: var(--bg-panel);
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.stat-card::before,
.stat-card::after,
.result-resource::before,
.result-resource::after,
.resource-bank::before,
.resource-bank::after,
.credits-hud::before,
.credits-hud::after,
.upgrade-item::before,
.upgrade-item::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.stat-card::before,
.result-resource::before,
.resource-bank::before,
.credits-hud::before,
.upgrade-item::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.stat-card::after,
.result-resource::after,
.resource-bank::after,
.credits-hud::after,
.upgrade-item::after {
  inset: var(--stroke);
  background:
    linear-gradient(180deg, var(--tint), transparent 56%),
    var(--chamfer-fill);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.2);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.stat-card {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(128px, 0.46fr) minmax(0, 1fr);
  grid-template-areas: "icon label value";
  align-content: center;
  align-items: center;
  gap: clamp(12px, 2.6cqh, 18px);
  padding: clamp(16px, 3cqh, 24px) clamp(20px, 4cqh, 32px);
  text-align: left;
  overflow: hidden;
}

.result-grid .stat-card::after {
  background:
    linear-gradient(135deg, var(--tint), transparent 34%),
    repeating-linear-gradient(
      118deg,
      transparent 0 28px,
      rgba(232, 248, 255, 0.045) 29px 30px
    ),
    radial-gradient(ellipse at 86% 42%, var(--tint), transparent 48%),
    var(--chamfer-fill);
}

.stat-card:nth-child(1) {
  --accent: var(--cyan);
  --tint: rgba(36, 214, 255, 0.1);
  --chamfer-border: rgba(36, 214, 255, 0.72);
}

.stat-card:nth-child(2) {
  --accent: var(--pink);
  --tint: rgba(255, 79, 179, 0.12);
  --chamfer-border: rgba(255, 79, 179, 0.72);
}

.stat-card:nth-child(3) {
  --accent: var(--mint);
  --tint: rgba(93, 240, 195, 0.1);
  --chamfer-border: rgba(93, 240, 195, 0.72);
}

.stat-dot,
.upgrade-dot {
  display: block;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px var(--tint);
}

.stat-dot-energy {
  --icon-url: url("assets/ui/energy.svg");
}

.stat-dot-shards {
  --icon-url: url("assets/ui/shards.svg");
}

.result-stored-energy .stat-dot-energy,
.energy-bank .stat-dot-energy {
  --icon-url: url("assets/ui/stored-energy.svg");
}

.stat-dot-best {
  --icon-url: url("assets/ui/best.svg");
}

.stat-dot-credits {
  --icon-url: url("assets/ui/credits.svg");
}

.stat-dot-rank {
  --icon-url: url("assets/ui/leaderboard.svg");
}

.stat-dot-top {
  --icon-url: url("assets/ui/percent.svg");
}

.stat-dot {
  grid-area: icon;
  width: clamp(32px, 5.4cqh, 40px);
  height: clamp(32px, 5.4cqh, 40px);
  align-self: center;
  justify-self: center;
}

.result-grid .stat-dot-energy,
.result-grid .stat-dot-best {
  transform: translateY(3px);
}

.stat-label {
  grid-area: label;
}

.stat-card .stat-label {
  align-self: center;
  color: var(--accent);
  font-size: clamp(15px, 2.6cqh, 20px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 12px var(--tint);
}

.stat-card strong {
  grid-area: value;
  display: block;
  justify-self: end;
  color: var(--accent);
  font-size: var(--result-stat-size);
  font-weight: 950;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.result-wallet {
  grid-area: stored;
  align-self: end;
  justify-self: start;
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr);
  gap: clamp(8px, 1.8cqh, 14px);
  width: 100%;
  max-width: 860px;
  margin-top: clamp(12px, 2.5cqh, 28px);
}

.app[data-tutorial="true"] .result-wallet {
  grid-template-columns: minmax(280px, 0.8fr) minmax(380px, 1.2fr);
  max-width: 860px;
}

.app[data-tutorial="true"] .result-run-rank,
.app[data-tutorial="true"] .result-run-top {
  display: none;
}

.result-resource {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  align-items: center;
  gap: 4px clamp(10px, 2cqh, 14px);
  min-height: clamp(62px, 9.4cqh, 76px);
  padding: clamp(11px, 2cqh, 14px) clamp(14px, 2.6cqh, 18px);
  text-align: left;
  overflow: hidden;
}

.tutorial-callout {
  --callout-accent: var(--cyan);
  --callout-fill: rgba(8, 13, 22, 0.97);
  position: relative;
  z-index: 4;
  display: grid;
  gap: clamp(6px, 1cqh, 8px);
  margin: 0;
  padding: clamp(15px, 2.5cqh, 20px) clamp(18px, 3.2cqh, 26px);
  border: 2px solid var(--callout-accent);
  background: var(--callout-fill);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--callout-accent), transparent 76%),
    inset 0 0 24px color-mix(in srgb, var(--callout-accent), transparent 92%);
  color: var(--ink);
  pointer-events: none;
  text-align: left;
}

.tutorial-callout strong,
.tutorial-callout span {
  display: block;
}

.tutorial-callout strong {
  color: var(--callout-accent);
  font-size: clamp(20px, 3.2cqh, 26px);
  font-weight: 950;
  letter-spacing: 0.035em;
  line-height: 1;
  text-shadow: 0 0 14px color-mix(in srgb, var(--callout-accent), transparent 66%);
}

.tutorial-callout span {
  color: var(--ink);
  font-size: clamp(16px, 2.6cqh, 21px);
  font-weight: 850;
  line-height: 1.2;
}

.tutorial-energy-hint {
  --callout-accent: rgba(255, 214, 90, 0.82);
  align-self: center;
}

.tutorial-energy-hint::after {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 18px;
  height: 18px;
  border-bottom: 2px solid var(--callout-accent);
  border-left: 2px solid var(--callout-accent);
  background: var(--callout-fill);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.app[data-tutorial="true"][data-screen="result"] #result-reset-button {
  filter:
    drop-shadow(0 0 10px rgba(255, 107, 138, 0.56))
    drop-shadow(0 0 28px rgba(255, 107, 138, 0.25));
  animation: tutorial-reset-callout 1.25s ease-in-out infinite;
}

@keyframes tutorial-reset-callout {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.result-stored-energy,
.energy-bank {
  --accent: var(--gold);
  --tint: rgba(255, 214, 90, 0.12);
  --chamfer-border: rgba(255, 214, 90, 0.76);
}

.result-run-rank {
  --accent: var(--cyan);
  --tint: rgba(127, 231, 255, 0.11);
  --chamfer-border: rgba(127, 231, 255, 0.66);
}

.result-run-top {
  --accent: var(--violet);
  --tint: rgba(182, 148, 255, 0.12);
  --chamfer-border: rgba(182, 148, 255, 0.66);
}

.credits-hud {
  --accent: var(--violet);
  --tint: rgba(182, 148, 255, 0.13);
  --chamfer-border: rgba(182, 148, 255, 0.76);
}

.credits-hud {
  position: absolute;
  top: max(var(--edge-pad), env(safe-area-inset-top));
  right: max(var(--edge-pad), env(safe-area-inset-right));
  z-index: 8;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon label"
    "icon value";
  min-width: min(clamp(210px, 34cqh, 260px), calc(100cqw - var(--edge-pad) * 2));
  min-height: clamp(58px, 8.8cqh, 72px);
  align-items: center;
  gap: 4px clamp(10px, 2cqh, 14px);
  padding: clamp(10px, 1.8cqh, 13px) clamp(14px, 2.6cqh, 18px);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.app[data-screen="result"] .credits-hud,
.app[data-screen="upgrade"] .credits-hud,
.app[data-screen="home"][data-platform-ready="true"] .credits-hud {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.credits-hud .stat-dot {
  grid-area: icon;
}

.credits-hud .stat-label {
  grid-area: label;
  color: var(--accent);
}

.credits-hud strong {
  grid-area: value;
  display: block;
  color: var(--accent);
  font-size: clamp(25px, 4.5cqh, 34px);
  font-weight: 950;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px var(--tint);
}

.menu-banner {
  position: absolute;
  top: max(var(--edge-pad), env(safe-area-inset-top));
  left: 50%;
  z-index: 30;
  display: block;
  width: 970px;
  height: 90px;
  overflow: hidden;
  background: transparent;
  transform: translateX(-50%);
}

.menu-banner[hidden] {
  display: none;
}

#upgrade-back-button:hover,
#upgrade-back-button:focus-visible {
  --chamfer-border: #b9f4ff;
  --chamfer-fill: rgba(14, 48, 70, 0.94);
}

.arena-lobby-banner {
  position: absolute;
  top: 258px;
  right: max(28px, env(safe-area-inset-right));
  bottom: calc(max(34px, env(safe-area-inset-bottom)) + 254px);
  left: calc(50% + 250px + 28px);
  z-index: 2;
  display: none;
  width: auto;
  height: auto;
  overflow: hidden;
  background: transparent;
}

.arena-lobby-banner[hidden] {
  display: none;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .app[data-screen="battle-arena-menu"] .arena-lobby-banner:not([hidden]) {
    display: block;
  }
}

.arena-how-to-dialog[hidden] {
  display: none;
}

.arena-how-to-dialog {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  padding: 150px 420px 48px;
  background: rgba(1, 6, 12, 0.86);
  backdrop-filter: blur(10px);
}

.arena-how-to-panel {
  --guide-accent: var(--cyan);
  --guide-border: rgba(127, 231, 255, 0.78);
  --cut: 24px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  position: relative;
  z-index: 24;
  isolation: isolate;
  display: grid;
  width: min(1180px, 100%);
  max-height: 100%;
  grid-template-rows: auto 520px auto auto;
  gap: 22px;
  padding: 36px 42px 32px;
  overflow: auto;
  color: var(--ink);
  filter: drop-shadow(0 28px 52px rgba(0, 0, 0, 0.5));
}

.arena-how-to-panel::before,
.arena-how-to-panel::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.arena-how-to-panel::before {
  inset: 0;
  background: var(--guide-border);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

.arena-how-to-panel::after {
  inset: var(--stroke);
  background:
    linear-gradient(145deg, rgba(127, 231, 255, 0.12), transparent 48%),
    rgba(4, 13, 24, 0.985);
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.36);
  clip-path: polygon(var(--inner-cut) 0, calc(100% - var(--inner-cut)) 0, 100% var(--inner-cut), 100% calc(100% - var(--inner-cut)), calc(100% - var(--inner-cut)) 100%, var(--inner-cut) 100%, 0 calc(100% - var(--inner-cut)), 0 var(--inner-cut));
}

.arena-how-to-header {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 68px;
  text-align: center;
}

.arena-how-to-header > div {
  display: grid;
  justify-items: center;
  gap: 7px;
}

.arena-how-to-header span {
  color: var(--cyan);
  font-size: max(var(--ui-font-small), 18px);
  font-weight: 1000;
  letter-spacing: 0.2em;
  line-height: 1;
}

.arena-how-to-header h2 {
  margin: 0;
  color: #fff;
  font-size: 50px;
  font-weight: 1000;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-shadow: 0 0 26px rgba(127, 231, 255, 0.34);
}

.arena-how-to-skip-button {
  --chamfer-border: rgba(127, 231, 255, 0.48);
  --chamfer-fill: rgba(7, 18, 31, 0.92);
  position: absolute;
  top: 50%;
  left: 0;
  min-width: 140px;
  min-height: 52px;
  padding-inline: 22px;
  color: rgba(232, 248, 255, 0.86);
  font-size: 18px;
  transform: translateY(-50%);
}

.arena-how-to-header > strong {
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--cyan);
  font-size: 23px;
  font-weight: 1000;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}

.arena-how-to-visual {
  --cut: 16px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  position: relative;
  isolation: isolate;
  min-height: 0;
  border: 0;
  background: transparent;
}

.arena-how-to-visual::before,
.arena-how-to-visual::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.arena-how-to-visual::before {
  inset: 0;
  z-index: 0;
  background: rgba(127, 231, 255, 0.62);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

.arena-how-to-visual::after {
  inset: var(--stroke);
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(127, 231, 255, 0.05), transparent 22% 78%, rgba(127, 231, 255, 0.04)),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(127, 231, 255, 0.015) 6px 7px);
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.48);
  clip-path: polygon(var(--inner-cut) 0, calc(100% - var(--inner-cut)) 0, 100% var(--inner-cut), 100% calc(100% - var(--inner-cut)), calc(100% - var(--inner-cut)) 100%, var(--inner-cut) 100%, 0 calc(100% - var(--inner-cut)), 0 var(--inner-cut));
}

.arena-how-to-visual canvas {
  position: absolute;
  inset: var(--stroke);
  z-index: 1;
  display: block;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  clip-path: polygon(var(--inner-cut) 0, calc(100% - var(--inner-cut)) 0, 100% var(--inner-cut), 100% calc(100% - var(--inner-cut)), calc(100% - var(--inner-cut)) 100%, var(--inner-cut) 100%, 0 calc(100% - var(--inner-cut)), 0 var(--inner-cut));
}

.arena-how-to-stats {
  position: absolute;
  inset: var(--stroke);
  z-index: 1;
  display: none;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 22px;
  padding: 58px;
  background:
    radial-gradient(circle at 50% 42%, rgba(127, 231, 255, 0.13), transparent 42%),
    linear-gradient(180deg, #06101d, #03070d);
  clip-path: polygon(var(--inner-cut) 0, calc(100% - var(--inner-cut)) 0, 100% var(--inner-cut), 100% calc(100% - var(--inner-cut)), calc(100% - var(--inner-cut)) 100%, var(--inner-cut) 100%, 0 calc(100% - var(--inner-cut)), 0 var(--inner-cut));
}

.arena-how-to-stats::before {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  color: #fff;
  content: "30 STATUS POINTS";
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 0 24px rgba(127, 231, 255, 0.42);
}

.arena-how-to-stats article {
  --stat-accent: var(--cyan);
  display: grid;
  min-height: 250px;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 28px 22px;
  border: 2px solid color-mix(in srgb, var(--stat-accent) 58%, transparent);
  background: color-mix(in srgb, var(--stat-accent) 8%, rgba(4, 13, 24, 0.94));
  text-align: center;
}

.arena-how-to-stats article:nth-of-type(2) {
  --stat-accent: var(--gold);
}

.arena-how-to-stats article:last-child {
  --stat-accent: var(--danger);
}

.arena-how-to-stat-icon {
  width: 84px;
  height: 84px;
  background: var(--stat-accent);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--stat-accent) 58%, transparent));
  -webkit-mask: var(--stat-icon) center / contain no-repeat;
  mask: var(--stat-icon) center / contain no-repeat;
}

.arena-how-to-stat-speed {
  --stat-icon: url("assets/ui/speed.svg");
}

.arena-how-to-stat-magnet {
  --stat-icon: url("assets/ui/magnet.svg");
}

.arena-how-to-stat-force {
  --stat-icon: url("assets/ui/power.svg");
}

.arena-how-to-stats strong {
  color: var(--stat-accent);
  font-size: 29px;
  font-weight: 1000;
}

.arena-how-to-stats small {
  color: rgba(232, 248, 255, 0.76);
  font-size: max(var(--ui-font-body), 20px);
  font-weight: 900;
  line-height: 1.25;
}

.arena-how-to-dialog[data-step="4"] .arena-how-to-visual canvas {
  display: none;
}

.arena-how-to-dialog[data-step="4"] .arena-how-to-panel {
  grid-template-rows: auto 480px auto auto;
}

.arena-how-to-dialog[data-step="4"] .arena-how-to-stats {
  display: grid;
}

.arena-how-to-skill {
  position: absolute;
  inset: var(--stroke);
  z-index: 1;
  display: none;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  justify-items: center;
  align-content: center;
  gap: 22px;
  background: radial-gradient(circle, rgba(127, 231, 255, 0.16), transparent 44%), #03070d;
  clip-path: polygon(var(--inner-cut) 0, calc(100% - var(--inner-cut)) 0, 100% var(--inner-cut), 100% calc(100% - var(--inner-cut)), calc(100% - var(--inner-cut)) 100%, var(--inner-cut) 100%, 0 calc(100% - var(--inner-cut)), 0 var(--inner-cut));
}

.arena-how-to-skill-icon {
  width: 128px;
  height: 92px;
  background: var(--cyan);
  filter: drop-shadow(0 0 20px rgba(127, 231, 255, 0.5));
  -webkit-mask: url("assets/ui/boost.svg") center / contain no-repeat;
  mask: url("assets/ui/boost.svg") center / contain no-repeat;
}

.arena-how-to-skill strong { color: #fff; font-size: 38px; font-weight: 1000; }
.arena-how-to-skill > span:last-child { color: var(--gold); font-size: 26px; font-weight: 950; }
.arena-how-to-dialog[data-step="5"] .arena-how-to-visual canvas { display: none; }
.arena-how-to-dialog[data-step="5"] .arena-how-to-skill { display: grid; }

.arena-how-to-copy {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 154px;
  padding: 20px 30px;
  border-top: 3px solid rgba(127, 231, 255, 0.58);
  background: linear-gradient(180deg, rgba(127, 231, 255, 0.1), rgba(127, 231, 255, 0.025));
  text-align: center;
}

.arena-how-to-copy h3 {
  margin: 0;
  color: #fff;
  font-size: 38px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 0 22px rgba(127, 231, 255, 0.28);
}

.arena-how-to-copy p {
  max-width: 980px;
  margin: 0;
  color: rgba(232, 248, 255, 0.86);
  font-size: max(var(--ui-font-body), 21px);
  font-weight: 850;
  line-height: 1.34;
}

.arena-how-to-copy ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  color: var(--cyan);
  font-size: max(var(--ui-font-small), 18px);
  font-weight: 900;
  line-height: 1.25;
  list-style: none;
}

.arena-how-to-copy li::before {
  margin-right: 9px;
  color: var(--gold);
  content: "›";
}

.arena-how-to-dialog[data-step="4"] .arena-how-to-copy ul {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.arena-how-to-footer {
  --guide-accent: var(--cyan);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  align-items: center;
  gap: 22px;
}

.arena-how-to-footer .primary-button,
.arena-how-to-footer .secondary-button {
  min-height: 64px;
  color: #fff;
  font-size: var(--ui-font-action);
}

.arena-how-to-footer .primary-button {
  --chamfer-border: var(--guide-accent);
  --chamfer-fill: color-mix(in srgb, var(--guide-accent) 34%, #07121f);
}

.arena-how-to-footer .secondary-button {
  --chamfer-border: rgba(127, 231, 255, 0.42);
  --chamfer-fill: rgba(7, 18, 31, 0.92);
}

.guide-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.guide-dot {
  width: 34px;
  height: 5px;
  background: rgba(232, 248, 255, 0.24);
  transition: width 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.guide-dot.is-active {
  width: 62px;
  background: var(--guide-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--guide-accent) 62%, transparent);
}

.settings-button,
.mission-button,
.leaderboard-button,
.daily-bonus-button,
.platform-home-button,
.skin-button {
  --cut: 15px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  --button-accent: var(--cyan);
  position: absolute;
  top: max(var(--edge-pad), env(safe-area-inset-top));
  left: max(var(--edge-pad), env(safe-area-inset-left));
  z-index: 8;
  display: grid;
  width: var(--top-button-size);
  height: var(--top-button-size);
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--button-accent), transparent 72%));
}

.settings-button {
  --button-accent: var(--blue);
  left: calc(max(var(--edge-pad), env(safe-area-inset-left)) + var(--top-button-size) + var(--top-button-gap));
}

.mission-button {
  --button-accent: var(--mint);
  left: calc(
    max(var(--edge-pad), env(safe-area-inset-left)) +
      var(--top-button-size) +
      var(--top-button-gap) +
      var(--top-button-size) +
      var(--top-button-gap)
  );
}

.leaderboard-button {
  --button-accent: var(--violet);
  left: calc(
    max(var(--edge-pad), env(safe-area-inset-left)) +
      var(--top-button-size) +
      var(--top-button-gap) +
      var(--top-button-size) +
      var(--top-button-gap) +
      var(--top-button-size) +
      var(--top-button-gap) +
      var(--top-button-size) +
      var(--top-button-gap)
  );
}

.mission-button.is-ready,
.daily-bonus-button {
  --button-accent: var(--gold);
}

.daily-bonus-button {
  left: calc(max(var(--edge-pad), env(safe-area-inset-left)) + var(--top-button-size) + var(--top-button-gap));
}

.app[data-screen="home"] .leaderboard-button {
  left: calc(max(var(--edge-pad), env(safe-area-inset-left)) + 2 * (var(--top-button-size) + var(--top-button-gap)));
}

.skin-button {
  --skin-accent: var(--cyan);
  --button-accent: var(--skin-accent);
  left: calc(
    max(var(--edge-pad), env(safe-area-inset-left)) +
      var(--top-button-size) +
      var(--top-button-gap) +
      var(--top-button-size) +
      var(--top-button-gap) +
      var(--top-button-size) +
      var(--top-button-gap)
  );
}

.daily-bonus-button.is-claimed {
  --button-accent: rgba(255, 214, 90, 0.52);
}

.app[data-screen="result"] .settings-button,
.app[data-screen="upgrade"] .settings-button,
.app[data-screen="result"] .mission-button,
.app[data-screen="upgrade"] .mission-button,
.app[data-screen="result"] .leaderboard-button,
.app[data-screen="upgrade"] .leaderboard-button,
.app[data-screen="result"] .skin-button,
.app[data-screen="upgrade"] .skin-button,
.app[data-screen="home"][data-platform-ready="true"] .settings-button,
.app[data-screen="home"][data-platform-ready="true"] .leaderboard-button,
.app[data-screen="home"][data-platform-ready="true"] .daily-bonus-button,
.app[data-screen="result"] .platform-home-button,
.app[data-screen="upgrade"] .platform-home-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.app[data-tutorial="true"] .settings-button,
.app[data-tutorial="true"] .mission-button,
.app[data-tutorial="true"] .leaderboard-button,
.app[data-tutorial="true"] .daily-bonus-button,
.app[data-tutorial="true"] .platform-home-button,
.app[data-tutorial="true"] .skin-button,
.app[data-tutorial="true"] .credits-hud {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

.settings-button::before,
.settings-button::after,
.mission-button::before,
.mission-button::after,
.leaderboard-button::before,
.leaderboard-button::after,
.daily-bonus-button::before,
.daily-bonus-button::after,
.platform-home-button::before,
.platform-home-button::after,
.skin-button::before,
.skin-button::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.settings-button::before,
.mission-button::before,
.leaderboard-button::before,
.daily-bonus-button::before,
.platform-home-button::before,
.skin-button::before {
  inset: 0;
  background: var(--button-accent);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.settings-button::after,
.mission-button::after,
.leaderboard-button::after,
.daily-bonus-button::after,
.platform-home-button::after,
.skin-button::after {
  inset: var(--stroke);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--button-accent), transparent 84%), transparent),
    rgba(5, 13, 24, 0.94);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.settings-button:hover,
.settings-button:focus-visible,
.mission-button:hover,
.mission-button:focus-visible,
.leaderboard-button:hover,
.leaderboard-button:focus-visible,
.daily-bonus-button:hover,
.daily-bonus-button:focus-visible,
.platform-home-button:hover,
.platform-home-button:focus-visible,
.skin-button:hover,
.skin-button:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--button-accent), transparent 58%));
}

.settings-button-icon,
.mission-button-icon,
.leaderboard-button-icon,
.daily-bonus-button-icon,
.platform-home-button-icon {
  width: clamp(32px, 5.4cqh, 42px);
  height: clamp(32px, 5.4cqh, 42px);
  background: var(--button-accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--button-accent), transparent 64%));
  -webkit-mask: url("assets/ui/daily-bonus.svg") center / contain no-repeat;
  mask: url("assets/ui/daily-bonus.svg") center / contain no-repeat;
}

.settings-button-icon {
  -webkit-mask: url("assets/ui/setting.svg") center / contain no-repeat;
  mask: url("assets/ui/setting.svg") center / contain no-repeat;
}

.mission-button-icon {
  -webkit-mask: url("assets/ui/mission.svg") center / contain no-repeat;
  mask: url("assets/ui/mission.svg") center / contain no-repeat;
}

.platform-home-button-icon {
  -webkit-mask: url("assets/ui/home.svg") center / contain no-repeat;
  mask: url("assets/ui/home.svg") center / contain no-repeat;
}

.mission-ready-badge {
  position: absolute;
  top: calc(clamp(5px, 1.1cqh, 8px) * -1);
  right: calc(clamp(5px, 1.1cqh, 8px) * -1);
  z-index: 3;
  display: block;
  width: clamp(21px, 3.4cqh, 28px);
  height: clamp(21px, 3.4cqh, 28px);
  background: #ffd65a;
  filter:
    drop-shadow(0 0 8px rgba(255, 214, 90, 0.62))
    drop-shadow(0 0 14px rgba(255, 79, 179, 0.32));
  pointer-events: none;
  -webkit-mask: url("assets/ui/exclamation.svg") center / contain no-repeat;
  mask: url("assets/ui/exclamation.svg") center / contain no-repeat;
}

.mission-ready-badge[hidden] {
  display: none;
}

.mission-tab .mission-ready-badge {
  top: calc(clamp(5px, 1.1cqh, 8px) * -1);
  right: calc(clamp(5px, 1.1cqh, 8px) * -1);
}

.leaderboard-button-icon {
  -webkit-mask: url("assets/ui/leaderboard.svg") center / contain no-repeat;
  mask: url("assets/ui/leaderboard.svg") center / contain no-repeat;
}

.skin-preview-canvas {
  display: block;
  width: clamp(46px, 7.2cqh, 58px);
  height: clamp(46px, 7.2cqh, 58px);
  pointer-events: none;
}

.settings-dialog[hidden],
.mission-dialog[hidden],
.leaderboard-dialog[hidden],
.daily-bonus-dialog[hidden],
.reset-confirm-dialog[hidden],
.skin-dialog[hidden] {
  display: none;
}

.settings-dialog,
.mission-dialog,
.leaderboard-dialog,
.daily-bonus-dialog,
.reset-confirm-dialog,
.skin-dialog {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(26px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(26px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: rgba(1, 6, 12, 0.76);
  backdrop-filter: blur(10px);
}

.settings-dialog-panel,
.mission-dialog-panel,
.leaderboard-dialog-panel,
.daily-bonus-dialog-panel,
.reset-confirm-dialog-panel,
.skin-dialog-panel {
  --cut: var(--cut-panel);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --dialog-border: rgba(127, 231, 255, 0.68);
  position: relative;
  isolation: isolate;
  width: min(840px, 100%);
  max-height: min(720px, calc(100cqh - 48px));
  padding: 24px;
  overflow: auto;
  color: var(--ink);
}

.settings-dialog-panel {
  --dialog-border: rgba(130, 183, 255, 0.72);
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  gap: 0;
  width: min(760px, 100%);
  min-height: min(500px, calc(100cqh - 64px));
  padding: 36px 42px;
  overflow: auto;
}

.mission-dialog-panel {
  --dialog-border: rgba(93, 240, 195, 0.7);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0;
  width: min(980px, 100%);
  height: min(820px, calc(100cqh - 64px));
  max-height: min(820px, calc(100cqh - 64px));
  padding: 36px;
  overflow: hidden;
}

.leaderboard-dialog-panel {
  --dialog-border: rgba(182, 148, 255, 0.72);
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  gap: 20px;
  width: min(1500px, 100%);
  height: min(1080px, calc(100cqh - 64px));
  max-height: min(1080px, calc(100cqh - 64px));
  padding: 42px;
  overflow: hidden;
}

.daily-bonus-dialog-panel {
  --dialog-border: rgba(255, 214, 90, 0.72);
  width: min(560px, 100%);
  padding: 34px;
  overflow: visible;
  text-align: center;
}

.reset-confirm-dialog-panel {
  --dialog-border: rgba(255, 107, 138, 0.72);
  width: min(520px, 100%);
  overflow: visible;
  text-align: center;
}

.skin-dialog-panel {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: min(760px, calc(100cqh - 64px));
  max-height: min(760px, calc(100cqh - 64px));
  overflow: hidden;
}

.settings-dialog-panel::before,
.settings-dialog-panel::after,
.mission-dialog-panel::before,
.mission-dialog-panel::after,
.leaderboard-dialog-panel::before,
.leaderboard-dialog-panel::after,
.daily-bonus-dialog-panel::before,
.daily-bonus-dialog-panel::after,
.reset-confirm-dialog-panel::before,
.reset-confirm-dialog-panel::after,
.skin-dialog-panel::before,
.skin-dialog-panel::after,
.skin-choice::before,
.skin-choice::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.settings-dialog-panel::before,
.mission-dialog-panel::before,
.leaderboard-dialog-panel::before,
.daily-bonus-dialog-panel::before,
.reset-confirm-dialog-panel::before,
.skin-dialog-panel::before {
  inset: 0;
  background: var(--dialog-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.settings-dialog-panel::after,
.mission-dialog-panel::after,
.leaderboard-dialog-panel::after,
.daily-bonus-dialog-panel::after,
.reset-confirm-dialog-panel::after,
.skin-dialog-panel::after {
  inset: var(--stroke);
  background:
    rgba(5, 13, 24, 0.98);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.settings-dialog-header,
.mission-dialog-header,
.leaderboard-dialog-header,
.daily-bonus-dialog-header,
.reset-confirm-dialog-header,
.skin-dialog-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.settings-dialog-header,
.daily-bonus-dialog-header,
.reset-confirm-dialog-header {
  justify-content: center;
}

.mission-dialog-header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.settings-dialog-header h2,
.mission-dialog-header h2,
.daily-bonus-dialog-header h2,
.reset-confirm-dialog-header h2,
.skin-dialog-header h2 {
  margin: 0;
  color: var(--cyan);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px rgba(127, 231, 255, 0.24);
}

.settings-dialog-header h2 {
  color: var(--blue);
  font-size: clamp(40px, 6cqh, 52px);
  text-shadow: 0 0 18px rgba(130, 183, 255, 0.24);
}

.mission-dialog-header h2 {
  color: var(--mint);
  font-size: clamp(40px, 6cqh, 52px);
  text-shadow: 0 0 18px rgba(93, 240, 195, 0.24);
}

.leaderboard-dialog-header h2 {
  margin: 0;
  color: var(--violet);
  font-size: 58px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px rgba(182, 148, 255, 0.24);
}

.daily-bonus-dialog-header h2 {
  color: var(--gold);
  font-size: clamp(40px, 6cqh, 52px);
  text-shadow: 0 0 18px rgba(255, 214, 90, 0.24);
}

.reset-confirm-dialog-header h2 {
  color: var(--danger);
  text-shadow: 0 0 18px rgba(255, 107, 138, 0.24);
}

.settings-volume-list {
  display: grid;
  gap: 16px;
  margin: 26px 0 24px;
}

.settings-volume-row {
  --slider-accent: var(--blue);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  color: var(--ink);
  font-size: clamp(16px, 2.4cqh, 20px);
  font-weight: 950;
}

.settings-volume-row span {
  color: var(--slider-accent);
  text-align: left;
}

.settings-volume-row output {
  color: rgba(232, 248, 255, 0.78);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.settings-volume-row input[type="range"] {
  width: 100%;
  height: 30px;
  accent-color: var(--slider-accent);
  cursor: pointer;
}

.settings-warning-row,
.settings-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  margin: 0 0 18px;
  color: var(--blue);
  font-size: clamp(15px, 2.25cqh, 19px);
  font-weight: 950;
}

.settings-warning-button {
  --cut: 14px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  --chamfer-border: rgba(130, 183, 255, 0.82);
  --chamfer-fill: rgba(7, 18, 37, 0.9);
  min-width: clamp(96px, 14cqh, 126px);
  min-height: clamp(40px, 5.8cqh, 48px);
  padding: 0 clamp(16px, 2.6cqh, 20px);
  color: var(--ink);
  font-size: clamp(13px, 1.95cqh, 16px);
}

.settings-warning-button[aria-pressed="false"] {
  --chamfer-border: rgba(120, 146, 170, 0.62);
  --chamfer-fill: rgba(9, 17, 28, 0.92);
  color: var(--muted);
}

.settings-help-row,
.settings-privacy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  margin: 0 0 24px;
  color: var(--blue);
  font-size: clamp(15px, 2.25cqh, 19px);
  font-weight: 950;
}

.settings-control-row {
  color: var(--cyan);
}

.settings-virtual-stick-copy {
  display: grid;
  gap: 3px;
}

.settings-virtual-stick-copy small {
  color: var(--muted);
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.settings-language-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.78fr);
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 0 2px 18px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.settings-language-select {
  width: 100%;
  height: 54px;
  border: 2px solid rgba(127, 231, 255, 0.68);
  border-radius: 0;
  padding: 0 46px 0 18px;
  color: var(--ink);
  background: rgba(4, 18, 31, 0.92);
  font: inherit;
  font-size: 19px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.settings-language-select:hover,
.settings-language-select:focus-visible {
  border-color: var(--ink);
  outline: none;
  background: rgba(15, 48, 67, 0.96);
}

:root[data-locale="ja"] .tutorial-prompt,
:root[data-locale="ja"] .arena-how-to-copy,
:root[data-locale="ja"] .skill-card-description,
:root[data-locale="ko"] .tutorial-prompt,
:root[data-locale="ko"] .arena-how-to-copy,
:root[data-locale="ko"] .skill-card-description {
  letter-spacing: 0.015em;
}

:root:is([data-locale="zh-CN"], [data-locale="zh-TW"], [data-locale="th"], [data-locale="hi"], [data-locale="ar"]) [data-i18n-text] {
  letter-spacing: 0;
  line-height: 1.45;
}

:root[data-locale="ar"] .arena-how-to-copy li::before {
  margin-right: 0;
  margin-left: 9px;
}

.settings-language-select,
.settings-language-select option {
  letter-spacing: normal;
}

.settings-help-row {
  margin-bottom: 14px;
}

.settings-warning-row,
.settings-help-row {
  display: none;
}

.app[data-screen="result"] .settings-warning-row,
.app[data-screen="upgrade"] .settings-warning-row,
.app[data-screen="battle-arena-menu"] .settings-help-row {
  display: grid;
}

.settings-help-button,
.settings-privacy-button {
  --cut: 14px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  --chamfer-border: rgba(130, 183, 255, 0.72);
  --chamfer-fill: rgba(7, 18, 37, 0.88);
  min-width: clamp(96px, 14cqh, 126px);
  min-height: clamp(40px, 5.8cqh, 48px);
  padding: 0 clamp(16px, 2.6cqh, 20px);
  color: var(--ink);
  font-size: clamp(13px, 1.95cqh, 16px);
}

.settings-privacy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.settings-dialog-footer {
  display: flex;
  justify-content: center;
}

.settings-close-button {
  --chamfer-border: rgba(130, 183, 255, 0.72);
  --chamfer-fill: rgba(7, 18, 37, 0.88);
  min-width: 190px;
  min-height: 62px;
  color: var(--ink);
  font-size: 18px;
}

.mission-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.mission-tab {
  --cut: var(--cut-button);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --tab-accent: rgba(127, 231, 255, 0.34);
  position: relative;
  isolation: isolate;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: rgba(232, 248, 255, 0.62);
  font-size: clamp(17px, 2.7cqh, 22px);
  font-weight: 950;
  cursor: pointer;
}

.mission-tab.is-selected {
  --tab-accent: var(--mint);
  color: var(--ink);
  text-shadow: 0 0 14px rgba(93, 240, 195, 0.26);
}

.mission-tab::before,
.mission-tab::after,
.mission-item::before,
.mission-item::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.mission-tab::before {
  inset: 0;
  background: var(--tab-accent);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.mission-tab::after {
  inset: var(--stroke);
  background: rgba(5, 15, 27, 0.9);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.mission-refresh {
  min-height: 24px;
  margin: 0 0 18px;
  color: rgba(232, 248, 255, 0.66);
  font-size: clamp(14px, 2.1cqh, 17px);
  font-weight: 950;
  text-align: center;
}

.mission-list {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.mission-item {
  --cut: 14px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  --mission-accent: var(--mint);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title action"
    "meta action"
    "bar bar";
  align-items: center;
  gap: 10px 20px;
  min-height: 128px;
  padding: 22px;
}

.mission-item.is-complete {
  --mission-accent: var(--gold);
}

.mission-item.is-claimed {
  --mission-accent: rgba(127, 231, 255, 0.34);
  opacity: 0.74;
}

.mission-item::before {
  inset: 0;
  background: color-mix(in srgb, var(--mission-accent), transparent 64%);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.mission-item::after {
  inset: var(--stroke);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mission-accent), transparent 90%), transparent),
    rgba(6, 16, 29, 0.92);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.mission-title {
  grid-area: title;
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 3.2cqh, 24px);
  font-weight: 950;
  line-height: 1;
}

.mission-progress-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  color: rgba(232, 248, 255, 0.7);
  font-size: clamp(13px, 2cqh, 16px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.mission-progress {
  grid-area: bar;
  height: 10px;
  overflow: hidden;
  background: rgba(127, 231, 255, 0.13);
}

.mission-progress-fill {
  display: block;
  width: var(--mission-progress);
  height: 100%;
  background: var(--mission-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--mission-accent), transparent 54%);
}

.mission-claim-actions {
  grid-area: action;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.mission-claim-button {
  --cut: var(--cut-button);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --chamfer-border: var(--mission-accent);
  --chamfer-fill: rgba(5, 20, 26, 0.9);
  justify-self: stretch;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: clamp(122px, 20cqh, 150px);
  min-height: 54px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: clamp(14px, 2cqh, 16px);
  font-weight: 950;
  cursor: pointer;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--mission-accent), transparent 66%));
}

.mission-claim-icon {
  width: 16px;
  height: 16px;
  background: var(--gold);
  filter: drop-shadow(0 0 7px rgba(255, 214, 90, 0.34));
  -webkit-mask: url("assets/ui/credits.svg") center / contain no-repeat;
  mask: url("assets/ui/credits.svg") center / contain no-repeat;
}

.mission-claim-value {
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mission-ad-claim-button {
  --chamfer-border: var(--gold);
  --chamfer-fill: rgba(92, 72, 20, 0.82);
}

.mission-ad-claim-icon {
  width: 18px;
  height: 18px;
}

.mission-claim-button:disabled {
  --chamfer-border: rgba(127, 231, 255, 0.18);
  --chamfer-fill: rgba(5, 15, 26, 0.58);
  color: rgba(232, 248, 255, 0.42);
  cursor: default;
  filter: none;
}

.mission-claim-button.is-claimed .mission-claim-icon,
.mission-claim-button:disabled .mission-claim-icon,
.mission-claim-button:disabled .mission-ad-claim-icon {
  opacity: 0.42;
  filter: none;
}

.mission-claim-button.is-claimed .mission-claim-value,
.mission-claim-button:disabled .mission-claim-value {
  color: rgba(232, 248, 255, 0.42);
}

.mission-claim-button::before,
.mission-claim-button::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.mission-claim-button::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.mission-claim-button::after {
  inset: var(--stroke);
  background: var(--chamfer-fill);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.mission-claim-button:hover:not(:disabled),
.mission-claim-button:focus-visible:not(:disabled) {
  --chamfer-fill: rgba(13, 23, 39, 0.96);
  outline: none;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--mission-accent), transparent 54%));
}

.mission-ad-claim-button:hover:not(:disabled),
.mission-ad-claim-button:focus-visible:not(:disabled) {
  --chamfer-border: #ffe38a;
  --chamfer-fill: #a97e1e;
}

.mission-actions {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.mission-close-button {
  --chamfer-border: rgba(93, 240, 195, 0.64);
  --chamfer-fill: rgba(7, 30, 28, 0.84);
  min-width: 190px;
  min-height: 62px;
  color: var(--ink);
  font-size: 18px;
}

.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(var(--leaderboard-tab-count, 3), minmax(0, 1fr));
  gap: 12px;
}

.leaderboard-tab[hidden] {
  display: none;
}

.leaderboard-tab {
  --cut: var(--cut-button);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --tab-accent: rgba(127, 231, 255, 0.34);
  min-width: 0;
  position: relative;
  isolation: isolate;
  min-height: 72px;
  border: 0;
  background: transparent;
  color: rgba(232, 248, 255, 0.62);
  font-size: 24px;
  font-weight: 950;
  cursor: pointer;
}

.leaderboard-tab.is-selected {
  --tab-accent: var(--violet);
  color: var(--ink);
  text-shadow: 0 0 14px rgba(182, 148, 255, 0.26);
}

.leaderboard-tab::before,
.leaderboard-tab::after,
.leaderboard-row::before,
.leaderboard-row::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.leaderboard-tab::before {
  inset: 0;
  background: var(--tab-accent);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.leaderboard-tab::after {
  inset: var(--stroke);
  background: rgba(5, 15, 27, 0.9);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.leaderboard-period-note,
.leaderboard-status,
.leaderboard-me {
  margin: 0;
  color: rgba(232, 248, 255, 0.66);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
  text-align: center;
}

.leaderboard-status,
.leaderboard-me {
  min-height: 18px;
  color: rgba(232, 248, 255, 0.82);
  font-size: 20px;
}

.leaderboard-table {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.leaderboard-entries {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.leaderboard-row {
  --cut: 10px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  --leaderboard-accent: rgba(182, 148, 255, 0.58);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 90px minmax(220px, 300px) minmax(680px, 1fr) 190px;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding: 0 24px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.leaderboard-row::before {
  inset: 0;
  background: color-mix(in srgb, var(--leaderboard-accent), transparent 54%);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.leaderboard-row::after {
  inset: var(--stroke);
  background: rgba(6, 16, 29, 0.9);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.leaderboard-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row > span:first-child {
  color: var(--violet);
  text-align: center;
}

.leaderboard-row > span:last-child {
  color: var(--gold);
  text-align: right;
}

.leaderboard-finishes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.leaderboard-finish {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 42px;
  padding: 0 10px;
  background: rgba(127, 231, 255, 0.1);
  color: rgba(232, 248, 255, 0.86);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.leaderboard-finish.is-empty {
  color: rgba(232, 248, 255, 0.38);
  background: rgba(127, 231, 255, 0.05);
}

.leaderboard-finish-tier {
  color: var(--violet);
}

.leaderboard-finish-count {
  color: var(--ink);
}

.leaderboard-finish.is-empty .leaderboard-finish-tier,
.leaderboard-finish.is-empty .leaderboard-finish-count {
  color: currentColor;
}

.leaderboard-header {
  --leaderboard-accent: rgba(127, 231, 255, 0.32);
  min-height: 52px;
  color: rgba(232, 248, 255, 0.68);
  font-size: 16px;
}

.leaderboard-header span:first-child,
.leaderboard-header span:nth-child(3),
.leaderboard-header span:last-child {
  color: rgba(232, 248, 255, 0.68);
}

.leaderboard-header span:nth-child(3) {
  text-align: center;
}

.leaderboard-header span:last-child {
  text-align: right;
}

.leaderboard-empty {
  display: grid;
  min-height: 330px;
  place-items: center;
  color: rgba(232, 248, 255, 0.54);
  font-size: 24px;
  font-weight: 950;
  text-align: center;
}

.leaderboard-actions {
  display: flex;
  justify-content: center;
}

.leaderboard-close-button {
  --chamfer-border: rgba(182, 148, 255, 0.64);
  --chamfer-fill: rgba(19, 15, 36, 0.86);
  min-width: 230px;
  min-height: 70px;
  color: var(--ink);
  font-size: 20px;
}

.daily-bonus-prize {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "icon value";
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 18px 0 18px;
  color: var(--gold);
}

.daily-bonus-prize-icon {
  grid-area: icon;
  width: clamp(62px, 8.8cqh, 74px);
  height: clamp(62px, 8.8cqh, 74px);
  background: var(--gold);
  filter: drop-shadow(0 0 12px rgba(255, 214, 90, 0.3));
  transform: translateY(5px);
  -webkit-mask: url("assets/ui/credits.svg") center / contain no-repeat;
  mask: url("assets/ui/credits.svg") center / contain no-repeat;
}

.daily-bonus-prize strong {
  grid-area: value;
  justify-self: start;
  font-size: clamp(66px, 9.8cqh, 82px);
  font-weight: 950;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 214, 90, 0.18);
}

.daily-bonus-ladder {
  --daily-bonus-tier-gap: 10px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--daily-bonus-tier-gap);
  width: 100%;
  max-width: 610px;
  margin: 0 auto 12px;
  padding: 0;
  list-style: none;
}

.daily-bonus-tier {
  --daily-tier-border: rgba(255, 214, 90, 0.26);
  --daily-tier-fill: rgba(18, 20, 18, 0.96);
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: 82px;
  padding: 10px 6px;
  align-content: center;
  gap: 6px;
  color: rgba(232, 248, 255, 0.52);
}

.daily-bonus-tier::before,
.daily-bonus-tier::after {
  position: absolute;
  content: "";
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.daily-bonus-tier::before {
  inset: 0;
  z-index: -2;
  background: var(--daily-tier-border);
}

.daily-bonus-tier::after {
  inset: 2px;
  z-index: -1;
  background: var(--daily-tier-fill);
}

.daily-bonus-tier-label {
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.05em;
  line-height: 1;
}

.daily-bonus-tier:not(:last-child) .daily-bonus-tier-label::after {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: -3;
  width: var(--daily-bonus-tier-gap);
  height: 2px;
  content: "";
  background: rgba(255, 214, 90, 0.28);
  transform: translateY(-50%);
}

.daily-bonus-tier-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 22px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.daily-bonus-tier-value::before {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  content: "";
  background: currentColor;
  -webkit-mask: url("assets/ui/credits.svg") center / contain no-repeat;
  mask: url("assets/ui/credits.svg") center / contain no-repeat;
}

.daily-bonus-tier.is-complete {
  --daily-tier-border: rgba(255, 214, 90, 0.48);
  --daily-tier-fill: rgba(57, 44, 12, 0.72);
  color: rgba(255, 214, 90, 0.68);
}

.daily-bonus-tier.is-tomorrow {
  --daily-tier-border: rgba(93, 240, 195, 0.78);
  --daily-tier-fill: rgba(11, 52, 43, 0.88);
  color: var(--mint);
  filter: drop-shadow(0 0 10px rgba(93, 240, 195, 0.16));
}

.daily-bonus-tier.is-today {
  --daily-tier-border: #ffd65a;
  --daily-tier-fill: rgba(94, 70, 14, 0.94);
  color: var(--gold);
  filter: drop-shadow(0 0 12px rgba(255, 214, 90, 0.24));
}

.daily-bonus-streak {
  max-width: 560px;
  margin: 0 auto 18px;
  color: rgba(255, 214, 90, 0.72);
  font-size: clamp(18px, 2.8cqh, 20px);
  font-weight: 950;
  line-height: 1.35;
}

.daily-bonus-refresh {
  min-height: 26px;
  margin: 0 0 8px;
  color: rgba(232, 248, 255, 0.72);
  font-size: clamp(18px, 2.8cqh, 20px);
  font-weight: 950;
}

.daily-bonus-dialog.is-claimed .daily-bonus-prize {
  opacity: 0.74;
}

.daily-bonus-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.daily-bonus-claim-button {
  --chamfer-border: #ffd65a;
  --chamfer-fill: #c9951e;
  min-width: 172px;
  min-height: 56px;
  color: var(--ink);
  font-size: 16px;
}

.daily-bonus-claim-button:hover,
.daily-bonus-claim-button:focus-visible {
  --chamfer-border: #ffe38a;
  --chamfer-fill: #d9a62e;
}

.daily-bonus-claim-button:disabled {
  --chamfer-border: rgba(255, 214, 90, 0.32);
  --chamfer-fill: rgba(38, 31, 14, 0.72);
  color: rgba(232, 248, 255, 0.42);
  cursor: default;
  filter: none;
}

.daily-bonus-close-button {
  --chamfer-border: rgba(255, 214, 90, 0.44);
  --chamfer-fill: rgba(30, 24, 12, 0.84);
  min-width: 172px;
  min-height: 56px;
  color: var(--ink);
  font-size: 16px;
}

.reset-confirm-detail {
  max-width: 100%;
  margin: 0 auto 16px;
  color: rgba(232, 248, 255, 0.72);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  white-space: nowrap;
}

.tutorial-credits-hint {
  --callout-accent: rgba(182, 148, 255, 0.88);
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(24px, 4cqh, 34px));
  width: clamp(360px, 58cqh, 450px);
  transform: translateY(-50%);
}

.tutorial-credits-hint::after {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 18px;
  height: 18px;
  border-bottom: 2px solid var(--callout-accent);
  border-left: 2px solid var(--callout-accent);
  background: var(--callout-fill);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.reset-confirm-reward {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 8px 0 20px;
  color: var(--gold);
}

.reset-confirm-reward-label {
  color: rgba(255, 214, 90, 0.72);
  font-size: 12px;
  font-weight: 950;
}

.reset-confirm-reward-value {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
}

.reset-confirm-reward-icon {
  width: 46px;
  height: 46px;
  background: var(--gold);
  filter: drop-shadow(0 0 12px rgba(255, 214, 90, 0.3));
  transform: translateY(4px);
  -webkit-mask: url("assets/ui/credits.svg") center / contain no-repeat;
  mask: url("assets/ui/credits.svg") center / contain no-repeat;
}

.reset-confirm-reward-value strong {
  font-size: 52px;
  font-weight: 950;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 214, 90, 0.18);
}

.reset-catchup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reset-catchup-condition {
  flex: 0 0 100%;
  margin: 0;
  padding: 8px 0;
  color: rgba(232, 248, 255, 0.68);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.reset-catchup-condition[hidden] {
  display: none;
}

.reset-catchup[hidden] {
  display: none;
}

.reset-catchup-condition.is-ineligible {
  color: rgba(255, 214, 90, 0.88);
}

.reset-confirm-actions {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

#reset-confirm-dialog .reset-confirm-actions {
  margin-top: 0;
  padding-top: 0;
}

#reset-confirm-dialog.has-reset-catchup .reset-confirm-dialog-panel {
  width: min(900px, 100%);
}

#reset-confirm-dialog.has-reset-catchup .reset-confirm-actions {
  display: grid;
  grid-template-columns:
    minmax(184px, 1fr)
    minmax(154px, 1fr)
    minmax(154px, 1fr);
  align-items: end;
  gap: 14px 16px;
}

#reset-confirm-dialog.has-reset-catchup .reset-catchup-condition {
  grid-column: 1 / -1;
  max-width: 100%;
  padding: 8px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

#reset-confirm-dialog.has-reset-catchup .reset-catchup,
#reset-confirm-dialog.has-reset-catchup .reset-catchup-button,
#reset-confirm-dialog.has-reset-catchup .reset-confirm-button,
#reset-confirm-dialog.has-reset-catchup .reset-cancel-button {
  width: 100%;
  min-width: 0;
}

#reset-confirm-dialog.has-reset-catchup .reset-catchup-button,
#reset-confirm-dialog.has-reset-catchup .reset-confirm-button,
#reset-confirm-dialog.has-reset-catchup .reset-cancel-button {
  line-height: 1;
  white-space: nowrap;
}

.reset-confirm-button {
  --chamfer-border: #ff91a8;
  --chamfer-fill: #ff6b8a;
  min-width: 154px;
  color: var(--ink);
}

.reset-confirm-button:hover,
.reset-confirm-button:focus-visible {
  --chamfer-border: #ffb2c1;
  --chamfer-fill: #ff829b;
}

.reset-catchup-button {
  --chamfer-border: #82f0c9;
  --chamfer-fill: #2cae82;
  display: inline-flex;
  min-width: 184px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
}

.reset-catchup-button img {
  width: 20px;
  height: 20px;
}

.reset-catchup-button:hover,
.reset-catchup-button:focus-visible {
  --chamfer-border: #b3ffe5;
  --chamfer-fill: #37c796;
}

.reset-catchup-button:disabled {
  --chamfer-border: rgba(97, 228, 183, 0.25);
  --chamfer-fill: rgba(18, 45, 42, 0.7);
  color: rgba(232, 248, 255, 0.42);
  cursor: default;
  filter: none;
}

.reset-cancel-button {
  --chamfer-border: rgba(127, 231, 255, 0.48);
  --chamfer-fill: rgba(7, 22, 37, 0.86);
  min-width: 154px;
  color: var(--ink);
}

.reset-cancel-button:hover,
.reset-cancel-button:focus-visible {
  --chamfer-border: rgba(127, 231, 255, 0.78);
  --chamfer-fill: rgba(10, 34, 55, 0.92);
}

.skin-close-button {
  --chamfer-border: rgba(127, 231, 255, 0.72);
  --chamfer-fill: rgba(7, 22, 37, 0.88);
  min-width: 164px;
  color: var(--ink);
}

.player-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.skin-dialog[data-player-mode="skins-only"] .player-tabs {
  display: none;
}

.player-tab {
  --cut: var(--cut-button);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --tab-accent: rgba(127, 231, 255, 0.34);
  position: relative;
  isolation: isolate;
  min-height: 50px;
  border: 0;
  background: transparent;
  color: rgba(232, 248, 255, 0.62);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
  cursor: pointer;
}

.player-tab:hover,
.player-tab:focus-visible,
.player-tab.is-active {
  --tab-accent: var(--cyan);
  color: var(--ink);
  outline: none;
  text-shadow: 0 0 14px rgba(127, 231, 255, 0.26);
}

.player-tab::before,
.player-tab::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.player-tab::before {
  inset: 0;
  background: var(--tab-accent);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.player-tab::after {
  inset: var(--stroke);
  background: rgba(5, 15, 27, 0.9);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.player-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 2px;
}

.player-panel[hidden] {
  display: none;
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.skin-choice {
  --cut: 14px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  --skin-accent: var(--cyan);
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 166px;
  place-items: center;
  padding: 18px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}

.skin-choice.is-locked {
  filter: saturate(0.72);
}

.skin-choice.is-unaffordable {
  opacity: 0.62;
}

.skin-choice::before {
  inset: 0;
  background: rgba(127, 231, 255, 0.26);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.skin-choice::after {
  inset: var(--stroke);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--skin-accent), transparent 88%), transparent),
    rgba(6, 16, 29, 0.86);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.skin-choice:hover,
.skin-choice:focus-visible,
.skin-choice.is-selected {
  outline: none;
}

.skin-choice:hover::before,
.skin-choice:focus-visible::before,
.skin-choice.is-selected::before {
  background: var(--skin-accent);
}

.skin-choice.is-affordable::before {
  background: color-mix(in srgb, var(--skin-accent), transparent 46%);
}

.skin-choice.is-unaffordable:hover::before,
.skin-choice.is-unaffordable:focus-visible::before {
  background: rgba(127, 231, 255, 0.26);
}

.skin-choice-preview {
  width: 136px;
  height: 128px;
  align-self: center;
}

.skin-choice.is-locked .skin-choice-preview {
  opacity: 0.78;
}

.skin-cost {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  min-width: 54px;
  padding: 5px 8px;
  color: var(--gold);
  font-size: clamp(11px, 1.65cqh, 13px);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(255, 214, 90, 0.3);
}

.skin-cost[hidden] {
  display: none;
}

.skin-cost::before,
.skin-cost::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.skin-cost::before {
  inset: 0;
  background: rgba(255, 214, 90, 0.72);
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
}

.skin-cost::after {
  inset: 1px;
  background: rgba(18, 16, 8, 0.9);
  clip-path: polygon(
    7px 0,
    calc(100% - 7px) 0,
    100% 7px,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    7px 100%,
    0 calc(100% - 7px),
    0 7px
  );
}

.skin-cost-dot {
  width: 13px;
  height: 13px;
  background: var(--gold);
  filter: drop-shadow(0 0 8px rgba(255, 214, 90, 0.38));
  -webkit-mask: url("assets/ui/credits.svg") center / contain no-repeat;
  mask: url("assets/ui/credits.svg") center / contain no-repeat;
}

.skin-choice.is-denied {
  animation: skin-denied 180ms ease;
}

.skill-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 2.5cqh, 20px);
}

.skill-card {
  --cut: 20px;
  --inner-cut: calc(var(--cut) - var(--stroke));
  --accent: var(--cyan);
  --tint: rgba(36, 214, 255, 0.1);
  --chamfer-border: rgba(36, 214, 255, 0.72);
  --chamfer-fill: rgba(5, 15, 27, 0.9);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  grid-template-areas:
    "symbol title actions"
    "symbol desc actions"
    "symbol meter meter";
  align-items: center;
  gap: clamp(9px, 1.6cqh, 13px) clamp(20px, 3.4cqh, 28px);
  min-height: var(--upgrade-row-height);
  padding: clamp(18px, 3cqh, 24px) clamp(22px, 3.6cqh, 30px);
  overflow: hidden;
  color: var(--accent);
  text-align: left;
}

.skill-card[data-skill-id="camera"] {
  --accent: var(--cyan);
  --tint: rgba(36, 214, 255, 0.1);
  --chamfer-border: rgba(36, 214, 255, 0.72);
}

.skill-card[data-skill-id="automation"] {
  --accent: var(--mint);
  --tint: rgba(93, 240, 195, 0.12);
  --chamfer-border: rgba(93, 240, 195, 0.72);
}

.skill-card[data-skill-id="discount"] {
  --accent: var(--gold);
  --tint: rgba(255, 214, 90, 0.12);
  --chamfer-border: rgba(255, 214, 90, 0.72);
}

.skill-card[data-skill-id="resetEfficiency"] {
  --accent: var(--orange);
  --tint: rgba(255, 142, 82, 0.12);
  --chamfer-border: rgba(255, 142, 82, 0.72);
}

.skill-card[data-skill-id="valueOverflow"] {
  --accent: var(--cyan);
  --tint: rgba(36, 214, 255, 0.1);
  --chamfer-border: rgba(36, 214, 255, 0.72);
}

.skill-card[data-skill-id="baseLevel"] {
  --accent: var(--mint);
  --tint: rgba(93, 240, 195, 0.12);
  --chamfer-border: rgba(93, 240, 195, 0.72);
}

.arena-skill-card[data-arena-skill-id="boost"] { --accent: var(--cyan); --tint: rgba(36, 214, 255, 0.1); }
.arena-skill-card[data-arena-skill-id="guard"] { --accent: var(--gold); --tint: rgba(255, 214, 90, 0.12); }
.arena-skill-card[data-arena-skill-id="hide"] { --accent: #b694ff; --tint: rgba(182, 148, 255, 0.12); }
.arena-skill-card[data-arena-skill-id="status-up"] { --accent: var(--mint); --tint: rgba(93, 240, 195, 0.12); }
.arena-skill-card { --chamfer-border: color-mix(in srgb, var(--accent) 72%, transparent); }
.arena-skill-card-icon-boost { --icon-url: url("assets/ui/boost.svg"); }
.arena-skill-card-icon-guard { --icon-url: url("assets/ui/guard.svg"); }
.arena-skill-card-icon-hide { --icon-url: url("assets/ui/hide.svg"); }
.arena-skill-card-icon-status-up { --icon-url: url("assets/ui/status-up.svg"); }

.arena-skill-status {
  grid-area: meter;
  color: var(--accent);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.credit-energy-exchange-card {
  --accent: var(--mint);
  --tint: rgba(93, 240, 195, 0.13);
  --chamfer-border: rgba(93, 240, 195, 0.72);
}

.skill-card::before,
.skill-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.skill-card::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.skill-card::after {
  inset: var(--stroke);
  background:
    linear-gradient(180deg, var(--tint), transparent 58%),
    var(--chamfer-fill);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.skill-card:hover,
.skill-card:focus-within {
  --chamfer-border: var(--accent);
  --chamfer-fill: var(--bg-panel-strong);
  filter: drop-shadow(0 0 18px var(--tint));
  outline: none;
}

.skill-card.is-unaffordable:not(.is-maxed) {
  --chamfer-border: rgba(127, 231, 255, 0.18);
  --chamfer-fill: rgba(7, 22, 37, 0.5);
  color: rgba(232, 248, 255, 0.42);
}

.skill-card.is-enabled,
.skill-card.is-affordable {
  --chamfer-border: var(--accent);
}

.arena-skill-card.is-unaffordable:not(.is-maxed) {
  --chamfer-border: color-mix(in srgb, var(--accent) 22%, transparent);
}

.skill-card-icon {
  grid-area: symbol;
  width: clamp(56px, 8cqh, 70px);
  height: clamp(56px, 8cqh, 70px);
  justify-self: center;
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
  filter: drop-shadow(0 0 12px var(--tint));
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.skill-card-icon-player {
  display: block;
  object-fit: contain;
  background: transparent;
  mask: none;
}

.skill-card-icon-camera {
  --icon-url: url("assets/ui/camera.svg");
}

.skill-card-icon-value {
  --icon-url: url("assets/ui/value.svg");
}

.skill-card-icon-touch {
  --icon-url: url("assets/ui/touch.svg");
}

.skill-card-icon-discount {
  --icon-url: url("assets/ui/discount.svg");
}

.skill-card-icon-reset-efficiency {
  --icon-url: url("assets/ui/reset-efficiency.svg");
}

.skill-card-icon-energy-exchange {
  --icon-url: url("assets/ui/energy-exchange.svg");
}

.skill-card-heading {
  grid-area: title;
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.9cqh, 14px);
  min-width: 0;
}

.skill-card-title {
  color: var(--ink);
  font-size: clamp(19px, 3.1cqh, 24px);
  font-weight: 950;
  line-height: 1;
}

.skill-card-level {
  color: var(--accent);
  font-size: clamp(16px, 2.6cqh, 20px);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.skill-card-effect {
  color: color-mix(in srgb, var(--accent), rgba(232, 248, 255, 0.78) 42%);
  font-size: clamp(11px, 1.8cqh, 13px);
  font-weight: 950;
  line-height: 1;
}

.skill-card-description {
  grid-area: desc;
  margin: 0;
  color: rgba(232, 248, 255, 0.76);
  font-size: clamp(12px, 1.9cqh, 14px);
  font-weight: 850;
  line-height: 1.2;
}

.skill-card-meter {
  grid-area: meter;
  display: grid;
  grid-template-columns: repeat(var(--skill-meter-segments, 10), 1fr);
  gap: clamp(4px, 0.8cqh, 6px);
  width: 100%;
  height: clamp(10px, 1.7cqh, 13px);
}

.skill-card-meter span {
  display: block;
  border-radius: 0;
  background: rgba(127, 231, 255, 0.13);
}

.skill-card-meter span.is-filled {
  background: var(--accent);
  box-shadow: 0 0 10px var(--tint);
}

.credit-energy-exchange-balance {
  grid-area: meter;
  display: flex;
  min-width: 0;
  min-height: clamp(18px, 2.6cqh, 22px);
  align-items: center;
  gap: clamp(7px, 1.2cqh, 10px);
  color: rgba(232, 248, 255, 0.72);
  font-size: clamp(11px, 1.8cqh, 13px);
  font-weight: 900;
  line-height: 1;
}

.credit-energy-exchange-balance-icon {
  display: block;
  width: clamp(24px, 3.8cqh, 30px);
  height: clamp(15px, 2.4cqh, 19px);
  flex: 0 0 auto;
  background: var(--mint);
  filter: drop-shadow(0 0 8px rgba(93, 240, 195, 0.3));
  -webkit-mask: url("assets/ui/stored-energy.svg") center / contain no-repeat;
  mask: url("assets/ui/stored-energy.svg") center / contain no-repeat;
}

.credit-energy-exchange-balance strong {
  overflow: hidden;
  color: var(--mint);
  font-size: 1.08em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.skill-card-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(8px, 1.4cqh, 12px);
}

.skill-buy-button,
.skill-toggle-button {
  --cut: var(--cut-button);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --chamfer-border: var(--accent);
  --chamfer-fill: rgba(4, 18, 31, 0.76);
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: clamp(138px, 22cqh, 170px);
  min-height: clamp(52px, 7.4cqh, 62px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.8cqh, 14px);
  padding: 0 clamp(18px, 3.1cqh, 24px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: clamp(15px, 2.4cqh, 18px);
  font-weight: 950;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px var(--tint);
  cursor: pointer;
  filter: drop-shadow(0 0 12px var(--tint));
}

.skill-toggle-button {
  justify-content: center;
}

.skill-card-cost-icon {
  display: block;
  width: clamp(16px, 2.4cqh, 19px);
  height: clamp(16px, 2.4cqh, 19px);
  flex: 0 0 clamp(16px, 2.4cqh, 19px);
  border-radius: 0;
  background: var(--gold);
  filter:
    drop-shadow(0 0 7px rgba(255, 214, 90, 0.34))
    drop-shadow(0 0 13px rgba(255, 214, 90, 0.18));
  -webkit-mask: url("assets/ui/credits.svg") center / contain no-repeat;
  mask: url("assets/ui/credits.svg") center / contain no-repeat;
}

.skill-card-cost-value {
  display: block;
  min-width: 0;
  color: var(--ink);
  line-height: 1;
}

.skill-buy-button.is-maxed {
  justify-content: center;
}

.skill-buy-button.is-maxed .skill-card-cost-icon {
  display: none;
}

.skill-buy-button::before,
.skill-buy-button::after,
.skill-toggle-button::before,
.skill-toggle-button::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.skill-buy-button::before,
.skill-toggle-button::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.skill-buy-button::after,
.skill-toggle-button::after {
  inset: var(--stroke);
  background: var(--chamfer-fill);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.skill-buy-button:disabled,
.skill-toggle-button:disabled {
  --chamfer-border: rgba(127, 231, 255, 0.22);
  --chamfer-fill: rgba(5, 15, 26, 0.58);
  cursor: default;
  filter: none;
}

.skill-buy-button:hover:not(:disabled),
.skill-buy-button:focus-visible:not(:disabled),
.skill-toggle-button:hover:not(:disabled),
.skill-toggle-button:focus-visible:not(:disabled),
.skill-toggle-button[aria-pressed="true"] {
  --chamfer-border: var(--accent);
  --chamfer-fill: rgba(13, 23, 39, 0.96);
  outline: none;
}

.skill-buy-button[hidden],
.skill-toggle-button[hidden] {
  display: none;
}

.skill-card.is-denied {
  animation: skin-denied 180ms ease;
}

@keyframes skin-denied {
  0%,
  100% {
    transform: translateX(0);
  }

  35% {
    transform: translateX(-4px);
  }

  70% {
    transform: translateX(4px);
  }
}

.skin-dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.result-screen .screen-actions {
  grid-area: actions;
  align-self: start;
  justify-content: center;
  width: 100%;
  margin-top: clamp(10px, 3cqh, 28px);
}

.result-resource::after {
  background:
    linear-gradient(90deg, var(--tint), transparent 45%),
    repeating-linear-gradient(
      118deg,
      transparent 0 34px,
      rgba(232, 248, 255, 0.04) 35px 36px
    ),
    var(--chamfer-fill);
}

.result-resource .stat-label {
  color: var(--accent);
  font-size: clamp(11px, 1.65cqh, 13px);
  font-weight: 950;
}

.result-resource strong {
  grid-area: value;
  justify-self: start;
  color: var(--accent);
  font-size: clamp(24px, 4.4cqh, 32px);
  font-weight: 950;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px var(--tint);
}

.resource-bank {
  position: relative;
  justify-self: end;
  min-width: min(240px, 100%);
  min-height: clamp(62px, 9.6cqh, 78px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon label"
    "icon value";
  align-items: center;
  gap: 4px clamp(10px, 2cqh, 14px);
  padding: clamp(11px, 2cqh, 14px) clamp(15px, 2.8cqh, 20px);
  text-align: left;
}

.energy-bank {
  justify-self: end;
  width: min(300px, 100%);
}

.resource-bank .stat-dot {
  grid-area: icon;
}

.resource-bank .stat-label {
  grid-area: label;
  color: var(--accent);
}

.resource-bank strong {
  grid-area: value;
  display: block;
  color: var(--accent);
  font-size: clamp(25px, 4.7cqh, 34px);
  font-weight: 950;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.upgrade-screen {
  gap: clamp(22px, 4.6cqh, 42px);
}

.upgrade-screen > .upgrade-top,
.upgrade-screen > .upgrade-list,
.upgrade-screen > .screen-actions {
  transform: translateY(clamp(24px, 2.5cqh, 32px));
}

.upgrade-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.5cqh, 20px);
  max-width: 1160px;
}

.upgrade-item {
  --cut: 20px;
  min-height: var(--upgrade-row-height);
  display: grid;
  grid-template-columns: 90px 1fr 202px;
  grid-template-areas:
    "symbol title cost"
    "symbol meter meter";
  align-items: center;
  gap: clamp(10px, 1.7cqh, 14px) clamp(20px, 3.4cqh, 28px);
  padding: clamp(18px, 3cqh, 24px) clamp(22px, 3.6cqh, 30px);
  overflow: hidden;
  color: var(--accent);
  text-align: left;
}

.upgrade-item[data-upgrade-row="speed"] {
  --accent: var(--cyan);
  --tint: rgba(36, 214, 255, 0.1);
  --chamfer-border: rgba(36, 214, 255, 0.72);
}

.upgrade-item[data-upgrade-row="magnet"] {
  --accent: var(--gold);
  --tint: rgba(255, 214, 90, 0.12);
  --chamfer-border: rgba(255, 214, 90, 0.72);
}

.upgrade-item[data-upgrade-row="time"] {
  --accent: var(--blue);
  --tint: rgba(130, 183, 255, 0.12);
  --chamfer-border: rgba(130, 183, 255, 0.72);
}

.upgrade-item[data-upgrade-row="value"] {
  --accent: var(--violet);
  --tint: rgba(182, 148, 255, 0.13);
  --chamfer-border: rgba(182, 148, 255, 0.74);
}

.upgrade-item[data-upgrade-row="density"] {
  --accent: var(--mint);
  --tint: rgba(93, 240, 195, 0.12);
  --chamfer-border: rgba(93, 240, 195, 0.72);
}

.upgrade-item:hover,
.upgrade-item:focus-within {
  --chamfer-border: var(--accent);
  --chamfer-fill: var(--bg-panel-strong);
  filter: drop-shadow(0 0 18px var(--tint));
  outline: none;
}

.upgrade-item.is-disabled {
  --chamfer-border: rgba(127, 231, 255, 0.18);
  --chamfer-fill: rgba(7, 22, 37, 0.5);
  color: rgba(232, 248, 255, 0.42);
}

.upgrade-dot {
  grid-area: symbol;
  width: clamp(56px, 8cqh, 70px);
  height: clamp(56px, 8cqh, 70px);
  justify-self: center;
}

.upgrade-dot-speed {
  --accent: var(--cyan);
  --icon-url: url("assets/ui/speed.svg");
}

.upgrade-dot-magnet {
  --accent: var(--gold);
  --icon-url: url("assets/ui/magnet.svg");
}

.upgrade-dot-time {
  --accent: var(--blue);
  --icon-url: url("assets/ui/time.svg");
}

.upgrade-dot-value {
  --accent: var(--violet);
  --icon-url: url("assets/ui/value.svg");
}

.upgrade-dot-density {
  --accent: var(--mint);
  --icon-url: url("assets/ui/density.svg");
}

.stat-dot-shards,
.stat-dot-energy,
.stat-dot-best,
.stat-dot-credits,
.stat-dot-rank,
.stat-dot-top,
.upgrade-dot-speed,
.upgrade-dot-magnet,
.upgrade-dot-time,
.upgrade-dot-value,
.upgrade-dot-density,
.upgrade-dot-power {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 12px var(--tint));
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.upgrade-title {
  grid-area: title;
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.9cqh, 14px);
  min-width: 0;
}

.upgrade-name {
  color: var(--ink);
  font-size: clamp(19px, 3.1cqh, 24px);
  font-weight: 950;
}

.upgrade-level {
  color: var(--accent);
  font-size: clamp(16px, 2.6cqh, 20px);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.upgrade-meter {
  grid-area: meter;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(4px, 0.8cqh, 6px);
  width: 100%;
  height: clamp(10px, 1.7cqh, 13px);
}

.upgrade-meter span {
  display: block;
  border-radius: 0;
  background: rgba(127, 231, 255, 0.13);
}

.upgrade-meter span.is-filled {
  background: var(--accent);
  box-shadow: 0 0 10px var(--tint);
}

.upgrade-cost {
  --cut: var(--cut-button);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --chamfer-border: var(--accent);
  --chamfer-fill: rgba(4, 18, 31, 0.76);
  grid-area: cost;
  justify-self: end;
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: clamp(164px, 26cqh, 202px);
  width: clamp(164px, 26cqh, 202px);
  min-height: clamp(52px, 7.4cqh, 62px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.8cqh, 14px);
  padding: 0 clamp(18px, 3.1cqh, 24px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: clamp(15px, 2.4cqh, 18px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px var(--tint);
  cursor: pointer;
  filter: drop-shadow(0 0 12px var(--tint));
}

.energy-icon {
  --icon-url: url("assets/ui/energy.svg");
  display: block;
  width: clamp(16px, 2.4cqh, 19px);
  height: clamp(16px, 2.4cqh, 19px);
  flex: 0 0 clamp(16px, 2.4cqh, 19px);
  border-radius: 0;
  background: var(--gold);
  filter:
    drop-shadow(0 0 7px rgba(255, 214, 90, 0.34))
    drop-shadow(0 0 13px rgba(255, 214, 90, 0.18));
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.upgrade-cost-value {
  display: block;
  min-width: 0;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.upgrade-cost.is-maxed {
  justify-content: center;
}

.upgrade-cost.is-maxed .energy-icon {
  display: none;
}

.upgrade-cost::before,
.upgrade-cost::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.upgrade-cost::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.upgrade-cost::after {
  inset: var(--stroke);
  background: var(--chamfer-fill);
  box-shadow: inset 0 0 18px var(--tint);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.upgrade-cost:hover:not(:disabled),
.upgrade-cost:focus-visible:not(:disabled) {
  --chamfer-border: var(--accent);
  --chamfer-fill: rgba(13, 23, 39, 0.96);
  filter: drop-shadow(0 0 20px var(--tint));
  outline: none;
}

.upgrade-cost:disabled {
  --chamfer-border: rgba(127, 231, 255, 0.22);
  --chamfer-fill: rgba(5, 15, 26, 0.58);
  color: rgba(232, 248, 255, 0.36);
  cursor: not-allowed;
  filter: none;
  text-shadow: none;
}

.upgrade-cost:disabled .energy-icon {
  opacity: 0.36;
  filter: none;
}

.upgrade-cost:disabled .upgrade-cost-value {
  color: rgba(232, 248, 255, 0.42);
}

/* Fixed-stage scaling handles small displays; keep legacy responsive overrides inactive. */
@media (max-width: 0px) {
  .screen-heading {
    font-size: 58px;
  }

  .result-screen {
    --result-column-gap: clamp(18px, 4cqw, 32px);
    --result-ring-size: 128px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "status"
      "stored"
      "stats"
      "actions";
    align-items: center;
    align-content: center;
  }

  .upgrade-top {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .upgrade-top .screen-heading,
  .energy-bank {
    justify-self: center;
  }

  .result-status .screen-heading {
    font-size: 72px;
  }

  .result-progress-ring {
    font-size: 23px;
    margin-bottom: 10px;
  }

  .upgrade-item {
    grid-template-columns: 58px 1fr auto;
    grid-template-areas:
      "symbol title cost"
      "symbol meter meter"
      "symbol meter meter";
  }

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

@media (max-width: 0px) {
  :root {
    --edge-pad: 14px;
    --screen-pad: 20px;
    --top-button-size: 60px;
    --top-button-gap: 12px;
  }

  .app {
    min-height: 100cqh;
  }

  .hud {
    top: max(var(--edge-pad), env(safe-area-inset-top));
    left: max(var(--edge-pad), env(safe-area-inset-left));
    width: min(300px, calc(100cqw - 28px));
  }

  .hud-panel {
    padding: 10px 12px;
  }

  .hud-energy {
    min-height: 112px;
  }

  .hud-label {
    font-size: 11px;
  }

  .hud-value {
    font-size: 22px;
  }

  .hud-energy .hud-value {
    font-size: 44px;
  }

  .hud-substat {
    margin-top: 11px;
    padding-top: 9px;
    font-size: 11px;
  }

  .hud-substat strong {
    font-size: 20px;
  }

  .time-hud {
    bottom: max(14px, env(safe-area-inset-bottom));
    width: calc(100cqw - 28px);
    min-height: 56px;
    padding: 10px 14px 12px;
  }

  .time-label {
    margin-bottom: 7px;
    font-size: 11px;
  }

  .time-segments {
    gap: 4px;
    height: 14px;
  }

  .reset-gauge {
    top: max(152px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 42px;
    gap: 6px;
    transform: translateX(8px);
  }

  .app[data-screen="playing"] .reset-gauge {
    transform: translateX(0);
  }

  .reset-gauge-track {
    width: 18px;
    height: min(300px, 42cqh);
    min-height: 210px;
  }

  .reset-gauge-value {
    font-size: 14px;
  }

  .screen {
    padding: 20px;
  }

  .settings-button,
  .mission-button,
  .leaderboard-button,
  .daily-bonus-button,
  .platform-home-button,
  .skin-button {
    top: max(var(--edge-pad), env(safe-area-inset-top));
    left: max(var(--edge-pad), env(safe-area-inset-left));
    width: var(--top-button-size);
    height: var(--top-button-size);
  }

  .settings-button {
    left: calc(max(var(--edge-pad), env(safe-area-inset-left)) + var(--top-button-size) + var(--top-button-gap));
  }

  .mission-button {
    left: calc(
      max(var(--edge-pad), env(safe-area-inset-left)) +
        var(--top-button-size) +
        var(--top-button-gap) +
        var(--top-button-size) +
        var(--top-button-gap)
    );
  }

  .leaderboard-button {
    left: calc(
      max(var(--edge-pad), env(safe-area-inset-left)) +
        var(--top-button-size) +
        var(--top-button-gap) +
        var(--top-button-size) +
        var(--top-button-gap) +
        var(--top-button-size) +
        var(--top-button-gap) +
        var(--top-button-size) +
        var(--top-button-gap)
    );
  }

  .daily-bonus-button {
    left: calc(max(var(--edge-pad), env(safe-area-inset-left)) + var(--top-button-size) + var(--top-button-gap));
  }

  .platform-home-button {
    left: max(var(--edge-pad), env(safe-area-inset-left));
  }

  .skin-button {
    left: calc(
      max(var(--edge-pad), env(safe-area-inset-left)) +
        var(--top-button-size) +
        var(--top-button-gap) +
        var(--top-button-size) +
        var(--top-button-gap) +
        var(--top-button-size) +
        var(--top-button-gap)
    );
  }

  .settings-button-icon,
  .mission-button-icon,
  .leaderboard-button-icon,
  .daily-bonus-button-icon,
  .platform-home-button-icon {
    width: 34px;
    height: 34px;
  }

  .skin-preview-canvas {
    width: 46px;
    height: 46px;
  }

  .settings-dialog,
  .mission-dialog,
  .leaderboard-dialog,
  .daily-bonus-dialog,
  .reset-confirm-dialog,
  .skin-dialog {
    padding: 14px;
  }

  .settings-dialog-panel,
  .mission-dialog-panel,
  .leaderboard-dialog-panel,
  .daily-bonus-dialog-panel,
  .reset-confirm-dialog-panel,
  .skin-dialog-panel {
    padding: 18px;
  }

  .settings-dialog-header h2,
  .mission-dialog-header h2,
  .leaderboard-dialog-header h2,
  .daily-bonus-dialog-header h2,
  .reset-confirm-dialog-header h2,
  .skin-dialog-header h2 {
    font-size: 26px;
  }

  .settings-volume-row {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 10px;
  }

  .daily-bonus-prize-icon {
    width: 44px;
    height: 44px;
  }

  .daily-bonus-prize strong {
    font-size: 42px;
  }

  .mission-dialog-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .mission-tabs {
    gap: 8px;
  }

  .mission-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "meta"
      "bar"
      "action";
    min-height: 0;
    padding: 16px;
  }

  .mission-claim-button {
    justify-self: start;
    min-width: 148px;
  }

  .skin-close-button {
    min-width: 150px;
  }

  .skin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .skin-choice {
    min-height: 144px;
    padding: 14px 10px;
  }

  .skin-choice-preview {
    width: 112px;
    height: 104px;
  }

  .result-screen {
    --result-column-gap: 12px;
    --result-row-gap: 9px;
    --result-ring-size: 108px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "status"
      "stored"
      "stats"
      "actions";
    align-items: center;
    align-content: center;
    gap: var(--result-row-gap) var(--result-column-gap);
    padding: 20px;
  }

  .screen-heading {
    font-size: 46px;
  }

  .result-status .screen-heading {
    font-size: 48px;
    max-width: 210px;
  }

  .result-status {
    gap: 7px;
    padding-right: calc(var(--result-ring-size) + 12px);
    padding-bottom: 8px;
  }

  .result-kicker {
    min-height: 24px;
    padding: 0 10px;
    font-size: 11px;
  }

  .result-detail {
    font-size: 11px;
  }

  .result-progress-ring {
    align-self: center;
    justify-self: end;
    font-size: clamp(21px, 3.2cqh, 24px);
    margin-bottom: 8px;
  }

  .result-progress-ring::before {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 0);
  }

  .result-progress-ring::after {
    inset: 12px;
    border-width: 1px;
  }

  .result-progress-ring small {
    font-size: 12px;
  }

  .result-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 7px;
  }

  .result-wallet {
    grid-template-columns: 1fr;
  }

  .stat-card,
  .result-resource,
  .resource-bank {
    min-height: 78px;
  }

  .stat-card {
    min-height: 84px;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon label"
      "icon value";
    align-content: center;
    align-items: center;
    gap: 4px 14px;
    padding: 12px 16px;
  }

  .stat-dot {
    width: 34px;
    height: 34px;
  }

  .stat-card strong {
    justify-self: start;
    font-size: 38px;
  }

  .result-resource {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon label"
      "icon value";
    padding: 12px 16px;
    min-height: 74px;
  }

  .result-resource strong {
    justify-self: start;
    font-size: 34px;
  }

  .result-screen .screen-actions {
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
  }

  .result-screen .primary-button,
  .result-screen .secondary-button {
    min-width: 210px;
    min-height: 50px;
    font-size: 14px;
  }

  .upgrade-item {
    min-height: 118px;
    padding: 14px;
  }

  .upgrade-dot {
    width: 44px;
    height: 44px;
  }
}

@media (max-height: 0px) and (min-width: 781px) {
  :root {
    --edge-pad: 18px;
    --screen-pad: 28px;
    --top-button-size: 64px;
    --top-button-gap: 12px;
    --screen-heading-size: 72px;
    --result-heading-size: 96px;
    --result-stat-size: 62px;
    --upgrade-row-height: 82px;
  }

  .result-screen {
    --result-ring-size: 154px;
    --result-row-gap: 14px;
    --result-column-gap: 38px;
  }

  .result-grid {
    grid-template-rows: repeat(3, minmax(92px, 112px));
  }

  .result-status {
    gap: 10px;
  }

  .result-progress-ring small {
    font-size: 13px;
  }

  .upgrade-screen {
    gap: 16px;
  }

  .upgrade-top {
    gap: 10px;
  }

  .upgrade-list {
    gap: 8px;
    max-width: 940px;
  }

  .upgrade-item {
    grid-template-columns: 58px 1fr 140px;
  }
}

@media (max-height: 0px) and (min-width: 641px) {
  :root {
    --edge-pad: 12px;
    --screen-pad: 16px;
    --top-button-size: 52px;
    --top-button-gap: 9px;
    --screen-heading-size: 54px;
    --result-heading-size: 64px;
    --result-stat-size: 42px;
    --upgrade-row-height: 68px;
  }

  .hud {
    width: min(240px, calc(100cqw - var(--edge-pad) * 2));
  }

  .hud-energy {
    min-height: 92px;
  }

  .time-hud {
    width: min(560px, calc(100cqw - var(--edge-pad) * 2));
    min-height: 46px;
  }

  .reset-gauge {
    top: 46%;
  }

  .reset-gauge-track {
    height: min(220px, 42cqh);
    min-height: min(150px, 40cqh);
  }

  .result-screen {
    --result-ring-size: 120px;
    --result-row-gap: 8px;
    --result-column-gap: 24px;
  }

  .result-status {
    gap: 8px;
    padding-right: calc(var(--result-ring-size) + 12px);
  }

  .result-progress-ring {
    margin-right: 0;
  }

  .result-grid {
    grid-template-rows: repeat(3, minmax(62px, 74px));
    gap: 6px;
  }

  .stat-card {
    grid-template-columns: auto minmax(96px, 0.42fr) minmax(0, 1fr);
    padding: 10px 14px;
  }

  .stat-card .stat-label {
    font-size: 13px;
  }

  .result-wallet {
    max-width: 340px;
  }

  .result-resource,
  .resource-bank {
    min-height: 48px;
    padding: 7px 12px;
  }

  .result-screen .screen-actions {
    margin-top: 4px;
  }

  .result-screen .primary-button,
  .result-screen .secondary-button {
    min-height: 38px;
  }

  .upgrade-list {
    gap: 6px;
    max-width: 880px;
  }

  .upgrade-item {
    grid-template-columns: 48px 1fr 124px;
  }

  .upgrade-cost {
    min-width: 118px;
  }

  .screen {
    overflow-y: auto;
  }

  .result-screen,
  .upgrade-screen {
    padding-top: calc(max(var(--edge-pad), env(safe-area-inset-top)) + var(--top-button-size) + 12px);
  }

  .result-screen {
    align-content: start;
  }

  .upgrade-screen {
    justify-content: flex-start;
  }

  .upgrade-top {
    width: min(520px, 100%);
  }
}

@media (max-width: 0px) {
  .screen {
    overflow-y: auto;
  }

  .result-screen,
  .upgrade-screen {
    padding-top: calc(max(var(--edge-pad), env(safe-area-inset-top)) + var(--top-button-size) + 88px);
  }

  .result-screen {
    align-content: start;
  }

  .upgrade-screen {
    justify-content: flex-start;
  }

  .credits-hud {
    top: calc(max(var(--edge-pad), env(safe-area-inset-top)) + var(--top-button-size) + 10px);
    right: auto;
    left: max(var(--edge-pad), env(safe-area-inset-left));
    width: calc(100cqw - var(--edge-pad) * 2);
    min-width: 0;
  }

  .upgrade-top {
    width: 100%;
  }

  .upgrade-item {
    min-height: 116px;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "symbol title"
      "symbol cost"
      "meter meter";
    gap: 7px 12px;
  }

  .upgrade-title {
    flex-wrap: nowrap;
  }

  .upgrade-level {
    white-space: nowrap;
  }

  .upgrade-cost {
    justify-self: start;
    width: min(160px, 100%);
    min-width: 142px;
  }
}
.ad-icon-button,
.upgrade-ad-button,
.result-energy-ad-button,
.daily-bonus-ad-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--mint);
  cursor: pointer;
}

.ad-icon-button { grid-area: ad; width: 52px; height: 52px; padding: 8px; margin: 0; border: 0; background: transparent; color: var(--accent); }
.ad-icon-button img { display: none; }
.ad-icon-button::before {
  width: 30px;
  height: 30px;
  content: "";
  background: currentColor;
  -webkit-mask: url("assets/ui/add.svg") center / contain no-repeat;
  mask: url("assets/ui/add.svg") center / contain no-repeat;
}
.ad-icon-button:hover, .ad-icon-button:focus-visible { color: var(--ink); filter: drop-shadow(0 0 10px currentColor); }
.ad-icon-button:disabled { opacity: 0.38; filter: none; cursor: default; }
.credits-hud { grid-template-columns: auto 1fr auto; grid-template-areas: "icon label ad" "icon value ad"; padding-right: 8px; }
.app[data-screen="result"] .credits-hud,
.app[data-screen="upgrade"] .credits-hud,
.app[data-screen="home"][data-platform-ready="true"] .credits-hud { pointer-events: auto; }

/* Game collection home */
.app[data-screen="home"] #platform-home-screen {
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease;
}

.app[data-screen="home"][data-platform-ready="true"] #platform-home-screen {
  opacity: 1;
  visibility: visible;
}

.platform-enter-fade {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.platform-enter-fade[data-phase] {
  visibility: visible;
  pointer-events: auto;
}

.platform-enter-fade[data-phase="covering"],
.platform-enter-fade[data-phase="covered"] {
  opacity: 1;
}

.platform-enter-fade[data-phase="preparing"],
.platform-enter-fade[data-phase="revealing"] {
  opacity: 0;
}

.app:has(.platform-enter-fade[data-phase]) .menu-banner {
  z-index: 91;
}

.platform-home-button {
  --button-accent: var(--cyan);
  left: max(var(--edge-pad), env(safe-area-inset-left));
}

.app[data-screen="home"] .settings-button {
  left: max(var(--edge-pad), env(safe-area-inset-left));
}

/* Full-screen game showcase */
.platform-home-screen {
  --platform-accent: var(--cyan);
  --platform-accent-rgb: 127, 231, 255;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--platform-accent-rgb), 0.12), transparent 34%),
    #02070e;
  text-align: center;
}

.platform-home-screen::before,
.platform-home-screen::after {
  content: none;
}

.platform-home-screen[data-selected-game="arena"],
.platform-carousel-hit[data-target-game="arena"] {
  --platform-accent: var(--danger);
  --platform-accent-rgb: 255, 107, 138;
}

.platform-preview-canvas,
.platform-preview-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.platform-preview-canvas {
  z-index: 0;
  display: block;
  opacity: 0.95;
}

.platform-preview-overlay {
  z-index: 1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2, 8, 15, 0.82) 0 18%, rgba(2, 8, 15, 0.14) 39%, rgba(2, 8, 15, 0.2) 59%, rgba(2, 8, 15, 0.92) 100%),
    linear-gradient(90deg, rgba(2, 7, 13, 0.68), transparent 22% 78%, rgba(2, 7, 13, 0.68)),
    radial-gradient(ellipse at 50% 48%, transparent 0 34%, rgba(2, 7, 13, 0.2) 58%, rgba(2, 7, 13, 0.76) 100%),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(var(--platform-accent-rgb), 0.018) 6px 7px);
  box-shadow: inset 0 0 220px rgba(0, 0, 0, 0.64);
}

.platform-preview-overlay::after {
  position: absolute;
  inset: -10%;
  background: linear-gradient(90deg, transparent 25%, rgba(var(--platform-accent-rgb), 0.16), transparent 75%);
  content: "";
  opacity: 0;
  transform: translateX(-100%);
}

.platform-home-brand {
  position: absolute;
  top: calc(max(var(--edge-pad), env(safe-area-inset-top)) + 114px);
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  color: var(--ink);
  pointer-events: none;
  transform: translateX(-50%);
  text-shadow: 0 0 24px rgba(var(--platform-accent-rgb), 0.28);
}

.platform-home-brand strong {
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: 0.22em;
  line-height: 1;
}

.platform-carousel-hit {
  --platform-accent: var(--cyan);
  --platform-accent-rgb: 127, 231, 255;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  width: calc(50% - 310px);
  align-items: center;
  gap: 20px;
  padding: 124px 56px 0;
  border: 0;
  background: transparent;
  color: rgba(232, 248, 255, 0.5);
  cursor: pointer;
  opacity: 0.86;
  transition: color 160ms ease, opacity 160ms ease, background 160ms ease;
}

.platform-carousel-hit-previous {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(90deg, rgba(2, 7, 13, 0.5), transparent);
}

.platform-carousel-hit-next {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(270deg, rgba(2, 7, 13, 0.5), transparent);
}

.platform-carousel-hit:hover,
.platform-carousel-hit:focus-visible {
  color: var(--platform-accent);
  opacity: 1;
  outline: none;
}

.platform-carousel-hit-previous:hover,
.platform-carousel-hit-previous:focus-visible {
  background: linear-gradient(90deg, rgba(var(--platform-accent-rgb), 0.13), transparent);
}

.platform-carousel-hit-next:hover,
.platform-carousel-hit-next:focus-visible {
  background: linear-gradient(270deg, rgba(var(--platform-accent-rgb), 0.13), transparent);
}

.platform-carousel-hit:disabled {
  cursor: default;
  opacity: 0;
  pointer-events: none;
}

.platform-carousel-chevron {
  width: 38px;
  height: 38px;
  border-left: 5px solid currentColor;
  border-bottom: 5px solid currentColor;
  filter: drop-shadow(0 0 12px currentColor);
  transition: transform 160ms ease;
}

.platform-carousel-hit-previous .platform-carousel-chevron {
  transform: rotate(45deg);
}

.platform-carousel-hit-next .platform-carousel-chevron {
  transform: rotate(225deg);
}

.platform-carousel-hit-previous:hover .platform-carousel-chevron,
.platform-carousel-hit-previous:focus-visible .platform-carousel-chevron {
  transform: translateX(-8px) rotate(45deg);
}

.platform-carousel-hit-next:hover .platform-carousel-chevron,
.platform-carousel-hit-next:focus-visible .platform-carousel-chevron {
  transform: translateX(8px) rotate(225deg);
}

.platform-carousel-label {
  max-width: min(220px, 24vw);
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  line-height: 1.12;
  text-wrap: balance;
}

.platform-carousel-hit-previous .platform-carousel-label {
  text-align: left;
}

.platform-carousel-hit-next .platform-carousel-label {
  text-align: right;
}

.platform-showcase-copy {
  position: absolute;
  bottom: 88px;
  left: 50%;
  z-index: 4;
  display: grid;
  width: min(1280px, calc(100% - 660px));
  justify-items: center;
  gap: 12px;
  pointer-events: none;
  transform: translateX(-50%);
  text-align: center;
}

.platform-showcase-mode {
  color: var(--platform-accent);
  font-size: clamp(34px, 2vw, 38px);
  font-weight: 1000;
  letter-spacing: 0.18em;
  line-height: 1;
  text-shadow: 0 0 16px rgba(var(--platform-accent-rgb), 0.48);
}

.platform-showcase-title {
  margin: 0;
  color: #fff;
  font-size: 112px;
  font-weight: 1000;
  letter-spacing: -0.055em;
  line-height: 0.88;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.32),
    0 0 36px rgba(var(--platform-accent-rgb), 0.32);
  white-space: nowrap;
}

.platform-game-enter {
  --cut: 21px;
  --chamfer-border: var(--platform-accent);
  --chamfer-fill: linear-gradient(105deg, rgba(5, 34, 54, 0.98), rgba(var(--platform-accent-rgb), 0.42));
  display: grid;
  width: 430px;
  min-height: 88px;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 0 26px;
  color: #fff;
  filter: drop-shadow(0 0 28px rgba(var(--platform-accent-rgb), 0.3));
  pointer-events: auto;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  transition: filter 160ms ease, transform 160ms ease;
}

.platform-game-enter strong {
  font-size: 31px;
  font-weight: 1000;
  letter-spacing: 0.2em;
}

.platform-game-enter:hover,
.platform-game-enter:focus-visible {
  --chamfer-border: #fff;
  filter: drop-shadow(0 0 38px rgba(var(--platform-accent-rgb), 0.48));
  transform: translateY(-3px);
}

.platform-game-enter:active {
  transform: translateY(1px);
}

.platform-game-enter:disabled {
  opacity: 0.46;
  filter: none;
  cursor: wait;
  transform: none;
}

.platform-game-enter-signal {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  justify-self: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(var(--platform-accent-rgb), 0.55);
}

.platform-game-enter-signal::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  content: "";
  transform: translate(-35%, -50%);
}

.platform-game-enter-chevrons {
  display: flex;
  justify-self: end;
  gap: 0;
}

.platform-game-enter-chevrons span {
  display: block;
  width: 15px;
  height: 15px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

.platform-game-position {
  position: absolute;
  right: 50px;
  bottom: 34px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(232, 248, 255, 0.58);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.platform-game-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.platform-game-dot {
  width: 28px;
  height: 5px;
  padding: 0;
  border: 0;
  background: rgba(232, 248, 255, 0.3);
  cursor: pointer;
  transition: width 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.platform-game-dot[aria-pressed="true"] {
  width: 58px;
  background: var(--platform-accent);
  box-shadow: 0 0 13px rgba(var(--platform-accent-rgb), 0.72);
}

.platform-game-dot:hover,
.platform-game-dot:focus-visible {
  background: var(--ink);
  outline: none;
}

.platform-game-dot:disabled {
  cursor: wait;
  opacity: 0.42;
}

.app[aria-busy="true"] .platform-carousel-hit,
.app[aria-busy="true"] .platform-game-enter,
.app[aria-busy="true"] .platform-game-dot {
  pointer-events: none;
}

.platform-home-screen[data-carousel-direction="right"] .platform-showcase-copy {
  animation: platform-showcase-right-in 380ms cubic-bezier(0, 0, 0.2, 1) both;
}

.platform-home-screen[data-carousel-direction="left"] .platform-showcase-copy {
  animation: platform-showcase-left-in 380ms cubic-bezier(0, 0, 0.2, 1) both;
}

.platform-home-screen[data-carousel-direction="right"] .platform-preview-overlay::after {
  animation: platform-preview-right-wipe 360ms ease-out both;
}

.platform-home-screen[data-carousel-direction="left"] .platform-preview-overlay::after {
  animation: platform-preview-left-wipe 360ms ease-out both;
}

@keyframes platform-showcase-right-in {
  from { opacity: 0; transform: translateX(calc(-50% + 64px)); }
  to { opacity: 1; transform: translateX(-50%); }
}

@keyframes platform-showcase-left-in {
  from { opacity: 0; transform: translateX(calc(-50% - 64px)); }
  to { opacity: 1; transform: translateX(-50%); }
}

@keyframes platform-preview-right-wipe {
  0% { opacity: 0; transform: translateX(-100%); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

@keyframes platform-preview-left-wipe {
  0% { opacity: 0; transform: translateX(100%); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .platform-enter-fade {
    transition-duration: 1ms;
  }

  .virtual-stick {
    transition: none;
  }

  .platform-home-screen[data-carousel-direction] .platform-showcase-copy,
  .platform-home-screen[data-carousel-direction] .platform-preview-overlay::after {
    animation-duration: 1ms;
  }
}

/* Battle arena */
.app[data-screen="battle-arena-menu"] #battle-arena-menu-screen,
.app[data-screen="battle-arena-match"] #battle-arena-match-screen {
  display: flex;
}

.app[data-mode-transition] .screen,
.app[data-mode-transition] .arena-how-to-dialog,
.app[data-mode-transition] .credits-hud,
.app[data-mode-transition] .settings-button,
.app[data-mode-transition] .mission-button,
.app[data-mode-transition] .daily-bonus-button,
.app[data-mode-transition] .platform-home-button,
.app[data-mode-transition] .skin-button,
.app[data-mode-transition] .leaderboard-button {
  pointer-events: none;
}

.app[data-mode-transition="right-out"] .screen {
  animation: mode-flow-right-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.app[data-mode-transition="right-in"] .screen {
  animation: mode-flow-right-in 280ms cubic-bezier(0, 0, 0.2, 1) both;
}

.app[data-mode-transition="left-out"] .screen {
  animation: mode-flow-left-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.app[data-mode-transition="left-in"] .screen {
  animation: mode-flow-left-in 280ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes mode-flow-right-out {
  to { opacity: 0; transform: translateX(150px); }
}

@keyframes mode-flow-right-in {
  from { opacity: 0; transform: translateX(-150px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mode-flow-left-out {
  to { opacity: 0; transform: translateX(-150px); }
}

@keyframes mode-flow-left-in {
  from { opacity: 0; transform: translateX(150px); }
  to { opacity: 1; transform: translateX(0); }
}

.app[data-screen="battle-arena-menu"] .credits-hud {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.app[data-screen="battle-arena-menu"] .settings-button,
.app[data-screen="battle-arena-menu"] .mission-button,
.app[data-screen="battle-arena-menu"] .leaderboard-button,
.app[data-screen="battle-arena-menu"] .platform-home-button,
.app[data-screen="battle-arena-menu"] .skin-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.app[data-screen="battle-arena-menu"] .game-canvas,
.app[data-screen="battle-arena-match"] .game-canvas {
  visibility: hidden;
}

.battle-arena-menu-screen {
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #02070e;
}

.battle-arena-demo-canvas,
.battle-arena-demo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.battle-arena-demo-canvas {
  z-index: 0;
  display: block;
  opacity: 0.78;
}

.battle-arena-demo-overlay {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2, 8, 15, 0.7) 0 20%, rgba(2, 8, 15, 0.16) 43%, rgba(2, 8, 15, 0.34) 68%, rgba(2, 8, 15, 0.9) 100%),
    radial-gradient(ellipse at 50% 48%, transparent 0 30%, rgba(2, 7, 13, 0.18) 54%, rgba(2, 7, 13, 0.78) 100%),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(127, 231, 255, 0.014) 6px 7px);
  box-shadow: inset 0 0 190px rgba(0, 0, 0, 0.58);
}

.battle-arena-menu-header {
  position: absolute;
  top: calc(max(var(--edge-pad), env(safe-area-inset-top)) + 118px);
  left: 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  text-align: center;
}

.battle-arena-menu-header .screen-heading {
  font-size: 88px;
  line-height: 0.9;
  white-space: nowrap;
}

.battle-arena-menu-kicker {
  display: block;
  padding: 0;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-shadow: 0 0 14px rgba(127, 231, 255, 0.34);
}

.battle-arena-match-cta {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 18px;
  transform: translate(-50%, -50%);
}

.battle-arena-find-button {
  --cut: 22px;
  --chamfer-border: #7fe7ff;
  --chamfer-fill: linear-gradient(105deg, rgba(7, 43, 66, 0.98), rgba(7, 105, 105, 0.98));
  display: grid;
  min-width: 500px;
  min-height: 104px;
  grid-template-columns: 62px minmax(260px, 1fr) 62px;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.32), 0 0 18px rgba(255, 255, 255, 0.18);
  filter: drop-shadow(0 0 26px rgba(36, 214, 255, 0.24));
  transition: filter 160ms ease, transform 160ms ease;
}

.battle-arena-find-button:hover,
.battle-arena-find-button:focus-visible {
  --chamfer-border: #d5f9ff;
  --chamfer-fill: linear-gradient(105deg, rgba(8, 65, 91, 0.99), rgba(8, 137, 119, 0.99));
  color: #fff;
  filter: drop-shadow(0 0 36px rgba(36, 214, 255, 0.4));
  transform: translateY(-2px);
}

.battle-arena-find-button:active {
  transform: translateY(1px);
}

.battle-arena-find-button[data-state="matching"],
.battle-arena-find-button.is-matching {
  --chamfer-border: #ffd65a;
  --chamfer-fill: linear-gradient(105deg, rgba(58, 40, 7, 0.98), rgba(100, 68, 7, 0.98));
  filter: drop-shadow(0 0 28px rgba(255, 214, 90, 0.24));
}

.battle-arena-find-label {
  min-width: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: 0.055em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.battle-arena-find-signal {
  position: relative;
  width: 52px;
  height: 52px;
  justify-self: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--cyan);
  box-shadow: 0 0 15px rgba(127, 231, 255, 0.34), inset 0 0 12px rgba(127, 231, 255, 0.16);
}

.battle-arena-find-signal::before {
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.62;
}

.battle-arena-find-signal::after {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 22px;
  content: "";
  background: linear-gradient(currentColor, transparent);
  box-shadow: 0 0 8px currentColor;
  transform: translateX(-50%);
  transform-origin: 50% 22px;
  animation: battle-arena-radar-sweep 1.8s linear infinite;
}

.battle-arena-find-button[data-state="matching"] .battle-arena-find-signal,
.battle-arena-find-button.is-matching .battle-arena-find-signal {
  color: var(--gold);
}

.battle-arena-find-chevrons {
  display: flex;
  justify-self: center;
  gap: 3px;
  color: var(--cyan);
  filter: drop-shadow(0 0 8px currentColor);
}

.battle-arena-find-chevrons span {
  display: block;
  width: 17px;
  height: 17px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

.battle-arena-find-button[data-state="matching"] .battle-arena-find-chevrons,
.battle-arena-find-button.is-matching .battle-arena-find-chevrons {
  color: var(--gold);
}

@keyframes battle-arena-radar-sweep {
  to { transform: translateX(-50%) rotate(360deg); }
}

.battle-arena-loadout-panel {
  position: absolute;
  bottom: max(34px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 3;
  width: min(1470px, calc(100% - 660px));
  transform: translateX(-50%);
}

.battle-arena-loadout-summary {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  margin-bottom: 2px;
}

.battle-arena-loadout-summary > span {
  color: var(--muted);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.battle-arena-loadout-summary > strong {
  color: var(--cyan);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.battle-arena-stat-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.battle-arena-stat-list > .battle-arena-stat-row.upgrade-item {
  --accent: rgb(var(--battle-arena-stat-accent-rgb));
  --tint: rgba(var(--battle-arena-stat-accent-rgb), 0.1);
  --chamfer-border: rgba(var(--battle-arena-stat-accent-rgb), 0.72);
  --chamfer-fill: var(--bg-panel);
  display: grid;
  grid-template-columns: 58px minmax(94px, 1fr) 52px 58px 52px;
  grid-template-areas: "symbol copy minus value plus";
  align-items: center;
  gap: 12px;
  min-height: 122px;
  max-height: 122px;
  padding: 18px 20px;
}

.battle-arena-stat-row[data-battle-arena-stat="speed"] { --battle-arena-stat-accent-rgb: 127, 231, 255; }
.battle-arena-stat-row[data-battle-arena-stat="magnet"] { --battle-arena-stat-accent-rgb: 255, 214, 90; }
.battle-arena-stat-row[data-battle-arena-stat="power"] { --battle-arena-stat-accent-rgb: 255, 107, 138; }

.upgrade-dot-power {
  --accent: var(--danger);
  --icon-url: url("assets/ui/power.svg");
}

.battle-arena-stat-icon {
  width: 52px;
  height: 52px;
  grid-area: symbol;
}

.battle-arena-stat-copy {
  grid-area: copy;
  display: grid;
  min-width: 0;
}

.battle-arena-stat-copy strong {
  color: var(--accent);
  font-size: 21px;
  letter-spacing: 0.04em;
}

.battle-arena-stat-copy small {
  margin-top: 5px;
  color: rgba(232, 248, 255, 0.62);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

#battle-arena-power-effect {
  font-size: 18px;
}

.battle-arena-stat-step {
  --chamfer-border: var(--accent);
  --chamfer-fill: rgba(4, 14, 24, 0.96);
  --cut: 10px;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  color: var(--accent);
  font-size: 26px;
  font-weight: 900;
  filter: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.battle-arena-stat-step[data-battle-arena-step="-1"] { grid-area: minus; }
.battle-arena-stat-step[data-battle-arena-step="1"] { grid-area: plus; }

.battle-arena-stat-step:hover,
.battle-arena-stat-step:focus-visible {
  --chamfer-border: var(--ink);
  --chamfer-fill: color-mix(in srgb, var(--accent) 42%, #07121f);
  color: #fff;
}

.battle-arena-stat-step:disabled {
  --chamfer-border: rgba(120, 146, 170, 0.2);
  --chamfer-fill: rgba(8, 16, 28, 0.58);
  color: rgba(120, 146, 170, 0.3);
  cursor: not-allowed;
  filter: none;
}

.arena-skill-card .skill-buy-button:disabled,
.arena-skill-card .skill-toggle-button:disabled {
  --chamfer-border: color-mix(in srgb, var(--accent) 22%, transparent);
}

.battle-arena-stat-value {
  grid-area: value;
  color: var(--ink);
  font-size: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.battle-arena-reset-points-button {
  --chamfer-border: #ff91a8;
  --chamfer-fill: rgba(31, 10, 18, 0.86);
  display: block;
  min-width: 190px;
  min-height: 54px;
  margin: 14px auto 0;
  color: #ffdbe4;
  font-size: 16px;
}

.battle-arena-result-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.battle-arena-result-actions > button {
  min-width: 0;
  min-height: 62px;
  padding-inline: 18px;
}

.battle-arena-result-actions > button[hidden] {
  display: none;
}

.battle-arena-claim-button {
  --chamfer-border: var(--mint);
  --chamfer-fill: rgba(13, 104, 78, 0.94);
  color: #fff;
}

.battle-arena-claim-double-button {
  --chamfer-border: var(--gold);
  --chamfer-fill: rgba(92, 65, 10, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff4c2;
}

.battle-arena-claim-double-button img {
  width: 22px;
  height: 22px;
}

.battle-arena-claim-button:hover,
.battle-arena-claim-button:focus-visible {
  --chamfer-border: #d8fff2;
  --chamfer-fill: rgba(21, 137, 101, 0.98);
  color: #fff;
}

.battle-arena-claim-double-button:hover,
.battle-arena-claim-double-button:focus-visible {
  --chamfer-border: #fff0a9;
  --chamfer-fill: rgba(137, 95, 12, 0.98);
  color: #fff;
}

.battle-arena-claim-button:disabled,
.battle-arena-claim-double-button:disabled {
  opacity: 0.42;
  filter: none;
  cursor: default;
}

.battle-arena-menu-status {
  min-height: 26px;
  margin: 0;
  color: var(--cyan);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-shadow: 0 0 14px rgba(127, 231, 255, 0.24);
}

.battle-arena-menu-status[data-state="matching"],
.battle-arena-menu-status[data-state="waiting"] {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255, 214, 90, 0.24);
}

.battle-arena-menu-status[data-state="ready"] {
  color: var(--mint);
  text-shadow: 0 0 14px rgba(93, 240, 195, 0.24);
}

.battle-arena-menu-status[data-state="error"] {
  color: var(--danger);
  text-shadow: 0 0 14px rgba(255, 107, 138, 0.24);
}

.battle-arena-match-screen {
  z-index: 40;
  padding: 0;
  overflow: hidden;
  background: #02060b;
}

.battle-arena-game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.battle-arena-match-hud {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 190px);
  gap: 12px;
  transform: translateX(-50%);
  pointer-events: none;
}

.battle-arena-skill-button {
  --skill-accent: var(--cyan);
  --skill-button-size: 260px;
  position: absolute;
  right: calc(var(--play-control-inset-x) + var(--play-control-safe-right, 0px));
  bottom: calc(var(--play-control-inset-y) + var(--play-control-safe-bottom, 0px));
  z-index: 6;
  display: grid;
  width: var(--skill-button-size);
  height: var(--skill-button-size);
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 26px;
  border: 3px solid var(--skill-accent);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 231, 255, 0.18), rgba(3, 12, 22, 0.94) 68%);
  color: #fff;
  box-shadow: 0 0 28px color-mix(in srgb, var(--skill-accent) 35%, transparent), inset 0 0 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  touch-action: none;
}

.battle-arena-skill-button[hidden] { display: none; }
.battle-arena-skill-button[data-skill="guard"] { --skill-accent: var(--gold); }
.battle-arena-skill-button[data-skill="hide"] { --skill-accent: #b694ff; }
.battle-arena-skill-button[data-skill="status-up"] { --skill-accent: var(--mint); }
.battle-arena-skill-button:disabled { cursor: default; filter: grayscale(0.45); opacity: 0.62; }
.battle-arena-skill-button.is-active { animation: battle-arena-skill-active 520ms ease-in-out infinite alternate; }
.battle-arena-skill-icon { width: 76px; height: 64px; background: var(--skill-accent); -webkit-mask: var(--skill-icon) center / contain no-repeat; mask: var(--skill-icon) center / contain no-repeat; }
.battle-arena-skill-button[data-skill="boost"] .battle-arena-skill-icon { --skill-icon: url("assets/ui/boost.svg"); }
.battle-arena-skill-button[data-skill="guard"] .battle-arena-skill-icon { --skill-icon: url("assets/ui/guard.svg"); }
.battle-arena-skill-button[data-skill="hide"] .battle-arena-skill-icon { --skill-icon: url("assets/ui/hide.svg"); }
.battle-arena-skill-button[data-skill="status-up"] .battle-arena-skill-icon { --skill-icon: url("assets/ui/status-up.svg"); }
.battle-arena-skill-label { color: var(--skill-accent); font-size: 28px; font-weight: 1000; line-height: 1; }
.battle-arena-skill-cooldown { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.battle-arena-skill-reduction {
  position: absolute;
  top: -34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 8px;
  background: #071421;
  color: var(--mint);
  font: 900 20px Inter, sans-serif;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.battle-arena-skill-reduction[hidden] { display: none; }
.battle-arena-skill-reduction::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  mask: url("assets/ui/shards.svg") center / contain no-repeat;
}
.battle-arena-skill-button kbd { color: rgba(232, 248, 255, 0.58); font: 900 18px Inter, sans-serif; }

@media (pointer: coarse) {
  .battle-arena-skill-button { --skill-button-size: 320px; }
}

@keyframes battle-arena-skill-active { to { transform: scale(1.055); box-shadow: 0 0 44px var(--skill-accent); } }

.battle-arena-match-stat,
.battle-arena-matchmaking-panel,
.battle-arena-eliminated-panel,
.battle-arena-result-grid > div {
  --cut: var(--cut-panel);
  --inner-cut: calc(var(--cut) - var(--stroke));
  --chamfer-border: rgba(127, 231, 255, 0.62);
  --chamfer-fill: rgba(4, 13, 24, 0.92);
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
}

.battle-arena-match-stat::before,
.battle-arena-match-stat::after,
.battle-arena-matchmaking-panel::before,
.battle-arena-matchmaking-panel::after,
.battle-arena-eliminated-panel::before,
.battle-arena-eliminated-panel::after,
.battle-arena-result-grid > div::before,
.battle-arena-result-grid > div::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.battle-arena-match-stat::before,
.battle-arena-matchmaking-panel::before,
.battle-arena-eliminated-panel::before,
.battle-arena-result-grid > div::before {
  inset: 0;
  background: var(--chamfer-border);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.battle-arena-match-stat::after,
.battle-arena-matchmaking-panel::after,
.battle-arena-eliminated-panel::after,
.battle-arena-result-grid > div::after {
  inset: var(--stroke);
  background: linear-gradient(180deg, rgba(127, 231, 255, 0.08), transparent 58%), var(--chamfer-fill);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.24);
  clip-path: polygon(
    var(--inner-cut) 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% calc(100% - var(--inner-cut)),
    calc(100% - var(--inner-cut)) 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut)),
    0 var(--inner-cut)
  );
}

.battle-arena-match-stat {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 70px;
  align-content: center;
}

.battle-arena-match-stat span,
.battle-arena-result-grid span {
  color: var(--muted);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0.15em;
}

.battle-arena-match-stat strong {
  color: var(--cyan);
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.battle-arena-match-time-stat strong {
  color: var(--gold);
}

.battle-arena-match-time-stat.is-warning {
  --chamfer-border: rgba(255, 107, 138, 0.82);
}

.battle-arena-match-time-stat.is-warning strong,
.battle-arena-match-time-stat.is-expired strong {
  color: var(--danger);
}

.battle-arena-rank-panel {
  --rank-cut: 14px;
  --rank-inner-cut: calc(var(--rank-cut) - var(--stroke));
  position: absolute;
  top: 118px;
  right: 24px;
  z-index: 4;
  isolation: isolate;
  width: 330px;
  padding: 18px 16px 16px;
  pointer-events: none;
}

.battle-arena-rank-panel[hidden] {
  display: none;
}

.battle-arena-rank-panel::before,
.battle-arena-rank-panel::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.battle-arena-rank-panel::before {
  inset: 0;
  background: rgba(127, 231, 255, 0.56);
  clip-path: polygon(
    var(--rank-cut) 0,
    calc(100% - var(--rank-cut)) 0,
    100% var(--rank-cut),
    100% calc(100% - var(--rank-cut)),
    calc(100% - var(--rank-cut)) 100%,
    var(--rank-cut) 100%,
    0 calc(100% - var(--rank-cut)),
    0 var(--rank-cut)
  );
}

.battle-arena-rank-panel::after {
  inset: var(--stroke);
  background: linear-gradient(180deg, rgba(127, 231, 255, 0.09), transparent 38%), rgba(3, 12, 22, 0.9);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.34);
  clip-path: polygon(
    var(--rank-inner-cut) 0,
    calc(100% - var(--rank-inner-cut)) 0,
    100% var(--rank-inner-cut),
    100% calc(100% - var(--rank-inner-cut)),
    calc(100% - var(--rank-inner-cut)) 100%,
    var(--rank-inner-cut) 100%,
    0 calc(100% - var(--rank-inner-cut)),
    0 var(--rank-inner-cut)
  );
}

.battle-arena-rank-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 7px 12px;
  border-bottom: 1px solid rgba(127, 231, 255, 0.2);
}

.battle-arena-rank-heading span {
  color: rgba(232, 248, 255, 0.66);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0.15em;
}

.battle-arena-rank-heading strong {
  color: var(--cyan);
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}

.battle-arena-rank-list {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.battle-arena-rank-row {
  display: grid;
  min-height: 42px;
  grid-template-columns: 42px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border-left: 2px solid transparent;
  background: rgba(127, 231, 255, 0.045);
  color: rgba(232, 248, 255, 0.78);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.battle-arena-rank-row.is-local {
  border-left-color: var(--cyan);
  background: linear-gradient(90deg, rgba(127, 231, 255, 0.2), rgba(127, 231, 255, 0.06));
  color: var(--ink);
  box-shadow: inset 0 0 14px rgba(127, 231, 255, 0.08);
}

.battle-arena-rank-row.is-eliminated {
  color: rgba(154, 174, 194, 0.38);
  background: rgba(35, 44, 56, 0.18);
}

.battle-arena-rank-row.is-eliminated.is-local {
  border-left-color: rgba(127, 231, 255, 0.46);
  color: rgba(205, 226, 238, 0.56);
}

.battle-arena-rank-number {
  color: currentColor;
  font-weight: 900;
  text-align: center;
}

.battle-arena-rank-name {
  color: var(--podium-color, currentColor);
  min-width: 0;
  overflow: hidden;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-arena-rank-row .battle-arena-rank-number { color: var(--podium-color, currentColor); }

.battle-arena-rank-shards {
  color: var(--gold);
  font-weight: 950;
  text-align: right;
}

.battle-arena-rank-row.is-eliminated .battle-arena-rank-shards {
  color: currentColor;
}

@media (max-width: 1100px) {
  .battle-arena-match-hud {
    grid-template-columns: repeat(3, 150px);
  }

  .battle-arena-rank-panel {
    right: 16px;
    width: 280px;
  }
}

@media (max-width: 700px) {
  .battle-arena-match-hud {
    top: 12px;
    width: calc(100% - 24px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .battle-arena-match-stat {
    min-height: 76px;
  }

  .battle-arena-match-stat span,
  .battle-arena-result-grid span {
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .battle-arena-rank-panel {
    top: 100px;
    right: 12px;
    width: min(340px, calc(100% - 24px));
  }

  .battle-arena-rank-heading span {
    font-size: 16px;
  }

  .battle-arena-rank-heading strong {
    font-size: 29px;
  }

  .battle-arena-rank-row {
    min-height: 39px;
    font-size: 16px;
  }

  .battle-arena-loadout-summary > span {
    font-size: 19px;
  }

  #battle-arena-power-effect {
    font-size: 17px;
  }
}

.battle-arena-matchmaking-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  width: min(760px, calc(100% - 48px));
  justify-items: center;
  gap: 18px;
  padding: 42px;
  transform: translate(-50%, -50%);
  text-align: center;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.46));
}

.battle-arena-matchmaking-panel[hidden],
.battle-arena-eliminated-panel[hidden] {
  display: none;
}

.battle-arena-matchmaking-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: 54px;
  line-height: 0.95;
  text-shadow: 0 0 24px rgba(127, 231, 255, 0.34);
}

.battle-arena-matchmaking-panel p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  letter-spacing: 0.12em;
}

.battle-arena-eliminated-panel {
  --placement-accent: var(--cyan);
  --cut: 26px;
  --chamfer-border: color-mix(in srgb, var(--placement-accent) 76%, transparent);
  position: absolute;
  top: 50%;
  left: max(96px, env(safe-area-inset-left));
  z-index: 5;
  display: grid;
  justify-items: stretch;
  gap: 22px;
  width: min(920px, calc(100% - 192px));
  padding: 48px 52px 44px;
  transform: translateY(-50%);
  text-align: left;
  filter: drop-shadow(0 26px 54px rgba(0, 0, 0, .58));
}

.battle-arena-eliminated-panel[data-placement="1"] { --placement-accent: var(--gold); }
.battle-arena-eliminated-panel[data-placement="2"] { --placement-accent: #d4e2f1; }
.battle-arena-eliminated-panel[data-placement="3"] { --placement-accent: #efad7d; }

.battle-arena-eliminated-panel::after {
  background:
    radial-gradient(ellipse at 12% 6%, color-mix(in srgb, var(--placement-accent) 15%, transparent), transparent 48%),
    repeating-linear-gradient(118deg, transparent 0 34px, rgba(127, 231, 255, .035) 35px 36px),
    linear-gradient(115deg, rgba(5, 18, 31, .90), rgba(4, 15, 27, .78) 74%, rgba(4, 15, 27, .70));
}

.battle-arena-eliminated-panel .battle-arena-menu-kicker {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  color: var(--placement-accent);
  font-size: 24px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--placement-accent) 46%, transparent);
}

.battle-arena-eliminated-panel .battle-arena-menu-kicker::before {
  width: 28px;
  height: 15px;
  background: currentColor;
  clip-path: polygon(0 0, 68% 0, 100% 50%, 68% 100%, 0 100%, 20% 50%);
  content: "";
}

.battle-arena-eliminated-panel h2 {
  margin: 0 0 8px;
  color: var(--placement-accent);
  font-size: clamp(90px, 8.9cqh, 112px);
  font-weight: 950;
  line-height: .92;
  letter-spacing: -.035em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px color-mix(in srgb, var(--placement-accent) 42%, transparent), 0 0 52px color-mix(in srgb, var(--placement-accent) 18%, transparent);
}

.battle-arena-result-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(186px, auto) minmax(132px, auto);
  gap: 14px;
}

.battle-arena-result-grid > div {
  --card-accent: var(--cyan);
  --card-tint: rgba(127, 231, 255, .12);
  --chamfer-border: color-mix(in srgb, var(--card-accent) 68%, transparent);
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 20px 26px;
  overflow: hidden;
}

.battle-arena-result-grid > div::after {
  background:
    linear-gradient(125deg, var(--card-tint), transparent 54%),
    repeating-linear-gradient(118deg, transparent 0 28px, rgba(232, 248, 255, .035) 29px 30px),
    rgba(5, 17, 29, .78);
}

.battle-arena-result-grid .battle-arena-result-score {
  grid-column: 1 / -1;
  align-content: center;
  justify-items: start;
  padding: 24px 34px;
}

.battle-arena-result-grid span {
  color: var(--card-accent);
  font-size: 23px;
  letter-spacing: .12em;
}

.battle-arena-result-grid strong {
  min-width: 0;
  color: var(--card-accent);
  font-size: 52px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.battle-arena-result-score strong {
  color: var(--cyan);
  font-size: clamp(64px, 7cqh, 90px);
  letter-spacing: -.045em;
  text-shadow: 0 0 26px rgba(127, 231, 255, .24);
}

.battle-arena-result-grid > .battle-arena-result-shards { --card-accent: var(--mint); --card-tint: rgba(93, 240, 195, .13); }
.battle-arena-result-grid > .battle-arena-result-credits { --card-accent: var(--gold); --card-tint: rgba(255, 214, 90, .13); }

.battle-arena-result-grid :is(.battle-arena-result-shards, .battle-arena-result-credits) {
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value";
  align-content: center;
  align-items: center;
  column-gap: 18px;
}

.battle-arena-result-grid :is(.battle-arena-result-shards, .battle-arena-result-credits) span { grid-area: label; }
.battle-arena-result-grid :is(.battle-arena-result-shards, .battle-arena-result-credits) strong { grid-area: value; }
.battle-arena-result-icon {
  grid-area: icon;
  width: 48px;
  height: 48px;
  background: var(--card-accent);
  -webkit-mask: var(--result-icon) center / contain no-repeat;
  mask: var(--result-icon) center / contain no-repeat;
}
.battle-arena-result-shards .battle-arena-result-icon { --result-icon: url("assets/ui/shards.svg"); }
.battle-arena-result-credits .battle-arena-result-icon { --result-icon: url("assets/ui/credits.svg"); }

.battle-arena-eliminated-panel .battle-arena-result-actions {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.battle-arena-eliminated-panel .battle-arena-result-actions > button {
  min-height: 80px;
  font-size: 25px;
}

.battle-arena-eliminated-panel #battle-arena-spectate-button {
  --chamfer-border: var(--cyan);
  --chamfer-fill: rgba(8, 50, 65, .9);
  color: var(--ink);
}

.battle-arena-eliminated-panel #battle-arena-spectate-button:hover,
.battle-arena-eliminated-panel #battle-arena-spectate-button:focus-visible {
  --chamfer-border: #c7f7ff;
  --chamfer-fill: rgba(19, 82, 99, .98);
}

.battle-arena-spectating-actions {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  gap: 12px;
}

.battle-arena-spectating-actions[hidden] {
  display: none;
}

.battle-arena-spectating-actions > button {
  min-width: 190px;
  min-height: 62px;
}

.battle-arena-connection-status {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 4;
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 900;
  transform: translateX(-50%);
}

.battle-arena-match-screen:has(.battle-arena-eliminated-panel:not([hidden])) .battle-arena-connection-status:not(:empty) {
  left: max(96px, env(safe-area-inset-left));
  bottom: 78px;
  width: min(920px, calc(100% - 192px));
  padding: 17px 22px;
  border-left: 4px solid var(--danger);
  background: rgba(10, 20, 34, .94);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .36);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .035em;
  text-align: left;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .app[data-mode-transition] .screen { animation-duration: 1ms; }

  .battle-arena-find-signal::after { animation: none; }
}
.app:has(.mission-dialog:not([hidden])) .credits-hud,
.app:has(.daily-bonus-dialog:not([hidden])) .credits-hud,
.app:has(.skin-dialog:not([hidden])) .credits-hud {
  z-index: 21;
  opacity: 1;
  pointer-events: none;
  transform: translateY(0);
}
.upgrade-ad-button {
  grid-area: ad;
  justify-self: end;
  min-width: clamp(164px, 26cqh, 202px);
  min-height: clamp(52px, 7.4cqh, 62px);
  padding: 0 clamp(18px, 3.1cqh, 24px);
  font-size: clamp(15px, 2.4cqh, 18px);
}
.upgrade-ad-button img, .result-energy-ad-button img, .daily-bonus-ad-button img { width: 18px; height: 18px; }
.result-energy-ad-button img { width: 28px; height: 28px; }
.daily-bonus-ad-button img { width: 20px; height: 20px; }
.result-energy-ad-button { min-width: 340px; min-height: 72px; padding: 0 24px; color: var(--ink); --chamfer-border: var(--gold); --chamfer-fill: rgba(150, 105, 20, 0.9); }
.result-energy-ad-button:disabled, .daily-bonus-ad-button:disabled { opacity: 0.42; filter: none; cursor: default; }
.daily-bonus-ad-button { min-width: 172px; min-height: 56px; padding: 0 16px; color: var(--ink); --chamfer-border: var(--gold); --chamfer-fill: rgba(92, 72, 20, 0.82); }
.daily-bonus-ad-button:hover, .daily-bonus-ad-button:focus-visible, .result-energy-ad-button:hover, .result-energy-ad-button:focus-visible { --chamfer-border: #ffe38a; --chamfer-fill: #a97e1e; }
.daily-bonus-ad-button[hidden], .result-energy-ad-button[hidden], .upgrade-ad-button[hidden] { display: none; }
.upgrade-ad-button.secondary-button { color: var(--ink); --chamfer-border: var(--accent); --chamfer-fill: rgba(4, 18, 31, 0.86); }
.upgrade-ad-button.secondary-button:hover, .upgrade-ad-button.secondary-button:focus-visible { --chamfer-border: var(--ink); --chamfer-fill: var(--accent); }
.credits-ad-dialog-panel { --dialog-border: rgba(255, 214, 90, 0.72); }
.credits-ad-dialog-header h2 { color: var(--gold); text-shadow: 0 0 18px rgba(255, 214, 90, 0.24); }
.credits-ad-status {
  min-height: 18px;
  margin: -6px 0 12px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.04em;
}
.credits-ad-confirm-button {
  --chamfer-border: #ffd65a;
  --chamfer-fill: #c9951e;
  display: inline-flex;
  min-width: 154px;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
}
.credits-ad-confirm-button img { width: 18px; height: 18px; }
.credits-ad-confirm-button:hover,
.credits-ad-confirm-button:focus-visible { --chamfer-border: #ffe38a; --chamfer-fill: #d9a62e; }
.credits-ad-confirm-button:disabled {
  --chamfer-border: rgba(255, 214, 90, 0.32);
  --chamfer-fill: rgba(38, 31, 14, 0.72);
  color: rgba(232, 248, 255, 0.42);
  cursor: default;
  filter: none;
}

@media (min-width: 601px) {
  .upgrade-list > .upgrade-item {
    grid-template-columns: 90px minmax(0, 1fr) 202px 202px;
    grid-template-areas:
      "symbol title ad cost"
      "symbol meter meter meter";
  }
}

@media (max-width: 600px) {
  .upgrade-list > .upgrade-item {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "symbol title"
      "symbol cost"
      "symbol ad"
      "meter meter";
  }

  .upgrade-ad-button { justify-self: start; width: min(160px, 100%); min-width: 142px; min-height: 52px; }
  .result-energy-ad-button { min-width: 0; min-height: 56px; padding: 0 14px; }
}

/* Keep secondary text readable after the fixed 2240x1260 stage is scaled down. */
.settings-dialog-panel {
  width: min(920px, 100%);
}

.mission-dialog-panel {
  width: min(1240px, 100%);
  height: min(940px, calc(100cqh - 64px));
  max-height: min(940px, calc(100cqh - 64px));
  padding: 40px;
}

.leaderboard-dialog {
  place-items: start center;
  padding: max(150px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(70px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.leaderboard-dialog-panel {
  width: min(1500px, 100%);
  height: min(1040px, calc(100cqh - 220px));
  max-height: min(1040px, calc(100cqh - 220px));
}

.daily-bonus-dialog-panel {
  width: min(720px, 100%);
  padding: 44px;
}

.reset-confirm-dialog-panel {
  width: min(680px, 100%);
  padding: 36px;
}

.skin-dialog-panel {
  width: min(1480px, 100%);
  height: min(920px, calc(100cqh - 64px));
  max-height: min(920px, calc(100cqh - 64px));
  padding: 34px;
}

.reset-confirm-dialog-header h2,
.skin-dialog-header h2 {
  font-size: 40px;
}

.hud-label,
.time-label,
.screen-label,
.mission-refresh,
.mission-progress-meta,
.leaderboard-period-note,
.leaderboard-header,
.leaderboard-finish,
.reset-confirm-detail,
.reset-catchup-condition,
.reset-confirm-reward-label {
  font-size: max(var(--ui-font-small), 16px);
}

.result-progress-ring small,
.skin-cost,
.skill-card-effect,
.skill-card-description,
.credit-energy-exchange-balance,
.credits-ad-dialog .reset-confirm-detail,
.credits-ad-dialog .reset-confirm-reward-label,
.credits-ad-status {
  font-size: max(var(--ui-font-small), 20px);
}

.result-resource .stat-label,
.resource-bank .stat-label,
.credits-hud .stat-label {
  font-size: max(var(--ui-font-small), 20px);
}

.hud-value,
.hud-substat,
.hud-substat strong,
.reset-gauge-value,
.settings-volume-row,
.settings-control-row,
.settings-warning-row,
.settings-help-row,
.settings-privacy-row,
.mission-title,
.leaderboard-status,
.leaderboard-me,
.leaderboard-row,
.skill-card-title,
.skill-card-level,
.upgrade-name,
.upgrade-level {
  font-size: max(var(--ui-font-body), 21px);
}

.mission-title,
.leaderboard-row,
.result-kicker,
.result-detail,
.stat-card .stat-label,
.skill-card-title,
.upgrade-name {
  font-size: max(var(--ui-font-body), 24px);
}

.credits-ad-dialog .reset-confirm-detail {
  max-width: none;
  white-space: nowrap;
}

.primary-button,
.secondary-button,
.settings-help-button,
.settings-privacy-button,
.mission-tab,
.mission-claim-button,
.mission-claim-value,
.leaderboard-tab,
.player-tab,
.skill-buy-button,
.skill-toggle-button,
.upgrade-cost,
.upgrade-ad-button {
  font-size: var(--ui-font-action);
  line-height: 1;
}

.upgrade-list .upgrade-cost {
  font-size: var(--upgrade-cost-font-size, var(--ui-font-action));
}

#result-upgrade-button,
#result-energy-ad-button,
#result-reset-button,
#upgrade-back-button,
#upgrade-start-button {
  font-size: max(var(--ui-font-action), 28px);
}

.result-resource {
  min-height: 92px;
  padding-block: 15px;
}

.settings-help-button,
.settings-privacy-button {
  min-width: 180px;
  min-height: 60px;
}

.settings-close-button,
.mission-close-button,
.leaderboard-close-button,
.daily-bonus-claim-button,
.daily-bonus-ad-button,
.daily-bonus-close-button,
.reset-confirm-button,
.reset-catchup-button,
.reset-cancel-button,
.skin-close-button,
.credits-ad-confirm-button {
  min-height: 68px;
}

.mission-tab,
.player-tab {
  min-height: 68px;
}

.mission-item {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 150px;
  padding: 24px 26px;
}

.mission-claim-button {
  min-width: 190px;
  min-height: 66px;
}

.mission-claim-icon,
.mission-ad-claim-icon {
  width: 22px;
  height: 22px;
}

.leaderboard-tab {
  min-height: 82px;
}

.leaderboard-row {
  min-height: 90px;
}

.leaderboard-header {
  min-height: 64px;
}

.leaderboard-finish {
  height: 50px;
}

.leaderboard-close-button {
  min-height: 80px;
}

.daily-bonus-claim-button,
.daily-bonus-ad-button,
.daily-bonus-close-button {
  min-width: 210px;
}

.skin-choice {
  min-height: 190px;
}

.skin-cost {
  min-width: 90px;
  padding: 9px 12px;
}

.skin-cost-dot {
  width: 20px;
  height: 20px;
}

.skill-card {
  min-height: 150px;
}

.skill-buy-button,
.skill-toggle-button {
  min-width: 190px;
  min-height: 66px;
}

/* Submission-review readability: these dialogs are shown inside a fixed stage that is scaled down. */
.daily-bonus-dialog-panel {
  width: min(980px, 100%);
  max-height: min(900px, calc(100cqh - 64px));
  padding: 56px;
}

.daily-bonus-dialog-header h2 {
  font-size: 64px;
}

.daily-bonus-prize {
  gap: 22px;
  margin: 22px 0 24px;
}

.daily-bonus-prize-icon {
  width: 92px;
  height: 92px;
}

.daily-bonus-prize strong {
  font-size: 104px;
}

.daily-bonus-ladder {
  --daily-bonus-tier-gap: 14px;
  max-width: 840px;
  margin-bottom: 18px;
}

.daily-bonus-tier {
  min-height: 112px;
  padding: 14px 10px;
  gap: 8px;
}

.daily-bonus-tier:not(.is-complete):not(.is-tomorrow):not(.is-today) {
  --daily-tier-border: rgba(255, 214, 90, 0.4);
  color: rgba(232, 248, 255, 0.74);
}

.daily-bonus-tier.is-complete {
  --daily-tier-border: rgba(255, 214, 90, 0.58);
  color: rgba(255, 214, 90, 0.8);
}

.daily-bonus-tier-label {
  font-size: 22px;
}

.daily-bonus-tier-value {
  gap: 7px;
  font-size: 30px;
}

.daily-bonus-tier-value::before {
  width: 20px;
  height: 20px;
}

.daily-bonus-refresh {
  min-height: 32px;
  margin-bottom: 10px;
  font-size: 24px;
}

.daily-bonus-streak {
  max-width: 840px;
  margin-bottom: 24px;
  color: rgba(255, 214, 90, 0.86);
  font-size: 26px;
}

.daily-bonus-actions {
  flex-wrap: nowrap;
  gap: 18px;
}

.daily-bonus-claim-button,
.daily-bonus-ad-button,
.daily-bonus-close-button {
  min-width: 240px;
  min-height: 76px;
  padding-inline: 22px;
  font-size: 24px;
}

.daily-bonus-ad-button img {
  width: 24px;
  height: 24px;
}

.credits-ad-dialog-panel {
  width: min(860px, 100%);
  min-height: 520px;
  max-height: min(820px, calc(100cqh - 64px));
  padding: 48px 52px;
}

.credits-ad-dialog-header {
  margin-bottom: 28px;
}

.credits-ad-dialog-header h2 {
  font-size: 56px;
}

.credits-ad-dialog .reset-confirm-detail {
  margin-bottom: 20px;
  font-size: 24px;
}

.credits-ad-status {
  min-height: 30px;
  margin: -4px 0 20px;
  font-size: 24px;
}

.credits-ad-dialog .reset-confirm-reward {
  gap: 12px;
  margin: 10px 0 28px;
}

.credits-ad-dialog .reset-confirm-reward-label {
  font-size: 24px;
}

.credits-ad-dialog .reset-confirm-reward-value {
  gap: 16px;
}

.credits-ad-dialog .reset-confirm-reward-icon {
  width: 68px;
  height: 68px;
}

.credits-ad-dialog .reset-confirm-reward-value strong {
  font-size: 80px;
}

.credits-ad-dialog .reset-confirm-actions {
  flex-wrap: nowrap;
  gap: 18px;
}

.credits-ad-dialog .credits-ad-confirm-button,
.credits-ad-dialog .reset-cancel-button {
  min-width: 240px;
  min-height: 76px;
  padding-inline: 22px;
  font-size: 24px;
}

.credits-ad-dialog .credits-ad-confirm-button img {
  width: 24px;
  height: 24px;
}