/* ═══════════════════════════════════════════════════════════════ practice-3d/themes.css — ระบบธีมกราฟิกกลาง (แม่แบบทุกวิชา) ───────────────────────────────────────────────────────────── วิธีใช้: หรือเซ็ตจาก data.js → SET.theme ปรับรายละเอียดเฉพาะงาน: SET.themeVars = {"--p1":"#FF00AA", ...} ───────────────────────────────────────────────────────────── ตัวแปรที่ทุกธีมต้องกำหนด: --bgA/--bgB/--bgC ไล่เฉดพื้นหลังหน้า (บน→ล่าง) --g1/--g2/--g3 แสงเรือง radial 3 จุด (rgba) --p1/--p2/--p3 สีหลัก/รอง/เสริม ของธีม --panelA/--panelB เนื้อวัสดุแผ่นลอย (โปร่งแสง) --line เส้นขอบ/เส้นแบ่ง --gridc สีลวดลายพื้นเวที (ตาราง/จุด/คลื่น) --ink/--sub สีตัวอักษรหลัก/รอง (คงคอนทราสต์สูงทุกธีม) * --amber = สีรางวัล/คะแนน ใช้ร่วมทุกธีม (สเปก §8.1) ═══════════════════════════════════════════════════════════════ */ :root{ --ink:#F2F6FF; --sub:#8FA3CE; --amber:#FFC94D; --ok:#3ED598; --warn:#FF7E6B; } /* ── 🧮 math · กาแล็กซีตัวเลข (ครามลึก/ฟ้าไซเบอร์/ม่วง) ── */ :root, [data-theme="math"]{ --bgA:#0A0F26; --bgB:#0D1330; --bgC:#101A3E; --g1:rgba(91,108,255,.28); --g2:rgba(57,214,245,.14); --g3:rgba(155,123,255,.16); --p1:#5B6CFF; --p2:#39D6F5; --p3:#9B7BFF; --panelA:rgba(126,146,255,.16); --panelB:rgba(60,74,140,.10); --panelC:rgba(57,214,245,.08); --line:rgba(155,180,255,.22); --bord:rgba(170,195,255,.28); --gridc:rgba(120,150,255,.32); --sub:#8FA3CE; } /* ── 🔬 science · ห้องแล็บมรกต (เขียวลึก/มิ้นต์/ฟ้าน้ำทะเล) ── */ [data-theme="science"]{ --bgA:#03170F; --bgB:#062219; --bgC:#0A2E24; --g1:rgba(43,217,138,.22); --g2:rgba(62,207,223,.13); --g3:rgba(154,235,120,.10); --p1:#2BD98A; --p2:#3ECFDF; --p3:#9AEB78; --panelA:rgba(110,235,180,.14); --panelB:rgba(40,110,90,.10); --panelC:rgba(62,207,223,.08); --line:rgba(140,230,190,.20); --bord:rgba(160,240,205,.26); --gridc:rgba(90,220,160,.30); --sub:#8FC9AF; } /* ── 📖 thai · ลานวรรณศิลป์ยามค่ำ (ม่วงพลบ/ชมพูกุหลาบ/ทองอุ่น) ── */ [data-theme="thai"]{ --bgA:#220A1E; --bgB:#2E0F2A; --bgC:#3B1430; --g1:rgba(255,123,172,.22); --g2:rgba(255,179,92,.14); --g3:rgba(196,110,255,.14); --p1:#FF7BAC; --p2:#FFB35C; --p3:#C46EFF; --panelA:rgba(255,150,190,.14); --panelB:rgba(120,50,95,.11); --panelC:rgba(255,179,92,.07); --line:rgba(255,170,205,.20); --bord:rgba(255,185,215,.26); --gridc:rgba(255,140,190,.26); --sub:#D3A0BC; } /* ── 🅰️ english · ท้องฟ้าสู่โลกกว้าง (น้ำเงินเที่ยงคืน/ฟ้าใส/ขาวนวล) ── */ [data-theme="english"]{ --bgA:#061A33; --bgB:#0A2344; --bgC:#0E2C52; --g1:rgba(77,163,255,.26); --g2:rgba(123,224,255,.14); --g3:rgba(140,150,255,.12); --p1:#4DA3FF; --p2:#7BE0FF; --p3:#8C96FF; --panelA:rgba(120,180,255,.15); --panelB:rgba(45,85,150,.11); --panelC:rgba(123,224,255,.08); --line:rgba(150,200,255,.22); --bord:rgba(165,210,255,.28); --gridc:rgba(110,180,255,.30); --sub:#8FB4DE; } /* ── 🌏 social · แผนที่นักสำรวจ (น้ำตาลทองแดง/ส้มอาทิตย์อัสดง/เขียวหยก) ── */ [data-theme="social"]{ --bgA:#1C1006; --bgB:#26160A; --bgC:#33200E; --g1:rgba(255,171,73,.22); --g2:rgba(255,126,95,.14); --g3:rgba(46,196,166,.12); --p1:#FFAB49; --p2:#FF7E5F; --p3:#2EC4A6; --panelA:rgba(255,190,120,.13); --panelB:rgba(130,80,40,.11); --panelC:rgba(46,196,166,.07); --line:rgba(255,200,150,.20); --bord:rgba(255,210,165,.26); --gridc:rgba(255,180,110,.26); --sub:#D3B08A; } /* ── 🏆 arena · สังเวียนแชมป์ สอบเข้า/แข่งขัน (แดงทับทิม/ทอง/ชมพูไฟ) ── */ [data-theme="arena"]{ --bgA:#1B0712; --bgB:#26091A; --bgC:#331024; --g1:rgba(255,93,115,.24); --g2:rgba(255,201,77,.13); --g3:rgba(255,120,190,.12); --p1:#FF5D73; --p2:#FFC94D; --p3:#FF78BE; --panelA:rgba(255,130,155,.14); --panelB:rgba(130,45,70,.11); --panelC:rgba(255,201,77,.07); --line:rgba(255,160,180,.20); --bord:rgba(255,175,195,.26); --gridc:rgba(255,120,150,.26); --sub:#D69AAC; } /* ═══ องค์ประกอบที่ผูกกับธีม (ใช้ร่วมทุกหน้า) ═══ */ body{ color:var(--ink); background: radial-gradient(1200px 700px at 75% -10%, var(--g1), transparent 60%), radial-gradient(900px 600px at 10% 110%, var(--g2), transparent 55%), radial-gradient(700px 500px at 90% 95%, var(--g3), transparent 60%), linear-gradient(180deg, var(--bgA) 0%, var(--bgB) 45%, var(--bgC) 100%); } /* จุดดาวประกาย (ทุกธีม โทนตามแสง) */ .bgdeco{position:fixed;inset:0;pointer-events:none;opacity:.5; background-image: radial-gradient(2px 2px at 12% 22%, rgba(225,235,255,.35), transparent 60%), radial-gradient(1.6px 1.6px at 68% 12%, rgba(225,235,255,.30), transparent 60%), radial-gradient(2px 2px at 85% 40%, rgba(200,230,255,.24), transparent 60%), radial-gradient(1.6px 1.6px at 30% 74%, rgba(225,235,255,.22), transparent 60%), radial-gradient(2px 2px at 55% 88%, rgba(215,220,255,.20), transparent 60%); } /* วงแสงลอย 2 ดวง เพิ่มมิติ (transform-only · เบามาก) */ .orb{position:fixed;border-radius:50%;pointer-events:none;filter:none;opacity:.55} .orb.o1{width:340px;height:340px;left:-120px;top:12%; background:radial-gradient(circle at 35% 35%, var(--g1), transparent 70%)} .orb.o2{width:260px;height:260px;right:-90px;bottom:18%; background:radial-gradient(circle at 60% 40%, var(--g3), transparent 70%)} /* ── ลวดลายพื้นเวที: ต่างกันตามธีม (ฉากเปลี่ยนทุกวิชา) ── */ .bggrid{position:fixed;left:-10%;right:-10%;bottom:-6%;height:42%;pointer-events:none;opacity:.20; transform:perspective(600px) rotateX(58deg);transform-origin:50% 100%; background: repeating-linear-gradient(90deg, var(--gridc) 0 1px, transparent 1px 88px), repeating-linear-gradient(0deg, var(--gridc) 0 1px, transparent 1px 52px);} [data-theme="science"] .bggrid{ /* จุดโมเลกุล */ background:radial-gradient(circle 3px at 10px 10px, var(--gridc) 90%, transparent), radial-gradient(circle 2px at 40px 34px, var(--gridc) 90%, transparent); background-size:64px 48px;} [data-theme="thai"] .bggrid{ /* คลื่นลายผ้า */ background:repeating-radial-gradient(circle at 50% 130%, transparent 0 34px, var(--gridc) 34px 36px);} [data-theme="english"] .bggrid{ /* เส้นรันเวย์เฉียง */ background:repeating-linear-gradient(105deg, var(--gridc) 0 2px, transparent 2px 70px);} [data-theme="social"] .bggrid{ /* เส้นละติจูดโค้ง */ background:repeating-radial-gradient(ellipse 140% 90% at 50% 160%, transparent 0 44px, var(--gridc) 44px 46px);} [data-theme="arena"] .bggrid{ /* ลำแสงสปอตไลต์ */ background:repeating-conic-gradient(from 80deg at 50% 140%, var(--gridc) 0 3deg, transparent 3deg 22deg);} /* ── วัสดุแผ่นกระจกวาวลอย ผูกตัวแปรธีม (ใช้ร่วม index + themes) ── ทำ "กระจกวาว" โดยไม่ใช้ backdrop-filter (กฎ GPU อ่อน) — ใช้เลเยอร์แสงแทน: ชั้นบนเงากระจกโปร่ง + เนื้อสีธีม + ริมไลต์ขอบสว่าง + แถบแสงสะท้อนทแยง */ .panel{ background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 16%, transparent 42%), linear-gradient(160deg, var(--panelA), var(--panelB) 55%, var(--panelC)); border:1px solid var(--bord); } .panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -26px 34px -26px rgba(0,0,0,.65);} .panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(125deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.05) 13%, transparent 32%, transparent 60%, rgba(255,255,255,.05) 86%, rgba(255,255,255,.14) 100%);} .qtag{background:linear-gradient(90deg, var(--p1), var(--p3))} .ans .key{background:linear-gradient(150deg, var(--p1), var(--p3))} .pseg.done{background:linear-gradient(90deg, var(--p1), var(--p2))} .ovcard .grad{background:linear-gradient(90deg, var(--p2), var(--p3));-webkit-background-clip:text;background-clip:text;color:transparent} .bigbtn{background:linear-gradient(90deg, var(--p1), var(--p3))}