/* =========================================================================
   RANGE SESSION game. Scoped to .g- so nothing here can leak into the site.
   ========================================================================= */

/* An author stylesheet display value outranks the browser's own
   [hidden]{display:none}, so any element toggled by the hidden attribute that
   also sets display will never actually hide. That is what left the game over
   overlay permanently covering the canvas. This guard covers every element in
   the game, present and future. */
.g-wrap [hidden],
.g-wrap[hidden]{display:none !important}

.g-wrap{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--ink-850);
  box-shadow:0 40px 90px -44px rgba(0,0,0,.95);
}

/* Screen ------------------------------------------------------------ */
.g-screen{position:relative;aspect-ratio:16/9;min-height:320px;background:#0a1220}
@media (max-width:760px){ .g-screen{aspect-ratio:4/3;min-height:300px} }
#g-canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:crosshair}

/* Top status strip --------------------------------------------------- */
.g-top{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;flex-wrap:wrap;gap:0;
  background:linear-gradient(180deg,rgba(7,9,10,.86),rgba(7,9,10,0));
  padding:.55rem .7rem 1.4rem;
  pointer-events:none;
}
.g-stat{flex:1 1 auto;min-width:74px;padding:0 .55rem}
.g-stat__k{
  display:block;font-family:var(--f-mono);font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.15rem;
}
.g-stat__v{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(.95rem,2vw,1.25rem);line-height:1;color:#fff;letter-spacing:-.01em;
}
.g-stat--hi .g-stat__v{color:var(--g-400)}

/* Verdict ------------------------------------------------------------ */
.g-verdict{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:5;
  text-align:center;pointer-events:none;
  background:rgba(7,9,10,.74);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:1rem 1.6rem;
  animation:gPop .34s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes gPop{from{opacity:0;transform:translate(-50%,-40%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.g-verdict__t{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,3.4vw,2rem);line-height:1;letter-spacing:-.02em;color:#fff}
.g-verdict__d{display:block;font-size:.82rem;color:var(--txt-dim);margin-top:.35rem}
.g-verdict__p{display:block;font-family:var(--f-mono);font-size:.9rem;color:var(--g-400);margin-top:.5rem}
.g-verdict__p em{font-style:normal;color:var(--g-300)}
.g-verdict.is-epic{border-color:var(--g-400);box-shadow:0 0 50px -8px rgba(166,224,74,.55)}
.g-verdict.is-epic .g-verdict__t{color:var(--g-300)}
.g-verdict.is-great .g-verdict__t{color:var(--g-400)}
.g-verdict.is-good .g-verdict__t{color:#DCE7D6}
.g-verdict.is-bad{border-color:rgba(229,83,75,.5)}
.g-verdict.is-bad .g-verdict__t{color:#FF8B84}

/* Meter -------------------------------------------------------------- */
.g-meter{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:.65rem .8rem .8rem;
  background:linear-gradient(0deg,rgba(7,9,10,.9),rgba(7,9,10,0));
}
.g-meter__hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem}
.g-meter__lab{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-faint)}
.g-meter.is-live .g-meter__lab{color:var(--g-400)}
.g-meter__hint{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.09em;color:rgba(255,255,255,.55)}
.g-meter__bar{
  position:relative;height:16px;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.09);border:1px solid var(--line-2);
}
.g-meter__fill{
  position:absolute;inset:0 auto 0 0;width:0%;
  background:linear-gradient(90deg,var(--g-700),var(--g-500) 62%,var(--g-300) 88%,#E9B949);
  transition:none;
}
/* Sweet spot marks. Power rewards the top, accuracy rewards the centre. */
.g-meter__bar::after{
  content:"";position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.55);
  left:92%;
}
.g-meter.is-acc .g-meter__bar::after{left:50%;background:var(--g-300);width:3px;box-shadow:0 0 10px var(--g-400)}

/* Controls ----------------------------------------------------------- */
.g-ctl{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:.9rem 1rem;border-top:1px solid var(--line);background:var(--ink-800);
}
.g-clubs{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.g-clubbtn{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  min-width:60px;padding:.45rem .5rem;
  background:var(--ink-750);border:1px solid var(--line-2);border-radius:var(--radius);
  cursor:pointer;transition:all .16s var(--ease);
}
.g-clubbtn:hover{border-color:var(--g-600)}
.g-clubbtn.is-on{background:var(--g-500);border-color:var(--g-500)}
.g-clubbtn__id{font-family:var(--f-display);font-weight:800;font-size:.9rem;color:#fff;letter-spacing:.01em}
.g-clubbtn__y{font-family:var(--f-mono);font-size:.6rem;color:var(--txt-faint)}
.g-clubbtn.is-on .g-clubbtn__id,.g-clubbtn.is-on .g-clubbtn__y{color:#07210A}
.g-go{white-space:nowrap}

/* Readout ------------------------------------------------------------ */
.g-panel{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.g-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;background:var(--line)}
.g-ro{background:var(--ink-850);padding:.6rem .75rem}
.g-ro__k{display:block;font-family:var(--f-mono);font-size:.54rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:.2rem}
.g-ro__v{display:block;font-family:var(--f-display);font-weight:800;font-size:1.1rem;line-height:1;color:var(--g-400);letter-spacing:-.015em}
.g-ro__v small{font-size:.55em;color:var(--txt-dim);margin-left:.25em;font-weight:700}

/* Setup row ---------------------------------------------------------- */
.g-setup{
  display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;
  padding:.85rem 1rem;border-top:1px solid var(--line);background:var(--ink-850);
}
.g-setup label{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-dim);display:flex;align-items:center;gap:.6rem}
.g-setup select{
  padding:.5rem .6rem;background:var(--ink-900);border:1px solid var(--line-2);
  border-radius:var(--radius);color:var(--txt);font-family:var(--f-body);font-size:.86rem;
  letter-spacing:0;text-transform:none;min-height:40px;
}
.g-setup select:focus{outline:none;border-color:var(--g-500);box-shadow:0 0 0 3px rgba(140,198,63,.16)}
.g-note{font-size:.76rem;color:var(--txt-faint);margin:0;flex:1 1 220px;min-width:0}

/* Game over ---------------------------------------------------------- */
.g-over{
  position:absolute;inset:0;z-index:8;
  display:grid;place-items:center;padding:1rem;
  background:rgba(6,8,9,.93);backdrop-filter:blur(10px);
  animation:gFade .3s var(--ease) both;
}
@keyframes gFade{from{opacity:0}to{opacity:1}}
.g-over__in{text-align:center;max-width:520px;width:100%}
.g-over__k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500);margin:0 0 .5rem}
.g-over__rank{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,4vw,2.3rem);line-height:1;letter-spacing:-.02em;margin:0;color:#fff}
.g-over__score{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,8vw,4.4rem);line-height:1;color:var(--g-400);margin:.3rem 0 .4rem;letter-spacing:-.03em}
.g-over__d{color:var(--txt-dim);font-size:.92rem;margin:0 auto .5rem;max-width:42ch}
.g-over__stats{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:var(--txt-faint);margin:0 0 1.2rem}
.g-over__acts{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.4rem}
.g-over__lbk{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-faint);margin:0 0 .5rem}
.g-lb{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:left}
.g-lb li{display:grid;grid-template-columns:24px 1fr auto;gap:.7rem;align-items:center;background:var(--ink-850);padding:.5rem .75rem;font-size:.85rem}
.g-lb li span{font-family:var(--f-mono);font-size:.7rem;color:var(--txt-faint)}
.g-lb li b{font-family:var(--f-display);font-weight:800;color:#fff}
.g-lb li em{font-style:normal;font-size:.74rem;color:var(--txt-dim);text-align:right}
.g-lb li.is-you{background:rgba(140,198,63,.12)}
.g-lb li.is-you b{color:var(--g-300)}

@media (max-width:640px){
  .g-ctl{grid-template-columns:1fr;gap:.7rem}
  .g-go{width:100%}
  .g-clubs{justify-content:space-between}
  .g-clubbtn{flex:1 1 auto;min-width:48px}
  .g-stat{min-width:60px;padding:0 .35rem}
}

@media (prefers-reduced-motion:reduce){
  .g-verdict,.g-over{animation:none}
}

/* HUD brand badge */
.g-badge{
  position:absolute;top:.5rem;right:.6rem;
  width:clamp(38px,4.4vw,54px);height:auto;
  opacity:.92;pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));
}
@media (max-width:640px){ .g-badge{width:34px;top:.4rem;right:.45rem} }

/* Start screen ------------------------------------------------------- */
.g-start{
  position:absolute;inset:0;z-index:7;
  display:grid;place-items:center;padding:1rem;text-align:center;
  background:radial-gradient(120% 100% at 50% 40%,rgba(6,9,8,.62),rgba(6,9,8,.90));
  backdrop-filter:blur(3px);
}
.g-start[hidden]{display:none !important}
.g-start__in{max-width:460px}
.g-start__in img{width:clamp(64px,9vw,92px);height:auto;margin:0 auto .9rem;filter:drop-shadow(0 8px 26px rgba(0,0,0,.7))}
.g-start__k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500);margin:0 0 .4rem}
.g-start__t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:1;font-size:clamp(2rem,5.5vw,3.2rem);margin:0 0 .6rem;color:#fff}
.g-start__d{font-size:.9rem;color:var(--txt-dim);margin:0 auto 1.3rem;max-width:38ch;line-height:1.5}
.g-start__hint{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint);margin:.9rem 0 0}
@media (max-width:640px){ .g-start__d{font-size:.84rem} }
.g-resume{margin-top:.6rem;display:inline-flex}
.g-start__in .btn{margin-inline:auto}

/* Aim control -------------------------------------------------------- */
.g-ctl{grid-template-columns:1fr auto auto}
.g-aim{display:flex;align-items:center;gap:.35rem}
.g-aimbtn{
  width:38px;height:38px;flex:none;
  background:var(--ink-750);border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--txt);font-size:1rem;cursor:pointer;transition:all .16s var(--ease);
}
.g-aimbtn:hover{border-color:var(--g-500);background:var(--ink-700);color:#fff}
.g-aim__v{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g-400);min-width:78px;text-align:center;
}
@media (max-width:900px){
  .g-ctl{grid-template-columns:1fr;justify-items:stretch}
  .g-aim{justify-content:center}
}