/* The new mode selector inherits the original type and theme variables. */
.hub { flex:1; min-height:0; overflow:auto; padding:32px max(24px, calc((100vw - 1080px)/2)) 44px; }
.hub .hub-intro { margin:8px 0 26px; }
.hub h1 { font-size:clamp(1.8rem,3vw,2.5rem); margin:8px 0; line-height:1.3; letter-spacing:-.04em; }
.hub p { line-height:1.75; }
.hub .eyebrow { font-family:"IBM Plex Mono","IBM Plex Sans Thai",monospace; font-size:.75rem; letter-spacing:.06em; color:var(--ink); margin:0 0 8px; }
.hub-intro > p:last-child { color:var(--ink); opacity:.75; margin:0; }
.hub button { font:inherit; color:var(--ink); border:1px solid var(--ink); background:var(--panel); padding:11px 18px; cursor:pointer; transition:background .15s, transform .15s; }
.hub button:hover:not(:disabled) { background:var(--hover-soft); }
.hub button:focus-visible, .hub textarea:focus-visible, .hub input:focus-visible { outline:3px solid #b17b24; outline-offset:4px; }
.hub button:disabled { cursor:not-allowed; opacity:.45; }
.hub button.primary, .hub button.selected { background:var(--ink); color:var(--inverse); }
.hub button.selected:hover:not(:disabled) { background:var(--ink); color:var(--inverse); }
.hub button.primary:hover:not(:disabled) { background:var(--btn-start-hover); }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hub .mode-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; position:relative; padding:24px 28px; }
.hub .mode-card.major { min-height:235px; }
.hub .mode-card.minor { min-height:178px; }
.hub .mode-card:hover { transform:translateY(-3px); box-shadow:4px 4px 0 var(--line); }
.mode-card h2 { font-size:2rem; margin:15px 0 8px; }
.mode-card.minor h2 { font-size:1.35rem; margin:10px 0 5px; }
.mode-card p { margin:0 0 14px; max-width:34ch; }
.mode-number { font: .72rem "IBM Plex Mono",monospace; letter-spacing:.08em; }
.card-action { margin-top:auto; font-weight:600; font-size:.9rem; }
.hub button.mode-card { color:#111; background:#fff; border-color:#111; }
.hub button.mode-card:hover:not(:disabled), .hub button.mode-card:focus-visible { color:#fff; background:#111; }
.hub a.mode-card { color:#111; background:#fff; border:1px solid #111; text-decoration:none; }
.hub a.mode-card:hover, .hub a.mode-card:focus-visible { color:#111; transform:translateY(-3px); box-shadow:4px 4px 0 var(--line); }
.hub-footnote { font-size:.8rem; margin:22px 0 0; }
.hub .back-link { border:0; background:transparent; text-decoration:underline; text-underline-offset:5px; padding:8px 0; margin:0 0 12px; font-size:.9rem; }
.panel { border:1px solid var(--line); background:var(--panel); padding:28px; }
.panel h2 { margin:8px 0 16px; font-size:1.55rem; }
.panel h3 { font-size:1.1rem; line-height:1.7; }
.panel > button { margin:8px 10px 8px 0; }
.choice-row, .daily-choices { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.hub .choice-row button { min-width:100px; }
.hub .lesson { max-width:860px; }
.steps { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.steps span { border-bottom:2px solid var(--line); padding:8px 12px; }
.steps .active { border-color:var(--ink); font-weight:700; }
.hub .copy-example { background:var(--hover-soft); border-left:3px solid var(--ink); padding:18px 22px; font-size:1.2rem; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; }
.hub label { display:block; margin:18px 0 8px; line-height:1.6; }
.hub textarea, .hub input[type=text] { display:block; width:100%; font:inherit; line-height:1.8; font-size:1.1rem; background:var(--bg); color:var(--ink); border:1px solid var(--ink); border-radius:0; padding:12px 16px; resize:vertical; }
.hub .feedback { min-height:1.6em; color:var(--ink); background:var(--hover-soft); padding:10px 14px; font-size:.9rem; }
.hub .teaching-note, .fine-print { font-size:.9rem; opacity:.85; line-height:1.75; }
.hub .check-row { display:flex; gap:12px; align-items:flex-start; }
.hub .check-row input { width:20px; height:20px; flex-shrink:0; }
.answer-options { display:grid; gap:10px; }
.answer-options button { text-align:left; line-height:1.75; }
.lesson-list { display:grid; gap:10px; }
.hub .lesson-list button { display:flex; gap:18px; text-align:left; align-items:center; padding:20px; }
.lesson-list button > span:last-child { margin-left:auto; font-size:.85rem; white-space:nowrap; }
.race-stats { display:flex; gap:40px; border-block:1px solid var(--line); padding:18px 0; margin:24px 0; }
.race-stats > div { display:flex; flex-direction:column; }
.race-stats strong { font:2rem "IBM Plex Mono",monospace; }
.race-stats span { font-size:.85rem; margin-top:8px; }
.race-passage { font-size:1.7rem; line-height:2!important; border-left:4px solid var(--ink); padding:8px 20px; overflow-wrap:anywhere; }
.result-number { font:2.6rem "IBM Plex Mono",monospace; margin:12px 0; }
.comparison { border:1px solid var(--ink); padding:8px 20px; }
@media (max-width:700px) {
 .hub { padding:20px 18px 36px; }
 .mode-grid {grid-template-columns:1fr; gap:12px;}
 .hub .mode-card.major {min-height:190px;}
 .hub .mode-card.minor {min-height:145px;}
 .panel {padding:20px;}
 .race-stats {gap:22px;}
 .race-stats strong {font-size:1.5rem;}
 .lesson-list button > span:last-child {display:none;}
 header.top {padding:14px 18px; flex-wrap:wrap; gap:5px;}
 header.top h1 {font-size:.85rem; letter-spacing:.06em;}
 header.top .credit {display:none;}
 .bottom {font-size:.65rem;}
}
@media (prefers-reduced-motion:reduce) { .hub button {transition:none;} .hub .mode-card:hover {transform:none;} }

.hub-navigation { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; gap:16px; background:var(--bg); padding:12px 0; border-bottom:1px solid var(--ink); margin-bottom:24px; }
.hub-navigation a,.game-navigation a {color:var(--ink); text-underline-offset:4px;}
.game-navigation {position:relative; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:8px 20px; background:var(--bg);}
.setup-panel {margin-bottom:20px;}
.settings-summary {font-weight:600;}
.hub a:focus-visible,.hub button:focus-visible,.game-navigation a:focus-visible {outline:3px solid var(--ink); outline-offset:4px;}
.fall-round { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; background:var(--bg); }
.fall-round .field.shake { animation:shake .18s linear; }
.fall-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px; background:color-mix(in srgb, var(--bg) 88%, transparent); }
.fall-overlay h3 { margin:0; }
.fall-overlay p { max-width:520px; margin:0; }
.hub .about-row { grid-column:1 / -1; display:flex; align-items:center; gap:24px; padding:8px 0; }
.hub .about-logo { display:inline-flex; line-height:0; }
.hub .about-logo img { display:block; width:64px; height:64px; }
.hub .about-logo:focus-visible, .hub .about-trainer:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.hub .about-trainer { color:var(--ink); font-weight:600; text-underline-offset:5px; }
.fall-round .karaoke { flex:0 0 auto; margin:0; padding:14px 28px; font-size:1.25rem; line-height:1.9; border-bottom:1px solid var(--line); max-height:7.8em; overflow:hidden; }
.fall-round .k-item { margin-right:.55em; color:var(--ink); }
.fall-round .k-item .sung { color:var(--faint); }
.fall-round .k-item.now { border-bottom:2px solid var(--ink); }
.fall-round .k-item.lost { color:var(--faint); text-decoration:line-through; }
.fall-round .k-label { white-space:nowrap; font-size:.72rem; letter-spacing:.08em; padding:2px 8px; margin-right:.5em; background:var(--ink); color:var(--inverse); vertical-align:middle; }