/* ════════════════════════════════════════════════════════
   NIGHTWINGS REACTION RACE — shell & chrome styles
   DOM whack-the-owl reflex game (logic in reaction-race-game.js).
   Nightwings look: void bg, gold accents, Bricolage + Hanken. EN/RO.
   ════════════════════════════════════════════════════════ */
.rr-app{
  position:fixed; inset:0; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 90% at 82% -10%, #241452 0%, #150c31 42%, #0A0518 100%);
  color:#EDEAF7; font-family:var(--font-ui); overflow:hidden;
}
.rr-stars{position:absolute;inset:0;pointer-events:none;z-index:0;}
.rr-stars i{position:absolute;border-radius:50%;background:#fff;animation:rrTwinkle 3.2s ease-in-out infinite;}
@keyframes rrTwinkle{0%,100%{opacity:.25}50%{opacity:.9}}

/* ── top bar ── */
.rr-top{
  position:relative; z-index:6; display:flex; align-items:center; gap:14px;
  padding:14px 20px; border-bottom:1px solid rgba(245,184,0,.14);
  background:rgba(13,8,32,.4); backdrop-filter:blur(6px);
}
.rr-home{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:#B4B2DC;font-size:22px;text-decoration:none;line-height:1;
  border:1px solid rgba(180,178,220,.18); transition:.18s;
}
.rr-home:hover{color:#fff;border-color:rgba(245,184,0,.5);background:rgba(245,184,0,.08);}
.rr-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;}
.rr-brand img{width:26px;height:26px;object-fit:contain;}
.rr-brand b{font-family:var(--font-d);font-weight:800;font-size:15px;letter-spacing:.2px;}
.rr-brand .sep{width:1px;height:16px;background:rgba(180,178,220,.3);margin:0 3px;}
.rr-brand .game{font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--nw-gold);}
.rr-spacer{flex:1;}
.rr-best{
  font-family:var(--font-mono);font-size:12px;font-weight:600;color:#B4B2DC;
  padding:6px 12px;border-radius:8px;border:1px solid rgba(180,178,220,.16);
  background:rgba(255,255,255,.03);white-space:nowrap;
}
.rr-best b{color:var(--nw-gold);}
.rr-pill{display:flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(180,178,220,.14);border-radius:9px;padding:3px;}
.rr-pill button{
  border:none;background:transparent;color:#8B87C4;font-family:var(--font-ui);
  font-weight:700;font-size:12px;letter-spacing:.4px;padding:5px 9px;border-radius:6px;cursor:pointer;transition:.15s;
}
.rr-pill button.on{background:var(--nw-gold);color:#1A1005;}
.rr-icon-btn{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;font-size:16px;
  color:#B4B2DC;border:1px solid rgba(180,178,220,.16);background:rgba(255,255,255,.03);transition:.15s;
}
.rr-icon-btn:hover{color:#fff;border-color:rgba(245,184,0,.4);}
.rr-icon-btn.off{opacity:.5;}

/* ── stage ── */
.rr-stage{position:relative;z-index:2;flex:1;display:grid;place-items:center;padding:20px;min-height:0;}
.rr-frame{
  position:relative; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(245,184,0,.18), inset 0 0 0 4px rgba(0,0,0,.25);
  background:radial-gradient(120% 120% at 50% 0%, #1b1140 0%, #120a2c 55%, #0b0620 100%);
  width:min(720px, 100%); aspect-ratio:4/3; max-height:100%;
}

/* HUD across the top of the arena */
.rr-hud{
  position:absolute; z-index:5; top:0; left:0; right:0;
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:linear-gradient(180deg, rgba(11,6,26,.72), rgba(11,6,26,0));
  pointer-events:none;
}
.rr-stat{display:flex;flex-direction:column;line-height:1;}
.rr-stat .v{font-family:var(--font-d);font-weight:800;font-size:24px;color:#fff;}
.rr-stat .v.gold{color:var(--nw-gold);}
.rr-stat .k{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:#8B87C4;font-weight:800;margin-top:4px;}
.rr-hud .spacer{flex:1;}
.rr-combo{
  font-family:var(--font-d);font-weight:800;font-size:15px;color:var(--nw-gold);
  padding:5px 11px;border-radius:20px;background:rgba(245,184,0,.12);border:1px solid rgba(245,184,0,.32);
  opacity:0;transform:scale(.7);transition:opacity .15s, transform .15s;
}
.rr-combo.on{opacity:1;transform:scale(1);}
.rr-combo.bump{animation:rrBump .28s ease;}
@keyframes rrBump{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
/* timer bar */
.rr-timer{position:absolute;z-index:5;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.06);}
.rr-timer .fill{height:100%;width:100%;background:linear-gradient(90deg,var(--nw-gold),#FFDE7A);transition:width .15s linear;}
.rr-timer .fill.low{background:linear-gradient(90deg,#E05537,#F5832F);}

/* the play field where targets appear */
.rr-field{position:absolute;inset:0;z-index:3;cursor:crosshair;}
.rr-field.flash-bad{animation:rrBadFlash .32s ease;}
@keyframes rrBadFlash{0%,100%{box-shadow:inset 0 0 0 0 rgba(224,85,55,0)}30%{box-shadow:inset 0 0 90px 8px rgba(224,85,55,.55)}}
.rr-field.shake{animation:rrShake .3s ease;}
@keyframes rrShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* targets */
.rr-target{
  position:absolute; display:grid; place-items:center; cursor:pointer;
  border-radius:50%; user-select:none; touch-action:manipulation;
  transform:translate(-50%,-50%) scale(0); animation:rrPop .16s ease forwards;
  font-size:30px; line-height:1;
}
@keyframes rrPop{to{transform:translate(-50%,-50%) scale(1);}}
.rr-target.leaving{animation:rrLeave .16s ease forwards;}
@keyframes rrLeave{to{transform:translate(-50%,-50%) scale(0);opacity:0;}}
.rr-target.good{
  background:radial-gradient(circle at 38% 32%, #FFF0B8 0%, #F5B800 55%, #C88A00 100%);
  box-shadow:0 0 0 4px rgba(245,184,0,.28), 0 0 34px rgba(245,184,0,.55), inset 0 -4px 8px rgba(150,90,0,.4);
}
.rr-target.bad{
  background:radial-gradient(circle at 38% 32%, #FFC1B0 0%, #E05537 52%, #9E2E18 100%);
  box-shadow:0 0 0 4px rgba(224,85,55,.28), 0 0 30px rgba(224,85,55,.5), inset 0 -4px 8px rgba(120,30,15,.5);
}
.rr-target .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  animation:rrRing linear forwards;}
@keyframes rrRing{from{transform:scale(1);opacity:.7}to{transform:scale(1.55);opacity:0}}
/* floating score popup on hit */
.rr-pop{position:absolute;z-index:6;pointer-events:none;font-family:var(--font-d);font-weight:800;
  font-size:20px;transform:translate(-50%,-50%);animation:rrFloat .7s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.6);}
.rr-pop.plus{color:var(--nw-gold);}
.rr-pop.minus{color:#FF8A6A;}
@keyframes rrFloat{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}

/* ── overlays drawn as DOM on top of the field ── */
.rr-overlay{
  position:absolute; inset:0; z-index:8; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.1em; padding:1.6em;
  text-align:center; opacity:0; pointer-events:none; transition:opacity .25s;
}
.rr-overlay.on{opacity:1;pointer-events:auto;}
.rr-scrim{position:absolute;inset:0;background:rgba(13,8,32,.62);backdrop-filter:blur(3px);}
.rr-eyebrow{position:relative;font-family:var(--font-ui);font-weight:800;letter-spacing:.25em;
  font-size:.7em;color:var(--nw-gold);text-transform:uppercase;}
.rr-title{position:relative;font-family:var(--font-d);font-weight:800;color:#fff;line-height:1.02;
  font-size:3.3em;text-shadow:0 4px 0 rgba(199,120,0,.55),0 8px 24px rgba(0,0,0,.5);}
.rr-title .gold{color:var(--nw-gold);}
.rr-owl-hero{position:relative;width:6.4em;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4));animation:rrBob 2.4s ease-in-out infinite;}
@keyframes rrBob{0%,100%{transform:translateY(-6px) rotate(-5deg)}50%{transform:translateY(6px) rotate(3deg)}}
.rr-cta{
  position:relative; font-family:var(--font-d); font-weight:800; font-size:1em; letter-spacing:.3px;
  color:#1A1005; background:var(--nw-gold); border:none; border-radius:.75em; padding:.94em 1.9em; cursor:pointer;
  box-shadow:0 6px 0 #B98400, 0 12px 30px rgba(245,184,0,.3); transition:transform .12s, box-shadow .12s;
}
.rr-cta:hover{transform:translateY(-1px);box-shadow:0 7px 0 #B98400,0 16px 36px rgba(245,184,0,.4);}
.rr-cta:active{transform:translateY(4px);box-shadow:0 2px 0 #B98400;}
.rr-tip{position:relative;font-size:.76em;color:#B4B2DC;max-width:20em;line-height:1.55;}
.rr-legend{position:relative;display:flex;gap:18px;font-size:.72em;color:#CFCBEA;}
.rr-legend span{display:inline-flex;align-items:center;gap:6px;}
.rr-legend .dot{width:16px;height:16px;border-radius:50%;display:inline-block;}
.rr-legend .dot.good{background:radial-gradient(circle at 38% 32%,#FFF0B8,#F5B800 60%,#C88A00);}
.rr-legend .dot.bad{background:radial-gradient(circle at 38% 32%,#FFC1B0,#E05537 55%,#9E2E18);}

/* countdown 3-2-1 */
.rr-count{position:absolute;inset:0;z-index:9;display:grid;place-items:center;opacity:0;pointer-events:none;}
.rr-count.on{opacity:1;}
.rr-count b{font-family:var(--font-d);font-weight:800;font-size:120px;color:#fff;
  text-shadow:0 6px 30px rgba(245,184,0,.6);animation:rrCount .7s ease;}
@keyframes rrCount{0%{transform:scale(.4);opacity:0}30%{opacity:1}100%{transform:scale(1.3);opacity:0}}

/* game-over panel */
.rr-panel{
  position:relative; width:20em; max-width:92%; padding:1.5em 1.5em 1.4em;
  background:linear-gradient(180deg,#241348,#160b2f); border:1.5px solid rgba(245,184,0,.5);
  border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.rr-panel h3{font-family:var(--font-d);font-weight:800;font-size:1.4em;color:#fff;}
.rr-panel .medal{
  width:4em;height:4em;border-radius:50%;margin:.85em auto .25em;display:grid;place-items:center;font-size:2em;
  background:radial-gradient(circle at 38% 32%,#FFE58A,#F5B800 58%,#B98400);
  border:3px solid #fff3cf;box-shadow:0 0 26px rgba(245,184,0,.5);
}
.rr-scorewrap{display:flex;gap:10px;margin-top:16px;}
.rr-sc{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(180,178,220,.14);border-radius:12px;padding:12px 6px;}
.rr-sc .v{font-family:var(--font-d);font-weight:800;font-size:1.5em;color:#fff;line-height:1;}
.rr-sc .v.gold{color:var(--nw-gold);}
.rr-sc .k{font-size:.58em;letter-spacing:1px;text-transform:uppercase;color:#8B87C4;margin-top:5px;font-weight:700;}
.rr-newbest{margin-top:12px;font-family:var(--font-d);font-weight:800;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--nw-gold);display:none;}
.rr-newbest.on{display:block;animation:rrPulse 1s ease-in-out infinite;}
@keyframes rrPulse{0%,100%{opacity:.6}50%{opacity:1}}
.rr-panel .acts{display:flex;flex-direction:column;gap:9px;margin-top:18px;}
.rr-btn{font-family:var(--font-d);font-weight:800;font-size:.94em;border-radius:.7em;padding:.8em;cursor:pointer;border:none;transition:.14s;}
.rr-btn.primary{background:var(--nw-gold);color:#1A1005;box-shadow:0 5px 0 #B98400;}
.rr-btn.primary:hover{filter:brightness(1.05);}
.rr-btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #B98400;}

/* leaderboard mini */
.rr-lb{margin-top:16px;text-align:left;}
.rr-lb .cap{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#8B87C4;font-weight:800;margin-bottom:7px;display:flex;align-items:center;gap:6px;}
.rr-lb .row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;font-size:13px;}
.rr-lb .row+.row{margin-top:2px;}
.rr-lb .row.you{background:rgba(245,184,0,.1);border:1px solid rgba(245,184,0,.28);}
.rr-lb .row .rk{width:20px;font-family:var(--font-mono);font-weight:700;color:#8B87C4;text-align:center;}
.rr-lb .row .nm{flex:1;font-weight:600;color:#EDEAF7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rr-lb .row .sc{font-family:var(--font-mono);font-weight:700;color:var(--nw-gold);}
.rr-lb .row .you-tag{font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--nw-gold);border:1px solid rgba(245,184,0,.4);border-radius:5px;padding:1px 4px;}
.rr-lb .empty{font-size:12px;color:#8B87C4;padding:6px 2px;}

/* name prompt */
.rr-name{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .22s;}
.rr-name.on{opacity:1;pointer-events:auto;}
.rr-name .box{position:relative;width:300px;max-width:90%;background:linear-gradient(180deg,#241348,#160b2f);
  border:1.5px solid rgba(245,184,0,.5);border-radius:20px;padding:24px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.55);}
.rr-name img{width:56px;height:auto;margin-bottom:6px;}
.rr-name input{width:100%;margin-top:14px;padding:13px 15px;border-radius:11px;border:1.5px solid rgba(180,178,220,.25);
  background:rgba(0,0,0,.25);color:#fff;font-family:var(--font-ui);font-size:15px;font-weight:600;outline:none;text-align:center;}
.rr-name input:focus{border-color:var(--nw-gold);}
.rr-name .box .rr-btn{width:100%;margin-top:14px;}

@media (max-width:560px){
  .rr-title{font-size:2.6em;}
  .rr-brand .game{display:none;}
  .rr-legend{flex-direction:column;gap:8px;}
}