789 lines
25 KiB
CSS
789 lines
25 KiB
CSS
@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 <html>
|
|
───────────────────────────────────────────── */
|
|
|
|
/* ── 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; }
|
|
}
|