/* 主題變數與樣式 */
:root {
	--bg-color: #f3f4f6;
	--text-color: #1f2937;
	--card-bg: #ffffff;
	--primary: #3b82f6;
	--secondary: #10b981;
	--accent: #f59e0b;
	--text-muted: #6b7280;
	--inner-bg: rgba(0,0,0,0.03);
	--inner-bg-hover: rgba(0,0,0,0.06);
	--border-light: rgba(0,0,0,0.08);
}
body{user-select: none;}
body.theme-light { background-color: var(--bg-color); color: var(--text-color); }
body.theme-dark {
	--bg-color: #111827; --text-color: #f9fafb; --card-bg: #1f2937;
	--primary: #60a5fa; --secondary: #34d399; --accent: #fbbf24;
	--text-muted: #9ca3af; --inner-bg: rgba(255,255,255,0.05); --inner-bg-hover: rgba(255,255,255,0.1); --border-light: rgba(255,255,255,0.1);
	background-color: var(--bg-color); color: var(--text-color);
}
body.theme-cyberpunk {
	--bg-color: #09090b; --text-color: #f4f4f5; --card-bg: #18181b;
	--primary: #ec4899; --secondary: #8b5cf6; --accent: #14b8a6;
	--text-muted: #a1a1aa; --inner-bg: rgba(255,255,255,0.05); --inner-bg-hover: rgba(255,255,255,0.1); --border-light: rgba(255,255,255,0.1);
	background-color: var(--bg-color); color: var(--text-color);
}
body.theme-ink {
	--bg-color: #e5e5e5; --text-color: #262626; --card-bg: #f5f5f5;
	--primary: #52525b; --secondary: #3f3f46; --accent: #71717a;
	--text-muted: #52525b; --inner-bg: rgba(0,0,0,0.04); --inner-bg-hover: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.1);
	background-color: var(--bg-color); color: var(--text-color);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" opacity="0.05"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
}
body.theme-scroll {
	--bg-color: #fdf6e3; --text-color: #4a3c31; --card-bg: #fdf0d5;
	--primary: #8b5a2b; --secondary: #556b2f; --accent: #cd853f;
	--text-muted: #78350f; --inner-bg: rgba(139,90,43,0.05); --inner-bg-hover: rgba(139,90,43,0.1); --border-light: rgba(139,90,43,0.15);
	background-color: var(--bg-color); color: var(--text-color);
	border-left: 10px solid #8b5a2b; border-right: 10px solid #8b5a2b;
}
body.theme-ocean {
	--bg-color: #e0f2fe; --text-color: #0c4a6e; --card-bg: #bae6fd;
	--primary: #0284c7; --secondary: #0ea5e9; --accent: #f59e0b;
	--text-muted: #0369a1; --inner-bg: rgba(2,132,199,0.05); --inner-bg-hover: rgba(2,132,199,0.1); --border-light: rgba(2,132,199,0.15);
	background-color: var(--bg-color); color: var(--text-color);
}
body.theme-forest {
	--bg-color: #dcfce7; --text-color: #14532d; --card-bg: #bbf7d0;
	--primary: #16a34a; --secondary: #22c55e; --accent: #eab308;
	--text-muted: #15803d; --inner-bg: rgba(22,163,74,0.05); --inner-bg-hover: rgba(22,163,74,0.1); --border-light: rgba(22,163,74,0.15);
	background-color: var(--bg-color); color: var(--text-color);
}
body.theme-sunset {
	--bg-color: #ffedd5; --text-color: #7c2d12; --card-bg: #fed7aa;
	--primary: #ea580c; --secondary: #f97316; --accent: #8148bf;
	--text-muted: #c2410c; --inner-bg: rgba(234,88,12,0.05); --inner-bg-hover: rgba(234,88,12,0.1); --border-light: rgba(234,88,12,0.15);
	background-color: var(--bg-color); color: var(--text-color);
}
/* 自適應共用 Class */
.card { background-color: var(--card-bg); color: var(--text-color); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.text-muted { color: var(--text-muted); }
.bg-surface { background-color: var(--inner-bg); }
.bg-surface-hover { background-color: var(--inner-bg-hover); }
.border-subtle { border-color: var(--border-light); }
.btn-primary { background-color: var(--primary); color: white; }
.btn-secondary { background-color: var(--secondary); color: white; }
.btn-accent { background-color: var(--accent); color: white; }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
/* 動畫與特效 */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.level-up-overlay {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.8); z-index: 100; display: none;
	flex-direction: column; justify-content: center; align-items: center;
}
.level-up-text { font-size: 3rem; font-weight: bold; color: #fbbf24; text-shadow: 0 0 20px #f59e0b; animation: scaleBounce 1s cubic-bezier(0.28, 0.84, 0.42, 1); }
@keyframes scaleBounce { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.toast {
	position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
	background: rgba(0,0,0,0.8); color: white; padding: 12px 24px;
	border-radius: 30px; z-index: 1000; opacity: 0; transition: opacity 0.3s; pointer-events: none;
	font-weight: bold; font-size: 1.1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	width: max-content; max-width: 90vw;
}
/* 填空題與字塊 */
.char-slot { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: bold; border: 2px dashed var(--border-light); border-radius: 0.75rem; cursor: pointer; transition: all 0.2s; }
.char-slot.filled { border-style: solid; border-color: var(--primary); background-color: var(--primary); color: white; }
.char-block { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: bold; border-radius: 0.75rem; cursor: pointer; transition: all 0.2s; background: var(--card-bg); border: 2px solid var(--border-light); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.char-block.selected { background: var(--primary); border-color: var(--primary); color: white; transform: scale(0.95); }
.char-block.cleared { opacity: 0; pointer-events: none; transform: scale(0.5); }
/* 進度條 */
.progress-bar { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.exp-glow { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
#app-container { max-width: 600px; margin: 0 auto; min-height: 100vh; position: relative; padding-bottom: 20px; }