:root{--ink:#243047;--muted:#667085;--cream:#fff8e8;--card:#fff;--purple:#6c55d9;--purple-dark:#523db9;--line:#e9e2d5;--shadow:0 14px 34px rgba(65,48,26,.11)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);font-family:"PingFang TC","Microsoft JhengHei",system-ui,sans-serif;background:radial-gradient(circle at 12% 5%,#ffe6b8 0 9%,transparent 10%),radial-gradient(circle at 93% 15%,#d9f3e4 0 10%,transparent 11%),linear-gradient(150deg,#fff8e8,#f8f2ff 75%);padding:clamp(14px,3vw,30px)}
button{font:inherit;touch-action:manipulation}.app{width:min(720px,100%);margin:auto}.hero{display:flex;align-items:center;gap:14px;margin:5px 2px 22px}.hero>div:nth-child(2){flex:1}.mascot{display:grid;place-items:center;width:66px;height:66px;border-radius:22px;background:#fff;box-shadow:var(--shadow);font-size:34px;transform:rotate(-5deg)}
.eyebrow{margin:0 0 3px;color:#e36b56;font-size:.86rem;font-weight:900;letter-spacing:.13em}.hero h1{margin:0;font-size:clamp(1.75rem,6vw,2.6rem);line-height:1.1;letter-spacing:.04em}.subtitle{margin:8px 0 0;color:var(--muted);font-size:clamp(.92rem,3vw,1.05rem)}
.icon-btn{width:50px;height:50px;border:0;border-radius:17px;background:#fff;box-shadow:0 7px 20px rgba(65,48,26,.1);font-size:23px;cursor:pointer}.card{background:rgba(255,255,255,.93);border:2px solid rgba(255,255,255,.8);border-radius:28px;box-shadow:var(--shadow);padding:clamp(18px,4vw,28px);margin-bottom:18px}.section-heading,.progress-row,.actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading h2{font-size:1.12rem;margin:0}.text-btn{border:0;background:#f1edff;color:var(--purple-dark);padding:9px 13px;border-radius:12px;font-weight:700;cursor:pointer}
.color-key{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,2vw,14px);margin-top:18px}.key-item{text-align:center}.color-dot{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:4px solid rgba(255,255,255,.75);box-shadow:inset 0 -8px 12px rgba(0,0,0,.08),0 5px 10px rgba(38,38,38,.12)}.key-number{display:inline-grid;place-items:center;margin-top:8px;width:34px;height:34px;background:#fff;border:2px solid #e8e3d9;border-radius:50%;font-size:1.1rem;font-weight:900}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px;padding:6px;border-radius:20px;background:rgba(255,255,255,.7);box-shadow:0 8px 22px rgba(65,48,26,.08)}.mode-btn{min-height:52px;border:0;border-radius:15px;background:transparent;color:#667085;font-weight:900;cursor:pointer}.mode-btn.active{background:#fff;color:var(--purple-dark);box-shadow:0 5px 14px rgba(74,58,141,.15)}.paper-hint{margin:5px 0 0;color:var(--muted);font-size:.9rem}.paper-puzzles{display:grid;gap:14px;margin:22px 0}.paper-row{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:12px;border-radius:18px;background:#fffaf1}.paper-number{font-size:1.05rem;font-weight:900;color:#8c6b46}.paper-content{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}.paper-colors,.paper-answer{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.paper-dot{aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:inset 0 -5px 8px rgba(0,0,0,.08),0 3px 7px rgba(0,0,0,.1)}.paper-answer span{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;border:2px dashed #d5ccbd;background:#fff;color:transparent;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1;font-weight:900}.paper-answer.revealed span{color:var(--ink);border-style:solid;border-color:#72bc91;background:#e9f8ef;animation:pop .3s both}.paper-actions{margin-top:8px}
.progress-row{font-weight:800;font-size:.95rem}.progress-track{height:10px;margin:11px 0 25px;border-radius:20px;background:#eee9f7;overflow:hidden}.progress-track div{height:100%;width:20%;border-radius:inherit;background:linear-gradient(90deg,#8d79ed,#f078a2);transition:width .35s ease}.instruction{text-align:center;color:var(--muted);font-weight:700;margin:0 0 18px}.puzzle-row,.answer-row{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(7px,2.5vw,16px);max-width:570px;margin-inline:auto}.puzzle-dot{aspect-ratio:1;border-radius:50%;border:5px solid white;box-shadow:inset 0 -10px 15px rgba(0,0,0,.09),0 7px 13px rgba(42,34,26,.13);animation:pop .35s both}.answer-row{margin-top:17px}.answer-slot{display:grid;place-items:center;aspect-ratio:1;border-radius:20px;border:3px dashed #d8d0c2;background:#fffdf7;color:var(--ink);font-size:clamp(1.45rem,7vw,2.4rem);font-weight:900;transition:.2s}.answer-slot.filled{border-style:solid;border-color:#a798e9;background:#f2efff;transform:translateY(-2px)}.answer-slot.correct{border-color:#43af79;background:#e5f8ed}.answer-slot.wrong{border-color:#ed6e6e;background:#ffeded}
.feedback{min-height:42px;text-align:center;padding-top:12px;font-weight:900;font-size:1.05rem}.feedback.good{color:#258455}.feedback.bad{color:#ca4d4d}.number-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:4px auto 18px;max-width:520px}.number-btn{min-height:58px;border:0;border-bottom:5px solid #cfc5f2;border-radius:18px;background:#eeeaff;color:#46359f;font-size:1.5rem;font-weight:900;cursor:pointer}.number-btn:active{transform:translateY(3px);border-bottom-width:2px}.number-btn:disabled{opacity:.45;cursor:default}.actions{justify-content:center}.primary-btn,.secondary-btn{min-height:52px;padding:0 26px;border:0;border-radius:17px;font-weight:900;cursor:pointer}.primary-btn{background:linear-gradient(135deg,#735ce0,#a45ddd);color:#fff;box-shadow:0 8px 16px rgba(100,78,203,.28)}.secondary-btn{background:#f1eee8;color:#5d626e}.result-card{text-align:center;padding-block:35px}.result-emoji{font-size:60px}.result-card h2{font-size:2rem;margin:5px}.result-card p{color:var(--muted);font-size:1.1rem;margin:8px 0 24px}.hidden{display:none!important}
@keyframes pop{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
@media(min-width:900px){
  body{padding:10px;overflow:hidden}
  .app{width:min(1180px,100%);height:calc(100vh - 20px);display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:68px 180px minmax(0,1fr);gap:10px 14px}
  .hero{grid-column:1/-1;grid-row:1;margin:0;min-height:0}.mascot{width:54px;height:54px;border-radius:17px;font-size:28px}.hero h1{font-size:1.8rem}.eyebrow{font-size:.72rem}.subtitle{margin-top:3px;font-size:.88rem}.icon-btn{width:44px;height:44px}
  .card{margin:0;border-radius:22px;padding:16px}.key-card{grid-column:1;grid-row:2}.key-card .section-heading h2{font-size:1rem}.key-card .text-btn{padding:7px 9px;font-size:.82rem}.color-key{margin-top:12px;gap:4px}.color-dot{border-width:3px}.key-number{width:28px;height:28px;margin-top:5px;font-size:.95rem}
  .mode-switch{grid-column:1;grid-row:3;align-self:start;margin:0}.mode-btn{min-height:46px}
  .paper-card,.game-card,.result-card{grid-column:2;grid-row:2/4;min-height:0;align-self:stretch;overflow:hidden}
  .paper-card{display:flex;flex-direction:column}.paper-hint{font-size:.82rem}.paper-puzzles{flex:1;min-height:0;gap:7px;margin:10px 0}.paper-row{min-height:0;padding:7px 10px;border-radius:14px}.paper-content{gap:10px}.paper-dot{border-width:2px}.paper-answer span{border-radius:8px}.paper-actions{margin-top:3px}.paper-actions button{min-height:46px}
  .game-card .progress-track{margin:8px 0 14px}.game-card .instruction{margin-bottom:12px}.game-card .feedback{min-height:34px;padding-top:8px}.game-card .number-pad{margin-bottom:10px}.game-card .number-btn{min-height:50px}
}
@media(max-width:640px){.paper-content{grid-template-columns:1fr}.paper-answer{margin-top:2px}.paper-actions{flex-wrap:wrap}.paper-actions button{flex:1 1 220px}}
@media(max-width:480px){body{padding:12px}.hero{margin-bottom:15px}.card{border-radius:22px}.mascot{width:54px;height:54px;font-size:28px}.icon-btn{width:45px;height:45px}.answer-slot{border-radius:15px}.number-btn{min-height:54px}.key-number{width:30px;height:30px}.paper-card .section-heading{align-items:flex-start;flex-wrap:wrap}.paper-content{gap:8px}.paper-row{grid-template-columns:24px 1fr;padding:10px 7px}.paper-dot{border-width:2px}.paper-answer span{border-radius:7px}.paper-hint{font-size:.82rem}.paper-card .text-btn{width:100%}.mode-btn{font-size:.92rem;padding-inline:6px}}
@media(max-width:350px){body{padding:8px}.card{padding:15px}.hero{gap:8px}.mascot{width:46px;height:46px}.icon-btn{width:42px;height:42px}.color-key{gap:3px}.key-number{width:27px;height:27px;font-size:1rem}.paper-row{grid-template-columns:20px 1fr;gap:4px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}