/* Arena (.io) mode — Phase 1 styles. Mostly scoped under #arenaRoot so it
   cannot affect the Classic game UI. */

.arena-head-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 7px;
  margin: 8px 0 12px;
}

.arena-head-choice {
  min-height: 36px;
  border: 1px solid rgba(86, 199, 255, 0.3);
  border-radius: 8px;
  background: rgba(3, 6, 9, 0.48);
  color: #edf7ff;
  font-family: var(--font-arcade, "Courier New", monospace);
  font-size: 12px;
  cursor: pointer;
}

.arena-head-choice:hover,
.arena-head-choice.active {
  border-color: rgba(70, 242, 164, 0.75);
  background: rgba(70, 242, 164, 0.16);
  color: #46f2a4;
}

#arenaRoot {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  z-index: 50;
  background: #04070d;
  overflow: hidden;
  font-family: var(--font-arcade, "Courier New", monospace);
  color: #edf7ff;
}

@supports (height: 100dvh) {
  #arenaRoot {
    height: 100dvh;
  }
}

#arenaRoot[hidden] {
  display: none;
}

#arenaCanvas {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  image-rendering: auto;
  cursor: none; /* we draw our own reticle in arena.js */
  touch-action: none;
}

/* On the death screen, bring the real mouse cursor back so the player can find
   and click Respawn / Main Menu (the death overlay is pointer-events:none, so
   the cursor falls through to the canvas — set it everywhere to be safe). */
#arenaRoot.show-cursor,
#arenaRoot.show-cursor #arenaCanvas,
#arenaRoot .arena-death {
  cursor: default;
}

/* HUD */
.arena-hud {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.arena-score-box {
  background: rgba(3, 6, 9, 0.58);
  border: 1px solid rgba(86, 199, 255, 0.28);
  border-radius: 10px;
  padding: 7px 12px;
  min-width: 92px;
}

.arena-score-box .arena-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #94a8b8;
  text-transform: uppercase;
}

.arena-score-box .arena-value {
  font-size: 22px;
  font-weight: bold;
  color: #46f2a4;
  text-shadow: 0 0 12px rgba(70, 242, 164, 0.6);
}

.arena-mobile-hud {
  display: none;
}

.arena-effects {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #ffd23f;
  min-height: 14px;
  white-space: nowrap;
}

.arena-ammo {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #ff8c1a;
}

.arena-ammo span {
  font-weight: bold;
  color: #ffd23f;
}

.arena-combo {
  margin-top: 4px;
  min-height: 14px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #ffcf5a;
  text-shadow: 0 0 10px rgba(255, 207, 90, 0.45);
}

/* Sensitivity slider on the start screen. */
.arena-setting {
  gap: 6px;
}

.arena-setting input[type="range"] {
  width: 100%;
  accent-color: #46f2a4;
  cursor: pointer;
}

.arena-leaderboard {
  background: rgba(3, 6, 9, 0.58);
  border: 1px solid rgba(86, 199, 255, 0.28);
  border-radius: 10px;
  padding: 7px 11px;
  min-width: 138px;
}

.arena-leaderboard .arena-label {
  font-size: 12px;
  letter-spacing: 2px;
  color: #94a8b8;
  text-transform: uppercase;
  margin-bottom: 6px;
}

#arenaRanks,
#arenaBest {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arena-rank {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  padding: 2px 0;
}

.arena-rank-pos {
  width: 16px;
  color: #ffcf5a;
  font-weight: bold;
}

.arena-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--arena-dot, #46f2a4);
}

.arena-rank-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arena-rank-score {
  color: #56c7ff;
  font-weight: bold;
}

.arena-rank.arena-me .arena-rank-name {
  color: #46f2a4;
  font-weight: bold;
}

/* Current biome name, centred at the top. */
.arena-biome {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  font-family: var(--font-arcade, "Courier New", monospace);
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(237, 247, 255, 0.7);
  text-shadow: 0 0 12px rgba(86, 199, 255, 0.5);
  pointer-events: none;
}


/* The single overlay slot: tutorial, pause and result are mutually exclusive
   siblings inside it. The slot itself never intercepts touches — only a
   visible overlay does. */
.arena-overlay-slot {
  position: absolute;
  inset: 0;
  z-index: 78;
  pointer-events: none;
}

.arena-overlay-slot > * {
  pointer-events: auto;
}

/* Pause control: top centre — the one spot outside both steering halves and
   symmetric across the left/right-handed mirror (UX-04). */
.arena-pause-btn {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 207, 90, 0.7);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 30, 44, 0.82), rgba(6, 12, 20, 0.86));
  color: #ffcf5a;
  font-size: 15px;
  line-height: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.arena-pause-btn:hover {
  border-color: #ffcf5a;
  box-shadow: 0 0 22px rgba(255, 207, 90, 0.35);
}

.arena-pause-btn[aria-pressed="true"] {
  background: rgba(255, 207, 90, 0.22);
}

/* Pause overlay (shares the slot with the tutorial and the result dialog). */
.arena-pause {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(3, 6, 9, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

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

.arena-pause-card {
  font-family: var(--font-arcade, "Courier New", monospace);
}

.arena-pause-settings {
  display: grid;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid rgba(148, 168, 184, 0.28);
  border-bottom: 1px solid rgba(148, 168, 184, 0.28);
}

.arena-pause-setting {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #edf7ff;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.arena-pause-setting input {
  width: 24px;
  min-height: 24px;
  flex: 0 0 auto;
  accent-color: #46f2a4;
}

.arena-pause-setting select {
  min-height: 44px;
  max-width: 180px;
  padding: 6px 8px;
  border: 1px solid rgba(86, 199, 255, 0.42);
  border-radius: 8px;
  background: #0b1119;
  color: #edf7ff;
}

.arena-pause-card .overlay-actions button.confirming {
  background: rgba(255, 93, 115, 0.22);
  border-color: #ff5d73;
  color: #ffdce3;
}

.arena-hint {
  position: absolute;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 80;
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(70, 242, 164, 0.42);
  border-radius: 12px;
  background: rgba(3, 6, 9, 0.88);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.4);
  color: #edf7ff;
  font-size: 14px;
}

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

/* On touch devices the tutorial must never swallow steering drags: it sits
   over the play area, and once the fonts settle it can cover half the screen.
   Let touches fall through to the canvas; only the dismiss button stays
   tappable. Desktop keeps the click-absorbing card so clicks don't fire
   rockets through it. */
@media (pointer: coarse) {
  .arena-hint { pointer-events: none; }
  .arena-hint button { pointer-events: auto; }
}

.arena-hint-title {
  color: #46f2a4;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.arena-hint button {
  justify-self: end;
  margin-top: 4px;
  padding: 8px 14px;
  border: 1px solid rgba(70, 242, 164, 0.5);
  border-radius: 8px;
  background: rgba(70, 242, 164, 0.14);
  color: #46f2a4;
  font-family: inherit;
  cursor: pointer;
}

/* Current solo objective / challenge. */
.arena-solo-objective {
  background: rgba(3, 6, 9, 0.6);
  border: 1px solid rgba(255, 210, 63, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: #ffd23f;
  max-width: 220px;
}

/* On-screen BOOST/FIRE buttons. Hidden by default; shown on touch devices.
   They live on the ACTION side (right by default) while steering is confined to
   the opposite side, so one thumb steers and the other works the buttons. */
.arena-touch-controls {
  display: none;
}

@media (pointer: coarse) {
  /* Default (right-handed): steer on the RIGHT, so BOOST/FIRE live on the LEFT. */
  .arena-touch-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    left: max(20px, env(safe-area-inset-left));
    bottom: calc(max(22px, env(safe-area-inset-bottom)) + 64px);
    z-index: 70;
  }
  /* Left-handed: steer on the LEFT, so the action buttons move to the RIGHT. */
  #arenaRoot.arena-left .arena-touch-controls {
    left: auto;
    right: max(20px, env(safe-area-inset-right));
  }
}

.arena-touch-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid #04080c;
  outline: 2px solid #eaf6ff;
  outline-offset: 0;
  background: #0b1119;
  color: #eaf6ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-arcade, "Courier New", monospace);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  box-shadow: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: transform 0.06s ease, filter 0.06s ease;
}

.arena-touch-btn[hidden] {
  display: none;
}

.arena-touch-btn .ico {
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}

.arena-touch-btn .ico,
.arena-action-label {
  transition: opacity 0.12s ease;
}

/* Optional on-screen turn arrows (alternative to the drag joystick). Shown only
   when the player chose "Arrows" and on touch devices, on the steering side. */
.arena-arrows {
  display: none;
}

@media (pointer: coarse) {
  /* Arrows sit on the steering side: default RIGHT, left-handed LEFT. */
  #arenaRoot.arrows-mode .arena-arrows {
    display: flex;
    gap: 16px;
    position: absolute;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(max(22px, env(safe-area-inset-bottom)) + 64px);
    z-index: 70;
  }
  #arenaRoot.arrows-mode.arena-left .arena-arrows {
    right: auto;
    left: max(20px, env(safe-area-inset-left));
  }
}

.arena-arrow-btn {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  border: 2px solid #04080c;
  outline: 2px solid #eaf6ff;
  outline-offset: 0;
  background: #0b1119;
  color: #56c7ff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: transform 0.06s ease, filter 0.06s ease;
}

.arena-arrow-btn.active {
  transform: scale(0.9);
  filter: brightness(1.4);
}

.arena-boost-btn {
  color: #56c7ff;
}

.arena-fire-btn {
  position: relative;
  color: #ff8c1a;
}

.arena-touch-btn.active {
  transform: scale(0.9);
  filter: brightness(1.4);
}

.arena-boost-btn[aria-disabled="true"] .ico,
.arena-boost-btn[aria-disabled="true"] .arena-action-label {
  opacity: 0.35;
}

.arena-ammo-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #04080c;
  border-radius: 50%;
  background: #ff8c1a;
  color: #0b1119;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}

.arena-fire-btn.ammo-ready {
  animation: arenaActionIn 150ms ease-out;
}

@keyframes arenaActionIn {
  from { transform: scale(0.82); }
  to { transform: scale(1); }
}

/* Centred toast for objective completion. */
.arena-toast {
  position: absolute;
  top: calc(max(16px, env(safe-area-inset-top)) + 48px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 65;
  background: rgba(3, 6, 9, 0.82);
  border: 1px solid rgba(255, 210, 63, 0.6);
  border-radius: 10px;
  padding: 10px 20px;
  font-family: var(--font-arcade, "Courier New", monospace);
  font-size: 16px;
  font-weight: bold;
  color: #ffd23f;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.arena-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.arena-feed {
  position: absolute;
  top: calc(max(16px, env(safe-area-inset-top)) + 88px);
  right: max(16px, env(safe-area-inset-right));
  z-index: 58;
  display: grid;
  gap: 6px;
  width: min(270px, calc(100vw - 32px));
  pointer-events: none;
}

.arena-feed-item {
  padding: 7px 10px;
  border: 1px solid rgba(86, 199, 255, 0.22);
  border-radius: 8px;
  background: rgba(3, 6, 9, 0.62);
  color: var(--event-color, #edf7ff);
  border-color: var(--event-color, rgba(86, 199, 255, 0.22));
  font-size: 12px;
  line-height: 1.25;
  animation: feedIn 180ms ease;
}

.arena-death-reason {
  max-width: min(620px, calc(100vw - 36px));
  text-align: center;
}

@keyframes feedIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Death overlay */
.arena-death {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(3, 6, 9, 0.78);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

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

.arena-death h2 {
  font-size: 52px;
  margin: 0;
  color: #ff5d73;
  text-shadow: 0 0 24px rgba(255, 93, 115, 0.6);
  letter-spacing: 4px;
}

.arena-death .arena-death-line {
  font-size: 20px;
  color: #94a8b8;
}

.arena-death .arena-death-line strong {
  color: #46f2a4;
  font-size: 28px;
}

.arena-death-actions {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  pointer-events: auto;
}

.arena-death-actions button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 13px 30px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.arena-death-actions button:hover {
  transform: translateY(-1px);
}

#arenaRespawn {
  background: linear-gradient(135deg, #46f2a4, #56c7ff);
  color: #03210f;
  box-shadow: 0 8px 24px rgba(70, 242, 164, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

#arenaRespawn:hover {
  box-shadow: 0 10px 30px rgba(86, 199, 255, 0.55);
}

#arenaExitDead {
  background: linear-gradient(180deg, rgba(20, 30, 44, 0.82), rgba(6, 12, 20, 0.86));
  border-color: rgba(148, 168, 184, 0.45);
  color: #c3d2e0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#arenaExitDead:hover {
  color: #edf7ff;
  border-color: rgba(86, 199, 255, 0.55);
  box-shadow: 0 0 22px rgba(86, 199, 255, 0.28);
}

@media (pointer: coarse), (max-height: 500px) {
  /* #arenaRoot prefix is load-bearing: the plain `.arena-death h2` rule that used
     to live here was dead code, beaten on specificity by `#arenaRoot .arena-death h2`
     later in this file. At 800x360 that clamp resolved to 54.4px and pushed the
     card to 598px tall in a 360px viewport - 274px hidden, with GAME OVER, the
     death-cause pill and the personal-best line all above the fold. */
  #arenaRoot .arena-death h2 { font-size: 38px; }

  .arena-hud {
    display: none;
  }

  .arena-mobile-hud {
    position: absolute;
    inset: 0;
    z-index: 58;
    display: block;
    pointer-events: none;
  }

  .arena-mobile-topbar {
    --arena-score-width: 84px;
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: 0;
    right: 0;
    height: 44px;
    pointer-events: none;
  }

  .arena-score-chip,
  .arena-rank-chip {
    position: absolute;
    top: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid #94a8b8;
    border-radius: 8px;
    background: #0b1119;
    font-family: var(--font-arcade, "Courier New", monospace);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Weights swapped deliberately. The rank chip had the full two-tone ring while
     the score - the primary in-play datum - had a 1px hairline, so "#20" at spawn
     was the loudest thing on screen and the score the quietest. */
  .arena-score-chip {
    left: max(12px, env(safe-area-inset-left));
    width: var(--arena-score-width);
    padding: 0 8px;
    border: 2px solid #04080c;
    outline: 2px solid #eaf6ff;
    outline-offset: 0;
    color: #46f2a4;
    font-size: 20px;
  }

  .arena-rank-chip {
    right: max(12px, env(safe-area-inset-right));
    /* Wider than the old 48px: it now reads "3/21", not "#3". */
    width: 60px;
    padding: 0 4px;
    border: 1px solid #94a8b8;
    color: #56c7ff;
    font-size: 12px;
  }

  .arena-combo-track {
    position: absolute;
    top: 36px;
    left: max(12px, env(safe-area-inset-left));
    width: var(--arena-score-width);
    height: 3px;
    overflow: hidden;
    background: #0b1119;
  }

  .arena-combo-track[hidden] {
    display: none;
  }

  .arena-combo-track span {
    display: block;
    width: 0;
    height: 100%;
    background: #ffcf5a;
  }

  .arena-powerups {
    position: absolute;
    top: 52px;
    left: max(12px, env(safe-area-inset-left));
    display: flex;
    gap: 6px;
    min-height: 28px;
  }

  .arena-powerup-pill {
    position: relative;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #94a8b8;
    border-radius: 6px;
    background: #0b1119;
    color: #edf7ff;
    font-family: var(--font-arcade, "Courier New", monospace);
    font-size: 12px;
    line-height: 1;
  }

  .arena-powerup-pill::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--effect-progress, 100%);
    height: 2px;
    background: #ffcf5a;
  }

  .arena-pause-btn {
    top: max(6px, calc(env(safe-area-inset-top) - 4px));
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 2px solid #04080c;
    outline: 2px solid #eaf6ff;
    outline-offset: 0;
    background: #0b1119;
    color: #ffcf5a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .arena-pause-btn:hover,
  .arena-pause-btn[aria-pressed="true"] {
    border-color: #04080c;
    background: #0b1119;
    box-shadow: none;
    filter: brightness(1.25);
  }

  .arena-toast {
    top: calc(max(10px, env(safe-area-inset-top)) + 88px);
    /* Centred and capped rather than edge-to-edge. Full width cost 10.78% of a
       360px-tall landscape screen for one line of text, in an opaque band 42px
       above the player - where a snake approaching from the north appears. The
       cap also stops a tablet (pointer: coarse, 1366 wide) getting a 1342px bar.
       420px still fits ~33 characters, comfortably over the 26 the copy needs. */
    left: 50%;
    width: min(calc(100% - 24px), 420px);
    transform: translateX(-50%);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 10px;
    border: 0;
    outline: 0;
    border-radius: 8px;
    background: transparent;
    color: #ffcf5a;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .arena-toast.show {
    transform: translateX(-50%);
    /* Two-tone ring, as spec section 6 required for the message slot and which the
       build omitted. Without it the band's edge measured 1.90:1 mean and 1.03:1 in
       dark biomes, so its visual intrusion swung from invisible to a hard black bar
       depending on the backdrop. Text legibility was never at risk (12.92:1). */
    border: 2px solid #04080c;
    outline: 2px solid #eaf6ff;
    background: #0b1119;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .arena-touch-controls {
    display: flex;
    flex-direction: row;
    gap: 16px;
    position: absolute;
    left: max(16px, env(safe-area-inset-left));
    right: auto;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px));
    height: 60px;
    z-index: 70;
    pointer-events: none;
  }

  #arenaRoot.arena-left .arena-touch-controls {
    left: auto;
    right: max(16px, env(safe-area-inset-right));
    flex-direction: row-reverse;
  }

  .arena-touch-btn,
  .arena-arrow-btn {
    width: 60px;
    height: 60px;
    pointer-events: auto;
  }

  #arenaRoot.arrows-mode .arena-arrows {
    display: flex;
    gap: 16px;
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    left: auto;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px));
    height: 60px;
    z-index: 70;
    pointer-events: none;
  }

  #arenaRoot.arrows-mode.arena-left .arena-arrows {
    right: auto;
    left: max(16px, env(safe-area-inset-left));
  }

  .arena-arrow-btn {
    pointer-events: auto;
  }


  .arena-rank-chip.improved {
    animation: arenaRankImprove 250ms ease-out;
  }

  #arenaRoot.arena-reduced-motion .arena-touch-btn,
  #arenaRoot.arena-reduced-motion .arena-arrow-btn,
  #arenaRoot.arena-reduced-motion .arena-pause-btn,
  #arenaRoot.arena-reduced-motion .arena-toast,
  #arenaRoot.arena-reduced-motion .arena-rank-chip {
    animation: none;
    transition: none;
  }

  .arena-alltime,
  .arena-solo-objective,
  .arena-feed,
  .arena-biome {
    display: none;
  }
}

@keyframes arenaRankImprove {
  50% { transform: scale(1.08); }
}

/* Approved game-over dialog */
#arenaRoot .arena-death {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 93, 115, 0.1), transparent 42%),
    rgba(3, 6, 9, 0.82);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}

#arenaRoot .arena-death[hidden] {
  display: none;
}

.arena-death-card {
  width: min(620px, 100%);
  display: grid;
  gap: 20px;
  justify-items: center;
  padding: clamp(20px, 5vw, 36px);
  border: 1px solid rgba(255, 93, 115, 0.35);
  border-radius: 14px;
  background: rgba(16, 23, 33, 0.96);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 93, 115, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: center;
}

.arena-mode-tag {
  margin: 0;
  color: #91a4b5;
  font-size: 0.74rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.arena-mode-tag strong {
  color: #edf7ff;
}

#arenaRoot .arena-death h2 {
  margin: 0;
  color: #ff5d73;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255, 93, 115, 0.55);
}

.arena-death-cause {
  margin: 0;
  padding: 6px 14px;
  border: 1px solid rgba(255, 93, 115, 0.4);
  border-radius: 999px;
  background: rgba(255, 93, 115, 0.08);
  color: #ff9fb0;
  font-size: 0.85rem;
}

.arena-score-block {
  display: grid;
  gap: 2px;
}

.arena-score-label {
  color: #91a4b5;
  font-size: 0.74rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.arena-final-score {
  color: #46f2a4;
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 18px rgba(70, 242, 164, 0.5);
}

#arenaRoot .arena-death-best {
  min-height: 1.4em;
  margin: 0;
  color: #91a4b5;
  font-size: 0.92rem;
}

#arenaRoot .arena-death-best strong {
  color: #ffcf5a;
  font-variant-numeric: tabular-nums;
}

#arenaRoot .arena-death-best.record {
  padding: 3px 11px;
  border: 1px solid rgba(255, 207, 90, 0.6);
  border-radius: 999px;
  background: rgba(255, 207, 90, 0.14);
  color: #ffe08a;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: arenaBestPulse 1.6s ease infinite;
}

@keyframes arenaBestPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 207, 90, 0.25); }
  50% { box-shadow: 0 0 20px rgba(255, 207, 90, 0.6); }
}

.arena-death-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.arena-death-stats li {
  display: grid;
  gap: 3px;
  padding: 12px 8px;
  border: 1px solid #2a4053;
  border-radius: 10px;
  background: rgba(8, 16, 24, 0.9);
}

.arena-death-stats span {
  color: #91a4b5;
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.arena-death-stats strong {
  color: #edf7ff;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.arena-score-notice {
  min-height: 1.35em;
  margin: -8px 0 0;
  color: #91a4b5;
  font-size: 0.78rem;
}

#arenaRoot .arena-death-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
  pointer-events: auto;
}

#arenaRoot .arena-death-actions button {
  min-height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1px;
}

#arenaRoot #arenaRespawn {
  border: 0;
  background: linear-gradient(135deg, #46f2a4, #56c7ff);
  color: #03210f;
  box-shadow: 0 8px 24px rgba(70, 242, 164, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#arenaRoot #arenaExitDead {
  border: 1px solid rgba(148, 168, 184, 0.45);
  background: linear-gradient(180deg, rgba(20, 30, 44, 0.82), rgba(6, 12, 20, 0.86));
  color: #c3d2e0;
}

/* Short viewports (landscape phones). The card is sized by width-based clamps,
   which at 800x360 produced a 598px card in a 360px-tall viewport. Cap the two
   biggest type ramps and tighten the spacing so the whole card fits without
   scrolling and GAME OVER stays on screen. */
@media (max-height: 500px) {
  #arenaRoot .arena-death {
    align-items: start;
  }

  .arena-death-card {
    gap: 10px;
    padding: 12px 16px;
  }

  #arenaRoot .arena-death h2 {
    font-size: 26px;
  }

  .arena-final-score {
    font-size: 2.2rem;
  }

  .arena-death-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 420px) {
  #arenaRoot .arena-death {
    align-items: start;
  }

  .arena-death-card {
    gap: 16px;
    padding: 20px 16px;
  }

  .arena-death-stats {
    grid-template-columns: 1fr 1fr;
  }

  .arena-death-stats li:last-child {
    grid-column: 1 / -1;
  }

  #arenaRoot .arena-death-actions {
    grid-template-columns: 1fr;
  }
}

.arena-death-best {
  color: #ffcf5a;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255, 207, 90, 0.45);
}

.arena-death-best.record {
  color: #ffe08a;
  animation: bestPulse 1.4s ease infinite;
}

@keyframes bestPulse {
  0%, 100% { text-shadow: 0 0 12px rgba(255, 207, 90, 0.45); }
  50% { text-shadow: 0 0 22px rgba(255, 207, 90, 0.9); }
}