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

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

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

.best-line, .detail-line{
  font-size:clamp(14px,4.4vw,22px);
  color:#e8b98a;
  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.6vw,17px);
  color:#8a6a52;
  margin:0;
  letter-spacing:1px;
  font-style:italic;
}

.target-big{
  font-size:clamp(30px,11vw,72px);
  font-weight:900;
  color:#ff8a3d;
  text-shadow:4px 4px 0 #4a2405;
  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:#ff8a3d;
  color:#2a1200;
  box-shadow:0 8px 0 #8a4310, 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 #8a4310;
}

.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:#f2e9ff;
  text-shadow:2px 2px 0 #000;
  /* At high rounds #holdHint can name more than one active hazard at once
     (e.g. "LAND IN THE BAND - IT FLICKERS") and wraps on narrow screens --
     keep a side gutter so a wrapped line never touches the screen edge. */
  padding:0 16px;
  box-sizing:border-box;
}

#roundLabel{
  font-size:clamp(11px,3.6vw,17px);
  letter-spacing:3px;
  color:#e8b98a;
}

#holdHint{
  font-size:clamp(10px,3.2vw,15px);
  color:#a3796a;
}

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

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

.seo-line {
  color: #f2e9ff;
  font-size: clamp(10px, 3vw, 12px);
  max-width: min(80vw, 420px);
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  opacity: .55;
}

#shapeName{
  font-size:clamp(12px,3.8vw,18px);
  letter-spacing:4px;
  font-weight:900;
  color:#ff8a3d;
}

/* The result reveal is lifted into a reserved band at the top of the canvas
   (see computeLayout() in game.js, which publishes --reveal-band). Padding the
   result screen clear of it stops the shape landing on the score and the
   NEXT ROUND button, which is what happened when the reveal stayed at the
   round's randomised target centre. */
#overScreen{
  justify-content:flex-start;
  padding-top:calc(var(--reveal-band, 300px) + 16px);
  box-sizing:border-box;
}