/* ═══════════════════════════════════════════════════════════
GLASS UI — ธีมกระจกกลาง ใช้ทุกหน้า skill-999.com
ผูก: ใน (วางหลัง CSS เดิมของหน้า)
หลัง
ก่อน
การ์ดที่จะเป็นกระจก: ใส่ class "glass" หรือใช้คลาสที่ลิสต์ไว้ใน $TILES
═══════════════════════════════════════════════════════════ */
:root{
--g-radius:19px; --g-radius-sm:14px; --g-radius-xs:8px;
--glass-bg:linear-gradient(135deg,rgba(255,255,255,.46),rgba(244,248,255,.18));
--glass-bg-strong:linear-gradient(135deg,rgba(255,255,255,.66),rgba(244,248,255,.42));
--glass-border:rgba(255,255,255,.85);
--glass-shadow:
0 32px 60px rgba(22,30,72,.34),0 14px 26px rgba(22,30,72,.22),0 4px 8px rgba(22,30,72,.14),
0 0 24px rgba(150,180,255,.20),
inset 0 2px 0 rgba(255,255,255,.95),inset 2px 2px 2px rgba(255,255,255,.55),
inset -2px -3px 3px rgba(40,60,120,.12),inset 0 -12px 26px rgba(40,60,120,.12),
inset 0 0 0 1.5px rgba(255,255,255,.32);
--glass-shadow-hover:
0 46px 92px rgba(18,26,55,.40),0 16px 32px rgba(18,26,55,.22),0 0 38px rgba(150,180,255,.34),
inset 0 2px 0 rgba(255,255,255,1),inset 2px 2px 3px rgba(255,255,255,.7),
inset -2px -3px 4px rgba(40,60,120,.14),inset 0 -12px 26px rgba(40,60,120,.12),
inset 0 0 0 1.5px rgba(255,255,255,.45);
}
/* ── พื้นหลัง aurora พาสเทล (ทุกหน้า) ── */
body::before{
content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(60% 50% at 12% 6%, rgba(120,160,255,.32), transparent 60%),
radial-gradient(55% 46% at 90% 12%, rgba(170,120,255,.28), transparent 58%),
radial-gradient(55% 52% at 82% 90%, rgba(120,200,255,.24), transparent 60%),
radial-gradient(55% 52% at 14% 94%, rgba(255,190,120,.16), transparent 60%),
linear-gradient(135deg,#e7eefc 0%,#f0eafb 50%,#e8f3ff 100%);
}
#aurora{position:fixed;inset:-18%;z-index:-1;pointer-events:none;overflow:hidden}
#aurora i{position:absolute;display:block;border-radius:50%;opacity:.8}
#aurora i:nth-child(1){width:60vw;height:60vw;left:-10vw;top:-12vw;background:radial-gradient(circle at center,rgba(110,160,255,.60),rgba(110,160,255,0) 62%);animation:auroraA 34s ease-in-out infinite}
#aurora i:nth-child(2){width:54vw;height:54vw;right:-8vw;top:0;background:radial-gradient(circle at center,rgba(178,120,255,.55),rgba(178,120,255,0) 62%);animation:auroraB 44s ease-in-out infinite}
#aurora i:nth-child(3){width:52vw;height:52vw;left:26vw;bottom:-18vw;background:radial-gradient(circle at center,rgba(120,205,255,.42),rgba(120,205,255,0) 62%);animation:auroraC 39s ease-in-out infinite}
@keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vw) scale(1.12)}}
@keyframes auroraB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,5vw) scale(1.1)}}
@keyframes auroraC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-6vw) scale(1.15)}}
/* ── การ์ดกระจก (ใส่ class "glass" หรือคลาสที่ลิสต์) ── */
.glass,.g-tile,
.lesson,.s2-card,.audio-card,.lnk,.board-panel{
position:relative;overflow:hidden;
background:var(--glass-bg) !important;
border:2.5px solid var(--glass-border) !important;
border-radius:var(--g-radius) !important;
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
box-shadow:var(--glass-shadow) !important;
transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease,background .25s ease !important;
}
.glass::before,.g-tile::before,
.lesson::before,.s2-card::before,.audio-card::before,.lnk::before,.board-panel::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
background:
linear-gradient(135deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.26) 20%,rgba(255,255,255,0) 42%),
linear-gradient(112deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.30) 39%,rgba(255,255,255,.06) 44%,rgba(255,255,255,0) 50%),
linear-gradient(0deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 28%);
}
.glass>*,.g-tile>*,.lesson>*,.s2-card>*,.audio-card>*,.lnk>*,.board-panel>*{position:relative;z-index:1}
.glass:hover,.g-tile:hover,
.lesson:hover,.s2-card:hover,.audio-card:hover,.lnk:hover,.board-panel:hover{
transform:translateY(-12px) scale(1.03);
box-shadow:var(--glass-shadow-hover) !important;
}
/* ── เอฟเฟกต์กด: ยุบ + แสงรุ้งวิ่ง ── */
.glass-press{transform:translateY(-1px) scale(.985) !important;transition:transform .09s ease !important}
.glass-burst{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;overflow:hidden}
.glass-burst::before{
content:'';position:absolute;top:-60%;bottom:-60%;left:-55%;width:55%;
background:linear-gradient(90deg,transparent,rgba(255,40,120,.55),rgba(255,190,40,.55),rgba(70,225,150,.55),rgba(60,150,255,.62),rgba(180,90,255,.55),transparent);
transform:rotate(18deg);filter:blur(3px);animation:glassRainbow .6s ease-out forwards;
}
@keyframes glassRainbow{0%{left:-55%;opacity:0}12%{opacity:1}100%{left:135%;opacity:.9}}
@media(prefers-reduced-motion:reduce){#aurora i{animation:none}.glass-burst{display:none}*{transition-duration:.01ms !important}}