/* ═══════════════════════════════════════════════
   Light Gun Overlay — Combat Styles
   Extracted from index2.html inline styles
   ═══════════════════════════════════════════════ */

/* Hide default cursor site-wide, show crosshair */
.lg-active{cursor:none!important}
.lg-active *{cursor:none!important}

/* Crosshair */
.lg-cursor{position:fixed;z-index:9999999;pointer-events:none;width:44px;height:44px;margin-left:-22px;margin-top:-22px;display:none;transition:left .05s linear,top .05s linear}
.lg-cursor::before,.lg-cursor::after{content:'';position:absolute;background:#ff2a2a;border-radius:1px;box-shadow:0 0 6px rgba(255,40,40,.6)}
.lg-cursor::before{width:2px;height:100%;left:50%;transform:translateX(-50%)}
.lg-cursor::after{height:2px;width:100%;top:50%;transform:translateY(-50%)}
.lg-cursor-ring{position:absolute;inset:4px;border:1.5px solid rgba(255,40,40,.5);border-radius:50%}
.lg-cursor-dot{position:absolute;width:4px;height:4px;background:#ff2a2a;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(255,40,40,.8)}

/* Ammo rack */
.lg-ammo{position:fixed;top:20px;left:20px;z-index:99998;display:flex;flex-direction:column;gap:4px;align-items:center;pointer-events:none}
.lg-shell{width:26px;height:8px;border-radius:1px 1px 2px 2px;background:linear-gradient(90deg,#c07830 0%,#a86020 15%,#e8c840 15%,#d4a820 40%,#c89818 55%,#dbb830 75%,#f0d850 100%);box-shadow:0 0 4px rgba(200,160,20,.4),inset 0 1px 0 rgba(255,255,255,.3);transition:opacity .15s;position:relative}
.lg-shell::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:1px 0 0 1px;background:linear-gradient(90deg,#c07830 0%,#a86020 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.lg-shell.is-spent{opacity:.2}
.lg-ammo-count{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:rgba(255,255,255,.5);margin-top:4px;letter-spacing:.06em;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* Muzzle flash */
.lg-flash{position:fixed;pointer-events:none;z-index:99997}
.lg-flash-core{position:absolute;width:30px;height:30px;background:radial-gradient(circle,#fff 0%,#ffffaa 15%,#ffaa00 40%,rgba(255,60,0,.7) 65%,transparent 100%);border-radius:50%;transform:translate(-50%,-50%);animation:lg-flash-anim .18s ease-out forwards}
.lg-flash-ring{position:absolute;width:60px;height:60px;border:2px solid rgba(255,200,60,.6);border-radius:50%;transform:translate(-50%,-50%);animation:lg-ring-anim .25s ease-out forwards}
.lg-flash-ring2{position:absolute;width:80px;height:80px;border:1px solid rgba(255,140,30,.3);border-radius:50%;transform:translate(-50%,-50%);animation:lg-ring-anim .35s ease-out forwards}
.lg-spark{position:absolute;width:3px;height:3px;border-radius:50%;transform:translate(-50%,-50%);animation:lg-spark-fly .35s ease-out forwards}
.lg-ember{position:absolute;width:2px;height:6px;border-radius:1px;transform-origin:center center;animation:lg-ember-fly .4s ease-out forwards}
@keyframes lg-flash-anim{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}40%{opacity:.9;transform:translate(-50%,-50%) scale(2)}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}
@keyframes lg-ring-anim{0%{opacity:.8;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
@keyframes lg-spark-fly{0%{opacity:1;transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--ex),var(--ey)) scale(0)}}
@keyframes lg-ember-fly{0%{opacity:1;transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--r)) scale(1)}60%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--ex),var(--ey)) rotate(var(--r2)) scale(0)}}

/* Score popup */
.lg-score-pop{position:fixed;pointer-events:none;z-index:99998;font-family:'IBM Plex Mono',monospace;font-weight:900;font-size:1.1rem;color:#ffdd44;text-shadow:0 0 8px rgba(255,180,30,.6),0 2px 4px rgba(0,0,0,.5);animation:lg-score-anim .7s ease-out forwards;white-space:nowrap}
.lg-score-pop.lg-score-big{font-size:1.6rem;color:#ff4444;text-shadow:0 0 12px rgba(255,40,40,.6),0 2px 4px rgba(0,0,0,.5)}
@keyframes lg-score-anim{0%{opacity:1;transform:translateY(0) scale(1.3)}30%{opacity:1;transform:translateY(-20px) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(.7)}}

/* Weapon pickup announcement */
.lg-weapon-announce{position:fixed;pointer-events:none;z-index:99999;left:50%;top:35%;transform:translate(-50%,-50%) scale(0.3);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:3.5rem;letter-spacing:0.15em;text-transform:uppercase;color:#fff;text-shadow:0 0 30px rgba(255,140,0,.8),0 0 60px rgba(255,80,0,.5),0 4px 8px rgba(0,0,0,.6);animation:lg-weapon-in .8s cubic-bezier(.17,.67,.29,1.4) forwards;white-space:nowrap}
.lg-weapon-announce.sg{color:#44ddff;text-shadow:0 0 30px rgba(0,180,255,.8),0 0 60px rgba(0,120,255,.5),0 4px 8px rgba(0,0,0,.6)}
.lg-weapon-announce.mg{color:#ffaa00;text-shadow:0 0 30px rgba(255,160,0,.8),0 0 60px rgba(255,100,0,.5),0 4px 8px rgba(0,0,0,.6)}
.lg-weapon-announce.reload{color:#ffee44;font-size:2.8rem;text-shadow:0 0 20px rgba(255,230,50,.7),0 0 40px rgba(255,200,30,.4),0 4px 8px rgba(0,0,0,.5)}
@keyframes lg-weapon-in{0%{opacity:0;transform:translate(-50%,-50%) scale(0.3) rotate(-5deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(2deg)}30%{transform:translate(-50%,-50%) scale(1) rotate(0)}75%{opacity:1;transform:translate(-50%,-50%) scale(1) translateY(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) translateY(-30px)}}

/* Targets — positioned absolute inside a fixed container for scroll-looping */
.lg-target{position:absolute;z-index:9995;pointer-events:none;cursor:none;transition:opacity .2s}
.lg-target--deployed{position:absolute;transition:opacity .2s}
.lg-target-body{width:100%;height:100%;border:2.5px solid rgba(255,60,60,.85);border-radius:50%;position:relative;background:radial-gradient(circle,rgba(255,40,40,.12) 0%,rgba(255,60,60,.04) 50%,transparent 70%);animation:lg-target-pulse 1.2s ease-in-out infinite;box-shadow:0 0 20px rgba(255,50,50,.2),inset 0 0 15px rgba(255,50,50,.08)}
.lg-target-body::before{content:'';position:absolute;inset:22%;border:2px solid rgba(255,60,60,.55);border-radius:50%;box-shadow:0 0 6px rgba(255,50,50,.15)}
.lg-target-body::after{content:'';position:absolute;inset:42%;background:radial-gradient(circle,#ff3333 0%,rgba(255,50,50,.7) 60%,transparent 100%);border-radius:50%;box-shadow:0 0 12px rgba(255,50,50,.6),0 0 25px rgba(255,30,30,.3)}
.lg-target-cross1,.lg-target-cross2{position:absolute;background:rgba(255,60,60,.45)}
.lg-target-cross1{width:1.5px;height:100%;left:50%;top:0}
.lg-target-cross2{height:1.5px;width:100%;top:50%;left:0}
.lg-target-diamond{position:absolute;inset:10%;border:1.5px solid rgba(255,80,80,.3);transform:rotate(45deg)}
.lg-target-label{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:rgba(255,80,80,.85);white-space:nowrap;text-transform:uppercase;letter-spacing:.1em;text-shadow:0 0 8px rgba(255,50,50,.3)}
.lg-target-pts{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:900;color:#ff4444;white-space:nowrap;text-shadow:0 0 10px rgba(255,50,50,.5)}
@keyframes lg-target-pulse{0%,100%{transform:scale(1);border-color:rgba(255,60,60,.85)}50%{transform:scale(1.08);border-color:rgba(255,80,80,1)}}

/* Score HUD */
.lg-hud{position:fixed;bottom:20px;left:20px;z-index:99998;pointer-events:none;font-family:'IBM Plex Mono',monospace}
.lg-hud-score{font-size:1.6rem;font-weight:900;color:#ffdd44;text-shadow:0 0 12px rgba(255,200,40,.4),0 2px 4px rgba(0,0,0,.6);letter-spacing:.04em}
.lg-hud-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,200,60,.4);margin-bottom:2px}
.lg-hud-streak{font-size:.65rem;color:#ff6644;text-shadow:0 0 6px rgba(255,80,40,.4);margin-top:2px;opacity:0;transition:opacity .2s}
.lg-hud-streak.is-vis{opacity:1}
.lg-hud-weapon{font-size:.58rem;color:#66ddff;text-shadow:0 0 6px rgba(80,200,255,.3);margin-top:4px;opacity:0;transition:opacity .2s}
.lg-hud-weapon.is-vis{opacity:1}

/* Mobile: push ammo & HUD to the very left edge */
@media (max-width: 960px) {
  .lg-ammo {
    left: 4px;
    top: 8px;
    gap: 2px;
  }
  .lg-shell {
    width: 14px;
    height: 4px;
  }
  .lg-shell::before {
    width: 3px;
  }
  .lg-ammo-count {
    font-size: .45rem;
    margin-top: 2px;
  }
  .lg-hud {
    left: 4px;
    bottom: 12px;
  }
  /* Quarter-size bullets on mobile */
  .lg-decal {
    width: 4px;
    height: 4px;
    transform-origin: top right;
    transform: translate(-50%,-50%) scale(0.25);
  }
  .lg-flash {
    transform: scale(0.5);
    transform-origin: top right;
  }
  .lg-flash-core {
    width: 15px;
    height: 15px;
  }
  .lg-flash-ring {
    width: 30px;
    height: 30px;
  }
  .lg-flash-ring2 {
    width: 40px;
    height: 40px;
  }
  .lg-impact-spark {
    width: 4px;
    height: 4px;
  }
}

/* Powerups */
.lg-powerup{position:absolute;z-index:9994;pointer-events:none;width:36px;height:36px;cursor:none;animation:lg-pu-bob 2s ease-in-out infinite}
.lg-powerup-inner{width:100%;height:100%;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lg-powerup--mag .lg-powerup-inner{background:linear-gradient(135deg,#22ff66 0%,#00cc44 50%,#008822 100%);box-shadow:0 0 16px rgba(30,255,80,.6),0 0 30px rgba(0,200,60,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.lg-powerup--sg .lg-powerup-inner{background:linear-gradient(135deg,#3388ff 0%,#1155dd 50%,#0033aa 100%);box-shadow:0 0 16px rgba(50,100,255,.5),0 0 30px rgba(30,80,255,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.lg-powerup-label{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:.48rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6);text-shadow:0 1px 4px rgba(0,0,0,.4)}
@keyframes lg-pu-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Bullet decal — hot impact cooling animation */
.lg-decal{position:absolute;pointer-events:none;z-index:9990;width:14px;height:14px;transform:translate(-50%,-50%)}
.lg-decal-hole{position:absolute;inset:2px;border-radius:50%;animation:lg-decal-cool 1.2s ease-out forwards}
.lg-decal-crack{position:absolute;inset:0;background:radial-gradient(circle,transparent 25%,rgba(80,80,80,.25) 40%,transparent 60%);border-radius:50%}
.lg-decal-glow{position:absolute;inset:-4px;border-radius:50%;animation:lg-decal-glow 0.6s ease-out forwards;pointer-events:none}
@keyframes lg-decal-cool{0%{background:radial-gradient(circle,#ffcc00 0%,#ff8800 40%,rgba(255,100,0,.6) 70%,transparent 85%);box-shadow:0 0 8px rgba(255,160,0,.8)}20%{background:radial-gradient(circle,#ff6600 0%,#dd2200 40%,rgba(200,0,0,.5) 70%,transparent 85%);box-shadow:0 0 5px rgba(255,60,0,.5)}60%{background:radial-gradient(circle,#aa1100 0%,#551100 40%,rgba(60,10,0,.4) 70%,transparent 85%);box-shadow:0 0 2px rgba(180,30,0,.3)}100%{background:radial-gradient(circle,#111 0%,#333 50%,transparent 70%);box-shadow:none}}
@keyframes lg-decal-glow{0%{background:radial-gradient(circle,rgba(255,200,50,.5) 0%,rgba(255,120,0,.3) 40%,transparent 70%)}100%{background:radial-gradient(circle,transparent 0%,transparent 100%);opacity:0}}

/* Impact sparks at bullet hole */
.lg-impact-spark{position:absolute;pointer-events:none;z-index:9991;width:8px;height:8px;border-radius:50%;animation:lg-impact-fly var(--dur) ease-out forwards}
@keyframes lg-impact-fly{0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1)}60%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(0.2)}}

/* Destroyed word */
.lg-word-dead{display:inline-block;pointer-events:none;animation:lg-word-explode .5s ease-out forwards;transform-origin:center center}
@keyframes lg-word-explode{0%{opacity:1;transform:scale(1) rotate(0);color:inherit;filter:brightness(1)}15%{color:#ff6600;filter:brightness(2.5);transform:scale(1.3) rotate(2deg)}40%{opacity:.7;color:#ff2200;filter:brightness(1.5);transform:scale(1.1) rotate(-1deg)}100%{opacity:0;transform:scale(0.3) rotate(8deg) translateY(-20px);filter:brightness(0.5)}}
.lg-word-char{display:inline-block;animation:lg-char-fly .6s ease-out forwards;animation-delay:var(--cd)}
@keyframes lg-char-fly{0%{opacity:1;transform:translate(0,0) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}}

/* Flying shell casing */
.lg-casing{position:fixed;z-index:99996;pointer-events:none;width:6px;height:18px;border-radius:1.5px 1.5px 1px 1px;background:linear-gradient(180deg,#e8c840 0%,#d4a820 40%,#c89818 60%,#dbb830 100%);box-shadow:0 0 3px rgba(200,160,20,.5),inset 1px 0 0 rgba(255,255,255,.25)}
.lg-casing::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:1.5px 1.5px 0 0;background:linear-gradient(180deg,#c07830 0%,#a86020 100%)}

/* Screen shake */
@keyframes lg-shake{0%{transform:translate(0,0)}10%{transform:translate(-3px,2px)}20%{transform:translate(4px,-2px)}30%{transform:translate(-2px,3px)}40%{transform:translate(3px,-1px)}50%{transform:translate(-1px,2px)}60%{transform:translate(2px,-2px)}70%{transform:translate(-2px,1px)}80%{transform:translate(1px,-1px)}100%{transform:translate(0,0)}}
.lg-shake{animation:lg-shake .15s ease-out}

/* Prevent decals and shake from causing overflow scrollbars */
html.lg-active,
html.lg-active body {
  overflow-x: hidden !important;
}