.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:24px}.game-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;gap:8px}.game-card:not(.game-coming):hover{transform:translateY(-3px);box-shadow:0 8px 24px #00000026;border-color:var(--primary)}.game-card.game-coming{opacity:.6;cursor:default}.gc-icon{font-size:36px}.gc-name{font-size:18px;font-weight:700;color:var(--text)}.gc-desc{font-size:13px;color:var(--text2);line-height:1.5}.gc-tags{margin-top:4px}.gc-tag{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.gc-tag.green{background:var(--success-bg);color:var(--thuy-luc-2)}.gc-tag.yellow{background:var(--warning-bg);color:var(--hoang-kim-2)}.gc-badge-soon{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px;background:var(--border);color:var(--text2)}.game-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.sq-btns{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}.sq-timer-wrap{margin-left:auto}.sq-timer{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;border:3px solid var(--primary);color:var(--primary)}.sq-timer-danger{border-color:var(--danger);color:var(--danger);animation:pulse .5s infinite alternate}@keyframes pulse{0%{opacity:1}to{opacity:.5}}.sq-scorebar{display:flex;gap:24px;font-size:16px;margin-bottom:20px}.sq-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px;text-align:center}.sq-hanzi{font-size:56px;font-weight:700;color:var(--primary);margin-bottom:8px}.sq-pinyin{font-size:20px;color:var(--text2);margin-bottom:24px}.sq-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sq-opt{padding:14px 12px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:15px;cursor:pointer;transition:background .1s}.sq-opt:hover{background:var(--hover)}.sq-opt.sq-correct{background:var(--success-bg);border-color:var(--thuy-luc);color:var(--thuy-luc-2)}.sq-opt.sq-wrong{background:var(--danger-bg);border-color:var(--danger);color:var(--chau-hong-2)}.sq-result{text-align:center;padding:40px 0}.sq-result-emoji{font-size:64px;margin-bottom:12px}.sq-result-stats{font-size:18px;display:flex;flex-direction:column;gap:8px;margin:16px 0}.mem-info{margin-left:auto;display:flex;gap:20px;font-size:15px}.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mem-card{height:90px;cursor:pointer;perspective:600px}.mem-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s;position:relative}.mem-card.mem-flipped .mem-card-inner,.mem-card.mem-matched .mem-card-inner{transform:rotateY(180deg)}.mem-card-front,.mem-card-back{position:absolute;inset:0;border-radius:8px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;border:2px solid var(--border)}.mem-card-front{background:var(--surface);font-size:28px;color:var(--text2)}.mem-card-back{transform:rotateY(180deg);background:var(--surface)}.mem-hanzi{font-size:28px;font-weight:700;color:var(--primary)}.mem-meaning{font-size:13px;color:var(--text);text-align:center;padding:4px;line-height:1.3}.mem-card.mem-matched .mem-card-front,.mem-card.mem-matched .mem-card-back{border-color:var(--thuy-luc);background:var(--success-bg)}.mem-card.mem-matched .mem-hanzi{color:var(--thuy-luc-2)}.mem-result{text-align:center;padding:40px 0;font-size:18px}.mem-result div:first-child{font-size:64px;margin-bottom:12px}@media(max-width:480px){.games-grid{grid-template-columns:repeat(2,1fr)}.mem-grid{grid-template-columns:repeat(4,1fr);gap:6px}.mem-card{height:72px}.sq-options{grid-template-columns:1fr}}.gc-tag.orange{background:var(--warning-bg);color:var(--hoang-kim-2)}.wd-attempts-wrap{margin-left:auto;font-size:15px;color:var(--text2)}.wd-hint{text-align:center;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.wd-hanzi{font-size:52px;font-weight:700;color:var(--primary);line-height:1}.wd-meaning{font-size:16px;color:var(--text2)}.wd-grid{display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:16px}.wd-row{display:flex;gap:8px}.wd-cell{width:80px;height:80px;border:2px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--text);transition:background .25s,border-color .25s;background:var(--surface)}.wd-cell.wd-correct{background:var(--thuy-luc);border-color:var(--thuy-luc);color:var(--on-accent)}.wd-cell.wd-present{background:var(--hoang-kim-2);border-color:var(--hoang-kim-2);color:var(--on-accent)}.wd-cell.wd-absent{background:var(--text3);border-color:var(--text3);color:var(--on-accent)}.wd-message{text-align:center;font-size:18px;font-weight:700;min-height:28px;margin-bottom:8px;color:var(--primary)}.wd-keyboard{display:flex;flex-direction:column;gap:10px}.wd-input-area{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}.wd-input-slot{width:80px;height:48px;border:2px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--text2);background:var(--surface);transition:border-color .15s,color .15s}.wd-input-slot.wd-filled{border-style:solid;border-color:var(--primary);color:var(--primary)}.wd-action-btn{padding:10px 16px;font-size:14px;border-radius:8px}.wd-syllables{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-height:180px;overflow-y:auto;padding:4px 0}.wd-key{padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:13px;cursor:pointer;transition:background .1s,border-color .1s}.wd-key:hover{background:var(--hover)}.wd-key.wd-correct{background:var(--thuy-luc);border-color:var(--thuy-luc);color:var(--on-accent)}.wd-key.wd-present{background:var(--hoang-kim-2);border-color:var(--hoang-kim-2);color:var(--on-accent)}.wd-key.wd-absent{background:var(--text3);border-color:var(--text3);color:var(--on-accent);opacity:.7}.wd-result{text-align:center;padding:32px 0}.wd-answer{font-size:18px;margin:12px 0;line-height:1.8}@media(max-width:480px){.wd-cell{width:64px;height:64px;font-size:15px}.wd-input-slot{width:64px}}.boss-game{max-width:600px;margin:0 auto;padding:16px}.boss-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.boss-arena{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:20px}.boss-fighter{text-align:center;flex:1}.boss-avatar{font-size:48px;margin-bottom:4px}.boss-name{font-weight:600;margin-bottom:6px;color:var(--text)}.boss-vs{font-size:24px;font-weight:700;color:var(--accent)}.boss-hp-bar{height:14px;background:var(--surface);border-radius:7px;overflow:hidden;border:1px solid var(--border)}.boss-hp-fill{height:100%;border-radius:7px;transition:width .4s ease}.boss-hp-player{background:linear-gradient(90deg,var(--thuy-luc),var(--thuy-luc-2))}.boss-hp-enemy{background:linear-gradient(90deg,var(--chau-hong-3),var(--chau-hong))}.boss-hp-text{font-size:12px;color:var(--text2);margin-top:2px}.boss-skill-msg{text-align:center;padding:8px;background:var(--warning-bg);color:var(--hoang-kim);border-radius:8px;font-weight:600;margin-bottom:12px}.boss-question{text-align:center;margin-bottom:16px}.boss-q-hanzi{font-size:36px;font-weight:700;font-family:Noto Sans SC,sans-serif}.boss-q-meaning{font-size:20px;font-weight:600;color:var(--text)}.boss-q-sub{font-size:14px;color:var(--text2);margin-top:4px}.boss-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.boss-opt{padding:12px;border-radius:10px;background:var(--surface);border:2px solid var(--border);font-size:15px;cursor:pointer;transition:all .2s;color:var(--text)}.boss-opt:hover{border-color:var(--primary)}.boss-result{text-align:center;margin-top:24px}.boss-result-emoji{font-size:48px}@keyframes boss-shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.boss-shake{animation:boss-shake .4s ease}.boss-level-select{text-align:center}.boss-level-select h3{margin-bottom:16px;color:var(--text)}.boss-levels{display:flex;flex-direction:column;gap:12px}.boss-level-btn{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:12px;background:var(--surface);border:2px solid var(--border);cursor:pointer;font-size:15px;color:var(--text);transition:all .2s;text-align:left}.boss-level-btn:hover{border-color:var(--primary);background:var(--primary-light)11}.boss-level-btn .boss-avatar{font-size:36px}.boss-cleared{color:var(--thuy-luc)}.race-game{max-width:700px;margin:0 auto;padding:16px}.race-track{overflow-x:auto;margin-bottom:20px}.race-lane{display:flex;align-items:center;gap:6px;margin-bottom:4px}.race-label{width:80px;font-size:12px;font-weight:600;color:var(--text2);flex-shrink:0;white-space:nowrap;overflow:hidden}.race-cells{display:flex;gap:2px;flex:1}.race-cell{width:28px;height:28px;border-radius:4px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}.race-cell.race-active{background:var(--primary-light)22;border-color:var(--primary)}.race-cell.race-finish{background:#fbbf2422}.race-car{font-size:16px}.race-question{text-align:center;margin-bottom:12px;font-size:18px;color:var(--text)}.race-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.race-result{text-align:center}.race-ranking{display:flex;flex-direction:column;gap:6px;margin:16px auto;max-width:250px;font-size:16px}.sent-game{max-width:560px;margin:0 auto;padding:16px 12px}.sent-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.sent-title{flex:1;text-align:center;font-size:17px;font-weight:700;color:var(--text)}.sent-progress{background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:3px 12px;font-size:13px;font-weight:700;color:var(--primary);white-space:nowrap}.sent-progress-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:20px}.sent-progress-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s ease;flex-shrink:0}.sent-progress-dot.dot-done{background:var(--thuy-luc)}.sent-progress-dot.dot-current{background:var(--primary);width:22px;border-radius:4px}.sent-prompt{margin-bottom:18px}.sent-vi{font-size:17px;font-weight:600;color:var(--text);padding:16px 20px;background:var(--surface);border-radius:14px;border:1px solid var(--border);border-left:4px solid var(--primary);line-height:1.55;text-align:center}.sent-slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;min-height:64px;padding:14px 12px;background:var(--surface2);border-radius:14px;border:2px dashed var(--border);margin-bottom:16px;transition:border-color .25s,background .25s}.sent-slot{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:46px;padding:4px 10px;border-radius:10px;font-size:20px;font-family:Noto Sans SC,sans-serif;cursor:pointer;transition:all .15s ease;font-weight:500}.sent-slot.sent-empty{background:var(--surface);border:2px dashed var(--border);min-width:42px}.sent-slot.sent-filled{background:var(--primary);color:var(--on-accent);border:2px solid transparent;box-shadow:0 3px 10px rgba(var(--primary-rgb),.35);animation:slotPop .15s ease}.sent-slot.sent-filled:hover{background:var(--primary-light);transform:translateY(-2px);box-shadow:0 5px 14px rgba(var(--primary-rgb),.4)}@keyframes slotPop{0%{transform:scale(.75);opacity:.4}70%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}.sent-wrong-shake{animation:sentShake .35s ease}@keyframes sentShake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}60%{transform:translate(5px)}}.sent-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:8px 4px 16px;min-height:60px}.sent-token{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:50px;padding:4px 14px;border-radius:12px;background:var(--surface);border:2px solid var(--border);font-size:21px;font-family:Noto Sans SC,sans-serif;cursor:pointer;transition:all .15s ease;color:var(--text);font-weight:500;box-shadow:0 2px 8px #0000001a;user-select:none}.sent-token:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-3px);box-shadow:0 6px 16px #c0392b38}.sent-token:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.sent-actions{display:flex;gap:10px;justify-content:center;margin-bottom:12px}.sent-feedback{text-align:center;padding:14px 16px;border-radius:12px;font-size:15px;font-weight:600;margin-top:8px;animation:fbSlide .2s ease}@keyframes fbSlide{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.sent-feedback.sent-correct{background:var(--success-bg);color:var(--thuy-luc-2);border:1px solid rgba(16,185,129,.3)}.sent-feedback.sent-wrong{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(220,38,38,.25)}[data-theme=dark] .sent-feedback.sent-correct{color:var(--thuy-luc)}[data-theme=dark] .sent-feedback.sent-wrong{color:var(--chau-hong-3)}.sent-result{text-align:center;margin-top:28px}@media(max-width:480px){.boss-arena{gap:12px}.boss-avatar{font-size:36px}.boss-options{grid-template-columns:1fr}.race-cell{width:20px;height:20px;font-size:9px}.race-car{font-size:12px}.race-label{width:60px;font-size:10px}.race-options{grid-template-columns:1fr}.sent-slot{min-width:34px;height:38px;font-size:17px;padding:2px 8px}.sent-token{min-width:38px;height:42px;font-size:18px;padding:2px 10px}.sent-vi{font-size:15px;padding:12px 14px}}HANDWRITING GAME (F3) .hw-game{max-width:500px;margin:0 auto;padding:16px}.hw-setup{text-align:center;padding:20px 0}.hw-setup h3{margin-bottom:16px;color:var(--text)}.hw-level-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.hw-level-row label{font-size:14px;color:var(--text)}.hw-level-row select{padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.hw-prompt{text-align:center;margin-bottom:16px}.hw-meaning{font-size:20px;font-weight:600;color:var(--text);margin-bottom:4px}.hw-pinyin-hint{font-size:16px;color:var(--primary)}.hw-writer-wrap{display:flex;justify-content:center;margin-bottom:16px;min-height:200px}.hw-feedback{text-align:center;padding:8px;border-radius:8px;font-size:15px;min-height:20px}.hw-result-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}.hw-result-item:last-child{border-bottom:none}.tone-game{max-width:500px;margin:0 auto;padding:16px}.tone-play-area{text-align:center;margin-bottom:16px}.tone-hanzi{font-size:40px;font-weight:700;font-family:Noto Sans SC,sans-serif;color:var(--text);margin-bottom:12px}.tone-syl-group{margin-bottom:12px}.tone-syl-label{font-size:13px;color:var(--text2);margin-bottom:6px;text-align:center}.tone-btns{display:flex;gap:8px;justify-content:center}.tone-btn{padding:10px 16px;border-radius:8px;border:2px solid var(--border);background:var(--surface);cursor:pointer;font-size:16px;color:var(--text);transition:all .2s;min-width:50px}.tone-btn:hover{border-color:var(--primary)}.tone-btn.tone-selected{background:var(--primary);color:var(--on-accent);border-color:var(--primary)}.tone-feedback{text-align:center;padding:8px;border-radius:8px;font-size:15px;margin-top:12px;min-height:20px}.cloze-game{max-width:600px;margin:0 auto;padding:16px}.cloze-sentence{text-align:center;margin-bottom:20px;padding:20px;background:var(--surface);border-radius:12px;border:1px solid var(--border)}.cloze-zh{font-size:22px;font-family:Noto Sans SC,sans-serif;color:var(--text);line-height:1.6}.cloze-blank{display:inline-block;min-width:60px;border-bottom:3px solid var(--primary);color:var(--primary);font-weight:700}.cloze-trans{font-size:14px;color:var(--text2);margin-top:8px}.cloze-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.cloze-feedback{text-align:center;padding:8px;border-radius:8px;font-size:15px;min-height:20px}@media(max-width:480px){.cloze-options{grid-template-columns:1fr}}.game-card{position:relative}.gc-pro-badge{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;background:var(--primary);color:var(--on-accent);padding:2px 7px;border-radius:10px;letter-spacing:.3px}
