/* Shared visual rules. Game mechanics and lesson content stay in their owners. */
:root{--td-paper:#f7faff;--td-surface:#ffffff;--td-ink:#192841;--td-muted:#586982;--td-line:#dce6f2;--td-accent:#df3035;--td-accent-soft:#fff0e8;--td-green:#007e5a;--td-blue:#235fe2;--td-blue-soft:#e9f1ff;--td-yellow:#ffd45a;--td-yellow-ink:#573b00;--td-yellow-soft:#fff5d6;--td-purple:#713be0;--td-purple-soft:#f1eaff;--td-focus:#235fe2;--td-radius:16px;--td-font:ui-sans-serif,system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif}
.td-icon{display:inline-block;width:1.15em;height:1.15em;flex:none;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* Party shell */
:root:has(.ttf-wrap),:root[data-theme]:has(.ttf-wrap){--bg:var(--td-paper);--card:var(--td-surface);--panel:#edf3fc;--fg:var(--td-ink);--fg-soft:#344862;--muted:var(--td-muted);--faint:#62728a;--accent:var(--td-accent);--accent-dark:#bc2431;--accent-soft:var(--td-accent-soft);--border:var(--td-line);--border-soft:#edf3fa;--green:var(--td-green);--green-soft:#e0f8ed;--green-ink:#006b4c;--amber:#f2b21b;--amber-soft:#fff4ce;--amber-ink:#825600;--red:#d82d45;--red-soft:#ffeaf0;--red-ink:#b91c37;--shadow-sm:none;--shadow:0 8px 24px #235fe20a;--shadow-lg:0 20px 60px #235fe212;--ui:var(--td-font);--serif:var(--td-font);--radius:var(--td-radius)}
.ttf-wrap{font-family:var(--td-font);background:var(--bg);padding:20px 12px;line-height:1.65}.device{max-width:460px;border-color:var(--border);border-radius:24px;box-shadow:var(--shadow-lg);height:min(900px,94dvh)}
.topbar{padding:calc(13px + env(safe-area-inset-top)) 20px 13px;gap:10px;border-bottom:1px solid var(--border);background:var(--bg);min-height:60px}.topbar .logo{font-size:17px;font-weight:750;letter-spacing:-.035em;display:flex!important;gap:8px;align-items:center}.topbar .logo[style*="none"]{display:none!important}.topbar .logo .td-icon{color:var(--accent);width:24px;height:24px}.topbar .st{font-size:14px;font-weight:650;line-height:1.45;overflow:hidden;text-overflow:ellipsis}.topbar .st .td-icon{display:none}.special-wallet{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:11px;padding:0;gap:4px}.special-wallet .td-icon{color:var(--accent)}.topbar .mute,.topbar .back{border:0;background:transparent;box-shadow:none;color:var(--fg);border-radius:10px;min-width:36px;min-height:36px}.topbar .sp{min-width:0}.view{padding:20px;gap:18px}.kicker{font-size:11px;font-weight:650;color:var(--muted);letter-spacing:.04em}
.btn,.daily-primary{background:var(--accent);color:#fff;border:1px solid transparent;border-radius:12px;box-shadow:none;font-size:15px;font-weight:650;min-height:48px;padding:12px 18px}.btn.ghost,.daily-secondary{border:1px solid var(--border);background:var(--card);color:var(--fg);box-shadow:none}.btn.soft{background:var(--panel);color:var(--fg)}.btn.green{background:var(--green)}.btn .td-icon{width:18px;height:18px}.btn:active{transform:scale(.99)}button:focus-visible,a:focus-visible{outline:3px solid var(--td-focus);outline-offset:3px}
.title-wrap:has(.daily-entry){justify-content:flex-start;padding:12px 4px}.title-wrap:has(.daily-entry) .hero2{display:flex;flex-direction:column;align-items:center}.title-wrap:has(.daily-entry) .hero2 .eyebrow{display:none}.title-wrap:has(.daily-entry) .hero2-logo{order:1;width:190px;margin:0 auto 4px;filter:none}.title-wrap:has(.daily-entry) .hero2-cut{order:2;display:block;width:230px;height:190px;margin:2px auto 8px;filter:none}.title-wrap:has(.daily-entry) .hero2-cut img{height:100%;width:100%;object-fit:contain}.title-wrap .daily-entry{margin:12px 0;width:100%}.title-wrap .daily-primary{width:100%;min-height:52px;font-size:16px}.title-wrap:has(.daily-entry)>.btn.ghost{border:0;background:transparent;color:var(--muted);min-height:42px}.credits{font-size:10px;opacity:.7;line-height:1.7}.credits .portal-credit{font-weight:500;color:var(--muted)}
.course-tabs{gap:0;padding:4px;background:var(--panel);border:0;border-radius:12px;margin:16px 0}.ctab{box-shadow:none;background:transparent;color:var(--muted);border:0;border-radius:9px;padding:9px 5px}.ctab.on{background:var(--card);color:var(--fg);border:0;box-shadow:0 1px 3px #235fe20a}.ctab .ci,.ctab .cs{display:none}.ctab .cl{font-size:13px;font-weight:650}.lcard{padding:17px;margin:10px 0!important;border:1px solid var(--border);box-shadow:none;gap:13px;animation:none}.lcard.current{border-color:var(--border);box-shadow:none}.lcard.current .lnum{background:var(--accent-soft);color:var(--accent);border:0}.lcard.done .lnum{background:var(--green-soft);color:var(--green);border:0}.lnum{width:38px;height:38px;border:0;border-radius:10px;font-weight:600;background:var(--panel)}.ltitle{font-size:15px;font-weight:650;line-height:1.5}.lmeta{font-size:12px;line-height:1.5;margin-top:4px}.lrow>div:nth-child(2){min-width:0;flex:1}.grab{font-size:22px;flex:none}.lcard .btn{font-size:13px;min-height:40px;padding:8px 12px}.locknote{font-size:11px;font-weight:450;line-height:1.7}.ds-progress{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.ds-progress-track{height:4px;background:var(--panel);border-radius:3px;flex:1;overflow:hidden}.ds-progress-track i{height:100%;display:block;background:var(--green);border-radius:3px}.ds-progress span{white-space:nowrap}.taco-shelf{gap:7px;padding:0;background:none;border:0;box-shadow:none}.taco-shelf .td-icon{width:20px;height:20px;color:var(--green)}
.textcard,.vcard{padding:20px;border:1px solid var(--border);border-radius:16px;box-shadow:none}.textcard .en,.passage .en{font-family:var(--td-font);font-weight:500;line-height:1.8}.jpmix{font-size:17px;line-height:2.15}.qhead{font-weight:650}.qmeta{font-size:12px;font-weight:500;color:var(--muted)}.qhint{font-size:12px;line-height:1.7;color:var(--muted);font-weight:400}.textcard:has(.jpmix){margin:16px 0}.jpmix .vword{font-family:var(--td-font)}.tm-crate{background:var(--panel);border:0;border-radius:12px;box-shadow:none;padding:12px 14px}.tm-crate .cl{font-weight:500;color:var(--muted);margin-bottom:8px}.tm-crate .cl b{color:var(--fg)}.tm-slot{width:20px;height:20px;background:var(--card);box-shadow:none;border:1px solid var(--border);color:var(--accent)}.tm-slot.done{border-color:transparent;background:var(--accent-soft)}.tm-slot .td-icon{width:15px;height:15px}.banner{font-weight:550;font-size:13px;line-height:1.7;box-shadow:none}.vsheet{border-radius:22px 22px 0 0;background:var(--card);box-shadow:0 -8px 48px #19284120;padding:22px}.vsheet .vh{font-family:var(--td-font);font-weight:650}.choice{min-height:48px;border:1px solid var(--border);padding:13px 15px;border-radius:12px;font-weight:500;font-size:15px}.choice .k{border-radius:6px;font-weight:500;font-size:11px;background:var(--panel)}.choice.correct{background:var(--green-soft);border-color:var(--green)}
.course-progress{padding:14px 0;margin:10px 0}.course-progress .bar{height:5px;border:0}.course-progress .n{font-weight:500;font-size:11px}.step{gap:12px;padding:6px 0;animation:none}.rail,.node{width:38px}.node{height:38px;border:0;background:var(--panel);border-radius:11px;color:var(--muted)}.step.current .node{background:var(--accent-soft);color:var(--accent);border:0;box-shadow:none}.step.done .node{background:var(--green-soft);color:var(--green)}.node .td-icon{width:21px;height:21px}.sc{padding:14px 15px;border:1px solid var(--border);box-shadow:none;border-radius:14px}.step.current .sc{border-color:var(--border)}.sc .sn{font-weight:650;font-size:14px}.sc .sd{font-size:12px;font-weight:400;line-height:1.6}.tag{font-size:10px;font-weight:500;letter-spacing:0}.rush-step .sc{border-color:var(--border)}.ex-badge{border:0;font-weight:500;font-size:10px}.songcard{box-shadow:none;border:1px solid var(--border);background:var(--card);border-radius:14px}.footer-tabs{border-top:1px solid var(--border);background:var(--card)}.footer-tabs .tab-btn,.footer-tabs .portal-tab{color:var(--muted);font-size:10px;font-weight:550}.footer-tabs .tab-btn.on{color:var(--accent);background:transparent}.tab-icon .td-icon{width:21px;height:21px}.setrow{border-color:var(--border)}.set-label{font-weight:600}.set-desc{font-weight:400;font-size:12px;line-height:1.7}.levels{border:0;background:var(--panel);padding:4px}.levels button{font-weight:500}.levels button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 3px #235fe20a}.login-day,.login-stat{box-shadow:none}.tapstart{background:var(--bg)}.tapstart .ts-text{color:var(--fg);font-weight:600}
/* TacoBeat: keep the stage dark, remove ornamental chrome from controls. */
body:has(#modeSeg){--td-paper:#171c19;--td-surface:#242b25;--td-ink:#f4f2e9;--td-muted:#b8bcb1;--td-line:#3a443b;--td-accent:#b95234;--td-accent-soft:#43322a;--td-green:#81aa8d;font-family:var(--td-font)}
body:has(#modeSeg) .ovl{background:rgba(16,22,17,.95);backdrop-filter:blur(8px);gap:14px}body:has(#modeSeg) .ovl h1{text-shadow:none;letter-spacing:-.025em;font-weight:700;color:var(--td-ink)}body:has(#modeSeg) .ovl h1 em{color:#ddb675}body:has(#modeSeg) .setup-card,body:has(#modeSeg) .how-card,body:has(#modeSeg) .fail-card,body:has(#modeSeg) .pause-card{background:var(--td-surface);border:1px solid var(--td-line);box-shadow:none;border-radius:20px;padding:20px;gap:13px}body:has(#modeSeg) .setup-card{width:min(400px,95vw)}body:has(#modeSeg) .setup-icon{color:#ddb675;filter:none;font-size:24px}body:has(#modeSeg) .setup-icon .td-icon+.td-icon{display:none}body:has(#modeSeg) .setup-head{justify-content:flex-start;margin-bottom:8px}body:has(#modeSeg) .setup-head h1{font-size:24px}body:has(#modeSeg) .setup-head small{display:none}body:has(#modeSeg) .seg{background:#1d241e;border:1px solid var(--td-line);border-radius:10px;padding:4px;gap:4px}body:has(#modeSeg) .seg button{border-radius:7px;font-family:var(--td-font);font-weight:500;min-height:38px;font-size:13px;color:var(--td-muted)}body:has(#modeSeg) .seg button.on{background:#eee9da;color:#273327;box-shadow:none}body:has(#modeSeg) .seg .td-icon{display:none}body:has(#modeSeg) .tickd{font-family:var(--td-font);font-size:12px;color:var(--td-muted);letter-spacing:0}body:has(#modeSeg) .btn{background:var(--td-accent);border:1px solid transparent;box-shadow:none;border-radius:12px;font-family:var(--td-font);font-weight:600;font-size:15px;min-height:46px;text-shadow:none}body:has(#modeSeg) .btn.secondary{background:transparent;border:1px solid var(--td-line);color:var(--td-muted);box-shadow:none}body:has(#modeSeg) .btn.special{background:var(--td-accent);box-shadow:none}body:has(#modeSeg) .beat-wallet{background:none;border:0;padding:6px 0;box-shadow:none;color:var(--td-muted)}body:has(#modeSeg) .special-count,body:has(#modeSeg) .continue-hint,body:has(#modeSeg) .fail-copy{font-family:var(--td-font);font-size:12px;line-height:1.7;color:var(--td-muted)}body:has(#modeSeg) .special-count{color:#ffeadf}body:has(#modeSeg) .fail-card img{filter:none;width:110px}body:has(#modeSeg) .song-select{background:#1d241e;color:var(--td-ink);border:1px solid var(--td-line);border-radius:10px;font-family:var(--td-font)}body:has(#modeSeg) .how-item{background:transparent;border-color:var(--td-line)}body:has(#modeSeg) .hud .life{font-family:var(--td-font)}
@media(max-width:480px){.ttf-wrap{padding:0}.device{height:100dvh;border:0;border-radius:0;box-shadow:none}.view{padding:16px}.topbar{padding-left:16px;padding-right:16px}.title-wrap:has(.daily-entry){padding-top:0}.title-wrap:has(.daily-entry) .hero2-cut{height:170px;width:210px}.title-wrap:has(.daily-entry) .hero2-logo{width:175px}.special-wallet{font-size:10px}.lcard{padding:15px}.textcard{padding:17px}.topbar .logo{font-size:16px}}
@media(max-height:680px){body:has(#modeSeg) .setup-card{padding:14px;gap:7px}body:has(#modeSeg) .setup-head{min-height:32px;margin:0}body:has(#modeSeg) .seg button{min-height:32px}.title-wrap:has(.daily-entry) .hero2-cut{height:130px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):has(.ttf-wrap){--td-paper:#101b30;--td-surface:#192a45;--td-ink:#f4f8ff;--td-muted:#b8c9df;--td-line:#354b6b;--td-accent:#ff8062;--td-accent-soft:#422c31;--bg:var(--td-paper);--card:var(--td-surface);--fg:var(--td-ink);--fg-soft:#dce8f8;--panel:#203552;--green:#4ae0ad;--green-soft:#123d35;--green-ink:#8aefc9;--border-soft:#203552;--faint:#a9bfd9;--red-soft:#472533;--red-ink:#ffb4c2}}
:root[data-theme="dark"]:has(.ttf-wrap){--td-paper:#101b30;--td-surface:#192a45;--td-ink:#f4f8ff;--td-muted:#b8c9df;--td-line:#354b6b;--td-accent:#ff8062;--td-accent-soft:#422c31;--bg:var(--td-paper);--card:var(--td-surface);--fg:var(--td-ink);--fg-soft:#dce8f8;--panel:#203552;--green:#4ae0ad;--green-soft:#123d35;--green-ink:#8aefc9;--border-soft:#203552;--faint:#a9bfd9;--red-soft:#472533;--red-ink:#ffb4c2}
@media(prefers-reduced-motion:reduce){.lcard,.step,.td-icon{animation:none!important;transition:none!important}.view{scroll-behavior:auto}}
.topbar.in-activity .special-wallet{display:none}.topbar.in-activity .st{flex:1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.9em}.topbar.in-activity .sp{display:none}.ds-materials{border-top:1px solid var(--border);padding-top:16px;margin-top:22px;color:var(--muted);font-size:13px}.ds-materials>summary{cursor:pointer;padding:8px 0;font-weight:550}.ds-materials>.textcard,.ds-materials>.songcard{margin:12px 0}.ds-materials .songcard{flex-wrap:wrap}.ds-materials .songcard .go{margin-left:auto;font-size:12px}.ds-materials .songcard .tx{flex:1;min-width:170px}.ing-line{display:block}.ing-line .ds-progress{width:100%}[role=button]:focus-visible{outline:3px solid var(--td-focus);outline-offset:3px}
.vword{background:#df3035;box-shadow:none;font-weight:650}.vword::before{background:#00a976;filter:none}.vword::after{background:#00a976}.vword.done{background:var(--accent-soft);color:var(--accent-dark);box-shadow:none}.vword.done::before{background:#00a976}.vword.done ruby rt{color:var(--fg);font-weight:500}.lyrics-acc summary{font-weight:550;font-size:13px}.songcard .t{font-weight:600}.songcard .s{font-weight:400}body:has(#modeSeg) .rescard{background:var(--td-surface);border:1px solid var(--td-line);box-shadow:none;border-radius:14px}body:has(#modeSeg) .rescard .k{font-family:var(--td-font);font-weight:500;letter-spacing:0}body:has(#modeSeg) .rescard .v{font-family:var(--td-font);text-shadow:none}body:has(#modeSeg) .grade{filter:none;text-shadow:none}
body:has(#modeSeg) .setup-card{grid-template-columns:minmax(0,1fr);min-width:0}body:has(#modeSeg) .setup-row,body:has(#modeSeg) .setup-actions,body:has(#modeSeg) .setup-wallet{min-width:0;max-width:100%}body:has(#modeSeg) .setup-row .seg,body:has(#modeSeg) .seg.speed-grid{width:100%;max-width:100%;min-width:0}body:has(#modeSeg) .seg button{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35}body:has(#modeSeg) .setup-actions{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}body:has(#modeSeg) .setup-actions .btn{min-width:0}.beat-wallet small{overflow-wrap:anywhere}
@media(max-width:400px){body:has(#modeSeg) .setup-card{padding:16px;gap:10px}body:has(#modeSeg) .setup-row .seg:not(.speed-grid) button{font-size:12px;min-height:44px;padding:6px 3px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .ttf-wrap .btn:not(.ghost):not(.soft),:root:not([data-theme="light"]) .ttf-wrap .daily-primary,:root:not([data-theme="light"]) .ttf-wrap .qhead .em{color:#101b30}}
:root[data-theme="dark"] .ttf-wrap .btn:not(.ghost):not(.soft),:root[data-theme="dark"] .ttf-wrap .daily-primary,:root[data-theme="dark"] .ttf-wrap .qhead .em{color:#101b30}
body:has(#modeSeg) .beat-tuning{border-top:1px solid var(--td-line);border-bottom:1px solid var(--td-line);padding:4px 0;min-width:0}body:has(#modeSeg) .beat-tuning>summary{cursor:pointer;padding:11px 2px;color:var(--td-muted);font:500 13px/1.5 var(--td-font)}body:has(#modeSeg) .beat-tuning .setup-row{margin:10px 0 16px}body:has(#modeSeg) .beat-tuning[open]{max-height:40dvh;overflow-y:auto}
@media(max-width:400px){body:has(#modeSeg) #modeSeg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}body:has(#modeSeg) #modeSeg button{font-size:13px;white-space:nowrap;min-height:44px}}

/* TacoBeat controls use the same paper, typography and actions as TacosParty.
   The stage itself keeps its own colors; these rules only style the overlays. */
body:has(#modeSeg){
  --td-paper:#f7faff;--td-surface:#ffffff;--td-ink:#192841;--td-muted:#586982;
  --td-line:#dce6f2;--td-accent:#df3035;--td-accent-soft:#fff0e8;--td-green:#007e5a;
  --td-panel:#edf3fc;--td-button-ink:#fff;
  background:var(--td-paper);
}
body:has(#modeSeg) .ovl{
  background:var(--td-paper);backdrop-filter:none;color:var(--td-ink);
  padding:calc(24px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  overflow:auto;overscroll-behavior:contain;touch-action:pan-y;gap:18px;
  justify-content:safe center;
}
body:has(#modeSeg) #startOvl{justify-content:flex-start}
body:has(#modeSeg) .setup-card,body:has(#modeSeg) .how-card,
body:has(#modeSeg) .fail-card,body:has(#modeSeg) .pause-card{
  width:100%;max-width:400px;max-height:none;flex:none;background:transparent;
  border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible;gap:20px;
}
body:has(#modeSeg) .setup-head{gap:13px;margin:5px 0 12px;min-height:56px}
body:has(#modeSeg) .setup-icon{
  width:50px;height:50px;display:grid;place-items:center;border-radius:15px;
  background:var(--td-accent-soft);color:var(--td-accent);font-size:28px;
}
body:has(#modeSeg) .beat-brand{display:block;font-size:10px;font-weight:600;letter-spacing:.055em;color:var(--td-muted);margin-bottom:6px}
body:has(#modeSeg) .setup-head h1{font-size:26px;letter-spacing:-.04em;line-height:1.15}
body:has(#modeSeg) .setup-row{display:grid;gap:8px}
body:has(#modeSeg) .tickd{font-size:12px;font-weight:550;text-transform:none;line-height:1.55;padding:0}
body:has(#modeSeg) .speed-now{color:var(--td-ink);font-size:11px;font-weight:500;float:right;margin-left:8px}
body:has(#modeSeg) .seg{background:var(--td-panel);border:0;padding:4px;gap:4px;border-radius:12px}
body:has(#modeSeg) .seg button{min-height:44px;border:0;font-size:13px;color:var(--td-muted);padding:8px 4px}
body:has(#modeSeg) .seg button.on{background:var(--td-surface);color:var(--td-ink);box-shadow:0 1px 3px #235fe20a}
body:has(#modeSeg) #modeSeg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
body:has(#modeSeg) #modeSeg button{white-space:nowrap;font-size:14px}
body:has(#modeSeg) .song-select{
  min-height:50px;width:100%;max-width:100%;font-size:14px;font-weight:550;
  background:var(--td-surface);color:var(--td-ink);border-color:var(--td-line);padding:10px 12px;
}
body:has(#modeSeg) .btn{
  min-height:50px;color:var(--td-button-ink);font-size:15px;line-height:1.5;
  background:var(--td-accent);border-radius:12px;letter-spacing:0;white-space:normal;
}
body:has(#modeSeg) .btn.secondary{color:var(--td-ink);border:1px solid var(--td-line);background:var(--td-surface)}
body:has(#modeSeg) .btn.special{color:var(--td-button-ink)}
body:has(#modeSeg) .setup-actions{grid-template-columns:minmax(0,1fr);gap:6px;padding:0;margin:0}
body:has(#modeSeg) #startBtn{min-height:54px;font-size:16px}
body:has(#modeSeg) #howBtn,body:has(#modeSeg) #startBackBtn{border:0;background:transparent;min-height:44px;color:var(--td-muted);font-size:13px}
body:has(#modeSeg) #songMeta{display:none}
body:has(#modeSeg) .beat-tuning{border-bottom:0;padding:0;margin-top:0}
body:has(#modeSeg) .beat-tuning>summary{padding:12px 0;font-weight:500;font-size:13px;text-align:left}
body:has(#modeSeg) .beat-tuning[open]{max-height:none;overflow:visible}
body:has(#modeSeg) #offVal{color:var(--td-ink)!important;font-family:var(--td-font)!important}
body:has(#modeSeg) .setup-wallet{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;padding:0;width:100%}
body:has(#modeSeg) .setup-wallet strong{font-size:12px;font-weight:550;color:var(--td-ink)}
body:has(#modeSeg) .setup-wallet small{font-size:11px;color:var(--td-muted)}
body:has(#modeSeg [data-m="easy"].on) .setup-wallet,
body:has(#modeSeg [data-m="normal"].on) .setup-wallet{display:none}
body:has(#modeSeg) .how-head{display:block;text-align:left;margin-bottom:16px}
body:has(#modeSeg) .how-head h1{font-size:24px}
body:has(#modeSeg) .how-lead{font-size:14px;line-height:1.8;color:var(--td-muted);margin-top:12px}
body:has(#modeSeg) .how-grid{gap:0}
body:has(#modeSeg) .how-item{padding:13px 0;border:0;border-bottom:1px solid var(--td-line);border-radius:0;color:var(--td-ink);gap:12px}
body:has(#modeSeg) .how-item .ico{color:var(--td-accent);font-size:23px;filter:none}
body:has(#modeSeg) .how-item b{font-size:14px;color:var(--td-ink);font-weight:600}
body:has(#modeSeg) .how-item small,body:has(#modeSeg) .how-foot{font-size:12px;color:var(--td-muted);line-height:1.75}
body:has(#modeSeg) .how-foot{margin-top:16px;text-align:left}
body:has(#modeSeg) .how-credit a{color:var(--td-accent)}
body:has(#modeSeg) #howCloseBtn{width:100%;margin-top:18px}
body:has(#modeSeg) #endOvl::before{display:none}
body:has(#modeSeg) .receipt{
  width:100%;max-width:400px;max-height:none;overflow:visible;flex:none;
  background:var(--td-surface);border:1px solid var(--td-line);box-shadow:none;
  padding:22px;border-radius:20px;color:var(--td-ink);font-family:var(--td-font);animation:none;
}
body:has(#modeSeg) .victory-banner{
  margin:0 0 8px;padding:0;background:none;border:0;border-radius:0;color:var(--td-muted);
  font-size:12px;font-weight:500;letter-spacing:.03em;text-shadow:none;box-shadow:none;animation:none;
}
body:has(#modeSeg) .endMascot{width:80px;filter:none;animation:none}
body:has(#modeSeg) .endEmoji{display:none}
body:has(#modeSeg) .receipt h1{color:var(--td-ink);font-size:23px;margin:8px 0 0;line-height:1.4}
body:has(#modeSeg) .result-score{text-align:center;margin:22px 0 18px;display:grid;gap:3px}
body:has(#modeSeg) .result-score>span,body:has(#modeSeg) .result-stats span{font-size:11px;font-weight:500;color:var(--td-muted)}
body:has(#modeSeg) .result-score strong{font-size:38px;font-weight:700;letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums}
body:has(#modeSeg) .result-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--td-line);border-bottom:1px solid var(--td-line);padding:14px 0}
body:has(#modeSeg) .result-stats>div{display:grid;gap:3px;text-align:center}
body:has(#modeSeg) .result-stats>div+div{border-left:1px solid var(--td-line)}
body:has(#modeSeg) .result-stats strong{font-size:23px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums}
body:has(#modeSeg) .receipt .rank{color:var(--td-green);font-size:13px;margin:16px 0 0;font-weight:600}
body:has(#modeSeg) .receipt .fc{color:var(--td-green);font-size:12px}
body:has(#modeSeg) .result-details{margin-top:16px;color:var(--td-muted);font-size:12px}
body:has(#modeSeg) .result-details>summary{cursor:pointer;line-height:1.7;padding:8px 0}
body:has(#modeSeg) .receipt-line{color:var(--td-ink);font-family:var(--td-font);font-size:13px;padding:5px 0}
body:has(#modeSeg) .dish-row{display:flex;color:var(--td-ink)}
body:has(#modeSeg) .dish-cap{color:var(--td-muted)}
body:has(#modeSeg) .end-actions{width:100%;max-width:400px;flex:none;gap:8px}
body:has(#modeSeg) .fail-card img{width:90px;margin:0 auto 12px}
body:has(#modeSeg) .fail-card h1,body:has(#modeSeg) .pause-card h1{font-size:24px}
body:has(#modeSeg) .fail-life{color:var(--td-accent);background:none;border:0;box-shadow:none;margin:12px 0;font-size:14px}
body:has(#modeSeg) .pause-card .big{color:var(--td-accent);font-size:28px;filter:none}
body:has(#modeSeg) .pause-card p{font:400 14px/1.8 var(--td-font);color:var(--td-muted);margin-top:12px}
body:has(#modeSeg) .fail-actions,body:has(#modeSeg) .pause-actions{width:100%;max-width:400px;flex:none}
body:has(#modeSeg) .special-count{color:var(--td-button-ink);font-size:11px}
body:has(#modeSeg) #continueBtn{order:-1}
@media(max-width:480px){body:has(#modeSeg) .ovl{padding-left:20px;padding-right:20px}body:has(#modeSeg) .device{border-radius:0}}
@media(max-height:680px){
  body:has(#modeSeg) .ovl{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));gap:12px}
  body:has(#modeSeg) .setup-card{gap:14px}body:has(#modeSeg) .setup-head{margin:0;min-height:50px}
  body:has(#modeSeg) .receipt{padding:18px}body:has(#modeSeg) .endMascot{width:60px}
  body:has(#modeSeg) .result-score{margin:15px 0}body:has(#modeSeg) .result-score strong{font-size:34px}
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body:has(#modeSeg){
  --td-paper:#101b30;--td-surface:#192a45;--td-ink:#f4f8ff;--td-muted:#b8c9df;
  --td-line:#354b6b;--td-accent:#ff8062;--td-accent-soft:#422c31;--td-green:#4ae0ad;
  --td-panel:#203552;--td-button-ink:#101b30;
}}

/* Fresh, colorful accents: keep white space and reserve strong fills for actions/selection. */
.ttf-wrap .topbar{background:var(--card)}
.ttf-wrap .topbar .logo .td-icon{background:var(--td-yellow);color:#bc2431;border-radius:8px;padding:3px;width:29px;height:29px}
.ttf-wrap .daily-primary,.ttf-wrap .btn:not(.ghost):not(.soft):not(.green){box-shadow:0 4px 12px #df30351c}
.ttf-wrap .ctab.on{background:var(--td-yellow);color:var(--td-yellow-ink);box-shadow:none}
.ttf-wrap .lcard.current{border-color:var(--border)}
.ttf-wrap .lcard.current .lnum,.ttf-wrap .step.current .node{background:var(--td-yellow);color:var(--td-yellow-ink)}
.ttf-wrap .step.current .sc{border-color:var(--accent)}
.ttf-wrap .levels button.on{background:var(--td-blue);color:#fff;box-shadow:none}
.ttf-wrap .footer-tabs .tab-btn.on{color:var(--accent);background:var(--accent-soft)}
.ttf-wrap .tm-crate{background:var(--td-yellow-soft)}
.ttf-wrap .tm-crate .cl{color:var(--td-yellow-ink)}
.ttf-wrap .songcard .td-icon{color:var(--td-blue)}
body:has(#modeSeg) .setup-icon{background:var(--td-yellow);color:#bc2431}
body:has(#modeSeg) .seg button.on{background:var(--td-blue);color:#fff;box-shadow:none}
body:has(#modeSeg) #courseSeg button.on{background:var(--td-yellow);color:var(--td-yellow-ink)}
body:has(#modeSeg) #modeSeg{background:transparent;padding:0;gap:8px}
body:has(#modeSeg) #modeSeg button{border:1px solid var(--td-line);background:var(--td-surface);color:var(--td-ink);border-radius:10px}
body:has(#modeSeg) #modeSeg button[data-m="easy"].on{background:var(--td-green);color:var(--td-button-ink);border-color:transparent}
body:has(#modeSeg) #modeSeg button[data-m="normal"].on{background:var(--td-blue);color:#fff;border-color:transparent}
body:has(#modeSeg) #modeSeg button[data-m="hard"].on{background:var(--td-accent);color:var(--td-button-ink);border-color:transparent}
body:has(#modeSeg) #modeSeg button[data-m="expert"].on{background:var(--td-purple);color:#fff;border-color:transparent;box-shadow:none}
body:has(#modeSeg) #startBtn,body:has(#modeSeg) #nextBtn{box-shadow:0 4px 12px #df303520}
body:has(#modeSeg) .receipt{border-top:4px solid var(--td-yellow)}
body:has(#modeSeg) .result-score strong{color:var(--td-blue)}
body:has(#modeSeg) .result-stats{background:var(--td-blue-soft);border:0;border-radius:12px}
body:has(#modeSeg) .result-stats>div+div{border-color:var(--td-line)}
body:has(#modeSeg) .result-stats strong{color:var(--td-blue)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--td-blue:#3065dc;--td-blue-soft:#1d3559;--td-yellow:#ffd45a;--td-yellow-soft:#3e3218;--td-yellow-ink:#573b00;--td-purple:#7942dc;--td-focus:#82b4ff}
  :root:not([data-theme="light"]) .ttf-wrap .tm-crate .cl{color:#ffe298}
  body:has(#modeSeg) .result-score strong,body:has(#modeSeg) .result-stats strong{color:#92b9ff}
}
:root[data-theme="dark"]{--td-blue:#3065dc;--td-blue-soft:#1d3559;--td-yellow-soft:#3e3218;--td-purple:#7942dc;--td-focus:#82b4ff}
:root[data-theme="dark"] .ttf-wrap .tm-crate .cl{color:#ffe298}

/* The existing back button keeps its normal destination, with a visible label and touch target. */
.ttf-wrap .topbar .back{width:auto;min-width:72px;min-height:44px;grid-auto-flow:column;align-items:center;justify-content:center;gap:2px;padding:0 8px;background:var(--td-blue-soft);color:var(--td-blue);font:600 12px var(--td-font);flex:none}
.ttf-wrap .topbar .back .td-icon{width:18px;height:18px}
:root[data-theme="dark"] body:has(#modeSeg){
  --td-paper:#101b30;--td-surface:#192a45;--td-ink:#f4f8ff;--td-muted:#b8c9df;
  --td-line:#354b6b;--td-accent:#ff8062;--td-accent-soft:#422c31;--td-green:#4ae0ad;
  --td-panel:#203552;--td-button-ink:#101b30;
}
:root[data-theme="dark"] body:has(#modeSeg) .result-score strong,
:root[data-theme="dark"] body:has(#modeSeg) .result-stats strong{color:#92b9ff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .ttf-wrap .topbar .back{color:#92b9ff}}
:root[data-theme="dark"] .ttf-wrap .topbar .back{color:#92b9ff}

.ttf-wrap .ts-tap,.ttf-wrap .ts-h1{color:var(--accent)}
.ttf-wrap .ts-note{color:var(--muted)}