/* AssassinAnimals FX - presentation overlay stylesheet (Agent D).
   Cinematic cards, announcer, radar, objectives, pips, floaters,
   vignettes, toasts, menu polish, responsive mobile. All prefixed afx-. */

#viewportContainer { position: relative; }
#gameCanvas.afx-desat { filter: saturate(0.25) contrast(1.25) brightness(1.1); transition: filter 0.25s; }

/* - Letterbox + titlecard - */
.afx-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 20; transition: height 0.45s ease; pointer-events: none; }
.afx-bar.afx-top { top: 0; } .afx-bar.afx-bottom { bottom: 0; }
.afx-cine .afx-bar { height: 7%; }
.afx-titlecard { position: absolute; inset: 7% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 21; opacity: 0; pointer-events: none; transition: opacity 0.35s; text-align: center; padding: 0 24px; cursor: pointer; background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%); }
.afx-titlecard.on { opacity: 1; pointer-events: auto; }
.afx-kicker { font-family: Orbitron, sans-serif; font-size: 0.8rem; letter-spacing: 6px; color: #ff007f; }
.afx-title { font-family: Orbitron, sans-serif; font-weight: 900; font-size: clamp(1.4rem, 4.5vw, 2.6rem); letter-spacing: 3px; color: #fff; text-shadow: 0 0 24px rgba(0,229,255,0.8), 0 2px 0 #000; animation: afx-slam 0.45s cubic-bezier(0.2, 2.2, 0.4, 1); }
.afx-sub { font-size: 0.85rem; color: #a5b4fc; }
.afx-tip { font-family: Orbitron, sans-serif; font-size: 0.75rem; color: #00ff66; border: 1px solid rgba(0,255,102,0.35); border-radius: 20px; padding: 6px 16px; background: rgba(0,20,10,0.7); }
@keyframes afx-slam { 0% { transform: scale(1.6); opacity: 0; } 60% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1); } }

/* - Announcer + combo + flashes - */
.afx-announcer { position: absolute; top: 14%; left: 0; right: 0; text-align: center; z-index: 22; pointer-events: none; opacity: 0; }
.afx-announcer.on { animation: afx-ann 1.8s ease forwards; }
.afx-announce-main { font-family: Orbitron, sans-serif; font-weight: 900; font-size: clamp(1.5rem, 5vw, 2.8rem); color: #ffea00; text-shadow: 0 0 20px rgba(255,234,0,0.8), 0 2px 0 #000; letter-spacing: 3px; }
.afx-announcer.vip .afx-announce-main { color: #ff0055; text-shadow: 0 0 26px rgba(255,0,85,0.9), 0 2px 0 #000; }
.afx-announce-sub { font-size: 0.85rem; color: #e2e8f0; letter-spacing: 2px; }
@keyframes afx-ann { 0% { opacity: 0; transform: scale(0.7); } 12% { opacity: 1; transform: scale(1.08); } 22% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.02); } }
.afx-combo { position: absolute; top: 26%; right: 18px; z-index: 22; pointer-events: none; opacity: 0; transition: opacity 0.25s; text-align: right; }
.afx-combo.on { opacity: 1; }
.afx-combo-n { font-family: Orbitron, sans-serif; font-weight: 800; color: #00e5ff; text-shadow: 0 0 10px rgba(0,229,255,0.7); }
.afx-combo-bar { width: 110px; height: 5px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.afx-combo-fill { height: 100%; background: linear-gradient(90deg, #00e5ff, #9d4edd); }
.afx-killflash { position: absolute; inset: 0; z-index: 19; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(255,0,85,0.35)); }
.afx-killflash.on { animation: afx-flash 0.35s ease-out; }
.afx-vipflash { position: absolute; inset: 0; z-index: 23; pointer-events: none; opacity: 0; background: #fff; }
.afx-vipflash.on { animation: afx-vip 0.9s ease-out; }
@keyframes afx-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes afx-vip { 0% { opacity: 0.85; } 100% { opacity: 0; } }

/* - Objectives + VIP pips + minimap - */
.afx-objectives { position: absolute; top: 12px; left: 12px; z-index: 18; background: rgba(8,10,20,0.82); border: 1px solid rgba(0,229,255,0.3); border-radius: 10px; padding: 8px 12px; font-family: Orbitron, sans-serif; font-size: 0.72rem; color: #cbd5e1; pointer-events: none; min-width: 168px; }
.afx-obj-title { color: #00e5ff; font-weight: 800; letter-spacing: 2px; margin-bottom: 4px; }
.afx-obj-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; }
.afx-obj-key.yes { color: #00ff66; } .afx-obj-key.no { color: #64748b; }
.afx-obj-arrow { display: inline-block; color: #00ff66; font-size: 1rem; transition: transform 0.2s; }
.afx-obj-arrow.dim { color: #475569; } .afx-obj-arrow.go { color: #00ff66; text-shadow: 0 0 8px rgba(0,255,102,0.8); }
.afx-vip-pips { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 18; background: rgba(20,5,12,0.8); border: 1px solid rgba(255,0,85,0.4); border-radius: 10px; padding: 6px 14px; pointer-events: none; text-align: center; }
.afx-pips-title { font-family: Orbitron, sans-serif; font-size: 0.65rem; color: #ff0055; letter-spacing: 2px; }
.afx-pip-row { display: flex; align-items: center; gap: 8px; font-family: Orbitron, sans-serif; font-size: 0.65rem; color: #fda4af; }
.afx-pips i { display: inline-block; width: 22px; height: 7px; border-radius: 3px; margin-right: 3px; background: rgba(255,255,255,0.12); }
.afx-pips i.f { background: linear-gradient(90deg, #ff0055, #ff7a00); box-shadow: 0 0 6px rgba(255,0,85,0.7); }
.afx-minimap { position: absolute; top: 12px; right: 12px; width: 148px; height: 148px; z-index: 18; border-radius: 50%; pointer-events: none; box-shadow: 0 0 18px rgba(0,229,255,0.25); }

/* - Floaters / vignettes / light / toasts - */
.afx-floaters { position: absolute; inset: 0; z-index: 17; pointer-events: none; overflow: hidden; }
.afx-floater { position: absolute; top: 0; left: 0; font-size: 1.3rem; font-weight: 900; text-shadow: 0 2px 4px #000; animation: afx-bob 0.9s ease-in-out infinite alternate; }
.afx-floater.sus { color: #ffea00; } .afx-floater.alert { color: #ff0055; font-size: 1.5rem; }
.afx-floater.dim { opacity: 0.75; }
@keyframes afx-bob { from { margin-top: 0; } to { margin-top: -6px; } }
.afx-dmgvin { position: absolute; inset: 0; z-index: 16; pointer-events: none; opacity: 0; --afx-hit-ang: 0deg; background: conic-gradient(from var(--afx-hit-ang), rgba(255,0,60,0.55), transparent 25%, transparent 75%, rgba(255,0,60,0.55)); }
.afx-dmgvin.on { animation: afx-flash 0.6s ease-out; }
.afx-lowhp { position: absolute; inset: 0; z-index: 16; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(255,0,40,0.5)); }
.afx-lowhp.on { animation: afx-lowpulse 1.1s ease-in-out infinite; }
@keyframes afx-lowpulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }
.afx-light { position: absolute; top: 0; left: 0; width: 340px; height: 340px; z-index: 5; pointer-events: none; background: radial-gradient(circle, rgba(255,240,200,0.10), transparent 65%); mix-blend-mode: screen; }
.afx-toasts { position: absolute; bottom: 64px; left: 12px; z-index: 24; display: flex; flex-direction: column; gap: 8px; max-width: min(340px, 70%); }
.afx-toast { display: flex; align-items: center; gap: 8px; background: rgba(8,12,24,0.92); border: 1px solid rgba(0,255,102,0.4); border-radius: 10px; padding: 8px 10px; font-size: 0.78rem; color: #e2e8f0; box-shadow: 0 0 14px rgba(0,255,102,0.15); animation: afx-tin 0.3s ease; }
.afx-toast.out { opacity: 0; transition: opacity 0.4s; }
.afx-toast-icon { font-size: 1.1rem; } .afx-toast-txt { flex: 1; }
.afx-toast-x { background: none; border: none; color: #94a3b8; font-size: 1.1rem; cursor: pointer; }
@keyframes afx-tin { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* - Menu polish: neon title, card shine, contracts line - */
.logo-title { animation: afx-neon 3.2s ease-in-out infinite; }
@keyframes afx-neon { 0%, 100% { filter: drop-shadow(0 0 12px rgba(0,229,255,0.35)); } 50% { filter: drop-shadow(0 0 26px rgba(0,229,255,0.75)) drop-shadow(0 0 46px rgba(157,78,221,0.4)); } }
.char-card { position: relative; overflow: hidden; }
.char-card::after { content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.22), transparent); transform: skewX(-20deg); transition: left 0.5s; pointer-events: none; }
.char-card:hover::after { left: 130%; }
.afx-contracts { margin-top: 4px; font-family: Orbitron, sans-serif; font-size: 0.72rem; letter-spacing: 1.5px; color: #00e5ff; opacity: 0.85; min-height: 1.2em; }

/* - Pause volume row - */
.afx-vol-row { display: flex; align-items: center; gap: 12px; font-family: Orbitron, sans-serif; font-size: 0.8rem; color: #cbd5e1; margin: 6px 0 12px; }
.afx-vol-row input[type="range"] { flex: 1; accent-color: #00e5ff; }

/* - Responsive mobile (720px HUD wrap, larger touch) - */
@media (max-width: 720px) {
  .hud { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .hud-left, .hud-right { gap: 10px; flex-wrap: wrap; }
  .tactical-subbar { flex-wrap: wrap; gap: 8px; }
  .ability-hint-panel { display: none; }
  .touch-btn { width: 72px; height: 72px; font-size: 1.3rem; }
  .touch-buttons-zone { grid-template-columns: repeat(2, 72px); gap: 14px; bottom: 90px; }
  .afx-objectives { transform: scale(0.85); transform-origin: top left; }
  .afx-minimap { width: 110px; height: 110px; }
  .afx-vip-pips { top: auto; bottom: 150px; }
  .afx-toasts { bottom: 170px; }
  .afx-announce-main { letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .afx-titlecard .afx-title, .logo-title, .afx-floater, .afx-lowhp.on { animation: none !important; }
}