/* account.css — หน้าเข้าสู่ระบบ · รางวัลล็อกอินรายวัน · เควส · การ์ดตัวละคร/ดาว · แท็บโปรไฟล์ */
.hud-q{position:relative;font-size:18px;line-height:1.5}.hud-q i{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:#e8383d;color:#fff;font:700 11px/17px Sarabun,sans-serif;text-align:center;font-style:normal;padding:0 4px;box-shadow:0 0 0 2px #0008}
.q-toast{top:22%!important;max-width:88vw;text-align:center;white-space:normal}.q-x{position:absolute;right:10px;top:8px;border:0;background:#0006;color:#fff;border-radius:50%;width:30px;height:30px;font-size:15px;cursor:pointer}
.q-tabs{display:flex;gap:8px;margin:8px 0 4px}.q-tab{flex:1;border:2px solid #cdbcff55;border-radius:99px;padding:7px 0;background:#0004;color:#cfd3ff;font:700 14px Sarabun,sans-serif;cursor:pointer}.q-tab.on{background:linear-gradient(#a487f0,#5b3cb3);color:#fff;border-color:#cdbcff}
.q-left{font-size:12px;color:#9fe8ff;margin:4px 0 6px;text-align:center}.q-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #ffffff1f}
.q-ic{font-size:26px;width:38px;text-align:center;flex:none}.q-mid{flex:1;min-width:0}.q-mid b{display:block;font-size:15px}.q-mid small{display:block;color:#cfd3ff;font-size:12px}
.q-bar{height:7px;border-radius:4px;background:#ffffff2a;margin:5px 0 2px;overflow:hidden}.q-bar i{display:block;height:100%;background:linear-gradient(#ffd978,#f0a020);border-radius:4px}.q-row.done .q-bar i{background:linear-gradient(#4cd36f,#1f9c4a)}
.q-num{color:#ffd978!important}.q-btn{border:0;border-radius:99px;padding:8px 14px;font:700 14px Sarabun,sans-serif;color:#fff;background:#4a5886;white-space:nowrap;opacity:.7}.q-btn.go{opacity:1;background:linear-gradient(#4cd36f,#1f9c4a);box-shadow:0 3px 0 #14703a;cursor:pointer}
.q-btn.got{background:transparent;color:#9fe8ff;opacity:1;padding:8px 4px}.q-row.got{opacity:.6}.q-bonus{border-bottom:0;margin-top:4px;background:#ffd9781a;border-radius:12px;padding:9px 8px}.q-note{display:block;margin-top:10px;color:#9aa3d6;font-size:11px;text-align:center}
.hud-dl{position:relative;font-size:18px;line-height:1.5}.hud-dl i{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:#e8383d;color:#fff;font:700 11px/17px Sarabun,sans-serif;text-align:center;font-style:normal;padding:0 4px;box-shadow:0 0 0 2px #0008}
.mc-pill{cursor:default;color:#bff0ff}.hud{flex-wrap:nowrap}.hud-sk{flex:none}
.wbtn.mc{background:linear-gradient(#6fd6ff,#1c8fd1);border-color:#0f5f8f;box-shadow:0 3px 0 #0f5f8f;text-shadow:0 1px 0 #0f5f8f;margin-top:6px}
/* ---- หน้าเข้าสู่ระบบ ---- */
#app.auth{max-width:none;width:100%;height:100vh;height:100dvh;margin:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.au-wrap{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:18px 14px;position:relative}
.au-card{width:min(94vw,430px);background:linear-gradient(#4a2c16f2,#2a160cf2);border:3px solid #e8c48a;border-radius:22px;padding:18px 18px 16px;box-shadow:0 10px 0 #0005,0 0 40px #0008;color:var(--cream,#fff4dc)}
.au-logo{text-align:center;line-height:1.1;margin-bottom:12px}.au-logo .au-ic{display:block;font-size:44px;filter:drop-shadow(0 3px 0 #0006)}
.au-logo b{display:block;font:700 34px/1.1 Mali,Sarabun,sans-serif;color:var(--cream,#fff4dc);text-shadow:0 3px 0 #6b3a18,0 0 10px #3b1d0a}.au-logo small{font:700 15px Mali,Sarabun,sans-serif;color:#ffd9a0;letter-spacing:.3em}
.au-tabs{display:flex;gap:6px;margin:6px 0 12px;background:#0004;border-radius:99px;padding:4px}
.au-tabs button{flex:1;border:0;border-radius:99px;padding:9px 0;background:transparent;color:#e8d3b3;font:700 15px Sarabun,sans-serif;cursor:pointer}
.au-tabs button.on{background:linear-gradient(#f0b66a,#c98036);color:#3b1d0a;box-shadow:0 2px 0 #7a4a1a}
.au-form{display:flex;flex-direction:column;gap:10px}.au-form label{display:flex;flex-direction:column;gap:4px}
.au-form label>span{font:700 13px Sarabun,sans-serif;color:#ffd9a0}
.au-form input:not([type=checkbox]){width:100%;padding:11px 12px;border-radius:12px;border:2px solid #c9964f;background:var(--cream,#fff4dc);color:#4a2a10;font:700 16px Sarabun,sans-serif;outline:none}
.au-form input:focus{border-color:#ffd75e;box-shadow:0 0 0 3px #ffd75e66}.au-form input:disabled{opacity:.6}
.au-form .au-show{flex-direction:row;align-items:center;gap:8px;font:600 13px Sarabun,sans-serif;color:#e8d3b3;cursor:pointer}
.au-go{margin-top:4px;padding:13px;border-radius:14px;border:2px solid #8a1f45;background:linear-gradient(#f48fb1,#d6336c);color:#fff;font:700 17px Sarabun,sans-serif;text-shadow:0 1px 0 #8a1f45;box-shadow:0 4px 0 #8a1f45;cursor:pointer}
.au-go:active{transform:translateY(2px);box-shadow:0 2px 0 #8a1f45}.au-go:disabled{opacity:.65;cursor:default}
.au-err{margin:2px 0 0;padding:9px 11px;border-radius:10px;background:#7a1f2b;border:1px solid #ff8a98;color:#fff;font:600 13.5px/1.35 Sarabun,sans-serif}
.au-hint{display:block;text-align:center;color:#d9c3a0;font-size:12px;line-height:1.35}.au-load{text-align:center;color:#ffd9a0;font:700 16px Sarabun,sans-serif;padding:18px 0}
.au-ver{position:absolute;right:12px;bottom:8px;color:#fff8;font:12px Sarabun,sans-serif}
@media (max-height:520px){.au-logo .au-ic{display:none}.au-logo b{font-size:24px}.au-card{padding:10px 14px}.au-form{gap:6px}.au-form input:not([type=checkbox]){padding:7px 10px}}
/* ---- รางวัลล็อกอินรายวัน ---- */
.dl-box{width:min(94vw,620px)}.dl-streak{text-align:center;font:700 16px Sarabun,sans-serif;margin:4px 0 8px}.dl-streak b{font-size:26px;color:#ffb347}.dl-streak small{display:block;color:#cfd3ff;font-size:12px;font-weight:600}
.dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.dl-cell{position:relative;border:2px solid #ffffff2a;border-radius:12px;background:#ffffff10;padding:7px 4px;text-align:center;min-height:68px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.dl-cell small{color:#cfd3ff;font-size:11px}.dl-r{display:flex;flex-direction:column;gap:1px}.dl-r i{font-style:normal;font:700 14px Sarabun,sans-serif;color:#ffe08a}.dl-r i.mc{color:#8fe3ff}
.dl-cell.big{grid-column:span 2;background:linear-gradient(#ffd97822,#f0a02022);border-color:#ffd97866}
.dl-cell.today{border-color:#ffd75e;background:#ffd75e22;box-shadow:0 0 0 3px #ffd75e66;animation:dlp 1.4s ease-in-out infinite}
.dl-cell.past{opacity:.55}.dl-ok{position:absolute;top:3px;right:6px;color:#4cd36f;font-weight:800}
@keyframes dlp{50%{box-shadow:0 0 0 6px #ffd75e33}}
.dl-claim{display:block;width:100%;margin:12px 0 4px;padding:12px;border:0;border-radius:99px;background:linear-gradient(#4cd36f,#1f9c4a);box-shadow:0 4px 0 #14703a;color:#fff;font:700 16px Sarabun,sans-serif;cursor:pointer}
.dl-claim:disabled{background:#4a5886;box-shadow:none;opacity:.8;cursor:default}.dl-flash{margin:8px 0 0;text-align:center;color:#ffe08a;font-weight:700}
.dl-mss{display:flex;gap:6px;flex-wrap:wrap}.dl-ms{padding:4px 10px;border-radius:99px;border:1px solid #ffffff3a;font-size:12px;color:#cfd3ff}.dl-ms.got{background:#1f9c4a;border-color:#4cd36f;color:#fff}.dl-note{display:block;margin-top:8px;color:#9aa3d6;font-size:11.5px;line-height:1.4}
/* ---- การ์ดตัวละคร / ดาว ---- */
.ck{padding:4px 0}.ck-h{display:flex;align-items:center;gap:10px}.ck-h img{height:76px;width:auto;max-width:90px;object-fit:contain;filter:drop-shadow(0 3px 3px #0008)}
.ck-h b{font-size:16px}.ck-h small{display:block;color:#cfd3ff;font-size:11.5px}.ck-stars{display:flex;gap:2px;font-size:20px;line-height:1.1}.ck-stars i{font-style:normal;color:#ffffff30}.ck-stars i.on{color:#ffd23f;text-shadow:0 0 6px #ffb30088}
.ck-st{display:grid;grid-template-columns:minmax(76px,28%) 1fr auto;align-items:center;gap:8px;padding:3px 0;font-size:13px}.ck-st b{min-width:44px;text-align:right}.ck-st em{font-style:normal;color:#4cd36f;font-size:11px;margin-left:3px}
.ck-bar{position:relative;height:8px;border-radius:4px;background:#ffffff2a;overflow:hidden}.ck-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#ffd978,#f0a020)}.ck-bar u{position:absolute;top:0;bottom:0;background:#4cd36f99}
.ck h4{margin:10px 0 3px;color:#9fe8ff;font-size:13px}.ck-sk{display:flex;gap:8px;padding:5px 0;font-size:13px}.ck-sk>span{font-size:22px}.ck-sk small{display:block;color:#cfd3ff;font-size:11.5px;line-height:1.3}.ck-sk em{font-style:normal;color:#ffd978;font-size:11px}
.ck-none{color:#cfd3ff;display:block;margin-top:6px}.ck-up{margin-top:8px}.ck-up .sk-up{width:100%;font-size:14px}
/* ---- โปรไฟล์: แท็บ/ตาราง ---- */
.pf-tabs{display:flex;gap:5px;flex:none;margin:0 0 6px}.pf-tabs button{flex:1;border:2px solid #7a5530;border-radius:99px;padding:5px 2px;background:#00000040;color:#e8d3b3;font:700 max(11px,calc(var(--u)*2.4)) Sarabun,sans-serif;cursor:pointer;white-space:nowrap}
.pf-tabs button.on{border-color:#ffd75e;background:#5a371888;color:#ffd75e}
.pf-ch{position:relative;border:2px solid #ffffff22;border-radius:14px;background:#0003;padding:6px 8px;margin-bottom:8px}.pf-ch.on{border-color:#ffd75e}.pf-cur{position:absolute;top:6px;right:8px;font-size:11px;color:#ffd75e;font-weight:700}
.pf-use{position:absolute;top:5px;right:6px;border:0;border-radius:99px;padding:3px 10px;background:linear-gradient(#a487f0,#5b3cb3);color:#fff;font:700 11px Sarabun,sans-serif;cursor:pointer}
.pf-tb{width:100%;border-collapse:collapse;font-size:max(11px,calc(var(--u)*2.3))}.pf-tb th{color:#ffd9a0;font-weight:700;padding:3px 2px;border-bottom:1px solid #ffffff33;text-align:right}.pf-tb th:first-child,.pf-tb td:first-child{text-align:left}
.pf-tb td{padding:5px 2px;text-align:right;border-bottom:1px solid #ffffff14}.pf-tb .w{color:#6ee08a}.pf-tb .l{color:#ff8a98}.pf-tb tr.tot td{font-weight:800;border-top:2px solid #ffffff44}
.pf-it{padding:6px 0;border-bottom:1px solid #ffffff1f;font-size:max(12px,calc(var(--u)*2.6))}.pf-it small{display:block;color:#e8d3b3;font-size:max(10px,calc(var(--u)*2.1))}
.pf-info{display:flex;flex-direction:column;gap:2px;font-size:max(11px,calc(var(--u)*2.4));color:#e8d3b3;margin-top:2px;min-width:0}.pf-info b{color:#fff4dc}.pf-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pf-un{color:#ffd9a0aa}
.pf-acts{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}.pf-mini{border:2px solid #7a5530;border-radius:99px;padding:3px 9px;background:#00000040;color:#fff4dc;font:700 max(10px,calc(var(--u)*2.2)) Sarabun,sans-serif;cursor:pointer}.pf-mini.out{border-color:#c0504d;color:#ffb3b3}
/* HUD: ปุ่มไอคอน/เหรียญชิดขวา ไม่ทับชื่อหน้า */
.hud{justify-content:flex-start}.hud-who+.hud-sk,.hud-back+.hud-sk{margin-left:auto}
.pf-me{overflow-y:auto!important;align-items:start}
.q-toast{pointer-events:none}
/* ===== กาชา ===== */
.pg-body:has(.gc-wrap){padding-bottom:calc(var(--u)*.6)}.gc-wrap{display:flex;flex-direction:column;gap:6px;width:100%;height:100%;min-height:0}
.gc-tabs{display:flex;gap:8px;align-items:center;flex:none}.gc-tabs .catbtn{margin:0}.gc-note{font-size:12px;color:#ffe9a8;background:#0006;padding:3px 10px;border-radius:99px}
.gc-main{flex:1;min-height:0;display:flex}.gc-main.inv{overflow:auto;display:block}
.gc-stage{flex:1;display:flex;gap:10px;min-height:0;min-width:0}
.gc-show{flex:1 1 62%;min-width:0;display:flex;flex-direction:column;gap:6px;min-height:0}
.gc-ban{display:flex;flex-direction:column;background:linear-gradient(90deg,#000a,#0000);padding:4px 12px;border-left:4px solid #ffd978;color:#fff}.gc-ban b{font-size:clamp(15px,3.2vw,24px);font-weight:800;text-shadow:0 2px 4px #000}.gc-ban small{color:#ffe9a8;font-size:11px}
.gc-feats{flex:1;min-height:0;display:flex;gap:8px;align-items:stretch}
.gc-f{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#4a3a6aee,#1c1633ee);border:2px solid #fff3;transform:skewX(-3deg)}
.gc-f.legendary{border-color:#ffc83d;box-shadow:0 0 16px #ffc83d88;background:linear-gradient(160deg,#7a5a1aee,#2a1d08ee)}.gc-f.epic{border-color:#a45be8;background:linear-gradient(160deg,#5a2a8aee,#1c1033ee)}.gc-f.rare{border-color:#4f9be8}
.gc-fi{position:absolute;inset:0 0 34px 0;display:flex;align-items:flex-end;justify-content:center;transform:skewX(3deg)}.gc-fi img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 8px #000a)}.gc-fi .pv-ch,.gc-fi .pv-back,.gc-fi .pv-table,.gc-fi .pv-bg{width:70%;height:70%;margin-bottom:8%}
.gc-fn{position:relative;z-index:1;padding:3px 6px;background:#000b;color:#fff;transform:skewX(3deg);text-align:left}.gc-fn b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gc-st{color:#ffd978;font-size:12px;letter-spacing:1px}.gc-fn small{display:block;font-size:10px;opacity:.85}
.gc-sub{display:flex;gap:6px;flex:none;flex-wrap:wrap}.gc-mini{border:2px solid #cdbcff66;border-radius:99px;background:#000a;color:#fff;font:700 12px Sarabun,sans-serif;padding:4px 12px;cursor:pointer}.gc-mini.on{background:#ffd978;color:#3a2a00;border-color:#ffd978}
.gc-side{flex:1 1 38%;min-width:0;max-width:340px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;background:linear-gradient(#0008,#000b);border-radius:12px;padding:8px;color:#fff;border:2px solid #fff2}
.gc-rates{display:flex;flex-wrap:wrap;gap:4px}.gc-r{font:700 11px Sarabun,sans-serif;padding:2px 8px;border-radius:99px;background:#0007}.gc-r.legendary{color:#ffd978}.gc-r.epic{color:#d9a8ff}.gc-r.rare{color:#8fc8ff}
.gc-pity{font-size:12px}.gc-bar{height:7px;border-radius:4px;background:#ffffff2a;margin:3px 0;overflow:hidden}.gc-bar i{display:block;height:100%;background:linear-gradient(#ffd978,#f0a020)}.gc-tip{font-size:10.5px;color:#cfd3ff;line-height:1.35}
.gc-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gc-go{border:0;border-radius:10px;padding:6px 4px;color:#fff;font-family:Sarabun,sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.2;box-shadow:0 3px 0 #0006}
.gc-go b{font-size:14px}.gc-go span{font-size:13px;font-weight:700}.gc-go.coins{background:linear-gradient(#ffb23d,#d9780a)}.gc-go.mcash{background:linear-gradient(#6fd6ff,#1c8fd1)}.gc-go:disabled{filter:grayscale(.8);opacity:.55}
.gc-i{position:relative;border:2px solid transparent;border-radius:12px}.gc-i.rare{border-color:#4f9be8}.gc-i.epic{border-color:#a45be8}.gc-i.legendary{border-color:#ffc83d;box-shadow:0 0 12px #ffc83d66}.gc-i small{display:block;font-size:11px;opacity:.85}.gc-ph{height:60px}
.gc-modal{position:fixed;inset:0;z-index:99995;background:#000c;display:flex;align-items:center;justify-content:center;font-family:Sarabun,sans-serif;padding:12px}
.gc-box{background:#241a4a;color:#fff;border-radius:18px;padding:14px;max-width:min(94vw,640px);max-height:92vh;overflow:auto;text-align:center;border:2px solid #cdbcff66}.gc-box h3{margin:0 0 8px}
.gc-top4{box-shadow:0 0 40px #ffc83daa;border-color:#ffc83d}.gc-top3{box-shadow:0 0 30px #a45be8aa}
.gc-res{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.gc-res.n1{grid-template-columns:1fr;max-width:180px;margin:auto}
.gc-card{position:relative;border-radius:10px;padding:6px 4px;background:#0006;border:2px solid #fff3;font-size:11px;opacity:0;transform:scale(.6) rotate(-6deg);animation:gcPop .45s ease-out forwards}
.gc-card b{display:block;font-size:12px;margin-top:3px}.gc-card.rare{border-color:#4f9be8}.gc-card.epic{border-color:#a45be8}.gc-card.legendary{border-color:#ffc83d;box-shadow:0 0 14px #ffc83d}
.gc-new,.gc-dup{position:absolute;top:-6px;right:-4px;font-style:normal;font:800 10px Sarabun,sans-serif;padding:2px 6px;border-radius:8px}.gc-new{background:#e8383d}.gc-dup{background:#3a6a52}
.gc-sum{font-size:13px;color:#cfd3ff}@keyframes gcPop{to{opacity:1;transform:none}}
@media (max-width:520px){.gc-res{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px) and (orientation:portrait){.gc-stage{flex-direction:column}.gc-side{max-width:none}.gc-feats{min-height:150px}}