@charset "UTF-8";
:root {
  --bg: #04060b;
  --ink: #dff6ff;
  --dim: #6f8fa1;
  --cyan: #5ff2ff;
  --cyan-soft: rgba(95, 242, 255, 0.18);
  --amber: #ffc46b;
  --red: #ff5a6e;
  --green: #8dffb0;
  --panel: rgba(5, 11, 17, 0.9);
  --line: rgba(95, 242, 255, 0.16);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

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

body { touch-action: none; }

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background: #03050a;
}

.hidden { display: none !important; }

/* ------------------------------------------------------------------ HUD */

#hud {
  position: fixed;
  inset: 0;
  z-index: 24;
  transition: opacity 0.2s ease;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.topbar {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(22px, env(safe-area-inset-left));
  right: max(22px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  transition: opacity 0.25s ease;
}

.brand-line { display: flex; align-items: center; gap: 12px; }

.brand-title {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 0 24px rgba(95, 242, 255, 0.25);
}

.brand-title .sl { color: var(--cyan); margin: 0 2px; }

.brand-tag {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--cyan);
  border: 1px solid rgba(95, 242, 255, 0.35);
  padding: 4px 7px 3px;
  border-radius: 2px;
  opacity: 0.85;
}

.brand-sub {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--dim);
}

.netbox { text-align: right; font-family: var(--mono); }

.netrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink);
  opacity: 0.9;
}

.netrow.small { margin-top: 6px; font-size: 9px; color: var(--dim); }

.pipe { color: rgba(95, 242, 255, 0.3); }

.led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(141, 255, 176, 0.9);
  animation: led 2.4s ease-in-out infinite;
}

.led.off { background: var(--red); box-shadow: 0 0 8px rgba(255, 90, 110, 0.8); animation: none; }

@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.stats {
  position: absolute;
  top: max(88px, calc(env(safe-area-inset-top) + 72px));
  left: max(22px, env(safe-area-inset-left));
  display: flex;
  gap: 22px;
  padding: 10px 16px 9px;
  background: linear-gradient(90deg, rgba(4, 10, 16, 0.55), rgba(4, 10, 16, 0));
  border-left: 1px solid rgba(95, 242, 255, 0.28);
  transition: opacity 0.25s ease;
}

.stat { display: flex; flex-direction: column; gap: 3px; min-width: 34px; }

.stat .k {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
}

.stat .v {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat .v.acc { color: var(--cyan); }
.stat.avgstat .v { color: var(--amber); }

/* -------------------------------------------------------------- reticle */

.reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  transition: opacity 0.16s ease;
}

.reticle .r {
  position: absolute;
  background: rgba(226, 253, 255, 0.75);
  box-shadow: 0 0 6px rgba(95, 242, 255, 0.55);
}
.reticle .rt { left: 50%; top: 0; width: 1px; height: 11px; }
.reticle .rb { left: 50%; bottom: 0; width: 1px; height: 11px; }
.reticle .rl { top: 50%; left: 0; height: 1px; width: 11px; }
.reticle .rr { top: 50%; right: 0; height: 1px; width: 11px; }

.reticle .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 7px rgba(95, 242, 255, 0.9);
}

.reticle .pending {
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}

.reticle .pending i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 5px rgba(255, 196, 107, 0.8);
  animation: pend 0.7s ease-in-out infinite;
}

@keyframes pend { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

body.scoped .reticle { opacity: 0; }

/* ---------------------------------------------------------------- scope */

.scope {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.scope.active { display: block; opacity: 1; }

.scope-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vmin, 94vh);
  height: min(80vmin, 94vh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(150, 255, 225, 0.22);
  box-shadow:
    0 0 0 200vmax rgba(1, 3, 6, 0.985),
    inset 0 0 11vmin rgba(0, 0, 0, 0.82),
    inset 0 0 2px rgba(150, 255, 225, 0.45);
}

.scope-ring::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(120, 255, 220, 0.05);
}

.scope-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vmin, 94vh);
  height: min(80vmin, 94vh);
  transform: translate(-50%, -50%);
  overflow: visible;
}

.scope-lines line { stroke: #c8ffe8; stroke-width: 1.1; opacity: 0.72; }
.scope-mil circle { fill: #c8ffe8; opacity: 0.5; }
.scope-mil line { stroke: #c8ffe8; stroke-width: 1; opacity: 0.45; }
.scope-ticks line { stroke: #c8ffe8; stroke-width: 1.3; opacity: 0.38; }
.scope-dot { fill: var(--red); filter: drop-shadow(0 0 3px rgba(255, 90, 110, 0.9)); }

.scope-info { position: absolute; inset: 0; }

.si {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--mono);
  opacity: 0.78;
  transition: opacity 0.2s ease;
}

.si b { font-size: 17px; font-weight: 500; color: #d9fff1; letter-spacing: 0.02em; }
.si span { font-size: 8px; letter-spacing: 0.24em; color: var(--dim); }

.si-tl { top: max(80px, calc(env(safe-area-inset-top) + 64px)); left: max(24px, env(safe-area-inset-left)); }
.si-tr { top: max(80px, calc(env(safe-area-inset-top) + 64px)); right: max(24px, env(safe-area-inset-right)); text-align: right; align-items: flex-end; }
.si-bl { bottom: max(26px, env(safe-area-inset-bottom)); left: max(24px, env(safe-area-inset-left)); }
.si-br { bottom: max(26px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right)); text-align: right; align-items: flex-end; }

body.scoped .stats,
body.scoped .shotlog,
body.scoped .ammo { opacity: 0; }

body.scoped .topbar { opacity: 0.35; }
body.scoped .reticle { opacity: 0; }

/* ------------------------------------------------------------- feedback */

.feedback {
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  font-family: var(--mono);
  will-change: transform, opacity;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
}

.feedback .fb-num { font-size: clamp(26px, 4.4vw, 44px); font-weight: 300; letter-spacing: 0.02em; line-height: 1; }
.feedback .fb-tag { font-size: 10px; letter-spacing: 0.34em; opacity: 0.9; }
.feedback .fb-sub { margin-top: 3px; font-size: 8px; letter-spacing: 0.18em; color: var(--dim); }

.feedback.perfect .fb-num { color: var(--amber); text-shadow: 0 0 26px rgba(255, 196, 107, 0.45); }
.feedback.perfect .fb-tag { color: var(--amber); }
.feedback.hit .fb-num { color: var(--cyan); text-shadow: 0 0 24px rgba(95, 242, 255, 0.35); }
.feedback.hit .fb-tag { color: var(--cyan); }
.feedback.miss .fb-num { color: rgba(255, 120, 135, 0.95); }
.feedback.miss .fb-tag { color: rgba(255, 120, 135, 0.9); }
.feedback.none .fb-num { color: var(--dim); }

/* -------------------------------------------------------------- shot log */

.shotlog::before {
  content: "SHOT LOG / 偏移度";
  display: block;
  padding-bottom: 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(95, 242, 255, 0.12);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(111, 143, 161, 0.6);
}

.shotlog {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  top: max(118px, calc(env(safe-area-inset-top) + 102px));
  width: 224px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  transition: opacity 0.25s ease;
}

.shotlog li {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: 10px;
  color: var(--dim);
  border-bottom: 1px solid rgba(95, 242, 255, 0.07);
  animation: logIn 0.25s ease both;
}

@keyframes logIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.shotlog .idx { color: rgba(95, 242, 255, 0.45); }
.shotlog .deg { color: var(--ink); font-variant-numeric: tabular-nums; }
.shotlog .tag { font-size: 9px; letter-spacing: 0.1em; }
.shotlog .ms { font-size: 8px; color: rgba(111, 143, 161, 0.75); }
.shotlog li.perfect .deg, .shotlog li.perfect .tag { color: var(--amber); }
.shotlog li.hit .deg, .shotlog li.hit .tag { color: var(--cyan); }
.shotlog li.miss .deg, .shotlog li.miss .tag { color: rgba(255, 90, 110, 0.9); }
.shotlog li.none .deg, .shotlog li.none .tag { color: var(--dim); }

/* ----------------------------------------------------------------- ammo */

.ammo {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 188px;
  font-family: var(--mono);
  text-align: right;
  transition: opacity 0.25s ease;
}

.ammo-top {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin-bottom: 7px;
}

.ammo-top span:last-child { color: var(--ink); letter-spacing: 0.06em; }

.rounds { display: flex; justify-content: flex-end; gap: 5px; }

.round {
  width: 7px;
  height: 26px;
  background: linear-gradient(180deg, rgba(255, 196, 107, 0.95), rgba(255, 140, 60, 0.55));
  box-shadow: 0 0 8px rgba(255, 196, 107, 0.28);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.round.spent { background: rgba(111, 143, 161, 0.18); box-shadow: none; opacity: 0.6; transform: scaleY(0.72); }

.reload { height: 2px; background: rgba(95, 242, 255, 0.12); margin-top: 9px; overflow: hidden; opacity: 0; transition: opacity 0.2s; }
.reload.on { opacity: 1; }
.reload i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 8px rgba(95, 242, 255, 0.8); }

.ammo-hint { margin-top: 7px; font-size: 8px; letter-spacing: 0.14em; color: rgba(111, 143, 161, 0.7); }
.ammo-hint.warn { color: var(--red); }

/* ---------------------------------------------------------------- toast */

.toast {
  position: absolute;
  left: 50%;
  bottom: 17%;
  transform: translate(-50%, 8px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--cyan);
  padding: 7px 14px;
  border: 1px solid rgba(95, 242, 255, 0.22);
  background: rgba(3, 9, 14, 0.72);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.toast.show { opacity: 0.92; transform: translate(-50%, 0); }

.gear {
  position: absolute;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(95, 242, 255, 0.22);
  background: rgba(4, 10, 16, 0.6);
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s, border-color 0.2s;
}

.gear:hover { color: var(--cyan); border-color: rgba(95, 242, 255, 0.5); }

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
}

body.scoped .vignette { opacity: 0; }

/* -------------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 40%, rgba(10, 30, 42, 0.42), rgba(2, 4, 8, 0.94) 72%),
    linear-gradient(180deg, rgba(2, 4, 8, 0.6), rgba(2, 4, 8, 0.96));
  backdrop-filter: blur(7px) saturate(0.9);
  -webkit-backdrop-filter: blur(7px) saturate(0.9);
  overflow: auto;
}

#settings { z-index: 60; }

.panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 36px 38px 24px;
  background: linear-gradient(150deg, rgba(10, 20, 30, 0.97), rgba(4, 8, 13, 0.985));
  border: 1px solid rgba(95, 242, 255, 0.22);
  box-shadow: 0 32px 110px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 242, 255, 0.25) transparent;
}

.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-thumb { background: rgba(95, 242, 255, 0.25); }

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(95, 242, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 242, 255, 0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  opacity: 0.75;
}

.panel > * { position: relative; z-index: 1; }

.kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--cyan);
  opacity: 0.8;
}

.menu h1 {
  margin: 16px 0 10px;
  font-size: clamp(40px, 7.4vw, 68px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #eaffff;
  text-shadow: 0 0 60px rgba(95, 242, 255, 0.14);
}

.lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.95;
  color: #9db7c6;
}

.brief {
  display: flex;
  gap: 34px;
  margin: 24px 0 22px;
  padding: 15px 0 14px;
  list-style: none;
  border-top: 1px solid rgba(95, 242, 255, 0.12);
  border-bottom: 1px solid rgba(95, 242, 255, 0.12);
}

.brief li { display: flex; flex-direction: column; gap: 4px; }
.brief b { font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--cyan); letter-spacing: 0.02em; }
.brief span { font-size: 9px; letter-spacing: 0.16em; color: var(--dim); }

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

.keys > div { display: flex; align-items: center; gap: 9px; }

.keys kbd {
  min-width: 58px;
  padding: 6px 8px 5px;
  border: 1px solid rgba(95, 242, 255, 0.18);
  background: rgba(95, 242, 255, 0.04);
  color: #c4e4ef;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-align: center;
  border-radius: 2px;
  white-space: nowrap;
}

.keys span { font-size: 10px; color: var(--dim); }

.menu-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

button { font-family: var(--mono); cursor: pointer; -webkit-appearance: none; appearance: none; }

button:focus-visible, input:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

.primary {
  border: 0;
  padding: 14px 30px 13px;
  background: var(--cyan);
  color: #021014;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  box-shadow: 0 0 34px rgba(95, 242, 255, 0.22);
  transition: transform 0.16s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 44px rgba(95, 242, 255, 0.32); }
.primary:active { transform: translateY(0); filter: brightness(0.95); }

.ghost {
  border: 1px solid rgba(95, 242, 255, 0.28);
  padding: 13px 22px 12px;
  background: transparent;
  color: #cfe8f2;
  font-size: 10px;
  letter-spacing: 0.12em;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ghost:hover { border-color: rgba(95, 242, 255, 0.6); background: rgba(95, 242, 255, 0.06); color: #fff; }

.loadline {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.loadline::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(255, 196, 107, 0.8);
  animation: led 1.2s ease-in-out infinite;
}

.loadline.ok { color: rgba(141, 255, 176, 0.8); }
.loadline.ok::before { background: var(--green); box-shadow: 0 0 8px rgba(141, 255, 176, 0.8); animation: none; }
.loadline.error { color: var(--red); }
.loadline.error::before { background: var(--red); box-shadow: 0 0 8px rgba(255, 90, 110, 0.8); animation: none; }

.footnote {
  margin-top: 12px;
  text-align: right;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(111, 143, 161, 0.45);
}

.touch-only { display: none; }
body.touch .touch-only { display: grid; }
body.touch .desktop-only { display: none; }

/* -------------------------------------------------------------- settings */

.settings { width: min(640px, 100%); }

.s-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }

.settings h2 {
  margin: 8px 0 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #eaffff;
}

.x {
  border: 1px solid rgba(95, 242, 255, 0.2);
  background: transparent;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 8px 12px;
  transition: color 0.2s, border-color 0.2s;
}

.x:hover { color: var(--ink); border-color: rgba(95, 242, 255, 0.5); }

.field { margin-top: 22px; }

.fl { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }

.fl label { font-size: 12px; letter-spacing: 0.06em; color: #b8d3e0; }

.fl output { font-family: var(--mono); font-size: 11px; color: var(--cyan); font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin: 16px 0 9px;
  background: rgba(95, 242, 255, 0.16);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(95, 242, 255, 0.6);
  transform: rotate(45deg);
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 1px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(95, 242, 255, 0.6);
  transform: rotate(45deg);
}

.hintline { font-size: 9px; line-height: 1.7; color: rgba(111, 143, 161, 0.8); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }

.switches { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 24px; }

.sw { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #b8d3e0; cursor: pointer; }

.sw input { accent-color: var(--cyan); width: 14px; height: 14px; cursor: pointer; }

.quick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.quick > span { font-size: 9px; letter-spacing: 0.12em; color: var(--dim); margin-right: 4px; }

.quick button {
  border: 1px solid rgba(95, 242, 255, 0.16);
  background: rgba(95, 242, 255, 0.03);
  color: #9fc6d4;
  font-size: 9px;
  padding: 5px 9px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.quick button:hover, .quick button.on { border-color: rgba(95, 242, 255, 0.52); color: var(--cyan); background: rgba(95, 242, 255, 0.08); }

.settings .menu-actions { margin-top: 28px; }

/* ----------------------------------------------------------------- touch */

#touch { position: fixed; inset: 0; z-index: 20; pointer-events: none; }

#lookZone { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }

#stick {
  position: absolute;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(30px, env(safe-area-inset-bottom));
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 1px solid rgba(95, 242, 255, 0.22);
  background: radial-gradient(circle, rgba(95, 242, 255, 0.06), rgba(3, 8, 12, 0.35));
  pointer-events: auto;
  touch-action: none;
}

#stick::before, #stick::after {
  content: "";
  position: absolute;
  background: rgba(95, 242, 255, 0.12);
}
#stick::before { left: 50%; top: 18%; bottom: 18%; width: 1px; }
#stick::after { top: 50%; left: 18%; right: 18%; height: 1px; }

#stickKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  border: 1px solid rgba(95, 242, 255, 0.42);
  background: rgba(95, 242, 255, 0.12);
  box-shadow: 0 0 22px rgba(95, 242, 255, 0.12);
  pointer-events: none;
}

.tbtns {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  justify-items: end;
  gap: clamp(8px, 1.3vmin, 12px);
  pointer-events: none;
}

.tbtn {
  pointer-events: auto;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 50%;
  border: 1px solid rgba(95, 242, 255, 0.3);
  background: rgba(4, 10, 16, 0.55);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.tbtn:active { transform: scale(0.95); }

.tbtn.fire {
  width: clamp(100px, 27vmin, 116px);
  height: clamp(100px, 27vmin, 116px);
  border-width: 2px;
  border-color: rgba(255, 90, 110, 0.68);
  color: #ffe2e6;
  background: radial-gradient(circle, rgba(255, 90, 110, 0.3), rgba(4, 10, 16, 0.72));
  box-shadow: 0 0 18px rgba(255, 90, 110, 0.18), inset 0 0 16px rgba(255, 90, 110, 0.06);
  font-size: clamp(13px, 1.9vmin, 16px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.tbtn.fire:active {
  transform: scale(0.96);
  background: radial-gradient(circle, rgba(255, 90, 110, 0.48), rgba(4, 10, 16, 0.75));
  box-shadow: 0 0 26px rgba(255, 90, 110, 0.3), inset 0 0 18px rgba(255, 90, 110, 0.1);
}

.tbtn.mid { width: clamp(62px, 15vmin, 72px); height: clamp(62px, 15vmin, 72px); font-size: clamp(9px, 1.4vmin, 11px); }
.tbtn.small { width: clamp(50px, 12vmin, 58px); height: clamp(50px, 12vmin, 58px); font-size: clamp(8px, 1.2vmin, 10px); }

.tbtn.jump {
  width: clamp(92px, 24vmin, 106px);
  height: clamp(92px, 24vmin, 106px);
  flex-direction: column;
  gap: 2px;
  border-color: rgba(95, 242, 255, 0.52);
  color: #d9fdff;
  background: radial-gradient(circle, rgba(95, 242, 255, 0.2), rgba(4, 10, 16, 0.7));
  box-shadow: 0 0 18px rgba(95, 242, 255, 0.14), inset 0 0 14px rgba(95, 242, 255, 0.05);
  font-size: clamp(11px, 1.5vmin, 13px);
  font-weight: 600;
}

.tbtn.jump:active {
  transform: scale(0.96);
  background: radial-gradient(circle, rgba(95, 242, 255, 0.36), rgba(4, 10, 16, 0.72));
}

.tbtn.jump svg { opacity: 0.88; }

.tbtn.on { background: rgba(95, 242, 255, 0.22); border-color: rgba(95, 242, 255, 0.7); color: #eaffff; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .brand-title { font-size: 22px; }
  .brand-sub { font-size: 8px; letter-spacing: 0.2em; }
  .stats { gap: 13px; padding: 8px 12px; }
  .stat .v { font-size: 15px; }
  .shotlog { display: none; }
  .si b { font-size: 14px; }
}

@media (max-width: 680px) {
  .topbar { top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); }
  .brand-tag { display: none; }
  .brand-sub { letter-spacing: 0.16em; font-size: 7px; }
  .netrow { font-size: 9px; gap: 6px; }
  .netrow.small { font-size: 8px; }
  .stats { top: max(66px, calc(env(safe-area-inset-top) + 54px)); left: max(14px, env(safe-area-inset-left)); gap: 11px; padding: 7px 10px; }
  .stat { min-width: 27px; }
  .stat .k { font-size: 7px; }
  .stat .v { font-size: 14px; }
  .stat.shots { display: none; }
  .panel { padding: 26px 22px 20px; }
  .menu h1 { margin-top: 13px; }
  .lead { font-size: 12px; }
  .brief { gap: 16px; margin: 18px 0; padding: 12px 0; }
  .brief b { font-size: 16px; }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  .grid2 { grid-template-columns: 1fr; gap: 0; }
  .scope-ring, .scope-svg { width: min(86vmin, 82vh); height: min(86vmin, 82vh); }
  .si-tl, .si-tr { top: max(70px, calc(env(safe-area-inset-top) + 56px)); }
  .si-tl, .si-bl { left: max(14px, env(safe-area-inset-left)); }
  .si-tr, .si-br { right: max(14px, env(safe-area-inset-right)); }
  .si b { font-size: 13px; }
  .toast { bottom: 24%; }
  .panel { max-height: calc(100vh - 24px); }
}

body.touch .shotlog { display: none; }
body.touch .gear {
  left: auto;
  right: max(14px, env(safe-area-inset-right));
  top: max(112px, calc(env(safe-area-inset-top) + 96px));
  bottom: auto;
  width: 30px;
  height: 30px;
  z-index: 22;
}
body.touch .ammo {
  top: max(108px, calc(env(safe-area-inset-top) + 92px));
  bottom: auto;
  left: max(14px, env(safe-area-inset-left));
  right: auto;
  width: 118px;
  text-align: left;
}

body.touch .ammo .rounds { justify-content: flex-start; gap: 4px; }
body.touch .ammo-top { font-size: 7px; letter-spacing: 0.1em; margin-bottom: 5px; }
body.touch .ammo .round { height: 13px; width: 5px; }
body.touch .ammo-hint { display: none; }
body.touch .stats { max-width: calc(100vw - 28px); }

@media (max-height: 560px) {
  .brand-sub, .brand-tag { display: none; }
  .stats { top: max(54px, calc(env(safe-area-inset-top) + 44px)); padding: 5px 10px; }
  .stat .v { font-size: 13px; }
  .si b { font-size: 13px; }
  .menu h1 { font-size: 36px; }
  .menu .brief { margin: 14px 0; padding: 10px 0; }
  .panel { padding-top: 22px; }
}

body.menu-open #hud { opacity: 0; }
body.touch.scoped .ammo { opacity: 1; }
body.touch .si-bl,
body.touch .si-br { display: none; }
body.scoped:not(.touch) .gear { opacity: 0; pointer-events: none; }

.errbar {
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(760px, calc(100vw - 24px));
  padding: 9px 14px;
  background: rgba(40, 4, 10, 0.95);
  border: 1px solid rgba(255, 90, 110, 0.5);
  color: #ffbcc4;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.fsbtn { left: max(64px, calc(env(safe-area-inset-left) + 64px)); }
body:not(.touch) .fsbtn { display: none; }
body.touch .fsbtn {
  left: auto;
  right: max(52px, calc(env(safe-area-inset-right) + 38px));
}
.gear.on { color: var(--cyan); border-color: rgba(95, 242, 255, 0.55); }
.ghost.on { color: var(--cyan); border-color: rgba(95, 242, 255, 0.55); }
.fs-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(111, 143, 161, 0.82);
}

@media (orientation: portrait) {
  .tbtns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
}

#btnAimT { grid-column: 2; grid-row: 1; }
#btnFireT { grid-column: 1; grid-row: 2; }
#btnJumpT { grid-column: 2; grid-row: 2; }
.tbtn.fire.cycling { opacity: 0.55; }

@media (orientation: landscape) {
  #btnFireT {
    position: relative;
    top: -28px;
  }
}

.scope-avg {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(200, 255, 232, 0.72);
  display: none;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
body.touch .scope-avg { display: block; }