:root{--night:#04140c;--night2:#0b2818;--paper:#fbfdfb;--ink:#112119;--muted:#65736b;--green:#0d4b35;--green2:#1f9859;--lime:#9af483;--red:#c74331;--line:#d8e3db;--gold:#e0b34f;--glow:rgba(111,255,147,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,#16462a 0,transparent 28rem),linear-gradient(180deg,var(--night),var(--night2) 55%,#050f09);color:#fff;font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}.hidden{display:none!important}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(127,255,161,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(127,255,161,.028) 1px,transparent 1px);background-size:48px 48px}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px clamp(16px,4vw,42px);background:rgba(5,17,10,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(154,244,131,.18)}.brand{display:flex;align-items:center;gap:9px;font-weight:950;letter-spacing:.02em}.brand-ball{font-size:22px}.userbox{display:flex;align-items:center;gap:10px}#user-chip{font-size:13px;color:#d9f1e2;max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main{position:relative;z-index:1;width:min(1280px,calc(100% - 28px));margin:0 auto;padding:28px 0 72px}.eyebrow{margin:0 0 9px;color:var(--lime);font-size:12px;font-weight:950;letter-spacing:.14em}.primary,.ghost,.back-btn,.link-btn,.tab{border:0;border-radius:11px;padding:11px 15px;font-weight:900}.primary{background:linear-gradient(135deg,var(--green2),var(--green));color:#fff;box-shadow:0 10px 24px rgba(14,82,51,.22)}.ghost,.back-btn{background:#fff;color:var(--ink);border:1px solid var(--line)}.link-btn{background:transparent;color:#bce8ca}.full{width:100%}.message{min-height:20px;margin-top:8px;color:#ff9c8e;font-size:13px}.message.ok{color:var(--lime)}
.card{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:24px}.narrow{width:min(580px,100%);margin:12vh auto}.auth-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;min-height:74vh;align-items:center}.auth-hero h1{font-size:clamp(42px,5.4vw,74px);line-height:1.02;letter-spacing:-.04em;margin:8px 0}.auth-hero p{color:#b8d2c0;line-height:1.8;font-size:17px}.login-card h2{font-size:30px;margin-top:0}.login-card hr{border:0;border-top:1px solid var(--line);margin:18px 0}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#eef3ef;border-radius:11px;padding:4px}.tab{background:transparent;color:var(--ink)}.tab.active{background:#fff;box-shadow:0 3px 9px rgba(0,0,0,.07)}.login-card label{display:grid;gap:7px;margin:13px 0;font-weight:800}.login-card input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px}
.hall-hero-poster,.books-poster-wrap{background:#03130c;border:1px solid rgba(224,179,79,.42);border-radius:20px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.24)}.hall-hero-poster img{display:block;width:100%;height:auto}.books-wide-poster{display:block;width:100%;max-height:720px;object-fit:contain;background:#03130c}.hall-copy{padding:24px 4px 12px}.hall-copy h1{margin:0 0 8px;font-size:clamp(30px,4vw,52px)}.hall-copy p:not(.eyebrow){margin:0;color:#cce2d3;line-height:1.7}.hall-message{margin:6px 0 16px;padding:0 4px;font-weight:800}
.courts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.court-card{position:relative;border:1px solid rgba(224,179,79,.48);border-radius:18px;padding:0;background:#061a10;overflow:hidden;box-shadow:0 15px 35px rgba(0,0,0,.2);transition:.18s transform,.18s border-color,.18s box-shadow;text-align:left}.court-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.court-card:hover{transform:translateY(-4px);border-color:#f2c962;box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 26px rgba(224,179,79,.14)}.court-card.recommended:after{content:"建議起點";position:absolute;left:12px;top:12px;background:linear-gradient(135deg,#f5d57c,#b98625);color:#172017;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:950;box-shadow:0 5px 18px rgba(0,0,0,.2)}.court-card.unavailable img{filter:saturate(.72) brightness(.72)}.coming-badge{position:absolute;right:12px;top:12px;background:rgba(7,22,13,.9);border:1px solid #d6ad51;color:#ffe3a0;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:950}
.back-btn{margin:0 0 16px}.books-poster-wrap{margin-bottom:22px}.court-toolbar{display:grid;grid-template-columns:1fr minmax(260px,360px);gap:24px;align-items:center;margin:12px 0 18px}.court-toolbar h1{margin:2px 0 6px;font-size:clamp(32px,4vw,50px)}.court-toolbar p:not(.eyebrow){color:#cce2d3;line-height:1.6}.badball-tools{display:grid;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(224,179,79,.28);border-radius:15px;padding:14px}.badball-tools small{color:#bcd1c3;line-height:1.5}.badball-entry{border:1px solid #e0b34f;border-radius:11px;background:#0d3d28;color:#ffe2a0;font-weight:950;padding:12px}.path-note{background:#fff8e8;color:#594217;border:1px solid #ead6a5;border-radius:14px;padding:13px 15px;margin-bottom:16px}.books-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.book-card{position:relative;border:1px solid rgba(255,255,255,.18);background:#f9fcfa;color:var(--ink);border-radius:18px;padding:10px;text-align:left;transition:.18s}.book-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}.book-cover-wrap{aspect-ratio:.68;overflow:hidden;border-radius:12px;background:#eaf0eb;border:1px solid var(--line)}.book-cover{width:100%;height:100%;object-fit:cover}.book-code{display:inline-block;margin-top:10px;background:var(--green);color:#fff;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:950}.book-title{font-weight:950;font-size:17px;margin:7px 0 3px}.book-order{font-size:12px;color:var(--muted)}.book-count{margin-top:7px;font-size:12px;font-weight:900;color:#356a4d}
.panel-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-bottom:18px}.panel-head .back-btn{margin:0}.panel-head h1{margin:2px 0 5px;font-size:clamp(28px,4vw,46px)}.panel-head p:not(.eyebrow){margin:0;color:#cce2d3}.score-chip{display:inline-grid;place-items:center;min-width:86px;padding:10px 13px;border-radius:999px;background:#0c3b27;border:1px solid #d4ad53;color:#ffe6a8;font-weight:950}
.practice-card,.result-card{background:#f8fbf8;color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,3vw,34px);box-shadow:0 24px 65px rgba(0,0,0,.28)}.practice-card{width:min(920px,100%);margin:0 auto}.question-kicker{margin:0 0 18px;color:#6e5630;font-weight:950}.question-word-row{display:flex;justify-content:center;align-items:center;gap:22px;margin:25px 0}.question-word{font-size:clamp(54px,8vw,92px);line-height:1;font-weight:900;letter-spacing:-.03em}.phonetic{text-align:center;color:var(--muted);margin-top:10px}.sound-btn{width:54px;height:54px;border:0;border-radius:50%;background:#0b402a;color:#fff;font-size:22px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-btn{display:flex;align-items:center;gap:12px;min-height:78px;border:1px solid #cbd7ce;border-radius:14px;background:#fff;color:var(--ink);padding:14px 18px;font-size:19px;font-weight:850;text-align:left}.choice-btn span{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:10px;background:#e9f1eb;color:#0c4c33;font-weight:950}.choice-btn:hover{border-color:#21925a;box-shadow:0 0 0 2px rgba(31,152,89,.12)}.answer-feedback{margin-top:18px;min-height:24px;padding:0;line-height:1.6}.answer-feedback.good,.answer-feedback.bad{border-radius:14px;padding:14px}.answer-feedback.good{background:#e9f8ee;color:#0e683b}.answer-feedback.bad{background:#fff0ed;color:#a23425}.next-btn{display:block;margin-top:12px}.question-meaning{font-size:clamp(42px,7vw,72px);font-weight:950;text-align:center;margin:28px 0}.spelling-form{display:grid;gap:9px}.spelling-form label{font-weight:900}.spelling-row{display:grid;grid-template-columns:1fr auto;gap:10px}.spelling-row input{min-width:0;padding:15px 16px;border:2px solid #cbd7ce;border-radius:12px;font-size:22px}.spelling-row input:focus{outline:0;border-color:#1f9859;box-shadow:0 0 0 3px rgba(31,152,89,.13)}.hint-row{display:flex;align-items:center;gap:12px;margin-top:15px}.hint-text{font-weight:900;color:#775d2e}
.matching-card{width:min(1050px,100%)}.matching-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.matching-title-row h2{margin:0}.matching-board{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.matching-column{display:grid;gap:9px}.matching-column h3{margin:0 0 3px;color:#5e6c63}.match-btn{display:flex;align-items:center;gap:12px;min-height:58px;border:1px solid #cbd7ce;border-radius:12px;background:#fff;color:var(--ink);padding:11px 14px;text-align:left;font-weight:850}.match-btn span{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#edf2ee;color:#0d4b35;font-weight:950}.match-btn.active{border-color:#d0a13a;box-shadow:0 0 0 3px rgba(224,179,79,.18)}.match-btn.paired{background:#eaf6ee;border-color:#65a87f}.matching-summary{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px}.matching-summary span{background:#edf3ee;border-radius:999px;padding:6px 10px;font-size:12px;color:#365543}
.result-card{width:min(820px,100%);margin:4vh auto}.result-card h1{font-size:clamp(40px,6vw,64px);margin:6px 0 22px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.result-stats div{background:#edf4ef;border-radius:16px;padding:18px;text-align:center}.result-stats strong{display:block;font-size:36px;color:#0d4b35}.result-stats span{display:block;color:var(--muted);margin-top:4px}.wrong-list{display:grid;gap:9px}.wrong-list article{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px}.wrong-list span{color:#5c6860}.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.badball-head h1{font-size:clamp(36px,5vw,58px);margin:0 0 8px}.badball-head p:not(.eyebrow){color:#cce2d3}.badball-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.badball-list article{display:grid;gap:5px;background:#f8fbf8;color:var(--ink);border-radius:14px;padding:14px}.badball-list strong{font-size:20px}.badball-list span{color:#4d6054}.badball-list small{color:#8b6a2f}.empty-state{grid-column:1/-1;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.22);border-radius:14px;padding:26px;text-align:center;color:#cde0d3}
@media(max-width:1050px){.books-grid{grid-template-columns:repeat(3,1fr)}.courts-grid{grid-template-columns:repeat(2,1fr)}.badball-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.auth-layout,.court-toolbar{grid-template-columns:1fr}.panel-head{grid-template-columns:1fr auto}.panel-head .back-btn{grid-column:1/-1;width:max-content}.matching-board{grid-template-columns:1fr}.wrong-list article{grid-template-columns:1fr}.books-wide-poster{max-height:none}}
@media(max-width:560px){main{width:min(100% - 16px,1280px);padding-top:16px}.topbar{padding:11px 10px}.brand{font-size:13px}.brand-ball{font-size:18px}.courts-grid{grid-template-columns:1fr 1fr;gap:9px}.court-card{border-radius:13px}.court-card.recommended:after,.coming-badge{font-size:10px;padding:5px 7px;top:7px}.court-card.recommended:after{left:7px}.coming-badge{right:7px}.books-grid{grid-template-columns:1fr 1fr;gap:9px}.book-title{font-size:14px}.book-order{font-size:10px}.book-count{font-size:10px}.choice-grid{grid-template-columns:1fr}.question-word{font-size:54px}.question-meaning{font-size:42px}.spelling-row{grid-template-columns:1fr}.matching-title-row{align-items:flex-start}.result-stats{grid-template-columns:1fr}.badball-list{grid-template-columns:1fr}.practice-card,.result-card{padding:16px}.books-poster-wrap,.hall-hero-poster{border-radius:12px}}

/* P3 Day 1 UX Hotfix */
.practice-ux-tools{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 16px}.practice-round-badball{display:inline-flex;align-items:center;min-height:42px;padding:9px 13px;border:1px solid rgba(224,179,79,.45);border-radius:999px;background:rgba(7,35,22,.72);color:#ffe5a5;font-weight:900}.practice-sound-toggle{min-height:42px;padding:9px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:#f5f8f5;color:#143a29;font-weight:900}.speech-tools,.reveal-speech-tools{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.speech-tools{flex-direction:column}.speech-btn{min-height:42px;padding:9px 13px;border:1px solid #b8c9bd;border-radius:999px;background:#0b402a;color:#fff;font-size:14px;font-weight:900;white-space:nowrap}.speech-btn:hover{background:#12613f}.reveal-speech-tools{justify-content:flex-start;margin-top:12px}.reveal-speech-tools .speech-btn{background:#fff;color:#0b402a;border-color:#8fb29e}.reveal-speech-tools .speech-btn:hover{background:#edf6f0}
@media(max-width:560px){.practice-ux-tools{justify-content:stretch}.practice-round-badball,.practice-sound-toggle{flex:1 1 auto;justify-content:center}.question-word-row{align-items:flex-start;gap:12px}.speech-tools{align-items:stretch}.speech-btn{font-size:13px;padding:8px 10px}}

/* L4/L5 sentence courts */
.sentence-card{display:grid;gap:16px}.sentence-scenario{display:inline-flex;justify-self:start;padding:7px 11px;border-radius:999px;background:#f0eadc;color:#725a30;font-weight:850;font-size:14px}.sentence-prompt{font-size:clamp(30px,5vw,52px);font-weight:950;line-height:1.35;text-align:center;padding:18px 8px}.sentence-target{display:grid;gap:4px;justify-items:center;padding:14px;border-radius:16px;background:#eef6f0}.sentence-target span{font-size:13px;font-weight:900;color:#597062}.sentence-target strong{font-size:clamp(30px,5vw,48px);line-height:1.15;color:#0c4c33}.sentence-target small{font-size:15px;color:#6c756f}.sentence-target.compact strong{font-size:clamp(26px,4vw,40px)}.sentence-image-wrap{display:grid;place-items:center;background:#fff;border:1px solid #d8e1da;border-radius:18px;padding:12px;min-height:210px}.sentence-image{display:block;max-width:100%;width:auto;max-height:360px;object-fit:contain;border-radius:12px}.sentence-form{display:grid;gap:9px}.sentence-form label{font-weight:900}.sentence-form textarea{width:100%;resize:vertical;min-height:112px;padding:15px 16px;border:2px solid #cbd7ce;border-radius:12px;font:inherit;font-size:20px;line-height:1.5}.sentence-form textarea:focus{outline:0;border-color:#1f9859;box-shadow:0 0 0 3px rgba(31,152,89,.13)}.sentence-reference{margin-top:8px;font-weight:850}.sentence-reasons{margin-top:8px}.sentence-card .next-btn{width:max-content}.sentence-card .answer-feedback{word-break:break-word}
@media(max-width:560px){.sentence-image-wrap{min-height:160px;padding:8px}.sentence-image{max-height:270px}.sentence-form textarea{font-size:18px;min-height:104px}.sentence-card .next-btn{width:100%}}


/* L6 mixed court */
.mixed-setup{grid-column:1/-1;display:grid;gap:18px;width:100%}.mixed-section{background:#f8fbf8;color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:clamp(16px,2.5vw,26px)}.mixed-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.mixed-section-head h2{margin:2px 0 6px;font-size:clamp(24px,3vw,34px)}.mixed-section-head p:not(.eyebrow){margin:0;color:var(--muted)}.mixed-inline-actions{display:flex;gap:8px;flex-wrap:wrap}.mixed-inline-actions .ghost{padding:8px 11px}.mixed-book-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.mixed-book-option,.mixed-mode-option{position:relative;display:grid;gap:7px;border:2px solid #d5dfd7;border-radius:15px;background:#fff;padding:10px;cursor:pointer;transition:.16s}.mixed-book-option:hover,.mixed-mode-option:hover{border-color:#72ad87;transform:translateY(-1px)}.mixed-book-option input,.mixed-mode-option input{position:absolute;opacity:0;pointer-events:none}.mixed-book-option:has(input:checked),.mixed-mode-option:has(input:checked){border-color:#1f9859;background:#edf8f0;box-shadow:0 0 0 2px rgba(31,152,89,.1)}.mixed-check{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#dce6df;color:#6d7a71;font-weight:950}.mixed-book-option:has(input:checked) .mixed-check,.mixed-mode-option:has(input:checked) .mixed-check{background:#16864d;color:#fff}.mixed-book-option img{width:100%;aspect-ratio:.68;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.mixed-book-option strong{font-size:14px}.mixed-book-option small{color:var(--muted);font-size:11px;line-height:1.45}.mixed-mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mixed-mode-option{min-height:74px;align-content:center;padding:16px 44px 16px 16px}.mixed-mode-option strong{font-size:16px}.mixed-launch{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#0b3e28,#0d5a38);border:1px solid rgba(224,179,79,.45);border-radius:20px;padding:20px 22px}.mixed-launch .eyebrow{margin-bottom:5px}.mixed-launch strong{display:block;font-size:20px}.mixed-launch small{display:block;margin-top:5px;color:#cfe6d7}.mixed-launch .primary{background:#fff;color:#0b4b31;white-space:nowrap}
@media(max-width:1050px){.mixed-book-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.mixed-section-head,.mixed-launch{align-items:stretch;flex-direction:column}.mixed-mode-grid{grid-template-columns:1fr 1fr}.mixed-launch .primary{width:100%}}
@media(max-width:560px){.mixed-book-grid,.mixed-mode-grid{grid-template-columns:1fr 1fr}.mixed-section{padding:13px}.mixed-book-option strong{font-size:13px}.mixed-mode-option{min-height:66px;padding:13px 38px 13px 12px}.mixed-mode-option strong{font-size:14px}}