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:clamp(12px,4vw,20px);
  text-align:center;
  padding:24px;
  box-sizing:border-box;
  color:#dff6ff;
  z-index:5;
}

.title{
  font-size:clamp(28px,13vw,76px);
  line-height:1.05;
  margin:0;
  letter-spacing:4px;
  font-weight:900;
  color:#ffb84e;
  text-shadow:4px 4px 0 #452b06, 8px 8px 0 rgba(0,0,0,0.4);
}

.over-title{
  color:#ff5e5e;
  text-shadow:4px 4px 0 #4a0e0e, 8px 8px 0 rgba(0,0,0,0.4);
}

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

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

/* Wry aside under the result readout - muted, lower-contrast than
   .detail-line/.best-line, never the bright accent orange. */
.roast{
  font-size:clamp(12px,3.4vw,15px);
  color:#7a6248;
  margin:0;
  letter-spacing:1px;
  font-style:italic;
}

.cta-btn{
  font-family:inherit;
  font-weight:900;
  font-size:clamp(18px,6vw,28px);
  letter-spacing:2px;
  padding:clamp(16px,5vw,22px) clamp(28px,10vw,44px);
  border:none;
  border-radius:14px;
  background:#ffb84e;
  color:#2b1800;
  box-shadow:0 8px 0 #7a4d0a, 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 #7a4d0a;
}

.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;
}

#timeLabel{
  font-size:clamp(11px,3.4vw,15px);
  letter-spacing:3px;
  color:#e8b97f;
}

#timeValue{
  font-size:clamp(20px,6.4vw,30px);
  font-weight:900;
}

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

#controlMode{
  font-size:clamp(9px,2.6vw,13px);
  color:#5f7a86;
  letter-spacing:1px;
  margin-top:4px;
}

.hold-btn{
  position:fixed;
  bottom:6vh;
  width:22vw;
  height:22vw;
  max-width:110px;
  max-height:110px;
  border-radius:50%;
  background:rgba(255,184,78,0.18);
  border:2px solid rgba(255,184,78,0.5);
  color:#ffb84e;
  font-size:clamp(24px,8vw,38px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:6;
  touch-action:none;
  user-select:none;
}

.hold-btn-left{ left:clamp(16px,6vw,48px); }
.hold-btn-right{ right:clamp(16px,6vw,48px); }

.hold-btn.active{
  background:rgba(255,184,78,0.4);
}

/* Keep copy readable on a widescreen monitor instead of running edge to edge */
.screen > *{
  max-width:min(92vw,680px);
}

/* Desktop-only keyboard hint (see PC spec) */
.kbd-hint{
  display:none;
  font-size:clamp(10px,2.8vw,13px);
  letter-spacing:1px;
  color:#7a94a0;
  margin:0;
}
@media (hover: hover) and (pointer: fine){
  .kbd-hint{ display:block; }
}