/* STEP 08–09: Static NEON ARENA screen and Player object. Gameplay is not implemented here. */

:root {
  color-scheme: dark;
  --page-bg: #060b16;
  --arena-bg: #091325;
  --panel-bg: rgba(8, 22, 42, 0.88);
  --neon: #65f6df;
  --neon-soft: rgba(101, 246, 223, 0.38);
  --text: #e4fffb;
  --muted: #7b9cab;
  --panel-line: rgba(101, 246, 223, 0.38);
  --panel-edge: rgba(172, 255, 244, 0.84);
  --panel-deep: rgba(4, 14, 30, 0.9);
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  overflow: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(38, 111, 145, 0.2), transparent 46%),
    var(--page-bg);
  color: var(--text);
}

.game-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: clamp(1rem, 4vw, 3rem);
}

.arena {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--neon-soft);
  background: var(--arena-bg);
  box-shadow:
    0 0 0 1px rgba(101, 246, 223, 0.08) inset,
    0 0 28px rgba(60, 222, 212, 0.12),
    0 22px 60px rgba(0, 0, 0, 0.45);
}

.arena::before,
.arena::after {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  content: "";
  border-color: var(--neon);
}

.arena::before {
  top: 10px;
  left: 10px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.arena::after {
  right: 10px;
  bottom: 10px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.arena-hud {
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: clamp(54px, 10%, 70px);
  padding: 0 clamp(1rem, 2.8vw, 1.8rem);
  min-height: clamp(64px, 12%, 82px);
  border-bottom: 1px solid var(--panel-line);
  background:
    linear-gradient(90deg, rgba(101, 246, 223, 0.07), transparent 24%, transparent 76%, rgba(101, 246, 223, 0.07)),
    var(--panel-deep);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.hud-slot {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.hud-metric {
  position: relative;
  display: grid;
  min-width: min(220px, 27vw);
  gap: 0.38rem;
  padding: 0.48rem 0.7rem 0.45rem;
  border: 1px solid var(--panel-line);
  background: linear-gradient(135deg, rgba(20, 61, 77, 0.28), rgba(6, 17, 33, 0.62));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.hud-metric::before,
.hud-metric::after {
  position: absolute;
  width: 17px;
  height: 2px;
  content: "";
  background: var(--panel-edge);
  box-shadow: 0 0 8px rgba(101, 246, 223, 0.7);
}

.hud-metric::before { top: -1px; left: 0; }
.hud-metric::after { right: 0; bottom: -1px; }

.hud-metric__line {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: baseline;
}

.hud-metric--score {
  min-width: 88px;
  justify-items: end;
}

.hud-slot--right {
  justify-content: flex-end;
}

.ability-status-button {
  margin-left: 0.35rem;
  padding: 0.32rem 0.45rem;
  border: 1px solid var(--panel-line);
  background: rgba(8, 28, 43, 0.78);
  color: var(--neon);
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.45rem, 1.15vw, 0.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ability-status-button:hover,
.ability-status-button:focus-visible {
  border-color: var(--neon);
  background: rgba(101, 246, 223, 0.14);
  box-shadow: 0 0 12px rgba(101, 246, 223, 0.25);
  outline: none;
}

.ability-status-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.hud-label,
.hud-eyebrow,
.hud-status,
.wave-slot {
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hud-label {
  color: #8ab5c1;
  font-size: clamp(0.5rem, 1.2vw, 0.63rem);
  letter-spacing: 0.14em;
}

.hud-placeholder {
  width: clamp(40px, 9vw, 68px);
  height: 4px;
  background: linear-gradient(90deg, var(--neon), rgba(101, 246, 223, 0.18));
  box-shadow: 0 0 8px rgba(101, 246, 223, 0.4);
}

.hud-slot--right .hud-placeholder {
  background: linear-gradient(90deg, rgba(101, 246, 223, 0.18), var(--neon));
}

.hud-score {
  color: var(--neon);
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  font-size: clamp(0.95rem, 2.4vw, 1.24rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(101, 246, 223, 0.4);
}

.hud-hp {
  color: #a4fff0;
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  font-size: clamp(0.7rem, 1.75vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(101, 246, 223, 0.35);
}

.hud-title {
  display: grid;
  justify-items: center;
  gap: 0.16rem;
  text-align: center;
}

.hud-title::before,
.hud-title::after {
  width: clamp(24px, 5vw, 46px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--neon));
  box-shadow: 0 0 8px rgba(101, 246, 223, 0.6);
}

.hud-title::before { margin-bottom: -0.28rem; }
.hud-title::after { margin-top: -0.1rem; transform: scaleX(-1); }

.hud-eyebrow {
  color: var(--neon);
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  font-size: clamp(0.82rem, 2.3vw, 1.16rem);
  letter-spacing: 0.24em;
  text-shadow: 0 0 9px rgba(101, 246, 223, 0.38);
}

.hud-status {
  color: var(--muted);
  font-size: clamp(0.44rem, 1.1vw, 0.58rem);
}

.arena-field {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background-color: var(--arena-bg);
  box-shadow: inset 0 0 0 1px rgba(101, 246, 223, 0.06), inset 0 0 48px rgba(0, 0, 0, 0.22);
}

.world-map-surface {
  position: absolute;
  z-index: 0;
  box-sizing: border-box;
  border: 3px solid #ff334d;
  background-color: var(--arena-bg);
  background-image:
    linear-gradient(rgba(101, 246, 223, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 246, 223, 0.07) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(20, 81, 113, 0.18), transparent 55%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  box-shadow:
    0 0 7px rgba(255, 70, 58, 0.95),
    0 0 16px rgba(255, 55, 44, 0.42),
    inset 0 0 7px rgba(255, 129, 63, 0.62);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.world-map-surface::before,
.world-map-surface::after {
  position: absolute;
  width: 28px;
  height: 28px;
  content: "";
  border-color: #ff7955;
  filter: drop-shadow(0 0 4px rgba(255, 59, 54, 0.8));
}

.field-obstacle {
  position: absolute;
  z-index: 1;
  width: 56px;
  height: 56px;
  background: url("assets/images/field/obstacle_crate.svg") center / contain no-repeat;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.field-item {
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.field-item__visual,
.field-item__spawn-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.field-item__visual {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.field-item--heal .field-item__visual { background-image: url("assets/images/field/pickup_heal.svg"); }
.field-item--boost .field-item__visual { background-image: url("assets/images/field/pickup_boost.svg"); }

.field-item__spawn-ring {
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #7fffe6;
  box-shadow: 0 0 8px currentColor;
  transform: scale(0.5);
}

.field-item--boost .field-item__spawn-ring { color: #ffcb64; }

.obstacle-impact-spark,
.field-pickup-effect {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.25);
}

.obstacle-impact-spark { color: #72f7ef; box-shadow: 0 0 12px currentColor; }
.field-pickup-effect--heal { color: #4de39a; box-shadow: 0 0 18px currentColor; }
.field-pickup-effect--boost { color: #ffad55; box-shadow: 0 0 18px currentColor; }

.world-map-surface::before {
  top: 5px;
  left: 5px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.world-map-surface::after {
  right: 5px;
  bottom: 5px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.wave-slot {
  position: absolute;
  top: 1rem;
  left: 50%;
  padding: 0.32rem 0.85rem;
  border-inline: 1px solid rgba(101, 246, 223, 0.26);
  background: rgba(4, 14, 30, 0.56);
  color: rgba(228, 255, 251, 0.7);
  font-size: clamp(0.48rem, 1.2vw, 0.64rem);
  transform: translateX(-50%);
}

.wave-slot.is-wave-transition {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(101, 246, 223, 1);
}

.wave-announcement {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  min-width: min(280px, 68vw);
  min-height: 84px;
  padding: 1rem 1.5rem;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(135deg, rgba(16, 58, 76, 0.5), rgba(4, 14, 30, 0.94));
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 0 28px rgba(101, 246, 223, 0.22);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.wave-announcement[hidden] {
  display: none;
}

.wave-announcement p {
  margin: 0;
  color: var(--neon);
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 0 14px rgba(101, 246, 223, 0.6);
}

.exp-hud {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 2.8vw, 1.8rem);
  bottom: 1rem;
  width: min(300px, 58vw);
  padding: 0.58rem 0.75rem;
  border: 1px solid var(--panel-line);
  background: linear-gradient(135deg, rgba(13, 47, 64, 0.65), rgba(4, 14, 30, 0.9));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.exp-hud__labels {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  color: var(--neon);
  font-size: clamp(0.5rem, 1.15vw, 0.65rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.exp-hud__track {
  height: 5px;
  margin-top: 0.45rem;
  overflow: hidden;
  background: rgba(101, 246, 223, 0.13);
}

.exp-hud__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--neon);
  box-shadow: 0 0 10px rgba(101, 246, 223, 0.86);
  transition: width 180ms ease-out;
}

.hud-hp-track {
  height: 5px;
  overflow: hidden;
  background: rgba(101, 246, 223, 0.12);
  box-shadow: inset 0 0 0 1px rgba(101, 246, 223, 0.12);
}

.hud-hp-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #38c4b6, #bdfff2);
  box-shadow: 0 0 10px rgba(101, 246, 223, 0.76);
  transition: width 160ms ease-out;
}

.level-up-screen {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow: auto;
  background: rgba(2, 8, 18, 0.78);
  backdrop-filter: blur(4px);
}

.level-up-screen[hidden] {
  display: none;
}

.level-up-panel {
  width: min(820px, 94%);
  max-height: min(510px, calc(100% - 1rem));
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(135deg, rgba(14, 48, 66, 0.96), rgba(4, 13, 29, 0.98));
  box-shadow: 0 0 0 4px rgba(101, 246, 223, 0.04), 0 0 34px rgba(101, 246, 223, 0.2);
  clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
}

.level-up-title,
.level-up-subtitle {
  margin: 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.level-up-title {
  color: var(--neon);
  font-size: clamp(1.3rem, 4vw, 2rem);
  text-shadow: 0 0 14px rgba(101, 246, 223, 0.62);
}

.level-up-subtitle {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.65rem;
}

.ability-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.2rem;
}

.ability-card {
  --ability-accent: #42b7ff;
  display: grid;
  grid-template-rows: 64px minmax(2.5rem, auto) 1fr;
  min-height: 202px;
  gap: 0.7rem;
  align-content: start;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ability-accent) 62%, transparent);
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--ability-accent) 14%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--ability-accent) 8%, #071522), rgba(3, 12, 27, 0.96));
  box-shadow: inset 0 0 0 1px rgba(2, 8, 18, 0.72), 0 0 14px color-mix(in srgb, var(--ability-accent) 10%, transparent);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.ability-icon {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--ability-accent) 78%, white 10%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ability-accent) 15%, #07131f) 0 45%, #040d19 78%);
  color: var(--ability-accent);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--ability-accent) 14%, transparent), 0 0 12px color-mix(in srgb, var(--ability-accent) 22%, transparent);
  pointer-events: none;
}

.ability-icon svg {
  width: 40px;
  height: 40px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px currentColor);
}

.ability-icon-badge {
  position: absolute;
  right: -6px;
  bottom: -3px;
  min-width: 27px;
  padding: 3px 4px 2px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #06111f;
  color: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: 0 0 7px color-mix(in srgb, var(--ability-accent) 32%, transparent);
}

.ability-card:hover,
.ability-card:focus-visible {
  border-color: color-mix(in srgb, var(--ability-accent) 90%, white 10%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ability-accent) 18%, transparent), 0 0 20px color-mix(in srgb, var(--ability-accent) 28%, transparent);
  outline: none;
}

.ability-card:hover .ability-icon,
.ability-card:focus-visible .ability-icon {
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--ability-accent) 24%, transparent), 0 0 17px color-mix(in srgb, var(--ability-accent) 42%, transparent);
}

.ability-card__title {
  align-self: center;
  color: var(--ability-accent);
  font-size: clamp(0.86rem, 1.7vw, 1rem);
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 0 8px color-mix(in srgb, var(--ability-accent) 26%, transparent);
}

.ability-card__description {
  color: #d5e4ec;
  font-size: clamp(0.7rem, 1.25vw, 0.82rem);
  line-height: 1.45;
}

.ability-status-screen {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 8, 18, 0.8);
  backdrop-filter: blur(4px);
}

.ability-status-screen[hidden] { display: none; }

.ability-status-panel {
  width: min(690px, 94%);
  max-height: min(510px, 88%);
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(135deg, rgba(14, 48, 66, 0.97), rgba(4, 13, 29, 0.99));
  box-shadow: 0 0 0 4px rgba(101, 246, 223, 0.04), 0 0 34px rgba(101, 246, 223, 0.2);
  clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
}

.ability-status-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ability-status-title, .ability-status-subtitle { margin: 0; font-weight: 700; letter-spacing: 0.14em; }
.ability-status-title { color: var(--neon); font-size: clamp(1rem, 3vw, 1.45rem); }
.ability-status-subtitle { margin-top: 0.28rem; color: var(--muted); font-size: 0.58rem; }
.ability-status-close { border: 1px solid rgba(101, 246, 223, 0.5); background: transparent; color: var(--neon); cursor: pointer; font: inherit; font-size: 1.3rem; line-height: 1; }
.ability-status-list { display: grid; gap: 0.45rem; margin-top: 1rem; }
.ability-status-entry { --ability-accent: #42b7ff; display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.55rem; border: 1px solid color-mix(in srgb, var(--ability-accent) 28%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--ability-accent) 8%, #081621), rgba(5, 15, 29, 0.58)); }
.ability-status-entry .ability-icon { width: 2rem; height: 2rem; justify-self: start; box-shadow: inset 0 0 8px color-mix(in srgb, var(--ability-accent) 12%, transparent), 0 0 7px color-mix(in srgb, var(--ability-accent) 18%, transparent); }
.ability-status-entry .ability-icon svg { width: 1.3rem; height: 1.3rem; stroke-width: 2.7; filter: none; }
.ability-status-entry .ability-icon-badge { display: none; }
.ability-status-entry strong { color: var(--ability-accent); font-size: 0.7rem; letter-spacing: 0.07em; }
.ability-status-entry span:not(.ability-icon) { color: #c3d3dc; font-size: 0.59rem; }
.ability-status-entry em { color: var(--ability-accent); font-size: 0.6rem; font-style: normal; font-weight: 700; letter-spacing: 0.06em; }
.ability-status-empty { color: var(--muted); font-size: 0.72rem; text-align: center; }
.ability-stat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(101, 246, 223, 0.22); }
.ability-stat-list div { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.64rem; }
.ability-stat-list dt { color: var(--muted); }
.ability-stat-list dd { margin: 0; color: var(--neon); font-weight: 700; }

.player {
  --player-scale: 1;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%) scale(var(--player-scale));
}

.player-boost-countdown {
  position: absolute;
  z-index: 7;
  top: -68px;
  left: 50%;
  min-width: 24px;
  padding: 3px 5px;
  border: 1px solid #ffad55;
  border-radius: 999px;
  background: rgba(5, 15, 27, 0.9);
  color: #fff0b0;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 7px #ffad55;
  box-shadow: 0 0 9px rgba(255, 173, 85, 0.42);
  pointer-events: none;
  transform: translateX(-50%);
}

.player-boost-countdown--below { top: 68px; }

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

.player.is-dying {
  opacity: 0;
}

.player-core {
  position: absolute;
  z-index: 1;
  inset: 7px;
  display: block;
  border: 2px solid #a4fff0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #edfffb 0 10%, #78f5df 28%, #1cbaa9 70%, #0b4d59 100%);
  box-shadow:
    0 0 9px rgba(101, 246, 223, 0.95),
    0 0 22px rgba(61, 226, 211, 0.58),
    inset 0 0 9px rgba(225, 255, 250, 0.7);
}

.player.is-hit .player-core {
  border-color: #fff0dc;
  box-shadow:
    0 0 12px rgba(255, 123, 103, 0.95),
    0 0 28px rgba(255, 73, 88, 0.7),
    inset 0 0 10px rgba(255, 232, 208, 0.85);
}

.player-form-recoil,
.player-form-image,
.player-transform-flash,
.player-transform-ring {
  position: absolute;
  pointer-events: none;
}

.player-form-recoil {
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.player-form-image {
  top: 0;
  left: 0;
  width: var(--player-form-size, 76px);
  height: var(--player-form-size, 76px);
  background-image: var(--player-form-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transform: translate(calc(0% - var(--player-core-x, 50%)), calc(0% - var(--player-core-y, 50%)));
  transform-origin: var(--player-core-x, 50%) var(--player-core-y, 50%);
  will-change: transform, filter;
}

.player.has-player-form .player-form-image {
  opacity: 1;
}

.player.has-player-form .player-core,
.player.has-player-form .player-direction {
  opacity: 0;
}

.player.is-hit .player-form-image {
  filter: brightness(1.65) saturate(0.75) drop-shadow(0 0 7px rgba(255, 113, 103, 0.95));
}

.player-form-recoil.is-recoiling {
  animation: player-form-recoil 100ms ease-out;
}

.player-transform-flash,
.player-transform-ring {
  z-index: 5;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
}

.player-transform-flash {
  width: 58px;
  height: 58px;
  background: radial-gradient(circle, #ffffff 0 12%, #d9fffb 20%, rgba(70, 244, 238, 0.74) 44%, transparent 72%);
  box-shadow: 0 0 18px rgba(235, 255, 255, 0.95), 0 0 42px rgba(62, 235, 230, 0.72);
  transform: translate(-50%, -50%) scale(0.25);
}

.player-transform-ring {
  width: 44px;
  height: 44px;
  border: 2px solid #84ffe4;
  box-shadow: 0 0 8px rgba(101, 246, 223, 0.78), inset 0 0 7px rgba(101, 246, 223, 0.28);
  transform: translate(-50%, -50%) scale(0.35);
}

.player.is-transforming .player-transform-flash {
  animation: player-transform-flash 300ms ease-out both;
}

.player.is-transforming .player-transform-ring {
  animation: player-transform-ring 300ms ease-out both;
}

.player-aim-pivot {
  --aim-angle: 0deg;
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  transform: rotate(var(--aim-angle));
  transform-origin: 50% 50%;
}

.player-direction {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 12px;
  height: 35px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(#d2fff7, var(--neon));
  box-shadow: 0 0 10px rgba(101, 246, 223, 0.9);
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
}

.player-direction.is-recoiling {
  animation: barrel-recoil 100ms ease-out;
}

.projectile {
  --projectile-angle: 0deg;
  --projectile-length: 22px;
  --projectile-thickness: 5px;
  --projectile-tail-length: 14px;
  --projectile-tail-thickness: 3px;
  --projectile-core: #f4fffd;
  --projectile-edge: #65f6df;
  --projectile-glow: rgba(101, 246, 223, 0.82);
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  border: 0;
  background: transparent;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--projectile-angle));
  transform-origin: 50% 50%;
}

.projectile::before,
.enemy-projectile::before,
.boss-projectile::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--projectile-length);
  height: var(--projectile-thickness);
  border-radius: 999px 70% 70% 999px;
  background: linear-gradient(90deg, var(--projectile-edge), var(--projectile-core) 48% 74%, #ffffff 88%, var(--projectile-edge));
  box-shadow:
    0 0 4px var(--projectile-edge),
    0 0 10px var(--projectile-glow);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.projectile::after,
.enemy-projectile::after,
.boss-projectile::after {
  position: absolute;
  top: 50%;
  right: 50%;
  width: var(--projectile-tail-length);
  height: var(--projectile-tail-thickness);
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, transparent 0 24%, var(--projectile-edge) 100%);
  box-shadow: 0 0 6px var(--projectile-glow);
  content: "";
  opacity: 0.78;
  pointer-events: none;
  transform: translateY(-50%);
}

.enemy--normal {
  --hit-scale: 1;
  position: absolute;
  z-index: 1;
  width: 66px;
  height: 66px;
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.enemy--normal::before,
.enemy--normal::after {
  content: none;
}

.enemy--normal.enemy--damaged .enemy-visual {
  filter: brightness(1.08) saturate(1.06);
}

.enemy--normal.enemy--critical .enemy-visual {
  filter: brightness(1.18) saturate(1.08) drop-shadow(0 0 3px rgba(255, 228, 92, 0.7));
}

.enemy-health-bar {
  --health-ratio: 1;
  --health-offset: 41px;
  --health-start: #ff6038;
  --health-end: #ffb347;
  --health-glow: rgba(255, 87, 48, 0.45);
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 4px;
  overflow: hidden;
  border: 1px solid rgba(113, 151, 166, 0.48);
  background: rgba(2, 10, 23, 0.92);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  transform: translate(-50%, calc(-50% - var(--health-offset)));
}

.enemy-health-bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--health-start), var(--health-end));
  box-shadow: 0 0 5px var(--health-glow);
  transform: scaleX(var(--health-ratio));
  transform-origin: 0 50%;
  transition: transform 70ms linear;
}

.enemy-health-bar--ranged {
  --health-start: #ff3b9d;
  --health-end: #ff9cdd;
  --health-glow: rgba(255, 54, 168, 0.48);
}

.enemy-health-bar--mid-boss {
  --health-offset: 76px;
  --health-start: #ff7a38;
  --health-end: #ff3f8f;
  --health-glow: rgba(255, 72, 93, 0.52);
  width: 58px;
  height: 6px;
  border-color: rgba(255, 120, 85, 0.58);
}

.enemy--ranged {
  --hit-scale: 1;
  position: absolute;
  z-index: 1;
  width: 66px;
  height: 66px;
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.enemy--ranged::before,
.enemy--ranged::after {
  content: none;
}

.enemy--ranged.enemy--critical .enemy-visual {
  filter: brightness(1.16) saturate(1.06) drop-shadow(0 0 3px rgba(255, 108, 191, 0.72));
}

.enemy-projectile {
  --projectile-angle: 0deg;
  --projectile-length: 22px;
  --projectile-thickness: 7px;
  --projectile-tail-length: 13px;
  --projectile-tail-thickness: 4px;
  --projectile-core: #fff2fa;
  --projectile-edge: #ff4fa1;
  --projectile-glow: rgba(255, 45, 153, 0.84);
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  border: 0;
  background: transparent;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--projectile-angle));
  transform-origin: 50% 50%;
}

.enemy--mid-boss {
  --hit-scale: 1;
  position: absolute;
  z-index: 2;
  width: 132px;
  height: 132px;
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.enemy--mid-boss::before,
.enemy--mid-boss::after {
  content: none;
}

.enemy--mid-boss.boss--damaged .enemy-visual {
  filter: brightness(1.08) saturate(1.05);
}

.enemy--mid-boss.boss--critical .enemy-visual {
  filter: brightness(1.16) saturate(1.06) drop-shadow(0 0 4px rgba(255, 209, 92, 0.72));
}

.enemy-visual-rotation,
.enemy-visual,
.enemy-sprite {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.enemy-visual-rotation {
  --enemy-rotation: 0deg;
  transform: rotate(var(--enemy-rotation));
}

.enemy-visual {
  transform: scale(var(--hit-scale));
  transition: transform 45ms cubic-bezier(0.2, 0.9, 0.35, 1);
}

.enemy-sprite {
  --sprite-offset-x: 0%;
  --sprite-offset-y: 0%;
  --sprite-scale: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(var(--sprite-offset-x), var(--sprite-offset-y)) scale(var(--sprite-scale));
}

.enemy--normal .enemy-sprite {
  background: url("assets/images/enemies/enemy_normal.png") center / contain no-repeat;
}

.enemy--ranged .enemy-sprite {
  background: url("assets/images/enemies/enemy_ranged.png") center / contain no-repeat;
}

.enemy--mid-boss .enemy-sprite {
  background: url("assets/images/enemies/enemy_midboss.png") center / contain no-repeat;
}

.boss-projectile {
  --projectile-angle: 0deg;
  --projectile-length: 27px;
  --projectile-thickness: 8px;
  --projectile-tail-length: 17px;
  --projectile-tail-thickness: 5px;
  --projectile-core: #fff8e6;
  --projectile-edge: #ff653d;
  --projectile-glow: rgba(255, 67, 42, 0.9);
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  border: 0;
  background: transparent;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--projectile-angle));
  transform-origin: 50% 50%;
}

.boss-aim-warning {
  --warning-angle: 0deg;
  position: absolute;
  z-index: 1;
  width: 190px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 113, 73, 0.9), rgba(255, 61, 116, 0.45) 58%, transparent);
  box-shadow: 0 0 4px rgba(255, 68, 91, 0.7);
  opacity: 0.82;
  pointer-events: none;
  transform: translateY(-50%) rotate(var(--warning-angle));
  transform-origin: 0 50%;
}

.enemy--hit {
  --hit-scale: 1.24;
}

.enemy--boss-hit {
  --hit-scale: 1.18;
}

.effect-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.death-fragment {
  position: absolute;
  width: var(--fragment-width);
  height: 4px;
  box-shadow: 0 0 10px currentColor;
  opacity: 1;
  animation: death-burst var(--burst-duration) cubic-bezier(0.16, 0.76, 0.33, 1) forwards;
}

.death-flash {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 20px currentColor, 0 0 38px currentColor;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.45);
  animation: death-flash 140ms ease-out forwards;
}

.player-death-flash,
.player-death-ring,
.player-death-afterglow,
.player-death-fragment {
  position: absolute;
  pointer-events: none;
}

.player-death-flash {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #f4ffff;
  box-shadow: 0 0 18px #c8ffff, 0 0 38px #45e9ef, 0 0 58px rgba(38, 132, 255, 0.62);
  animation: player-death-flash 100ms ease-out forwards;
}

.player-death-ring {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(111, 255, 244, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(63, 238, 239, 0.7), inset 0 0 8px rgba(41, 154, 255, 0.35);
  animation: player-death-ring 380ms ease-out forwards;
}

.player-death-afterglow {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 255, 255, 0.72), rgba(46, 216, 239, 0.26) 34%, rgba(23, 99, 255, 0) 72%);
  filter: blur(3px);
  animation: player-death-afterglow 850ms ease-out forwards;
}

.player-death-fragment {
  width: var(--player-death-width);
  height: var(--player-death-height);
  box-shadow: 0 0 7px currentColor, 0 0 13px currentColor;
  opacity: 1;
  animation: player-death-fragment var(--player-death-duration) cubic-bezier(0.12, 0.68, 0.25, 1) forwards;
}

.player-death-fragment--shard {
  clip-path: polygon(0 50%, 68% 0, 100% 46%, 62% 100%);
}

.player-death-fragment--flame {
  border-radius: 999px 20% 20% 999px;
}

@keyframes barrel-recoil {
  0% { transform: translate(-50%, -100%) scaleY(1); }
  45% { transform: translate(-50%, -100%) scaleY(0.82); }
  100% { transform: translate(-50%, -100%) scaleY(1); }
}

@keyframes player-form-recoil {
  0% { transform: translateY(0); }
  42% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}


@keyframes player-transform-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  18% { opacity: 0.78; transform: translate(-50%, -50%) scale(0.68); }
  27% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  52% { opacity: 0.22; transform: translate(-50%, -50%) scale(1.16); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); }
}

@keyframes player-transform-ring {
  0%, 26% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  30% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.55); }
}

@keyframes death-burst {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) rotate(var(--burst-rotation)) scale(0.25);
    opacity: 0;
  }
}

@keyframes death-flash {
  0% { transform: translate(-50%, -50%) scale(0.45); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

@keyframes player-death-flash {
  0% { transform: translate(-50%, -50%) scale(0.25); opacity: 1; }
  55% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

@keyframes player-death-ring {
  0% { transform: translate(-50%, -50%) scale(0.45); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(4.4); opacity: 0; }
}

@keyframes player-death-afterglow {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.75; }
  45% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.42; }
  100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}

@keyframes player-death-fragment {
  0% {
    transform: translate(-50%, -50%) rotate(var(--player-death-start-rotation)) scale(1);
    opacity: 1;
  }
  70% { opacity: 0.86; }
  100% {
    transform: translate(calc(-50% + var(--player-death-x)), calc(-50% + var(--player-death-y))) rotate(var(--player-death-end-rotation)) scale(0.24);
    opacity: 0;
  }
}

@media (max-width: 460px) {
  .game-shell {
    padding: 0.75rem;
  }

  .arena-hud {
    padding: 0 0.8rem;
  }

  .hud-slot {
    gap: 0.35rem;
  }

  .player {
    --player-scale: 0.85;
  }

  .ability-cards {
    grid-template-columns: 1fr;
  }

  .ability-card {
    min-height: 190px;
  }

  .ability-status-button { padding: 0.26rem; font-size: 0.42rem; }
  .ability-stat-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ability-card,
  .ability-icon {
    transition: none;
  }
}

.game-over-screen {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2, 8, 18, 0.8);
  backdrop-filter: blur(4px);
}

.game-over-screen[hidden] {
  display: none;
}

.game-over-panel {
  display: grid;
  gap: 0.85rem;
  width: min(720px, calc(100% - 28px));
  max-height: calc(100% - 24px);
  padding: 1.1rem 1.25rem 0.9rem;
  overflow: auto;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(135deg, rgba(19, 50, 66, 0.96), rgba(4, 13, 29, 0.99));
  box-shadow: 0 0 0 4px rgba(101, 246, 223, 0.04), 0 0 30px rgba(101, 246, 223, 0.2);
  clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
}

.game-over-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.82fr) minmax(320px, 1.18fr);
  gap: 1.25rem;
  width: 100%;
}

.game-over-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0.35rem 1.25rem 0.35rem 0.3rem;
  border-right: 1px solid rgba(95, 222, 219, 0.2);
}

.game-over-title,
.game-over-label {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.game-over-title {
  color: #ff8379;
  font-size: clamp(1.35rem, 4vw, 2rem);
  text-shadow: 0 0 14px rgba(255, 97, 105, 0.55);
}

.game-over-label {
  color: var(--muted);
  font-size: 0.65rem;
}

.game-over-score {
  color: var(--neon);
  margin: 0.2rem 0 0.55rem;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(101, 246, 223, 0.48);
}

.ranking-status,
.record-feedback,
.leaderboard-storage-status,
.restart-help {
  margin: 0;
  color: #83aeb8;
  font-size: 0.58rem;
  letter-spacing: 0.09em;
}

.ranking-status {
  min-height: 1.2em;
  color: #86fff0;
  font-weight: 700;
}

.record-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.85rem;
}

.record-form[hidden] { display: none; }

.record-form label {
  grid-column: 1 / -1;
  color: #9fdde0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.record-form label span {
  color: #557e88;
  font-size: 0.52rem;
}

.initials-input {
  min-width: 0;
  height: 2.25rem;
  padding: 0 0.7rem;
  border: 1px solid #2f7480;
  background: #020c15;
  color: #d7ffff;
  outline: none;
  font: 700 1rem/1 Consolas, "Courier New", monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 3px #061822;
}

.initials-input:focus {
  border-color: #75f4e8;
  box-shadow: inset 0 0 0 3px #061822, 0 0 8px rgba(74, 232, 222, 0.2);
}

.save-record-button,
.restart-button {
  border: 1px solid var(--panel-edge);
  background: rgba(12, 51, 66, 0.4);
  color: var(--neon);
  cursor: pointer;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.save-record-button {
  padding: 0 0.7rem;
  white-space: nowrap;
}

.save-record-button:disabled {
  cursor: not-allowed;
  color: #496d74;
  border-color: #24444c;
}

.record-feedback {
  min-height: 1.2em;
  margin-top: 0.45rem;
}

.leaderboard {
  position: relative;
  min-width: 0;
  padding: 0.15rem 0;
}

.leaderboard-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.leaderboard-heading p {
  margin: 0;
  color: #bffff9;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.leaderboard-heading span {
  color: #4f7e87;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
}

.leaderboard-columns,
.leaderboard-row {
  display: grid;
  grid-template-columns: 54px minmax(62px, 1fr) minmax(90px, 1.4fr);
  align-items: center;
}

.leaderboard-columns {
  min-height: 20px;
  padding: 0 0.55rem;
  color: #527c86;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
}

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

.leaderboard-rows {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard-row {
  min-height: 26px;
  padding: 0 0.55rem;
  border-left: 1px solid transparent;
  background: rgba(3, 16, 26, 0.72);
  color: #93b8bf;
  font: 700 0.75rem/1 Consolas, "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

.leaderboard-rank { color: #5e8b94; }
.leaderboard-name { letter-spacing: 0.16em; }
.leaderboard-score { text-align: right; color: #b9dce0; }
.leaderboard-row--medal-1 .leaderboard-rank { color: #ffd66b; }
.leaderboard-row--medal-2 .leaderboard-rank { color: #c8d9df; }
.leaderboard-row--medal-3 .leaderboard-rank { color: #d89666; }
.leaderboard-row.is-current-record {
  border-left-color: #6effed;
  background: linear-gradient(90deg, rgba(60, 233, 220, 0.18), rgba(4, 20, 29, 0.7));
  color: #ddfffb;
  box-shadow: inset 0 0 12px rgba(67, 232, 221, 0.08);
}

.leaderboard-row.is-current-record .leaderboard-name,
.leaderboard-row.is-current-record .leaderboard-score { color: #cafff8; }

.leaderboard-empty {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0;
  color: #698f97;
  text-align: center;
  font-size: 0.62rem;
  transform: translateY(-10%);
  pointer-events: none;
}

.leaderboard-storage-status {
  min-height: 1.2em;
  margin-top: 0.4rem;
  color: #ffb774;
  line-height: 1.35;
}

.game-over-actions {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(95, 222, 219, 0.16);
}

.restart-button {
  margin-top: 0;
  padding: 0.6rem 1.1rem;
  min-width: 180px;
}

.restart-button:hover,
.restart-button:focus-visible {
  background: rgba(101, 246, 223, 0.14);
  outline: none;
}

.restart-button small {
  color: var(--muted);
  font-size: 0.58rem;
}

/* Task 1 reference alignment: asymmetric command strip and secondary growth HUD. */
.arena-hud {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 23%) auto;
  gap: 12px;
  min-height: 64px;
  padding: 8px 18px;
  background: linear-gradient(110deg, #04151c, #020b13 60%);
  border-bottom-color: #16454b;
  box-shadow: inset 0 -4px #030e18, inset 0 -5px #113039;
}
.hud-title { grid-column: 1; grid-row: 1; justify-items: start; gap: 2px; min-width: 0; }
.hud-title::before, .hud-title::after { content: none; }
.arena-logo { display: block; width: min(100%, 340px); height: auto; overflow: visible; color: #a9faff; filter: drop-shadow(0 0 3px #31c7d466); }
.arena-logo__secondary { color: #4e818d; }
.arena-logo__slashes { fill: #167886; }
.hud-status { font-size: 7px; letter-spacing: .23em; color: #43818e; padding-left: 2px; }
.hud-slot--left { grid-column: 2; grid-row: 1; min-width: 0; }
.hud-slot--right { grid-column: 3; grid-row: 1; gap: 8px; }
.hud-metric {
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 5px 9px;
  gap: 3px;
  border-color: #25616b;
  background: linear-gradient(110deg, #061c25, #031119);
  box-shadow: inset 0 0 0 3px #04121a, inset 0 0 0 4px #12363e;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 6px);
}
.hud-metric::before, .hud-metric::after { height: 1px; width: 14px; pointer-events: none; }
.hud-metric--hp { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.hud-metric__line { display: contents; }
.hud-metric--hp .hud-label { grid-column: 1 / -1; }
.hud-hp { grid-column: 2; grid-row: 2; font-size: 11px; font-variant-numeric: tabular-nums; color: #a9ced5; text-shadow: none; white-space: nowrap; }
.hud-hp-track { grid-column: 1; grid-row: 2; height: 7px; background: #08272f; }
.hud-hp-fill { background: linear-gradient(#c2ffff, #52e5e9); box-shadow: 0 0 5px #36e3e677; }
.hud-metric--score { width: 104px; justify-items: start; }
.hud-metric--wave { width: 82px; display: flex; align-items: center; }
.hud-label { font-size: 8px; letter-spacing: .12em; color: #87acb7; }
.hud-score { font-size: 19px; line-height: 1; color: #c4edf0; text-shadow: 0 0 3px #54dfe533; font-variant-numeric: tabular-nums; }
.wave-slot { position: static; transform: none; border: 0; padding: 0; background: none; color: #b6e3e8; font-size: 12px; white-space: nowrap; }
.arena::before, .arena::after { width: 22px; height: 8px; pointer-events: none; border-width: 1px; opacity: .65; }
.exp-hud { width: min(320px, calc(100% - 32px)); padding: 8px 10px; background: #04121ceb; border-color: #22505b; }
.ability-status-button { float: right; margin: 0 0 6px 10px; padding: 5px 8px; border-color: #286472; background: #06212a; }
.exp-hud__labels { clear: both; font-size: 10px; }
.exp-hud__track { height: 3px; }
.exp-hud__fill { background: #5d9ecb; box-shadow: 0 0 4px #67adce66; }
.level-up-panel, .ability-status-panel, .game-over-panel { border-color: #4a969e; background: linear-gradient(135deg, #09232e, #040e1bf5); box-shadow: inset 0 0 0 4px #081822, inset 0 0 0 5px #173b46; }
.level-up-screen, .ability-status-screen, .game-over-screen { overflow: auto; }
.level-up-panel, .game-over-panel { max-height: 100%; overflow: auto; }
.movement-diagnostics {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 8px;
  width: min(390px, calc(100% - 16px));
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(80, 235, 227, 0.62);
  background: rgba(2, 9, 18, 0.9);
  color: #bdfcf4;
  box-shadow: inset 0 0 0 1px rgba(92, 223, 218, 0.1), 0 0 10px rgba(32, 210, 206, 0.16);
  font: 10px/1.38 Consolas, "Courier New", monospace;
  letter-spacing: 0;
  white-space: pre-wrap;
  pointer-events: none;
}
.movement-diagnostics[hidden] { display: none; }
.movement-diagnostics.is-frozen {
  border-color: rgba(255, 176, 89, 0.82);
  color: #ffe4b8;
  box-shadow: inset 0 0 0 1px rgba(255, 143, 72, 0.12), 0 0 10px rgba(255, 117, 56, 0.18);
}
@media (max-width: 660px) {
  .arena-hud { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 7px 12px; }
  .hud-title { grid-column: 1 / -1; }
  .arena-logo { width: 210px; }
  .hud-status { font-size: 6px; }
  .hud-slot--left { grid-column: 1; grid-row: 2; }
  .hud-slot--right { grid-column: 2; grid-row: 2; }
  .hud-metric--score { width: 80px; }
  .hud-metric--wave { width: 68px; }
  .arena { aspect-ratio: auto; height: min(620px, calc(100dvh - 24px)); min-height: 280px; }
  .game-shell { padding: 12px; }
  body { overflow: auto; }
  .level-up-panel { padding: 16px; }
  .game-over-screen { place-items: start center; padding: 10px 0; }
  .game-over-panel { width: min(460px, calc(100% - 20px)); max-height: calc(100% - 20px); padding: 1rem; }
  .game-over-layout { grid-template-columns: 1fr; gap: 0.8rem; }
  .game-over-summary { padding: 0 0 0.9rem; border-right: 0; border-bottom: 1px solid rgba(95, 222, 219, 0.2); }
  .game-over-score { margin-bottom: 0.3rem; }
  .record-form { margin-top: 0.55rem; }
}