@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

*,*::before,*::after{margin:0;padding: 0;box-sizing: border-box;}

:root{
  /*one for nubmers one for words*/
  --font-display: 'Bebas Neue', Arial Narrow, sans-serif;
  --font-body: 'IBM Plex Mono', Courier New, monospace;

  --bg: #0c0b09;
  --bg-1: #13110f;
  --bg-2: #1a1814;
  --bg-3: #23201a;
  --line: #302d26;
  --line-hi: #423d32;
  --ink-hi: #ede7d8;
  --ink: #cfc9b8;
  --ink-mid: #938d7c;
  --ink-low: #6e6859;

  --acid: #e7b741;
  --acid-deep: #bd8f1f;
  --sienna: #c45a36;

  /*colors for each mode*/
  --mode-classic: #e7b73c;
  --mode-precision: #ec2424;
  --mode-speed: #e8662c;
  --mode-reaction: #c26fc4;
  --mode-tracking: #2db89f;

  /*spacing*/
  --sp1:6px; --sp2:12px;--sp3: 18px; --sp4:24px; --sp5:36px;--sp6:54px;--sp7:90px;--sp8:144px;

  --rad-pane:0px; --rad-instr:2px; --rad-coin:50%;

  /*transitions!*/
  --t-fast:120ms;--t:200ms;--t-slow:320ms;
  --ease-out:cubic-bezier(0.22, 1, .36, 1);
  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1);
}

html{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-hi);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  font-variant-numeric: tabular-nums lining-nums;
  user-select: none;
  -webkit-user-select: none;
}

#app{height:100vh;width: 100vw;position: relative;}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transform: scale(0.985);
}
.screen.active{opacity:1; pointer-events: all; transform: scale(1);}

.menu-container {
  width: calc(100% - var(--sp7));
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--sp6);
}

.menu-header {
  text-align: left;
  border-left: var(--sp2) solid var(--acid); padding-left: var(--sp3);
}

.logo {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 12vw, 7rem);
  line-height: 0.82; letter-spacing: 0.02em;
  color: var(--ink-hi); font-weight: 400; text-transform: uppercase;
}

.logo::after {
  content: "/";
  color: var(--acid);
  margin-left: 0.1em;
}

.subtitle {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  color: var(--acid);
  margin-top: var(--sp2);
  text-transform: uppercase;
}

.mode-selector {width: 100%;}

.mode-list {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp1);}
  
.mode-btn {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rad-instr);
  padding: var(--sp4) var(--sp2) var(--sp5);
  color: var(--ink-mid);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp1);
  text-align: center;
  font-family: var(--font-body);
  position: relative;
  transform: translateY(0);
  transition: transform var(--t) var(--ease-out), background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.mode-btn:nth-child(even){transform: translateY(var(--sp1));}
.mode-btn:nth-child(odd){transform: translateY(0);}
.mode-btn:hover{background: var(--bg-3);color: var(--ink-hi);}
.mode-btn:active{transform: translateY(0);}
.mode-btn.active {
  border-color: var(--mode-classic);
  color: var(--mode-classic);
  background: var(--bg-2);
  transform: translateY(calc(-1 * var(--sp1) - 2px));
}
.mode-btn.active::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 4px;
  background: var(--mode-classic);
}

.mode-btn.active[data-mode=precision]{border-color: var(--mode-precision); color: var(--mode-precision);}
.mode-btn.active[data-mode=precision]::after{background: var(--mode-precision);}
.mode-btn.active[data-mode=speed]{border-color: var(--mode-speed); color: var(--mode-speed);}
.mode-btn.active[data-mode=speed]::after{background: var(--mode-speed);}
.mode-btn.active[data-mode=reaction]{border-color: var(--mode-reaction); color: var(--mode-reaction);}
.mode-btn.active[data-mode=reaction]::after{background: var(--mode-reaction);}
.mode-btn.active[data-mode=tracking]{border-color: var(--mode-tracking); color: var(--mode-tracking);}
.mode-btn.active[data-mode=tracking]::after{background: var(--mode-tracking);}

.mode-name{font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;}
.mode-desc{font-size: 0.62rem; color: var(--ink-low);letter-spacing: 0.04em;}

.btn-primary, .btn-secondary {
  padding: var(--sp3) var(--sp6); border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  white-space: nowrap;
}

.btn-primary {
  background: var(--acid);
  color: #14110a;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%,0 100%);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), filter var(--t) var(--ease-out);
}
.btn-primary:hover{
  background: var(--acid-deep);
  filter: brightness(1.08);
}
.btn-primary:active {
  filter:brightness(0.92);
}

.btn-secondary {
  color: var(--ink-mid);
  border: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t) var(--ease-out);
}
.btn-secondary:hover {
  background: var(--line);
  color: var(--ink-hi);
}
.btn-secondary:active {
  background:var(--bg-3);
}

.menu-actions{display: flex; gap: var(--sp1);flex-wrap: wrap;}

.stats-overview {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: var(--sp3) 0 0;
  border-top: 2px solid var(--line-hi);
}

.stats-overview h3 {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink-low);
  margin: 0 0 var(--sp3) var(--sp4);
}

.best-grid{display: flex;}

.best-item {
  flex: 1;
  padding: var(--sp3) var(--sp2);
  text-align: left;
  border-left: 1px solid var(--line);
}

.best-item:first-child{border-left: none;}

.best-label{
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-low);
  margin-bottom: var(--sp1);
}

.best-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--acid);
  letter-spacing: 0.02em;
}

.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease-out);
}
.settings-panel.open{opacity: 1; pointer-events: all;}
.settings-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, .72);
  backdrop-filter: blur(2px);
}
.settings-content {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--acid);
  padding: var(--sp5);
  width: 90%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
}
.settings-content h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--ink-hi);
  font-weight: 400;
  text-transform: uppercase;
}
.setting-row label {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink);
  margin-bottom: var(--sp2);
}
.setting-options{
  display: flex; gap: 0;
}
.setting-btn {
  flex: 1;
  padding: var(--sp2);
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--ink-mid);
  font-size: .72rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: 0;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.setting-btn+.setting-btn{border-left: none;}
.setting-btn:hover {
  border-color: var(--line-hi);
  color: var(--ink-hi);
}
.setting-btn.active {
  background: var(--acid);
  border-color: var(--acid);
  color: #14110a;
}

#game-screen {
  background: var(--bg);
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  display: block;
}

.pause-btn {
  position: absolute;
  bottom: var(--sp4);
  right: var(--sp4);
  z-index: 11;
  background:var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0;
  width: 46px;
  height: 46px;
  color: var(--ink-mid);
  cursor: pointer;
  font-size: 1.15rem;
  font-family: var(--font-body);
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.pause-btn:hover {
  background: var(--bg-3);
  border-color: var(--acid);
  color: var(--acid);
}

#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: var(--sp3) var(--sp4);
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  pointer-events: none;
}
.hud-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp3);

}
.hud-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 78px;
}
.hud-stat:first-child {
  border-left: 3px solid var(--acid);
  padding-left: var(--sp2);
}
.hud-label {
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--ink-low);
  text-transform: uppercase;
}
.hud-value {
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  margin-top: calc(var(--sp1)/2);
  letter-spacing: -0.02em;
}
.hud-value-sm {
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--ink);
}
.hud-stat-sm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}
.hud-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp3);
}
.hud-progress {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;

}
.progress-ring {
  display: block;
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}
.progress-ring-bg {
  fill: none;
  stroke: var(--line);
  stroke-width: 4;
}
.progress-ring-fill {
  fill: none;
  stroke: var(--acid);
  stroke-width: 4;
  stroke-linecap: butt;
  transition: stroke-dashoffset .3s linear;
}
.progress-time {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.hud-mode-badge {
  font-size: .58rem;
  letter-spacing: 0.24em;
  color: var(--acid);
  padding: var(--sp1) var(--sp2);
  border: 1px solid var(--acid);
  text-transform: uppercase;
}


.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(5, 5, 7, .86);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp4);
  backdrop-filter: blur(3px);
  transition: opacity var(--t) var(--ease-out);
}
.pause-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.pause-overlay h2 {
  font-family: var(--font-display);
  font-size: 3.4rem;
  letter-spacing: .14em;
  color: var(--ink-hi); font-weight: 400;
}

.countdown-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--t) var(--ease-out);
}
.countdown-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
#countdown-number {
  font-family: var(--font-display);
  font-size: .9rem;
  line-height: 0.7;
  color: var(--acid);
  animation:countPop 0.8s var(--ease-snap)
}
@keyframes countPop {
  0%{transform:scale(1.6); opacity: 0;}
  45%{transform: scale(1); opacity: 1;}
  100%{transform: scale(0.86); opacity: .7;}
}

.results-container {
  width: 100%;
  max-width: 620px;
  padding: var(--sp6) var(--sp5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp5);
  animation: resultsIn .45s var(--ease-out);
}
@keyframes resultsIn {
  from{opacity:0;transform:translateY(34px)}
  to{opacity: 1;transform: translateY(0);}
}
.results-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-hi);
  text-align: left;
  border-left: var(--sp2) solid var(--sienna);
  padding-left: var(--sp3);
}
.results-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp2);
}
.result-card {
  background:var(--bg-2);
  border: 1px solid var(--line);
  padding: var(--sp4);
  border-radius: 0;
}
.result-card:nth-child(n+2) {text-align: left;}
.result-score-card {
  background: var(--bg-1);
  border-top: 3px solid var(--sienna);
  grid-row: span 2; }
.result-score-card .result-value {color: var(--sienna);}
.result-label {
  display: block;
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--ink-low);
  text-transform: uppercase;
  margin-bottom: var(--sp2);

}
.result-prev-label {
  margin-top: var(--sp2);
  font-size: 0.58rem;
  color: var(--ink);

}
.result-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--acid);
  line-height: 1;
  letter-spacing: -0.02em;
}
.result-new-best {
  color: var(--sienna);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  animation: pulseGold 1.1s ease-in-out infinite;
}
@keyframes pulseGold{0%,100%{opacity:1;transform:translateX(0)}50%{opacity:.55;transform:translateX(4px)}}
.result-actions{display:flex;gap:var(--sp-2)}
.result-mode-badge{font-size:.62rem;letter-spacing:.24em;color:var(--ink-mid);text-transform:uppercase}
 
#popup-container{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.float-popup{
  position:absolute;font-size:1.1rem;font-weight:700;color:var(--acid);
  animation:floatUp .8s var(--ease-out) forwards;pointer-events:none;
  font-family:var(--font-body);text-shadow:none}
.float-popup.miss{color:var(--sienna)}
@keyframes floatUp{0%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-64px) scale(.82)}}
 

@media(max-width:640px){
  .menu-container{width:calc(100% - var(--sp-6))}
  .mode-list{grid-template-columns:repeat(2,1fr)}
  .mode-btn:nth-child(even){transform:translateY(0)}
  .results-grid{grid-template-columns:1fr 1fr}
  .result-card:nth-child(n+4){text-align:center}
  .hud-top{flex-wrap:wrap;justify-content:flex-start}
  .hud-bottom{flex-wrap:wrap;justify-content:space-between}
  #hud{padding:var(--sp-2) var(--sp-3)}
  .hud-value{font-size:1.25rem}
  .settings-content{padding:var(--sp-4)}
}
@media(max-width:420px){
  .mode-list{grid-template-columns:1fr}
  .best-grid{display:grid;grid-template-columns:repeat(2,1fr)}
  .best-item{border-left:none;border-bottom:1px solid var(--line)}
}
 
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-hi)}
::-webkit-scrollbar-thumb:hover{background:var(--acid)}