html,body{
  margin:0;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  height:100%;
  background:#050608;
  font-family:'Courier New',ui-monospace,Menlo,Consolas,monospace;
}

#game{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#050608;
}

.hidden{display:none !important;}

.screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  padding:24px;
  box-sizing:border-box;
  color:#e8f4ff;
  z-index:5;
}

.title{
  font-size:clamp(30px,11vw,80px);
  margin:0;
  letter-spacing:4px;
  font-weight:900;
  color:#ff5fd8;
  text-shadow:4px 4px 0 #3a0630, 8px 8px 0 rgba(0,0,0,0.4);
}

.tagline{
  font-size:clamp(13px,4vw,20px);
  max-width:min(80vw,560px);
  color:#a9c3d6;
  margin:0;
  letter-spacing:1px;
}

.best-line{
  font-size:clamp(14px,4.4vw,22px);
  color:#7fa8c9;
  margin:0;
  letter-spacing:1px;
}

/* Wry aside under the result readout - muted, lower-contrast than
   .best-line, never the bright accent pink. */
.roast{
  font-size:clamp(12px,3.6vw,17px);
  color:#556e82;
  margin:0;
  letter-spacing:1px;
  font-style:italic;
}

.target-big{
  font-size:clamp(34px,13vw,80px);
  font-weight:900;
  color:#ff5fd8;
  text-shadow:4px 4px 0 #3a0630;
  margin:0;
}

.cta-btn{
  font-family:inherit;
  font-weight:900;
  font-size:clamp(18px,6vw,28px);
  letter-spacing:2px;
  padding:22px 40px;
  border:none;
  border-radius:14px;
  background:#ff5fd8;
  color:#1a0416;
  box-shadow:0 8px 0 #8a1e73, 0 8px 20px rgba(0,0,0,0.5);
  cursor:pointer;
  touch-action:manipulation;
}

.cta-btn:active{
  transform:translateY(6px);
  box-shadow:0 2px 0 #8a1e73;
}

.pulse{
  animation:pulse 1.1s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

#hud{
  position:fixed;
  top:16px;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  z-index:4;
  pointer-events:none;
  color:#e8f4ff;
  text-shadow:2px 2px 0 #000;
}

#roundLabel{
  font-size:clamp(11px,3.4vw,16px);
  letter-spacing:3px;
  color:#7fa8c9;
}

#best{
  font-size:clamp(11px,3.4vw,16px);
  color:#ff5fd8;
}

.blank{
  /* Must stay transparent: the dot is drawn on the canvas underneath this
     overlay, and an opaque background here hides it completely. The canvas
     already paints #050608 as its own background, so this looks identical. */
  background:transparent;
  cursor:pointer;
}

#stopHint{
  position:absolute;
  bottom:clamp(60px,14vh,150px);
  left:0;
  right:0;
  text-align:center;
  color:#2c3844;
  font-size:clamp(11px,3.6vw,17px);
  letter-spacing:2px;
}

/* ---- Desktop sizing: keep copy from running the full width of a monitor.
   Mobile is unaffected (content is narrower than the cap at 390px). ---- */
.screen > *{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}

/* ---- Keyboard hint: desktop (real pointer) only ---- */
.kbd-hint{
  display:none;
  font-size:clamp(10px,3vw,14px);
  letter-spacing:2px;
  opacity:0.55;
  margin:0;
}
@media (hover: hover) and (pointer: fine){
  .kbd-hint{ display:block; }
}