@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap"); /* ───────────────────────────────────────────── DUAL THEME: ink (dark) + paper (light) Switched via data-theme="ink" | "paper" on ───────────────────────────────────────────── */ /* ── INK (dark) ── */ :root, [data-theme="ink"] { --bg: #0d0a08; --bg2: #1c1610; --bg3: #2b2118; --text: #f5edd8; --text2: #e0ceaa; --text3: #a09070; --border: rgba(245,237,216,0.12); --border2: rgba(245,237,216,0.22); --card: #1c1610; --card2: #2b2118; --paper-alt: rgba(245,237,216,0.06); --accent: #e04520; --accent2: #d4a830; --green: #2a7a52; --green-lt: rgba(42,122,82,0.2); --red: #c82828; --red-lt: rgba(200,40,40,0.15); --gold: #d4a830; --gold3: #f0ca60; --header-bg: linear-gradient(180deg,#1a0e08,#120a05); --header-stripe: linear-gradient(90deg,transparent,#c8280a 20%,#e04520 50%,#c8280a 80%,transparent); --header-text: #f5edd8; --header-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 0 rgba(224,69,32,0.3); --ibtn-bg: rgba(245,237,216,0.08); --ibtn-border: 1px solid rgba(245,237,216,0.12); --ibtn-color: #c8b890; --ibtn-radius: 8px; --diff-bg: #1c1610; --dbtn-bg: transparent; --dbtn-color: #7a6a58; --dbtn-border:1px solid rgba(255,255,255,0.1); --dbtn-radius:6px; --opt-bg: #2b2118; --opt-border: 1px solid rgba(245,237,216,0.14); --opt-color: #f0e8d0; --opt-radius: 8px; --char-bg: #2b2118; --char-border:1px solid rgba(245,237,216,0.15); --char-color: #f0e8d0; --char-radius:10px; --char-grid: rgba(245,237,216,0.04); --blank-border: rgba(224,69,32,0.5); --blank-bg: rgba(200,40,10,0.08); --blank-color: rgba(245,237,216,0.2); --sel-border: #e04520; --sel-bg: rgba(224,69,32,0.14); --sel-glow: 0 0 0 3px rgba(224,69,32,0.2), 0 0 20px rgba(224,69,32,0.25); --sel-arrow: #e04520; --filled-border: rgba(224,100,40,0.5); --filled-bg: linear-gradient(135deg,rgba(224,69,32,0.15),rgba(200,40,10,0.08)); --filled-color: #e8c060; --correct-bg: linear-gradient(135deg,rgba(42,122,82,0.2),rgba(42,122,82,0.1)); --correct-border:#2a7a52; --correct-color: #6ddfaa; --wrong-bg: rgba(200,40,40,0.15); --wrong-border: #c82828; --wrong-color: #ff7070; --abtn-bg: #2b2118; --abtn-border: 1px solid rgba(245,237,216,0.14); --abtn-color: #9a8870; --abtn-radius: 8px; --primary-bg: linear-gradient(135deg,#c8280a,#e04520); --primary-shadow: 0 2px 14px rgba(200,40,10,0.45); --result-bg: #2b2118; --result-border:1px solid rgba(245,237,216,0.1); --result-text: #f0e8d0; --result-text2:#e0ceaa; --result-expl-bg: rgba(245,237,216,0.05); --result-expl-border:#d4a830; --modal-bg: #1c1610; --modal-hdr: linear-gradient(135deg,#1c1610,#2a1a10); --modal-hdr-stripe: linear-gradient(90deg,transparent,#e04520,#d4a830,#e04520,transparent); --modal-streak:#f0ca60; --modal-streak-shadow: 0 0 30px rgba(240,202,96,0.5); --cal-day-bg: rgba(245,237,216,0.05); --cal-day-color:#e0ceaa; --cal-checked: linear-gradient(135deg,#c8280a,#e04520); --cal-checked-shadow: 0 1px 6px rgba(200,40,10,0.4); --goal-bg: rgba(245,237,216,0.05); --goal-border: 1px solid rgba(245,237,216,0.12); --goal-bar-bg: rgba(245,237,216,0.1); --progress-dot:#2b2118; --close-modal: linear-gradient(135deg,#c8280a,#e04520); --wb-border: rgba(245,237,216,0.1); --wb-word: #f0e8d0; --wb-pinyin: #a09070; --wb-expl-bg: rgba(245,237,216,0.05); --wb-expl-border:#d4a830; --wb-expl-color:#e0ceaa; --wb-meta: #e04520; --wb-empty: #a09070; --combo-bg: linear-gradient(135deg,#b8841a,#d4a830); --combo-color: #0d0a08; --shadow-sm: 0 2px 12px rgba(0,0,0,0.4); --shadow-md: 0 4px 28px rgba(0,0,0,0.55); --radius: 12px; } /* ── PAPER (light) ── */ [data-theme="paper"] { --bg: #faf3e4; --bg2: #fff; --bg3: #f2ead8; --text: #1a1008; --text2: #6b4f2a; --text3: #8b6040; --border: #e8d8c0; --border2: #d0c0a0; --card: #fff; --card2: #f2ead8; --paper-alt: #f2ead8; --accent: #c13b0a; --accent2: #e07b20; --green: #2a7a52; --green-lt: #e8f5ee; --red: #b52020; --red-lt: #ffebee; --gold: #c8941a; --gold3: #c8941a; --header-bg: linear-gradient(180deg,#8b3510,#a04018); --header-stripe: none; --header-text: #fff8ee; --header-shadow: 0 2px 14px rgba(139,53,16,0.4); --ibtn-bg: rgba(255,255,255,0.18); --ibtn-border: none; --ibtn-color: #fff8ee; --ibtn-radius: 50%; --diff-bg: #f2ead8; --dbtn-bg: transparent; --dbtn-color: #8b6040; --dbtn-border:none; --dbtn-radius:20px; --opt-bg: #fff; --opt-border: 2px solid #e0d0b8; --opt-color: #1a1008; --opt-radius: 10px; --char-bg: #fff; --char-border:2.5px solid #e0d0b8; --char-color: #1a1008; --char-radius:12px; --char-grid: rgba(160,130,90,0.07); --blank-border: #c13b0a; --blank-bg: #fff5ee; --blank-color: rgba(26,16,8,0.15); --sel-border: #c13b0a; --sel-bg: #ffeedd; --sel-glow: 0 0 0 4px rgba(193,59,10,0.18); --sel-arrow: #c13b0a; --filled-border: #e07b20; --filled-bg: linear-gradient(135deg,#fff5ee,#ffe8d0); --filled-color: #c13b0a; --correct-bg: linear-gradient(135deg,#e8f5ee,#d4eddf); --correct-border:#2a7a52; --correct-color: #2a7a52; --wrong-bg: #ffebee; --wrong-border: #b52020; --wrong-color: #b52020; --abtn-bg: #fff; --abtn-border: 1.5px solid #e0d0b8; --abtn-color: #6b4f2a; --abtn-radius: 24px; --primary-bg: linear-gradient(135deg,#c13b0a,#e07b20); --primary-shadow: 0 2px 10px rgba(193,59,10,0.3); --result-bg: #fff; --result-border:1px solid #e8d8c0; --result-text: #1a1008; --result-text2:#6b4f2a; --result-expl-bg: #fff8f0; --result-expl-border:#e07b20; --modal-bg: #fff; --modal-hdr: linear-gradient(135deg,#c13b0a,#e07b20); --modal-hdr-stripe: none; --modal-streak:#fff; --modal-streak-shadow: none; --cal-day-bg: #f2ead8; --cal-day-color:#6b4f2a; --cal-checked: linear-gradient(135deg,#c13b0a,#e07b20); --cal-checked-shadow: none; --goal-bg: #f2ead8; --goal-border: none; --goal-bar-bg: #ddd0b8; --progress-dot:#e0d0b8; --close-modal: linear-gradient(135deg,#c13b0a,#e07b20); --wb-border: #f0e4d0; --wb-word: #1a1008; --wb-pinyin: #6b4f2a; --wb-expl-bg: #fff8f0; --wb-expl-border:#e07b20; --wb-expl-color:#5d4e37; --wb-meta: #b52020; --wb-empty: #6b4f2a; --combo-bg: #c8941a; --combo-color: #fff; --shadow-sm: 0 2px 8px rgba(26,16,8,0.08); --shadow-md: 0 4px 20px rgba(26,16,8,0.12); --radius: 14px; } /* ── Font sizes ── */ :root { --fs-base: 16px; --fs-char: clamp(1.9rem,7.5vw,2.8rem); --fs-opt: clamp(1.3rem,5.5vw,1.8rem); } /* ── Reset ── */ * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } /* ── Theme transition ── */ body, .header, .info-bar, .diff-control, .game-area, .char-box, .option-btn, .action-btn, .result-card, .modal, .modal-header, .modal-body, .diff-btn, .icon-btn { transition: background 0.35s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } body { font-family: "Noto Serif SC","PingFang SC","Songti SC","SimSun",serif; background: var(--bg); color: var(--text); font-size: var(--fs-base); min-height: 100dvh; overflow-x: hidden; position: relative; } /* Noise overlay — ink theme only */ [data-theme="ink"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; opacity: 0.025; mix-blend-mode: overlay; } /* All content above overlays */ .header, .info-bar, .diff-control, .game-area, .combo-toast, .modal-overlay { position: relative; z-index: 1; } /* ─── HEADER ─── */ .header { background: var(--header-bg); color: var(--header-text); padding: 10px 14px; display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 100; box-shadow: var(--header-shadow); position: sticky; top: 0; z-index: 100; } .header::before { content: ""; position: absolute; top:0; left:0; right:0; height:3px; background: var(--header-stripe); } .header-title { font-family: "Ma Shan Zheng","ZCOOL KuaiLe",cursive; font-size: clamp(1rem,4vw,1.3rem); letter-spacing: 3px; flex: 1; text-align: center; color: var(--header-text); } [data-theme="ink"] .header-title { text-shadow: 0 0 20px rgba(200,80,20,0.5); } .header-right { display:flex; gap:6px; align-items:center; flex-shrink:0; } .icon-btn { background: var(--ibtn-bg); border: var(--ibtn-border); color: var(--ibtn-color); min-width: 40px; min-height: 40px; border-radius: var(--ibtn-radius); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-btn:active, .icon-btn.active { background: rgba(224,69,32,0.25); border-color: var(--accent); color: var(--header-text); } [data-theme="paper"] .icon-btn:active, [data-theme="paper"] .icon-btn.active { background: rgba(255,255,255,0.38); } .back-btn { font-size:1.2rem; text-decoration:none; } /* ─── Theme button tooltip (shown once) ─── */ .theme-btn-wrap { position: relative; } .theme-tooltip { position: absolute; top: calc(100% + 10px); right: 0; background: #fff8e8; color: #5a3a10; font-family: "Noto Serif SC", serif; font-size: 0.78rem; white-space: nowrap; padding: 8px 12px; border-radius: 8px; border: 1px solid #e0c88a; box-shadow: 0 4px 16px rgba(0,0,0,0.3); pointer-events: none; z-index: 200; opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease, transform 0.3s ease; } .theme-tooltip.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .theme-tooltip-arrow { position: absolute; top: -6px; right: 12px; width: 10px; height: 6px; overflow: hidden; } .theme-tooltip-arrow::before { content: ""; position: absolute; bottom: 0; left: 0; width: 10px; height: 10px; background: #fff8e8; border: 1px solid #e0c88a; transform: rotate(45deg); transform-origin: bottom left; } /* ─── INFO BAR ─── */ .info-bar { display: flex; align-items: center; justify-content: center; gap: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 7px 20px; } .info-item { font-family: "ZCOOL XiaoWei","Noto Serif SC",serif; font-size: 0.9rem; color: var(--text2); } .info-item span { color: var(--gold3); font-size: 1.05rem; font-weight: 900; } [data-theme="paper"] .info-item span { color: var(--accent); } .info-divider { width:1px; height:14px; background:var(--border); margin:0 16px; } .info-wb { cursor:pointer; color:var(--text3); transition:opacity 0.15s; } .info-wb:active { opacity:0.6; } .wb-badge { background: var(--red); color:#fff; border-radius:8px; padding:1px 6px; font-size:0.75rem; font-weight:900; margin-left:4px; vertical-align:middle; display:inline-block; } .wb-badge.empty { background: transparent; color:var(--border2); border:1px solid var(--border); } [data-theme="paper"] .wb-badge.empty { color:#c8b89a; border-color:#c8b89a; } /* ─── DIFF CONTROL ─── */ .diff-control { display:flex; background:var(--diff-bg); border-bottom:1px solid var(--border); padding:8px 16px; gap:8px; justify-content:center; } .diff-btn { flex:1; max-width:110px; border: var(--dbtn-border); background: var(--dbtn-bg); color:var(--dbtn-color); padding:7px 0; border-radius:var(--dbtn-radius); font-size:0.88rem; font-family:"Noto Serif SC",serif; cursor:pointer; min-height:38px; letter-spacing:1px; font-weight:700; } .diff-btn.active { background: var(--accent); color:var(--header-text); border-color: var(--accent); box-shadow: 0 2px 12px rgba(200,40,10,0.35), inset 0 1px 0 rgba(255,255,255,0.08); } /* ─── GAME AREA ─── */ .game-area { padding:20px 16px; max-width:480px; margin:0 auto; } .progress-bar { display:flex; gap:5px; margin-bottom:24px; height:4px; } .progress-dot { flex:1; border-radius:2px; height:4px; background:var(--progress-dot); } [data-theme="ink"] .progress-dot { background: rgba(255,255,255,0.08); } .progress-dot.done { background: var(--green); } .progress-dot.current { background: var(--accent); box-shadow: 0 0 8px rgba(224,69,32,0.7); animation: progressGlow 1.5s ease-in-out infinite; } .progress-dot.skip { background: rgba(200,40,40,0.4); } @keyframes progressGlow { 0%,100% { box-shadow: 0 0 6px rgba(224,69,32,0.5); } 50% { box-shadow: 0 0 14px rgba(224,69,32,0.9); } } #comboDisplay { text-align:center; margin-bottom:8px; min-height:24px; } .combo-text { font-family: "Ma Shan Zheng",cursive; font-size: 1.1rem; color: var(--gold3); letter-spacing:2px; animation: comboIn 0.3s cubic-bezier(0.34,1.56,0.64,1); } [data-theme="ink"] .combo-text { text-shadow: 0 0 16px rgba(240,202,96,0.6); } .idiom-display { display:flex; justify-content:center; gap:clamp(8px,3vw,16px); margin-bottom:32px; position:relative; } [data-theme="ink"] .idiom-display::after { content:""; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); width:60%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent); } .char-box { width:clamp(58px,17vw,80px); height:clamp(58px,17vw,80px); background: var(--char-bg); border: var(--char-border); border-radius: var(--char-radius); display:flex; align-items:center; justify-content:center; font-size: var(--fs-char); font-weight:900; color:var(--char-color); box-shadow: var(--shadow-sm); position:relative; background-image: linear-gradient(var(--char-grid) 1px, transparent 1px), linear-gradient(90deg, var(--char-grid) 1px, transparent 1px); background-size: 50% 50%; } [data-theme="ink"] .char-box { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04); } .char-box.blank { border: 1.5px dashed var(--blank-border); background-color: var(--blank-bg); color: var(--blank-color); animation: blankPulse 2.5s ease-in-out infinite; cursor:pointer; } [data-theme="paper"] .char-box.blank { border-width: 2.5px; } .char-box.blank.selected { border-style: solid; border-width:2px; border-color: var(--sel-border); background-color: var(--sel-bg); transform: scale(1.1); box-shadow: var(--sel-glow); animation: none; color: var(--blank-color); } [data-theme="paper"] .char-box.blank.selected { border-width:3px; } .char-box.blank.selected::after { content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--sel-arrow); } .char-box.filled { border: 1.5px solid var(--filled-border); background: var(--filled-bg); color:var(--filled-color); animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1); } [data-theme="paper"] .char-box.filled { border-width:2.5px; } .char-box.correct { border: 1.5px solid var(--correct-border); background: var(--correct-bg); color:var(--correct-color); animation: correctPop 0.4s ease; } [data-theme="paper"] .char-box.correct { border-width:2.5px; } .char-box.wrong { border: 1.5px solid var(--wrong-border); background: var(--wrong-bg); color:var(--wrong-color); animation: shake 0.4s ease; } [data-theme="paper"] .char-box.wrong { border-width:2.5px; } .char-box .pinyin-hint { position:absolute; top:-22px; font-size:0.6rem; color:var(--text3); font-weight:400; white-space:nowrap; opacity:0.8; } .options-grid { display:grid; grid-template-columns:repeat(4,clamp(52px,13vw,68px)); gap:clamp(7px,2.2vw,12px); margin-bottom:20px; justify-content:center; } .option-btn { aspect-ratio:1; width:100%; border: var(--opt-border); background: var(--opt-bg); border-radius:var(--opt-radius); font-size:var(--fs-opt); font-family:"Noto Serif SC",serif; font-weight:700; color:var(--opt-color); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm); position:relative; overflow:hidden; } [data-theme="ink"] .option-btn { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04); } .option-btn:active { transform:scale(0.88); background: var(--accent); color:var(--header-text); border-color: var(--accent); } .option-btn.used { opacity:0.22; pointer-events:none; } .option-btn.disabled{ opacity:0.12; pointer-events:none; } .action-bar { display:flex; gap:10px; justify-content:center; margin-bottom:16px; flex-wrap:wrap; } .action-btn { border:none; padding:12px 28px; border-radius:var(--abtn-radius); font-size:0.92rem; font-family:"Noto Serif SC",serif; cursor:pointer; min-height:46px; letter-spacing:0.5px; } .action-btn.primary { background: var(--primary-bg); color:var(--header-text); box-shadow: var(--primary-shadow), inset 0 1px 0 rgba(255,255,255,0.1); flex:1; max-width:280px; } .action-btn.primary:active { transform:scale(0.97); } .action-btn.secondary { background: var(--abtn-bg); color:var(--abtn-color); border: var(--abtn-border); } .action-btn.secondary:active { transform:scale(0.95); } /* ─── RESULT CARD ─── */ .result-card { background: var(--result-bg); border-radius: var(--radius); padding: 20px; margin-top:14px; box-shadow: var(--shadow-md); animation: slideUp 0.4s ease; border-top: 3px solid var(--green); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .result-card.wrong-result { border-top-color:var(--red); } .result-card h3 { font-size:1.1rem; margin-bottom:10px; font-family:"Ma Shan Zheng",cursive; letter-spacing:2px; } .result-card .idiom-word { font-size:clamp(1.6rem,6vw,2.2rem); font-weight:900; color:var(--result-text); margin-bottom:4px; letter-spacing:6px; } .result-card .idiom-pinyin { font-size:0.8rem; color:var(--result-text2); margin-bottom:12px; letter-spacing:2px; } .result-card .idiom-explain { font-size:0.9rem; line-height:1.9; color:var(--result-text2); padding:12px 14px; background:var(--result-expl-bg); border-radius:6px; border-left:2px solid var(--result-expl-border); } /* ─── COMBO TOAST ─── */ .combo-toast { position:fixed; top:68px; left:50%; transform:translateX(-50%) translateY(-12px); background: var(--combo-bg); color:var(--combo-color); border-radius:6px; padding:7px 20px; font-family:"Ma Shan Zheng",cursive; font-size:1rem; font-weight:900; box-shadow:0 4px 20px rgba(0,0,0,0.4); opacity:0; pointer-events:none; z-index:150; transition:opacity 0.25s, transform 0.25s; white-space:nowrap; letter-spacing:2px; } .combo-toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* ─── MODALS ─── */ .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; } .modal-overlay.show { display:flex; } .modal { background: var(--modal-bg); border-radius:16px; overflow:hidden; max-width:360px; width:100%; animation:slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px var(--border); } .modal-header { background: var(--modal-hdr); color:#fff; padding:24px 24px 20px; text-align:center; position:relative; } .modal-header::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--modal-hdr-stripe); } .modal-header .streak-display { font-size:3.5rem; font-weight:900; font-family:"Ma Shan Zheng",cursive; line-height:1; color:var(--modal-streak); text-shadow:var(--modal-streak-shadow); } .modal-header .streak-label { font-size:0.85rem; opacity:0.88; margin-top:6px; letter-spacing:1px; } .modal-body { padding:18px 20px 20px; } .modal .calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:14px; } .modal .cal-day { width:100%; aspect-ratio:1; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; background:var(--cal-day-bg); color:var(--cal-day-color); } .modal .cal-day.checked { background:var(--cal-checked); color:#fff; font-weight:700; box-shadow:var(--cal-checked-shadow); } .modal .cal-day.today { outline:1.5px solid var(--accent); outline-offset:1px; } .daily-goal { background:var(--goal-bg); border:var(--goal-border); border-radius:8px; padding:10px 14px; margin-bottom:14px; } .daily-goal-label { font-size:0.8rem; color:var(--text2); margin-bottom:8px; } .daily-goal-bar { height:6px; background:var(--goal-bar-bg); border-radius:3px; overflow:hidden; } .daily-goal-fill { height:100%; background:linear-gradient(90deg,var(--green),#4caf50); border-radius:3px; transition:width 0.5s ease; } [data-theme="ink"] .daily-goal-fill { box-shadow:0 0 8px rgba(42,122,82,0.5); } .close-modal { display:block; width:100%; border:none; border-top:1px solid var(--border); background:var(--close-modal); color:#fff; padding:14px; font-size:0.95rem; font-family:"Noto Serif SC",serif; cursor:pointer; min-height:50px; letter-spacing:1px; } /* ─── WRONG BOOK ─── */ .wb-body { max-height:52vh; overflow-y:auto; padding:8px 16px; } .wb-body::-webkit-scrollbar { width:3px; } .wb-body::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; } .wb-item { padding:14px 0; border-bottom:1px solid var(--wb-border); } .wb-item:last-child { border-bottom:none; } .wb-word { font-size:1.4rem; font-weight:900; letter-spacing:4px; color:var(--wb-word); } .wb-pinyin { font-size:0.75rem; color:var(--wb-pinyin); margin:3px 0 7px; letter-spacing:1px; } .wb-explain { font-size:0.85rem; color:var(--wb-expl-color); line-height:1.7; background:var(--wb-expl-bg); border-radius:6px; padding:8px 12px; border-left:2px solid var(--wb-expl-border); } .wb-meta { font-size:0.72rem; color:var(--wb-meta); margin-top:6px; } .wb-empty { text-align:center; padding:36px 16px; color:var(--wb-empty); font-size:1rem; } .wb-actions { display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--wb-border); } .wb-actions .action-btn { flex:1; padding:12px 0; text-align:center; } /* ─── WHAT'S NEW ─── */ .wn-item { display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border); } .wn-item:last-child { border-bottom:none; } .wn-icon { font-size:1.5rem; flex-shrink:0; margin-top:2px; } .wn-desc { font-size:0.83rem; color:var(--text2); margin-top:3px; line-height:1.7; } /* ─── FLAME ANIMATION ─── */ #flameIcon { display: inline-block; transition: transform 0.3s ease; } #flameIcon.flame-low { animation: flameLow 1.4s ease-in-out infinite; } #flameIcon.flame-mid { animation: flameMid 0.9s ease-in-out infinite; } #flameIcon.flame-high { animation: flameHigh 0.5s ease-in-out infinite; } @keyframes flameLow { 0%,100% { transform: scale(1) rotate(-5deg); } 50% { transform: scale(1.25) rotate(5deg); } } @keyframes flameMid { 0%,100% { transform: scale(1) rotate(-8deg) translateY(0); } 25% { transform: scale(1.3) rotate(6deg) translateY(-2px); } 75% { transform: scale(1.15) rotate(-4deg) translateY(-1px); } } @keyframes flameHigh { 0%,100% { transform: scale(1) rotate(-10deg) translateY(0); filter: brightness(1); } 25% { transform: scale(1.45) rotate(8deg) translateY(-3px); filter: brightness(1.3); } 50% { transform: scale(1.3) rotate(-6deg) translateY(-2px); filter: brightness(1.5); } 75% { transform: scale(1.4) rotate(5deg) translateY(-3px); filter: brightness(1.2); } } /* ─── KEYFRAMES ─── */ @keyframes popIn { 0% { transform:scale(0.75); opacity:0.4; } 100% { transform:scale(1); opacity:1; } } @keyframes correctPop { 0% { transform:scale(1); } 50% { transform:scale(1.2); } 100% { transform:scale(1); } } @keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } } @keyframes slideUp { 0% { transform:translateY(24px); opacity:0; } 100% { transform:translateY(0); opacity:1; } } @keyframes blankPulse { 0%,100% { box-shadow:0 0 0 0 rgba(224,69,32,0.1); } 50% { box-shadow:0 0 0 5px rgba(224,69,32,0.18); } } @keyframes comboIn { 0% { transform:scale(0.5) translateY(4px); opacity:0; } 100% { transform:scale(1) translateY(0); opacity:1; } } /* ─── RESPONSIVE ─── */ @media (max-width:380px) { .header-title { font-size:0.92rem; letter-spacing:1.5px; } .icon-btn { min-width:36px; min-height:36px; } } @media (min-width:600px) { .game-area { padding:28px 36px; } .char-box { width:90px; height:90px; } .options-grid { gap:16px; } }