:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #100d2b; }
body { touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }

.arena { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 18%, #46388e, #15112f 72%); }
#game { display: block; width: 100%; height: 100%; }

.scoreboard {
  position: absolute;
  z-index: 4;
  top: calc(9px + var(--safe-top));
  left: 50%;
  display: flex;
  align-items: stretch;
  min-width: min(560px, 62vw);
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 12px rgba(10, 6, 35, .52));
}
.player-card, .match-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 2px solid rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
}
.player-card { flex: 1; gap: 12px; padding: 7px 16px; font-weight: 900; letter-spacing: .05em; }
.player-card strong { font-size: 29px; line-height: 1; }
.player-card span { font-size: 12px; white-space: nowrap; }
.player-card--red { border-radius: 18px 0 0 18px; background: linear-gradient(135deg, rgba(231,59,118,.92), rgba(135,23,74,.9)); }
.player-card--blue { border-radius: 0 18px 18px 0; background: linear-gradient(135deg, rgba(49,140,236,.9), rgba(49,54,157,.92)); }
.match-clock { flex-direction: column; min-width: 112px; padding: 4px 13px; background: rgba(22,18,59,.92); }
.match-clock span { font-size: 25px; font-weight: 950; line-height: 1; }
.match-clock small { margin-top: 3px; color: #c8c3ff; font-size: 8px; font-weight: 900; letter-spacing: .12em; }

.health-panel {
  position: absolute;
  z-index: 4;
  top: calc(14px + var(--safe-top));
  left: calc(14px + var(--safe-left));
  width: min(272px, 31vw);
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  background: rgba(16,13,43,.75);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}
.health-panel__title { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.health-panel__title b { font-size: 15px; }
.health-track { height: 9px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.16); }
.health-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #59ef76, #d5ff68); transition: width .18s ease, background .18s ease; }
.item-name { min-height: 13px; margin-top: 6px; color: #ffd8f0; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.weapon-description { margin-top: 3px; color: #d8d4ff; font-size: 9px; font-weight: 750; line-height: 1.25; }

.danger-banner {
  position: absolute;
  z-index: 5;
  top: calc(82px + var(--safe-top));
  left: 50%;
  padding: 9px 18px;
  border: 2px solid #fff7a8;
  border-radius: 999px;
  transform: translateX(-50%);
  color: #281221;
  background: #ffdc55;
  box-shadow: 0 0 24px #ff4ec7;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
  animation: danger-pulse .42s ease-in-out infinite alternate;
}
.connection-status {
  position: absolute;
  z-index: 4;
  top: calc(14px + var(--safe-top));
  right: calc(14px + var(--safe-right));
  max-width: 220px;
  padding: 8px 11px;
  border-radius: 12px;
  color: #ddd9ff;
  background: rgba(16,13,43,.7);
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.match-gate {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(65,45,137,.34), rgba(13,10,35,.72));
}
.match-gate[hidden] { display: none; }
.match-gate__card {
  display: grid;
  justify-items: center;
  min-width: min(430px, 72vw);
  padding: 22px 32px;
  border: 2px solid rgba(255,255,255,.62);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(67,44,144,.95), rgba(24,17,62,.95));
  box-shadow: 0 22px 80px rgba(4,2,21,.66), 0 0 42px rgba(83,239,255,.2);
  text-align: center;
}
.match-gate__card span { color: #bfefff; font-size: 11px; font-weight: 950; letter-spacing: .18em; }
.match-gate__card strong {
  min-height: 78px;
  margin: 3px 0;
  color: #fff36d;
  font-size: clamp(58px, 13vw, 92px);
  font-weight: 950;
  line-height: .9;
  filter: drop-shadow(0 0 18px rgba(255,79,200,.68));
}
.match-gate__card p { margin: 6px 0 0; color: #fff; font-size: 16px; font-weight: 900; }
.match-rules { display: grid; gap: 4px; margin-top: 13px; color: #d9d5ff; font-size: 9px; font-weight: 850; letter-spacing: .035em; }
.invite-copy {
  pointer-events: auto;
  margin-top: 14px;
  padding: 11px 16px;
  border: 0;
  border-radius: 13px;
  color: #21183e;
  background: #9cf579;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}
.invite-url { max-width: min(520px, 65vw); margin-top: 8px; overflow: hidden; color: #c8c3ff; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.touch-controls { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.touch-controls button {
  pointer-events: auto;
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 62px;
  border: 2px solid rgba(255,255,255,.58);
  border-radius: 22px;
  color: #fff;
  background: rgba(21,17,57,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.27), 0 8px 22px rgba(0,0,0,.28);
  font-size: 25px;
  font-weight: 950;
  backdrop-filter: blur(7px);
}
.touch-controls button.is-down { transform: translateY(3px) scale(.96); background: rgba(255,255,255,.3); box-shadow: 0 2px 8px rgba(0,0,0,.32); }
.drive-pad {
  position: absolute;
  left: calc(18px + var(--safe-left));
  bottom: calc(12px + var(--safe-bottom));
  display: grid;
  grid-template: repeat(3, 58px) / repeat(3, 58px);
  grid-template-areas: ". up ." "left center right" ". down .";
  gap: 2px;
}
.drive-pad button { min-width: 58px; min-height: 58px; border-radius: 18px; }
.drive-up { grid-area: up; color: #1d2b16 !important; background: rgba(137,244,111,.9) !important; }
.drive-left { grid-area: left; }
.drive-right { grid-area: right; }
.drive-down { grid-area: down; }
.drive-center {
  grid-area: center;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.42);
  font-size: 24px;
}
.actions { position: absolute; right: calc(18px + var(--safe-right)); bottom: calc(18px + var(--safe-bottom)); display: flex; align-items: end; gap: 14px; }
.actions .jump, .actions .fire { grid-template-rows: auto auto; gap: 2px; padding: 8px; border-radius: 50%; }
.actions .jump { min-width: 66px; min-height: 66px; }
.actions .fire { min-width: 94px; min-height: 94px; }
.actions .jump { background: rgba(36,125,207,.75); }
.actions .fire { background: rgba(195,37,104,.78); }
.actions button span { font-size: 9px; letter-spacing: .05em; }
.actions button b { font-size: 20px; }
body.controls-locked .touch-controls { opacity: .2; }
body.controls-locked .touch-controls button { pointer-events: none; }

.result {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: min(420px, 84vw);
  padding: 27px;
  border: 2px solid rgba(255,255,255,.62);
  border-radius: 28px;
  transform: translate(-50%, -50%);
  text-align: center;
  background: linear-gradient(145deg, rgba(66,43,139,.97), rgba(23,17,61,.97));
  box-shadow: 0 24px 90px rgba(4,2,21,.7), 0 0 45px rgba(255,65,186,.25);
}
.result span { color: #d4cfff; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.result h1 { margin: 8px 0 0; font-size: clamp(30px, 8vw, 54px); }
.result p { margin: 5px 0 17px; color: #ffe167; font-size: 30px; font-weight: 950; }
.result button { border: 0; border-radius: 16px; padding: 13px 24px; color: #23163e; background: #9cf579; font-weight: 950; cursor: pointer; }

.rotate-hint { display: none; }
@keyframes danger-pulse { to { transform: translateX(-50%) scale(1.045); filter: brightness(1.14); } }

@media (hover: hover) and (pointer: fine) {
  .touch-controls { opacity: .48; }
  .touch-controls:hover { opacity: 1; }
}

@media (max-width: 900px) {
  .scoreboard { min-width: 52vw; }
  .player-card { padding: 6px 9px; }
  .player-card span { display: none; }
  .match-clock { min-width: 88px; }
  .health-panel { top: calc(58px + var(--safe-top)); left: calc(8px + var(--safe-left)); }
  .connection-status { top: calc(8px + var(--safe-top)); right: calc(8px + var(--safe-right)); max-width: 145px; }
}

@media (orientation: portrait) and (max-width: 700px) {
  .rotate-hint {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 7px;
    padding: 30px;
    text-align: center;
    background: rgba(13,10,35,.94);
  }
  .rotate-hint b { font-size: 28px; }
  .rotate-hint span { color: #c8c3ff; }
}

@media (max-height: 430px) {
  .scoreboard { top: calc(5px + var(--safe-top)); }
  .player-card, .match-clock { min-height: 44px; }
  .match-clock span { font-size: 20px; }
  .health-panel { padding: 7px 9px; }
  .danger-banner { top: calc(58px + var(--safe-top)); }
  .drive-pad { left: calc(10px + var(--safe-left)); bottom: calc(6px + var(--safe-bottom)); grid-template-rows: repeat(3, 48px); grid-template-columns: repeat(3, 48px); }
  .drive-pad button { min-width: 48px; min-height: 48px; border-radius: 15px; font-size: 21px; }
  .actions { right: calc(10px + var(--safe-right)); bottom: calc(9px + var(--safe-bottom)); gap: 10px; }
  .actions .jump { min-width: 58px; min-height: 58px; }
  .actions .fire { min-width: 82px; min-height: 82px; }
  .match-gate__card { min-width: min(370px, 62vw); padding: 14px 24px; }
  .match-gate__card strong { min-height: 55px; font-size: 60px; }
  .match-gate__card p { font-size: 13px; }
}