/* LIGHT, like the reference. The dark theme was never asked for and it was
   fighting the artwork: saturated cyan slabs need a bright ground to read as
   solid objects, and a dark ball needs a bright world to be the thing your eye
   tracks. */
/* BACK TO DARK. The light theme was my over-correction to a report that was
   never about the background — "the background wasnt a problem, dark was fine".
   The slabs looking flat was a LIGHTING problem, and changing the ground while
   the real fault stood is how a fix makes something worse. */
:root { --bg:#0b1020; --panel:#131b2e; --ink:#eef3ff; --dim:#8fa3c8;
        --hot:#22d3ee; --line:#22304d; --deep:#9fe9f7; }
* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0;
  /* R-C15. A rotating world plus rubber-band scroll is nauseating and hides the
     header; the play surface is a canvas and must never be draggable. */
  overflow: hidden; overscroll-behavior: none;
}
body {
  background: var(--bg); color: var(--ink); overflow-x: hidden;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
/* R-C13: vh first for the browsers that have only that, dvh for the ones whose
   toolbars move. Without the fallback the header walks off an older Android. */
#app { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

#hdr {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
#hdrTitle { flex: 1 1 auto; font-weight: 700; letter-spacing: .3px; }
#hud { font-size: 24px; font-weight: 800; color: var(--deep); min-width: 44px; text-align: right; }
/* The score is in the header and the player's eyes are on the ball, so the
   number gets one beat of motion — it is a confirmation, not a readout. */
#score { display: inline-block; }
#score.pop { animation: pop .22s ease-out; }
@keyframes pop { 0% { transform: scale(1.55); color: var(--hot); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #score.pop { animation: none; } }
.pill {
  min-width: 44px; min-height: 44px; border: 1px solid var(--line);
  border-radius: 12px; background: #1c2942; color: var(--ink);
  font-size: 19px; cursor: pointer;
}
.pill:active { background: #27385a; }

.scr { display: none; flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.scr.on { display: flex; flex-direction: column; }
#scr-play.on { padding: 0; overflow: hidden; }
h1 { font-size: 30px; margin: 18px 0 6px; text-align: center; }
h2 { font-size: 18px; margin: 0 0 6px; }
.sub { color: var(--dim); text-align: center; max-width: 30rem; margin: 0 auto 18px; }
.stat { text-align: center; color: var(--dim); }
.big {
  display: block; width: 100%; max-width: 22rem; margin: 8px auto;
  min-height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  background: #1c2942; color: var(--ink); font-size: 17px; font-weight: 700;
  border: 1px solid var(--line); box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.big.primary { background: var(--hot); color: #04252e; border-color: #16b3cf;
               box-shadow: 0 3px 0 #0e8fa8; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 0 auto 10px; max-width: 30rem; width: 100%; }
.lgRow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.lgSw { width: 34px; height: 18px; border-radius: 5px; flex: 0 0 34px; border: 1px solid rgba(255,255,255,.3); }

#stage { position: relative; flex: 1 1 auto; display: flex; justify-content: center; min-height: 0; }
#cvs { display: block; touch-action: none; }

/* R-C15a: flex-start on the scrim, margin auto on the card. Never
   align-items:center — that centres overflow above scrollTop 0. */
.ovl {
  position: absolute; inset: 0; display: none; align-items: flex-start;
  justify-content: center; background: rgba(6,10,20,.86); overflow-y: auto; z-index: 10;
}
.ovl.on { display: flex; }
.ovlCard {
  margin: auto; max-height: 85%; overflow-y: auto; width: min(24rem, 90%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  padding: 18px; text-align: center;
}
.ovlCard p { color: var(--dim); }
.big-score { font-size: 40px; font-weight: 800; color: var(--deep); margin: 10px 0; }

#footer { flex: 0 0 auto; text-align: center; padding: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }

/* R-C24 / #228: a short landscape window must not spend a row on the chip. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  #app { position: relative; }
  #footer { position: absolute; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
}