:root {
  --bg: #07090b;
  --panel: rgba(12, 16, 20, 0.82);
  --line: rgba(255, 255, 255, 0.12);
  --accent: #ff8a3d;
  --accent-2: #4ad6c8;
  --alpha: #46b1ff;
  --bravo: #ff5a52;
  --text: #e8edf2;
  --muted: #93a1ad;
  --font: "Chakra Petch", "DIN Alternate", "Bahnschrift", "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* ノッチとホームインジケータの回避量。viewport-fit=cover なので自前で避ける */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

canvas { display: block; }

#viewport { position: fixed; inset: 0; }

.hidden { display: none !important; }

/* ============ 共通オーバーレイ ============ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  /* 中身がビューポートより高いとき、単なる center では上端が切れて
     スクロールしても戻れなくなる。safe center なら溢れた側に寄る */
  align-items: safe center;
  justify-content: safe center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 138, 61, 0.09), transparent 60%),
    linear-gradient(160deg, #05070a 0%, #0b1015 55%, #05070a 100%);
  overflow: auto;
}

.logo {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
}
.logo span { color: var(--accent); }

/* ============ ローディング ============ */
.loading-box { text-align: center; width: min(420px, 84vw); }
.loading-bar {
  margin: 26px 0 10px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}
.loading-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.25s ease;
}
.loading-text { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; }

/* ============ メニュー ============ */
.menu-inner {
  width: min(1180px, 94vw);
  padding: 32px 0 48px;
  text-align: center;
}
.menu-head { margin-bottom: 22px; }
.tagline {
  margin: 10px 0 0;
  color: var(--muted);
  letter-spacing: 0.22em;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
}

.menu-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  text-align: left;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  backdrop-filter: blur(6px);
}
.panel h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  letter-spacing: 0.14em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.panel h2 small { color: var(--accent); font-size: 0.62rem; letter-spacing: 0.22em; }

.loadout-list { display: flex; flex-direction: column; gap: 8px; }
.loadout {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.loadout:hover { border-color: rgba(255, 138, 61, 0.55); transform: translateX(2px); }
.loadout.active { border-color: var(--accent); background: rgba(255, 138, 61, 0.12); }
.loadout .icon { font-size: 1.5rem; text-align: center; }
.loadout h4 { margin: 0; font-size: 0.92rem; letter-spacing: 0.08em; }
.loadout p { margin: 2px 0 0; font-size: 0.7rem; color: var(--muted); }
.loadout .bars { display: flex; gap: 6px; margin-top: 6px; }
.loadout .bars i {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loadout .bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--v, 50%);
  background: var(--accent-2);
}

.field { margin-bottom: 14px; }
.field > label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.field > label b { color: var(--accent); }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1;
  padding: 8px 4px;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: 0.15s;
}
.seg button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.seg button.active { background: var(--accent); border-color: var(--accent); color: #10130f; font-weight: 700; }

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.keys { list-style: none; margin: 0; padding: 0; font-size: 0.76rem; }
.keys li { display: flex; align-items: center; gap: 6px; padding: 4px 0; color: var(--muted); }
.keys li span { margin-left: auto; color: var(--text); }
kbd {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 2px 6px;
  font: inherit;
  font-size: 0.68rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.note { font-size: 0.7rem; color: var(--muted); line-height: 1.7; margin: 12px 0 0; }
.hint { font-size: 0.66rem; color: rgba(147, 161, 173, 0.6); line-height: 1.6; margin: 6px 0 0; }
.hint b { color: rgba(200, 212, 222, 0.85); }

.primary-btn {
  margin-top: 22px;
  padding: 14px 46px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #10130f;
  background: linear-gradient(120deg, var(--accent), #ffb56b);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 138, 61, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255, 138, 61, 0.35); }
.ghost-btn {
  margin-top: 10px;
  padding: 11px 32px;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.ghost-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.35); }
.credit {
  margin-top: 18px;
  font-size: 0.68rem;
  color: rgba(147, 161, 173, 0.65);
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.credit .copyright { color: rgba(147, 161, 173, 0.42); letter-spacing: 0.12em; }

/* ============ HUD ============ */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}
#crosshair .ch {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
  --gap: 6px;
}
.ch-t { left: 50%; top: 50%; width: 2px; height: 7px; margin-left: -1px; transform: translateY(calc(-100% - var(--spread, 6px))); }
.ch-b { left: 50%; top: 50%; width: 2px; height: 7px; margin-left: -1px; transform: translateY(var(--spread, 6px)); }
.ch-l { left: 50%; top: 50%; width: 7px; height: 2px; margin-top: -1px; transform: translateX(calc(-100% - var(--spread, 6px))); }
.ch-r { left: 50%; top: 50%; width: 7px; height: 2px; margin-top: -1px; transform: translateX(var(--spread, 6px)); }
.ch-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
#crosshair.hidden-ch .ch, #crosshair.hidden-ch .ch-dot { opacity: 0; }

/* ============ 光学サイト ============ */
/* スコープ：円形の視野以外を黒く落とし、その上にレティクルを重ねる */
#scope {
  position: absolute;
  inset: 0;
  opacity: var(--scope-a, 0);
  transition: opacity 0.06s linear;
}
#scope.hidden { display: none; }
/* 中央だけ素通しにして、外周へ向けてケラレを作る */
#scope .scope-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 0 31vh,
    rgba(0, 0, 0, 0.28) 34vh,
    rgba(0, 0, 0, 0.92) 36.6vh,
    #000 38vh
  );
}
#scope .scope-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76vh;
  height: 76vh;
  transform: translate(-50%, -50%);
  overflow: visible;
}
#scope .rim { fill: none; stroke: rgba(0, 0, 0, 0.85); stroke-width: 6; }
#scope .cross { stroke: rgba(12, 14, 16, 0.9); stroke-width: 1.1; fill: none; }
#scope .stadia { stroke: rgba(12, 14, 16, 0.85); stroke-width: 0.9; fill: none; }
#scope .center { fill: #d9463c; }
#scope-zoom {
  position: absolute;
  right: calc(50% - 34vh);
  bottom: calc(50% - 30vh);
  font: 600 0.72rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.14em;
  color: rgba(210, 220, 226, 0.75);
}

/* 光学サイトを載せられない装備を選んだときの表示 */
#optic-field.disabled { opacity: 0.45; }
#optic-field.disabled .seg button { cursor: not-allowed; }
#optic-note { color: var(--muted); font-weight: 400; letter-spacing: 0.04em; }
#optic-desc { margin-top: 6px; }

#hitmarker {
  position: absolute;
  inset: 0;
  opacity: 0;
  stroke: #fff;
  stroke-width: 2.4;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}
#hitmarker.show { animation: hm 0.22s ease-out; }
#hitmarker.kill { stroke: #ff5a52; }
#hitmarker.friendly { stroke: #ffd45a; }
@keyframes hm {
  0% { opacity: 1; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.15); }
}

#scorebar {
  position: absolute;
  top: calc(14px + var(--sa-t));
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 70vw);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 12px;
  background: rgba(6, 9, 12, 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
#scorebar .team { display: flex; align-items: baseline; gap: 8px; font-size: 0.72rem; letter-spacing: 0.16em; }
#scorebar .team.bravo { justify-content: flex-end; }
#scorebar .tscore { font-size: 1.3rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* 数字がキル数だと読めるように、勝利キル数を分母として添える。
   上限のないモードでは JS 側で空にする */
#scorebar .tgoal { font-size: 0.68rem; color: var(--muted); letter-spacing: 0; margin-left: -5px; margin-right: -3px; }
#scorebar .alpha .tscore, #scorebar .alpha .tname { color: var(--alpha); }
#scorebar .bravo .tscore, #scorebar .bravo .tname { color: var(--bravo); }
#scorebar .mid { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
#scorebar .unit { font-size: 0.5rem; letter-spacing: 0.22em; color: var(--muted); }
#scorebar .timer { font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--text); }
/* 無制限では経過時間を出す。残り時間と読み違えないよう色で区別する */
#scorebar .timer.elapsed { color: var(--muted); }
#scorebar .timer.elapsed::after { content: ' 経過'; font-size: 0.6rem; letter-spacing: 0.1em; }
.scorebar-track {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--bravo);
  border-radius: 2px;
  overflow: hidden;
}
.scorebar-track i { display: block; height: 100%; width: 50%; background: var(--alpha); transition: width 0.3s; }

/* オートプレイ中の表示。手を離していることが一目で分かればよいので、
   視界の邪魔にならない左上のミニマップ直下に小さく置く */
#autoplay-tag {
  position: absolute;
  /* ミニマップ（top 22 + 高さ 176）の真下に置く。左端も揃える */
  top: calc(206px + var(--sa-t));
  left: calc(22px + var(--sa-l));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  background: rgba(6, 9, 12, 0.66);
  border-left: 3px solid var(--accent);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--accent);
}
#autoplay-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: auto-blink 1.5s ease-in-out infinite;
}
@keyframes auto-blink { 50% { opacity: 0.15; } }

#killfeed {
  position: absolute;
  top: calc(96px + var(--sa-t));
  right: calc(18px + var(--sa-r));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 0.76rem;
}
.kf-row {
  padding: 4px 10px;
  background: rgba(6, 9, 12, 0.6);
  border-left: 3px solid var(--line);
  border-radius: 3px;
  animation: kfIn 0.2s ease-out;
  white-space: nowrap;
}
.kf-row.mine { border-left-color: var(--accent); background: rgba(255, 138, 61, 0.16); }
.kf-row.friendly { border-left-color: #ffd45a; background: rgba(255, 212, 90, 0.14); }
.kf-row.friendly .w { color: #ffd45a; }
.kf-row .n-alpha { color: var(--alpha); }
.kf-row .n-bravo { color: var(--bravo); }
.kf-row .w { color: var(--muted); margin: 0 6px; }
@keyframes kfIn { from { opacity: 0; transform: translateX(16px); } }

#bottom-left { position: absolute; left: calc(22px + var(--sa-l)); bottom: calc(22px + var(--sa-b)); }

/* 分隊表示。自分の体力バーの真上に置いて、同じ「味方の状態」として読ませる。
   10v10 では味方が 9 人になり、1 人 1 行の名前入りだと縦 150px を食って
   画面を塞ぐ。交戦中に本当に要るのは「何人生きているか」と「誰か瀕死か」の
   2 つだけなので、人数を数字で出し、個々は縦バー 1 本に潰した。
   名前と戦績は Tab のスコアボードにあるので、ここでは持たせない */
#squad { margin-bottom: 9px; }
.sq-head {
  margin-bottom: 4px;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.sq-head b { color: var(--alpha); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.sq-pips { display: flex; gap: 3px; }
.sq {
  position: relative;
  width: 14px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  transform: skewX(-18deg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* 体力は下から積む。横に伸ばすより、細い枠に収めても残量を読み取りやすい */
.sq i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--alpha);
  transition: height 0.15s linear;
}
.sq.low i { background: #ff9d3d; }
.sq.down { background: rgba(147, 161, 173, 0.12); }
.sq.down b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* 枠の傾きを打ち消して数字だけ立てる */
  transform: skewX(18deg);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  color: #cfd8e0;
  /* 明るい砂地の上でも数字が沈まないように後ろを暗く敷く */
  text-shadow: 0 0 3px #000, 0 1px 1px #000;
}

.hp-wrap { display: flex; align-items: center; gap: 10px; }
.hp-bar {
  width: 210px;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  transform: skewX(-18deg);
}
.hp-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #6de08a, #b8f06a);
  transition: width 0.15s linear, background 0.3s;
}
.hp-bar.low i { background: linear-gradient(90deg, #ff5a52, #ff9d3d); }
.hp-num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

#streaks { display: flex; gap: 8px; margin-top: 12px; }
.streak-chip {
  padding: 6px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(6, 9, 12, 0.6);
  color: var(--muted);
}
.streak-chip.ready { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 12px rgba(74, 214, 200, 0.25); }
.streak-chip.ready::after { content: " [F]"; opacity: 0.7; }

#bottom-right { position: absolute; right: calc(22px + var(--sa-r)); bottom: calc(22px + var(--sa-b)); text-align: right; }

/* 敵側の情報。左下の分隊表示と対になる位置に、同じ見た目で置く。
   敵は発見したぶんしか分からないので、ここに出るのは遭遇した人数と編成人数だけ。
   生存数は出さない（それが分かると索敵そのものが要らなくなる） */
#contacts {
  margin-bottom: 5px;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}
#contacts b { display: inline-block; color: var(--bravo); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
/* 識別しない設定では編成人数しか出ない。試合中ずっと動かない数字なので、
   生存数と読み違えないよう色を落として静的な情報だと分かるようにする */
#contacts.static b { color: rgba(200, 212, 222, 0.72); }
/* 新しい敵と遭遇した瞬間だけ数字を跳ねさせる。数字が増えたことに気づかないと
   「まだ何人いる」の推測につながらない */
#contacts.bump b { animation: contactBump 0.5s ease-out; }
@keyframes contactBump {
  0% { transform: scale(1); color: #ffd45a; }
  30% { transform: scale(1.35); color: #ffd45a; }
  100% { transform: scale(1); }
}
.weapon-name { font-size: 0.82rem; letter-spacing: 0.2em; color: var(--muted); }
.ammo { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ammo small { font-size: 1rem; color: var(--muted); margin-left: 6px; font-weight: 400; }
.ammo.empty { color: var(--bravo); animation: blink 0.6s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.equip-row { margin-top: 6px; font-size: 0.86rem; color: var(--muted); }

#minimap {
  position: absolute;
  left: calc(22px + var(--sa-l));
  top: calc(22px + var(--sa-t));
  width: 176px;
  height: 176px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 9, 12, 0.55);
}

#damage-vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(190, 20, 12, 0.75) 100%);
  transition: opacity 0.25s;
}

#hitdir { position: absolute; inset: 0; }
.hit-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 26px solid rgba(255, 70, 60, 0.85);
  transform-origin: 50% 130px;
  animation: hitFade 1.1s ease-out forwards;
}
@keyframes hitFade { to { opacity: 0; } }

#center-toast {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-shadow: 0 2px 8px #000;
  opacity: 0;
  transition: opacity 0.25s;
  text-align: center;
}
#center-toast .warn { color: #ffd45a; }
#killstreak-toast {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  color: var(--accent-2);
  text-shadow: 0 2px 8px #000;
  opacity: 0;
  transition: opacity 0.3s;
}

#respawn {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(60, 6, 4, 0.35);
}
#respawn.show { display: flex; }
.respawn-inner { text-align: center; text-shadow: 0 2px 10px #000; }
.respawn-inner h3 { margin: 0; font-size: 2rem; letter-spacing: 0.3em; color: var(--bravo); }
.respawn-inner p { margin: 10px 0 4px; letter-spacing: 0.14em; }
.respawn-inner b { font-size: 1.6rem; color: var(--accent); }
.respawn-inner span { font-size: 0.8rem; color: var(--muted); }

#obituary { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); font-size: 0.8rem; color: var(--muted); }

/* ============ スコアボード ============ */
.sb-inner { width: min(900px, 94vw); }
.sb-inner h2 { text-align: center; letter-spacing: 0.3em; font-size: 1rem; color: var(--muted); }
.sb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.sb-team {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.sb-team h3 { margin: 0 0 10px; font-size: 0.86rem; letter-spacing: 0.2em; display: flex; justify-content: space-between; }
.sb-team h3.alpha { color: var(--alpha); }
.sb-team h3.bravo { color: var(--bravo); }
.sb-team table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.sb-team th {
  text-align: left;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 400;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sb-team th:not(:first-child), .sb-team td:not(:first-child) { text-align: right; width: 54px; }
.sb-team td { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; }
.sb-team tr.me td { color: var(--accent); font-weight: 700; }
.sb-team tr.dead td { opacity: 0.42; }

/* ============ ポーズ / リザルト ============ */
.pause-inner, .result-inner {
  width: min(560px, 92vw);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px;
}
.result-inner { width: min(860px, 94vw); }
.pause-inner h2 { letter-spacing: 0.3em; margin-top: 0; }
#result-title { font-size: clamp(2rem, 7vw, 3.2rem); letter-spacing: 0.22em; margin: 0; }
#result-title.win { color: var(--accent-2); }
#result-title.lose { color: var(--bravo); }
#result-sub { color: var(--muted); letter-spacing: 0.18em; margin: 6px 0 22px; }
.result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.result-stats div {
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.result-stats b { display: block; font-size: 1.4rem; }
.result-stats span { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--muted); }
#result-boards { margin-bottom: 20px; text-align: left; }

/* ============ クリック復帰 ============ */
#click-resume {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 8, 0.55);
  letter-spacing: 0.2em;
  cursor: pointer;
}

/* ============ モバイル ============ */
#touch-ui { position: fixed; inset: 0; z-index: 15; }
#tc-look { position: absolute; right: 0; top: 0; width: 55%; height: 100%; }
.tc-stick {
  position: absolute;
  left: calc(26px + var(--sa-l));
  bottom: calc(26px + var(--sa-b));
  width: 130px;
  height: 130px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
/* 縁を狙って外すと動けなくなるので、見た目より一回り広く指を受ける */
.tc-stick::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; }
.tc-stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.tc-btn {
  position: absolute;
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 96px;
  height: 96px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  right: calc(26px + var(--sa-r));
  bottom: calc(30px + var(--sa-b));
}
.tc-btn.small { width: 62px; height: 62px; font-size: 0.6rem; }
/* 右端からの距離と下端からの距離で四隅を組む。円が食い合うと押し間違えるので、
   どの2つを取っても矩形が交差しない値を選んである（RELOAD と SWAP が特に近い） */
#tc-ads { right: calc(136px + var(--sa-r)); bottom: calc(46px + var(--sa-b)); }
#tc-jump { right: calc(30px + var(--sa-r)); bottom: calc(140px + var(--sa-b)); }
#tc-reload { right: calc(106px + var(--sa-r)); bottom: calc(152px + var(--sa-b)); }
#tc-swap { right: calc(178px + var(--sa-r)); bottom: calc(114px + var(--sa-b)); }

/* ---- 入力方式による文言・操作説明の出し分け ----
   既定はマウス＋キーボード向け。仮想パッドを出したときだけタッチ向けに差し替える */
.lbl-touch { display: none; }
.keys-touch { display: none; }
body.touch .lbl-pointer { display: none; }
body.touch .lbl-touch { display: inline; }
body.touch .keys-pointer { display: none; }
body.touch .keys-touch { display: block; }
.keys-touch kbd { min-width: 0; letter-spacing: 0.04em; }

/* ---- 画面右上のスコアボード／ポーズボタン（タッチ専用） ----
   Tab と Esc がない端末向けの入口。指の腹で押せるよう 44px 角を確保する */
.tc-corner {
  position: absolute;
  top: calc(12px + var(--sa-t));
  right: calc(12px + var(--sa-r));
  width: 44px;
  height: 44px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(6, 9, 12, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  pointer-events: auto;
}
/* 右上に横並びで置く。右からポーズ(44) → SCORE(66) → AUTO(66) */
.tc-corner.wide { width: 66px; font-size: 0.56rem; letter-spacing: 0.1em; }
#tc-score { right: calc(64px + var(--sa-r)); }
#tc-auto { right: calc(136px + var(--sa-r)); }
#tc-auto.on { color: var(--accent); border-color: var(--accent); }

/* ---- 縦持ちのときの回転促し ----
   水平 FOV の実測（adaptFov 適用後）は横持ち 111〜122 度に対し、
   スマホ縦持ちが 56〜68 度、タブレット縦持ちが 79 度。スマホの縦は視野が
   半分近くまで落ちるうえ仮想パッドが画面下半分を占めるので塞ぐが、
   タブレットは縦でも成立するので通す。600px はスマホ最大幅（430pt 前後）と
   タブレット最小幅（744pt 前後）の間。JS を待たず初回描画から出せるよう
   body.touch ではなく pointer:coarse で判定する */
#rotate-hint { display: none; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  #rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: linear-gradient(160deg, #05070a 0%, #0b1015 55%, #05070a 100%);
  }
}
.rotate-inner svg {
  width: 92px;
  height: 92px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: rotHint 2.6s ease-in-out infinite;
}
.rotate-inner h2 { margin: 18px 0 10px; font-size: 1.2rem; letter-spacing: 0.16em; }
.rotate-inner p { margin: 0; font-size: 0.78rem; line-height: 1.9; color: var(--muted); }
@keyframes rotHint {
  0%, 55%, 100% { transform: rotate(0deg); }
  78%, 92% { transform: rotate(-90deg); }
}

/* ---- タッチ操作時の HUD 逃がし ----
   幅ではなく body.touch で判定しているのは、横持ちのスマホが 850px 前後の
   幅を持ち、幅基準だと PC と同じ配置になってボタンと重なるため。
   体力と弾数はパッドの真上ではなく、スティックとボタン群に挟まれた
   下辺中央の帯へ置く。真上に積むと背の低い横持ちでキルフィードとぶつかる */
body.touch #bottom-left { left: calc(168px + var(--sa-l)); bottom: calc(16px + var(--sa-b)); }
body.touch #bottom-right { right: calc(252px + var(--sa-r)); bottom: calc(16px + var(--sa-b)); }
body.touch .hp-bar { width: 140px; }
body.touch .hp-num { font-size: 1.15rem; }
body.touch .ammo { font-size: 1.7rem; }
body.touch .ammo small { font-size: 0.8rem; }
body.touch .weapon-name { font-size: 0.7rem; letter-spacing: 0.14em; }
body.touch .equip-row { margin-top: 2px; font-size: 0.74rem; }
body.touch .sq { width: 12px; height: 17px; }
body.touch #streaks { margin-top: 8px; gap: 6px; }
body.touch .streak-chip { padding: 3px 8px; font-size: 0.6rem; }
body.touch #killfeed { font-size: 0.66rem; }
body.touch .kf-row { padding: 3px 8px; }
body.touch #minimap { width: 116px; height: 116px; left: calc(12px + var(--sa-l)); top: calc(12px + var(--sa-t)); }
body.touch #autoplay-tag { top: calc(136px + var(--sa-t)); left: calc(12px + var(--sa-l)); font-size: 0.58rem; padding: 3px 8px; }
body.touch #contacts { margin-bottom: 2px; font-size: 0.52rem; }
body.touch #scorebar { width: min(340px, 56vw); top: calc(10px + var(--sa-t)); padding: 6px 10px 10px; }
body.touch #scorebar .tscore { font-size: 1.05rem; }
body.touch #scorebar .tgoal { font-size: 0.6rem; }
body.touch #scorebar .timer { font-size: 0.86rem; }
body.touch #scorebar .unit { font-size: 0.46rem; letter-spacing: 0.16em; }

/* 横持ちで背が低いときは、上下方向をさらに詰める */
@media (orientation: landscape) and (max-height: 480px) {
  body.touch #minimap { width: 92px; height: 92px; }
  body.touch #autoplay-tag { top: calc(110px + var(--sa-t)); }
  /* 右上のボタン列とスコアバーが食い合う。iPhone SE 横（幅 667）だと
     既定の並びは右端から 202px を占め、340px のスコアバーの右端に届く。
     押しやすさを削らないよう高さは 44px のまま、横幅と間隔だけ詰める */
  body.touch #scorebar { width: min(300px, 46vw); }
  body.touch .tc-corner { right: calc(10px + var(--sa-r)); }
  body.touch .tc-corner.wide { width: 56px; }
  body.touch #tc-score { right: calc(58px + var(--sa-r)); }
  body.touch #tc-auto { right: calc(118px + var(--sa-r)); }
  body.touch #killfeed { top: calc(66px + var(--sa-t)); font-size: 0.6rem; }
  body.touch #bottom-left { left: calc(148px + var(--sa-l)); bottom: calc(12px + var(--sa-b)); }
  body.touch #bottom-right { right: calc(220px + var(--sa-r)); bottom: calc(12px + var(--sa-b)); }
  body.touch .hp-bar { width: 118px; }
  body.touch .ammo { font-size: 1.5rem; }
  body.touch .tc-btn { width: 76px; height: 76px; font-size: 0.66rem; }
  body.touch .tc-btn.small { width: 54px; height: 54px; font-size: 0.55rem; }
  body.touch .tc-stick { width: 108px; height: 108px; bottom: calc(20px + var(--sa-b)); }
  body.touch #tc-ads { right: calc(112px + var(--sa-r)); bottom: calc(36px + var(--sa-b)); }
  body.touch #tc-jump { right: calc(26px + var(--sa-r)); bottom: calc(116px + var(--sa-b)); }
  body.touch #tc-reload { right: calc(90px + var(--sa-r)); bottom: calc(126px + var(--sa-b)); }
  body.touch #tc-swap { right: calc(154px + var(--sa-r)); bottom: calc(96px + var(--sa-b)); }
}

/* 縦持ちは回転促しで塞ぐが、案内を消しても最低限読める配置は残しておく */
@media (orientation: portrait) {
  body.touch #scorebar { width: min(360px, 92vw); top: calc(8px + var(--sa-t)); }
  body.touch #minimap { top: calc(74px + var(--sa-t)); width: 104px; height: 104px; }
  body.touch #killfeed { top: calc(190px + var(--sa-t)); }
  body.touch #bottom-left { left: calc(14px + var(--sa-l)); bottom: calc(210px + var(--sa-b)); }
  body.touch #bottom-right { right: calc(14px + var(--sa-r)); bottom: calc(210px + var(--sa-b)); }
}

@media (max-width: 720px) {
  #minimap { width: 116px; height: 116px; left: calc(12px + var(--sa-l)); top: calc(12px + var(--sa-t)); }
  .hp-bar { width: 130px; }
  .ammo { font-size: 1.6rem; }
  #killfeed { font-size: 0.66rem; top: calc(78px + var(--sa-t)); right: calc(10px + var(--sa-r)); }
}

/* ---- 背の低い横持ちでのメニュー ----
   縦 400px ほどしかなく、既定の余白のままだと出撃ボタンまで 3 画面以上
   スクロールさせることになる。余白と本文を削って段組みを 3 列に戻し、
   出撃ボタンは下端に貼り付けてどこからでも押せるようにする */
@media (pointer: coarse) and (max-height: 480px) {
  .menu-inner { padding: 14px 0 10px; }
  .menu-head { margin-bottom: 12px; }
  .logo { font-size: 1.55rem; }
  .tagline { margin: 6px 0 0; }
  .menu-cols { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 10px; }
  .panel { padding: 12px; }
  .panel h2 { margin-bottom: 10px; padding-bottom: 6px; }
  .field { margin-bottom: 10px; }
  .keys li { padding: 2px 0; }
  .credit { margin-top: 12px; font-size: 0.6rem; line-height: 1.6; }
  /* 下端に貼り付ける。裏の段組みが透けて読みにくくなるので、
     背景色と同じ影を大きく広げて帯にし、フッターとして見せる */
  #start-btn {
    position: sticky;
    bottom: calc(4px + var(--sa-b));
    z-index: 1;
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px 0;
    font-size: 0.92rem;
    box-shadow: 0 8px 0 8px #06080b, 0 -10px 18px 8px rgba(6, 8, 11, 0.92);
  }
}