:root{--gold:#c9a84c;--gold-l:#e8c96a;--gold-d:#8b6914;--bg:#1a1008;--bg2:#251810;--text:#f5ebd0;--dim:#b89060;--card-bg:rgba(30,18,8,0.97);--border:rgba(201,168,76,0.35);--shadow:rgba(0,0,0,0.7);--red:#e06c75;--green:#7bc67e}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;touch-action:manipulation}
.rune-sym,.ef-sym,span[data-rune]{font-family:'Noto Sans Runic','Segoe UI Historic','Noto Serif','FreeSerif',serif!important}
body{background:#1a1008;background-image:radial-gradient(ellipse at 15% 15%,rgba(201,168,76,0.10) 0%,transparent 50%),radial-gradient(ellipse at 85% 85%,rgba(92,61,30,0.14) 0%,transparent 50%);font-family:'Sarabun',sans-serif;color:var(--text);min-height:100vh;overflow-x:hidden}
.float-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fr{position:absolute;color:var(--gold);opacity:0;animation:floatUp linear infinite;font-family:'Cinzel',serif}
@keyframes floatUp{0%{opacity:0;transform:translateY(105vh) rotate(0deg)}8%{opacity:.12}50%{opacity:.08}92%{opacity:.04}100%{opacity:0;transform:translateY(-5vh) rotate(360deg)}}
@keyframes slideUp2{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.star{position:absolute;border-radius:50%;background:var(--gold);opacity:0;animation:twinkle ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(0.3)}50%{opacity:.7;transform:scale(1.2)}}
@media(max-width:768px){
@keyframes floatUp{0%{opacity:0;transform:translateY(105vh) rotate(0deg)}8%{opacity:.04}50%{opacity:.025}92%{opacity:.01}100%{opacity:0;transform:translateY(-5vh) rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(0.3)}50%{opacity:.25;transform:scale(1)}}
}
/* PASSWORD */
#pwOverlay{position:fixed;inset:0;z-index:500;background:radial-gradient(ellipse,#1a0e06,#060300);display:flex;align-items:center;justify-content:center}
.pw-box{background:var(--card-bg);border:1px solid var(--border);padding:2.5rem 2.8rem;border-radius:6px;text-align:center;max-width:360px;width:90%;box-shadow:0 24px 64px rgba(0,0,0,0.85)}
.pw-sym{font-size:3.2rem;margin-bottom:.6rem;filter:drop-shadow(0 0 16px rgba(201,168,76,0.45))}
.pw-title{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1rem;letter-spacing:3px;margin-bottom:.2rem}
.pw-sub{color:var(--dim);font-size:.78rem;margin-bottom:1.4rem}
.pw-input{width:100%;background:rgba(30,15,5,0.8);border:1px solid var(--border);color:var(--text);padding:.75rem 1rem;font-family:'Cinzel',serif;font-size:1rem;letter-spacing:5px;text-align:center;border-radius:3px;outline:none;margin-bottom:.7rem}
.pw-input:focus{border-color:var(--gold-d)}
.pw-btn{width:100%;padding:.75rem;font-family:'Cinzel',serif;font-size:.85rem;letter-spacing:3px;text-transform:uppercase;color:var(--bg2);background:linear-gradient(135deg,var(--gold),var(--gold-d));border:none;cursor:pointer;border-radius:3px;transition:all .2s}
.pw-btn:hover{background:linear-gradient(135deg,var(--gold-l),var(--gold))}
.pw-err{color:var(--red);font-size:.8rem;margin-top:.4rem;min-height:1.2em}
/* AVATAR & AUTH */
#avatarFixed{position:fixed;top:12px;right:14px;z-index:200}
#avatarBtn{width:42px;height:42px;border-radius:50%;border:2px solid rgba(201,168,76,0.3);background:rgba(20,12,4,0.95);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;box-shadow:0 2px 12px rgba(0,0,0,0.6);position:relative;overflow:visible;-webkit-tap-highlight-color:transparent}
#avatarBtn::after{content:'';position:absolute;inset:-6px;border-radius:50%}
#avatarBtn:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(201,168,76,0.3)}
#avatarBtn.av-free{border-color:rgba(138,122,90,0.55)}#avatarBtn.av-silver{border-color:#b4b9c3;box-shadow:0 0 14px rgba(180,185,195,0.45),0 2px 12px rgba(0,0,0,0.6)}#avatarBtn.av-premium{border-color:var(--gold);box-shadow:0 0 18px rgba(201,168,76,0.7),0 0 32px rgba(201,168,76,0.3),0 2px 12px rgba(0,0,0,0.6);animation:avatarGlow 2.5s ease-in-out infinite}@keyframes avatarGlow{0%,100%{box-shadow:0 0 18px rgba(201,168,76,0.7),0 0 32px rgba(201,168,76,0.3)}50%{box-shadow:0 0 26px rgba(201,168,76,0.9),0 0 44px rgba(201,168,76,0.45)}}
#avatarMenu{display:none;position:absolute;top:50px;right:0;background:var(--card-bg);border:1px solid var(--border);border-radius:6px;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,0.8);overflow:hidden}
#avatarMenu.open{display:block}
.av-name{padding:.8rem 1rem .15rem;font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold);letter-spacing:1px}
.av-email{padding:0 1rem .7rem;font-size:.7rem;color:var(--dim);border-bottom:1px solid var(--border)}
.av-item{display:block;width:100%;padding:.7rem 1rem;font-family:'Sarabun',sans-serif;font-size:.82rem;color:var(--text);background:none;border:none;text-align:left;cursor:pointer;transition:background .15s}
.av-item:hover{background:rgba(201,168,76,0.08)}
#authOverlay{position:fixed;inset:0;z-index:600;background:radial-gradient(ellipse at center,rgba(20,12,4,0.7),rgba(0,0,0,0.95));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:1rem;display:none}
#authOverlay.open{display:flex;animation:authFadeIn .35s ease-out}
@keyframes authFadeIn{from{opacity:0}to{opacity:1}}

.auth-box{
  position:relative;
  background:linear-gradient(160deg,rgba(38,22,8,0.96) 0%,rgba(20,12,4,0.98) 60%,rgba(12,7,3,0.99) 100%);
  border:1px solid rgba(201,168,76,0.28);
  padding:2.4rem 2rem 1.8rem;
  border-radius:10px;
  text-align:center;
  max-width:400px;
  width:100%;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.9),
    0 0 60px rgba(201,168,76,0.08),
    inset 0 1px 0 rgba(201,168,76,0.18),
    inset 0 0 60px rgba(201,168,76,0.025);
  animation:authBoxIn .45s cubic-bezier(.2,.8,.3,1);
  overflow:hidden;
}
@keyframes authBoxIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* กรอบทองชั้นใน */
.auth-box::before{
  content:'';position:absolute;inset:8px;border:1px solid rgba(201,168,76,0.12);border-radius:7px;pointer-events:none;
}
/* corner ornaments — รูน ᚠ มุมซ้ายบน + ขวาล่าง */
.auth-box::after{
  content:'ᚠ ᚠ';
  position:absolute;inset:0;pointer-events:none;color:rgba(201,168,76,0.18);font-family:'Noto Sans Runic',serif;font-size:.65rem;letter-spacing:0;
  display:flex;justify-content:space-between;padding:14px 18px;align-items:flex-start;
}

.auth-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--dim);font-size:1.5rem;cursor:pointer;line-height:1;padding:.2rem .4rem;border-radius:3px;transition:all .2s;z-index:2}
.auth-close:hover{color:var(--gold);background:rgba(201,168,76,0.1)}

/* ─── HERO รูน + glow ring ─── */
.auth-hero{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:.6rem}
.auth-hero-rune{
  position:relative;
  font-family:'Noto Sans Runic','Segoe UI Historic',serif;
  font-size:2.6rem;
  color:var(--gold);
  line-height:1;
  text-shadow:0 0 14px rgba(201,168,76,0.55),0 0 28px rgba(201,168,76,0.25);
  margin-bottom:.45rem;
  z-index:2;
}
.auth-hero-rune::before{
  content:'';position:absolute;inset:-22px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,0.22),transparent 65%);
  z-index:-1;animation:authHaloPulse 3.5s ease-in-out infinite;
}
@keyframes authHaloPulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.05)}}

/* Title — ใช้ Cinzel เฉพาะ Latin, Sarabun สำหรับไทย */
.auth-title{
  font-family:'Sarabun',sans-serif;
  font-weight:600;
  color:var(--gold);
  font-size:1.15rem;
  letter-spacing:.5px;
  margin-bottom:.25rem;
  line-height:1.3;
}
.auth-sub{
  font-family:'Cinzel',serif;
  color:var(--gold-d);
  font-size:.7rem;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:1.4rem;
  opacity:.85;
}

/* INPUTS */
.auth-input{
  width:100%;
  background:rgba(30,15,5,0.65);
  border:1px solid rgba(201,168,76,0.18);
  color:var(--text);
  padding:.85rem 1.1rem;
  font-family:'Sarabun',sans-serif;
  font-size:.92rem;
  border-radius:4px;
  outline:none;
  margin-bottom:.7rem;
  transition:all .2s;
}
.auth-input::placeholder{color:rgba(140,124,96,0.7)}
.auth-input:hover{border-color:rgba(201,168,76,0.35);background:rgba(35,18,6,0.75)}
.auth-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.12);background:rgba(38,20,8,0.85)}

/* PRIMARY BUTTON — gold with sheen */
.auth-btn{
  position:relative;
  width:100%;
  padding:.85rem;
  font-family:'Sarabun',sans-serif;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:1px;
  color:#1a0e06;
  background:linear-gradient(135deg,#e6c97a 0%,var(--gold) 50%,var(--gold-d) 100%);
  border:none;
  cursor:pointer;
  border-radius:4px;
  transition:all .25s;
  margin-bottom:.5rem;
  box-shadow:0 4px 14px rgba(201,168,76,0.25),inset 0 1px 0 rgba(255,255,255,0.3);
  overflow:hidden;
}
.auth-btn::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  transition:left .6s;
}
.auth-btn:hover{box-shadow:0 6px 22px rgba(201,168,76,0.45),inset 0 1px 0 rgba(255,255,255,0.4);transform:translateY(-1px)}
.auth-btn:hover::before{left:100%}
.auth-btn:active{transform:translateY(0)}

/* GOOGLE */
.auth-google{
  width:100%;
  padding:.78rem;
  font-family:'Sarabun',sans-serif;
  font-size:.9rem;
  color:var(--text);
  background:rgba(245,245,250,0.06);
  border:1px solid rgba(201,168,76,0.22);
  cursor:pointer;
  border-radius:4px;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.auth-google:hover{background:rgba(245,245,250,0.12);border-color:var(--gold);box-shadow:0 0 14px rgba(201,168,76,0.18)}

/* DIVIDER — มีรูน ᛟ คั่น */
.auth-divider{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0;color:var(--gold-d);font-family:'Noto Sans Runic',serif;font-size:1rem;line-height:1;opacity:.7}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,0.4),transparent)}
.auth-divider span{font-family:'Sarabun',sans-serif;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}

/* TOGGLE SWITCH */
.auth-toggle{color:var(--gold);font-family:'Sarabun',sans-serif;font-size:.82rem;cursor:pointer;margin-top:.8rem;background:none;border:none;text-decoration:none;border-bottom:1px solid rgba(201,168,76,0.3);padding-bottom:1px;transition:all .2s}
.auth-toggle:hover{color:var(--gold-l);border-bottom-color:var(--gold)}

/* FORGOT PASSWORD */
#authForgot{transition:color .2s}
#authForgot:hover{color:var(--gold) !important}

.auth-err{color:var(--red);font-family:'Sarabun',sans-serif;font-size:.8rem;margin-top:.3rem;min-height:1.2em;letter-spacing:.3px}
#profileOverlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,0.88);align-items:flex-start;justify-content:center;padding:1rem;display:none;overflow-y:auto}
#profileOverlay.open{display:flex}
/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(5,2,0,0.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.nav-btn{padding:.7rem 1.3rem;font-family:'Cinzel',serif;font-size:.75rem;letter-spacing:2px;color:var(--dim);background:transparent;border:none;cursor:pointer;transition:all .25s;position:relative;text-transform:uppercase}
.nav-btn::after{content:'';position:absolute;bottom:0;left:15%;right:15%;height:2px;background:linear-gradient(to right,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .3s}
.nav-btn:hover,.nav-btn.active{color:var(--gold-l)}.nav-btn.active::after{transform:scaleX(1)}
.nav-sep{color:rgba(201,168,76,0.2);padding:0 .2rem;user-select:none}
/* HEADER */
header{text-align:center;padding:1.5rem 1rem 0.5rem;position:relative;z-index:1}
.vk-wrap{width:64px;height:64px;margin:0 auto 1.2rem;animation:vspin 40s linear infinite;filter:drop-shadow(0 0 12px rgba(201,168,76,0.4))}
@keyframes vspin{to{transform:rotate(360deg)}}
h1.site-title{font-family:'Cinzel Decorative',serif;font-size:clamp(.9rem,2.8vw,1.8rem);color:var(--gold);letter-spacing:4px;line-height:1.5;text-shadow:0 0 40px rgba(201,168,76,0.3),0 2px 6px #000}
h1.site-title span{display:block;font-size:.6em;color:var(--gold-d);letter-spacing:6px;margin-top:.3rem}
.hdr-div{width:240px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:.9rem auto}
.tagline{color:var(--dim);font-size:.8rem;letter-spacing:1.5px;font-style:italic}
/* SECTIONS */
.section{display:none;padding:1.2rem 1rem 4rem;max-width:980px;margin:0 auto;animation:fadeIn .3s ease}
.section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sec-title{font-family:'Cinzel',serif;font-size:1.15rem;color:var(--gold);letter-spacing:3px;text-align:center;margin-bottom:.2rem;text-transform:uppercase}
.sec-sub{text-align:center;color:var(--dim);font-size:.83rem;margin-bottom:1.6rem}
/* MODE BTN */
.mode-row{display:flex;flex-wrap:nowrap;gap:.5rem;justify-content:flex-start;margin-bottom:1.4rem;align-items:center;overflow-x:auto;padding-bottom:.3rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}.mode-row::-webkit-scrollbar{display:none}
.mode-btn{padding:.45rem .9rem;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:1.5px;border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;transition:all .2s;border-radius:2px;text-transform:uppercase}
.mode-btn:hover,.mode-btn.sel{border-color:var(--gold);color:var(--gold-l);background:rgba(201,168,76,0.07)}
/* CARD TABLE */
.card-table-wrap{background:rgba(8,4,1,0.7);border:1px solid var(--border);border-radius:4px;padding:.8rem;margin-bottom:1.2rem}
.card-table{position:relative;width:100%;height:320px;margin:0 auto;max-width:560px}
.back-card{width:74px;height:99px;border-radius:4px;overflow:visible;cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .2s ease,opacity .25s ease,filter .25s ease;border:2px solid transparent;position:absolute;top:50%;left:50%;transform-origin:center bottom;box-shadow:0 2px 8px rgba(0,0,0,0.4);will-change:transform}
.back-card>img{width:100%;height:100%;object-fit:cover;display:block;border-radius:3px;pointer-events:none}
.back-card:hover:not(.selected),.back-card.touch-hover:not(.selected){border-color:var(--gold-l);box-shadow:0 16px 32px rgba(201,168,76,0.38),0 4px 12px rgba(0,0,0,0.5);filter:brightness(1.18)}
.ef-table:hover .ef-card:not(:hover):not(.ef-sel){opacity:.55;filter:brightness(.7)}
.ef-card:hover:not(.ef-sel),.ef-card.touch-hover:not(.ef-sel){border-color:var(--gold-l);box-shadow:0 14px 28px rgba(201,168,76,0.32),0 4px 10px rgba(0,0,0,0.5);filter:brightness(1.18)!important;opacity:1!important}
/* rune name tooltip removed — mystery preserved */
.back-card.shuffling{animation:shuffleCard .6s ease-in-out}
@keyframes shuffleCard{0%{transform:translate(-50%,-50%) rotate(0deg) translateX(0)}25%{transform:translate(-50%,-50%) rotate(var(--rot)) translateX(var(--tx))}75%{transform:translate(-50%,-50%) rotate(calc(var(--rot)*-0.5)) translateX(calc(var(--tx)*-0.3))}100%{transform:translate(-50%,-50%) rotate(var(--end-rot)) translateX(var(--end-x))}}
.back-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,0.3),0 20px 40px rgba(201,168,76,0.55),0 6px 16px rgba(0,0,0,0.6);filter:brightness(1.12);z-index:500!important;transform:translate(-50%,-76%) scale(1.14) rotate(0deg)!important;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .2s ease,filter .3s ease}
.back-card.selected:hover{filter:brightness(1.2)}
.back-card.used{cursor:not-allowed;pointer-events:none}
.back-card .sel-num{display:none}
@keyframes numPop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0deg)}}
/* ACTION ROW */
.action-row{display:flex;gap:.6rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}
.abtn{padding:.6rem 1.5rem;font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;border-radius:2px;transition:all .22s}
.abtn.gold{color:var(--bg2);background:linear-gradient(135deg,var(--gold),var(--gold-d));box-shadow:0 4px 14px rgba(201,168,76,0.2)}
.abtn.gold:hover{background:linear-gradient(135deg,var(--gold-l),var(--gold));transform:translateY(-2px)}
.abtn.out{color:var(--dim);background:transparent;border:1px solid var(--border)}
.abtn.out:hover{border-color:var(--gold-d);color:var(--gold)}
.abtn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}
/* FLIP CARDS */
.flip-row{display:flex;flex-wrap:nowrap;gap:1rem;justify-content:center;margin-bottom:1.5rem;overflow-x:auto;padding-bottom:.3rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}.flip-row::-webkit-scrollbar{display:none}
.flip-wrap{text-align:center}
.pos-label{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:1.5px;color:var(--dim);margin-bottom:.3rem;text-transform:uppercase;min-height:2.2em;display:flex;align-items:center;justify-content:center;max-width:140px}
.flip-inner{width:140px;height:187px;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1);cursor:pointer}
.flip-inner.flipped{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:5px;overflow:hidden;border:1px solid var(--border);box-shadow:0 6px 20px var(--shadow)}
.flip-back{transform:rotateY(180deg)}
.flip-front img,.flip-back img{width:100%;height:100%;object-fit:cover}
.rune-label{font-family:'Noto Sans Runic','Segoe UI Historic','Cinzel',serif;font-size:.7rem;color:var(--gold);text-align:center;margin-top:.35rem;letter-spacing:1px;max-width:140px}
/* READING */
.reading-wrap{border-top:1px solid var(--border);padding-top:1.4rem;margin-top:.5rem}
.reading-wrap h3{font-family:'Cinzel',serif;font-size:.9rem;color:var(--gold);letter-spacing:2px;text-align:center;margin-bottom:1rem;text-transform:uppercase}
.rtabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.rtab{padding:.4rem .9rem;font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:1.5px;border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;transition:all .2s;border-radius:2px;text-transform:uppercase}
.rtab.active,.rtab:hover{border-color:var(--gold);color:var(--gold-l);background:rgba(201,168,76,0.08)}
.rtab-pane{display:none}.rtab-pane.active{display:block}
/* CARD READING BLOCK */
.crb{background:var(--card-bg);border:1px solid var(--border);border-radius:4px;padding:1rem 1.1rem;margin-bottom:.8rem}
.crb-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.crb-img{width:48px;height:64px;object-fit:cover;border-radius:3px;border:1px solid var(--border);flex-shrink:0}
.crb-pos{font-size:.65rem;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:.15rem}
.crb-name{font-family:'Cinzel',serif;font-size:.92rem;color:var(--gold);letter-spacing:1px}
.crb-sym{font-size:1.3rem;color:var(--gold-d)}
.crb-body{color:var(--text);font-size:.86rem;line-height:1.85}
.warn{margin-top:.5rem;padding:.45rem .7rem;border-left:2px solid var(--gold-d);background:rgba(201,168,76,0.04);font-size:.8rem;color:var(--dim)}
.warn b{color:var(--gold-d)}
/* SUMMARY */
.sum-box{background:var(--card-bg);border:1px solid var(--border);border-radius:4px;padding:1.2rem 1.4rem;margin-bottom:.8rem}
.sum-box h4{font-family:'Cinzel',serif;font-size:.78rem;color:var(--gold-d);letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.sum-box p{font-size:.86rem;color:var(--text);line-height:1.85}
.sum-overall{background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.2);border-radius:4px;padding:1.1rem 1.3rem}
.sum-overall h4{font-family:'Cinzel',serif;font-size:.78rem;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem}
.sum-overall p{font-size:.88rem;color:var(--text);line-height:1.9}
/* YN BADGE */
.yn-y{display:inline-block;padding:.18rem .6rem;border-radius:2px;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:1px;background:rgba(123,198,126,.12);border:1px solid rgba(123,198,126,.4);color:var(--green);margin-bottom:.35rem}
.yn-n{display:inline-block;padding:.18rem .6rem;border-radius:2px;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:1px;background:rgba(224,108,117,.12);border:1px solid rgba(224,108,117,.4);color:var(--red);margin-bottom:.35rem}
.yn-h{display:inline-block;padding:.18rem .6rem;border-radius:2px;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:1px;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.4);color:var(--gold);margin-bottom:.35rem}
.desk-tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.2rem}
.desk-tab{padding:.5rem 1.4rem;font-family:'Cinzel',serif;font-size:.75rem;letter-spacing:2px;border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;transition:all .22s;border-radius:2px;text-transform:uppercase}
.desk-tab:hover,.desk-tab.active{border-color:var(--gold);color:var(--gold-l);background:rgba(201,168,76,0.08)}
/* DESK */
.spread-picker{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.sp-card{background:var(--card-bg);border:1px solid var(--border);padding:.75rem 1.1rem;cursor:pointer;transition:all .22s;text-align:center;border-radius:3px;min-width:95px}
.sp-card:hover,.sp-card.sel{border-color:var(--gold);background:rgba(201,168,76,0.06)}
.sp-num{font-family:'Cinzel',serif;font-size:1.4rem;color:var(--gold)}
.sp-name{font-size:.68rem;color:var(--dim);margin-top:.15rem;font-family:'Cinzel',serif;letter-spacing:1px}
.desk-area{background:var(--card-bg);border:1px solid var(--border);border-radius:4px;padding:1.2rem}
.desk-slots{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.desk-slot{width:125px;text-align:center}
.slot-pos{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:1px;color:var(--dim);margin-bottom:.35rem;text-transform:uppercase;min-height:2.4em;display:flex;align-items:center;justify-content:center;line-height:1.3}
.slot-picker{width:125px;height:167px;background:rgba(201,168,76,0.03);border:1px dashed var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.slot-picker:hover{border-color:var(--gold-d);background:rgba(201,168,76,0.09);transform:translateY(-3px);box-shadow:0 8px 20px rgba(201,168,76,0.15)}
.slot-picker .plus{font-size:2rem;color:rgba(201,168,76,0.2);transition:color .2s,transform .2s}
.slot-picker:hover .plus{color:var(--gold-d);transform:scale(1.15)}
.slot-picker img{width:100%;height:100%;object-fit:cover;transition:filter .2s}
.slot-picker:hover img{filter:brightness(1.08)}
.slot-picker .cn{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.78);padding:.28rem;font-family:'Cinzel',serif;font-size:.62rem;color:var(--gold);text-align:center;letter-spacing:1px}
.slot-picker.filled{border-style:solid;border-color:var(--gold-d);box-shadow:0 0 0 1px rgba(201,168,76,0.15)}
@keyframes slotFill{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.slot-picker.filled{animation:slotFill .28s cubic-bezier(.34,1.56,.64,1)}
.rpg-item{display:flex;flex-direction:column;align-items:center;gap:.18rem;width:63px;cursor:pointer;padding:.28rem;border:1px solid transparent;border-radius:2px;transition:border-color .15s,background .15s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.rpg-item:hover{border-color:var(--gold-d);background:rgba(201,168,76,0.08);transform:translateY(-2px) scale(1.05)}
.rune-picker-panel{display:none;background:rgba(8,4,1,0.85);border:1px solid var(--border);border-radius:4px;padding:.75rem;margin-bottom:1rem;max-height:250px;overflow-y:auto}
.rune-picker-panel.open{display:block}
.rune-picker-panel h4{font-family:'Cinzel',serif;color:var(--gold);font-size:.75rem;letter-spacing:2px;margin-bottom:.6rem;text-transform:uppercase}
.rpg{display:flex;flex-wrap:wrap;gap:.3rem}
.rpg-item img{width:56px;height:75px;object-fit:cover;border-radius:2px}
.rpg-item span{font-family:'Cinzel',serif;font-size:.56rem;color:var(--dim);text-align:center}
.desk-q{width:100%;background:rgba(25,12,4,0.7);border:1px solid var(--border);color:var(--text);padding:.6rem 1rem;font-family:'Sarabun',sans-serif;font-size:.87rem;border-radius:3px;outline:none;margin-bottom:1rem}
.desk-q:focus{border-color:var(--gold-d)}.desk-q::placeholder{color:var(--dim)}
.desk-result{display:none;margin-top:1.2rem}.desk-result.show{display:block}
/* AI LOADING */
.ai-loading{text-align:center;color:var(--dim);padding:1.5rem;font-style:italic;font-size:.87rem}
/* HISTORY */
.hist-quota{background:rgba(201,168,76,0.05);border:1px solid var(--border);border-radius:8px;padding:.85rem 1.1rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between}
.hist-quota-dots{display:flex;gap:5px;margin-top:5px}
.hist-dot{width:9px;height:9px;border-radius:50%;background:rgba(201,168,76,0.2)}
.hist-dot.used{background:var(--gold)}
.hist-filters{display:flex;gap:.5rem;margin-bottom:1.2rem}
.hist-fb{padding:.35rem 1.1rem;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:1.5px;border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;transition:all .18s;border-radius:2px;text-transform:uppercase}
.hist-fb:hover,.hist-fb.on{border-color:var(--gold);color:var(--gold-l);background:rgba(201,168,76,0.07)}
.hist-day-label{font-size:.7rem;color:var(--dim);margin:1rem 0 .5rem;letter-spacing:1px;text-transform:uppercase;padding-bottom:.4rem;border-bottom:1px solid rgba(201,168,76,0.15)}
.hist-card{background:var(--card-bg);border:1px solid var(--border);border-radius:5px;padding:.85rem 1rem;margin-bottom:.6rem;display:flex;gap:.85rem;align-items:flex-start}
.hist-rbox{width:40px;height:40px;border-radius:5px;background:rgba(201,168,76,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Noto Sans Runic','Segoe UI Historic',serif;font-size:1.3rem;color:var(--gold)}
.hist-rbox.ef{background:rgba(168,154,212,0.12);color:#a89ad4}
.hist-body{flex:1;min-width:0}
.hist-name{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold);margin-bottom:.15rem}
.hist-meta{font-size:.68rem;color:var(--dim);margin-bottom:.2rem}
.hist-meaning{font-size:.78rem;color:var(--text);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-del{background:none;border:none;color:rgba(201,168,76,0.25);cursor:pointer;font-size:1.1rem;padding:0 2px;flex-shrink:0;line-height:1;transition:color .15s}
.hist-del:hover{color:var(--red)}
.hist-spread{background:var(--card-bg);border:1px solid var(--border);border-radius:5px;padding:.85rem 1rem;margin-bottom:.6rem}
.hist-spread-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.7rem}
.hist-spread-title{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold)}
.hist-spread-meta{font-size:.68rem;color:var(--dim);margin-top:.15rem}
.hist-badge{display:inline-block;font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:1px;padding:.12rem .5rem;border-radius:2px;margin-left:.4rem}
.hist-badge-a{background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.3);color:var(--gold)}
.hist-badge-e{background:rgba(168,154,212,0.1);border:1px solid rgba(168,154,212,0.3);color:#a89ad4}
.hist-chips{display:flex;gap:.35rem;flex-wrap:wrap}
.hist-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.4rem .5rem;border-radius:3px;background:rgba(201,168,76,0.04);border:1px solid var(--border);min-width:40px}
.hist-chip-sym{font-family:'Noto Sans Runic','Segoe UI Historic',serif;font-size:1.1rem;line-height:1;color:var(--gold)}
.hist-chip-sym.ef{color:#a89ad4}
.hist-chip-pos{font-size:.58rem;color:var(--dim);text-align:center}
.hist-chip-name{font-size:.6rem;color:var(--dim);text-align:center}
.hist-see-more{margin-top:.6rem;border-top:1px solid rgba(201,168,76,0.1);padding-top:.5rem;font-size:.72rem;color:var(--dim);cursor:pointer;font-family:'Cinzel',serif;letter-spacing:.5px}
.hist-see-more:hover{color:var(--gold)}
.hist-empty{text-align:center;padding:3rem 1rem;color:var(--dim);font-size:.82rem;font-style:italic}
/* LOGIN INVITE */
#loginInvite{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:800;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.4rem;max-width:340px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.8);display:none;animation:slideUp .35s cubic-bezier(.22,1,.36,1)}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
#loginInvite .li-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--dim);font-size:1.2rem;cursor:pointer;line-height:1}
#loginInvite .li-title{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold);letter-spacing:1.5px;margin-bottom:.25rem}
#loginInvite .li-sub{font-size:.75rem;color:var(--dim);margin-bottom:.8rem;line-height:1.5}
#loginInvite .li-btn{width:100%;padding:.6rem;font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--bg2);background:linear-gradient(135deg,var(--gold),var(--gold-d));border:none;cursor:pointer;border-radius:3px;margin-bottom:.4rem}
#loginInvite .li-skip{width:100%;background:none;border:none;color:var(--dim);font-size:.72rem;cursor:pointer;padding:.2rem}
/* MEMBER CARD */
.member-card{display:flex;align-items:center;gap:.9rem;border-radius:8px;padding:.9rem 1.1rem;margin-bottom:.2rem}
.member-card.premium{background:linear-gradient(135deg,rgba(201,168,76,0.12),rgba(120,90,20,0.08));border:1px solid rgba(201,168,76,0.5)}
.member-card.silver{background:linear-gradient(135deg,rgba(180,190,200,0.1),rgba(140,155,170,0.06));border:1px solid rgba(180,190,210,0.4)}
.member-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.member-icon.premium{background:rgba(201,168,76,0.2);color:var(--gold);border:1px solid rgba(201,168,76,0.4)}
.member-icon.silver{background:rgba(180,190,210,0.15);color:#b8c8d8;border:1px solid rgba(180,190,210,0.35)}
.member-title{font-family:'Cinzel',serif;font-size:.85rem;letter-spacing:2px;margin-bottom:.15rem}
.member-title.premium{color:var(--gold)}
.member-title.silver{color:#b8c8d8}
.member-desc{font-size:.72rem;color:var(--dim);line-height:1.5}
.member-card{border-radius:8px;padding:1rem 1.2rem;display:flex;align-items:center;gap:.9rem}
.member-card.premium{background:linear-gradient(135deg,rgba(201,168,76,0.18),rgba(120,80,10,0.12));border:1px solid rgba(201,168,76,0.55)}
.member-card.silver{background:linear-gradient(135deg,rgba(180,185,195,0.14),rgba(120,125,135,0.08));border:1px solid rgba(180,185,195,0.45)}
.member-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.member-icon.premium{background:rgba(201,168,76,0.2);border:1.5px solid rgba(201,168,76,0.6)}
.member-icon.silver{background:rgba(180,185,195,0.18);border:1.5px solid rgba(180,185,195,0.5)}
.member-title{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:2px}
.member-title.premium{color:var(--gold)}
.member-title.silver{color:#b4b9c3}
.member-desc{font-size:.7rem;color:var(--dim);margin-top:.2rem;line-height:1.5}
.hist-detail-overlay{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,0.88);display:none;align-items:flex-start;justify-content:center;padding:1rem;overflow-y:auto}
.hist-detail-overlay.open{display:flex}
.hist-detail-box{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:1.4rem 1.5rem;max-width:520px;width:100%;position:relative;margin:auto}
.dot{display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;margin:0 2px;animation:blink 1.2s ease infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.15}40%{opacity:1}}
/* GUIDE */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;max-width:560px;margin:0 auto}
.gi{width:78px;cursor:pointer;padding:.35rem;border:1px solid var(--border);border-radius:3px;background:var(--card-bg);transition:all .18s;text-align:center}
.gi:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 6px 18px rgba(201,168,76,0.15)}
.gi img{width:70px;height:93px;object-fit:cover;border-radius:2px;display:block;margin:0 auto .25rem}
.gi .gn{font-family:'Cinzel',serif;font-size:.56rem;color:var(--gold);letter-spacing:.5px}
/* MODAL */
.modal-ov{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.88);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1rem}
.modal-ov.open{display:flex}
.modal{background:var(--card-bg);border:1px solid var(--border);max-width:560px;width:100%;max-height:92vh;overflow-y:auto;border-radius:5px;box-shadow:0 24px 64px rgba(0,0,0,0.9);animation:mIn .25s ease}
@keyframes mIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-close{float:right;margin:.65rem .65rem 0 0;background:rgba(201,168,76,0.1);border:1px solid var(--border);color:var(--gold);cursor:pointer;padding:.22rem .62rem;font-size:.95rem;border-radius:2px;transition:all .18s}
.modal-close:hover{background:rgba(201,168,76,0.2)}
.modal-nav-info{font-family:'Cinzel',serif;font-size:.65rem;color:var(--dim);letter-spacing:1px;text-align:center;margin-top:.3rem}
.modal-topbar{overflow:hidden;min-height:2.6rem;position:sticky;top:0;background:var(--card-bg);z-index:2;border-bottom:1px solid rgba(201,168,76,0.1)}
.modal-side-btn{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(16,8,2,0.85);border:1px solid var(--border);color:var(--gold);cursor:pointer;font-size:1.6rem;border-radius:50%;display:none;align-items:center;justify-content:center;transition:all .22s;z-index:400;backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,0.6);line-height:1}
.modal-side-btn:hover{background:rgba(201,168,76,0.18);border-color:var(--gold);box-shadow:0 0 20px rgba(201,168,76,0.3);transform:translateY(-50%) scale(1.1)}
.modal-side-btn.visible{display:flex}
#modalPrev{left:clamp(4px, calc(50% - 320px - 36px), 48px)}
#modalNext{right:clamp(4px, calc(50% - 320px - 36px), 48px)}
.modal-img{display:none}
.modal-body{padding:1rem 1.3rem 1.3rem}
.m-name{font-family:'Cinzel',serif;font-size:1.25rem;color:var(--gold)}
.m-sym{font-size:1.7rem;color:var(--gold-d);margin:.15rem 0 .25rem}
.m-kw{color:var(--dim);font-size:.76rem;font-style:italic;margin-bottom:.75rem}
.m-tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.75rem}
.mtab{padding:.32rem .75rem;font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:1px;border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;transition:all .18s;border-radius:2px;text-transform:uppercase}
.mtab.active,.mtab:hover{border-color:var(--gold);color:var(--gold-l);background:rgba(201,168,76,0.07)}
.mpane{display:none;color:var(--text);line-height:1.85;font-size:.86rem}.mpane.active{display:block}
.landing-wrap{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1rem}
.landing-sym{font-size:4rem;margin-bottom:.8rem;filter:drop-shadow(0 0 24px rgba(201,168,76,0.5));animation:vspin 40s linear infinite;display:inline-block}
.landing-title{font-family:'Cinzel Decorative',serif;font-size:clamp(1.4rem,5vw,3rem);color:var(--gold);letter-spacing:4px;text-shadow:0 0 40px rgba(201,168,76,0.4),0 2px 8px #000;margin-bottom:.4rem}
.landing-sub{color:var(--dim);font-size:clamp(.8rem,2vw,1rem);letter-spacing:3px;margin-bottom:3rem;font-style:italic}
.landing-div{width:280px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:0 auto 3rem}
.landing-choices{display:flex;flex-direction:column;gap:1.2rem;width:100%;max-width:360px}
.choice-btn{padding:1.2rem 2rem;font-family:'Cinzel',serif;font-size:.9rem;letter-spacing:3px;text-transform:uppercase;border:1px solid rgba(201,180,130,0.25);background:linear-gradient(145deg,rgba(16,10,4,0.9),rgba(28,20,10,0.75),rgba(16,10,4,0.9));color:var(--text);cursor:pointer;transition:all .4s;border-radius:12px;position:relative;overflow:hidden;-webkit-tap-highlight-color:rgba(201,168,76,0.15);touch-action:manipulation;box-shadow:0 2px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,240,200,0.05)}
.choice-btn *{pointer-events:none}
.choice-btn::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,245,220,0.06),rgba(255,250,230,0.12),rgba(255,245,220,0.06),transparent);transform:skewX(-20deg);transition:none;animation:shimmer 5s ease-in-out infinite}
@keyframes shimmer{0%,100%{left:-100%}50%{left:150%}}
#sec-support .choice-btn::before{animation:none;display:none}
#sec-support .choice-btn::after{display:none}
#sec-support .choice-btn:hover::before{animation:none;display:none}
.choice-btn::after{content:'';position:absolute;inset:0;border-radius:5px;background:linear-gradient(135deg,rgba(201,168,76,0.1),transparent 40%,transparent 60%,rgba(201,168,76,0.05));pointer-events:none}
.choice-btn:hover{border-color:rgba(201,168,76,0.5);color:var(--gold-l);transform:translateY(-3px);box-shadow:0 8px 32px rgba(201,168,76,0.15),0 0 20px rgba(201,168,76,0.1),inset 0 1px 0 rgba(255,240,200,0.08)}
.choice-btn:hover::before{animation:shimmer 2s ease-in-out infinite}
.choice-btn .cb-icon{font-size:1.5rem;display:block;margin-bottom:.4rem;filter:drop-shadow(0 0 6px rgba(201,168,76,0.25))}
.choice-btn .cb-name{display:block;font-size:.85rem;color:var(--gold);text-shadow:0 0 8px rgba(201,168,76,0.2);letter-spacing:1px}
.choice-btn .cb-desc{display:block;font-size:.7rem;color:var(--dim);margin-top:.25rem;letter-spacing:1px;font-family:'Sarabun',sans-serif;text-transform:none}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:#5c3d1e;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gold-d)}
/* NINE-CARD GRID (after reveal) */
.nine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:420px;width:100%;margin:0 auto 1rem}
.nine-cell{background:var(--card-bg);border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .35rem;cursor:default;transition:all .4s;position:relative;overflow:hidden}
.nine-cell .nc-pos{font-size:.52rem;color:var(--gold);letter-spacing:1px;font-family:'Cinzel',serif;font-weight:600;text-align:center;min-height:1.3em}
.nine-cell .nc-month{font-size:.46rem;color:var(--dim);letter-spacing:.5px;margin-top:.05rem}
.nine-cell .nc-img{width:64px;height:85px;object-fit:cover;border-radius:3px;margin:.15rem 0;border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.4);transition:transform .4s,opacity .4s}
.nine-cell .nc-sym{font-family:'Noto Sans Runic','Segoe UI Historic',serif!important;font-size:1.5rem;line-height:1.2;filter:drop-shadow(0 0 6px rgba(201,168,76,0.3));margin:.08rem 0}
.nine-cell .nc-name{font-family:'Cinzel',serif;font-size:.56rem;color:var(--gold);letter-spacing:1px;text-align:center}
.nine-cell .nc-kw{font-size:.44rem;color:var(--dim);text-align:center;line-height:1.4;margin-top:.06rem}
.nine-cell.nc-center{border-color:var(--gold);background:rgba(201,168,76,0.08);box-shadow:0 0 16px rgba(201,168,76,0.15)}
@keyframes nineReveal{0%{opacity:0;transform:scale(.8) rotateY(90deg)}50%{opacity:.7;transform:scale(1.03) rotateY(-5deg)}100%{opacity:1;transform:scale(1) rotateY(0)}}
.nine-cell.nc-anim{animation:nineReveal .5s ease-out both}
.nine-period-row{display:flex;gap:.5rem;justify-content:center;margin-bottom:.8rem;flex-wrap:wrap;align-items:center}
/* SPARKLE / แวววาว EFFECTS */
.sparkle-wrap{position:relative;display:inline-block}
.sparkle-wrap .sparkle{position:absolute;pointer-events:none;z-index:10}
.sparkle-wrap .sparkle svg{filter:drop-shadow(0 0 3px rgba(255,240,180,0.9))}
@keyframes sparkleAnim{0%{opacity:0;transform:scale(0) rotate(0deg)}30%{opacity:1;transform:scale(1) rotate(90deg)}70%{opacity:1;transform:scale(0.8) rotate(200deg)}100%{opacity:0;transform:scale(0) rotate(360deg)}}
.sparkle-wrap .sparkle{animation:sparkleAnim var(--dur,2s) var(--delay,0s) ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.3;transform:scale(.95)}50%{opacity:.8;transform:scale(1.1)}}
/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin:2rem 0}
.price-card{background:var(--card-bg);border:2px solid var(--border);border-radius:8px;padding:1.8rem 1.5rem;position:relative;transition:all .3s;display:flex;flex-direction:column}
.price-card:hover{border-color:var(--gold-d);transform:translateY(-4px);box-shadow:0 12px 32px rgba(201,168,76,0.15)}
.price-card.featured{border-color:var(--gold);background:linear-gradient(135deg,rgba(201,168,76,0.03),rgba(201,168,76,0.01))}
.price-card.featured:hover{box-shadow:0 12px 48px rgba(201,168,76,0.25)}
.price-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--bg2);border:1px solid var(--border);padding:.25rem .9rem;border-radius:12px;font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase}
.price-badge.gold{background:linear-gradient(135deg,var(--gold-d),var(--gold));color:var(--bg);border-color:var(--gold)}
.price-title{font-family:'Cinzel Decorative',serif;font-size:1.15rem;color:var(--gold);text-align:center;margin:1rem 0 .8rem;letter-spacing:2px}
.price-amount{font-family:'Cinzel',serif;font-size:2.8rem;color:var(--text);text-align:center;line-height:1;font-weight:700}
.price-amount span{font-size:1.2rem;color:var(--dim);margin-left:.2rem}
.price-period{text-align:center;color:var(--dim);font-size:.8rem;margin-top:.3rem;margin-bottom:1rem}
.price-save{text-align:center;background:rgba(123,198,126,0.12);color:var(--green);padding:.3rem .7rem;border-radius:3px;font-size:.7rem;font-family:'Cinzel',serif;letter-spacing:1px;margin:-.5rem auto 1rem;display:inline-block;width:fit-content}
.price-features{flex:1;margin-bottom:1.5rem}
.pf-item{padding:.5rem 0;font-size:.8rem;color:var(--text);line-height:1.5;border-bottom:1px solid rgba(201,168,76,0.08)}
.pf-item:last-child{border-bottom:none}
.price-btn{width:100%;padding:.85rem;font-family:'Cinzel',serif;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;color:var(--bg2);background:linear-gradient(135deg,var(--gold-d),#6b5210);border:1px solid var(--gold-d);cursor:pointer;border-radius:4px;transition:all .25s}
.price-btn:hover{background:linear-gradient(135deg,var(--gold),var(--gold-l));transform:translateY(-1px);box-shadow:0 6px 16px rgba(201,168,76,0.3)}
.price-btn.featured{background:linear-gradient(135deg,var(--gold),var(--gold-d));border-color:var(--gold)}
.price-btn.featured:hover{background:linear-gradient(135deg,var(--gold-l),var(--gold))}
.price-note{text-align:center;margin-top:2rem;padding:1.2rem;background:rgba(201,168,76,0.04);border:1px solid var(--border);border-radius:6px;font-size:.82rem;color:var(--dim);line-height:1.6}
.price-note strong{color:var(--gold);font-family:'Cinzel',serif;letter-spacing:1px}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr;gap:.9rem}.price-card{padding:1.5rem 1.2rem}}

/* ─────────────────────────────────────────────────────────────────────────────── */

#visitorCount{position:fixed;bottom:1.2rem;left:1.2rem;z-index:200;background:rgba(16,8,2,0.85);border:1px solid var(--border);color:var(--dim);font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:1px;padding:.4rem .8rem;border-radius:20px;backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(201,168,76,0.15);display:flex;align-items:center;gap:.4rem}
#visitorCount .vc-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:vcPulse 2s infinite}
@keyframes vcPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ELDER FUTHARK FREE MODE */
/* ── ขนาดไพ่ ── แก้ที่นี่ที่เดียว ทุกจุดเปลี่ยนตาม ── */
:root{
  --ef-w:72px; --ef-h:96px;       /* กองไพ่ */
  --ef-fw:110px; --ef-fh:147px;   /* ตอนพลิก */
  --ef-tw:80px; --ef-th:107px;    /* thumbnail คำทำนาย */
}
.ef-table{position:relative;width:100%;height:260px;margin:0 auto;max-width:560px}
/* การ์ดในกอง */
.ef-card{
  width:var(--ef-w);height:var(--ef-h);
  border-radius:4px;cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .2s ease,opacity .3s ease,filter .3s ease;
  border:2px solid rgba(201,168,76,0.25);position:absolute;top:50%;left:50%;
  background:transparent;box-shadow:0 2px 8px rgba(0,0,0,0.5);overflow:hidden;transform-origin:center bottom;will-change:transform
}
.ef-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:2px;pointer-events:none}
/* ef tooltip removed */
.ef-card.ef-sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,0.3),0 18px 36px rgba(201,168,76,0.5),0 6px 14px rgba(0,0,0,0.6);filter:brightness(1.12);z-index:500!important;transform:translate(-50%,-76%) scale(1.15) rotate(0deg)!important;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .2s ease,filter .3s ease}
.ef-card.ef-sel:hover{filter:brightness(1.2)}
.ef-card.ef-used{cursor:not-allowed;pointer-events:none}
.ef-card .ef-num{display:none}
/* การ์ดพลิก */
.ef-flip-card{width:var(--ef-fw);height:var(--ef-fh);perspective:800px;margin:0 auto}
.ef-flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.ef-flip-inner.flipped{transform:rotateY(180deg)}
.ef-flip-front,.ef-flip-back{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:4px;border:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-direction:column
}
.ef-flip-front{background:transparent}
.ef-flip-back{transform:rotateY(180deg);background:transparent}
.ef-flip-front img,.ef-flip-back img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:3px}
/* fallback (ถ้าไม่มีรูป) */
.ef-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(145deg,#1a0e06,#2a1810)}
.ef-flip-back .ef-sym{font-size:2.2rem;color:var(--gold);filter:drop-shadow(0 0 10px rgba(201,168,76,0.5))}
.ef-flip-back .ef-name{font-family:'Cinzel',serif;font-size:.6rem;color:var(--dim);margin-top:.2rem}
/* thumbnail */
.ef-thumb{width:var(--ef-tw);height:var(--ef-th);border-radius:4px;border:1px solid var(--border);object-fit:cover;object-position:center;display:block;margin:0 auto .3rem;box-shadow:0 2px 10px rgba(0,0,0,0.5)}
.ef-thumb-fallback{width:var(--ef-tw);height:var(--ef-th);border-radius:4px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#0d0805,#1a0e06)}

#fbLink{position:fixed;bottom:1.2rem;left:auto;right:4.2rem;z-index:200;background:rgba(16,8,2,0.85);border:1px solid var(--border);color:var(--gold);font-size:1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all .2s;box-shadow:0 2px 12px rgba(201,168,76,0.15);text-decoration:none}
#fbLink:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(201,168,76,0.3);color:var(--gold-l)}
#lineLink{position:fixed;bottom:1.2rem;left:auto;right:7.2rem;z-index:200;background:rgba(16,8,2,0.85);border:1px solid var(--border);color:var(--gold);font-size:1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all .2s;box-shadow:0 2px 12px rgba(201,168,76,0.15);text-decoration:none}
#lineLink:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(201,168,76,0.3);color:var(--gold-l)}
#igLink{position:fixed;bottom:1.2rem;left:auto;right:10.2rem;z-index:200;background:rgba(16,8,2,0.85);border:1px solid var(--border);color:var(--gold);font-size:1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all .2s;box-shadow:0 2px 12px rgba(201,168,76,0.15);text-decoration:none}
#igLink:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(201,168,76,0.3);color:var(--gold-l)}
#audioBtn{position:fixed;bottom:1.2rem;right:1.2rem;z-index:200;background:rgba(16,8,2,0.85);border:1px solid var(--border);color:var(--gold);font-size:1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all .2s;box-shadow:0 2px 12px rgba(201,168,76,0.15)}
#audioBtn:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(201,168,76,0.3)}

/* ─────────── PROFILE BOX ─────────── */
.profile-box{padding:1.6rem 1.6rem 1.4rem !important;text-align:center}
.profile-hero{display:flex;flex-direction:column;align-items:center;margin-bottom:1.1rem}
.profile-avatar-ring{position:relative;width:96px;height:96px;border-radius:50%;padding:3px;background:linear-gradient(135deg,rgba(201,168,76,0.7),rgba(201,168,76,0.15) 40%,rgba(201,168,76,0.6));box-shadow:0 0 24px rgba(201,168,76,0.25),0 4px 18px rgba(0,0,0,0.6);margin-bottom:.85rem}
.profile-avatar-ring.tier-silver{background:linear-gradient(135deg,#d8dde8,rgba(180,185,195,0.2) 40%,#b4b9c3);box-shadow:0 0 22px rgba(180,185,195,0.35),0 4px 18px rgba(0,0,0,0.6)}
.profile-avatar-ring.tier-premium{background:linear-gradient(135deg,var(--gold-l),rgba(201,168,76,0.25) 40%,var(--gold));box-shadow:0 0 28px rgba(201,168,76,0.6),0 0 48px rgba(201,168,76,0.25),0 4px 18px rgba(0,0,0,0.6);animation:profileAvatarGlow 3s ease-in-out infinite}
@keyframes profileAvatarGlow{0%,100%{box-shadow:0 0 28px rgba(201,168,76,0.6),0 0 48px rgba(201,168,76,0.25),0 4px 18px rgba(0,0,0,0.6)}50%{box-shadow:0 0 36px rgba(201,168,76,0.85),0 0 60px rgba(201,168,76,0.4),0 4px 18px rgba(0,0,0,0.6)}}
.profile-avatar{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#1a0e06,#2a1a0a);display:flex;align-items:center;justify-content:center;color:var(--gold);overflow:hidden}
.profile-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.profile-avatar .initial-fallback{font-family:'Cinzel',serif;font-size:2rem;font-weight:600;color:var(--gold)}
.profile-avatar-badge{position:absolute;bottom:2px;right:2px;width:26px;height:26px;border-radius:50%;background:var(--card-bg);border:2px solid var(--border);display:none;align-items:center;justify-content:center;font-size:.85rem;line-height:1}
.profile-avatar-badge.show{display:flex}
.profile-avatar-badge.tier-silver{border-color:#b4b9c3;color:#b4b9c3}
.profile-avatar-badge.tier-premium{border-color:var(--gold);color:var(--gold);text-shadow:0 0 8px rgba(201,168,76,0.8)}
.profile-hero-name{font-family:'Cinzel',serif;font-size:1.05rem;letter-spacing:1.5px;color:var(--gold);margin-bottom:.15rem;word-break:break-word;max-width:100%}
.profile-hero-email{font-size:.74rem;color:var(--dim);margin-bottom:.55rem;word-break:break-all}
.profile-hero-tier{display:inline-block;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:1.8px;padding:.22rem .7rem;border-radius:3px;text-transform:uppercase}
.profile-hero-tier.tier-free{color:#8a7a5a;background:rgba(138,122,90,0.08);border:1px solid rgba(138,122,90,0.35)}
.profile-hero-tier.tier-silver{color:#b4b9c3;background:rgba(180,190,210,0.08);border:1px solid rgba(180,190,210,0.35)}
.profile-hero-tier.tier-premium{color:var(--gold);background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.4);box-shadow:0 0 10px rgba(201,168,76,0.2)}

/* STATS */
.profile-stats{display:flex;align-items:stretch;justify-content:center;gap:.6rem;margin:0 0 1.1rem;padding:.85rem .5rem;background:rgba(20,12,4,0.6);border:1px solid var(--border);border-radius:6px}
.profile-stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 .4rem}
.profile-stat-num{font-family:'Cinzel',serif;font-size:1.25rem;color:var(--gold);letter-spacing:1px;line-height:1.2}
.profile-stat-lbl{font-size:.66rem;color:var(--dim);margin-top:.2rem;letter-spacing:.5px}
.profile-stat-sep{width:1px;background:var(--border);margin:.2rem 0}

/* RUNE HERO CARD */
.profile-rune-hero{position:relative;background:linear-gradient(160deg,rgba(40,24,8,0.65),rgba(20,12,4,0.85));border:1px solid rgba(201,168,76,0.35);border-radius:10px;padding:1.3rem 1.2rem 1.2rem;margin:0 0 1.2rem;text-align:center;overflow:hidden;box-shadow:0 4px 22px rgba(0,0,0,0.5),inset 0 0 30px rgba(201,168,76,0.05)}
.profile-rune-glow{position:absolute;inset:-30%;background:radial-gradient(ellipse at center,rgba(201,168,76,0.18),transparent 60%);pointer-events:none;animation:runeGlowPulse 4s ease-in-out infinite}
@keyframes runeGlowPulse{0%,100%{opacity:.5}50%{opacity:1}}
.profile-rune-sym-wrap{position:relative;display:inline-block;margin-bottom:.6rem}
.profile-rune-sym{font-family:'Noto Sans Runic','Segoe UI Historic',serif;font-size:3.4rem;color:var(--gold);line-height:1;text-shadow:0 0 16px rgba(201,168,76,0.7),0 0 32px rgba(201,168,76,0.35);position:relative;z-index:1}
.profile-rune-label{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:3px;color:var(--gold-d);text-transform:uppercase;margin-bottom:.25rem;position:relative;z-index:1}
.profile-rune-name{font-family:'Cinzel',serif;font-size:.92rem;color:var(--gold);letter-spacing:2px;margin-bottom:.55rem;position:relative;z-index:1}
.profile-rune-desc{font-size:.76rem;color:var(--text);line-height:1.65;position:relative;z-index:1;opacity:.92}

/* SECTION TITLE */
.profile-section-title{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:2.5px;color:var(--gold-d);text-transform:uppercase;text-align:left;margin:0 0 .65rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}

/* DROPDOWN AVATAR */
.av-pic{display:block;margin:.85rem auto .35rem;width:54px;height:54px;border-radius:50%;border:2px solid rgba(201,168,76,0.4);object-fit:cover;background:linear-gradient(135deg,#1a0e06,#2a1a0a)}

/* MOBILE */
@media (max-width:480px){
  .profile-box{padding:1.3rem 1.15rem 1.1rem !important}
  .profile-avatar-ring{width:84px;height:84px}
  .profile-hero-name{font-size:.95rem}
  .profile-rune-sym{font-size:2.8rem}
  .profile-stat-num{font-size:1.1rem}
}

/* ─── Reserve space กัน content jump ─── */
.profile-stat-num{min-height:1.5em;display:flex;align-items:center;justify-content:center}
.av-name{min-height:1.2em}
.av-email{min-height:1em}
.profile-hero-name{min-height:1.2em}
.profile-hero-email{min-height:1em}

/* ─── Focus visible (a11y keyboard nav) ─── */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
.av-item:focus-visible{background:rgba(201,168,76,0.12)}
#avatarBtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-d);outline-offset:1px}

/* ─── Loading state ของปุ่ม async ─── */
button[disabled],button.is-loading{opacity:.6;cursor:wait;pointer-events:none}
button.is-loading::after{content:'';display:inline-block;width:.85em;height:.85em;margin-left:.5em;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btnSpin .7s linear infinite;vertical-align:-2px}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ─── Reduced motion (a11y CRITICAL) ─── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
    scroll-behavior:auto !important;
  }
  /* ปิด glow/pulse ที่ไม่จำเป็น */
  #avatarBtn.av-premium,
  .profile-avatar-ring.tier-premium,
  .profile-rune-glow,
  .profile-rune-sym{animation:none !important;text-shadow:none !important}
  /* sparkle effect — ปิดถ้ามี */
  .sparkle,.sparkle-wrap *{animation:none !important;opacity:.4 !important}
}