/* ═══ SKYBRINGER — game.css ═══ */

/* ── Crosshair bloom on fire ── */
#hud-crosshair.ch-bloom .ch-h,#hud-crosshair.ch-bloom .ch-v { animation:ch-bloom-pop 0.12s ease-out; }
@keyframes ch-bloom-pop { 0%{transform:scale(1.6);opacity:0.5} 100%{transform:scale(1);opacity:1} }

#game-canvas { cursor:none; }

/* ── ADS Vignette ── */
#hud-ads { display:none; position:fixed; inset:0; pointer-events:none; z-index:55; background:radial-gradient(ellipse 55% 55% at 50% 50%,transparent 40%,rgba(var(--black-rgb),0.72) 100%); }

/* ── Mobile Controls ── */
#mob-controls { position:fixed; inset:0; pointer-events:none; z-index:65; display:none; flex-direction:column; }

#mob-joystick-zone { position:absolute; bottom:calc(20px + env(safe-area-inset-bottom,0px)); left:20px; width:clamp(110px,22vw,150px); height:clamp(110px,22vw,150px); border-radius:50%; background:rgba(var(--white-rgb),0.04); border:1.5px solid rgba(var(--accent-rgb),0.38); pointer-events:all; touch-action:none; display:flex; align-items:center; justify-content:center; }
#mob-joystick-base { width:100%; height:100%; border-radius:50%; position:absolute; }
#mob-joystick-knob { position:absolute; width:52px; height:52px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),0.70) 0%,rgba(160,120,20,0.40) 100%); border:2px solid rgba(var(--accent-rgb),0.85); box-shadow:0 0 12px rgba(var(--accent-rgb),0.40); pointer-events:none; will-change:transform; }

#mob-look-zone { position:absolute; top:calc(48px + env(safe-area-inset-top,0px)); right:0; width:55%; bottom:calc(100px + env(safe-area-inset-bottom,0px)); pointer-events:all; touch-action:none; }

.mob-btn { position:absolute; pointer-events:all; touch-action:none; border:2px solid rgba(var(--accent-rgb),0.55); background:rgba(var(--panel-deep-rgb),0.80); color:var(--accent); font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; letter-spacing:.1em; border-radius:50%; width:64px; height:64px; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; will-change:transform; transition:transform 0.08s cubic-bezier(.22,1,.36,1),background 0.08s,box-shadow 0.08s; box-shadow:0 0 10px rgba(var(--accent-rgb),0.12),inset 0 1px 0 rgba(var(--white-rgb),0.06); }
.mob-btn:active { transform:scale(0.88); background:rgba(var(--accent-rgb),0.28); box-shadow:0 0 20px rgba(var(--accent-rgb),0.35); }
.mob-btn-fire { bottom:calc(110px + env(safe-area-inset-bottom,0px)); right:28px; width:80px; height:80px; font-size:14px; font-weight:800; border-color:rgba(255,64,64,0.7); color:#ff9999; background:rgba(80,0,0,0.80); box-shadow:0 0 16px rgba(255,60,60,0.25),inset 0 1px 0 rgba(255,100,100,0.1); }
.mob-btn-fire:active { transform:scale(0.85); background:rgba(160,0,0,0.9); box-shadow:0 0 30px rgba(255,60,60,0.5); }
.mob-btn-aim { bottom:calc(110px + env(safe-area-inset-bottom,0px)); right:124px; width:56px; height:56px; font-size:11px; }
.mob-btn-reload { bottom:calc(196px + env(safe-area-inset-bottom,0px)); right:36px; width:56px; height:56px; font-size:12px; }
.mob-btn-jump { bottom:calc(44px + env(safe-area-inset-bottom,0px)); right:204px; width:56px; height:56px; font-size:18px; }
.mob-btn-q,.mob-btn-e,.mob-btn-f { width:54px; height:54px; font-size:15px; font-weight:800; letter-spacing:.06em; }
.mob-btn-q { bottom:calc(270px + env(safe-area-inset-bottom,0px)); right:170px; border-color:rgba(var(--accent-rgb),0.7); color:var(--gold-bright); background:rgba(40,30,5,0.82); box-shadow:0 0 16px rgba(var(--accent-rgb),0.2),inset 0 1px 0 rgba(245,220,100,0.12); }
.mob-btn-q:active { transform:scale(0.86); background:rgba(100,75,10,0.9); box-shadow:0 0 28px rgba(var(--accent-rgb),0.55); }
.mob-btn-e { bottom:calc(270px + env(safe-area-inset-bottom,0px)); right:104px; border-color:rgba(224,85,0,0.58); color:var(--blue-bright,#ff8040); background:rgba(28,5,0,0.82); box-shadow:0 0 12px rgba(224,85,0,0.18),inset 0 1px 0 rgba(255,128,48,0.1); }
.mob-btn-e:active { transform:scale(0.86); background:rgba(80,20,0,0.92); box-shadow:0 0 24px rgba(224,85,0,0.50); }
.mob-btn-f { bottom:calc(270px + env(safe-area-inset-bottom,0px)); right:38px; border-color:rgba(var(--accent-rgb),0.55); color:var(--accent); background:rgba(28,20,4,0.82); box-shadow:0 0 12px rgba(var(--accent-rgb),0.14),inset 0 1px 0 rgba(var(--accent-rgb),0.1); }
.mob-btn-f:active { transform:scale(0.86); background:rgba(80,60,0,0.9); box-shadow:0 0 24px rgba(var(--accent-rgb),0.45); }

#mob-wpn-bar { position:absolute; top:calc(52px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); display:flex; gap:6px; pointer-events:all; touch-action:none; }
.mob-wpn-btn { pointer-events:all; touch-action:none; background:rgba(var(--panel-deep-rgb),0.85); border:1px solid rgba(var(--accent-rgb),0.35); color:rgba(var(--accent-rgb),0.90); font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; padding:8px 10px; min-height:36px; border-radius:4px; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; transition:background 0.1s,border-color 0.1s,color 0.1s; }
.mob-wpn-btn:active { background:rgba(var(--accent-rgb),0.22); border-color:rgba(var(--accent-rgb),0.85); color:var(--gold-bright); transform:scale(0.93); }

/* ── Low-health pulse ── */
#hud-low-health { display:none; position:fixed; inset:0; pointer-events:none; z-index:69; background:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 25%,rgba(180,0,0,0.55) 100%); animation:lowHealthPulse 0.9s ease-in-out infinite alternate; }
@keyframes lowHealthPulse { from{opacity:0.25} to{opacity:0.90} }

/* ── Cinematic letterbox bars ── */
#cine-bars { position:fixed; inset:0; pointer-events:none; z-index:67; }
#cine-bars > div { position:absolute; left:0; right:0; height:12vh; background:#000; transform:scaleY(0); transform-origin:top; transition:transform 0.35s cubic-bezier(.22,1,.36,1); }
#cine-bars > div:first-child { top:0; transform-origin:top; }
#cine-bars > div:last-child { bottom:0; transform-origin:bottom; }
#cine-bars.cine-on > div { transform:scaleY(1); }
#game-hud.cine-hidden { opacity:0; transition:opacity 0.25s ease; }

/* ── Ability VFX flash ── */
#hud-ability-flash { position:fixed; inset:0; pointer-events:none; z-index:68; opacity:0; transition:opacity 0.35s ease-out; }

/* ── Ability fire/blocked animations ── */
.hud-ab.ab-fire .hab-frame { animation:abFirePulse 0.18s ease-out; }
@keyframes abFirePulse { 0%{opacity:1;transform:scale(1)} 40%{opacity:0.75;transform:scale(1.12)} 100%{opacity:1;transform:scale(1)} }
.hud-ab.ab-blocked .hab-frame { animation:abBlockedShake 0.28s ease-out; }
@keyframes abBlockedShake { 0%,100%{transform:translateX(0)} 18%{transform:translateX(-5px)} 36%{transform:translateX(5px)} 54%{transform:translateX(-3px)} 72%{transform:translateX(3px)} }

#hud-health-fill { transition:width 0.15s ease-out,background 0.4s; }

/* ── Crosshair variants ── */
#hud-crosshair { --ch-color:rgba(var(--blue-ice-rgb),0.88); }
.ch-h { width:18px; height:2px; background:var(--ch-color); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:1px; }
.ch-v { width:2px; height:18px; background:var(--ch-color); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:1px; }
.ch-dot { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:5px; height:5px; border-radius:50%; background:var(--ch-color); display:none; }
.ch-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ch-color); display:none; }
#hud-crosshair.ch-lightning .ch-h { width:5px; height:1.5px; transform:translate(calc(-50% + 9px),-50%); box-shadow:-24px 0 0 0 var(--ch-color); }
#hud-crosshair.ch-lightning .ch-v { width:1.5px; height:5px; transform:translate(-50%,calc(-50% + 9px)); box-shadow:0 -24px 0 0 var(--ch-color); }
#hud-crosshair.ch-arcane .ch-h,#hud-crosshair.ch-arcane .ch-v { display:none; }
#hud-crosshair.ch-arcane .ch-dot { display:block; }
#hud-crosshair.ch-arcane .ch-ring { display:block; }

/* ── Ability cooldown SVG rings ── */
.hab-ring-svg { position:absolute; top:-6px; left:-6px; width:calc(100% + 12px); height:calc(100% + 12px); pointer-events:none; z-index:5; transform:rotate(-90deg); overflow:visible; }
.hab-ring-track { fill:none; stroke:rgba(var(--white-rgb),0.07); stroke-width:2.5; }
.hab-ring-arc { fill:none; stroke:rgba(var(--gold-hi-rgb),0.9); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:201.06; stroke-dashoffset:201.06; transition:stroke 0.3s; }

/* ── Glassy golden orb ability frames ── */
.hab-frame { border-radius:50%; border:2px solid rgba(236,220,171,0.85); background-color:rgba(247,250,255,0.10); box-shadow:0 0 16px rgba(var(--gold-hi-rgb),0.40),inset 0 0 18px rgba(var(--white-rgb),0.08); overflow:visible; }
.hab-frame::before { content:''; position:absolute; inset:4px; border:1px solid rgba(255,250,228,0.45); border-radius:50%; pointer-events:none; z-index:2; }
.hab-cd-fill { border-radius:50%; }
.hud-ab.ready .hab-frame,.hud-ab.ready.hab-sig .hab-frame { border-color:var(--gold-bright); box-shadow:0 0 20px rgba(var(--gold-hi-rgb),0.55),inset 0 0 14px rgba(var(--gold-hi-rgb),0.12); }

/* ── Mobile hint toggle ── */
.gls-hint-mobile { display:none; }
@media (max-width:768px) { .gls-hint-desktop{display:none} .gls-hint-mobile{display:block} }

/* ── Mobile HUD adjustments ── */
@media (max-width:768px) {
  #game-hud { font-size:11px; }
  #hud-top { padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 6px; height:calc(44px + env(safe-area-inset-top,0px)); }
  #hud-bottom { bottom:calc(env(safe-area-inset-bottom,0px) + 310px); padding:6px 10px; height:auto; background:rgba(var(--panel-deep-rgb),0.72); border-top:1px solid rgba(var(--accent-rgb),0.1); gap:6px; }
  #hud-player,#hud-abilities,#hud-weapon-panel { padding:4px 8px; }
  #hud-crosshair { transform:scale(0.9); }
  #game-back-btn { top:calc(env(safe-area-inset-top,0px) + 10px); left:12px; }
}

/* ── Coords readout ── */
#hud-coords { position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); right:16px; display:none; align-items:center; gap:5px; padding:5px 12px; background:rgba(var(--panel-deep-rgb),0.72); border:1px solid rgba(var(--accent-rgb),0.2); border-radius:3px; pointer-events:none; font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:.1em; color:rgba(200,190,160,0.65); }
.hdc-label { color:rgba(var(--accent-rgb),0.6); font-weight:600; }
.hdc-sep { color:rgba(var(--accent-rgb),0.25); }
#hdc-x,#hdc-y,#hdc-z { min-width:42px; text-align:right; font-weight:600; color:rgba(200,190,160,0.9); }

/* ── Open World controls hint ── */
#ow-hint { position:absolute; top:50%; left:50%; transform:translate(-50%,calc(-50% + 60px)); display:none; flex-direction:column; align-items:center; gap:8px; padding:18px 28px; background:rgba(var(--panel-deep-rgb),0.82); border:1px solid rgba(var(--blue-soft-rgb),0.2); border-radius:4px; pointer-events:none; transition:opacity .6s; }
.ow-hint-row { font-family:'Rajdhani',sans-serif; font-size:13px; letter-spacing:.1em; color:rgba(180,210,255,0.75); display:flex; align-items:center; gap:8px; }
.ow-hint-row kbd { display:inline-block; padding:2px 8px; background:rgba(var(--blue-soft-rgb),0.12); border:1px solid rgba(var(--blue-soft-rgb),0.35); border-radius:3px; font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; letter-spacing:.08em; color:rgba(var(--blue-soft-rgb),0.9); }
@media (max-width:600px) { #hud-coords{font-size:10px;padding:4px 10px;bottom:calc(env(safe-area-inset-bottom,0px) + 320px)} #ow-hint{padding:14px 20px} .ow-hint-row{font-size:11px} }

/* ── Flight mode indicator ── */
#hud-flight { position:absolute; top:calc(env(safe-area-inset-top,0px) + 52px); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:5px 14px 5px 10px; background:rgba(var(--panel-deep-rgb),0.72); border:1px solid rgba(var(--blue-soft-rgb),0); border-radius:3px; pointer-events:none; opacity:0; transition:opacity .3s,border-color .3s,box-shadow .3s; }
#hud-flight.hud-flight-active { opacity:1; border-color:rgba(var(--blue-soft-rgb),0.55); box-shadow:0 0 18px rgba(var(--blue-soft-rgb),0.22); }
.hud-flight-icon { font-size:15px; color:rgba(var(--blue-soft-rgb),0.9); animation:flightPulse 1.6s ease-in-out infinite; }
.hud-flight-label { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; letter-spacing:.22em; color:rgba(var(--blue-soft-rgb),0.85); }
@keyframes flightPulse { 0%,100%{opacity:.7;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} }

/* ── Quest HUD ── */
#quest-tracker { position:absolute; top:56px; right:18px; min-width:200px; padding:10px 14px 12px; background:rgba(var(--panel-deep-rgb),.72); border-left:2px solid rgba(var(--accent-rgb),.55); pointer-events:none; opacity:0; transform:translateX(12px); transition:opacity .3s ease,transform .3s ease; }
#quest-tracker.visible { opacity:1; transform:translateX(0); }
#quest-title { font-family:'Cinzel',serif; font-size:11px; letter-spacing:.14em; color:var(--gold-main); text-transform:uppercase; margin-bottom:7px; }
.qt-obj { font-family:'Rajdhani',sans-serif; font-size:12px; color:rgba(var(--blue-ice-rgb),.65); letter-spacing:.06em; line-height:1.7; }
.qt-obj.done { color:rgba(var(--blue-ice-rgb),.28); text-decoration:line-through; }
#quest-notification { position:absolute; top:28%; left:50%; transform:translateX(-50%) translateY(-8px); font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; letter-spacing:.22em; color:var(--gold-main); text-transform:uppercase; background:rgba(var(--panel-deep-rgb),.8); border:1px solid rgba(var(--accent-rgb),.3); padding:7px 20px; pointer-events:none; opacity:0; transition:opacity .25s ease,transform .25s ease; }
#quest-notification.show { opacity:1; transform:translateX(-50%) translateY(0); }
#quest-interact-hint { position:absolute; bottom:140px; left:50%; transform:translateX(-50%); font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; letter-spacing:.28em; color:rgba(var(--blue-ice-rgb),.8); text-transform:uppercase; background:rgba(var(--panel-deep-rgb),.72); border:1px solid rgba(var(--accent-rgb),.45); padding:6px 18px; pointer-events:none; opacity:0; transition:opacity .2s ease; }
#quest-interact-hint.visible { opacity:1; }
#quest-complete-flash { position:absolute; top:22%; left:50%; transform:translateX(-50%); font-family:'Cinzel',serif; font-size:15px; font-weight:700; letter-spacing:.18em; color:var(--gold-bright); text-transform:uppercase; text-shadow:0 0 24px rgba(255,215,0,.6); pointer-events:none; opacity:0; transition:opacity .4s ease; }
#quest-complete-flash.show { opacity:1; }

/* ── Landscape phone layout ── */
@media (max-width:900px) and (orientation:landscape) {
  #mob-joystick-zone { bottom:calc(12px + env(safe-area-inset-bottom,0px)); left:calc(12px + env(safe-area-inset-left,0px)); width:clamp(90px,18vw,120px); height:clamp(90px,18vw,120px); }
  #mob-look-zone { top:calc(40px + env(safe-area-inset-top,0px)); right:env(safe-area-inset-right,0px); width:50%; bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
  .mob-btn-fire { bottom:calc(80px + env(safe-area-inset-bottom,0px)); right:calc(20px + env(safe-area-inset-right,0px)); width:68px; height:68px; }
  .mob-btn-aim { bottom:calc(80px + env(safe-area-inset-bottom,0px)); right:calc(104px + env(safe-area-inset-right,0px)); width:50px; height:50px; }
  .mob-btn-reload { bottom:calc(152px + env(safe-area-inset-bottom,0px)); right:calc(28px + env(safe-area-inset-right,0px)); width:50px; height:50px; }
  .mob-btn-jump { bottom:calc(20px + env(safe-area-inset-bottom,0px)); right:calc(180px + env(safe-area-inset-right,0px)); width:50px; height:50px; }
  .mob-btn-q { bottom:calc(200px + env(safe-area-inset-bottom,0px)); right:calc(152px + env(safe-area-inset-right,0px)); width:48px; height:48px; }
  .mob-btn-e { bottom:calc(200px + env(safe-area-inset-bottom,0px)); right:calc(94px + env(safe-area-inset-right,0px)); width:48px; height:48px; }
  .mob-btn-f { bottom:calc(200px + env(safe-area-inset-bottom,0px)); right:calc(36px + env(safe-area-inset-right,0px)); width:48px; height:48px; }
  #hud-bottom { bottom:calc(env(safe-area-inset-bottom,0px) + 260px); }
}