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:16px;
  text-align:center;
  padding:24px;
  box-sizing:border-box;
  color:#e4ffe9;
  z-index:5;
}

.title{
  font-size:clamp(32px,12vw,84px);
  line-height:1.05;
  margin:0;
  letter-spacing:3px;
  font-weight:900;
  color:#4ee68a;
  text-shadow:4px 4px 0 #063a1c, 8px 8px 0 rgba(0,0,0,0.4);
}

.subtitle{
  font-size:clamp(20px,7vw,40px);
  margin:0;
  letter-spacing:2px;
  font-weight:900;
  color:#4ee68a;
  text-shadow:3px 3px 0 #063a1c;
}

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

.best-line, .detail-line{
  font-size:clamp(13px,4.2vw,21px);
  color:#7fe8a8;
  margin:0;
  letter-spacing:1px;
}

.roast{
  font-size:clamp(11px,3.4vw,15px);
  color:#5a8a72;
  margin:0;
  letter-spacing:0.5px;
  font-style:italic;
  opacity:0.85;
}

.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:#22e079;
  color:#00230f;
  box-shadow:0 8px 0 #0a7a3d, 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 #0a7a3d;
}

.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:14px;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  z-index:4;
  pointer-events:none;
  color:#e4ffe9;
  text-shadow:2px 2px 0 #000;
}

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

#scoreRow{
  font-size:clamp(15px,5vw,24px);
  font-weight:900;
  display:flex;
  gap:24px;
}

#targetLine{
  font-size:clamp(10px,3.2vw,15px);
  color:#4ee68a;
}

/* ---- pick/reveal screen ---- */
#revealRow{
  display:flex;
  align-items:center;
  gap:20px;
  margin:6px 0;
}

.reveal-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.reveal-label{
  font-size:clamp(11px,3.6vw,17px);
  letter-spacing:2px;
  color:#7fe8a8;
}

.reveal-num{
  font-size:clamp(42px,16vw,96px);
  font-weight:900;
  width:1.3em;
  color:#4ee68a;
  text-shadow:4px 4px 0 #063a1c;
}

.vs-label{
  font-size:clamp(15px,5vw,24px);
  color:#3a6b4c;
  font-weight:900;
}

#numberGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:10px;
  width:min(90vw, 420px);
}

.num-btn{
  font-family:inherit;
  font-weight:900;
  font-size:clamp(24px,9vw,44px);
  padding:18px 0;
  border:none;
  border-radius:14px;
  background:#1c8a4e;
  color:#eafff0;
  box-shadow:0 6px 0 #0a4a2b, 0 6px 16px rgba(0,0,0,0.5);
  cursor:pointer;
  touch-action:manipulation;
}

.num-btn:active{
  transform:translateY(5px);
  box-shadow:0 1px 0 #0a4a2b;
}

.num-btn:disabled{
  opacity:0.4;
}

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

/* ---- secondary CTA (PLAY ONLINE, INVITE A FRIEND, SHARE SCORECARD, CANCEL) ---- */
.cta-secondary{
  background:#0f3d24;
  color:#a9f5c4;
  box-shadow:0 6px 0 #062416, 0 6px 16px rgba(0,0,0,0.5);
  font-size:clamp(14px,4.4vw,20px);
  padding:14px 28px;
  animation:none;
}
.cta-secondary:active{ transform:translateY(4px); box-shadow:0 2px 0 #062416; }
.cta-secondary:focus-visible{ outline:3px solid #4ee68a; outline-offset:3px; }

/* ---- innings strip (ball by ball, this innings) ---- */
#ballStrip{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  margin-top:6px;
  max-width:min(92vw,520px);
  height:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  pointer-events:auto;
  text-shadow:none;
}
#ballStrip::-webkit-scrollbar{ display:none; }
#ballStrip:empty{ visibility:hidden; }
.ball-chip{
  flex:0 0 auto;
  min-width:24px;
  height:24px;
  line-height:24px;
  padding:0 6px;
  box-sizing:border-box;
  border-radius:6px;
  background:#1c8a4e;
  color:#eafff0;
  font-size:13px;
  font-weight:900;
  text-align:center;
  animation:chipIn 0.18s ease-out;
}
.ball-chip.w{ background:#c0392b; color:#fff0ee; }
@keyframes chipIn{ from{ transform:scale(0.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---- reveal moment ---- */
.reveal-num{ transition:color 0.15s; }
.reveal-num.pop{ animation:pop 0.28s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.32); } 100%{ transform:scale(1); } }
.reveal-num.cycling{ color:#7fe8a8; opacity:0.75; }
.reveal-box.scored .reveal-num{ color:#9dffc0; text-shadow:0 0 18px #22e079, 4px 4px 0 #063a1c; }
#revealRow.out .reveal-num{ color:#ff6b5b; text-shadow:4px 4px 0 #4a0f0a; }
#revealRow.out .reveal-label{ color:#ff9b8f; }
#revealRow.out{ animation:shake 0.32s ease-in-out; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(3px); }
}
#ballResult.out{ color:#ff6b5b; }

/* ---- short phones: keep the grid on screen under the HUD + strip ---- */
@media (max-height:700px){
  .screen{ gap:10px; }
  .reveal-num{ font-size:clamp(36px,13vw,72px); }
  .num-btn{ padding:12px 0; }
  #numberGrid{ gap:10px; margin-top:4px; }
  #pickScreen{ padding-top:120px; justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .pulse, .reveal-num.pop, #revealRow.out, .ball-chip{ animation:none; }
  .reveal-num{ transition:none; }
}

/* Match over: keep air between the pulsing PLAY AGAIN and the share button
   on narrow phones. */
#overScreen #shareBtn{margin-top:10px;}
#walkoverLine{ color:#ffd36b; letter-spacing:2px; }
#finalScoreboard{ white-space:pre-line; }

/* ---- start screen: two online buttons in a row that wraps on phones ---- */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:0;
}
.start-hint{
  font-size:clamp(10px,3vw,13px);
  letter-spacing:0.5px;
  color:#5a8a72;
  margin:0;
}
.start-notice{
  font-size:clamp(11px,3.4vw,15px);
  letter-spacing:1px;
  color:#ffd36b;
  margin:0;
}
.cta-btn:disabled{ opacity:0.45; cursor:default; }
.cta-btn:focus-visible{ outline:3px solid #e4ffe9; outline-offset:3px; }

/* ---- online: per-ball clock under the grid (bar plus seconds) ---- */
#pickTimer{
  display:flex;
  align-items:center;
  gap:10px;
  width:min(90vw, 420px);
  margin-top:4px;
}
.pick-timer-track{
  flex:1 1 auto;
  height:8px;
  border-radius:4px;
  background:#0f3d24;
  overflow:hidden;
}
#pickTimerBar{
  height:100%;
  width:100%;
  border-radius:4px;
  background:#22e079;
  transition:width 0.1s linear, background-color 0.3s;
}
#pickTimer.low #pickTimerBar{ background:#ff6b5b; }
#pickTimerText{
  flex:0 0 2ch;
  text-align:right;
  font-size:clamp(14px,4.4vw,20px);
  font-weight:900;
  color:#7fe8a8;
}
#pickTimer.low #pickTimerText{ color:#ff6b5b; }

/* ---- online: finding / join / message screen ---- */
.big-count{
  font-size:clamp(42px,16vw,96px);
  font-weight:900;
  line-height:1;
  color:#4ee68a;
  text-shadow:4px 4px 0 #063a1c;
}

/* ---- online: invite screen ---- */
.invite-code{
  font-size:clamp(44px,17vw,104px);
  font-weight:900;
  line-height:1;
  letter-spacing:0.18em;
  color:#4ee68a;
  text-shadow:4px 4px 0 #063a1c;
  padding-left:0.18em; /* balance the trailing letter-spacing */
}
.invite-link{
  font-size:clamp(11px,3.4vw,16px);
  letter-spacing:0.5px;
  color:#a9f5c4;
  margin:0;
  word-break:break-all;
  -webkit-user-select:text;
  user-select:text;
}
.count-pill{
  display:inline-block;
  min-width:2.4em;
  padding:2px 8px;
  border-radius:8px;
  background:#0f3d24;
  color:#e4ffe9;
  font-weight:900;
}

/* ---- short phones: drop the keyboard hint, tighten the start screen ---- */
@media (max-height:700px){
  .kbd-hint{ display:none !important; }
  .cta-secondary{ padding:12px 22px; }
  .invite-code{ font-size:clamp(40px,14vw,80px); }
  .big-count{ font-size:clamp(36px,13vw,72px); }
}
#scoreRow{ flex-wrap:wrap; justify-content:center; row-gap:0; }