:root { --card: #fffdf8; }
.site-nav { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem; padding:.7rem clamp(1rem,4vw,3rem); border-bottom:1px solid var(--line); background:var(--paper); }
.site-brand { font:600 1.2rem Georgia,serif; color:var(--navy); text-decoration:none; }
.site-nav>div { display:flex; flex-wrap:wrap; gap:.2rem; }
.site-nav button { padding:.55rem .7rem; min-height:44px; border:0; border-radius:9px; background:transparent; }
.site-nav button[aria-current="page"] { background:var(--navy); color:#fff; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid #a75b42; outline-offset:3px; }
.site-secondary { padding:.7rem 1rem; min-height:44px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--navy); font-weight:650; }
.phase-home { display:block; min-height:0; padding:0; color:var(--ink); background:none; }
.new-home { width:min(100% - 3rem,1060px); margin:0 auto; padding:3.8rem 0 1.6rem; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(240px,.8fr); gap:2.4rem 3rem; }
.home-copy .eyebrow { color:var(--burgundy); letter-spacing:.13em; font-size:.75rem; }
.new-home h1 { font:500 clamp(2rem,4.5vw,3.35rem)/1.32 Georgia,"Noto Sans TC",serif; max-width:17em; margin:.8rem 0 1.2rem; }
.home-intro { max-width:37em; font-size:1.05rem; }
.home-tools { color:var(--muted); font-size:.9rem; }
.home-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin:1.5rem 0; }
.home-actions button { min-height:48px; }
.release-note { border-left:3px solid var(--burgundy); padding:.2rem 0 .2rem 1rem; margin:1.4rem 0 0; }
.release-note p { margin:.35rem 0; }
.release-note small { color:var(--muted); }
.home-art { min-height:370px; display:flex; align-items:flex-end; padding:1.5rem; border-radius:110px 110px 16px 16px; background:linear-gradient(0deg,rgba(22,36,52,.92),rgba(22,36,52,.06)),url("cover.jpeg") center/cover; color:#fff8ed; }
.home-art span,.home-art small { font-size:.75rem; letter-spacing:.12em; }
.home-art p { font:500 2.6rem/1.1 Georgia,serif; margin:.65rem 0; }
.home-origin { grid-column:1/-1; border-top:1px solid var(--line); padding-top:1rem; max-width:760px; }
.home-origin h2 { font-size:1.2rem; font-weight:600; }
.home-origin p { color:var(--muted); }
.continue-learning { display:grid; grid-template-columns:1fr auto; gap:.2rem .7rem; width:100%; max-width:32rem; text-align:left; margin:.5rem 0 1.4rem; padding:1rem; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.continue-learning small { grid-column:1/-1; color:var(--muted); }
.catalog-explainer { color:var(--muted); font-size:.88rem; }
.phase-unit summary { display:block; min-height:48px; }
.phase-episode-button { align-items:center; min-height:66px; }
.phase-episode-button:disabled { background:#e5e3df; color:#616360; opacity:1; }
.phase-episode-button:disabled .phase-badge { background:#d4d3cf; color:#50534f; }
.phase-badge { font-size:.73rem; white-space:nowrap; }
.phase-settings { min-height:70vh; padding:1.5rem 1rem 2rem; }
.phase-settings h1 { font:500 2rem Georgia,serif; }
body.phase-settings-open { padding-bottom:0!important; }
body.phase-settings-open>.app-header,body.phase-settings-open>main,body.phase-settings-open>.mobile-player,body.phase-settings-open>footer { display:none!important; }
.settings-box { margin:1rem 0; padding:1.2rem; border:1px solid var(--line); border-radius:15px; background:var(--card); }
.settings-box h2 { font-size:1.2rem; margin:0 0 .7rem; }
.settings-box a { color:var(--burgundy); overflow-wrap:anywhere; }
.settings-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.site-footer { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.3rem 1rem; border-top:1px solid var(--line); padding:1rem 1rem max(1rem,env(safe-area-inset-bottom)); color:var(--muted); font-size:.8rem; }
.site-footer button { border:0; background:transparent; padding:.6rem .3rem; min-height:44px; text-decoration:underline; color:var(--muted); }
body:not(.phase-home-open):not(.phase-episode-open):not(.phase-review-open):not(.phase-settings-open) .site-footer { margin-bottom:7.5rem; }
dialog { color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.4rem; width:min(640px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); overscroll-behavior:contain; box-shadow:0 18px 70px #0004; }
dialog::backdrop { background:rgba(23,35,50,.7); backdrop-filter:blur(3px); }
dialog h2 { font-size:1.5rem; margin:.6rem 0 1rem; }
.legal-top,.tour-top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.legal-top small { color:var(--muted); font-size:.75rem; letter-spacing:.04em; }
.legal-top button { min-width:44px; min-height:44px; background:transparent; border:1px solid var(--line); border-radius:50%; }
#legalSections h3 { font-size:1rem; margin:1rem 0 .25rem; }
#legalSections p { font-size:.9rem; margin:.25rem 0; }
.legal-version { color:var(--muted); font-size:.75rem; }
.legal-agreement { display:flex; align-items:flex-start; gap:.65rem; padding:.8rem; background:var(--paper-deep); border-radius:10px; margin:1rem 0; font-size:.9rem; }
.legal-agreement input { width:20px; height:20px; flex-shrink:0; margin-top:3px; accent-color:var(--burgundy); }
#legalEnter { width:100%; min-height:48px; }
#legalEnter:disabled { opacity:.45; cursor:not-allowed; }
body:has(dialog[open]) { overflow:hidden; }
.tour-welcome { max-width:440px; }
.tour-dialog { position:fixed; margin:0; inset:auto; width:min(390px,calc(100% - 2rem)); overflow:visible; border:0; background:transparent; box-shadow:none; padding:0; }
.tour-dialog::backdrop { background:transparent; backdrop-filter:none; }
.tour-dialog>*:not(.tour-spotlight) { position:relative; z-index:1; }
.tour-dialog { color:#fff4db; font-family:"Kaiti TC","STKaiti",cursive; }
.tour-dialog h2 { font:500 1.5rem/1.45 "Kaiti TC","STKaiti",cursive; margin:.7rem 0; }
.tour-dialog p { margin:.4rem 0 1rem; font-size:1rem; }
.tour-top { font:400 .8rem/1.5 system-ui,sans-serif; }
.tour-top button { border:0; color:#fff4db; background:transparent; min-height:44px; text-decoration:underline; }
.tour-controls { display:flex; justify-content:space-between; gap:.7rem; font-family:system-ui,sans-serif; }
.tour-controls button { min-height:44px; }
.tour-controls .primary-button { border:1px solid #f5dfb8; background:#f5dfb8; color:var(--navy); }
.tour-spotlight { position:fixed; border:3px solid #ffe19b; border-radius:22% 6% 18% 8% / 9% 22% 10% 17%; box-shadow:0 0 0 150vmax rgba(18,29,44,.84); pointer-events:none; z-index:0; }
.tour-sketch { width:62px; height:55px; border-top:3px solid #ffe19b; border-right:3px solid #ffe19b; border-radius:0 85% 0 0; transform:rotate(-20deg); margin:0 auto 10px; }
.tour-sketch:before { content:""; position:absolute; left:-2px; top:-8px; width:15px; height:15px; border-top:3px solid #ffe19b; border-left:3px solid #ffe19b; transform:rotate(-35deg); }
.tour-dialog.arrow-down .tour-sketch { transform:rotate(150deg); }
.install-heading { display:flex; align-items:center; gap:.85rem; margin-bottom:.7rem; }
.install-heading img { border-radius:13px; flex-shrink:0; }
.install-heading h2 { margin:0; }
.install-steps { counter-reset:install-step; padding:0; list-style:none; }
.install-steps li { counter-increment:install-step; position:relative; padding:.8rem .5rem .8rem 3.2rem; border-bottom:1px solid var(--line); }
.install-steps li::before { content:counter(install-step); position:absolute; left:.1rem; top:.8rem; display:grid; place-items:center; width:2rem; height:2rem; color:var(--burgundy); border:2px solid currentColor; border-radius:45% 54% 43% 52%; transform:rotate(-7deg); font-family:Georgia,serif; }
.install-footnote { color:var(--muted); font-size:.85rem; }
#installResult { padding:.75rem; background:var(--paper-deep); border-radius:10px; }
.install-dialog .legal-top button { min-width:44px; min-height:44px; border:1px solid var(--line); background:transparent; border-radius:50%; }
@media(max-width:820px) { .new-home { grid-template-columns:minmax(0,1fr) minmax(190px,.65fr); gap:1.5rem; padding-top:2rem; }.home-art{min-height:330px}.home-actions{gap:.5rem}.home-actions button{font-size:.9rem;padding:.7rem .8rem} }
@media(max-width:540px) { .site-nav{padding:.6rem .75rem;gap:.4rem}.site-brand{font-size:1rem}.site-nav button{padding:.5rem .55rem;font-size:.85rem}.new-home{width:calc(100% - 2rem);grid-template-columns:1fr;padding-top:1.4rem;gap:1.2rem}.home-art{min-height:210px;border-radius:70px 70px 12px 12px;grid-row:2;padding:1.2rem}.home-art p{font-size:2rem}.new-home h1{font-size:2.05rem;line-height:1.38}.home-intro{font-size:1rem}.home-origin{grid-row:3}.phase-sources{grid-template-columns:1.2fr 1fr}.phase-episode-button{grid-template-columns:minmax(0,1fr) auto;padding:.85rem .7rem;font-size:.9rem}.phase-badge{font-size:.7rem}dialog{padding:1rem;width:calc(100% - 1rem);max-height:calc(100dvh - 1rem)}.legal-agreement{padding:.6rem} }
/* Keep foreground controls clear of the iPhone status / gesture areas in both modes. */
html { background:var(--paper); }
.site-nav { padding-top:calc(.7rem + env(safe-area-inset-top,0px)); padding-left:max(1rem,env(safe-area-inset-left,0px)); padding-right:max(1rem,env(safe-area-inset-right,0px)); }
.app-header { padding-left:max(1rem,env(safe-area-inset-left,0px)); padding-right:max(1rem,env(safe-area-inset-right,0px)); }
dialog:not(.tour-dialog) { max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 1rem); }
@media(max-width:820px) { .mobile-player { left:max(.65rem,env(safe-area-inset-left,0px)); right:max(.65rem,env(safe-area-inset-right,0px)); } }
@media(display-mode:standalone) { body { min-height:100dvh; } }