/* =====================================================================
   MENU — hero, wizard steps, choice/branch cards, custom settings panel
   ===================================================================== */
#screen-menu{display:grid;gap:var(--sp-5);animation:riseIn var(--t-slow) var(--ease-out)}

/* ---------- hero ----------
   The wheel itself is the artwork, so the landing screen looks like a game
   rather than a settings form. */
/* Raised paper, not a lit panel: the wheel is the only colour the hero needs. */
.hero{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--panel);
  border:1px solid var(--border);box-shadow:var(--shadow);
  display:grid;grid-template-columns:auto minmax(0,600px);justify-content:center;
  align-items:center;gap:clamp(14px,3vw,34px);
  padding:clamp(22px,3.6vw,44px) clamp(18px,3.4vw,40px);
}
.hero-copy{position:relative;z-index:1}
.hero-art{position:relative;z-index:1;width:clamp(104px,15vw,168px);aspect-ratio:1/1;flex:none}
.hero-art svg{width:100%;height:100%;display:block;animation:heroSpin 44s linear infinite}
@keyframes heroSpin{to{transform:rotate(360deg)}}

/* Matches .eyebrow in page.css: mono, tracked out, marker red. */
.cof-app .eyebrow{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);line-height:1.4}
#screen-menu h1{margin:0;font-size:clamp(1.9rem,5.4vw,3rem);line-height:1.02;letter-spacing:-.02em;
  font-weight:700;color:var(--text);display:flex;flex-wrap:wrap;align-items:baseline;gap:.28em}
.hero-of{font-size:.4em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--font-mono);color:var(--muted);transform:translateY(-.15em)}
#screen-menu .lede{color:var(--body);margin:12px 0 0;max-width:56ch;font-size:16px;line-height:1.6}
.hero-best{margin-top:14px;font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--gold);letter-spacing:.08em;text-transform:uppercase}

/* ---------- wizard shell ---------- */
#screen-menu .menu-wrap{display:grid;gap:var(--sp-5);padding:clamp(18px,3vw,30px)}
.wiz-head{display:flex;align-items:center;gap:var(--sp-3);min-height:30px}
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.72rem;font-weight:850;
  letter-spacing:.03em;color:var(--muted);text-transform:uppercase}
.breadcrumb .crumb{color:var(--muted);transition:color var(--t-mid) ease}
.breadcrumb .crumb.now{color:var(--accent)}
.breadcrumb .sep{opacity:.45}
#wizBody{display:grid;gap:var(--sp-4);animation:wizIn var(--t-mid) var(--ease-out)}
@keyframes wizIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wiz-title{margin:0;font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:700;letter-spacing:-.01em;color:var(--text)}
.wiz-sub{margin:6px 0 0;color:var(--body);font-size:15px;line-height:1.55;max-width:62ch}

.menu-section{display:grid;gap:var(--sp-3)}
.menu-section h2{margin:0;font-size:.82rem;letter-spacing:.02em;color:var(--text);font-weight:900;
  display:flex;align-items:center;gap:8px}
.menu-section h2 em{font-style:normal;color:var(--muted);font-weight:700;font-size:.92em}
.menu-section h2 .step{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--accentGrad);color:var(--accentText);font-size:.7rem;font-weight:950;flex:none}
.scope-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-3)}
.diff-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3)}

/* ---------- choice cards ---------- */
.choice-card{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--panel);padding:var(--sp-3);cursor:pointer;text-align:left;display:grid;gap:4px;
  transition:border-color var(--t-mid) ease,background var(--t-mid) ease,
             transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) ease}
.choice-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));transform:translateY(-2px)}
.choice-card strong{font-size:.95rem;font-weight:900}
.choice-card span{color:var(--muted);font-size:.75rem;line-height:1.4}
.choice-card.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2));
  box-shadow:var(--shadow)}
.choice-card .tick{position:absolute;top:8px;right:10px;color:var(--accent);font-weight:950;opacity:0;
  transition:opacity var(--t-mid)}
.choice-card.selected .tick{opacity:1}

/* ---------- branch cards (top-level choices) ---------- */
.branch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3)}
.branch{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--panel);
  padding:var(--sp-4);cursor:pointer;text-align:left;display:grid;gap:6px;color:inherit;
  transition:border-color var(--t-mid),transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid)}
.branch:hover{border-color:var(--text);transform:translateY(-2px);box-shadow:var(--shadow)}
.branch > *{position:relative}
.branch .bicon{font-size:1.8rem;line-height:1}
.branch strong{font-size:18px;font-weight:700;color:var(--text)}
.branch span{color:var(--muted);font-size:14px;line-height:1.55}
.branch.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.mode-icon{width:76px;height:60px;display:block}
/* pop-the-lock: the note sweeps round the dial and snaps back */
.timing-icon .timing-orbit{transform-origin:38px 30px;animation:popLock 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes popLock{
  0%{transform:rotate(0deg)} 42%{transform:rotate(300deg)} 50%{transform:rotate(305deg)}
  58%{transform:rotate(305deg)} 100%{transform:rotate(665deg)}}

/* ---------- mechanic switches ---------- */
.mech-row{display:grid;gap:var(--sp-2)}
.mech{display:flex;align-items:center;gap:var(--sp-3);border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--panel);padding:var(--sp-3);cursor:pointer;
  text-align:left;width:100%;color:inherit;
  transition:border-color var(--t-mid) ease,background var(--t-mid) ease,opacity var(--t-mid),
             transform var(--t-fast) var(--ease-out)}
.mech:hover:not(.locked){border-color:color-mix(in srgb,var(--accent) 50%,var(--border));transform:translateX(2px)}
.mech .mech-icon{font-size:1.3rem;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--border);flex:none;
  transition:background var(--t-mid) ease,border-color var(--t-mid) ease,transform var(--t-mid) var(--ease-pop)}
.mech .mech-text{flex:1;min-width:0;display:grid;gap:2px}
.mech .mech-text strong{font-size:.9rem;font-weight:900}
.mech .mech-text span{font-size:.75rem;color:var(--muted);line-height:1.4}
.mech .switch{width:46px;height:26px;border-radius:99px;background:var(--border);position:relative;flex:none;
  transition:background var(--t-mid) ease}
.mech .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform var(--t-mid) var(--ease-pop)}
.mech.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,var(--panel2))}
.mech.on .switch{background:var(--accent)}
.mech.on .switch::after{transform:translateX(20px)}
.mech.on .mech-icon{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--panel));
  transform:scale(1.08) rotate(-6deg)}
.mech.locked{opacity:.5;cursor:not-allowed}
.mech .req{font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* ---------- score-mode unlock banner ---------- */
.unlock{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-md);border:1.5px solid var(--gold);
  background:color-mix(in srgb,var(--gold) 9%,var(--panel));box-shadow:var(--shadow);
  animation:unlockIn .34s var(--ease-pop)}
@keyframes unlockIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.unlock-star{font-size:1.7rem;color:var(--gold);flex:none;animation:softPulse 2.2s ease-in-out infinite}
.unlock strong{display:block;font-size:.92rem;font-weight:950}
.unlock span{display:block;color:var(--muted);font-size:.76rem;line-height:1.42;margin-top:2px}

/* ---------- option pickers ---------- */
.opt-group{display:grid;gap:var(--sp-2)}
.opt-group > label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text)}
.opt-group .hint{font-size:.72rem;color:var(--muted);font-weight:600}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--border);background:var(--panel2);border-radius:9px;padding:8px 13px;
  font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;color:var(--text);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.seg button:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));transform:translateY(-1px)}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg button.custom-on{background:var(--gold);border-color:var(--gold);color:#fff}

/* ---------- collapsible custom panel (teacher / parent controls) ---------- */
.custom-panel{border:1.5px dashed color-mix(in srgb,var(--gold) 60%,var(--border));
  border-radius:var(--radius-md);background:color-mix(in srgb,var(--gold) 8%,var(--panel2));
  padding:var(--sp-3);display:grid;gap:var(--sp-2);animation:riseIn var(--t-mid) var(--ease-out)}
.custom-panel .cp-head{font-size:.7rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cp-rows{display:grid;gap:var(--sp-2)}
.cp-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.cp-row > .cp-label{display:grid;gap:1px;min-width:150px;flex:1}
.cp-row .cp-label b{font-size:.8rem;font-weight:850}
.cp-row .cp-label span{font-size:.7rem;color:var(--muted);line-height:1.35}
.cp-row .seg button{padding:5px 10px;font-size:.74rem}
.cp-num{display:flex;align-items:center;gap:6px}
.cp-num button{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--border);background:var(--panel2);
  font-weight:950;cursor:pointer;color:var(--text);font-size:.95rem;line-height:1;transition:all var(--t-fast)}
/* 28px is a fine mouse target and a poor thumb one, and the steppers are the control
   you press repeatedly. Grow the real button where it will be tapped rather than
   padding an invisible hit area over the top of its neighbour. The desktop panel is
   untouched. */
@media (pointer:coarse), (max-width:900px){
  .cp-num{gap:10px}
  .cp-num button{width:44px;height:44px;border-radius:10px;font-size:1.05rem}
}
.cp-num button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
.cp-num button:active{transform:scale(.9)}
.cp-num .cp-val{min-width:58px;text-align:center;font-weight:900;font-size:.82rem;font-variant-numeric:tabular-nums}

.explain{display:grid;gap:5px;padding:var(--sp-3);border-radius:var(--radius-md);
  background:var(--panel2);border:1px solid var(--border)}
.explain-row{display:flex;gap:8px;font-size:.76rem;line-height:1.4}
.explain-row b{min-width:72px;color:var(--text);font-weight:900}
.explain-row span{color:var(--muted)}

/* ---------- footer ---------- */
.menu-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;padding-top:var(--sp-3);border-top:1px solid var(--border)}
.menu-footer .summary{color:var(--muted);font-size:.82rem;max-width:52ch;line-height:1.45}
.menu-footer .summary b{color:var(--text)}
.footer-actions{display:flex;gap:var(--sp-2);align-items:center}

/* On a phone the hero used to stack and centre, which made it 352px tall and pushed
   the first actual choice ("What do you want to play?") 116px below the fold on a
   375x812 handset — worse on anything shorter. Side by side and tightened, it costs
   about a third of that and the branch cards are reachable without scrolling. */
@media(max-width:640px){
  .hero{grid-template-columns:auto minmax(0,1fr);text-align:left;justify-items:stretch;
    align-items:center;gap:14px;padding:16px 16px}
  .hero-art{width:clamp(58px,17vw,84px)}
  .cof-app .eyebrow{margin:0 0 6px !important;font-size:10px !important;letter-spacing:.14em !important}
  #screen-menu h1{justify-content:flex-start;font-size:clamp(1.45rem,7.4vw,2rem) !important;
    line-height:1.05 !important}
  #screen-menu .lede{margin:8px 0 0 !important;font-size:14px !important;line-height:1.5 !important}
  .hero-best{margin-top:8px}
  #screen-menu .menu-wrap{padding:16px;gap:var(--sp-4)}
  .menu-footer{flex-direction:column;align-items:stretch}
  /* Three controls will not sit on one phone row. Start takes a row of its own and
     stays on top; the two secondary buttons split the row beneath it. */
  .footer-actions{flex-wrap:wrap}
  .footer-actions .btn.big{flex:1 1 100%;order:-1}
  .footer-actions .btn.ghost{flex:1 1 0;min-width:0}
}
/* Very short handsets (SE-class, and anything in landscape): the wheel is charm, the
   choice is the point — drop the art rather than the controls. */
@media(max-width:640px) and (max-height:700px){
  .hero{grid-template-columns:1fr;padding:12px 16px}
  .hero-art{display:none}
  #screen-menu .lede{display:none}
}

/* =====================================================================
   ONBOARDING CAROUSEL
   Lives at the top level (like #lockOverlay and #endOverlay) so it covers the
   page rather than a column. Deliberately plain: four beats, one drawing each,
   and an obvious way out — the complaint it answers is that there is too much
   on screen, so the fix cannot itself be busy.
   ===================================================================== */
.cof-onboard{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;padding:var(--sp-4);
  background:rgba(26,25,22,.55);backdrop-filter:blur(4px);
  animation:cofOnboardIn var(--t-mid) ease both;
}
.cof-onboard__card{
  position:relative;width:min(460px,100%);max-height:100%;overflow-y:auto;
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  animation:cofOnboardRise var(--t-mid) ease both;
}
.cof-onboard__close{
  position:absolute;top:8px;right:8px;
  width:34px;height:34px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  border-radius:var(--radius-sm);font-size:14px;line-height:1;
  transition:color var(--t-fast) ease,background var(--t-fast) ease;
}
.cof-onboard__close:hover{color:var(--text);background:var(--panel2)}

.cof-onboard__art{
  display:grid;place-items:center;
  background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--sp-3);margin-bottom:var(--sp-4);
}
.cof-onboard__art svg{width:112px;height:112px;display:block}

.cof-onboard__title{
  margin:0;font-size:21px;font-weight:700;line-height:1.2;color:var(--text);
}
.cof-onboard__body{
  margin:10px 0 0;min-height:5.4em;
  color:var(--body);font-size:.94rem;line-height:1.55;
}

/* Progress, not decoration: the current beat is a bar, the rest are dots. */
.cof-onboard__dots{display:flex;justify-content:center;gap:6px;margin:var(--sp-4) 0}
.cof-onboard__dots i{
  /* --border is right for a hairline but disappears as a dot on the dark panel, and
     these are telling you how much is left. */
  width:6px;height:6px;border-radius:999px;background:var(--borderStrong);
  transition:width var(--t-mid) ease,background var(--t-mid) ease;
}
.cof-onboard__dots i.on{width:22px;background:var(--accent)}

.cof-onboard__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.cof-onboard__nav{display:flex;gap:var(--sp-2);margin-left:auto}

/* The fork. Two equal weights, because neither is the recommended answer — which one
   you want depends on what you came here for. */
.cof-onboard__choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:var(--sp-4) 0 0}
.cof-onboard__choice{width:100%}
.cof-onboard__choices[hidden]{display:none}
.cof-onboard__dots[hidden]{display:none}
.cof-onboard__nav[hidden]{display:none}

@keyframes cofOnboardIn{from{opacity:0}to{opacity:1}}
@keyframes cofOnboardRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:640px){
  .cof-onboard{padding:var(--sp-3)}
  .cof-onboard__card{padding:var(--sp-4)}
  .cof-onboard__art{padding:var(--sp-2)}
  .cof-onboard__art svg{width:88px;height:88px}
  .cof-onboard__body{min-height:6.5em;font-size:.9rem}
  .cof-onboard__actions{flex-wrap:wrap}
  .cof-onboard__nav{flex:1 1 100%;margin-left:0}
  .cof-onboard__nav .btn{flex:1}
  /* Two full-width choices beat two cramped ones — the labels are the whole point. */
  .cof-onboard__choices{grid-template-columns:1fr}
}