/* ผู้พิทักษ์ (Patronus) — ธีมมืดสไตล์ Wizarding World: ราตรีดาว น้ำเงินเข้ม + ทอง */
:root{
  --bg:#02070c; --bg2:#0a1030; --panel:rgba(4,20,31,.80); --panel2:rgba(8,32,47,.74);
  --line:rgba(110,190,225,.32); --gold:#7fd0ee; --gold2:#dff4ff; --text:#e6f6ff; --muted:#8fb4c6;
  --ok:#7fe0b0; --err:#ff8f8f; --info:#8fb8ff; --silver:#dbe6ff;
  --f-head:'Cinzel','Noto Serif Thai','Times New Roman',serif;
  --f-thai:'Noto Serif Thai','Sarabun',serif;
  --f-body:'Sarabun','Noto Sans Thai',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#02070c}
body{margin:0;min-height:100vh;font-family:var(--f-body);font-size:17px;line-height:1.65;color:var(--text);
  background:radial-gradient(1200px 700px at 50% -10%,#0b3c52 0%,rgba(22,34,94,0) 60%),radial-gradient(900px 600px at 90% 110%,#082a3a 0%,rgba(26,18,80,0) 55%),linear-gradient(180deg,#03101a 0%,#02070c 100%);
  }
a{color:var(--gold2);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--f-head);font-weight:700;line-height:1.3;margin:.2em 0 .5em}
.title{font-size:clamp(1.5rem,4.5vw,2.2rem);color:var(--gold2);text-shadow:0 0 18px rgba(120,205,240,.35);letter-spacing:.02em}
.sub{font-size:1.15rem;color:var(--gold);margin:1.2em 0 .6em}
.sub.small{font-size:1rem}
.lead{font-size:1.05rem;color:#c9d2f5;max-width:70ch}
.muted{color:var(--muted)}.small{font-size:.86rem}.center{text-align:center}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
code{background:rgba(255,255,255,.08);padding:.05em .4em;border-radius:5px;font-size:.9em}

/* ท้องฟ้าดาว */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sky i{position:absolute;top:0;left:0;width:1px;height:1px;border-radius:50%;background:transparent}
.sky .s1{animation:tw 5s ease-in-out infinite alternate}
.sky .s2{width:2px;height:2px;animation:tw 7s 1.2s ease-in-out infinite alternate}
.sky .s3{width:3px;height:3px;animation:tw 4s .6s ease-in-out infinite alternate;filter:drop-shadow(0 0 3px #bff3ff)}
@keyframes tw{from{opacity:.35}to{opacity:1}}

/* หัวเว็บ */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.6rem 1.2rem;background:rgba(5,8,22,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--f-head);font-weight:700;font-size:1.15rem;color:var(--gold2);display:flex;gap:.5rem;align-items:center;white-space:nowrap}
.brand:hover{text-decoration:none}.crest{color:var(--gold);text-shadow:0 0 10px var(--gold)}
.top nav{margin-left:auto;display:flex;gap:.2rem;flex-wrap:wrap;align-items:center}
.top nav a,.top nav button.link{color:#cbd4ff;padding:.35rem .7rem;border-radius:999px;font-size:.95rem;border:0;background:none;cursor:pointer;font-family:inherit}
.top nav a:hover,.top nav button.link:hover{background:rgba(255,255,255,.08);text-decoration:none}
.top nav a.on{background:rgba(120,205,240,.16);color:var(--gold2);box-shadow:inset 0 0 0 1px var(--line)}
.logout{margin:0 0 0 .4rem}.logout button{color:var(--muted)!important;font-size:.85rem!important}
input[type=checkbox].navtoggle,.burger{display:none}
.wrap{max-width:1100px;margin:0 auto;padding:1.4rem 1rem 3rem}
.foot{text-align:center;color:#6f7bb0;font-size:.8rem;padding:1.5rem 1rem 2rem}

/* แผง / การ์ด */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.3rem 1.4rem;margin:1rem 0;box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.panel.narrow,.narrow{max-width:640px;margin-left:auto;margin-right:auto}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cols>.panel{margin:.5rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin:1rem 0}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;position:relative}
.card h2,.card h3{font-size:1.05rem;margin:.2em 0 .4em;color:var(--gold2)}.card p{margin:.3em 0 .8em;font-size:.95rem;color:#c9d2f5}
.card .num{position:absolute;top:.7rem;right:.9rem;font-family:var(--f-head);font-size:1.6rem;color:rgba(120,205,240,.4)}
.card.done{border-color:rgba(127,224,176,.5)}.card.done .num{color:var(--ok)}
.card.lock{opacity:.5}.card.now{box-shadow:0 0 0 1px var(--gold),0 0 24px rgba(120,205,240,.25)}
.hint{font-style:italic;color:#dfe6ff}
.hero{margin:.5rem 0 1rem}

/* ปุ่ม / ฟอร์ม */
.btn{display:inline-block;font-family:var(--f-body);font-size:1rem;font-weight:600;color:#03202c;background:linear-gradient(180deg,#dff4ff,#a9dcf2);border:0;border-radius:999px;padding:.6rem 1.5rem;cursor:pointer;box-shadow:0 4px 18px rgba(216,174,60,.35);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(216,174,60,.5);text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--gold2);box-shadow:inset 0 0 0 1px var(--line)}.btn.ghost:hover{background:rgba(120,205,240,.1)}
.btn.danger{background:linear-gradient(180deg,#ff9b9b,#c94a4a);color:#2a0505;box-shadow:none}
.btn.small{font-size:.82rem;padding:.3rem .8rem}.btn.big{font-size:1.2rem;padding:.85rem 2.4rem}
.linkbtn{background:none;border:0;color:var(--gold2);cursor:pointer;font:inherit;padding:0}
label{display:block;font-size:.92rem;color:#c3ccf2;margin:.7rem 0}
label.check{display:inline-flex;gap:.4rem;align-items:center;margin:.3rem .8rem .3rem 0}
input,select,textarea{display:block;width:100%;margin-top:.3rem;font:inherit;font-size:1rem;color:var(--text);background:rgba(4,8,30,.75);border:1px solid rgba(160,175,240,.35);border-radius:10px;padding:.55rem .75rem}
input[type=checkbox]{display:inline-block;width:auto;margin:0}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(120,205,240,.6);outline-offset:1px}
textarea{resize:vertical;line-height:1.6}
input:disabled{opacity:.6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 1rem;align-items:end}
.rowend{grid-column:1/-1}.wide{grid-column:1/-1}
form.inline{display:inline-block;margin:0}form.inline.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}form.inline.row input,form.inline.row select{width:auto;margin:0}
select.mini{display:inline-block;width:auto;padding:.2rem .4rem;font-size:.8rem}
.weights{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.days{display:flex;flex-wrap:wrap}

.flash{border-radius:12px;padding:.7rem 1rem;margin:.8rem 0;border:1px solid;font-size:.97rem}
.flash.ok{background:rgba(127,224,176,.1);border-color:rgba(127,224,176,.5);color:#c9f7e0}
.flash.err{background:rgba(255,143,143,.1);border-color:rgba(255,143,143,.5);color:#ffd0d0}
.flash.info{background:rgba(143,184,255,.1);border-color:rgba(143,184,255,.45);color:#d4e3ff}
.okbox{background:rgba(127,224,176,.1);border:1px solid rgba(127,224,176,.45);color:#c9f7e0;border-radius:10px;padding:.4rem .8rem;display:inline-block}
.waitbox{background:rgba(120,205,240,.1);border:1px solid var(--line);color:var(--gold2);border-radius:10px;padding:.4rem .8rem;display:inline-block}
.badge{display:inline-block;font-size:.72rem;font-family:var(--f-body);padding:.1rem .6rem;border-radius:999px;border:1px solid var(--line);color:var(--silver);vertical-align:middle}
.badge.r-common{color:#dbe6ff;border-color:rgba(219,230,255,.45)}
.badge.r-uncommon{color:#b8f0ff;border-color:rgba(184,240,255,.6);background:rgba(184,240,255,.08)}
.badge.r-rare{color:#e2c9ff;border-color:rgba(226,201,255,.65);background:rgba(226,201,255,.1)}
.badge.r-legendary{color:#ffe6a0;border-color:rgba(255,230,160,.8);background:rgba(255,230,160,.14);box-shadow:0 0 10px rgba(255,230,160,.35)}
.badge.lvl{color:var(--gold2)}
h2.sub.r-common{color:#dbe6ff}h2.sub.r-uncommon{color:#b8f0ff}h2.sub.r-rare{color:#e2c9ff}h2.sub.r-legendary{color:#ffe6a0}

/* ตาราง */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;color:var(--gold);font-weight:600;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.5rem .6rem;border-bottom:1px solid rgba(160,175,240,.14);vertical-align:top}
.tbl tr.off{opacity:.5}.scroll{overflow-x:auto}
.acts{white-space:normal}.acts .btn,.acts form{margin:.12rem .1rem}
.res-passed{color:var(--ok)}.res-failed{color:var(--err)}.res-retry,.res-waiting{color:var(--gold2)}
.checks{list-style:none;padding:0;margin:.5rem 0}.checks li{padding:.15rem 0}.checks .ok{color:var(--ok)}.checks .bad{color:var(--err)}
.steps{padding-left:1.3rem}.steps li{margin:.4rem 0}
.subnav,.tabs{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0 1rem}
.subnav a,.tabs a,.pager a{padding:.3rem .8rem;border-radius:999px;border:1px solid var(--line);color:#cbd4ff;font-size:.9rem}
.subnav a.on,.tabs a.on,.pager a.on{background:rgba(120,205,240,.18);color:var(--gold2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem;margin:1rem 0}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;text-align:center}
.stat b{display:block;font-family:var(--f-head);font-size:1.8rem;color:var(--gold2)}.stat span{font-size:.82rem;color:var(--muted)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:1rem 0}.facts dt{color:var(--muted)}.facts dd{margin:0}
details summary{cursor:pointer;color:var(--gold2)}details summary.sub{margin:.2em 0}
.creature-edit{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:start}
.ce-art{max-width:150px}
.creature-form{margin-top:.6rem}

/* ขั้นตอนพิธี */
.stagelist{list-style:none;padding:0;margin:.5rem 0}
.stagelist li{display:flex;align-items:center;gap:.7rem;padding:.35rem 0;color:var(--muted)}
.stagelist .dot{width:1.7rem;height:1.7rem;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);font-size:.85rem}
.stagelist li.done{color:var(--ok)}.stagelist li.done .dot{border-color:var(--ok);background:rgba(127,224,176,.14)}
.stagelist li.now{color:var(--gold2)}.stagelist li.now .dot{border-color:var(--gold);box-shadow:0 0 12px rgba(120,205,240,.6)}
.memform textarea{font-family:var(--f-thai);font-size:1.02rem}

/* สัตว์ผู้พิทักษ์ */
.creature{display:block;width:100%;height:auto;overflow:visible}
.showcase{position:relative;max-width:340px;margin:.4rem auto;padding:.5rem;border-radius:50%;aspect-ratio:1.25/1;display:grid;place-items:center;background:radial-gradient(closest-side,rgba(180,200,255,.16),rgba(180,200,255,0) 75%)}
.showcase.r-uncommon{background:radial-gradient(closest-side,rgba(150,230,255,.2),transparent 75%)}
.showcase.r-rare{background:radial-gradient(closest-side,rgba(210,170,255,.24),transparent 75%)}
.showcase.r-legendary{background:radial-gradient(closest-side,rgba(255,220,130,.3),transparent 75%)}
.showcase.unknown .creature{opacity:.5}
.cname{font-family:var(--f-thai);color:var(--gold2);font-size:1.4rem}
.cr-float{animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.creature .mist circle{animation:drift 7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes drift{from{transform:translate(-6px,3px) scale(.92)}to{transform:translate(7px,-4px) scale(1.08)}}
.creature .shield{animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-bottom:1.5rem}
.shelf-item{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:.8rem;text-align:center}
.shelf-item h3{font-family:var(--f-thai);font-size:1.05rem;color:var(--gold2);margin:.3rem 0}
.shelf-item .thumb{padding:.3rem}.shelf-item.mine{box-shadow:0 0 0 1px var(--gold),0 0 22px rgba(120,205,240,.35)}
.shelf-item.unknown{opacity:.75}.shelf-item.unknown h3{color:var(--muted)}
.emblem{max-width:230px;margin:0 auto}

/* พิธีเผยผู้พิทักษ์ */
.reveal{position:relative;max-width:420px;margin:0 auto;aspect-ratio:1.3/1;display:grid;place-items:center}
.reveal .mists i{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2);border-radius:50%;background:radial-gradient(circle,rgba(230,240,255,.9),rgba(160,190,255,0) 70%);
  transform:translate(var(--x),var(--y));opacity:0;animation:gather 3.4s var(--d) cubic-bezier(.3,.6,.3,1) forwards}
@keyframes gather{0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.6)}25%{opacity:.95}80%{opacity:.9;transform:translate(0,0) scale(1.4)}100%{opacity:0;transform:translate(0,0) scale(2.2)}}
.reveal-creature{width:100%;opacity:0;filter:blur(22px) brightness(2);transform:scale(.6);animation:form 2.4s 2.8s ease-out forwards}
@keyframes form{to{opacity:1;filter:blur(0) brightness(1);transform:scale(1)}}
.reveal-text{opacity:0;animation:fadein 1.4s 4.6s forwards}
@keyframes fadein{to{opacity:1}}

/* ด่านความกลัว */
#fear-stage{position:relative;min-height:340px;border-radius:14px;overflow:hidden;padding:1rem}
.fear-dark{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0%,#000 70%);opacity:0;pointer-events:none;z-index:2;transition:opacity 1s linear}
.fear-head{display:flex;justify-content:space-between;color:var(--gold2);font-family:var(--f-head)}
.timer{color:var(--err)}
.fear-q{font-family:var(--f-thai);font-size:1.15rem;margin:1rem 0;min-height:4.5em;position:relative;z-index:3}
.fear-opts{display:grid;gap:.6rem;position:relative;z-index:3}
.fear-opts button{font:inherit;text-align:left;padding:.7rem 1rem;border-radius:12px;background:rgba(20,30,78,.9);border:1px solid var(--line);color:var(--text);cursor:pointer}
.fear-opts button:hover{border-color:var(--gold);background:rgba(40,55,120,.9)}
.fear-opts button:disabled{opacity:.5}

/* พิธียามค่ำ */
.ring-wrap{position:relative;width:min(280px,70vw);aspect-ratio:1;margin:1rem auto}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring-bg{stroke:rgba(160,175,240,.2)}.ring-fg{stroke:var(--gold);stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px var(--gold))}
.hold{position:absolute;inset:14%;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 40%,rgba(180,200,255,.4),rgba(20,30,90,.9));color:var(--gold2);font-family:var(--f-thai);font-size:1.1rem;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 30px rgba(140,170,255,.35)}
.hold.on{box-shadow:0 0 50px rgba(120,205,240,.7);background:radial-gradient(circle at 50% 40%,rgba(170,235,255,.55),rgba(6,40,64,.9))}
.incant{font-family:var(--f-head);font-size:1.6rem;color:var(--gold2);text-align:center;text-shadow:0 0 16px rgba(120,205,240,.6);margin:.3rem 0}
.incant-in{max-width:360px;margin:0 auto;text-align:center;font-family:var(--f-head);font-size:1.15rem}

/* ส่งสาร / ร่ายร่วม */
.msg{padding:.6rem .9rem;border-radius:12px;background:rgba(255,255,255,.04);margin:.5rem 0;border:1px solid rgba(160,175,240,.16)}
.msg.in{display:flex;gap:.8rem;align-items:flex-start}
.msg .glow{flex:0 0 14px;height:14px;margin-top:.5rem;border-radius:50%;background:radial-gradient(circle,#fff,#a9c4ff 55%,transparent 70%);box-shadow:0 0 14px #a9c4ff}
.msg.new{border-color:var(--gold);background:rgba(120,205,240,.07)}.msg.new .glow{animation:pulse 1.6s infinite}
.orb-fly{position:fixed;left:8%;bottom:20%;z-index:50;pointer-events:none}
.orb-fly i{display:block;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#fff,#a9c4ff 50%,transparent 70%);box-shadow:0 0 30px 10px rgba(169,196,255,.7);animation:fly 3.2s ease-in forwards}
@keyframes fly{0%{transform:translate(0,0) scale(1);opacity:1}60%{opacity:1}100%{transform:translate(85vw,-60vh) scale(.2);opacity:0}}
.dementor .dhead{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem}
.bar{height:14px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#3a1d5c,#7b3fa8);transition:width .6s}
.invite{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.6rem .9rem;border-radius:12px;border:1px solid var(--line);margin:.5rem 0}
.top li{margin:.2rem 0}

@media (max-width:820px){
  body{font-size:16px}
  .cols,.grid2,.grid3,.grid4{grid-template-columns:1fr}
  .weights{grid-template-columns:repeat(2,1fr)}
  .creature-edit{grid-template-columns:1fr}
  .burger{display:inline-flex;margin-left:auto;width:42px;height:38px;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--line);border-radius:10px}
  .burger span,.burger span::before,.burger span::after{content:"";display:block;width:20px;height:2px;background:var(--gold2);position:relative}
  .burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
  .top nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(5,8,22,.97);border-bottom:1px solid var(--line);padding:.5rem 1rem;margin:0}
  .navtoggle:checked~nav{display:flex}
  .top nav a{padding:.6rem .8rem}
  .top{flex-wrap:wrap}
  .wrap{padding:1rem .8rem 2.5rem}
  .panel{padding:1rem}
  .tbl{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.reveal-creature,.reveal-text{opacity:1;filter:none;transform:none}}
.sky .s1{box-shadow:947px 830px #aab8ff, 1494px 455px #aab8ff, 630px 1310px #aab8ff, 1459px 1472px #aab8ff, 857px 45px #cfd8ff, 1160px 1448px #ffffff, 956px 1550px #aab8ff, 880px 54px #cfd8ff, 1018px 173px #cfd8ff, 1256px 1091px #ffffff, 157px 769px #aab8ff, 659px 132px #ffffff, 1838px 94px #cfd8ff, 1892px 14px #aab8ff, 570px 910px #aab8ff, 1629px 1115px #cfd8ff, 414px 1523px #aab8ff, 1089px 1524px #cfd8ff, 1826px 550px #ffffff, 1577px 1137px #ffffff, 1081px 567px #cfd8ff, 1525px 369px #cfd8ff, 1760px 807px #cfd8ff, 1010px 1348px #aab8ff, 1173px 1091px #ffffff, 543px 1436px #cfd8ff, 1084px 670px #aab8ff, 391px 702px #aab8ff, 541px 697px #cfd8ff, 136px 279px #ffffff, 1747px 1264px #ffffff, 892px 944px #ffffff, 655px 979px #aab8ff, 94px 1128px #ffffff, 534px 1412px #aab8ff, 1800px 1596px #cfd8ff, 1984px 81px #ffffff, 341px 558px #ffffff, 844px 1426px #cfd8ff, 90px 561px #cfd8ff, 1240px 674px #ffffff, 26px 91px #aab8ff, 440px 1051px #cfd8ff, 1364px 170px #ffffff, 786px 772px #aab8ff, 840px 272px #ffffff, 685px 1364px #aab8ff, 1447px 1188px #aab8ff, 107px 1214px #aab8ff, 753px 1449px #ffffff, 711px 1541px #cfd8ff, 1343px 233px #ffffff, 130px 963px #aab8ff, 1096px 349px #ffffff, 1119px 1268px #aab8ff, 392px 811px #cfd8ff, 1967px 152px #cfd8ff, 1878px 536px #aab8ff, 1569px 1339px #aab8ff, 1587px 193px #ffffff, 996px 1335px #cfd8ff, 744px 1164px #cfd8ff, 1706px 804px #aab8ff, 168px 1002px #cfd8ff, 332px 685px #cfd8ff, 181px 716px #aab8ff, 134px 1044px #cfd8ff, 31px 434px #aab8ff, 74px 1085px #ffffff, 350px 895px #ffffff, 1132px 1483px #ffffff, 480px 840px #ffffff, 1268px 1304px #aab8ff, 1504px 1272px #aab8ff, 1189px 486px #cfd8ff, 238px 927px #aab8ff, 1193px 1253px #aab8ff, 1085px 1078px #cfd8ff, 940px 868px #aab8ff, 357px 1170px #aab8ff, 1951px 299px #aab8ff, 246px 1345px #cfd8ff, 986px 6px #ffffff, 767px 717px #cfd8ff, 812px 1083px #ffffff, 1900px 412px #aab8ff, 155px 1195px #ffffff, 848px 1024px #ffffff, 126px 1036px #ffffff, 1396px 791px #cfd8ff, 462px 1186px #cfd8ff, 1931px 124px #ffffff, 113px 1244px #ffffff, 1872px 955px #aab8ff, 1063px 333px #ffffff, 1279px 1472px #cfd8ff, 1890px 273px #aab8ff, 280px 1036px #ffffff, 1033px 813px #aab8ff, 1283px 1433px #aab8ff, 1533px 556px #cfd8ff, 470px 235px #aab8ff, 1567px 1031px #cfd8ff, 684px 857px #ffffff, 496px 700px #cfd8ff, 770px 866px #cfd8ff, 638px 369px #aab8ff, 1905px 839px #cfd8ff, 522px 263px #ffffff, 1632px 1184px #ffffff, 1518px 1459px #cfd8ff, 1072px 1241px #aab8ff, 194px 655px #cfd8ff, 210px 1250px #ffffff, 1107px 875px #cfd8ff, 1558px 714px #ffffff, 1310px 1407px #aab8ff, 1242px 949px #aab8ff, 1687px 724px #aab8ff, 229px 1245px #aab8ff, 1547px 1157px #cfd8ff, 1117px 345px #aab8ff, 1637px 416px #cfd8ff, 157px 227px #ffffff, 1925px 203px #aab8ff, 468px 822px #ffffff, 391px 1250px #aab8ff, 115px 367px #aab8ff, 246px 210px #ffffff, 1536px 1484px #aab8ff, 634px 831px #ffffff, 1834px 1213px #ffffff, 451px 524px #aab8ff, 1625px 998px #aab8ff, 1713px 419px #aab8ff, 1210px 33px #ffffff, 349px 838px #cfd8ff, 489px 435px #ffffff, 991px 1540px #ffffff, 727px 221px #aab8ff, 1264px 909px #cfd8ff, 20px 1242px #aab8ff, 1742px 1231px #cfd8ff, 257px 1251px #cfd8ff, 539px 1528px #cfd8ff, 1779px 1188px #aab8ff, 1323px 1289px #cfd8ff, 1092px 1230px #ffffff, 1206px 594px #aab8ff, 177px 400px #ffffff, 1084px 584px #cfd8ff, 624px 14px #aab8ff, 348px 1407px #aab8ff, 1858px 850px #ffffff, 608px 1150px #aab8ff, 1111px 135px #aab8ff, 1021px 1495px #cfd8ff, 356px 1155px #ffffff, 402px 1397px #cfd8ff, 1231px 1141px #cfd8ff, 1811px 522px #cfd8ff, 1891px 193px #ffffff, 912px 860px #aab8ff, 1170px 150px #cfd8ff, 1178px 343px #aab8ff, 1651px 93px #aab8ff, 1153px 1118px #aab8ff, 1517px 1448px #aab8ff, 928px 111px #cfd8ff, 1769px 1271px #aab8ff, 1264px 967px #cfd8ff, 1211px 102px #cfd8ff, 503px 278px #aab8ff, 1022px 1286px #aab8ff, 1558px 675px #aab8ff, 1323px 1125px #cfd8ff, 70px 1012px #aab8ff, 101px 58px #aab8ff, 1571px 1427px #ffffff, 1440px 1091px #cfd8ff, 1047px 962px #ffffff, 1049px 510px #aab8ff, 144px 499px #cfd8ff, 1540px 653px #ffffff, 807px 652px #aab8ff, 1274px 784px #ffffff, 1665px 220px #aab8ff, 1977px 1426px #aab8ff, 1917px 128px #aab8ff, 1712px 180px #aab8ff, 1021px 55px #cfd8ff, 515px 206px #aab8ff, 1860px 1223px #cfd8ff, 1584px 1047px #aab8ff, 1201px 141px #aab8ff, 773px 1271px #cfd8ff, 846px 1398px #ffffff, 1741px 872px #aab8ff, 457px 1462px #ffffff, 276px 1169px #cfd8ff, 648px 155px #aab8ff, 1778px 1459px #aab8ff, 1605px 872px #ffffff, 1495px 1325px #cfd8ff, 473px 1165px #aab8ff, 1687px 143px #ffffff, 1539px 197px #cfd8ff, 1387px 1513px #ffffff, 650px 602px #cfd8ff, 1986px 1427px #cfd8ff, 70px 753px #aab8ff, 568px 1504px #aab8ff, 530px 1159px #ffffff, 1280px 1163px #aab8ff, 918px 395px #cfd8ff, 892px 291px #aab8ff, 347px 1207px #ffffff, 1573px 14px #aab8ff, 1651px 1518px #ffffff, 1096px 225px #aab8ff, 645px 856px #aab8ff, 851px 1044px #aab8ff, 1004px 553px #ffffff, 1307px 909px #aab8ff, 907px 1357px #cfd8ff, 1544px 832px #aab8ff, 1506px 1309px #ffffff, 1903px 1419px #aab8ff, 159px 462px #ffffff, 1526px 1262px #cfd8ff, 568px 442px #cfd8ff, 362px 858px #aab8ff, 844px 1275px #cfd8ff, 1081px 333px #ffffff, 1604px 1351px #aab8ff, 1942px 655px #cfd8ff, 869px 1285px #aab8ff, 1904px 1388px #aab8ff, 1541px 866px #ffffff, 1201px 1277px #cfd8ff, 1275px 779px #ffffff, 510px 1520px #ffffff, 146px 124px #aab8ff, 1346px 1462px #aab8ff, 282px 1556px #aab8ff, 478px 102px #cfd8ff, 724px 1544px #aab8ff, 549px 1194px #ffffff, 1258px 1490px #cfd8ff, 1919px 920px #ffffff, 1353px 585px #cfd8ff, 1300px 858px #cfd8ff, 585px 663px #cfd8ff, 152px 430px #ffffff, 1461px 827px #ffffff, 737px 17px #aab8ff, 1898px 857px #cfd8ff, 1026px 629px #cfd8ff, 1803px 195px #cfd8ff, 365px 848px #ffffff}
.sky .s2{box-shadow:550px 613px #d6f7ff, 1026px 300px #ffffff, 500px 790px #ffffff, 1202px 126px #cfe1ff, 1350px 329px #ffffff, 1105px 1354px #cfe1ff, 1888px 418px #ffffff, 1555px 865px #d6f7ff, 328px 1149px #cfe1ff, 1224px 607px #ffffff, 1067px 581px #d6f7ff, 1509px 990px #ffffff, 851px 446px #d6f7ff, 789px 1348px #cfe1ff, 1685px 78px #cfe1ff, 1582px 90px #ffffff, 196px 238px #d6f7ff, 1042px 792px #d6f7ff, 1534px 943px #ffffff, 492px 458px #d6f7ff, 1142px 1399px #cfe1ff, 1011px 434px #d6f7ff, 432px 1329px #ffffff, 478px 829px #ffffff, 1710px 969px #ffffff, 140px 236px #d6f7ff, 1461px 1252px #d6f7ff, 1059px 7px #cfe1ff, 1684px 1186px #d6f7ff, 874px 1032px #cfe1ff, 1487px 1176px #d6f7ff, 1448px 1499px #cfe1ff, 1003px 1153px #cfe1ff, 558px 779px #cfe1ff, 1065px 531px #d6f7ff, 1800px 79px #d6f7ff, 489px 549px #ffffff, 563px 1331px #cfe1ff, 134px 742px #d6f7ff, 1476px 771px #ffffff, 876px 263px #d6f7ff, 1309px 295px #ffffff, 686px 937px #ffffff, 1118px 862px #d6f7ff, 785px 1256px #d6f7ff, 93px 1328px #cfe1ff, 1597px 745px #cfe1ff, 214px 324px #cfe1ff, 931px 1511px #cfe1ff, 936px 1355px #d6f7ff, 721px 991px #ffffff, 1041px 37px #cfe1ff, 818px 443px #ffffff, 1301px 558px #ffffff, 194px 67px #ffffff, 535px 1600px #ffffff, 1585px 334px #ffffff, 1589px 544px #d6f7ff, 1018px 94px #ffffff, 1607px 75px #cfe1ff, 1956px 1268px #ffffff, 732px 164px #cfe1ff, 664px 433px #d6f7ff, 1414px 1524px #d6f7ff, 266px 106px #d6f7ff, 1628px 6px #ffffff, 1596px 96px #d6f7ff, 883px 869px #cfe1ff, 1363px 1482px #d6f7ff, 286px 353px #cfe1ff, 291px 1001px #d6f7ff, 1043px 920px #cfe1ff, 570px 635px #cfe1ff, 1009px 1096px #ffffff, 702px 1360px #cfe1ff, 1037px 1348px #ffffff, 1332px 1048px #ffffff, 748px 324px #cfe1ff, 1323px 710px #d6f7ff, 1068px 699px #cfe1ff, 1183px 1538px #cfe1ff, 1585px 1176px #d6f7ff, 1984px 1326px #ffffff, 215px 160px #ffffff, 1657px 876px #cfe1ff, 282px 885px #ffffff, 1262px 59px #ffffff, 942px 63px #d6f7ff, 22px 263px #cfe1ff, 1145px 1199px #ffffff}
.sky .s3{box-shadow:1553px 1082px #bff3ff, 1056px 680px #bff3ff, 987px 1094px #ffffff, 405px 780px #bff3ff, 1848px 1505px #bff3ff, 244px 862px #bff3ff, 1600px 1308px #bff3ff, 1703px 1477px #bff3ff, 382px 769px #ffffff, 274px 1343px #ffffff, 209px 1512px #ffffff, 1013px 1562px #ffffff, 1974px 526px #ffffff, 186px 179px #bff3ff, 183px 734px #ffffff, 968px 1312px #bff3ff, 367px 1382px #bff3ff, 1005px 1356px #ffffff, 1776px 178px #bff3ff, 738px 805px #ffffff, 1562px 1193px #ffffff, 1126px 578px #bff3ff, 1078px 1595px #bff3ff, 1021px 868px #bff3ff, 2px 70px #ffffff, 1220px 116px #ffffff}

/* ---- ธีมป่ากลางคืน (ฟีลโพลีโลว์ + แสงผู้พิทักษ์) ---- */
body{background:transparent}
.sky::before{content:"";position:absolute;inset:0;background:url(forest.svg) center bottom/cover no-repeat}
.sky::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 22% 62%,rgba(90,210,240,.16),transparent 70%),linear-gradient(180deg,rgba(2,7,12,.35),rgba(2,7,12,0) 30%,rgba(2,7,12,.25))}
.sky i{z-index:1}
.sky b{position:absolute;width:4px;height:4px;border-radius:50%;background:#c9f6ff;box-shadow:0 0 8px 2px rgba(120,225,255,.7);z-index:1;animation:ff 9s ease-in-out infinite alternate;opacity:.0}
.sky b:nth-of-type(1){left:12%;top:58%;animation-delay:-1s}.sky b:nth-of-type(2){left:27%;top:66%;animation-delay:-4s}
.sky b:nth-of-type(3){left:41%;top:52%;animation-delay:-6s}.sky b:nth-of-type(4){left:58%;top:70%;animation-delay:-2s}
.sky b:nth-of-type(5){left:71%;top:60%;animation-delay:-7s}.sky b:nth-of-type(6){left:86%;top:68%;animation-delay:-3s}
.sky b:nth-of-type(7){left:35%;top:78%;animation-delay:-5s}.sky b:nth-of-type(8){left:64%;top:82%;animation-delay:-8s}
@keyframes ff{0%{opacity:0;transform:translate(0,0)}30%{opacity:.9}70%{opacity:.5;transform:translate(24px,-30px)}100%{opacity:0;transform:translate(-14px,-58px)}}
.panel,.card,.shelf-item{backdrop-filter:blur(3px);border-color:rgba(110,190,225,.28)}
.title,h1,.brand{font-family:'Cormorant Garamond','Cinzel','Noto Serif Thai',serif}
.btn{color:#03202c;background:linear-gradient(180deg,#fff,#b9e4f6);box-shadow:0 0 18px rgba(120,210,245,.35)}
.btn:hover{box-shadow:0 0 28px rgba(150,225,255,.6)}
.crest{color:#bff3ff;text-shadow:0 0 10px #5fd8ee}
.brand span:last-child{color:#eaf9ff}
@media (prefers-reduced-motion:reduce){.sky b{animation:none;opacity:.6}}
.creature .wisps path{animation:wisp 6s ease-in-out infinite alternate}
.creature .wisps path:nth-child(2n){animation-duration:8s;animation-delay:-2s}
@keyframes wisp{from{transform:translate(-3px,2px)}to{transform:translate(4px,-5px)}}
.creature.lv3{filter:drop-shadow(0 0 14px rgba(120,215,255,.55))}
/* ภาพผู้พิทักษ์ที่อัปโหลดเอง */
.creature.cimg{position:relative;display:block;width:100%;aspect-ratio:4/3}
.creature.cimg img{width:100%;height:100%;object-fit:contain;display:block;animation:float 6s ease-in-out infinite}
.creature.cimg.lv3 img{filter:drop-shadow(0 0 16px rgba(130,220,255,.65))}
.creature.cimg.lv2 img{opacity:.82;filter:blur(1.2px) drop-shadow(0 0 12px rgba(150,225,255,.5))}
.creature.cimg.lv1 img{opacity:.45;filter:blur(3.5px) brightness(1.2)}
.creature.cimg.lv1::after,.creature.cimg.lv2::after{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(190,235,255,.35),rgba(190,235,255,0));filter:blur(8px);animation:pulse 4s infinite}
.creature.cimg.lv2::before{content:"";position:absolute;inset:4% 8%;border-radius:50%;border:1.5px solid rgba(190,235,255,.5);background:radial-gradient(circle at 50% 55%,transparent 55%,rgba(190,235,255,.18))}
.creature.cimg.sil img{filter:brightness(0) drop-shadow(0 0 1px #18314a);opacity:.9;animation:none}
.creature.cimg.sil::before,.creature.cimg.sil::after{display:none}
.imgform{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap;margin:.6rem 0}