html { scrollbar-gutter: stable; }
:root {
--gold: #8B6310; --gold-bright: #C8973A; --gold-light: #F3E4C2; --gold-deep: #5a3e0a;
--ink: #1C1C1C; --ink-soft: #333333; --ink-muted: #666666;
--white: #FFFFFF; --off-white: #F5F0E8; --border: rgba(139,99,16,0.18);
--card-bg: #F5F0E8; --nav-h: 60px;
--cream: #FBF5E7; --cream-soft: #F9F6F0; --warm-line: rgba(139,99,16,0.30);
/* difficulty ramp — easy→hard, light→dark */
--d1:#A07820; --d1-bg:#FDF4DC; --d2:#8B6310; --d2-bg:#F8EAC0;
--d3:#7A5510; --d3-bg:#F4E0A8; --d4:#5A3C08; --d4-bg:#EDD898;
}
* { margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; }
a:visited { color: currentColor; }
body { background:#F5F0E8; color:var(--ink); font-family:'Noto Serif TC',serif; overflow-x:hidden; padding-top:var(--nav-h); }
/* NAV */
/* 2026-08-10: padding ไหลลื่น (clamp) แทนค่าคงที่ 32px — ยิ่งจอแคบยิ่งลด padding ลงเอง
ก่อนจะถึงจุดที่ต้องสลับเป็นโหมดมือถือ (ดู .nav-compact / @media ท้ายบล็อกนี้) */
nav { position:fixed; top:0; left:0; right:0; height:var(--nav-h); background:rgba(17,17,17,0.97); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(16px,3vw,32px); z-index:999; border-bottom:1px solid rgba(200,151,58,0.2); }
.nav-logo { font-family:'Noto Serif TC',serif; font-size:15px; font-weight:900; letter-spacing:1px; cursor:pointer; flex-shrink:0; }
.nav-logo .logo-main { color:var(--white); }
.nav-logo .logo-accent { color:var(--gold-bright); }
.nav-logo .logo-dim { color:var(--gold-bright); font-weight:900; }
/* top-level nav items — flex-shrink:0 กันข้อความถูกบีบเบี้ยวระหว่างที่ JS กำลังวัดความกว้างจริง
(ดู __navFit() ใน js/core/shared.js) ถ้าพอดี = แถวเดียวไม่ตัดคำ ถ้าไม่พอดี JS จะสลับเป็นโหมดมือถือให้เอง */
.nav-links { display:flex; flex-shrink:0; gap:clamp(2px,0.6vw,4px); list-style:none; align-items:center; }
.nav-links > li { position:relative; }
.nav-links > li > a {
font-family:'Noto Sans TC',sans-serif; font-size:12px; font-weight:500;
color:rgba(255,255,255,0.72); text-decoration:none; letter-spacing:0.5px;
transition:color 0.2s; white-space:nowrap; padding:6px clamp(6px,1vw,10px); display:block;
}
.nav-links > li > a:hover { color:var(--gold-bright); }
.nav-links > li > a.has-drop::after { content:'▾'; font-size:9px; margin-left:4px; opacity:0.5; }
/* dropdown panel */
.nav-drop {
display:none; position:absolute; top:calc(100% + 1px); left:0;
background:rgba(17,17,17,0.98); border:1px solid rgba(200,151,58,0.25);
border-top:2px solid var(--gold-bright); min-width:160px; z-index:1000;
padding:8px 0;
}
.nav-links > li:hover .nav-drop { display:block; }
.nav-drop a {
font-family:'Noto Sans TC',sans-serif; font-size:12px; font-weight:400;
color:rgba(255,255,255,0.65); text-decoration:none; display:block;
padding:9px 18px; white-space:nowrap; transition:all 0.15s; letter-spacing:0.3px;
}
.nav-drop a:hover { color:var(--gold-bright); background:rgba(200,151,58,0.08); padding-left:22px; }
.nav-drop-label {
font-family:'Noto Sans TC',sans-serif; font-size:9px; letter-spacing:3px;
text-transform:uppercase; color:rgba(200,151,58,0.5); font-weight:700;
padding:10px 18px 4px; display:block;
}
.nav-drop-divider { height:1px; background:rgba(255,255,255,0.06); margin:6px 0; }
.nav-links > li > a.nav-current { color:var(--gold-bright); font-weight:700; }
.nav-drop a.nav-current { color:var(--gold-bright); background:rgba(200,151,58,0.08); }
.nav-cta { background:var(--gold-bright) !important; color:var(--ink) !important; font-weight:700 !important; padding:8px clamp(10px,1.6vw,18px) !important; font-size:12px !important; }
.nav-cta:hover { background:#b07820 !important; color:var(--ink) !important; }
/* 2026-08-10: 遊戲 = secondary CTA — เด่นกว่าลิงก์ธรรมดาแต่ไม่แย่งซีน 免費試聽 (primary CTA ทึบทอง) */
.nav-cta-secondary { border:1px solid var(--gold-bright) !important; color:var(--gold-bright) !important; font-weight:700 !important; padding:6px clamp(8px,1.3vw,14px) !important; border-radius:4px; }
.nav-cta-secondary:hover { background:rgba(200,151,58,0.12) !important; color:var(--gold-bright) !important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:22px; height:2px; background:rgba(255,255,255,0.8); }
.nav-mobile-actions { display:none; }
.nav-mobile-cta, .nav-mobile-game { display:none; }
/* 2026-08-10: RESPONSIVE NAV — แก้บั๊ก "เมนู desktop หายเร็วเกินไปตอนย่อหน้าต่าง"
เดิม breakpoint ตายตัวที่ 900px กว้างเกินความจำเป็นจริงมาก (คำนวณจากความกว้างจริงของ
ตัวอักษร/ปุ่มแล้ว 4 รายการบนสุด 🎮遊戲/學習資源/更多/免費試聽 พอดีได้ตั้งแต่ ~500-520px)
ตอนนี้ตัวตัดสินใจหลักคือ JS: __navFit() (ฝัง inline ทันทีหลัง