:root{
  /* Layout reserves. --ad-h is measured from #thela-ad-anchor at runtime so the
     HUD steps down when a real banner creative loads. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --ad-h: 0px;
  --hud-gap: 12px;
  /* Everything above the play area: notch + ad banner + HUD clearance. */
  --top-reserve: calc(var(--safe-top) + var(--ad-h) + var(--hud-gap));
}

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

/* The ad anchor is a fixed bar pinned to the top edge, ABOVE the canvas and
   the HUD in stacking order. Without this it sat in normal document flow and
   was painted over by the fixed canvas, so a real banner would be invisible -
   and the HUD had no reserved band to sit clear of. */
#thela-ad-anchor{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  padding-top:var(--safe-top);
  padding-left:var(--safe-left);
  padding-right:var(--safe-right);
  box-sizing:border-box;
  pointer-events:none;
}
#thela-ad-anchor > *{ pointer-events:auto; }
/* The fullscreen ad/interstitial overlays must not be constrained by the bar. */
#thela-ad-anchor > .thela-ad-overlay{ pointer-events:auto; }

#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 calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
  padding-top:calc(24px + var(--safe-top) + var(--ad-h));
  box-sizing:border-box;
  color:#ffe9d6;
  z-index:5;
}

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

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

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

/* Wry aside under the result readout, shown only on a pop - muted,
   lower-contrast than .detail-line/.best-line, never the bright accent red. */
.roast{
  font-size:clamp(12px,3.6vw,17px);
  color:#8a5e52;
  margin:0;
  letter-spacing:1px;
  font-style:italic;
}

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

.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:#2b0e00;
  box-shadow:0 8px 0 #7a3a0a, 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 #7a3a0a;
}

.pulse{
  animation:pulse 1.1s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

#hud{
  position:fixed;
  /* Clear of the notch, the ad banner and the top edge - never occluded. */
  top:var(--top-reserve);
  left:var(--safe-left);
  right:var(--safe-right);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  z-index:4;
  pointer-events:none;
  color:#ffe9d6;
  text-shadow:2px 2px 0 #000;
}

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

#sizeValue{
  font-size:clamp(20px,7vw,34px);
  font-weight:900;
}

#streakLine{
  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; }
}

/* ---- Short viewports (landscape phone): tighten the overlay stack so the
   title/result screens still fit without scrolling or clipping. ---- */
@media (max-height: 460px){
  .screen{ gap:8px; padding-top:calc(12px + var(--safe-top) + var(--ad-h)); padding-bottom:calc(12px + var(--safe-bottom)); }
  .title{ font-size:clamp(28px,9vh,52px); }
  .target-big{ font-size:clamp(24px,9vh,48px); }
  .tagline{ font-size:clamp(12px,3.4vh,16px); }
  .best-line,.detail-line{ font-size:clamp(12px,3.4vh,16px); }
  .cta-btn{ padding:12px 28px; font-size:clamp(16px,5vh,22px); }
  :root{ --hud-gap:6px; }
  #hud{ flex-direction:row; align-items:baseline; justify-content:center; gap:12px; }
}