@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@600;700;900&display=swap');
:root{--red:#991b1b;--red2:#7f1d1d;--gold:#d69e2e;--ink:#2f2924;--paper:#fbf5e8;--jade:#176b5b;--line:#dfd3bb;--cols:6}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f5eddd;color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif}body{min-height:100vh;background:radial-gradient(circle at 8% 10%,#fff8e8 0,transparent 35%),linear-gradient(135deg,#f8f1e3,#efe2cb)}button{font:inherit}.grain{position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E")}.topbar{height:76px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(103,76,45,.17);background:rgba(251,247,238,.88);backdrop-filter:blur(16px);position:relative;z-index:20}.brand{border:0;background:transparent;display:flex;gap:12px;align-items:center;color:var(--ink);font-weight:800;font-size:16px;cursor:pointer;text-align:left}.brand small{display:block;color:#8e7d68;font-size:10px;letter-spacing:.22em;margin-top:2px}.seal{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--red);color:#ffecc0;font:900 26px 'Noto Serif SC';box-shadow:inset 0 0 0 2px #b93636,inset 0 0 0 4px #7f1d1d}.top-actions{display:flex;gap:8px}.icon-btn{height:43px;border:1px solid #dfd4c1;border-radius:12px;background:#fffaf0;color:#6d6257;padding:0 13px;display:flex;align-items:center;gap:8px;cursor:pointer}.icon-btn b{font:700 17px 'Noto Serif SC'}.icon-btn[aria-pressed=true]{background:#fbe5dd;color:var(--red);border-color:#d9a99b}main{position:relative;z-index:1}.screen{max-width:1440px;margin:auto;padding:clamp(30px,5vw,72px) clamp(18px,5vw,74px)}[hidden]{display:none!important}.setup-screen{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,6vw,90px);align-items:center;min-height:calc(100vh - 76px)}.eyebrow,.panel-heading p,.lesson-kicker{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--red)}.hero-copy h1{font:900 clamp(40px,5.5vw,76px)/1.06 'Noto Serif SC',serif;margin:16px 0 24px;letter-spacing:-.03em}.hero-copy h1 em{font-style:normal;color:var(--red)}.lead{max-width:620px;font-size:16px;line-height:1.8;color:#6c6155}.howto{margin-top:34px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#615548}.howto span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e9d7b6;color:var(--red)}.howto i{font-style:normal;color:#aa9b84}.level-panel{background:rgba(255,252,245,.85);border:1px solid #e0d3bb;border-radius:26px;padding:clamp(20px,3vw,36px);box-shadow:0 24px 70px rgba(90,59,29,.12)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.panel-heading p{margin:0 0 7px}.panel-heading h2{margin:0;font-size:clamp(20px,2vw,28px)}.progress-pill{font-size:12px;background:#f3e7cf;color:#806127;padding:9px 12px;border-radius:20px;white-space:nowrap}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 22px}.level-btn{border:1px solid #ddd0b9;border-radius:16px;background:#fffcf5;padding:16px 12px;cursor:pointer;text-align:left;transition:.2s;position:relative}.level-btn:hover{transform:translateY(-2px);border-color:#c9aa77}.level-btn.selected{color:#fff;background:linear-gradient(145deg,#a11c1c,#711414);border-color:#7f1d1d;box-shadow:0 9px 22px rgba(127,29,29,.22)}.level-btn strong{display:block;font-size:19px}.level-btn small{display:block;margin-top:5px;color:#9a8c78;font-size:10px}.level-btn.selected small{color:#f3caca}.level-stars{position:absolute;right:10px;top:10px;color:#d69e2e;font-size:9px}.primary-btn{border:0;border-radius:14px;min-height:56px;background:linear-gradient(135deg,#a91f1f,#7d1717);color:white;font-weight:700;padding:0 24px;cursor:pointer;box-shadow:0 10px 20px rgba(127,29,29,.2);display:flex;align-items:center;justify-content:center;gap:14px}.primary-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}.level-panel>.primary-btn{width:100%}.primary-btn b{font:700 18px 'Noto Serif SC'}.setup-note{text-align:center;color:#988a77;font-size:11px;margin:15px 0 0}.game-screen{padding-top:28px;max-width:1500px}.game-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.round-info{display:flex;align-items:center;gap:14px}.round-info p{margin:0;color:var(--red);font-size:11px;font-weight:800;letter-spacing:.15em}.round-info h2{margin:4px 0 0;font-size:22px}.back-btn{width:42px;height:42px;border-radius:12px;border:1px solid #dfd2bb;background:#fffaf0;cursor:pointer}.stats{display:flex;background:#fbf6ec;border:1px solid #e1d5c0;border-radius:14px}.stats div{padding:10px 24px;text-align:center;border-right:1px solid #e5dac7}.stats div:last-child{border:0}.stats small{display:block;font-size:8px;letter-spacing:.14em;color:#9b8b75}.stats strong{font-size:18px;color:var(--red)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.board-wrap,.lesson-card{background:rgba(255,252,245,.82);border:1px solid #e0d3bb;border-radius:22px;box-shadow:0 16px 40px rgba(85,56,26,.08)}.board-wrap{padding:20px}.board-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:15px}.board-toolbar p{margin:0;font-size:12px;font-weight:600;color:#726656}.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#31a679;box-shadow:0 0 0 5px #d9efe6;margin-right:7px}.board-toolbar>div{display:flex;gap:8px}.soft-btn,.hint-btn{border:1px solid #ded2bd;background:#fffaf0;border-radius:10px;padding:9px 12px;color:#66594b;font-size:12px;font-weight:700;cursor:pointer}.hint-btn{background:#176b5b;color:#fff;border-color:#176b5b}.board-shell{position:relative;background:#eadbc1;border:1px solid #d8c5a3;border-radius:18px;padding:clamp(9px,1.5vw,16px);overflow:hidden}.board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(7px,1vw,12px);position:relative;z-index:2}.tile{aspect-ratio:1.08;border:1px solid #dbc9a9;border-radius:13px;background:linear-gradient(145deg,#fffef9,#f9efd9);box-shadow:0 4px 0 #cfb98f,0 7px 14px rgba(90,58,29,.11);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3c332a;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;min-width:0}.tile:hover{transform:translateY(-2px);border-color:#b99055}.tile.selected{background:#fff1d0;border:2px solid var(--red);transform:translateY(-3px);box-shadow:0 4px 0 #a23c2b,0 0 0 4px rgba(153,27,27,.11)}.tile.hint{animation:hint 1s ease-in-out infinite;border:2px solid #16856d}.tile.matched{animation:vanish .38s ease forwards;pointer-events:none}.hanzi{font:800 clamp(26px,3.2vw,48px)/1 'Noto Serif SC';white-space:nowrap}.tile-pinyin{font-size:clamp(8px,.8vw,11px);color:#a06753;margin-top:7px;min-height:12px}.pinyin-hidden .tile-pinyin{visibility:hidden}.tile-index{position:absolute;right:7px;top:5px;color:#d4c4a8;font-size:8px}.path-note{font-size:10px;color:#9a8b76;text-align:center;margin:13px 0 0}#pathLayer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}#pathLayer polyline{fill:none;stroke:#b21f1f;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgba(255,255,255,.9));stroke-dasharray:12 8;animation:dash .5s linear infinite}.lesson-card{padding:25px;min-height:390px;display:flex;align-items:center}.lesson-empty{text-align:center;color:#8b7c69}.lesson-empty>span{width:86px;height:86px;border:1px solid #d9c7a9;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;font:800 42px 'Noto Serif SC';color:#bd9b68;background:#f7ecd8}.lesson-empty h3{font-size:16px;color:#564a3e}.lesson-empty p{font-size:12px;line-height:1.7}.lesson-content{width:100%;align-self:stretch}.lesson-kicker{margin:0 0 12px;color:#168369}.word-line{display:flex;align-items:center;justify-content:space-between}.word-line strong{font:900 52px 'Noto Serif SC';color:var(--red)}.word-line button{border:0;width:42px;height:42px;border-radius:50%;background:#f2e2c6;cursor:pointer}.pinyin{font-size:18px;color:#a06a38;margin:3px 0 22px}.pinyin.concealed{filter:blur(7px);user-select:none}.meaning{border-top:1px solid #e0d3be;border-bottom:1px solid #e0d3be;padding:17px 0}.meaning small{font-size:8px;letter-spacing:.15em;color:#9e8e77}.meaning p{margin:6px 0 0;font-size:17px;font-weight:700}.memory-tip{margin-top:20px;padding:15px;border-radius:12px;background:#f4ead8;font-size:11px;line-height:1.6;color:#756755}.memory-tip b{color:#675438}.memory-tip p{margin:4px 0 0}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);background:#342d27;color:#fff;padding:11px 18px;border-radius:30px;font-size:12px;opacity:0;pointer-events:none;z-index:50;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.modal{position:fixed;inset:0;background:rgba(47,33,22,.55);backdrop-filter:blur(7px);z-index:60;display:grid;place-items:center;padding:20px}.modal-card{width:min(440px,100%);background:#fffaf0;border:1px solid #ebd6b3;border-radius:26px;padding:38px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.25)}.lantern{width:78px;height:78px;border-radius:24px;background:var(--red);color:#ffe6a8;font:800 42px 'Noto Serif SC';display:grid;place-items:center;margin:-76px auto 22px;box-shadow:0 12px 25px rgba(127,29,29,.3)}.modal-card>p{font-size:10px;letter-spacing:.2em;color:var(--red);font-weight:800}.modal-card h2{font:900 48px 'Noto Serif SC';margin:8px 0 0;color:var(--red)}.modal-card h3{font-size:15px;margin:5px 0 24px}.finish-score{background:#f4e7cf;border-radius:14px;padding:14px;display:flex;justify-content:space-between;align-items:center}.finish-score strong{font-size:26px;color:var(--red)}.finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.finish-actions .primary-btn{min-height:44px}
@keyframes hint{50%{box-shadow:0 4px 0 #16856d,0 0 0 7px rgba(22,133,109,.14);transform:translateY(-3px)}}@keyframes vanish{70%{transform:scale(1.08);opacity:.7}100%{transform:scale(.3);opacity:0}}@keyframes dash{to{stroke-dashoffset:-20}}
@media(max-width:980px){.setup-screen{grid-template-columns:1fr;min-height:auto}.hero-copy{text-align:center}.lead{margin-inline:auto}.howto{justify-content:center}.game-layout{grid-template-columns:1fr}.lesson-card{min-height:auto}.lesson-empty{display:none}.lesson-content{min-height:0}.game-head{align-items:flex-end}.stats div{padding:9px 14px}}
@media(max-width:640px){:root{--cols:4}.topbar{height:64px;padding:0 13px}.seal{width:36px;height:36px;font-size:22px}.brand{font-size:13px}.icon-btn{width:39px;padding:0;justify-content:center}.icon-btn span{display:none}.screen{padding:24px 12px}.setup-screen{gap:28px}.hero-copy h1{font-size:39px}.lead{font-size:14px}.howto{font-size:10px;gap:6px}.level-panel{padding:18px 14px;border-radius:19px}.panel-heading{display:block}.progress-pill{display:inline-block;margin-top:12px}.level-grid{gap:8px;margin:18px 0}.level-btn{padding:13px 8px}.level-btn strong{font-size:15px}.level-btn small{font-size:8px}.game-screen{padding-top:16px}.game-head{display:block}.stats{margin-top:13px;width:100%;justify-content:space-around}.stats div{flex:1}.game-layout{gap:12px}.board-wrap{padding:10px;border-radius:16px}.board-toolbar{align-items:flex-start}.board-toolbar p{display:none}.board-toolbar>div{width:100%}.soft-btn,.hint-btn{flex:1}.board-shell{padding:8px}.board{gap:7px}.tile{border-radius:10px;box-shadow:0 3px 0 #cfb98f,0 5px 10px rgba(90,58,29,.1)}.hanzi{font-size:32px}.tile-pinyin{font-size:8px;margin-top:4px}.lesson-card{padding:17px}.word-line strong{font-size:42px}.round-info h2{font-size:18px}.path-note{padding:0 12px;line-height:1.5}.finish-actions{grid-template-columns:1fr}.modal-card{padding:30px 20px}}

/* PWA / iOS Home Screen */
.topbar{height:calc(76px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
.compact-back,.compact-pinyin{display:none;border:1px solid #ded2bd;background:#fffaf0;border-radius:10px;min-width:42px;color:var(--red);font-size:20px;font-weight:700;cursor:pointer}.compact-pinyin[aria-pressed=true]{background:#fbe5dd;border-color:#d9a99b}.compact-pinyin span{display:none}
.install-prompt{position:fixed;z-index:80;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));max-width:680px;margin:auto;display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center;background:rgba(255,252,245,.97);border:1px solid #d9c6a8;border-radius:18px;padding:13px 48px 13px 13px;box-shadow:0 18px 60px rgba(47,33,22,.24);backdrop-filter:blur(18px)}
.install-prompt img{border-radius:13px;box-shadow:0 5px 12px rgba(127,29,29,.22)}.install-prompt strong{display:block;font-size:13px}.install-prompt p{margin:4px 0 0;font-size:10px;line-height:1.45;color:#796b5b}.install-action{border:0;border-radius:10px;background:var(--red);color:#fff;padding:9px 13px;font-size:11px;font-weight:700;cursor:pointer}.install-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#8a7a67;font-size:23px;cursor:pointer}.ios-help{display:none}.show-ios-help .install-default{display:none}.show-ios-help .ios-help{display:block}.show-ios-help .install-action{display:none}.is-standalone body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}.is-standalone button{-webkit-tap-highlight-color:transparent}.is-standalone .topbar{padding-left:max(13px,env(safe-area-inset-left));padding-right:max(13px,env(safe-area-inset-right))}
@media(max-width:640px){.topbar{height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}.screen{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}.install-prompt{grid-template-columns:48px 1fr;padding:12px 42px 12px 12px}.install-prompt img{width:48px;height:48px}.install-action{grid-column:1/-1;width:100%}}

@media(max-width:640px){
  .game-active .topbar{display:none}
  .game-active .round-info{display:none}
  .game-active .game-screen{padding-top:max(8px,env(safe-area-inset-top))}
  .game-active .game-head{margin-bottom:10px}
  .game-active .stats{margin-top:0}
  .game-active .compact-back,.game-active .compact-pinyin{display:block;flex:0 0 42px}
  .game-active .board-toolbar>div{display:flex}
  .tile-pinyin{font-size:11px;line-height:1.25;margin-top:5px;font-weight:500}
  .pinyin{font-size:21px;line-height:1.35;margin-top:5px}
  .lesson-reveal .lesson-card{display:block;position:fixed;z-index:55;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,calc(env(safe-area-inset-bottom) + 6px));min-height:0;max-height:52vh;overflow:auto;padding:18px;box-shadow:0 22px 70px rgba(47,33,22,.32);animation:lesson-up .22s ease-out}
  .lesson-reveal .lesson-content{display:block!important}
}
@keyframes lesson-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}