:root{
  --bg: #0b0f14;                /* background color */
  --panel: #0f1622;             /* panel color */
  --surface: #0d1420;           /* surface color */
  --primary: #48b8ff;           /* accent blue */
  --primary-600: #199fe9;       /* darker accent */
  --success: #3fe58a;           /* green */
  --danger: #ff4d6d;            /* red */
  --warning: #ffcf56;           /* yellow */
  --text: #e7eef6;              /* text color */
  --muted: #93a5b5;             /* secondary text */
  --ring: rgba(72,184,255,.35); /* glow ring */
  --shadow: 0 10px 30px rgba(0,0,0,.35); /* card shadow */
  --radius: 14px;               /* border radius */
  --header-h: 72px;             /* header height (desktop default) */
}

/* base */
*{ box-sizing: border-box; }     /* include padding/border in size */
html,body{ height:100%; }        /* full viewport height */
body{
  margin:0;                      /* remove default margin */
  background: radial-gradient(1200px 800px at 70% -10%, #122033 0%, var(--bg) 45%); /* backdrop */
  color: var(--text);            /* text color */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; /* font stack */
  overflow: hidden;              /* disable scroll */
}

/* header */
.header{
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); /* fixed bar */
  display: grid;                                         /* grid layout */
  grid-template-columns: 1fr auto 1fr;                   /* brand | stats | controls */
  grid-template-areas: "brand stats controls";           /* named areas */
  align-items: center;                                   /* vertical center */
  gap: 16px; padding: 0 16px;                            /* spacing */
  background: linear-gradient(180deg, rgba(15,23,34,.9), rgba(15,23,34,.7)); /* translucent bg */
  border-bottom: 1px solid rgba(255,255,255,.06);        /* subtle line */
  backdrop-filter: blur(8px);                            /* blur behind */
  box-shadow: var(--shadow);                             /* shadow */
  z-index: 10;                                           /* above stage */
}
.brand   { grid-area: brand; }     /* area mapping */
.stats   { grid-area: stats; }
.controls{ grid-area: controls; }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.4px; } /* logo row */
.brand .dot{
  width:10px; height:10px; border-radius:50%; background: var(--primary); /* glowing dot */
  box-shadow: 0 0 0 6px var(--ring), 0 0 18px var(--primary);
}

/* stats */
.stats{ display:flex; justify-content:center; align-items:center; gap:22px; font-variant-numeric: tabular-nums; } /* centered stats */
.stat{
  display:flex; align-items:baseline; gap:8px; padding:8px 12px; /* stat pill */
  background: linear-gradient(180deg, rgba(34,45,65,.25), rgba(16,24,35,.2)); /* subtle bg */
  border: 1px solid rgba(255,255,255,.06); /* border */
  border-radius:10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); /* inset highlight */
}
.stat .label{ color: var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; } /* label style */
.stat .value{ font-weight:700; min-width: 2ch; text-align:right; } /* numeric style */
#stat-acc .value{ min-width:4ch; } /* wider for % */

.meter{
  height:6px; width:160px; border-radius:999px; overflow:hidden; background: rgba(255,255,255,.07); /* bar bg */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4); margin-left:8px; /* inset depth */
}
.meter .fill{
  display: block;  /* allow width */
  height:100%; width:0%; /* updated via JS */
  background: linear-gradient(90deg, var(--danger), var(--warning) 45%, var(--success)); /* color ramp */
  transition: width 160ms linear; /* smooth growth */
}

/* controls */
.controls{ display:flex; justify-content:flex-end; gap:10px; } /* right aligned buttons */
.btn{
  --_bg: var(--panel); --_fg: var(--text); /* defaults */
  display:inline-flex; align-items:center; gap:10px; /* vertical center */
  height:40px; padding:0 14px; border-radius:12px; /* size/shape */
  border:1px solid rgba(255,255,255,.08); /* border */
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--_bg); /* glossy */
  color:var(--_fg); font-weight:600; letter-spacing:.3px; /* text */
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); /* depth */
  cursor:pointer; user-select:none; /* click feel */
  transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease, border-color 160ms ease; /* interactivity */
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); } /* hover lift */
.btn:active{ transform: translateY(0); box-shadow: 0 6px 18px rgba(0,0,0,.25); } /* press */
.btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; } /* focus ring */

.btn-primary{ --_bg: linear-gradient(180deg, var(--primary), var(--primary-600)); --_fg:#062031; border-color:transparent; } /* start button color */
.btn-danger{ --_bg: linear-gradient(180deg, #ff6a88, #ff4d6d); --_fg:#2c0810; border-color:transparent; } /* pause button color */

/* stage */
.stage{
  position: fixed; inset: var(--header-h) 0 0 0; /* fill below header */
  background:
    radial-gradient(900px 600px at 30% 10%, rgba(40,66,95,.14), transparent 60%),
    radial-gradient(1200px 800px at 85% 40%, rgba(67,186,255,.10), transparent 60%); /* texture */
  overflow:hidden; cursor: crosshair; isolation:isolate; /* game cursor */
}

/* target */
.target{
  position:absolute; inset:0 auto auto 0; /* absolutely positioned */
  width:120px; height:120px; border-radius:50%; /* circle */
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.4), rgba(255,255,255,.1) 35%, rgba(255,255,255,.06) 36%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.25) 56%),
    radial-gradient(circle at 50% 50%, rgba(67,186,255,.35), rgba(67,186,255,.1) 55%, rgba(67,186,255,.04) 70%, transparent 71%); /* visual look */
  border:2px solid rgba(255,255,255,.25); /* rim */
  box-shadow: 0 8px 26px rgba(0,0,0,.45), inset 0 0 40px rgba(67,186,255,.25); /* depth */
  animation: shrink linear both; /* shrink over time */
  animation-play-state: running; /* started */
}
.target.paused { animation-play-state: paused; } /* pause state */

/* shrink timeline (duration set via JS) */
@keyframes shrink{
  from{ transform: scale(1); }   /* full size */
  to{ transform: scale(.05); opacity:.25; } /* tiny + faded */
}

/* feedback states */
.target.hit{
  animation: pop 220ms ease-out, shrink linear both; /* pop then continue shrinking */
  border-color: rgba(63,229,138,.95); /* green border */
  box-shadow: 0 0 0 6px rgba(63,229,138,.35), 0 12px 34px rgba(0,0,0,.5);
}
.target.miss, .target.timeout{
  animation: shake 300ms ease-in-out, shrink linear both; /* shake then continue */
  border-color: rgba(255,77,109,.85); /* red border */
  box-shadow: 0 0 0 6px rgba(255,77,109,.3), 0 12px 34px rgba(0,0,0,.5);
}

@keyframes pop{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.15); }
  100%{ transform: scale(.85); opacity:.85; }
}
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

/* click ripple */
.click-pulse{
  position:absolute; pointer-events:none; /* ignore clicks */
  width:12px; height:12px; border-radius:999px; border:2px solid rgba(255,255,255,.85); /* ring */
  animation: ripple 480ms ease-out forwards; /* expand/fade */
  filter: drop-shadow(0 0 10px rgba(67,186,255,.6)); /* glow */
}
@keyframes ripple{
  from{ transform: translate(-50%,-50%) scale(.75); opacity:1; }
  to{ transform: translate(-50%,-50%) scale(8); opacity:0; }
}

/* overlay */
.banner{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; /* centered text */
  background: radial-gradient(800px 400px at 50% -10%, rgba(67,186,255,.05), transparent 70%);
}
.banner .msg{
  display:inline-flex; align-items:center; gap:12px; /* pill */
  padding:12px 18px; border-radius: var(--radius);
  background: rgba(16,24,35,.6);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  font-weight:700; letter-spacing:.4px; color: var(--muted);
  text-transform: uppercase; font-size:12px;
}

/* utils */
.hidden{ display:none !important; } /* hide element */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* screenreader only */

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } /* minimize motion */
}

/* ====== Responsive header layouts ====== */

/* Tablet ≤ 1024px: two rows (brand|controls) + stats below */
@media (max-width: 1024px){
  :root{ --header-h: 112px; }           /* taller header */
  .header{
    grid-template-columns: 1fr auto;    /* two columns */
    grid-template-areas:
      "brand controls"                  /* row 1 */
      "stats  stats";                   /* row 2 */
    row-gap: 8px;
    align-content: center;
  }
  .stats{
    justify-content: center;
    flex-wrap: wrap;                    /* wrap pills */
    gap: 12px;
  }
  .stat{ padding: 6px 10px; }
  .meter{ width: 120px; }
  .btn{ height: 36px; padding: 0 12px; }
}

/* Mobile ≤ 640px: stacked (brand, stats, controls) */
@media (max-width: 640px){
  :root{ --header-h: 156px; }          /* even taller */
  .header{
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "stats"
      "controls";
    row-gap: 8px;
  }
  .brand{ justify-content: center; }
  .controls{ justify-content: center; gap: 8px; }
  .btn{ height: 34px; padding: 0 10px; border-radius: 10px; }
  .stats{
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .stat{ padding: 6px 8px; }
  .stat .label{ font-size: 11px; letter-spacing: .1em; }
  #stat-acc .value{ min-width: 3ch; }
  .meter{ width: 96px; }
}

/* Very small phones ≤ 360px */
@media (max-width: 360px){
  :root{ --header-h: 172px; }          /* safeguard height */
  .meter{ width: 72px; }
  .stat{ padding: 5px 6px; }
}

/* ===== Slider styles ===== */
.level-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 160px; height: 6px; margin-left: 10px; /* slider size */
  background: rgba(255,255,255,.07);            /* track bg */
  border-radius: 999px; outline: none; cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}

/* track (WebKit/Chromium) */
.level-slider::-webkit-slider-runnable-track{
  height: 6px; border-radius: 999px;
  background:
    linear-gradient(90deg, var(--danger), var(--warning) 45%, var(--success)); /* gradient track */
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 0;
}
.level-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 6px var(--ring);
  margin-top: -6px; /* center thumb on 6px track */
}

/* Firefox */
.level-slider::-moz-range-track{
  height: 6px; border-radius: 999px;
  background:
    linear-gradient(90deg, var(--danger), var(--warning) 45%, var(--success));
}
.level-slider::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 6px var(--ring);
}

/* visual tick marks for levels */
.level-slider{
  background:
    repeating-linear-gradient(to right,
      rgba(255,255,255,.35) 0 1px, transparent 1px 26.6px), /* 6 stripes across 160px */
    rgba(255,255,255,.07);
}