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:#fff0df;
  z-index:5;
  pointer-events:none;
}

#startScreen, #overScreen{
  pointer-events:auto;
}

#recreateScreen{
  pointer-events:auto;
}

.title{
  font-size:clamp(36px,14vw,88px);
  margin:0;
  letter-spacing:4px;
  font-weight:900;
  color:#ff9d4e;
  text-shadow:4px 4px 0 #452806, 8px 8px 0 rgba(0,0,0,0.4);
}

.accuracy-title{
  font-size:clamp(38px,15vw,92px);
}

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

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

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

.verdict-line{
  font-size:clamp(15px,4.8vw,24px);
  font-weight:900;
  color:#ff9d4e;
  margin:0;
  letter-spacing:2px;
  text-shadow:2px 2px 0 #4a2506;
}

.hint-line{
  position:absolute;
  bottom:clamp(48px,10vh,110px);
  left:0;
  right: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:#ff9d4e;
  color:#2b1400;
  box-shadow:0 8px 0 #7a3f0a, 0 8px 20px rgba(0,0,0,0.5);
  cursor:pointer;
  touch-action:manipulation;
  pointer-events:auto;
}

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

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

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

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

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

/* ---- 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; }
}

/* The result reveal is drawn into a reserved band at the top of the canvas
   (see revealBand() in game.js, which publishes --reveal-band). Padding the
   result screen clear of it stops the outlines landing on the score, the
   STREAK line and the NEXT ROUND button, which is what used to happen when
   the reveal was drawn at the shape's original random position. */
#overScreen{
  justify-content:flex-start;
  padding-top:calc(var(--reveal-band, 300px) + 18px);
  box-sizing:border-box;
}