*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:linear-gradient(160deg,#a8e6ff 0%,#d4c5ff 50%,#ffd6e8 100%);min-height:100vh;background-attachment:fixed}
#app{max-width:640px;margin:0 auto;padding:16px 14px 60px}
.card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 4px 16px rgba(80,60,160,.12);margin-bottom:12px}
.hero{text-align:center;padding:24px 16px}
.hero-emoji{font-size:52px}
h1{font-size:26px;color:#4a3aa0;margin:6px 0}
h2{color:#4a3aa0}
.sub{color:#888;font-size:14px}
.total{margin-top:10px;font-weight:bold;color:#ff8f00}
.maplink{display:inline-block;margin-top:8px;color:#7e57c2;font-size:13px;text-decoration:none}
.menu-btn{display:flex;justify-content:space-between;align-items:center;width:100%;background:#fff;border:none;border-radius:16px;padding:16px 18px;font-size:17px;font-weight:600;color:#333;box-shadow:0 3px 10px rgba(80,60,160,.12);margin-bottom:10px;cursor:pointer;transition:transform .15s;text-align:left}
.menu-btn:active{transform:scale(.97)}
.menu-btn.learn{background:linear-gradient(90deg,#42a5f5,#7e57c2);color:#fff}
.menu-btn.boss{background:linear-gradient(90deg,#ff9800,#f4511e);color:#fff}
.hint2{font-size:12px;font-weight:400;opacity:.85}
.stars{font-size:14px}
.tipline{text-align:center;color:#6a5acd;font-size:13px;margin-top:8px;line-height:1.6}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.back{border:none;background:#fff;border-radius:12px;padding:8px 14px;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer}
.ttitle{font-weight:700;color:#4a3aa0;font-size:16px}
.mist{font-size:14px;color:#666;background:#fff;padding:6px 10px;border-radius:10px;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.tile{border:none;border-radius:14px;padding:12px 4px;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.1);transition:transform .15s,opacity .3s;min-height:58px}
.ten{background:#e3f2fd;color:#1565c0}
.tcn{background:#fff8e1;color:#e65100}
.tile.selt{outline:3px solid #7e57c2;transform:scale(1.05)}
.tile.gone{opacity:0;transform:scale(.5);pointer-events:none}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.qcard{text-align:center}
.q{font-size:26px;font-weight:800;color:#333}
.q.phrase{font-size:21px}
.qsub{color:#888;font-size:14px;margin-top:6px}
.sentq{font-size:19px;font-weight:600;color:#333;line-height:1.6}
.opt{display:block;width:100%;background:#fff;border:2px solid #e0d7ff;border-radius:14px;padding:14px;font-size:17px;margin-bottom:10px;cursor:pointer;text-align:center;transition:transform .1s}
.opt:active{transform:scale(.98)}
.opt.right{background:#c8f7c5;border-color:#4caf50;color:#1b5e20;font-weight:700}
.opt.wrongo{background:#ffd6d6;border-color:#e53935;color:#b71c1c}
.pbar{height:10px;background:rgba(255,255,255,.6);border-radius:6px;margin-bottom:12px;overflow:hidden}
.pfill{height:100%;background:linear-gradient(90deg,#42a5f5,#7e57c2);border-radius:6px;transition:width .3s}
.timep .pfill{background:linear-gradient(90deg,#ff9800,#f4511e)}
.tipbox{background:#fffde7;border:2px dashed #fbc02d;font-size:15px;line-height:1.8;text-align:left}
.tipbox .btn{margin-top:8px}
.wcard .wen{font-size:22px;font-weight:800;color:#2e2e6e}
.wrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spk{border:none;background:#ede7ff;border-radius:10px;font-size:17px;padding:8px 12px;min-width:42px;min-height:38px;cursor:pointer;touch-action:manipulation}
.spk.small{font-size:15px;padding:6px 10px;min-width:38px;min-height:34px}
.sent{cursor:pointer}
button{touch-action:manipulation}
.ipa{color:#7e57c2;margin:4px 0;font-size:15px}
.pos{color:#999;font-size:13px}
.cnm{color:#e65100;font-weight:600;cursor:pointer;border-radius:6px;padding:0 4px}
.cnm.blur{filter:blur(6px)}
.tip{background:#f3efff;border-radius:10px;padding:8px 10px;font-size:14px;color:#5e35b1;margin:8px 0;line-height:1.6}
.sent{font-size:14.5px;color:#444;line-height:1.7}
.navrow{display:flex;gap:10px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.btn{border:none;background:linear-gradient(90deg,#42a5f5,#7e57c2);color:#fff;font-size:16px;font-weight:700;border-radius:14px;padding:13px 22px;cursor:pointer;box-shadow:0 3px 10px rgba(80,60,160,.25)}
.btn.ghost{background:#fff;color:#5e35b1;border:2px solid #d1c4e9}
.btn.go{background:linear-gradient(90deg,#66bb6a,#43a047)}
.slots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.slot{width:32px;height:42px;border-bottom:3px solid #b39ddb;font-size:24px;font-weight:800;color:#4a3aa0;display:flex;align-items:center;justify-content:center}
.slot.fill{border-color:#7e57c2}
.slots.win .slot{color:#2e7d32;border-color:#4caf50}
.ghost{color:#aaa;font-size:14px;min-height:18px;margin-top:6px}
.phraseq{font-size:19px;font-weight:700;color:#333;margin-top:8px;line-height:1.6}
.letters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 4px}
.lettile{width:44px;height:48px;border:none;border-radius:12px;background:#fff;font-size:22px;font-weight:800;color:#333;box-shadow:0 3px 8px rgba(0,0,0,.12);cursor:pointer}
.lettile:disabled{opacity:.25}
.end{text-align:center;padding:30px 16px}
.end .btn{margin:6px}
.bigstars{font-size:34px;margin:8px 0}
.confetti{position:fixed;top:-40px;z-index:99;animation:fall 2.4s linear forwards;pointer-events:none}
#toast{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);background:rgba(60,50,90,.92);color:#fff;padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:999;white-space:nowrap}
#toast.show{opacity:1}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.daycard{display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .15s;border:none;width:100%;text-align:left}
.daycard:active{transform:scale(.98)}
.dbadge{min-width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,#42a5f5,#7e57c2);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800}
.dbadge.ph{background:linear-gradient(135deg,#ff9800,#f4511e)}
.dbadge.fu{background:linear-gradient(135deg,#26a69a,#00897b)}
.dbadge .dn{font-size:20px;line-height:1}
.dbadge .dl{font-size:10px;font-weight:600;opacity:.9}
.dmain{flex:1}
.dtitle{font-size:16.5px;font-weight:700;color:#333}
.ddesc{font-size:12.5px;color:#999;margin-top:2px}
.dstars{font-size:12.5px;color:#ff8f00;margin-top:4px;font-weight:600}
.darrow{font-size:18px;color:#b39ddb}
.sechead{margin:18px 6px 10px;font-size:15px;font-weight:800;color:#4a3aa0}