/* ── L13: vignette (z10005 — above everything) ── */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10005;
  box-shadow:
    0 0 400px rgba(0, 0, 0, 0.92) inset,
    0 0 180px rgba(0, 0, 0, 0.75) inset;
}

/* ── Phase 4: cockpit HUD (hud2) ── */
.game-shell { position: fixed; inset: 0; overflow: hidden; z-index: 10003; pointer-events: none; }

.hud2-frame{
  --hud2-orange:#ff6a2c;
  --hud2-cyan:#5ad6ff;
  --hud2-green:#7cf29a;
  --hud2-red:#ff5a4e;
  --hud2-text:#eef2f6;
  --hud2-muted:#828c99;
  position:absolute; inset:40px 60px 60px 60px; z-index:10003; pointer-events:none; perspective:1600px;
  display:block;
  color:var(--hud2-text);
}

.hud2-side-panel{position:absolute; top:0; height:100%; z-index:45; pointer-events:none}
.hud2-side-panel--left{left:0; width:34vw; transform-origin:left center; transform:rotateY(16deg)}
.hud2-side-panel--right{right:0; width:34vw; transform-origin:right center; transform:rotateY(-16deg)}

.hud2-gauge-svg{position:absolute; top:0; left:0; width:100%; height:100%; z-index:50; pointer-events:none}

.hud2-arc-outer{fill:none; stroke-width:1.5; opacity:.35}
.hud2-arc-outer.hud2-orange{stroke:var(--hud2-orange); filter:drop-shadow(0 0 4px rgba(255,106,44,.35))}

.hud2-arc-track{fill:none; stroke:rgba(255,255,255,.08); stroke-width:10; stroke-linecap:round}
.hud2-arc-fill{fill:none; stroke-width:10; stroke-linecap:round}
.hud2-arc-fill.hud2-red{stroke:var(--hud2-red); filter:drop-shadow(0 0 8px rgba(255,90,78,.6))}
.hud2-arc-fill.hud2-cyan{stroke:var(--hud2-cyan); filter:drop-shadow(0 0 8px rgba(90,214,255,.6))}

.hud2-arc-tick{stroke:rgba(255,255,255,.3); stroke-width:2}
.hud2-arc-cap{font-family:'Exo 2',sans-serif; font-weight:600; font-size:13px; fill:var(--hud2-muted); letter-spacing:.05em}
.hud2-arc-connector{stroke:rgba(255,255,255,.12); stroke-width:1.5}

.hud2-stat-info{position:absolute; display:flex; align-items:center; gap:14px; z-index:55}
.hud2-stat-info--right{right:5%; flex-direction:row-reverse}

.hud2-icon-badge{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 0 6px currentColor); opacity:.9;
}
.hud2-icon-badge svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}

.hud2-stat-text{width:190px; font-family:'Montserrat',sans-serif}
.hud2-stat-info--right .hud2-stat-text{width:210px; text-align:right}

.hud2-stat-label{
  font-family:'Exo 2',sans-serif; font-weight:600; font-size:14px; letter-spacing:.32em;
  color:var(--hud2-muted); text-transform:uppercase; margin-bottom:6px;
}
.hud2-stat-value{font-family:'Exo 2',sans-serif; font-weight:700; font-size:48px; line-height:1}
.hud2-stat-value span{font-size:18px; color:var(--hud2-muted); margin-left:3px; font-weight:600}
.hud2-stat-value.hud2-red{color:var(--hud2-red); text-shadow:0 0 14px rgba(255,90,78,.5)}
.hud2-stat-value.hud2-cyan{color:var(--hud2-cyan); text-shadow:0 0 14px rgba(90,214,255,.5)}
.hud2-stat-value.hud2-orange{color:var(--hud2-orange); text-shadow:0 0 14px rgba(255,106,44,.5)}
.hud2-stat-value.hud2-green{color:var(--hud2-green); text-shadow:0 0 14px rgba(124,242,154,.45)}

.hud2-stat-value-row{display:flex; align-items:center; gap:12px}
.hud2-icon-inline{flex:0 0 auto; width:42px; height:42px; filter:drop-shadow(0 0 6px currentColor)}
.hud2-icon-inline svg{width:100%; height:100%}

.hud2-stat-bar{width:100%; height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:10px}
.hud2-stat-bar-fill{height:100%; border-radius:2px}
.hud2-stat-bar-fill.hud2-orange{background:var(--hud2-orange); box-shadow:0 0 8px rgba(255,106,44,.6)}
.hud2-stat-bar-fill.hud2-cyan{background:var(--hud2-cyan); box-shadow:0 0 8px rgba(90,214,255,.6)}
.hud2-stat-bar-fill.hud2-green{background:var(--hud2-green); box-shadow:0 0 8px rgba(124,242,154,.6)}

.hud2-quest-window{
  margin-top:12px; padding:10px 14px; max-width:260px;
  border:1px solid rgba(124,242,154,.25); background:rgba(124,242,154,.05);
  font-family:'Montserrat',sans-serif; font-size:13px; line-height:1.5; color:var(--hud2-text);
  text-align:right;
}

/* Quest panel — primary + 1 secondary, anchored to right edge of side panel */
.hud2-quest-panel{position:absolute; right:4px; text-align:left; width:200px}
.hud2-quest-panel .hud2-stat-value{text-align:left; margin-top:4px}
.hud2-quest-panel .hud2-quest-window{text-align:left; max-width:200px}
.hud2-quest-panel-head{display:flex; align-items:center; gap:7px; margin-bottom:4px}
.hud2-quest-panel-icon{width:13px; height:13px; fill:none; stroke:var(--hud2-green); stroke-width:2; flex-shrink:0}
/* Secondary quest — visually smaller + orange/warm tint to differ from green primary */
.hud2-quest-secondary{margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,180,74,.15)}
.hud2-quest-secondary-label{font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,180,74,.5); margin-bottom:4px}
.hud2-quest-secondary-item{display:flex; justify-content:space-between; align-items:baseline; gap:6px; padding:2px 0; font-family:'Montserrat',sans-serif; font-size:11px; color:rgba(255,180,74,.7)}
.hud2-quest-sec-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:136px}
.hud2-quest-sec-prog{flex-shrink:0; font-family:'Exo 2',sans-serif; font-size:11px; font-weight:700; color:rgba(255,180,74,.85)}

/* ── TOP-CENTER: level-progression HUD (bowed XP bar, adapted from finished SVG) ── */
.hud2-xp-hud{
  position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  width:min(1040px, 74vw); z-index:55; pointer-events:none;
}
.hud2-xp-hud-svg{display:block; width:100%; height:auto; overflow:visible}
/* live text (all SVG <text>, Exo 2 only) */
.xph-score-label{font-family:'Exo 2',sans-serif; font-weight:600; font-size:22px; letter-spacing:8px; fill:#62D7FF}
.xph-score-value{font-family:'Exo 2',sans-serif; font-weight:800; font-size:60px; fill:#EEF6FF;
  transition:fill .18s ease, font-size .18s ease; transform-box:fill-box; transform-origin:center}
.xph-combo{font-family:'Exo 2',sans-serif; font-weight:700; font-size:21px; letter-spacing:1px; fill:#FF7A16; opacity:0; transition:opacity .15s ease}
/* +N accumulator (combo-scaled points banked this streak): visible while the streak
   runs, brief fill-flash on each increase. Slant comes from the SVG transform attr. */
.xph-gain{font-family:'Exo 2',sans-serif; font-weight:800; font-size:25px; fill:#FFB000; opacity:0; transition:opacity .18s ease}
.xph-gain.on{opacity:1}
.xph-gain.bump{animation:xphGainBump .26s ease}
@keyframes xphGainBump{0%{fill:#fff}100%{fill:#FFB000}}
/* score number pulses (scales up) on every change */
.xph-score-value.pop{animation:xphPop .26s ease}
@keyframes xphPop{0%{transform:scale(1)}42%{transform:scale(1.16)}100%{transform:scale(1)}}
.xph-lvl{font-family:'Exo 2',sans-serif; font-weight:800; font-size:34px; fill:#FF7A16; transform-box:fill-box; transform-origin:center}
.xph-lvl-label{font-family:'Exo 2',sans-serif; font-weight:700; font-size:13px; letter-spacing:4px; fill:#FF7A16; opacity:.85}
.xph-tonext{font-family:'Exo 2',sans-serif; font-weight:700; font-size:15px; letter-spacing:3px; fill:#FF7A16; opacity:.9}
#hud-xp-fill, #hud-xp-glow{transition:stroke-dasharray .35s ease}
#hud-xp-marker{transition:transform .35s ease}
/* combo tiers restyle the score number (size/colour) + bump the +gain */
.hud2-xp-hud-svg.combo-t1 .xph-score-value{fill:#ffd089; font-size:64px}
.hud2-xp-hud-svg.combo-t2 .xph-score-value{fill:#ff8a3c; font-size:70px}
.hud2-xp-hud-svg.combo-t3 .xph-score-value{fill:#ff4d2e; font-size:76px}
.hud2-xp-hud-svg.combo-t2 .xph-gain{font-size:29px}
.hud2-xp-hud-svg.combo-t3 .xph-gain{font-size:34px; fill:#ff6a2c}

/* ── HUD juice (game_dev_tips: feedback / more-than-numbers / pacing) ── */
/* COMBO ×N: shown only while the multiplier > 1; re-appears (fill flash) and flips
   its slant (SVG transform attr, set by hud.js) each time the multiplier changes.
   No CSS transform here — that would override the slant attribute. */
.xph-combo.on{opacity:1}
.xph-combo.appear{animation:xphComboAppear .34s ease}
@keyframes xphComboAppear{0%{opacity:0; fill:#fff}30%{opacity:1; fill:#fff}100%{opacity:1; fill:#FF7A16}}
/* marker reacts to a gain (expanding ring) + idle pulse near a level-up */
.xph-marker-glow{opacity:0; transform-box:fill-box; transform-origin:center}
#hud-xp-marker.pulse .xph-marker-glow{animation:xphMarkerPulse .42s ease}
.hud2-xp-hud-svg.near .xph-marker-glow{animation:xphMarkerPulse .9s ease infinite}
@keyframes xphMarkerPulse{0%{opacity:.65; transform:scale(1)}100%{opacity:0; transform:scale(2.5)}}
/* level-up: bar sweep + chevron punch + LVL number pop */
.hud2-xp-hud-svg.levelup #hud-xp-glow{animation:xphLevelSweep .6s ease}
@keyframes xphLevelSweep{0%{opacity:.45}28%{opacity:1; stroke-width:34}100%{opacity:.45; stroke-width:22}}
.xph-chev{transform-box:fill-box; transform-origin:center}
.hud2-xp-hud-svg.levelup .xph-chev{animation:xphChevPunch .5s ease}
@keyframes xphChevPunch{0%{transform:translateY(0)}40%{transform:translateY(-7px)}100%{transform:translateY(0)}}
.hud2-xp-hud-svg.levelup #hud-xp-lvl,
.hud2-xp-hud-svg.levelup #hud-xp-next{animation:xphLvlPop .55s ease}
@keyframes xphLvlPop{0%{transform:scale(1)}45%{transform:scale(1.4); fill:#fff}100%{transform:scale(1)}}
/* damage: brief desaturate/red flash on the score number */
.hud2-xp-hud-svg.hurt .xph-score-value{animation:xphHurt .4s ease}
@keyframes xphHurt{0%{fill:#ff4d2e}100%{}}
/* burst particles */
.xph-particle{transform-box:fill-box; transform-origin:center; animation:xphParticle .6s ease forwards}
@keyframes xphParticle{0%{opacity:1; transform:translate(0,0) scale(1)}100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.25)}}

/* generic screen-space HUD splash particles (fx/hud-particles.js) — fired whenever a
   tracked HUD number changes (score/+gain/combo/level/quest). size+colour set inline. */
.qw-hud-particle{position:absolute; border-radius:50%; will-change:transform,opacity; animation:qwHudParticle var(--life,.62s) ease-out forwards}
@keyframes qwHudParticle{0%{opacity:1; transform:translate(0,0) scale(1)}100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.3)}}

/* ════ P-pause overlay (core/pause.js) ════
   z 10013: выше карточки туториала (10008) и игрового меню (10012) — пауза всегда
   рендерится поверх туториала (Лео 2026-07-09, ТЗ-3). */
#qw-pause-overlay{position:fixed;inset:0;z-index:10013;display:none;align-items:center;justify-content:center;background:rgba(4,7,11,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none}
#qw-pause-overlay.visible{display:flex}
#qw-pause-overlay .qw-pause-box{text-align:center;font-family:'Exo 2',sans-serif}
#qw-pause-overlay .qw-pause-title{font-size:clamp(40px,7vw,96px);font-weight:800;letter-spacing:.14em;color:#ff6a2c;text-shadow:0 0 24px rgba(255,106,44,.5)}
#qw-pause-overlay .qw-pause-sub{margin-top:14px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:clamp(13px,1.6vw,18px);letter-spacing:.28em;text-transform:uppercase;color:#9fb0c0}

/* Quest reset flash — красный флэш квест-блока при сбросе стрика (урон/промах),
   игрок видит, что серия слетела (quests.registerPlayerDamage/onCatchMissed). */
@keyframes hud2-quest-reset-flash {
  0%   { filter: none; }
  25%  { filter: drop-shadow(0 0 14px rgba(255,60,40,.95)) brightness(1.35) sepia(.4) hue-rotate(-30deg); }
  100% { filter: none; }
}
.hud2-quest-panel--reset { animation: hud2-quest-reset-flash .55s ease; }