/* ========================================================================
   Theme visual effects: pointer-events none, อยู่หลังเนื้อหา และปรับความชัดได้
   ======================================================================== */
.theme-background-layer,
.theme-effects {
    position:fixed;
    inset:0;
    pointer-events:none;
    user-select:none;
    overflow:hidden;
}
.theme-background-layer {
    z-index:var(--z-background);
    background-color:var(--page-bg);
    background-image:linear-gradient(160deg,var(--page-bg),var(--page-bg-alt));
    background-size:100% 100%;
    opacity:1;
    transition:background .35s ease;
}
.theme-background-layer::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--theme-pattern);
    background-size:var(--theme-pattern-size);
    opacity:var(--theme-pattern-opacity);
}
.theme-background-layer::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--primary) 14%,transparent),transparent 38%),radial-gradient(circle at 85% 70%,color-mix(in srgb,var(--secondary) 13%,transparent),transparent 42%);
    opacity:calc(var(--theme-pattern-opacity) * .72);
}
.theme-effects { z-index:calc(var(--z-content) - 1);opacity:var(--effect-opacity); }
.theme-effect-object { position:absolute;display:block;will-change:transform,opacity;pointer-events:none; }

/* Classic: แสงและรูปทรงนุ่ม */
html[data-theme="classic"] .fx-classic-orb { width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 30%,transparent),transparent 70%);filter:blur(4px);animation:classicFloat 18s ease-in-out infinite alternate; }
@keyframes classicFloat { from{transform:translate3d(-10vw,8vh,0) scale(.8)} to{transform:translate3d(90vw,65vh,0) scale(1.15)} }

/* Luxury: ประกายทอง */
html[data-theme="luxury"] .fx-spark { width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:goldSpark var(--fx-duration,7s) ease-in-out infinite; }
@keyframes goldSpark { 0%,100%{transform:translateY(8px) scale(.5);opacity:.15}45%{transform:translateY(-28px) scale(1.4);opacity:1} }

/* Minimal: เกือบไม่มีเอฟเฟกต์ */
html[data-theme="minimal"] .theme-effects { opacity:calc(var(--effect-opacity) * .22); }
html[data-theme="minimal"] .fx-minimal-line { width:120px;height:1px;background:var(--border-color-theme);animation:minimalDrift 22s linear infinite; }
@keyframes minimalDrift { from{transform:translateX(-20vw)}to{transform:translateX(120vw)} }

/* Hitech: data nodes / scan */
html[data-theme="hitech"] .fx-node { width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 14px var(--primary),0 0 28px var(--secondary);animation:nodePulse var(--fx-duration,3.5s) ease-in-out infinite; }
html[data-theme="hitech"] .fx-scan { left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--primary),transparent);box-shadow:0 0 12px var(--primary);animation:scanLine 10s linear infinite; }
@keyframes nodePulse { 0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.45)} }
@keyframes scanLine { from{transform:translateY(-5vh)}to{transform:translateY(105vh)} }

/* Nature: ใบไม้ร่วงหมุนเบา */
html[data-theme="nature"] .fx-leaf { font-size:var(--fx-size,22px);color:var(--secondary);filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));animation:leafFall var(--fx-duration,13s) linear infinite; }
@keyframes leafFall { 0%{transform:translate3d(0,-12vh,0) rotate(0deg);opacity:0}10%{opacity:1}55%{transform:translate3d(45px,52vh,0) rotate(190deg)}100%{transform:translate3d(-25px,112vh,0) rotate(420deg);opacity:.2} }

/* Floral: กลีบดอกไม้ */
html[data-theme="floral"] .fx-petal { width:var(--fx-size,13px);height:calc(var(--fx-size,13px) * 1.55);border-radius:70% 30% 70% 30%;background:color-mix(in srgb,var(--primary) 70%,#fff);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 35%,transparent);animation:petalFall var(--fx-duration,12s) linear infinite; }
@keyframes petalFall { 0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0}12%{opacity:.95}50%{transform:translate3d(-38px,48vh,0) rotate(220deg)}100%{transform:translate3d(42px,110vh,0) rotate(520deg);opacity:.15} }

/* Custom: gradient glow */
html[data-theme="custom"] .fx-custom-glow { width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 26%,transparent),transparent 70%);filter:blur(12px);animation:customGlow var(--fx-duration,16s) ease-in-out infinite alternate; }
@keyframes customGlow { from{transform:translate3d(-12vw,18vh,0) scale(.7)}to{transform:translate3d(88vw,58vh,0) scale(1.2)} }

/* Ocean */
html[data-theme="ocean"] .fx-bubble { width:var(--fx-size,12px);height:var(--fx-size,12px);border:1.5px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:inset 2px 2px 3px rgba(255,255,255,.45),0 0 6px rgba(65,203,225,.35);animation:bubbleRise var(--fx-duration,10s) linear infinite; }
html[data-theme="ocean"] .fx-fish { font-size:var(--fx-size,28px);line-height:1;filter:drop-shadow(0 3px 3px rgba(0,70,85,.2));animation:fishLTR var(--fx-duration,16s) linear infinite; }
html[data-theme="ocean"] .fx-fish.is-reverse { animation-name:fishRTL; }
html[data-theme="ocean"] .fx-seaweed { bottom:-8px;font-size:var(--fx-size,54px);transform-origin:50% 100%;animation:seaweedSway var(--fx-duration,5s) ease-in-out infinite alternate; }
html[data-theme="ocean"] .fx-light-ray { top:-15%;width:18vw;height:120vh;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 70%);filter:blur(14px);transform:rotate(12deg);animation:raySway 10s ease-in-out infinite alternate; }
@keyframes bubbleRise { 0%{transform:translate3d(0,112vh,0) scale(.55);opacity:0}15%{opacity:.9}100%{transform:translate3d(24px,-15vh,0) scale(1.25);opacity:0} }
@keyframes fishLTR { from{transform:translate3d(-18vw,0,0) scaleX(-1)}to{transform:translate3d(118vw,0,0) scaleX(-1)} }
@keyframes fishRTL { from{transform:translate3d(118vw,0,0) scaleX(1)}to{transform:translate3d(-18vw,0,0) scaleX(1)} }
@keyframes seaweedSway { from{transform:rotate(-6deg)}to{transform:rotate(7deg)} }
@keyframes raySway { from{transform:translateX(-8vw) rotate(10deg)}to{transform:translateX(12vw) rotate(16deg)} }

/* ธีมตกแต่ง Header/Footer แบบสัมพันธ์กัน */
html[data-theme="luxury"] .master-header::after,html[data-theme="luxury"] .master-footer::before,
html[data-theme="nature"] .master-header::after,html[data-theme="nature"] .master-footer::before,
html[data-theme="floral"] .master-header::after,html[data-theme="floral"] .master-footer::before,
html[data-theme="ocean"] .master-header::after,html[data-theme="ocean"] .master-footer::before {
    content:"";position:absolute;left:0;right:0;height:12px;pointer-events:none;opacity:calc(var(--theme-pattern-opacity) * .75);
}
html[data-theme="luxury"] .master-header::after { bottom:0;background:repeating-linear-gradient(90deg,transparent 0 28px,var(--accent) 29px 30px,transparent 31px 58px); }
html[data-theme="luxury"] .master-footer::before { top:0;background:repeating-linear-gradient(90deg,transparent 0 28px,var(--accent) 29px 30px,transparent 31px 58px); }
html[data-theme="nature"] .master-header::after { bottom:-4px;background:radial-gradient(ellipse at center,var(--secondary) 0 24%,transparent 25%) 0 0/42px 14px repeat-x; }
html[data-theme="nature"] .master-footer::before { top:-6px;background:radial-gradient(ellipse at center,var(--accent) 0 20%,transparent 21%) 0 0/48px 16px repeat-x; }
html[data-theme="floral"] .master-header::after { bottom:-3px;background:radial-gradient(circle,var(--accent) 0 22%,transparent 24%) 0 0/34px 12px repeat-x; }
html[data-theme="floral"] .master-footer::before { top:-4px;background:radial-gradient(circle,var(--primary) 0 20%,transparent 22%) 0 0/38px 14px repeat-x; }
html[data-theme="ocean"] .master-header::after { bottom:-5px;background:radial-gradient(24px 8px at 50% 0,transparent 48%,var(--primary) 50% 54%,transparent 56%) 0 0/48px 10px repeat-x; }
html[data-theme="ocean"] .master-footer::before { top:-8px;height:18px;background:linear-gradient(180deg,transparent,#d9bd82 70%); }

@media(max-width:700px){
    .theme-effects .fx-density-extra { display:none; }
    html[data-theme="ocean"] .fx-light-ray:nth-of-type(n+2),html[data-theme="hitech"] .fx-scan:nth-of-type(n+2){display:none}
}
@media print { .theme-background-layer,.theme-effects { display:none!important; } }
@media(prefers-reduced-motion:reduce){ .theme-effects { display:none!important; } }

/* ลวดลายเฉพาะ Header/Footer ที่ไม่รับการคลิก */
.header-container,.footer-container { position:relative;z-index:1; }
html[data-theme="ocean"] .master-header::before {
    content:"🐟  ◌  🐠  ◌";position:absolute;right:4%;top:8px;font-size:20px;letter-spacing:12px;opacity:calc(var(--theme-pattern-opacity) * .42);pointer-events:none;white-space:nowrap;z-index:0;
}
html[data-theme="ocean"] .master-footer::after {
    content:"🪸  🌿  🐚  ⭐  🪸";position:absolute;right:4%;bottom:4px;font-size:28px;letter-spacing:8px;opacity:calc(var(--theme-pattern-opacity) * .7);pointer-events:none;white-space:nowrap;z-index:0;
}
html[data-theme="nature"] .master-header::before {
    content:"🌿  🍃";position:absolute;right:5%;top:10px;font-size:22px;opacity:calc(var(--theme-pattern-opacity) * .5);pointer-events:none;z-index:0;
}
html[data-theme="nature"] .master-footer::after {
    content:"🌱  🌿  🍂";position:absolute;right:5%;bottom:5px;font-size:26px;opacity:calc(var(--theme-pattern-opacity) * .55);pointer-events:none;z-index:0;
}
html[data-theme="floral"] .master-header::before {
    content:"🌸  ✿  🌺";position:absolute;right:5%;top:9px;font-size:21px;opacity:calc(var(--theme-pattern-opacity) * .48);pointer-events:none;z-index:0;
}
html[data-theme="floral"] .master-footer::after {
    content:"🌷  🌸  ✿";position:absolute;right:5%;bottom:5px;font-size:25px;opacity:calc(var(--theme-pattern-opacity) * .55);pointer-events:none;z-index:0;
}
html[data-theme="luxury"] .master-header::before,
html[data-theme="luxury"] .master-footer::after {
    content:"◆  ◇  ◆";position:absolute;right:5%;font-size:18px;letter-spacing:10px;color:var(--accent);opacity:calc(var(--theme-pattern-opacity) * .65);pointer-events:none;z-index:0;
}
html[data-theme="luxury"] .master-header::before { top:13px; }
html[data-theme="luxury"] .master-footer::after { bottom:9px; }
@media(max-width:760px){
    html[data-theme] .master-header::before { display:none; }
    html[data-theme] .master-footer::after { opacity:.3;font-size:20px;right:2%; }
}