:root{
  --black:#0a0a0a;
  --dark:#222;
  --mid:#555;
  --light-gray:#aaa;
  --lighter:#ddd;
  --white:#f5f5f5;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 0%, #3a3a3a 0%, #111 70%);
  font-family:'Courier New', Courier, monospace;
  color:var(--white);
  filter:grayscale(1);
}

.page{
  display:none;
  width:100%;
  align-items:center;
  justify-content:center;
}
.page.active{display:flex;}

.frame{
  background:var(--dark);
  border:3px solid var(--white);
  border-radius:8px;
  padding:32px 40px;
  max-width:520px;
  width:90vw;
  text-align:center;
  box-shadow:0 0 0 6px var(--black), 0 0 30px rgba(255,255,255,0.15);
}

h1{
  font-size:2.1rem;
  letter-spacing:3px;
  margin:0 0 8px;
  text-shadow:2px 2px 0 var(--black);
  line-height:1.25;
}
h2{margin-top:0;letter-spacing:2px;}

.subtitle{color:var(--light-gray);line-height:1.5;margin-bottom:24px;}

.menu-buttons{display:flex;flex-direction:column;gap:12px;margin:20px 0;}

button{
  font-family:inherit;
  font-size:1rem;
  letter-spacing:1px;
  padding:12px 20px;
  background:var(--white);
  color:var(--black);
  border:2px solid var(--white);
  border-radius:4px;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, color .15s ease;
}
button:hover{background:var(--black);color:var(--white);}
button:active{transform:scale(0.96);}

.btn-back{margin-top:20px;}

.hub-link{
  display:inline-block;
  margin-top:18px;
  color:var(--light-gray);
  text-decoration:none;
  font-size:0.85rem;
  letter-spacing:1px;
  border-bottom:1px dotted var(--light-gray);
}
.hub-link:hover{color:var(--white);}

.mini-crosshair{
  width:44px;height:44px;
  margin:24px auto 0;
  position:relative;
  animation:pulse 1.2s ease-in-out infinite;
}
.mini-crosshair::before,
.mini-crosshair::after{
  content:"";
  position:absolute;
  background:var(--white);
}
.mini-crosshair::before{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
.mini-crosshair::after{ top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(0.82);opacity:0.6;}
}

.howto-list{
  text-align:left;
  line-height:1.9;
  color:var(--lighter);
  padding-left:20px;
}

.scores-list{
  text-align:left;
  color:var(--lighter);
  max-height:240px;
  overflow-y:auto;
  padding-left:24px;
}
.scores-list li{margin-bottom:4px;}

/* ===== Game page ===== */
.game-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.hud{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px 16px;
  width:800px;
  max-width:96vw;
  font-size:1rem;
  letter-spacing:1px;
  color:var(--white);
}

.canvas-shell{
  position:relative;
  width:800px;
  max-width:96vw;
}

canvas{
  display:block;
  background:#1c1c1c;
  border:3px solid var(--white);
  border-radius:6px;
  width:100%;
  height:auto;
  box-shadow:0 0 0 6px var(--black);
  cursor:crosshair;
  touch-action:none;
}

.reload-btn{
  position:absolute;
  right:14px;
  bottom:14px;
  padding:10px 16px;
  font-size:0.8rem;
  letter-spacing:1px;
  opacity:0.9;
}

.game-hint{color:var(--mid);font-size:0.85rem;text-align:center;}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.overlay.hidden{display:none;}

.hidden{display:none !important;}

.final-score{font-size:1.4rem;letter-spacing:1px;}
.new-best{color:var(--white);font-weight:bold;text-decoration:underline;}