/* ============================================================================
   Children's Sword Drill (studies/sword-drill.html, sword-drill.js). Loaded
   after lamp.css and kids-trivia.css, whose card, buttons, scoreboard, teams,
   review list and full-screen mode it uses as they are (kt-* classes). Here:
   the drill calls, the reference, the verse text, the timer and the hint.
   Spec: docs/superpowers/specs/2026-10-21-children-sword-drill-design.md
   ============================================================================ */

:root.lamp { --sd-go: #B91C1C; --sd-go-bg: #FEE2E2; }
@media (prefers-color-scheme: dark) {
  :root.lamp:not([data-lamp-theme="light"]) { --sd-go: #FCA5A5; --sd-go-bg: #3A1618; }
}
:root.lamp[data-lamp-theme="dark"] { --sd-go: #FCA5A5; --sd-go-bg: #3A1618; }

/* ---- Setup ------------------------------------------------------------------ */
.lamp .sd-grade-n { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.lamp .kt-grade[aria-pressed="true"] .sd-grade-n { color: var(--on-ink); opacity: .85; }
.lamp .sd-how { max-width: 72ch; }
.lamp .sd-how ol { margin: 0; padding-left: 1.4em; font: 17px/1.6 var(--f-read); }
.lamp .sd-how li { margin: 0 0 6px; }

/* ---- Menu ------------------------------------------------------------------- */
.lamp .sd-timer-set { gap: 12px; }
.lamp .sd-timer-set select, .lamp .sd-print-opt select {
  min-height: 40px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); font: 600 15px/1 var(--f-ui); color: var(--ink);
}

/* ---- Play: the card --------------------------------------------------------- */
.lamp .sd-card { position: relative; gap: 14px; }
.lamp .sd-call {
  margin: 0; font: 700 clamp(18px, 2.4vw, 28px)/1.1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.lamp .sd-call-big { font: 600 clamp(44px, 8vw, 104px)/1.05 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.lamp .sd-go {
  padding: 6px 22px; border-radius: 999px; background: var(--sd-go-bg); color: var(--sd-go);
  animation: sd-pop .35s ease both;
}
.lamp .sd-say { margin: 0; max-width: 40ch; font: 17px/1.5 var(--f-read); color: var(--muted); text-wrap: balance; }
.lamp .sd-ref {
  margin: 0; font: 600 clamp(48px, 9vw, 120px)/1.02 var(--f-display); font-variant-numeric: lining-nums tabular-nums;
  text-wrap: balance;
}
.lamp .sd-ref-small { font-size: clamp(28px, 4.4vw, 52px); color: var(--accent); }
.lamp .sd-hint {
  margin: 0; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--accent-bright);
  font: 600 14px/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.lamp .sd-text { max-width: 46ch; animation: kt-in .35s ease both; }
.lamp .sd-heading { margin: 0 0 8px; font: italic 500 15px/1.4 var(--f-read); color: var(--muted); }
.lamp .sd-verse { margin: 0; font: 500 clamp(22px, 3.2vw, 38px)/1.4 var(--f-read); text-wrap: pretty; }
.lamp .sd-text:has(.is-long) { max-width: 60ch; }
.lamp .sd-verse.is-long { font-size: clamp(18px, 2.1vw, 26px); }
.lamp .sd-verse sup, .lamp .sd-rv-text sup { margin-right: 2px; font: 600 .5em/1 var(--f-ui); color: var(--accent); vertical-align: super; }
.lamp .sd-charge-btn { background: var(--sd-go); border-color: var(--sd-go); color: var(--sd-go-bg); font-size: 24px; letter-spacing: .04em; }

/* The timer: top right of the card. */
.lamp .sd-clock {
  position: absolute; top: 14px; right: 18px; margin: 0; min-width: 3.4em; padding: 4px 12px; border-radius: 999px;
  background: var(--soft); font: 600 clamp(20px, 2.6vw, 30px)/1.2 var(--f-ui); font-variant-numeric: tabular-nums; text-align: center;
}
.lamp .sd-clock:empty { visibility: hidden; }
.lamp .sd-shown .sd-clock { color: var(--muted); }
.lamp .sd-clock.is-over { background: var(--sd-go); color: var(--sd-go-bg); animation: sd-pop .35s ease both; }
@keyframes sd-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Teams ------------------------------------------------------------------- */
.lamp .sd-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lamp .sd-copy .muted { font-size: 14px; }

/* ---- Review ------------------------------------------------------------------ */
.lamp .sd-rv-ref { font: 600 19px/1.35 var(--f-ui); }
.lamp .sd-rv-ref small { margin-left: 6px; font: 600 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lamp .sd-rv-text { font: 16px/1.55 var(--f-read); color: var(--muted); }
.lamp .sd-rv-h { font-style: italic; }
.lamp .sd-print-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: 6px; cursor: pointer; }
.lamp .sd-refs-only .sd-rv-text { display: none; }
@media screen { .lamp .sd-refs-only .sd-rv-text { display: inline; opacity: .55; } }

@media (max-width: 560px) {
  .lamp .sd-clock { position: static; }
  .lamp .sd-call-big { font-size: 44px; }
  .lamp .sd-ref { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .lamp .sd-go, .lamp .sd-text, .lamp .sd-clock.is-over { animation: none; }
}

/* ---- Print: the list, as a handout (references) or the teacher's sheet ------------- */
@media print {
  .lamp .sd-print-opt { display: none !important; }
  .lamp .sd-rv-text { color: #000; }
  .lamp .sd-refs-only .kt-rv { border-top: 0; }
  .lamp .sd-refs-only .kt-rv label { padding: 3pt 0; }
}