:root {
  color-scheme: dark;
  --navy-950: #020a19;
  --navy-900: #04152f;
  --navy-800: #08234d;
  --cyan: #37d9ff;
  --blue: #2f8cff;
  --yellow: #ffc53d;
  --green: #18c777;
  --red: #ef4e69;
  --text: #f7fbff;
  --muted: #b7c9e8;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--navy-950); }
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(35, 97, 169, .24), transparent 52%),
    var(--navy-950);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 50;
  top: .75rem;
  left: .75rem;
  transform: translateY(-160%);
  padding: .65rem .9rem;
  border-radius: .65rem;
  background: #fff;
  color: #00122e;
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }

.noscript {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  padding: .75rem 1rem;
  background: #8b1f2d;
  text-align: center;
  font-weight: 800;
}

.page-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.artboard {
  position: relative;
  width: min(100vw, calc(100vh * 1672 / 941));
  height: min(100vh, calc(100vw * 941 / 1672));
  aspect-ratio: 1672 / 941;
  flex: 0 0 auto;
  isolation: isolate;
  overflow: hidden;
  background: #04152f;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .45);
  user-select: none;
}

.interface-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}

.interaction-layer,
.dynamic-layer {
  position: absolute;
  inset: 0;
}
.interaction-layer { z-index: 5; }
.dynamic-layer { z-index: 3; pointer-events: none; }

/* ---- setup screen ---- */
.setup-screen { width: min(1100px, 96vw); padding: 18px 0 40px; }
.setup-screen.is-hidden, .artboard.is-hidden { display: none !important; }

/* ---- live practice word, painted over the artwork's baked-in "Educator" ----
   Background colors are sampled from interface-art.png itself (chips #000e30,
   right panel #011d4e) so the panels disappear into the art. Sits above the art,
   below .interaction-layer, and is pointer-events:none so hotspots still work. */
.word-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.word-layer .wl-chip {
  position: absolute;
  display: grid;
  place-items: center;
  background: #000e30;
  overflow: hidden;
}
.word-layer .wl-chip span {
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -.01em;
  line-height: 1;
}
/* Boxes are sized from the painted glyph bounds measured off interface-art.png:
   "Educator" occupies x647-745, "Middle" x845-918 (the SCORE star starts at x1007,
   which caps how far right the POSITION box may go). Cover a few px past each end —
   starting at x852 left a sliver of the painted "M" showing. */
/* FRAME and ROLL were painted as fixed "1/10" and "1". Measured off the artwork:
   the frame glyphs occupy x334-379 y63-81, the roll glyph x496-502 y63-79. Each box
   is filled with that panel's OWN sampled background so nothing shows through. */
#wl-frame { left: 19.50%; top: 6.06%; width: 4.40%; height: 2.87%; background: #001340; }
#wl-roll  { left: 29.25%; top: 6.06%; width: 2.30%; height: 2.87%; background: #020d2c; }
#wl-word { left: 38.28%; top: 5.74%;  width: 8.07%; height: 4.14%; }
#wl-pos  { left: 50.24%; top: 5.74%;  width: 9.57%; height: 4.14%; }

#wl-panel {
  position: absolute;
  left: 80.86%; top: 20.83%; width: 18.18%; height: 12.96%;
  background: #011d4e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.wl-big {
  font-weight: 900;
  color: #fff;
  line-height: 1.02;
  white-space: nowrap;
  letter-spacing: -.02em;
  text-shadow: 0 .06em .18em rgba(0, 0, 0, .55);
}
.wl-rule {
  border-top: .14em dotted rgba(150, 190, 240, .5);
  margin: .28em 0 .22em;
}
.wl-sub {
  font-weight: 800;
  color: #37d9ff;
  white-space: nowrap;
  line-height: 1;
}

.hotspot,
.power-hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: clamp(4px, .7vw, 15px);
  background: transparent;
  opacity: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 2px solid transparent;
  box-shadow: 0 0 0 0 rgba(55, 217, 255, 0);
  transition: border-color 130ms ease, box-shadow 130ms ease, background 130ms ease;
}
.hotspot:hover::after {
  border-color: rgba(112, 227, 255, .52);
  box-shadow: 0 0 1.1rem rgba(37, 172, 255, .45), inset 0 0 .75rem rgba(64, 194, 255, .1);
  background: rgba(57, 180, 255, .035);
}
.hotspot:active::after { background: rgba(255, 255, 255, .1); }
.hotspot:focus-visible,
.power-hotspot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.power-hotspot {
  z-index: 2;
  appearance: none;
  opacity: .001;
  touch-action: none;   /* the finger drag drives the power value, never a page pan */
}
.power-hotspot::-webkit-slider-thumb { width: 30px; height: 30px; cursor: ew-resize; }
.power-hotspot::-moz-range-thumb { width: 30px; height: 30px; cursor: ew-resize; }

.selection {
  position: absolute;
  z-index: 4;
  top: 42.6%;
  height: 7.4%;
  border: clamp(2px, .18vw, 4px) solid rgba(255, 255, 255, .95);
  border-radius: clamp(6px, .9vw, 18px);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 .55rem rgba(255, 255, 255, .72));
  transition: opacity 160ms ease;
}
.selection.is-visible { opacity: 1; }
.selection-correct { left: 71.48%; width: 8.62%; box-shadow: inset 0 0 1rem rgba(24, 199, 119, .5); }
.selection-approx { left: 79.88%; width: 8.30%; box-shadow: inset 0 0 1rem rgba(255, 197, 61, .5); }
.selection-retry { left: 88.13%; width: 8.72%; box-shadow: inset 0 0 1rem rgba(239, 78, 105, .5); }
.selection { display: none !important; }
.rating-buttons { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
/* The artwork has THREE buttons painted on (Correct / Approx / Try Again, spanning
   71.75%–96.57%) but the game only offers two. This panel blanks that whole strip in
   the card's own background color (#011d4e, sampled from interface-art.png) so the
   painted "≈ Approx" can't show through the gap between our two buttons. */
.rating-buttons::before {
  content: "";
  position: absolute;
  /* Measured off interface-art.png: the painted strip is x 72.91%–97.49%,
     y 43.68%–49.84%. Cover it with a small margin — ending at 97.2% left a red
     sliver of the painted "Try Again" showing past the edge. */
  left: 72.2%; top: 42.9%; width: 26.1%; height: 7.8%;
  background: #011d4e;
  border-radius: .5em;
}
.rating-btn {
  position: absolute; top: 42%; height: 8.4%; pointer-events: auto;
  border: 0; border-radius: .7em; font-family: inherit; font-weight: 800; color: #fff;
  font-size: clamp(11px, 1.55vw, 21px); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .25em;
  box-shadow: 0 .3rem .7rem rgba(0, 0, 0, .4);
}
/* These two cover the three buttons painted into the artwork (which span 71.75%–96.57%).
   Correct used to run 71.2%–84.2% while Incorrect began at 84% — a 0.2% overlap, so the
   red button clipped the green one. Keep a 1% gutter between them. */
.rating-btn.correct { left: 71.4%; width: 12.2%; background: linear-gradient(#22c46f, #149a53); }
.rating-btn.incorrect { left: 84.6%; width: 12.2%; background: linear-gradient(#f2574f, #cf2f2f); }
.rating-btn.is-active { outline: .18em solid #fff; outline-offset: -.12em; filter: brightness(1.08); }
.rating-btn:active { transform: translateY(.08em); }

.toast {
  position: absolute;
  z-index: 8;
  left: 35%;
  top: 12.5%;
  transform: translate(-50%, -12px) scale(.96);
  min-width: 13rem;
  max-width: 32rem;
  padding: .62rem 1rem;
  border: 1px solid rgba(108, 217, 255, .55);
  border-radius: 999px;
  background: rgba(3, 20, 48, .92);
  box-shadow: 0 .55rem 1.8rem rgba(0, 0, 0, .42), 0 0 1.3rem rgba(51, 158, 255, .25);
  color: #fff;
  font-size: clamp(.7rem, 1vw, 1.05rem);
  font-weight: 800;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.screen-reader-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pin-deck {
  position: absolute;
  left: 29.5%;
  top: 34.3%;
  width: 17.3%;
  height: 10.4%;
  opacity: 0;
  transform-origin: center bottom;
  transition: opacity 180ms ease;
}
.pin-deck.is-ready { opacity: 1; }
.pin::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -3%;
  width: 130%; height: 16%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%);
  border-radius: 50%;
  z-index: -1;
}
.pin {
  position: absolute;
  width: 4.15%;
  min-width: 7px;
  aspect-ratio: .43 / 1;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: center bottom;
  border-radius: 47% 47% 39% 39% / 25% 25% 69% 69%;
  background:
    linear-gradient(to bottom, transparent 21%, #e23947 22% 29%, #fff 30% 34%, #e23947 35% 41%, transparent 42%),
    radial-gradient(circle at 36% 19%, #fff 0 19%, #d9e4ef 66%, #9eb0c3 100%);
  box-shadow: 0 .3rem .55rem rgba(0, 0, 0, .46), inset -.12rem -.12rem .2rem rgba(0, 0, 0, .16);
}
.pin::after {
  content: "";
  position: absolute;
  left: 15%; right: 15%; bottom: 0;
  height: 7%;
  border-radius: 50%;
  background: rgba(30, 31, 35, .3);
}
.pin.is-fallen { animation: pin-fall 580ms cubic-bezier(.2,.75,.25,1) forwards; }
/* The rack was upside down: one pin at the far end and the row of four nearest the
   bowler. A real rack points AT the bowler — head pin (1) closest and largest, the
   4-pin back row furthest away and smallest under the lane's perspective. */
.p1 { left: 50%; top: 76%; --s: 1; }
.p2 { left: 43%; top: 55%; --s: .9; }
.p3 { left: 57%; top: 55%; --s: .9; }
.p4 { left: 36%; top: 37%; --s: .82; }
.p5 { left: 50%; top: 37%; --s: .82; }
.p6 { left: 64%; top: 37%; --s: .82; }
.p7 { left: 29%; top: 20%; --s: .76; }
.p8 { left: 43%; top: 20%; --s: .76; }
.p9 { left: 57%; top: 20%; --s: .76; }
.p10 { left: 71%; top: 20%; --s: .76; }

.bowling-ball {
  position: absolute;
  left: 37.9%;
  top: 69.2%;
  width: 7.55%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.01);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.9), transparent 8%),
    radial-gradient(circle at 41% 33%, #132963 0 6%, transparent 6.5%),
    radial-gradient(circle at 55% 28%, #0c1d4a 0 6.2%, transparent 6.8%),
    radial-gradient(circle at 61% 43%, #08173b 0 6.4%, transparent 7%),
    radial-gradient(circle at 35% 28%, #55a7ff 0, #166de2 25%, #0745b3 62%, #031b64 100%);
  box-shadow: 0 1.25rem 1.4rem rgba(0,0,0,.44), inset -.8rem -1rem 1.2rem rgba(0,0,0,.24), inset .5rem .45rem .7rem rgba(255,255,255,.18);
  will-change: transform, opacity;
}
.bowling-ball.is-ready { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.85,.25,1), left 180ms ease; }
.bowling-ball.is-rolling { opacity: 1; }

.spark-field { position: absolute; inset: 0; pointer-events: none; }
.spark {
  position: absolute;
  left: 38%; top: 33%;
  width: .7%; aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe071;
  box-shadow: 0 0 .6rem #ffcf40;
  animation: sparkle 700ms ease-out forwards;
}

@keyframes pin-fall {
  0% { transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(0); opacity: 1; }
  70% { transform: translate(calc(-50% + var(--dx, 18px)), calc(-50% + var(--dy, 9px))) scale(var(--s, 1)) rotate(var(--r, 76deg)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 18px)), calc(-50% + var(--dy, 9px))) scale(var(--s, 1)) rotate(var(--r, 76deg)); opacity: 0; }
}
@keyframes sparkle {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; }
}

.game-dialog {
  width: min(92vw, 35rem);
  max-height: min(88vh, 48rem);
  padding: 0;
  border: 1px solid rgba(76, 177, 255, .56);
  border-radius: 1.4rem;
  overflow: auto;
  background: #061b3e;
  color: var(--text);
  box-shadow: 0 2rem 6rem rgba(0,0,0,.7), 0 0 2.5rem rgba(22, 120, 255, .25);
}
.game-dialog::backdrop { background: rgba(1, 8, 23, .78); backdrop-filter: blur(5px); }
.dialog-card { padding: 1.4rem; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.eyebrow { margin: 0 0 .25rem; color: #4ee7ff; font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h2 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.15rem); }
.close-button { width: 2.6rem; aspect-ratio: 1; border: 1px solid rgba(143, 203, 255, .38); border-radius: .75rem; background: #0a2d61; font-size: 1.6rem; cursor: pointer; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.stat-grid div { padding: .85rem .45rem; border: 1px solid rgba(89, 174, 255, .25); border-radius: .9rem; background: #082651; text-align: center; }
.stat-grid strong { display: block; font-size: 1.65rem; color: #fff; }
.stat-grid span { color: var(--muted); font-size: .78rem; }
.dialog-copy { color: var(--muted); line-height: 1.55; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.secondary-button, .danger-button { min-height: 2.8rem; padding: .65rem 1rem; border-radius: .75rem; border: 1px solid rgba(98, 191, 255, .4); background: #0b3572; font-weight: 800; cursor: pointer; }
.danger-button { border-color: rgba(255, 111, 129, .45); background: #7d2635; }
.full-button { width: 100%; margin-top: 1rem; }
.shortcut-list { display: grid; gap: .65rem; margin: 0; }
.shortcut-list div { display: grid; grid-template-columns: 5.2rem 1fr; align-items: center; gap: .9rem; padding: .65rem .75rem; border-radius: .75rem; background: #082651; }
.shortcut-list dt { font-weight: 900; color: #ffd45d; }
.shortcut-list dd { margin: 0; color: var(--muted); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(111, 182, 255, .18); }
.toggle-row span { display: grid; gap: .2rem; }
.toggle-row small { color: var(--muted); }
.toggle-row input { width: 1.35rem; height: 1.35rem; accent-color: #23a4ff; }

@media (max-aspect-ratio: 1 / 1) {
  body { overflow: auto; }
  .page-shell { display: block; min-width: 62rem; min-height: 34.9rem; }
  .artboard { width: 62rem; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}