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

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

.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:#dff6ff;
  z-index:5;
}

.title{
  font-size:clamp(30px,14vw,84px);
  margin:0;
  letter-spacing:4px;
  font-weight:900;
  color:#4ee6ff;
  text-shadow:4px 4px 0 #063a45, 8px 8px 0 rgba(0,0,0,0.4);
}

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

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

.roast{
  font-size:clamp(12px,3.6vw,16px);
  color:#4a6b7a;
  font-style:italic;
  margin:2px 0 0;
  letter-spacing:0.5px;
}

.target-big{
  font-size:clamp(26px,11vw,64px);
  font-weight:900;
  color:#4ee6ff;
  text-shadow:4px 4px 0 #063a45;
}

.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:#22c9e0;
  color:#00232b;
  box-shadow:0 8px 0 #0a6d7a, 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 #0a6d7a;
}

.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:#dff6ff;
  text-shadow:2px 2px 0 #000;
}

#targetLabel{
  font-size:clamp(11px,3.4vw,17px);
  letter-spacing:3px;
  color:#7fd6e8;
}

#targetValue{
  font-size:clamp(16px,5.4vw,26px);
  font-weight:900;
}

#best{
  font-size:clamp(11px,3.4vw,17px);
  color:#4ee6ff;
}

.blank{
  background:#0c1c26;
  cursor:pointer;
}

#breather{
  width:36vw;
  height:36vw;
  max-width:220px;
  max-height:220px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#2a5468,#173445 55%,#0c1c26);
  border:3px solid #234758;
  box-shadow:0 10px 24px rgba(0,0,0,0.45), inset 0 -6px 14px rgba(0,0,0,0.35);
  animation:breathe 4s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{ transform:scale(0.92); opacity:0.7; }
  50%{ transform:scale(1.05); opacity:1; }
}

#stopHint{
  position:absolute;
  bottom:min(14vh,120px);
  left:0;
  right:0;
  text-align:center;
  color:#4a6b7a;
  font-size:clamp(12px,3.6vw,18px);
  letter-spacing:2px;
}

/* --- desktop keyboard hint (PC support, additive) --- */
.kbd-hint{display:none;}
@media (hover: hover) and (pointer: fine){
  .kbd-hint{display:block;}
}
.kbd-hint{color:#7fd6e8;font-size:12px;letter-spacing:1px;margin:0;opacity:.8;}