/* ============================================================
   Maestro — Soltani Music School
   Concert-programme look: cream paper, maroon ink, gold rule.
   Built for a phone first: big targets, one panel at a time,
   everything stacked and centred.
   ============================================================ */

:root{
  --maroon:#951E1D;
  --maroon-dk:#6f1615;
  --gold:#c9a227;
  --red:#cf0206;
  --paper:#fbf7ef;
  --paper-2:#f4ecdd;
  --ink:#2b2422;
  --ink-soft:#6a5d56;
  --line:#e0d4bf;
  --good:#2f6b52;
  --bad:#a32a26;
  --pad:20px;
  --tap:56px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* iOS: kill the 300ms double-tap-to-zoom delay on everything tappable, and
   stop rubber-band scrolling dragging the whole page around mid-question. */
button, .opt, .ans, .trow, .chip, .hint, .buzzer, .replay{ touch-action:manipulation; }

html,body{
  margin:0; padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.45;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}
body{
  min-height:100dvh;
  background-image:none;
}

#app{ min-height:100dvh; }

/* ---------- screens ---------- */
.screen{ display:none; }
.screen.show{ display:block; }

.wrap{
  max-width:520px;
  margin:0 auto;
  /* left/right insets matter in landscape, where the notch eats a side */
  padding:calc(env(safe-area-inset-top) + 18px)
          calc(env(safe-area-inset-right) + var(--pad))
          calc(env(safe-area-inset-bottom) + 32px)
          calc(env(safe-area-inset-left) + var(--pad));
}

/* ---------- crest / titles ---------- */
.crest{ text-align:center; margin:14px 0 26px; }
.small-crest{ margin:6px 0 18px; }
.crest-mark{
  font-size:12px; line-height:1; color:var(--maroon); letter-spacing:.18em;
  margin-bottom:4px;
}
.title{
  font-size:40px; margin:0; letter-spacing:.02em;
  color:var(--maroon); font-weight:600;
}
.sub{
  font-size:15px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:6px;
}
.rule{
  height:2px; width:120px; margin:16px auto 10px;
  background:var(--gold);
}
.school{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }

.head{
  font-size:27px; color:var(--maroon); margin:6px 0 4px; font-weight:600;
}
.lede{ color:var(--ink-soft); font-size:15px; margin:6px 0 14px; }

/* ---------- buttons ---------- */
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
button:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:3px solid color-mix(in srgb, var(--gold) 72%, #fff);
  outline-offset:3px;
}

.big{
  display:block;
  width:100%; max-width:340px;
  margin:12px auto;
  min-height:var(--tap);
  padding:15px 20px;
  border:2px solid var(--maroon);
  border-radius:8px;
  background:#fff; color:var(--maroon);
  font-size:20px; font-weight:600;
  box-shadow:none;
}
.big.primary{ background:var(--maroon); color:#fff; border-color:var(--maroon); }
.big:active{ transform:translateY(1px); }
.big[disabled]{ opacity:.45; }

.small{
  display:block; margin:10px auto; padding:11px 18px;
  min-height:44px;
  border:1.5px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink); font-size:16px;
}
.small.ghost{ border-color:transparent; background:transparent; color:var(--ink-soft); }
.small.danger{ border-color:#d8bcbb; color:var(--bad); }

.link{
  background:none; border:none; color:var(--maroon);
  font-size:16px; padding:12px 14px; min-height:44px;
  text-decoration:underline; text-underline-offset:3px;
}
.back{
  background:none; border:none; color:var(--maroon);
  font-size:17px; padding:8px 4px 8px 0; min-height:44px;
  margin-bottom:2px;
}
.home-foot{
  display:flex; justify-content:center; gap:10px; margin-top:22px;
  flex-wrap:wrap;
}

.guide-list{
  margin:24px 0 30px;
  border-top:1px solid var(--line);
}
.guide-list > div{
  display:grid;
  grid-template-columns:minmax(92px, .34fr) 1fr;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.guide-list b{ color:var(--maroon); font-weight:600; }
.guide-list span{ color:var(--ink-soft); }

/* ---------- option groups ---------- */
.group{
  margin:24px 0;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.group:first-of-type{ border-top:none; padding-top:0; }
.glabel{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:10px;
}
.stack{ display:block; }

.opt{
  display:flex; align-items:center; gap:12px;
  width:100%; margin:8px 0;
  min-height:var(--tap);
  padding:13px 16px;
  border:2px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink);
  text-align:left;
}
.opt .oi{ font-size:10px; font-weight:700; letter-spacing:.06em; width:46px; text-align:center; flex:none; }
.opt .on{ font-weight:600; display:block; }
.opt .ob{ font-size:14px; color:var(--ink-soft); display:block; }
.opt[aria-pressed="true"]{
  border-color:var(--maroon);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--maroon);
}
.opt[aria-pressed="true"] .on{ color:var(--maroon); }

/* ---------- players ---------- */
.prow{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.prow input{
  flex:1; min-height:var(--tap); padding:12px 14px;
  border:2px solid var(--line); border-radius:13px;
  font-family:inherit; font-size:17px; background:#fff; color:var(--ink);
}
.prow input:focus{ outline:none; border-color:var(--maroon); }
.prow .del{
  flex:none; width:46px; min-height:46px;
  border:none; background:none; color:var(--ink-soft); font-size:20px;
}

/* ---------- play screen ---------- */
.play-wrap{ display:flex; flex-direction:column; min-height:100dvh; }

.hud{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:6px;
}
.quit{
  border:none; background:none; color:var(--ink-soft);
  font-size:22px; width:44px; height:44px; flex:none;
}
.hud-mid{ text-align:center; flex:1; }
.qcount{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.whoseturn{ font-size:17px; color:var(--maroon); font-weight:600; min-height:24px; }
.hud-score{
  flex:none; min-width:56px; text-align:right;
  font-size:22px; font-weight:600; color:var(--maroon);
  font-variant-numeric:tabular-nums;
}

.disc-area{ text-align:center; margin:6px 0 14px; }
.disc{
  position:relative; width:132px; height:132px; margin:0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fff 0 22%, var(--paper-2) 22% 26%, #fff 26% 30%, var(--paper-2) 30%);
  border:3px solid var(--maroon);
  display:flex; align-items:center; justify-content:center;
}
.disc.spin{ animation:none; }
.disc-ring{
  position:absolute; inset:-9px; border-radius:50%;
  border:2px solid var(--gold); opacity:0;
}
.disc.spin .disc-ring{ opacity:.7; animation:none; }
.disc-label{ font-size:13px; font-weight:700; letter-spacing:.14em; animation:none; }
.disc.spin .disc-label{ animation:none; }

.timerbar{
  width:min(300px,86%); height:9px; margin:16px auto 0;
  background:var(--paper-2); border-radius:99px; overflow:hidden;
  border:1px solid var(--line);
}
.timerbar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--gold),var(--maroon));
  transition:width .18s linear;
}
.timerbar.low i{ background:var(--red); }
.streak{
  min-height:22px; margin-top:8px;
  font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  font-weight:600;
}

.count{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:10px;
}

/* ---------- hear it again ---------- */
.replay{
  display:block; margin:14px auto 0;
  min-height:48px; padding:11px 22px;
  border:2px solid var(--gold); border-radius:99px;
  background:#fff; color:var(--maroon);
  font-size:17px; font-weight:600;
}
.replay:active{ transform:translateY(1px); }

/* ---------- buzz in ---------- */
.buzzrow{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px; }
.buzzer{
  flex:1 1 44%; min-height:88px;
  border:none; border-radius:16px;
  color:#fff; font-size:22px; font-weight:600;
  box-shadow:0 3px 0 rgba(0,0,0,.14);
}
.buzzer:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.14); }
.buzzer[disabled]{ opacity:.35; }
.buzzer.b0{ background:var(--maroon); }
.buzzer.b1{ background:#2f6b52; }
.buzzer.b2{ background:#3d4f7a; }
.buzzer.b3{ background:#8a6d1f; }
.buzzed{
  width:100%; text-align:center; padding:14px;
  border:2px solid var(--gold); border-radius:14px; background:#fffdf6;
  font-size:19px; font-weight:600; color:var(--maroon);
}
/* while the buzzers are live there is nothing to read, so hide the furniture */
body.awaiting-buzz .qprompt,
body.awaiting-buzz .onoffer,
body.awaiting-buzz .hintbar{ display:none; }

.onoffer{
  text-align:center; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); font-weight:600;
  margin-top:4px;
}
.qprompt{
  text-align:center; font-size:21px; color:var(--maroon);
  margin:4px 0 14px; font-weight:600;
}

/* ---------- hints ---------- */
.hintbar{ display:flex; gap:8px; margin:14px 0 4px; flex-wrap:wrap; justify-content:center; }
.hint{
  flex:1 1 auto; min-width:104px; min-height:48px;
  padding:9px 12px;
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
  color:var(--ink); font-size:15px; line-height:1.15; text-align:center;
}
.hint em{
  display:block; font-style:normal; font-size:12px;
  letter-spacing:.1em; color:var(--gold); margin-top:3px;
}
.hint[disabled]{ opacity:.42; }
.hintout{
  text-align:center; min-height:24px; margin-top:8px;
  color:var(--maroon); font-size:16px;
}
.heard{
  text-align:center; min-height:22px; color:var(--ink-soft);
  font-size:15px; font-style:italic;
}

.ans .letter{
  display:inline-block; width:26px; flex:none;
  color:var(--gold); font-weight:600;
}
.ans.gone{ opacity:.38; }
.ans.gone s{ text-decoration:line-through; }
.answers{ display:block; }
.ans{
  display:flex; align-items:center; gap:6px;
  width:100%; margin:9px 0;
  min-height:var(--tap);
  padding:14px 16px;
  border:2px solid var(--line); border-radius:13px;
  background:#fff; color:var(--ink);
  font-size:18px; text-align:left; line-height:1.3;
}
.ans:active{ transform:translateY(1px); }
.ans.right{ border-color:var(--good); background:#eef6f1; color:var(--good); font-weight:600; }
.ans.wrong{ border-color:var(--bad); background:#fbeeed; color:var(--bad); }
.ans.dim{ opacity:.45; }

/* ---------- reveal ---------- */
.verdict{
  text-align:center; font-size:34px; font-weight:600;
  margin:20px 0 2px;
}
.verdict.good{ color:var(--good); }
.verdict.part{ color:var(--gold); }
.verdict.bad{ color:var(--bad); }
.scoreline{
  text-align:center; margin:6px 0 2px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  font-size:15px; color:var(--ink-soft);
}
.scoreline .minus{ color:var(--bad); }
.scoreline .plus{ color:var(--gold); }

/* ---------- hands-free: everything bigger, nothing to read closely ---------- */
body.hands-free .ans{ font-size:23px; padding:20px 16px; min-height:76px; }
body.hands-free .ans .letter{ width:34px; font-size:26px; }
body.hands-free .qprompt{ font-size:25px; }
body.hands-free .hint{ min-height:60px; font-size:17px; }
body.hands-free .heard{ font-size:17px; }
body.hands-free .disc{ width:104px; height:104px; }
body.hands-free .disc-label{ font-size:38px; }
.pts{
  text-align:center; font-size:19px; color:var(--ink-soft);
  min-height:26px; margin-bottom:14px;
}
.pts b{ color:var(--maroon); }

.card{
  border:2px solid var(--line); border-top:4px solid var(--gold);
  border-radius:15px; background:#fff;
  padding:22px 20px; text-align:center;
  margin:0 auto 8px; max-width:420px;
}
.card-mark{ font-size:11px; font-weight:700; letter-spacing:.14em; }
.card-title{ font-size:22px; color:var(--maroon); font-weight:600; margin:8px 0 2px; }
.card-comp{ font-size:17px; }
.card-era{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:6px;
}
.card-fact{
  font-size:16px; color:var(--ink-soft); margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line);
  text-align:left;
}

/* ---------- results ---------- */
.brow{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; margin:9px 0;
  border:2px solid var(--line); border-radius:13px; background:#fff;
}
.brow.win{ border-color:var(--gold); background:#fffdf6; }
.brow .rank{ font-size:20px; width:30px; flex:none; text-align:center; color:var(--maroon); font-weight:600; }
.brow .nm{ flex:1; font-size:19px; font-weight:600; }
.brow .dt{ font-size:14px; color:var(--ink-soft); font-weight:400; display:block; }
.brow .sc{ font-size:22px; font-weight:600; color:var(--maroon); font-variant-numeric:tabular-nums; }
.res-note{
  text-align:center; color:var(--gold); font-size:15px;
  letter-spacing:.1em; text-transform:uppercase; min-height:24px; margin:12px 0;
}

/* ---------- listening room ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px; }
.chip{
  padding:9px 14px; min-height:44px;
  border:1.5px solid var(--line); border-radius:99px;
  background:#fff; color:var(--ink); font-size:15px;
}
.chip[aria-pressed="true"]{ border-color:var(--maroon); color:var(--maroon); font-weight:600; }

.trow{
  display:flex; align-items:center; gap:12px;
  width:100%; margin:8px 0; padding:12px 14px;
  min-height:var(--tap);
  border:2px solid var(--line); border-radius:13px;
  background:#fff; text-align:left; color:var(--ink);
}
.trow.playing{ border-color:var(--maroon); box-shadow:inset 0 0 0 1px var(--maroon); }
.trow .te{ font-size:10px; font-weight:700; letter-spacing:.06em; width:54px; flex:none; text-align:center; }
.trow .tt{ flex:1; min-width:0; }
.trow .tn{ font-weight:600; display:block; }
.trow .tc{ font-size:14px; color:var(--ink-soft); display:block; }
.trow .tg{
  flex:none; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:99px;
  padding:3px 8px;
}

/* ---------- settings extras ---------- */
.toggle{
  display:flex; align-items:center; gap:12px;
  min-height:var(--tap); padding:10px 4px; font-size:17px;
}
.toggle input{ width:26px; height:26px; accent-color:var(--maroon); flex:none; }
.volrow{ display:flex; align-items:center; gap:14px; min-height:var(--tap); font-size:17px; }
.volrow input{ flex:1; accent-color:var(--maroon); height:34px; }
.field-label{ display:block; margin:14px 0 7px; color:var(--ink-soft); font-size:15px; }
.voice-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.voice-row select{
  width:100%; min-height:48px; padding:10px 36px 10px 12px;
  border:1.5px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink); font:inherit;
}
.voice-row .small{ margin:0; min-height:48px; }
.voice-note{ margin-top:8px; }

.crow{
  display:flex; align-items:center; gap:10px;
  margin:8px 0; padding:10px 12px;
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
}
.crow .cn{ flex:1; min-width:0; font-size:16px; }
.crow .cn small{ display:block; color:var(--ink-soft); font-size:13px; }
.crow .cn em{
  font-style:normal; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
}
.crow button{
  flex:none; width:46px; height:46px; border-radius:11px;
  border:1.5px solid var(--line); background:#fff; font-size:19px;
}
.crow button[aria-pressed="true"]{ border-color:var(--bad); background:#fbeeed; }
.crow.flagged{ border-color:var(--bad); }

.empty{ color:var(--ink-soft); font-size:15px; padding:8px 0; }

/* ---------- offline download ---------- */
.dlbar{
  width:100%; height:10px; margin:10px 0;
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:99px; overflow:hidden;
}
.dlbar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--maroon));
  transition:width .2s linear;
}

/* ---------- composer search ---------- */
#composer-search{
  width:100%; min-height:var(--tap); margin:4px 0 14px;
  padding:12px 16px;
  border:2px solid var(--line); border-radius:13px;
  font-family:inherit; font-size:17px;   /* 16px+ stops iOS zooming on focus */
  background:#fff; color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
#composer-search:focus{ outline:none; border-color:var(--maroon); }

/* ---------- printable practice sheet ---------- */
.sheet{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:26px 24px; margin-bottom:18px;
}
.sheet-head{ text-align:center; margin-bottom:18px; }
.sheet-school{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.sheet-title{ font-size:27px; color:var(--maroon); margin:6px 0 0; font-weight:600; }
.sheet-rule{ height:2px; width:130px; margin:12px auto 8px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.sheet-sub{ font-size:14px; color:var(--ink-soft); }
.sheet-row{ display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.sheet-n{ width:24px; flex:none; color:var(--gold); font-weight:600; font-size:18px; }
.sheet-main{ flex:1; min-width:0; }
.sheet-piece{ font-size:17px; font-weight:600; color:var(--ink); }
.sheet-meta{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.sheet-lines span{
  display:block; border-bottom:1px solid var(--line);
  height:17px; margin-top:9px;
}
.sheet-foot{
  margin-top:20px; padding-top:12px; border-top:1px solid var(--line);
  text-align:center; font-size:11px; color:var(--ink-soft);
}

@media print{
  @page{ margin:14mm; }
  body{ background:#fff; }
  .no-print, #toast{ display:none !important; }
  .wrap{ padding:0; max-width:none; }
  .sheet{ border:none; border-radius:0; padding:0; }
  .sheet-row{ break-inside:avoid; }
  .sheet-lines span{ border-bottom:1px solid #bbb; }
}

/* ---------- add to home screen (iOS only) ---------- */
.a2hs{
  margin:26px auto 0; max-width:340px;
  border:1.5px solid var(--line); border-top:3px solid var(--gold);
  border-radius:13px; background:#fff; padding:16px;
  font-size:15px; color:var(--ink-soft); line-height:1.4;
}
.a2hs b{ color:var(--maroon); }
.a2hs button{
  display:block; margin:12px auto 0; min-height:44px; padding:9px 20px;
  border:1.5px solid var(--line); border-radius:11px;
  background:var(--paper); color:var(--ink); font-size:16px;
}

/* ---------- toast ---------- */
#toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 26px);
  background:var(--ink); color:#fff; padding:12px 18px;
  border-radius:12px; font-size:16px; max-width:88%;
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:50;
}
#toast.show{ opacity:.96; }

/* ---------- larger screens ---------- */
@media (min-width:700px){
  :root{ --pad:28px; }
  .wrap{ max-width:600px; }
  .disc{ width:160px; height:160px; }
  .disc-label{ font-size:56px; }
}

@media (prefers-reduced-motion:reduce){
  .disc.spin, .disc.spin .disc-label, .disc.spin .disc-ring{ animation:none; }
  .screen.show{ animation:none; }
}

/* ---------- optional e-reader display ---------- */
:root[data-eink="true"]{
  --maroon:#000;
  --maroon-dk:#000;
  --gold:#000;
  --red:#000;
  --paper:#fff;
  --paper-2:#fff;
  --ink:#000;
  --ink-soft:#222;
  --line:#000;
  --good:#000;
  --bad:#000;
  color-scheme:light;
}
:root[data-eink="true"] body{ background:#fff; background-image:none; }
:root[data-eink="true"] *,
:root[data-eink="true"] *::before,
:root[data-eink="true"] *::after{
  animation:none !important;
  transition:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
}
:root[data-eink="true"] img,
:root[data-eink="true"] canvas,
:root[data-eink="true"] video{ filter:grayscale(1) contrast(1.15) !important; }
:root[data-eink="true"] button,
:root[data-eink="true"] .group,
:root[data-eink="true"] .card,
:root[data-eink="true"] .opt,
:root[data-eink="true"] .ans{ background:#fff; border-color:#000; color:#000; }
:root[data-eink="true"] .primary,
:root[data-eink="true"] [aria-pressed="true"],
:root[data-eink="true"] .chosen{ background:#000 !important; color:#fff !important; }

/* ---------- party: the host's room card ---------- */
.roomcard{
  border:2px solid var(--line); border-top:4px solid var(--gold);
  border-radius:15px; background:#fff; padding:20px 16px;
  text-align:center; margin:6px 0 22px;
}
.roomlabel{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.roomurl{ font-size:19px; color:var(--ink); margin:6px 0 14px; word-break:break-all; }
.roomcode{
  font-size:56px; font-weight:600; letter-spacing:.16em;
  color:var(--maroon); line-height:1.1; margin:6px 0 8px;
}
.roomstatus{ font-size:14px; color:var(--ink-soft); }
.brow.dim{ opacity:.45; }

/* ---------- party: the player's phone ---------- */
.codeinput{
  width:100%; min-height:var(--tap); margin:4px 0 16px; padding:12px 16px;
  border:2px solid var(--line); border-radius:13px; background:#fff; color:var(--maroon);
  font-family:inherit; font-size:34px; font-weight:600; text-align:center;
  letter-spacing:.3em; text-transform:uppercase;
  -webkit-appearance:none; appearance:none;
}
#join-name{
  width:100%; min-height:var(--tap); padding:12px 16px;
  border:2px solid var(--line); border-radius:13px; background:#fff; color:var(--ink);
  font-family:inherit; font-size:17px;   /* 16px+ so iOS does not zoom */
  -webkit-appearance:none; appearance:none;
}
.codeinput:focus, #join-name:focus{ outline:none; border-color:var(--maroon); }

.waitcard{
  border:2px dashed var(--line); border-radius:14px;
  padding:26px 18px; text-align:center; margin:16px 0;
  font-size:18px; color:var(--ink-soft); line-height:1.4;
}
.waitcard.small{ padding:14px; font-size:16px; margin-top:12px; }
#s-play2 .ans{ font-size:20px; min-height:70px; }
#s-play2 .ans.chosen{ border-color:var(--maroon); box-shadow:inset 0 0 0 1px var(--maroon); opacity:1; }
/* on the host screen the options are a display, not a control */
.ans.display{ opacity:.9; }
.ans.display:active{ transform:none; }

.centred{ text-align:center; }