:root{--bg: #F3E8FF;--bg-2: #FCE4EC;--tile-bg: #AB47BC;--tile-bg-2: #8E24AA;--tile-bg-hi: #CE93D8;--tile-border: #6A1B9A;--tile-text: #4A148C;--accent: #EC407A;--accent-2: #AD1457;--danger: #E74C3C;--hud-bg: rgba(255, 255, 255, .82);--line: #EC407A;--pink: #F06292;--pink-2: #EC407A;--pink-3: #D81B60;--gold: #FFB300}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#fff,#fff0 55%),linear-gradient(170deg,var(--bg) 0%,var(--bg-2) 100%);background-attachment:fixed;font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:var(--tile-text)}#app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:600px;margin:0 auto}.hud{display:flex;align-items:center;justify-content:space-around;padding:10px 14px;margin:8px 10px 4px;background:var(--hud-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7);border-radius:16px;box-shadow:0 4px 16px #6a1b9a24;font-size:clamp(14px,4vw,18px);font-weight:700;color:var(--tile-text);flex-shrink:0}.hud-level,.hud-stars,.hud-time{display:flex;align-items:center;gap:4px}.hud-hint{background:linear-gradient(145deg,var(--tile-bg-hi),var(--tile-bg-2));border:2px solid var(--tile-border);border-radius:12px;padding:5px 12px;font-size:inherit;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 2px #ad145740;transition:transform .12s ease,box-shadow .12s ease}.hud-hint:active{transform:translateY(1px);box-shadow:0 1px #ad145740}.hud-hint:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.hud-bottom{display:flex;justify-content:center;gap:10px;padding:6px 10px 10px;flex-shrink:0}.hud-bottom button{background:linear-gradient(145deg,var(--tile-bg-hi),var(--tile-bg-2));border:2px solid var(--tile-border);border-radius:12px;padding:7px 18px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 2px #ad145740;transition:transform .12s ease,box-shadow .12s ease}.hud-bottom button:active{transform:translateY(1px);box-shadow:0 1px #ad145740}.hud-time.timed-out{color:var(--danger);animation:timePulse 1s ease-in-out infinite}.hud-time.timed-out:after{content:" 加油!";font-size:.8em;font-weight:700}@keyframes timePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}.board-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px;position:relative;min-height:0}.memory-grid{display:grid;gap:8px;padding:4px;margin:auto;justify-content:center;align-content:center;width:auto;height:auto;max-width:100%;max-height:100%}.mcard{appearance:none;border:none;padding:0;background:transparent;cursor:pointer;width:100%;height:100%;perspective:600px;position:relative}.mcard:focus{outline:none}.mcard-inner{position:relative;width:100%;height:100%;transition:transform .42s cubic-bezier(.22,.9,.3,1.15);transform-style:preserve-3d}.mcard.flipped .mcard-inner{transform:rotateY(180deg)}.mcard-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:14px;border:2px solid var(--tile-border);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 3px #6a1b9a2e,0 5px 12px #6a1b9a1f,inset 0 2px 3px #fff9;overflow:hidden}.mcard-back{background:repeating-linear-gradient(45deg,#ffffff2e 0 8px,#fff0 8px 16px),linear-gradient(145deg,var(--tile-bg-hi),var(--tile-bg-2));color:#ffffffeb}.mcard-back-mark{font-size:clamp(26px,7vw,44px);font-weight:900;text-shadow:0 2px 4px rgba(74,20,140,.35)}.mcard:active .mcard-back-mark{transform:scale(.92);transition:transform .12s}.mcard-front{transform:rotateY(180deg);background:linear-gradient(145deg,#fff8fb,#ffe8f2);color:var(--accent-2);font-weight:800;flex-direction:column;gap:2px}.mcard-front.mcard-char{font-size:clamp(26px,8.5vw,52px);color:var(--accent-2);background:linear-gradient(145deg,#fff8fb,#ffe0ee)}.mcard-front.mcard-pinyin{font-size:clamp(15px,4.6vw,26px);font-weight:700;letter-spacing:0;font-family:Segoe UI,-apple-system,PingFang SC,sans-serif;color:#4a148c;background:linear-gradient(145deg,#fffbe8,#ffe9b3);border-color:var(--gold)}.mcard.matched .mcard-front{border-color:var(--gold);box-shadow:0 0 0 3px #ffb30059,0 4px 14px #ffb3004d,inset 0 2px 3px #fff9;animation:matchPop .36s cubic-bezier(.22,1.2,.36,1)}@keyframes matchPop{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.08)}to{transform:rotateY(180deg) scale(1)}}.mcard.matched{pointer-events:none}.mcard.matched .mcard-inner{opacity:.92}.mcard.hint .mcard-back{animation:hintPulse .5s 3}@keyframes hintPulse{0%,to{transform:scale(1);box-shadow:0 3px #6a1b9a2e}50%{transform:scale(1.06);box-shadow:0 0 16px var(--accent)}}.modal-overlay{position:fixed;inset:0;background:#3c14508c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-card{background:linear-gradient(170deg,#fffdf6,#ffecf5);border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:28px 36px;text-align:center;box-shadow:0 20px 50px #6a1b9a59;animation:popIn .26s cubic-bezier(.22,1.2,.36,1)}@keyframes popIn{0%{opacity:0;transform:scale(.82) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-title{font-size:30px;font-weight:700;color:var(--tile-text);margin-bottom:14px}.modal-stars{font-size:36px;margin-bottom:22px;letter-spacing:4px}.modal-star{display:inline-block;opacity:0;filter:grayscale(1)}.modal-star.lit{filter:none}.modal-buttons{display:flex;gap:12px;justify-content:center}.modal-buttons button{background:linear-gradient(145deg,var(--tile-bg-hi),var(--tile-bg-2));border:2px solid var(--tile-border);border-radius:12px;padding:10px 22px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 3px #ad510040;transition:transform .12s ease,box-shadow .12s ease}.modal-buttons button:active{transform:translateY(2px);box-shadow:0 1px #ad145740}.modal-buttons .btn-next{background:linear-gradient(145deg,#FF80AB,var(--accent));color:#fff;border-color:var(--accent-2);box-shadow:0 3px 0 var(--accent-2)}.level-select{display:flex;flex-direction:column;align-items:center;padding:24px 20px;height:100%}.level-select-title{font-size:26px;font-weight:700;color:var(--tile-text);margin-bottom:22px}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:420px}.level-btn{aspect-ratio:1;background:linear-gradient(145deg,var(--tile-bg-hi),var(--tile-bg-2));border:2px solid var(--tile-border);border-radius:20px;font-size:22px;font-weight:700;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px #ad145738,0 5px 12px #6a1b9a1a;transition:transform .12s ease,box-shadow .12s ease}.level-btn:active{transform:translateY(2px);box-shadow:0 1px #ad145738}.level-btn.locked{opacity:.5;cursor:not-allowed;box-shadow:none}.level-btn-stars{font-size:12px;margin-top:4px}.btn-back{margin-top:22px;background:linear-gradient(145deg,var(--tile-bg-hi),var(--tile-bg-2));border:2px solid var(--tile-border);border-radius:12px;padding:9px 26px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 3px #ad145740}@media (orientation: landscape) and (max-height: 500px){#app:after{content:"请旋转手机至竖屏 📱";position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:var(--tile-text);background:var(--bg);padding:20px 40px;border-radius:16px;z-index:999}}.start-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:22px;padding:20px}.start-title{font-size:42px;font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,#8e24aa,#ab47bc 45%,#ec407a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:0 4px 14px rgba(236,64,122,.18)}.btn-start,.btn-levels{background:linear-gradient(145deg,var(--tile-bg-hi),var(--tile-bg-2));border:2px solid var(--tile-border);border-radius:16px;padding:14px 44px;font-size:20px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 4px #ad145740,0 8px 18px #6a1b9a24;transition:transform .12s ease,box-shadow .12s ease}.btn-start{background:linear-gradient(145deg,#FF80AB,var(--accent));color:#fff;border-color:var(--accent-2);box-shadow:0 4px 0 var(--accent-2),0 8px 18px #ec407a33}.btn-start:active,.btn-levels:active{transform:translateY(3px);box-shadow:0 1px #ad145740}.btn-start:active{box-shadow:0 1px 0 var(--accent-2)}.settings{display:flex;gap:18px;margin-top:6px;font-size:16px;font-weight:700;color:var(--tile-text)}.settings label{display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 14px;background:var(--hud-bg);border:1px solid rgba(255,255,255,.7);border-radius:12px;box-shadow:0 2px 8px #6a1b9a14}.settings input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.speech-hint{margin-top:10px;padding:10px 14px;max-width:92%;font-size:13px;font-weight:400;line-height:1.5;color:#6b2a4e;background:#fff0f6;border:1px solid #F2A6C7;border-radius:12px;text-align:center}.start-screen .btn-hub{background:linear-gradient(145deg,#f3e5f5,#e1bee7);border:2px solid #BA68C8;border-radius:16px;padding:12px 36px;font-size:18px;font-weight:700;color:#4a148c;cursor:pointer;box-shadow:0 4px #ba68c8,0 8px 18px #ba68c82e;transition:transform .12s ease,box-shadow .12s ease}.start-screen .btn-hub:active{transform:translateY(3px);box-shadow:0 1px #ba68c8}