*{box-sizing:border-box}
:root{--purple:#7057d9;--purple2:#8b6fe8;--ink:#332d2b;--muted:#746d78;--paper:#fffdf8;--pink:#ff6f91;--yellow:#ffc83d;--green:#63b44b;--blue:#3597d4;--line:#ebe5f2;--shadow:0 14px 35px rgba(76,55,130,.13)}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Arial Rounded MT Bold","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:#faf8ff}
button,select{font:inherit}
button{touch-action:manipulation}
.topbar{height:74px;padding:10px max(16px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:12px;background:white;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.brand-icon{font-size:30px}.brand b{display:block;font-size:18px;color:var(--purple)}.brand small{display:block;color:var(--muted)}
.top-actions{display:flex;gap:12px;align-items:center}.speed,.mode-toggle{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--muted)}
select{padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:white}
.mode-toggle input{accent-color:var(--purple);width:18px;height:18px}
main{max-width:1180px;margin:auto;padding:24px 18px 55px}.view{animation:fade .22s ease}@keyframes fade{from{opacity:.4;transform:translateY(5px)}}
.hidden{display:none!important}
.hero{border-radius:28px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#755dde,#a275df);color:white;box-shadow:var(--shadow);overflow:hidden}
.hero h1{font-size:clamp(29px,5vw,52px);margin:4px 0 10px}.hero p{margin:0;opacity:.95}.kicker{font-size:13px;font-weight:900;letter-spacing:.11em}.hero-characters{font-size:clamp(54px,10vw,105px);white-space:nowrap;filter:drop-shadow(0 8px 7px rgba(45,30,90,.2))}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:31px 2px 15px}.section-head h2{margin:0 0 4px}.section-head p{margin:0;color:var(--muted)}
.week-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:15px}
.week-card{border:1px solid var(--line);background:white;border-radius:21px;padding:18px;text-align:left;cursor:pointer;box-shadow:0 5px 15px rgba(76,55,130,.06);transition:.18s;position:relative;overflow:hidden;min-height:164px}
.week-card:hover,.week-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow);outline:3px solid #ded5ff}
.week-card .number{display:inline-grid;place-items:center;width:43px;height:43px;border-radius:50%;color:white;font-weight:900;background:var(--purple)}
.week-card:nth-child(5n+2) .number{background:#ef6b84}.week-card:nth-child(5n+3) .number{background:#f0ad15}.week-card:nth-child(5n+4) .number{background:#55a93f}.week-card:nth-child(5n) .number{background:#268bc9}
.week-card h3{margin:14px 0 5px;font-size:18px}.week-card p{margin:0;color:var(--muted);font-size:14px}.week-card .status{position:absolute;right:13px;top:13px;font-size:12px;background:#f4f1ff;color:var(--purple);padding:5px 8px;border-radius:99px}
.week-card .arrow{position:absolute;right:16px;bottom:10px;color:#c9bee9;font-size:33px}
.primary,.secondary,.crumbs button,.audio-buttons button,.navigation button,.known-button{border:0;border-radius:13px;padding:11px 16px;font-weight:900;cursor:pointer}
.primary{background:var(--purple);color:white}.primary:hover{background:#5d45c0}.secondary{background:white;color:var(--purple);border:1px solid #dcd3f5}.secondary.active{background:#eee9ff}
.crumbs{display:flex;align-items:center;gap:12px;color:var(--muted);margin-bottom:15px}.crumbs button{background:white;color:var(--purple);padding:9px 12px}.crumbs span{font-weight:800}
.week-banner{padding:25px 28px;background:white;border-radius:23px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 7px 20px rgba(76,55,130,.07)}
.week-banner h1{margin:4px 0;font-size:clamp(28px,4vw,42px);color:var(--purple)}.week-banner p{margin:0;color:var(--muted)}
.progress-box{min-width:205px}.progress-box span{font-size:13px;color:var(--muted)}.progress-box b{float:right}.progress-track{height:10px;background:#eee9f7;border-radius:99px;margin-top:9px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffc84a,#ff7b8f);border-radius:99px;transition:.3s}
.mode-buttons{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:15px}
.flashcard{border:1px solid var(--line);border-radius:19px;background:white;overflow:hidden;box-shadow:0 5px 17px rgba(76,55,130,.08);position:relative;transition:.17s}
.flashcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.flashcard.known{outline:3px solid #ffd15b}.flashcard.known:after{content:"★";position:absolute;top:8px;right:9px;background:white;border-radius:50%;padding:3px;color:#f6b900}
.card-image-button{display:block;width:100%;aspect-ratio:4/5;border:0;background:#fff;cursor:pointer;padding:0}.card-image{width:100%;height:100%;object-fit:contain;display:block}
.fallback{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#fff7df,#f0ecff);font-size:73px}
.card-content{padding:12px 13px 14px}.card-no{font-size:11px;color:var(--muted)}.word-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;margin-top:6px}.english{font-weight:900;color:#322c80;font-size:17px}.chinese{font-size:15px}.speak-button{width:34px;height:34px;border:0;border-radius:50%;background:#f0ecff;cursor:pointer}
.study-shell{max-width:680px;margin:auto}.study-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.study-top>span{font-weight:900;color:var(--muted)}.known-button{background:white;color:#e7a900;border:1px solid #f5d775}.known-button.on{background:#fff3bd}
.study-card{width:100%;border:1px solid var(--line);background:white;border-radius:28px;overflow:hidden;padding:0;cursor:pointer;box-shadow:var(--shadow)}
.study-card img,.study-fallback{width:100%;height:min(57vh,590px);object-fit:contain;background:white}.study-fallback{display:grid;place-items:center;font-size:120px;background:linear-gradient(145deg,#fff8e3,#f0edff)}
.study-words{padding:17px 20px 20px;border-top:1px solid var(--line)}.study-words h2{font-size:clamp(28px,6vw,45px);color:#302879;margin:0 0 5px}.study-words p{font-size:clamp(20px,4vw,29px);margin:0}.tap-hint{display:block;color:var(--muted);font-size:13px;margin-top:8px}
.audio-buttons{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px;margin-top:13px}.audio-buttons button{background:white;color:var(--purple);border:1px solid #ded5f6}.audio-buttons .primary{background:var(--purple);color:white}
.navigation{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:14px}.navigation button{background:white;color:var(--purple)}.dots{height:7px;background:#ece7f7;border-radius:99px;overflow:hidden}.dots i{display:block;height:100%;background:var(--purple);transition:.2s}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#332c45;color:white;padding:11px 17px;border-radius:99px;opacity:0;pointer-events:none;transition:.22s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}
footer{text-align:center;color:var(--muted);padding:0 16px 30px;font-size:13px}
body.student .card-content,body.student .study-words p,body.student .card-no{display:none}body.student .card-image-button{aspect-ratio:1/1.1}body.student .study-card img,body.student .study-fallback{height:min(70vh,660px)}
@media(max-width:650px){.topbar{height:auto;align-items:flex-start}.brand small{display:none}.top-actions{flex-direction:column;align-items:flex-end;gap:5px}.mode-toggle,.speed{font-size:12px}main{padding:13px 10px 42px}.hero{padding:23px 19px;border-radius:21px}.hero-characters{display:none}.section-head{align-items:flex-start}.week-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.week-card{min-height:148px;padding:13px}.week-card h3{font-size:15px}.week-banner{padding:17px;display:block}.progress-box{margin-top:16px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card-content{padding:9px}.english{font-size:14px}.chinese{font-size:13px}.mode-buttons button{flex:1;padding:10px 8px;font-size:13px}.audio-buttons{grid-template-columns:1fr 1fr}.audio-buttons .primary{grid-column:1/-1}.navigation button{font-size:13px;padding:10px}.study-card img,.study-fallback{height:55vh}}

.next-week-button{
  display:block;
  width:min(100%,520px);
  margin:18px auto 0;
  padding:16px 22px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#6c55e8,#8b72ff);
  color:#fff;
  font-size:1.1rem;
  font-weight:800;
  box-shadow:0 10px 24px rgba(108,85,232,.25);
  cursor:pointer;
}
.next-week-button:hover{transform:translateY(-1px)}
.next-week-button.hidden{display:none}


.grid-next-week-button{
  display:block;
  width:min(100%,520px);
  margin:26px auto 4px;
  padding:16px 22px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#6c55e8,#8b72ff);
  color:#fff;
  font-size:1.08rem;
  font-weight:900;
  box-shadow:0 10px 24px rgba(108,85,232,.25);
  cursor:pointer;
}
.grid-next-week-button:hover{transform:translateY(-1px)}

/* 家庭版：使用者與遊戲 */
.profile-chip{border:1px solid #ded5f6;background:#f5f1ff;color:var(--purple);border-radius:99px;padding:8px 12px;font-weight:900;cursor:pointer}
.profile-hero{text-align:center;padding:28px 15px 16px}.profile-rainbow{font-size:74px}.profile-hero h1{font-size:clamp(30px,6vw,52px);margin:7px 0}.profile-hero p{color:var(--muted);margin:0 auto;max-width:620px}.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,260px));justify-content:center;gap:18px;margin:26px auto}.profile-card{border:1px solid var(--line);background:white;border-radius:28px;padding:25px 18px;box-shadow:var(--shadow);cursor:pointer;text-align:center;transition:.18s}.profile-card:hover{transform:translateY(-4px)}.profile-avatar{font-size:78px;display:block}.profile-card h2{margin:9px 0 4px;color:var(--purple)}.profile-card p{margin:0;color:var(--muted);font-size:14px}.profile-card .continue-note{display:block;margin-top:12px;padding:7px 10px;background:#f5f1ff;border-radius:99px;color:var(--purple);font-weight:800;font-size:13px}.add-profile-button{display:block;margin:10px auto;border:2px dashed #cfc3f3;background:transparent;color:var(--purple);padding:13px 24px;border-radius:17px;font-weight:900;cursor:pointer}.dialog-backdrop{position:fixed;inset:0;background:rgba(39,28,65,.48);display:grid;place-items:center;z-index:100;padding:18px}.profile-dialog-card{width:min(100%,430px);background:white;border-radius:25px;padding:25px;box-shadow:0 25px 60px rgba(0,0,0,.25)}.profile-dialog-card h2{margin-top:0}.profile-dialog-card label{display:grid;gap:7px;font-weight:800}.profile-dialog-card input{padding:12px;border:1px solid var(--line);border-radius:12px;font-size:18px}.avatar-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.avatar-option{border:2px solid transparent;background:#f7f4ff;border-radius:14px;font-size:32px;padding:8px;cursor:pointer}.avatar-option.selected{border-color:var(--purple);background:#ebe5ff}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.dialog-actions button{border:0;border-radius:12px;padding:10px 17px;font-weight:900;cursor:pointer}
.game-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;background:linear-gradient(135deg,#fff5cd,#fff0f6);border:1px solid #f7df99;border-radius:20px;padding:15px 18px}.game-panel>div:first-child{display:flex;align-items:center;gap:11px}.game-panel-icon{font-size:36px}.game-panel b,.game-panel small{display:block}.game-panel small{color:var(--muted);margin-top:3px}.game-buttons{display:flex;gap:9px}.game-buttons button{border:0;border-radius:13px;padding:12px 16px;font-weight:900;color:white;cursor:pointer}.game-buttons button:first-child{background:#ff7a7f}.game-buttons button:last-child{background:#37a886}
.game-shell{max-width:820px;margin:auto;text-align:center;background:white;border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--shadow)}.game-status{display:flex;justify-content:space-between;align-items:center;font-weight:900;color:var(--muted);font-size:17px}.stars{letter-spacing:2px;color:#f2b900}.sound-orb{width:92px;height:92px;border:0;border-radius:50%;margin:12px auto 5px;background:linear-gradient(135deg,#7259df,#a079ec);color:white;font-size:42px;box-shadow:0 12px 25px rgba(112,87,217,.28);cursor:pointer}.sound-orb.pulse{animation:pulse .7s ease}@keyframes pulse{50%{transform:scale(1.09)}}.game-instruction{color:var(--muted);font-weight:800}.listen-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:17px}.quiz-picture{position:relative;overflow:hidden;aspect-ratio:1.25/1;border:4px solid transparent;border-radius:21px;background:#fff;box-shadow:0 8px 20px rgba(64,45,110,.12);padding:0;cursor:pointer}.quiz-picture img{position:absolute;left:0;top:0;width:100%;height:137%;object-fit:cover;object-position:center top}.quiz-picture.correct{border-color:#55c271;animation:pop .35s}.quiz-picture.wrong{border-color:#ff6f7b;animation:shake .35s}@keyframes pop{50%{transform:scale(1.05)}}@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}.game-result{height:42px;margin-top:10px;font-size:29px;font-weight:900}.game-result.good{color:#39a75c}.game-result.try{color:#ef6a73}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:18px auto;max-width:700px}.memory-card{aspect-ratio:1/1;border:0;border-radius:17px;background:linear-gradient(145deg,#7259df,#9f7dec);box-shadow:0 7px 15px rgba(82,55,145,.22);cursor:pointer;position:relative;overflow:hidden;transform-style:preserve-3d;transition:.25s}.memory-card::before{content:"⭐";position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:white}.memory-card img{position:absolute;inset:0;width:100%;height:135%;object-fit:cover;object-position:center top;opacity:0;background:white}.memory-card.flipped,.memory-card.matched{transform:rotateY(180deg);background:white}.memory-card.flipped img,.memory-card.matched img{opacity:1;transform:rotateY(180deg)}.memory-card.matched{outline:4px solid #58c678}.memory-restart{margin-top:8px}
.week-card .game-badge{display:block;margin-top:10px;color:#37a886;font-size:12px;font-weight:900}.week-card.completed{outline:3px solid #f2c94c}.week-card.completed:before{content:"🏆";position:absolute;right:12px;bottom:10px;font-size:28px}
@media(max-width:700px){.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-card{padding:18px 9px}.profile-avatar{font-size:60px}.game-panel{display:block}.game-buttons{margin-top:12px}.game-buttons button{flex:1}.listen-options{gap:9px}.game-shell{padding:14px}.memory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.top-actions{max-width:55%}.profile-chip{font-size:12px;padding:7px 9px}}