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

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

.title.small{
  font-size:clamp(24px,9vw,60px);
}

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

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

.target-big{
  font-size:clamp(30px,11vw,72px);
  font-weight:900;
  color:#9dff4e;
  text-shadow:4px 4px 0 #1f4506;
  margin:0;
}

/* Wry aside under the result readout - muted, lower-contrast than
   .detail-line/.best-line, never the bright accent green. */
.roast{
  font-size:clamp(12px,3.6vw,17px);
  color:#5f7a5a;
  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:22px 40px;
  border:none;
  border-radius:14px;
  background:#7bd935;
  color:#122b04;
  box-shadow:0 8px 0 #3f7a12, 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 #3f7a12;
}

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

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

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

#shapeLabel{
  font-size:clamp(10px,3vw,14px);
  letter-spacing:3px;
  color:#7bd935;
  opacity:0.8;
}

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

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

/* ---- A real miss makes the result screen flinch before it settles - the
   character reaction for an abstract game, expressed as motion/color rather
   than a subject (see GAME_STANDARDS.md §4). ---- */
#overScreen.flinch{
  animation:flinch 0.32s ease-out;
}
@keyframes flinch{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-10px) rotate(-0.6deg); }
  45%{ transform:translateX(8px) rotate(0.5deg); }
  70%{ transform:translateX(-4px); }
  100%{ transform:translateX(0); }
}

/* ---- Result screen sits low, over a soft scrim, so the reveal on the
   canvas (true midpoint, your tap, the lit first half) stays readable. ---- */
#overScreen{
  justify-content:flex-end;
  padding-bottom:clamp(16px,5vh,48px);
  gap:12px;
  background:linear-gradient(to bottom,rgba(7,16,24,0) 58%,rgba(7,16,24,0.80) 72%,rgba(7,16,24,0.94) 100%);
}

/* The shape is generated inside an upper band (see ShapeGen in game.js) and
   revealed exactly where it was judged, so the result text is laid out in the
   lower half where the shape can never reach. */
#overScreen{
  justify-content:flex-end;
  padding-bottom:3vh;
  box-sizing:border-box;
}