/* Pin That Spot's own styles. The shell (fonts, masthead, tile row, buttons,
   dialogs, the finished screen, More games) is the family's,
   /shared/css/family.css, loaded first; this is the globe and what sits
   around it, and how the page is laid out under the masthead. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--sd-page); color: var(--sd-ink); font: 400 16px/1.4 var(--sd-text); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.soon { margin: 80px auto; font: 700 28px/1.15 var(--sd-slab); text-align: center; }

/* ---------- playing: the globe fills whatever the question and the button leave ----------
   The page is exactly the screen's height while playing, so the globe is
   never cut off and never scrolls away. */
body:has(.play:not([hidden])) { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body:has(.play:not([hidden])) main { flex: 1; min-height: 0; }
main { width: 100%; max-width: var(--sd-masthead-w); margin: 0 auto; padding: 0 16px; }
.play { height: 100%; display: flex; flex-direction: column; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.question { margin: 2px 0 0; font: 700 21px/1.25 var(--sd-text); letter-spacing: -.005em; }
.hint { margin: 4px 0 0; min-height: 18px; color: var(--sd-ink-2); font-size: 14px; }
.stage { position: relative; flex: 1; min-height: 240px; margin: 4px -16px 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* The distance label rides the top of the flight line (its position comes from Rive). */
.label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 14px 9px; border-radius: 10px; background: var(--sd-ink); color: #fff; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 18px rgba(18, 18, 18, .22); opacity: 0; transform: translate(-50%, calc(-100% - 8px)) scale(.85);
  transition: opacity .15s, transform .3s var(--sd-ease-out); }
.label.on { opacity: 1; transform: translate(-50%, calc(-100% - 8px)) scale(1); }
.label .mi { font: 700 24px/1 var(--sd-slab); font-variant-numeric: tabular-nums; }
.label .pts { font: 800 11px/1 var(--sd-text); letter-spacing: .06em; text-transform: uppercase; color: var(--sd-game); opacity: 0; transition: opacity .2s; }
.label .pts.on { opacity: 1; }

.bar { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.answer { display: flex; align-items: center; gap: 14px; }
.answer div { flex: 1; min-width: 0; }
.answer h2 { margin: 0; font: 700 22px/1.15 var(--sd-slab); }
.answer p { margin: 3px 0 0; color: var(--sd-ink-2); font-size: 14px; line-height: 1.35; }
.answer .sd-pill { flex: none; }

/* Tiles and score chips by verdict: hit green for a bullseye or close, the
   game's pink for the right area, grey for a miss. */
.sd-tiles li.is-bullseye, .sd-tiles li.is-close, .n.is-bullseye, .n.is-close { background: var(--sd-hit); border-color: var(--sd-hit); color: var(--sd-ink); }
.sd-tiles li.is-area, .n.is-area { background: var(--sd-game-soft); border-color: var(--sd-game); color: var(--sd-ink); }
.sd-tiles li.is-off, .sd-tiles li.is-lost, .n.is-off, .n.is-lost { background: var(--sd-miss); border-color: var(--sd-miss); color: var(--sd-ink); }

/* ---------- the finished screen ---------- */
.summary { padding-bottom: 40px; }
.summary .sd-verdict, .summary .sd-actions { margin: 0 -16px; }
.rounds { margin-top: 28px; }
.rounds h2 { margin: 0 0 10px; font: 800 11.5px/1 var(--sd-text); letter-spacing: .06em; text-transform: uppercase; }
.rounds ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sd-hair); }
.rounds li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sd-hair); }
.rounds .n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid; border-radius: 6px;
  font: 700 16px/1 var(--sd-slab); font-variant-numeric: tabular-nums; }
.rounds b { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; }
.rounds small { display: block; margin-top: 2px; color: var(--sd-ink-2); font-size: 13.5px; }
.summary .sd-everyone, .summary .sd-more { margin-top: 28px; }
/* The family's bars are labeled 1-6; ours are rank names ("Lost Luggage"), so
   the label column is wider, here and in the stats dialog. */
.sd-dist li { grid-template-columns: 92px 1fr; }

/* ---------- local dev: step through days (testBar in app.js) ---------- */
.test-bar { position: fixed; right: 8px; top: 60px; z-index: 30; /* top right here: the Drop button owns the bottom */ display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border-radius: 12px; background: #ff6fab; color: var(--sd-ink); box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font: 800 12px var(--sd-text); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.test-bar a, .test-bar button { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: var(--sd-ink); color: #fff; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }

/* ---------- wide screens: the globe on the left, full height; the game on the right ---------- */
@media (min-width: 860px) {
  .play { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto auto 1fr;
    column-gap: 32px; padding-top: 12px; grid-template-areas: "stage status" "stage ask" "stage bar" "stage ."; }
  .play .sd-status { grid-area: status; }
  .ask { grid-area: ask; }
  .bar { grid-area: bar; padding-top: 18px; }
  .answer { flex-direction: column; align-items: stretch; }
  .answer .sd-pill { width: 100%; }
  .stage { grid-area: stage; margin: 0; min-height: 0; }
  .summary { max-width: 640px; margin: 0 auto; }
  .summary .sd-verdict { margin: 0; border-radius: 12px; }
  .summary .sd-actions { margin: 0; padding: 18px 0 0; }
}