:root { --ink:#2b1713; --muted:#79605b; --paper:#f8e7dc; --card:#fffaf4; --accent:#c20d24; --accent-dark:#7d0715; --soft:#f6d2cf; --gold:#dca82f; --green:#287b5a; --line:#dfbcae; --shadow:0 22px 60px rgba(115,20,17,.18); --wash:rgba(194,13,36,.09); }
    body.traditional { --ink:#112842; --muted:#5b7187; --paper:#e9f4fa; --card:#fbfdff; --accent:#0873b9; --accent-dark:#074b7c; --soft:#d1eaf7; --gold:#d6a432; --line:#b8d7e7; --shadow:0 22px 60px rgba(8,84,132,.17); --wash:rgba(8,115,185,.09); }
    * { box-sizing:border-box; }
    body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    body { transition:background .35s,color .35s; }
    body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.48; background-image:linear-gradient(135deg,transparent 0 48%,var(--wash) 49% 51%,transparent 52% 100%),radial-gradient(var(--line) .65px,transparent .65px); background-size:90px 90px,10px 10px; }
    button, select { font:inherit; }
    .gate{position:fixed;inset:0;z-index:1000;background:#21090b;display:grid;place-items:center;overflow:auto;transition:opacity .45s ease,visibility .45s ease}.gate.gone{opacity:0;visibility:hidden;pointer-events:none}.welcome-gate{background-image:linear-gradient(rgba(28,4,6,.2),rgba(28,4,6,.75)),url('./assets/images/268ff10fc171b4a7.webp');background-size:cover;background-position:center}.welcome-panel{text-align:center;color:#fff;padding:28px;text-shadow:0 3px 18px rgba(0,0,0,.7)}.welcome-panel h2{margin:0;font:900 clamp(58px,12vw,120px)/1 "Noto Serif SC",serif;letter-spacing:.08em}.welcome-panel p{margin:12px 0 30px;font-size:clamp(18px,3vw,27px)}.gate-button{border:1px solid rgba(255,255,255,.65);border-radius:99px;padding:13px 28px;background:linear-gradient(135deg,#d0152c,#8b0717);color:#fff;cursor:pointer;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.3)}.gate-button:hover{transform:translateY(-2px);filter:brightness(1.08)}
    .profile-gate{background:radial-gradient(circle at 50% 15%,#8d261e,#26090b 68%);padding:clamp(14px,3vw,34px)}.profile-select{width:min(1080px,100%);color:#fff}.profile-select h2{text-align:center;margin:0 0 7px;font:800 clamp(31px,6vw,58px)/1.1 "Noto Serif SC",serif}.profile-select>p{text-align:center;margin:0 0 22px;color:#f3d8c6}.profile-choices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,28px)}.profile-choice{position:relative;min-height:min(68vh,720px);border:1px solid rgba(255,255,255,.45);border-radius:28px;overflow:hidden;cursor:pointer;background:#4b1716;box-shadow:0 24px 60px rgba(0,0,0,.36);padding:0;color:#fff}.profile-photo{position:absolute;inset:0;background-image:linear-gradient(0deg,rgba(13,3,4,.92) 0,rgba(13,3,4,.05) 54%),url('./assets/images/8f270c8c422f43b6.webp');background-size:200% auto;background-repeat:no-repeat;transition:transform .4s ease,filter .4s ease}.profile-choice[data-profile="xiao"] .profile-photo{background-position:left 12%}.profile-choice[data-profile="da"] .profile-photo{background-position:right 12%}.profile-choice:hover .profile-photo{transform:scale(1.025);filter:saturate(1.08)}.profile-label{position:absolute;z-index:1;left:0;right:0;bottom:25px;text-align:center}.profile-label strong{display:block;font:900 clamp(33px,5vw,55px)/1.1 "Noto Serif SC",serif}.profile-label span{display:block;margin-top:7px;color:#ffe5bf;font-size:15px;font-weight:700;letter-spacing:.04em}
    .profile-button{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:7px 11px;cursor:pointer;position:relative;z-index:2}.profile-button:hover{border-color:var(--accent)}.profile-avatar{width:34px;height:34px;border-radius:50%;background-image:url('./assets/images/8f270c8c422f43b6.webp');background-size:200% auto;background-repeat:no-repeat;border:2px solid var(--soft)}.profile-avatar.xiao{background-position:left 29%}.profile-avatar.da{background-position:right 29%}.profile-button-copy{display:flex;flex-direction:column;text-align:left;font-size:10px;color:var(--muted)}.profile-button-copy strong{font-size:13px;color:var(--accent-dark)}
    .review-banner{display:none;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;padding:14px 17px;border:1px solid color-mix(in srgb,var(--gold) 60%,var(--line));border-radius:16px;background:linear-gradient(100deg,#fff6dd,var(--card));color:#6c4910}.review-banner.show{display:flex}.review-banner strong{display:block}.review-banner span{font-size:12px}.review-banner button{border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer;font-weight:800;padding:7px 10px}
    .profile-tabs{display:flex;gap:7px;margin:18px 0 10px;padding:4px;border-radius:13px;background:var(--soft)}.profile-tabs button{flex:1;border:0;border-radius:9px;padding:9px;background:transparent;color:var(--muted);cursor:pointer;font-weight:800}.profile-tabs button.active{background:var(--card);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.08)}.profile-pane{display:none}.profile-pane.active{display:block}
    .level-stat{background:var(--card);color:var(--ink);cursor:pointer;text-align:left}.level-stat:hover{border-color:var(--accent);transform:translateY(-1px)}.known-list-panel{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.known-list-panel.show{display:block}.known-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.known-list-head h3{margin:0;font-size:18px}.known-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:320px;overflow:auto}.known-word{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:10px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--card) 88%,var(--soft))}.known-word b{grid-row:span 2;font:700 25px/1.3 "Noto Serif SC",serif;color:var(--accent-dark)}.known-word span{font-size:12px;color:var(--muted)}.known-empty{color:var(--muted);padding:18px;text-align:center;grid-column:1/-1}.mini-button{border:1px solid var(--line);border-radius:9px;padding:6px 10px;background:var(--card);color:var(--ink);cursor:pointer}
    .rewards-summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px;border-radius:15px;background:linear-gradient(115deg,var(--soft),var(--card));border:1px solid var(--line)}.reward-percent{font-size:24px;color:var(--accent);font-weight:900}.reward-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:13px}.reward-tile{position:relative;aspect-ratio:1/1.18;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft);margin:0}.reward-tile img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.reward-tile figcaption{position:absolute;inset:auto 0 0;padding:20px 7px 7px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-size:10px;text-align:center}.reward-tile.locked{display:grid;place-items:center;padding:10px;text-align:center;color:var(--muted);background:repeating-linear-gradient(135deg,var(--soft),var(--soft) 10px,var(--card) 10px,var(--card) 20px)}.reward-tile.locked::before{content:'🔒';display:block;font-size:24px;margin-bottom:5px}
    .account-welcome-card{width:min(560px,100%);text-align:center;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:27px;padding:clamp(25px,5vw,42px);box-shadow:0 30px 80px rgba(0,0,0,.4)}.account-welcome-card .profile-avatar{width:82px;height:82px;margin:auto}.account-welcome-card h2{margin:16px 0 5px;font:900 clamp(31px,6vw,47px)/1.1 "Noto Serif SC",serif}.account-welcome-card>p{margin:0;color:var(--muted);font-size:17px}.welcome-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:23px 0}.welcome-stat{padding:12px 7px;border-radius:13px;background:var(--soft)}.welcome-stat strong{display:block;color:var(--accent);font-size:23px}.welcome-stat span{font-size:11px;color:var(--muted)}
    .celebration-modal{z-index:1200;background:rgba(15,4,12,.88);overflow:hidden}.celebration-card{position:relative;z-index:2;width:min(620px,100%);max-height:90vh;overflow:auto;text-align:center;border:2px solid #f7cf62;border-radius:28px;padding:clamp(22px,4vw,38px);background:linear-gradient(145deg,#fff8df,#fff);box-shadow:0 0 55px rgba(255,201,65,.38)}.celebration-card h2{margin:10px 0 5px;font:900 clamp(30px,6vw,48px)/1.1 "Noto Serif SC",serif;color:#8f1020}.celebration-card p{color:#6f554e}.celebration-image{display:block;width:min(330px,82%);max-height:48vh;object-fit:contain;margin:18px auto;border-radius:19px;box-shadow:0 18px 42px rgba(90,30,20,.25)}.block-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.block-gallery img{width:100%;aspect-ratio:1/1.15;object-fit:cover;object-position:center top;border-radius:10px}.firework{position:absolute;z-index:1;width:7px;height:7px;border-radius:50%;left:var(--x);top:var(--y);background:var(--c);box-shadow:0 -55px var(--c),39px -39px var(--c),55px 0 var(--c),39px 39px var(--c),0 55px var(--c),-39px 39px var(--c),-55px 0 var(--c),-39px -39px var(--c);animation:burst 1.35s ease-out infinite;animation-delay:var(--d)}@keyframes burst{0%{opacity:0;transform:scale(.1) rotate(0)}25%{opacity:1}100%{opacity:0;transform:scale(1.45) rotate(25deg)}}
    .modal{position:fixed;inset:0;z-index:900;display:none;place-items:center;padding:18px;background:rgba(20,8,7,.68);backdrop-filter:blur(7px)}.modal.open{display:grid}.profile-card{width:min(720px,100%);max-height:90vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:25px;padding:clamp(22px,4vw,36px);box-shadow:0 30px 80px rgba(0,0,0,.35)}.profile-card-head{display:flex;align-items:center;gap:14px}.profile-card-head .profile-avatar{width:64px;height:64px}.profile-card h2{margin:0;font:800 30px/1.1 "Noto Serif SC",serif}.profile-card-head p{margin:5px 0 0;color:var(--muted)}.close-modal{margin-left:auto;align-self:flex-start;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--card);cursor:pointer}.profile-total{margin:24px 0 16px;padding:17px;border-radius:17px;background:var(--soft);font-weight:750}.level-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.level-stat{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px}.level-stat strong{color:var(--accent)}.profile-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:22px}.profile-actions button{flex:1 1 145px;border:1px solid var(--line);border-radius:11px;padding:9px 13px;background:var(--card);color:var(--ink);cursor:pointer}.profile-actions .switch-profile{background:var(--accent);color:#fff;border-color:var(--accent)}
    .shell { width:min(1180px, 100%); margin:auto; padding:22px clamp(16px,4vw,42px) 38px; position:relative; }
    body{--mascot-art:url('./assets/images/389450cbb5552470.webp')}
    body.traditional{--mascot-art:url('./assets/images/8487826ef8177a78.webp')}
    body{--side-companion:url('./assets/images/6b0da6faf0d2ce22.webp')}
    body.traditional{--side-companion:url('./assets/images/07a8d1eef1b8f231.webp')}
    .dragon,.bear { position:fixed; z-index:0; width:clamp(150px,14vw,240px); height:clamp(190px,32vh,310px); opacity:.72; background-repeat:no-repeat; filter:saturate(.96) drop-shadow(0 14px 28px rgba(62,10,8,.2)); animation:float 5s ease-in-out infinite; user-select:none; pointer-events:none; }
    .dragon.one,.bear.one{left:0;top:20vh}.dragon.two,.bear.two{right:0;bottom:8vh;animation-delay:-2.5s}
    .dragon.one,.bear.two{background-image:var(--side-companion);background-size:contain;background-position:center}
    .dragon.two,.bear.one{background-image:var(--mascot-art);background-size:200% 100%}
    .dragon.two{background-position:right center}.bear.one{background-position:left center}
    .bear{display:none;filter:saturate(.9) drop-shadow(0 14px 28px rgba(0,62,100,.2))}
    body.traditional .dragon{display:none} body.traditional .bear{display:block}
    @keyframes float{50%{translate:0 -10px;rotate:3deg}}
    header { position:relative;display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:22px;background:linear-gradient(110deg,color-mix(in srgb,var(--card) 91%,var(--accent)),var(--card));overflow:hidden;box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 10%,transparent); }
    header::after{content:"龍";position:absolute;right:118px;top:-31px;font:900 118px/1 "Noto Serif SC",serif;color:var(--wash);transform:rotate(-8deg);pointer-events:none}body.traditional header::after{content:"梅"}
    .brand { display:flex; align-items:center; gap:13px; }
    .seal { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--accent),var(--accent-dark)); font:700 27px/1 "Noto Serif SC","Songti SC",serif; box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent); border:2px solid rgba(255,255,255,.4); }
    h1 { margin:0; font-size:clamp(20px,4vw,28px); letter-spacing:-.02em; }
    .subtitle { margin:3px 0 0; color:var(--muted); font-size:13px; }
    .streak { text-align:right; }
    .streak strong { display:block; color:var(--accent); font-size:18px; }
    .streak span { color:var(--muted); font-size:12px; }
    .identity{display:flex;align-items:center;gap:10px;margin-left:auto;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--card) 82%,transparent);position:relative;z-index:1}.identity-flag{font-size:29px}.identity-copy{display:flex;flex-direction:column;font-size:11px;color:var(--muted)}.identity-copy strong{font-size:13px;color:var(--accent-dark)}
    .toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,249,.78); backdrop-filter:blur(8px); }
    .top-switch{display:flex;justify-content:center;margin:0 0 18px}.language-switch{display:flex;padding:5px;background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 24px rgba(40,20,10,.06)}
    .language-switch button{border:0;background:transparent;color:var(--muted);padding:10px 17px;border-radius:11px;cursor:pointer;font-weight:700}.language-switch button.active{background:var(--accent);color:#fff;box-shadow:0 6px 15px color-mix(in srgb,var(--accent) 28%,transparent)}
    .flag{margin-right:7px}
    .view-tabs{display:flex;gap:8px;margin:18px 0}.view-tabs button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.5);color:var(--muted);padding:10px;border-radius:12px;cursor:pointer;font-weight:700}.view-tabs button.active{background:var(--card);color:var(--accent);border-color:var(--accent)}
    .segments { display:flex; gap:4px; padding:4px; background:var(--soft); border-radius:12px; overflow:auto; }
    .segments button { border:0; border-radius:9px; padding:8px 14px; color:var(--muted); background:transparent; cursor:pointer; }
    .segments button.active { color:var(--accent-dark); background:var(--card); box-shadow:0 2px 8px rgba(50,30,20,.08); font-weight:700; }
    .tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .tool, select { min-height:38px; border:1px solid var(--line); border-radius:10px; padding:7px 11px; color:var(--ink); background:var(--card); cursor:pointer; }
    .tool:hover { border-color:#baa993; }
    .progress-wrap { margin:18px 4px 24px; }
    .progress-label { display:flex; justify-content:space-between; gap:16px; margin-bottom:8px; color:var(--muted); font-size:13px; }
    .progress-label strong { color:var(--ink); }
    .track { height:7px; border-radius:99px; background:#e5dacb; overflow:hidden; }
    .bar { width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .35s ease; }
    .study { display:grid; grid-template-columns:44px minmax(0,620px) 44px; justify-content:center; align-items:center; gap:18px; }
    .nav { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font-size:24px; box-shadow:0 5px 16px rgba(50,30,20,.07); }
    .nav:hover { color:var(--accent); transform:translateY(-1px); }
    .scene { width:100%; min-height:390px; perspective:1200px; cursor:pointer; outline:none; }
    .flashcard { position:relative; width:100%; min-height:390px; transform-style:preserve-3d; transition:transform .48s cubic-bezier(.2,.75,.3,1); }
    .scene.flipped .flashcard { transform:rotateY(180deg); }
    .face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px; border:1px solid var(--line); border-radius:28px; background:var(--card); box-shadow:var(--shadow); backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; }
    .face::before,.face::after { content:""; position:absolute; width:100px; height:100px; border:1px solid var(--wash); transform:rotate(45deg); }
    .face::before { top:-70px; left:-70px; } .face::after { bottom:-70px; right:-70px; }
    .back { transform:rotateY(180deg); text-align:center; }
    .level { position:absolute; top:22px; left:24px; padding:5px 9px; border-radius:8px; color:var(--accent-dark); background:var(--soft); font-size:12px; font-weight:700; letter-spacing:.05em; }
    .status { position:absolute; top:22px; right:24px; color:var(--muted); font-size:12px; }
    .hanzi { font-family:"Noto Serif SC","Songti SC","STSong",serif; font-size:clamp(68px,16vw,116px); font-weight:600; line-height:1.05; letter-spacing:.04em; }
    .hint { position:absolute; bottom:24px; color:var(--muted); font-size:13px; }
    .pinyin { color:var(--accent); font-size:clamp(24px,5vw,34px); font-weight:650; }
    .translation { margin-top:7px; font-family:Georgia,serif; font-size:clamp(22px,4vw,30px); }
    .divider { width:42px; height:2px; margin:24px 0; background:var(--gold); }
    .example { max-width:540px; font-family:"Noto Serif SC","Songti SC",serif; font-size:clamp(20px,4vw,27px); line-height:1.75; }
    .token{position:relative;display:inline-block;padding:0 2px;border-radius:5px;border-bottom:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);cursor:pointer}.token:hover,.token:focus{color:var(--accent);background:var(--soft);outline:2px solid color-mix(in srgb,var(--accent) 22%,transparent)}.token .tip{position:absolute;z-index:20;left:50%;bottom:calc(100% + 9px);translate:-50% 4px;width:max-content;max-width:min(260px,80vw);padding:10px 12px;border-radius:11px;background:#172231;color:white;font:12px/1.45 Inter,sans-serif;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.24);opacity:0;visibility:hidden;transition:.16s;pointer-events:none}.token:hover .tip,.token:focus .tip{opacity:1;visibility:visible;translate:-50% 0}.token .tip b{color:#ffd67b}.tip-level{color:#b8d9ee}.tip-audio{display:block;margin-top:4px;color:#ffe3a2}.word-help{margin-top:9px;color:var(--muted);font-size:12px}
    .example-fr { max-width:480px; margin-top:8px; color:var(--muted); font-size:15px; }
    .audio-row{display:flex;gap:8px;margin-top:14px}.speak { position:static;display:flex;align-items:center;gap:6px;border:0;border-radius:99px;color:var(--accent);background:var(--soft);cursor:pointer;padding:8px 12px;font-weight:700;font-size:12px}.speak:hover{filter:brightness(.97);transform:translateY(-1px)}
    .actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px; }
    .recall-hint { flex:0 0 100%; margin:0; color:var(--muted); text-align:center; font-size:13px; }
    .action:disabled { opacity:.48; cursor:not-allowed; }
    .action { border:1px solid var(--line); border-radius:13px; padding:11px 17px; background:var(--card); color:var(--ink); cursor:pointer; font-weight:650; }
    .action.review:hover,.action.review.on { border-color:#d19739; color:#84590e; background:#fff4da; }
    .action.known:hover,.action.known.on { border-color:#4a9777; color:#186044; background:#e5f4ed; }
    .keyboard { text-align:center; margin:18px 0 0; color:var(--muted); font-size:12px; }
    kbd { border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 5px; background:var(--card); font-family:inherit; }
    .empty { display:none; min-height:300px; place-items:center; text-align:center; border:1px dashed var(--line); border-radius:28px; background:rgba(255,253,249,.7); }
    .empty.show { display:grid; }
    .reader{display:none}.reader.active{display:block}.reader-card{position:relative;border:1px solid var(--line);border-radius:26px;background:var(--card);box-shadow:var(--shadow);padding:clamp(24px,5vw,48px);min-height:390px}.reader-top{display:flex;justify-content:space-between;gap:20px;align-items:start}.reader h2{margin:0;font:700 clamp(24px,4vw,34px)/1.25 "Noto Serif SC",serif}.reader-meta{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.06em}.long-text{margin:28px 0 18px;font:clamp(20px,3vw,27px)/2 "Noto Serif SC",serif}.reader-translation{display:none;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);line-height:1.7}.reader-translation.show{display:block}.reader-actions{display:flex;flex-wrap:wrap;gap:8px}.primary{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}.dataset-note{margin:12px 4px 0;color:var(--muted);font-size:11px}.hidden{display:none!important}
    footer { margin-top:28px; text-align:center; color:var(--muted); font-size:12px; }
    @media (max-width:1000px){.dragon,.bear{width:120px;opacity:.32}}
    @media (max-width:650px) { .profile-gate{align-items:start}.profile-select h2{margin-top:10px}.profile-choices{grid-template-columns:1fr}.profile-choice{min-height:34vh}.profile-photo{background-size:200% auto;background-position-y:8%!important}.level-stats{grid-template-columns:1fr}.profile-button-copy{display:none}header{align-items:flex-start;padding:14px}.streak,.identity-copy{display:none}.identity{padding:5px 8px}.streak{display:none}.toolbar{align-items:stretch}.segments{width:100%;}.segments button{flex:0 0 auto;padding-inline:10px}.tools{width:100%;}.tools>*{flex:1}.study{grid-template-columns:1fr;}.nav{position:absolute;z-index:5;margin-top:175px}.nav.prev{left:22px}.nav.next{right:22px}.scene,.flashcard{min-height:465px}.face{padding:32px 22px}.actions{padding:0 12px}.action{flex:1}.keyboard{display:none}.hanzi{font-size:clamp(64px,23vw,98px)}.dragon,.bear{display:none!important}.language-switch button{padding:9px 10px}.reader-top{display:block}.reader-meta{margin-top:7px}}
    @media (prefers-reduced-motion:reduce){.flashcard,.bar{transition:none}}
    @media (max-width:650px){.known-list{grid-template-columns:1fr}.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-stats{grid-template-columns:1fr}.block-gallery{grid-template-columns:repeat(3,1fr)}}

    /* Expérience enrichie : ambiance, défi, grammaire, professeur et musique */
    body{background:
      radial-gradient(circle at 8% 8%,rgba(255,184,54,.35),transparent 27%),
      radial-gradient(circle at 92% 82%,rgba(207,15,42,.24),transparent 32%),
      linear-gradient(145deg,#ffe9d3 0%,#f8c7b4 46%,#f6dfc5 100%);background-attachment:fixed}
    body.traditional{background:
      radial-gradient(circle at 8% 8%,rgba(73,194,255,.30),transparent 28%),
      radial-gradient(circle at 90% 82%,rgba(13,102,190,.27),transparent 34%),
      linear-gradient(145deg,#def5ff 0%,#bedff1 48%,#e7f6f7 100%)}
    body::before{opacity:.72;background-image:linear-gradient(135deg,transparent 0 48%,var(--wash) 49% 51%,transparent 52%),radial-gradient(color-mix(in srgb,var(--accent) 34%,transparent) .8px,transparent .8px);background-size:76px 76px,12px 12px}
    .welcome-gate{background-position:center 30%;box-shadow:inset 0 -180px 180px rgba(34,2,7,.28),inset 0 0 100px rgba(123,9,21,.18)}
    .music-controls{position:fixed;left:18px;bottom:18px;z-index:860;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 10px 30px rgba(40,10,10,.18);backdrop-filter:blur(10px)}
    .music-controls button{width:35px;height:35px;border:0;border-radius:50%;background:var(--accent);color:white;cursor:pointer}.music-controls label{font-size:11px;color:var(--muted);font-weight:800}.music-controls input{width:88px;accent-color:var(--accent)}
    .teacher-buddy{position:fixed;right:18px;bottom:16px;z-index:1050;width:clamp(118px,14vw,174px);border:0;background:transparent;cursor:pointer;padding:0;filter:drop-shadow(0 12px 18px rgba(45,13,8,.3));transition:transform .2s}
    .teacher-buddy:hover{transform:translateY(-5px) rotate(1deg)}.teacher-buddy img{display:block;width:100%;aspect-ratio:1/1.02;object-fit:cover;object-position:center 48%;border-radius:48% 48% 35% 35%;border:3px solid rgba(255,240,187,.9)}
    .teacher-buddy .wave{position:absolute;right:-4px;top:3px;font-size:31px;transform-origin:bottom left;animation:teacherWave 1.5s ease-in-out infinite}.teacher-bubble{position:absolute;right:88%;bottom:58%;width:205px;padding:10px 12px;border-radius:15px 15px 3px 15px;background:#fff9e9;color:#542719;font-size:12px;line-height:1.35;font-weight:750;box-shadow:0 9px 25px rgba(30,5,5,.2)}
    @keyframes teacherWave{50%{transform:rotate(22deg)}}
    .challenge,.grammar{display:none}.challenge.active,.grammar.active{display:block}.challenge-menu,.grammar-card{border:1px solid var(--line);border-radius:26px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:var(--shadow);padding:clamp(22px,4vw,38px)}
    .section-kicker{color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.challenge h2,.grammar h2{margin:5px 0 8px;font:800 clamp(27px,4vw,39px)/1.15 "Noto Serif SC",serif}.section-intro{margin:0 0 22px;color:var(--muted);line-height:1.6}.challenge-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.challenge-level{position:relative;min-height:104px;text-align:left;padding:16px;border:1px solid var(--line);border-radius:16px;color:var(--ink);background:linear-gradient(135deg,var(--card),var(--soft));cursor:pointer}.challenge-level:hover{border-color:var(--accent);transform:translateY(-2px)}.challenge-level strong{display:block;font-size:19px;color:var(--accent-dark)}.challenge-level span{display:block;margin-top:6px;color:var(--muted);font-size:12px}.challenge-level.won::after{content:'🏆';position:absolute;right:12px;top:12px;font-size:23px}
    .challenge-game{display:none;max-width:780px;margin:auto;border:1px solid var(--line);border-radius:27px;background:var(--card);box-shadow:var(--shadow);padding:clamp(22px,5vw,48px);text-align:center}.challenge-game.active{display:block}.challenge-hud{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px}.challenge-lives{font-size:21px;letter-spacing:3px}.quiz-hanzi{margin:34px 0 27px;font:700 clamp(64px,14vw,116px)/1 "Noto Serif SC",serif}.quiz-answers{display:grid;gap:10px}.quiz-answer{border:1px solid var(--line);border-radius:14px;padding:14px;background:color-mix(in srgb,var(--card) 85%,var(--soft));color:var(--ink);cursor:pointer;font-weight:720}.quiz-answer:hover{border-color:var(--accent)}.quiz-answer.good{background:#dff5e9;border-color:#2e8d65;color:#185a41}.quiz-answer.bad{background:#ffe1e2;border-color:#c83c4a;color:#84212d}.quiz-feedback{min-height:27px;margin:15px 0 0;font-weight:800}.quiz-exit{margin-top:15px;border:0;background:transparent;color:var(--muted);cursor:pointer;text-decoration:underline}
    .grammar-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 0}.grammar-toolbar label{font-weight:800}.grammar-toolbar select{min-width:220px}.grammar-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:23px;align-items:start}.grammar-points{display:grid;gap:9px}.grammar-point{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}.grammar-point summary{cursor:pointer;padding:14px 16px;font-weight:850;color:var(--accent-dark);list-style:none}.grammar-point summary::-webkit-details-marker{display:none}.grammar-point summary::after{content:'＋';float:right}.grammar-point[open] summary::after{content:'−'}.grammar-body{border-top:1px solid var(--line);padding:16px;white-space:pre-line;color:var(--ink);line-height:1.7;font-size:14px}.grammar-teacher{position:sticky;top:18px;text-align:center}.grammar-teacher img{width:100%;border-radius:22px;box-shadow:0 14px 30px rgba(40,12,8,.18)}.grammar-teacher p{margin:10px 0;color:var(--muted);font-size:12px}.grammar-count{margin-left:auto;color:var(--muted);font-size:12px}
    .challenge-reward-title{margin:22px 0 8px;font-size:17px}.challenge-reward-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.challenge-reward-grid .reward-tile{aspect-ratio:1}.reward-tile.locked.challenge-lock::before{content:'🏆'}.challenge-reward-grid .reward-tile figcaption{font-size:10px}
    .decision-card{width:min(520px,100%);text-align:center;background:var(--card);border:1px solid var(--line);border-radius:25px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.35)}.decision-card h2{font:850 32px/1.15 "Noto Serif SC",serif;margin:8px 0}.decision-actions{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}
    @media(max-width:760px){.challenge-levels{grid-template-columns:repeat(2,minmax(0,1fr))}.grammar-layout{grid-template-columns:1fr}.grammar-teacher{display:none}.teacher-buddy{width:100px;right:8px;bottom:8px}.teacher-bubble{display:none}.music-controls{left:8px;bottom:8px}.music-controls label{display:none}.music-controls input{width:64px}.welcome-gate{background-position:center 22%}}
  
    /* Fonds personnalisés : Chine simplifiée et Taïwan traditionnel */
    body{background-image:url("./assets/images/b2ff8e863681e24e.webp");background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
    body.traditional{background-image:url("./assets/images/8de5c55b868a4e60.webp");background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
    body::before{display:none}
    .dragon,.bear{display:none!important}
    /* Aide clavier toujours visible et lisible sur les fonds illustrés */
    .keyboard{position:fixed;left:50%;bottom:14px;z-index:850;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 330px);margin:0;padding:10px 16px;border:1px solid rgba(255,255,255,.9);border-radius:14px;background:rgba(255,255,255,.94);color:#4f3831;font-size:12px;font-weight:700;line-height:1.5;box-shadow:0 10px 30px rgba(46,16,10,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
    .keyboard kbd{display:inline-flex;min-width:25px;min-height:25px;align-items:center;justify-content:center;margin:0 2px;padding:1px 7px;border:1px solid color-mix(in srgb,var(--accent) 30%,#d9cdc8);border-bottom-width:3px;border-radius:7px;background:#fff;color:var(--accent-dark);font-weight:850;box-shadow:0 2px 5px rgba(54,20,15,.08)}
    @media(max-width:900px){.keyboard{max-width:calc(100vw - 32px);padding:8px 11px;font-size:11px;text-align:center}}
    @media(max-width:650px){.keyboard{display:none}}


    /* Streak quotidienne */
    .streak-chip{position:fixed;top:16px;left:16px;z-index:855;display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid rgba(255,255,255,.85);border-radius:16px;background:rgba(255,255,255,.94);color:#4f2720;box-shadow:0 9px 28px rgba(45,12,8,.2);backdrop-filter:blur(12px);cursor:pointer;text-align:left}.streak-chip:hover{transform:translateY(-2px)}.streak-chip .top-fire{font-size:28px;filter:drop-shadow(0 3px 5px rgba(218,62,15,.35));animation:topFlame 1.4s ease-in-out infinite}.streak-chip strong{display:block;color:#ee6419;font-size:19px;line-height:1}.streak-chip small{display:block;margin-top:3px;color:var(--muted);font-size:9px;font-weight:800}.streak-chip .top-freeze{display:flex;align-items:center;gap:3px;margin-left:3px;padding-left:9px;border-left:1px solid var(--line);color:#168ac1;font-size:12px;font-weight:900}@keyframes topFlame{50%{transform:translateY(-2px) scale(1.08)}}
    .streak-modal{z-index:940}.streak-card{position:relative;width:min(480px,100%);height:min(720px,90vh);overflow:hidden;border:2px solid rgba(255,255,255,.8);border-radius:30px;background:#30140c;box-shadow:0 35px 100px rgba(0,0,0,.55);isolation:isolate}.streak-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,5,2,.08) 0%,transparent 38%,rgba(20,7,4,.35) 56%,rgba(20,7,4,.9) 100%)}.streak-bear{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;animation:streakBearIn .9s cubic-bezier(.2,.8,.2,1) both}.streak-card.sad .streak-bear{filter:saturate(.88)}@keyframes streakBearIn{from{transform:scale(1.1);opacity:.45}to{transform:scale(1);opacity:1}}
    .streak-count-wrap{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 17px 9px;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:rgba(255,250,239,.86);box-shadow:0 10px 35px rgba(46,14,7,.24);backdrop-filter:blur(12px);color:#542619}.streak-main-flame{position:relative;font-size:47px;line-height:1;filter:drop-shadow(0 6px 8px rgba(231,76,18,.35));animation:streakFlame 1s ease-in-out infinite}.streak-main-flame::after{content:"";position:absolute;inset:30% 18% 2%;border-radius:50%;background:#ffd541;filter:blur(12px);z-index:-1}.streak-count{min-width:58px;color:#ef651b;font-size:48px;font-weight:950;line-height:.9;font-variant-numeric:tabular-nums}.streak-count-label{display:block;color:#6d443a;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}@keyframes streakFlame{50%{transform:translateY(-4px) rotate(3deg) scale(1.08)}}
    .streak-panel{position:absolute;left:16px;right:16px;bottom:16px;padding:18px;border:1px solid rgba(255,255,255,.58);border-radius:22px;background:rgba(255,250,242,.91);box-shadow:0 15px 45px rgba(30,8,4,.3);backdrop-filter:blur(15px);text-align:center;color:#4a2921}.streak-panel h2{margin:0 0 5px;font:900 25px/1.1 "Noto Serif SC",serif}.streak-message{min-height:36px;margin:0;color:#76574e;font-size:12px;line-height:1.45}.streak-week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:14px 0 12px}.streak-day{opacity:0;transform:translateY(18px);animation:streakDayIn .36s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--delay)}.streak-day-label{display:block;margin-bottom:4px;color:#8a7169;font-size:9px;font-weight:900;text-transform:uppercase}.streak-day-dot{display:grid;place-items:center;width:35px;height:35px;margin:auto;border-radius:50%;background:#e6dfda;color:#fff;font-size:16px;font-weight:900}.streak-day.active .streak-day-dot{background:linear-gradient(145deg,#ffb51b,#ef651b);box-shadow:0 4px 11px rgba(239,101,27,.3)}.streak-day.freeze .streak-day-dot{background:linear-gradient(145deg,#7edcff,#168fc9)}.streak-day.missed .streak-day-dot{background:#bbb1ae}.streak-day.current .streak-day-dot{background:linear-gradient(145deg,#ffd229,#ed4e16);font-size:20px;animation:currentFire .9s ease-in-out infinite}.streak-day-date{display:block;margin-top:4px;color:#8a7169;font-size:8px;font-weight:800}@keyframes streakDayIn{to{opacity:1;transform:none}}@keyframes currentFire{50%{transform:translateY(-3px) scale(1.12);box-shadow:0 0 0 6px rgba(255,143,20,.15),0 5px 15px rgba(231,72,15,.4)}}
    .streak-freezes{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:12px;color:#197fae;font-size:12px;font-weight:850}.streak-freezes strong{font-size:17px}.streak-rule{display:block;color:#846c64;font-size:9px;font-weight:700}.streak-panel .gate-button{width:100%;padding:11px}.streak-card.sad .streak-panel{background:rgba(243,248,252,.92)}
    @media(max-width:650px){.streak-chip{top:74px;left:8px;padding:7px 9px}.streak-chip .top-fire{font-size:23px}.streak-chip strong{font-size:16px}.streak-chip small{display:none}.streak-card{height:min(690px,94vh)}.streak-count{font-size:41px}.streak-main-flame{font-size:41px}.streak-panel{left:10px;right:10px;bottom:10px;padding:14px 10px}.streak-day-dot{width:31px;height:31px}}


    /* Bibliothèque de 240 lectures */
    .reader-nav{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:9px;margin:22px 0 12px;padding:10px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--soft) 76%,transparent)}.reader-counter{text-align:center;color:var(--accent-dark);font-size:12px;font-weight:900;letter-spacing:.035em}.reader-nav .action{padding:9px 13px;background:var(--card)}.reader-card{overflow:hidden}.reader-card::after{content:"讀";position:absolute;right:-10px;top:-28px;color:var(--wash);font:900 120px/1 "Noto Serif SC",serif;pointer-events:none;z-index:0}.reader-top,.long-text,.reader-nav,.reader-actions,.reader-translation{position:relative;z-index:1}.long-text{min-height:150px}.reader-meta{display:flex;align-items:center;gap:7px}.reader-meta::before{content:"文";display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--accent);color:#fff;font:800 14px/1 "Noto Serif SC",serif}
    @media(max-width:720px){.reader-nav{grid-template-columns:1fr 1fr}.reader-counter{grid-column:1/-1;grid-row:1}.reader-nav .action{font-size:11px;padding:9px 7px}.reader-nav #readerRandom{display:none}}

/* Lóngmò 1.4.1 — transparent TOCFL cards + reader level picker */
body.traditional .flashcards-page .face{background:rgba(246,252,255,.46)!important;backdrop-filter:blur(2.5px)!important;-webkit-backdrop-filter:blur(2.5px)!important}
.reader-level-tabs{display:flex;gap:6px;flex-wrap:wrap}.reader-level-tabs button{cursor:pointer}

.pedagogy-note{display:none;max-width:520px;margin-top:10px;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,white);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);color:var(--muted);font-size:13px;line-height:1.45}.pedagogy-note.show{display:block}.pedagogy-note::before{content:'\00C0 retenir : ';font-weight:800;color:var(--accent)}

/* 1.5.35 — ne jamais enseigner un fallback automatique faible comme s’il était valide. */
.example.quality-pending{font-family:inherit;font-size:16px;font-weight:800;opacity:.78;text-align:center}
.example-fr.quality-pending{font-size:13px;font-style:italic;opacity:.78;text-align:center}
.video-translation-label{display:inline-block;margin-right:6px;padding:1px 5px;border:1px solid currentColor;border-radius:999px;font-size:.68em;font-weight:900;opacity:.72;vertical-align:1px}