/* ==========================================================================
   jatek.css — „Lézer Célkereszt" böngészős mini-játék oldal-specifikus stílusai.
   A base.css mellé töltődik be. A közös elemek (:root, reset, .btn, .wrap,
   .eyebrow, topbar/brand/nav, footer) a base.css-ben vannak.
   ========================================================================== */

/* game section */
.game-sec{background:var(--ink);color:#fff;padding:clamp(2rem,4vw,3.5rem) 0 clamp(3rem,6vw,5rem)}
.game-head{text-align:center;margin-bottom:1.6rem}
.game-head .eyebrow{color:var(--o-yellow);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.game-head .eyebrow::before,.game-head .eyebrow::after{content:"";width:26px;height:3px;background:var(--flame-h)}
.game-head h1{font-size:clamp(2.4rem,6vw,4.6rem)}
.game-head h1 .fl{color:transparent;background:var(--flame);-webkit-background-clip:text;background-clip:text}
.game-head p{color:#bdb0a2;max-width:54ch;margin:.7rem auto 0;line-height:1.5}

/* HUD */
.hud{display:flex;align-items:stretch;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);margin-bottom:1px}
.hud .cell{background:var(--ink-2);padding:.7rem 1rem;flex:1;text-align:center;min-width:0}
.hud .cell .l{font-family:'Saira Condensed',sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:#8c7e70}
.hud .cell .v{font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:1.7rem;line-height:1;margin-top:.15rem}
.hud .cell.score .v{background:var(--flame);-webkit-background-clip:text;background-clip:text;color:transparent}
.hud .cell.combo .v{color:var(--o-yellow)}
.hud .cell.time .v{color:#fff}
.hud .cell.time.low .v{color:var(--o-red);animation:blink .6s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.hud .timebar{position:absolute;left:0;bottom:0;height:4px;background:var(--flame-h);width:100%;transform-origin:left;transition:transform .25s linear}
.hud-wrap{position:relative}

/* stage */
.stage{position:relative;height:min(60vh,560px);min-height:380px;background:
   radial-gradient(120% 90% at 50% 0%,rgba(255,122,24,.1),transparent 55%),
   radial-gradient(90% 80% at 50% 120%,rgba(226,36,20,.12),transparent 55%),
   var(--ink-3);
  border:1px solid rgba(255,255,255,.12);overflow:hidden;cursor:none;user-select:none;touch-action:manipulation}
.stage::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none;mix-blend-mode:overlay}
.stage.flash{animation:stageflash .12s}
@keyframes stageflash{0%{box-shadow:inset 0 0 80px rgba(255,122,24,.5)}100%{box-shadow:none}}

/* target */
.target{position:absolute;transform:translate(-50%,-50%) scale(0);border-radius:50%;display:grid;place-items:center;cursor:none;animation:pop .18s cubic-bezier(.2,1.4,.5,1) forwards;will-change:transform}
@keyframes pop{to{transform:translate(-50%,-50%) scale(1)}}
.target .ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--o-orange);background:radial-gradient(circle at 50% 40%,rgba(255,122,24,.25),rgba(16,12,10,.55));box-shadow:0 0 0 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.5)}
.target .ring::before{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.target .ring::after{content:"";position:absolute;inset:42%;border-radius:50%;background:var(--o-red)}
.target .life{position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,255,255,.18)}
.target.bonus .ring{border-color:var(--o-yellow);background:radial-gradient(circle at 50% 40%,rgba(255,194,51,.35),rgba(16,12,10,.5))}
.target.bonus .ring::after{background:var(--o-yellow)}
.target.bonus .star{position:absolute;color:#1a0e00;font-family:'Saira Condensed';font-weight:900;font-style:italic;font-size:1rem;z-index:2}
.target.bomb .ring{border-color:#3aa0ff;background:radial-gradient(circle at 50% 40%,rgba(58,160,255,.3),rgba(16,12,10,.6))}
.target.bomb .ring::after{background:#fff;width:0;height:0}
.target.bomb .no{position:absolute;z-index:2;color:#fff;font-size:1.4rem;font-weight:900;line-height:1}
.target.dead{animation:none;pointer-events:none}

/* crosshair */
.crosshair{position:absolute;width:54px;height:54px;transform:translate(-50%,-50%);pointer-events:none;z-index:30;mix-blend-mode:screen}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--o-orange);box-shadow:0 0 6px rgba(255,122,24,.9)}
.crosshair::before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.crosshair::after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}
.crosshair .c{position:absolute;inset:18%;border:2px solid var(--o-orange);border-radius:50%;box-shadow:0 0 8px rgba(255,122,24,.7)}
.crosshair.recoil{animation:recoil .12s}
@keyframes recoil{0%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1)}}

/* fx */
.fx{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:25;font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:1.5rem;animation:fxrise .7s ease-out forwards}
.fx.plus{color:var(--o-yellow);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.fx.minus{color:#3aa0ff}
.fx.miss{color:#9c8e80;font-size:1.1rem}
@keyframes fxrise{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(1.1)}}
.muzzle{position:absolute;width:70px;height:70px;transform:translate(-50%,-50%);pointer-events:none;z-index:26;border-radius:50%;background:radial-gradient(circle,rgba(255,210,74,.95),rgba(255,122,24,.5) 40%,transparent 70%);animation:muz .18s ease-out forwards}
@keyframes muz{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
.bullethole{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);pointer-events:none;z-index:5;border-radius:50%;background:rgba(0,0,0,.6);box-shadow:0 0 0 2px rgba(255,255,255,.08);animation:fade 2.5s forwards}
@keyframes fade{0%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* overlays */
.overlay{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(16,12,10,.82);backdrop-filter:blur(4px);padding:2rem;cursor:default}
.overlay.hide{display:none}
.overlay .big{font-size:clamp(2.4rem,6vw,4rem);color:#fff;margin-bottom:.4rem}
.overlay .big .fl{color:transparent;background:var(--flame);-webkit-background-clip:text;background-clip:text}
.overlay p{color:#cdbfb2;max-width:42ch;line-height:1.5;margin-bottom:1.6rem}
.legend{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.8rem}
.legend .lg{display:flex;align-items:center;gap:.55rem;color:#e0d5c7;font-size:.92rem}
.legend .dot{width:30px;height:30px;border-radius:50%;flex:0 0 auto;border:2px solid;display:grid;place-items:center;font-weight:900;font-size:.8rem}
.legend .dot.t{border-color:var(--o-orange);background:radial-gradient(circle at 50% 40%,rgba(255,122,24,.3),transparent)}
.legend .dot.b{border-color:var(--o-yellow);background:radial-gradient(circle at 50% 40%,rgba(255,194,51,.35),transparent);color:#ffc233}
.legend .dot.x{border-color:#3aa0ff;background:radial-gradient(circle at 50% 40%,rgba(58,160,255,.3),transparent);color:#fff}
.go-stats{display:flex;gap:1px;background:rgba(255,255,255,.12);margin-bottom:1.8rem;border:1px solid rgba(255,255,255,.12)}
.go-stats .s{background:var(--ink-2);padding:1rem 1.3rem;text-align:center;min-width:90px}
.go-stats .s .l{font-family:'Saira Condensed';font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:#8c7e70}
.go-stats .s .v{font-family:'Saira Condensed';font-weight:900;font-style:italic;font-size:2rem;line-height:1;margin-top:.1rem}
.go-stats .s .v.hl{background:var(--flame);-webkit-background-clip:text;background-clip:text;color:transparent}
.best-tag{display:inline-flex;align-items:center;gap:.5em;color:var(--o-yellow);font-family:'Saira Condensed';font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1.2rem}
.newbest{color:var(--o-yellow);font-family:'Saira Condensed';font-weight:900;font-style:italic;font-size:1.2rem;margin-bottom:.8rem;animation:blink 1s infinite}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.toolbar .left{display:flex;align-items:center;gap:1rem;color:#bdb0a2;font-size:.9rem}
.sound-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--ink-2);border:1px solid rgba(255,255,255,.15);color:#e0d5c7;font-family:'Saira Condensed';font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.05em;padding:.5rem .9rem;cursor:pointer;font-size:.85rem}
.sound-btn:hover{border-color:var(--o-orange);color:#fff}
.sound-btn svg{width:16px;height:16px;stroke:var(--o-orange);fill:none;stroke-width:2}

.note{color:#8c7e70;font-size:.85rem;text-align:center;margin-top:1.2rem}

@media(max-width:860px){
  .hud .cell .v{font-size:1.3rem}
  .hud .cell{padding:.6rem .4rem}
}
@media(max-width:560px){.stage{cursor:auto}}