/* ============================================================
   FORGENOX · SPACE SHOOTER — style.css
   ------------------------------------------------------------
   Мобильный макет: игра живёт внутри корпуса-«телефона» (портретный
   прямоугольник 9 : 19.5), а НЕ на всё окно. Это позволяет ровно
   перенести сцену на сайт как мобильное окно.

   Все внутренние размеры считаются от ширины экрана телефона:
     --u = 1% ширины экрана  (ставится из main.js при resize)

   Тёмная тема + glassmorphism + голографический sheen — тот же
   визуальный язык, что в Ufo/styles.css и chimera.css.
   ============================================================ */

:root {
  --accent-1: #22d3ee;
  --accent-2: #818cf8;
  --accent-3: #e879f9;

  --blob-1: rgba(34, 211, 238, 0.5);
  --blob-2: rgba(129, 140, 248, 0.5);
  --blob-3: rgba(232, 121, 249, 0.34);
  --orb-glow: rgba(129, 140, 248, 0.35);
  --dot: #a5b4fc;
  --sheen: linear-gradient(100deg,
    #67e8f9 0%, #a5b4fc 22%, #f0abfc 40%,
    #fde68a 55%, #f0abfc 70%, #a5b4fc 86%, #67e8f9 100%);

  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.58);
  --text-faint: rgba(255, 255, 255, 0.34);

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-bg-strong: rgba(12, 16, 26, 0.6);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* запасная единица (1% ширины экрана); main.js уточняет её точно */
  --u: 3.9px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100lvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #04050a;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  background: #04050a;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   СЦЕНА — тёмный «стол», по центру которого стоит телефон
   ============================================================ */
.stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(8px, 1.4vh, 18px);
  padding: clamp(8px, 1.6vh, 22px);
  overscroll-behavior: none;
  touch-action: none;
  background:
    radial-gradient(70% 50% at 50% 40%, rgba(129, 140, 248, 0.10), transparent 72%),
    radial-gradient(46% 34% at 10% 90%, rgba(34, 211, 238, 0.08), transparent 72%),
    radial-gradient(46% 34% at 92% 10%, rgba(232, 121, 249, 0.08), transparent 72%),
    #04050a;
}

.stage__caption {
  position: relative; z-index: 1;
  font-family: var(--mono);
  font-size: clamp(9px, 1.15vh, 13px);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-faint);
}
.stage__caption span { color: var(--text-secondary); }

/* ============================================================
   КОРПУС ТЕЛЕФОНА
   ============================================================ */
.device {
  --bezel: clamp(7px, 1.15vh, 13px);
  --radius: clamp(30px, 4.4vh, 54px);
  position: relative;
  z-index: 1;
  /* портрет 9 : 19.5, вписанный в окно (и по высоте, и по ширине) */
  aspect-ratio: 9 / 19.5;
  height: min(90vh, calc(90vw * 19.5 / 9));
  border-radius: var(--radius);
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.05) 24%,
      rgba(255, 255, 255, 0.02) 52%,
      rgba(0, 0, 0, 0.45) 78%,
      rgba(255, 255, 255, 0.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 42px 92px rgba(0, 0, 0, 0.72),
    -26px 0 80px rgba(34, 211, 238, 0.07),
    26px 0 80px rgba(232, 121, 249, 0.07);
}

/* декоративные боковые кнопки */
.device__btn {
  position: absolute; border-radius: 3px; z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.device__btn--silent { left: -2px; top: 15%; width: 3px; height: 3.4%; }
.device__btn--volup  { left: -2px; top: 21%; width: 3px; height: 6.4%; }
.device__btn--voldn  { left: -2px; top: 28.5%; width: 3px; height: 6.4%; }
.device__btn--power  { right: -2px; top: 24%; width: 3px; height: 9%; }

/* ---------- ЭКРАН (обёртка всей игры) ---------- */
.device__screen {
  position: absolute;
  inset: var(--bezel);
  border-radius: calc(var(--radius) - var(--bezel));
  overflow: hidden;
  background: #05060a;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 44px rgba(0, 0, 0, 0.85);
}

/* ---------- Аврора-фон ---------- */
.aurora {
  position: absolute; inset: -12%; z-index: 0;
  filter: blur(clamp(20px, 3.4vmin, 60px));
  opacity: 0.85; pointer-events: none;
}
.aurora__blob {
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen; will-change: transform;
}
.aurora__blob--1 {
  width: 96%; height: 62%; left: -16%; top: -10%;
  background: radial-gradient(circle at 32% 32%, var(--blob-1), transparent 66%);
  animation: drift1 26s var(--ease-out) infinite alternate;
}
.aurora__blob--2 {
  width: 88%; height: 58%; right: -16%; top: 16%;
  background: radial-gradient(circle at 62% 42%, var(--blob-2), transparent 66%);
  animation: drift2 32s var(--ease-out) infinite alternate;
}
.aurora__blob--3 {
  width: 92%; height: 60%; left: 8%; bottom: -16%;
  background: radial-gradient(circle at 50% 50%, var(--blob-3), transparent 66%);
  animation: drift3 38s var(--ease-out) infinite alternate;
}
@keyframes drift1 { to { transform: translate(14%, 16%) scale(1.18) rotate(18deg); } }
@keyframes drift2 { to { transform: translate(-12%, 14%) scale(0.86) rotate(-22deg); } }
@keyframes drift3 { to { transform: translate(-16%, -14%) scale(1.22) rotate(14deg); } }

/* ---------- Канвасы ---------- */
#bg   { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
#game { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

.vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.62) 100%);
}

/* ---------- Экран загрузки ---------- */
.loader {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(var(--u) * 4.5);
  background:
    radial-gradient(62% 46% at 50% 44%, rgba(129, 140, 248, 0.12), transparent 70%),
    #05060a;
  transition: opacity 0.55s var(--ease-out), visibility 0.55s var(--ease-out);
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__spin {
  position: relative;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
}
.loader__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent-1);
  border-right-color: var(--accent-2);
  animation: loader-spin 1s linear infinite;
}
.loader__ring--outer {
  inset: -4px;
  border-color: rgba(255, 255, 255, 0.05);
  border-top-color: var(--accent-2);
  border-left-color: var(--accent-3);
  animation: loader-spin 1.7s linear infinite reverse;
}
.loader__core {
  position: absolute; inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, var(--accent-1));
  box-shadow: 0 0 26px 4px var(--accent-1);
  animation: loader-pulse 1.25s var(--ease-out) infinite;
}
.loader__brand {
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.6);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--text-faint);
  animation: loader-pulse 1.7s var(--ease-out) infinite;
}

@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* ---------- Dynamic island + блик стекла ---------- */
.device__island {
  position: absolute; z-index: 20; pointer-events: none;
  top: calc(var(--u) * 3.2); left: 50%; transform: translateX(-50%);
  width: calc(var(--u) * 27); height: calc(var(--u) * 5.4);
  border-radius: 999px;
  background: #010204;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 6px rgba(0, 0, 0, 0.7);
}
.device__glare {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(114deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0) 76%,
    rgba(255, 255, 255, 0.055) 100%);
  mix-blend-mode: screen;
}

/* ---------- HUD ---------- */
.hud {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.hud.is-on { opacity: 1; }

.hud__row {
  position: absolute; top: calc(var(--u) * 12); left: 0; right: 0;
  display: flex; justify-content: center; gap: calc(var(--u) * 5);
}
.hud__stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }

.hud__k {
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.4); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
}
.hud__v {
  font-size: calc(var(--u) * 5.2); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

.hud__hp {
  position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 22);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.6);
}
.hpbar {
  width: calc(var(--u) * 36); height: calc(var(--u) * 1.6);
  border: 1px solid var(--glass-border); border-radius: 999px;
  overflow: hidden; background: rgba(255, 255, 255, 0.05);
}
.hpbar__fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.15s linear, background 0.3s var(--ease-out);
}
.hud__shield {
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.2); letter-spacing: 0.14em;
  color: var(--accent-2);
  opacity: 0; transition: opacity 0.2s var(--ease-out);
}
.hud__shield.is-on { opacity: 1; }

/* ---------- Оверлеи (меню / game over / победа) ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--u) * 5);
  background: rgba(3, 4, 8, 0.5);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.55s var(--ease-out);
}
.overlay.is-on { opacity: 1; pointer-events: auto; }

.panel {
  width: 100%;
  max-width: calc(var(--u) * 86);
  max-height: 100%;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--u) * 7) calc(var(--u) * 6);
  text-align: center;
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--u) * 6);
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(16px) scale(0.985);
  transition: transform 0.6s var(--ease-out);
}
.overlay.is-on .panel { transform: none; }

.panel__eyebrow {
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.6); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint);
}
.panel__title {
  margin-top: calc(var(--u) * 2);
  font-size: calc(var(--u) * 12.5);
  font-weight: 700; line-height: 0.96; letter-spacing: -0.045em;
  background: var(--sheen); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: holosheen 8s linear infinite;
  will-change: background-position;
}
.panel__title span { opacity: 0.72; }
@keyframes holosheen { 0% { background-position: 0% center; } 100% { background-position: -220% center; } }

.panel__lede {
  margin: calc(var(--u) * 4) auto 0; max-width: 46ch;
  font-size: calc(var(--u) * 3.1); line-height: 1.55;
  color: var(--text-secondary);
}
.panel__lede b { color: var(--text-primary); font-weight: 600; }

.keys {
  list-style: none; margin: calc(var(--u) * 5) auto 0;
  display: flex; flex-direction: column; gap: calc(var(--u) * 2.2);
  font-size: calc(var(--u) * 3); color: var(--text-secondary);
}
kbd {
  font-family: var(--mono); font-size: calc(var(--u) * 2.6);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.7); border-radius: calc(var(--u) * 1.4);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.cta {
  margin-top: calc(var(--u) * 6);
  padding: calc(var(--u) * 3.2) calc(var(--u) * 8);
  font-family: inherit; font-size: calc(var(--u) * 3.2); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #05060a; cursor: pointer;
  border: none; border-radius: 999px;
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2), var(--accent-3));
  box-shadow: 0 10px 34px rgba(129, 140, 248, 0.35);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 44px rgba(129, 140, 248, 0.5); }
.cta:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; }
.cta kbd { color: #05060a; border-color: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.12); }

.panel__hint {
  margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 2.4); letter-spacing: 0.08em;
  color: var(--text-faint);
}

.score {
  margin-top: calc(var(--u) * 5);
  display: flex; justify-content: center; gap: calc(var(--u) * 8);
}
.score__cell { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); }
.score__v { font-size: calc(var(--u) * 9); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Док (палитры + звук) ---------- */
.dock {
  position: absolute; left: 50%; bottom: calc(var(--u) * 4.5);
  transform: translateX(-50%);
  z-index: 7;
  display: flex; align-items: center; gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 4);
  border: 1px solid var(--glass-border); border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 1;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.dock.is-off {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}
.dock__label {
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.2); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); padding-right: calc(var(--u) * 0.8);
}
.dock__swatch {
  width: calc(var(--u) * 7); height: calc(var(--u) * 7);
  border: none; border-radius: 50%;
  cursor: pointer; outline-offset: 3px; opacity: 0.55;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.dock__swatch:hover { transform: translateY(-3px) scale(1.08); }
.dock__swatch:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); }
.dock__swatch--aurora { background: conic-gradient(from 210deg, #22d3ee, #818cf8, #e879f9, #22d3ee); }
.dock__swatch--nebula { background: conic-gradient(from 210deg, #fb7185, #a855f7, #60a5fa, #fb7185); }
.dock__swatch--chrome { background: conic-gradient(from 210deg, #e2e8f0, #facc15, #2dd4bf, #e2e8f0); }
.dock__swatch.is-active { opacity: 1; transform: scale(1.12); box-shadow: 0 0 18px 2px rgba(255,255,255,0.3), 0 0 30px 4px currentColor; }
.dock__swatch--aurora.is-active { color: #67e8f9; }
.dock__swatch--nebula.is-active { color: #c084fc; }
.dock__swatch--chrome.is-active { color: #facc15; }

.dock__sep { width: 1px; height: calc(var(--u) * 5); background: var(--glass-border); }

.dock__sound {
  width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary); cursor: pointer;
  font-size: calc(var(--u) * 3.4); line-height: 1;
  transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.dock__sound:hover { transform: translateY(-3px); color: var(--text-primary); }
.dock__sound:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); }
.dock__sound.is-on {
  color: var(--accent-1);
  box-shadow: 0 0 16px 2px rgba(34, 211, 238, 0.45);
  border-color: rgba(34, 211, 238, 0.5);
}

/* ============================================================
   РЕАЛЬНЫЙ МОБИЛЬНЫЙ ЭКРАН — корпус разворачиваем на весь экран
   (на телефоне рамка не нужна, игра и так занимает весь экран)
   ============================================================ */
@media (max-width: 620px), (pointer: coarse) {
  .stage { position: absolute; inset: 0; display: block; padding: 0; gap: 0; background: #05060a; }
  .device {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    --bezel: 0px;
    --radius: 0px;
    border-radius: 0;
    background: #05060a;
    box-shadow: none;
  }
  .device__btn, .device__island, .stage__caption { display: none; }
  .device__screen { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}