/* 3Kingdoms Online SV.Yaksa ร่างอวตาร (avatar.html) - the look of the approved sim / in-game window, standalone like gacha.html */
:root{--gold:#e8c46a;--gold2:#a8842f;--ink:#f3e6c4;--soft:#cdb79e;--mute:#9c8771;--bg:#0c0504;--line:#6b4a24;--pane:#1b0e0a;
  --r0:#d9d4cc;--r1:#6fdc8c;--r2:#5fb0ff;--r3:#c77dff;--r4:#ffa23a}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:Tahoma,"Leelawadee UI",sans-serif;font-size:14px}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:12px 16px 24px;
  background:radial-gradient(1100px 520px at 50% -160px,#3a1a10 0%,transparent 60%),var(--bg)}
body.busy{cursor:progress}
a{color:var(--gold)}
[hidden]{display:none!important}
.muted{color:var(--mute);font-size:13px}.ok{color:#8fe08f;font-weight:bold}.bad{color:#ff8a7a}
.r0t{color:var(--r0)}.r1t{color:var(--r1)}.r2t{color:var(--r2)}.r3t{color:var(--r3)}.r4t{color:var(--r4)}
.hint{font-size:12px;color:var(--mute);margin:6px 0 0}
.link{background:none;border:0;color:var(--gold);cursor:pointer;text-decoration:underline;font:inherit;padding:2px 0}

/* top bar */
.av-top{width:100%;max-width:1000px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:8px;
  background:#1d0e0a;border:1px solid var(--line);border-radius:6px;padding:8px 12px;font-size:13px;color:#d8c49a}
.av-logo img{height:38px;display:block}
.av-who{flex:1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.av-who select{font:inherit;background:#2a140c;color:var(--ink);border:1px solid var(--gold2);border-radius:4px;padding:3px 6px;max-width:240px}
.av-bal{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:#21150f;border:1px solid #5a3e2c;font-size:12.5px}
.pill small{color:var(--mute);font-size:11px}.pill b{color:#fff}.pill.gold b{color:#ffd98e}.pill img{width:16px;height:16px}
.av-msg{width:100%;max-width:1000px;background:#3a0d08;color:#ffd979;border:1px solid #c9a24a;border-radius:6px;padding:8px 12px;margin-bottom:8px}

/* window */
.av-win{position:relative;width:100%;max-width:1000px;background:linear-gradient(#3a1d14,#24110c);border:2px solid var(--gold2);border-radius:6px;
  box-shadow:0 0 0 1px #000,0 8px 30px #000a;overflow:hidden}
.av-title{position:relative;height:38px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#4a2416,#2a130c);
  border-bottom:1px solid var(--gold2);color:var(--gold);font-weight:bold;font-size:18px;letter-spacing:1px}
.av-x{position:absolute;right:8px;top:7px;width:24px;height:24px;border:1px solid var(--gold2);border-radius:3px;background:#3a1a10;color:var(--gold);cursor:pointer;font-size:12px;line-height:1}
.av-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 10px 0}
.av-tabs button{font:inherit;font-weight:bold;padding:6px 4px;border:1px solid #6b4a24;border-bottom:0;border-radius:6px 6px 0 0;cursor:pointer;
  background:linear-gradient(#3b2016,#22100a);color:#bfa078}
.av-tabs button.on{background:linear-gradient(#8a5a22,#4a2410);color:#ffe7a6;border-color:var(--gold)}
.av-pg{display:grid;gap:8px;align-content:start;padding:8px 10px;min-height:420px;border-top:1px solid var(--gold2)}
.av-pg>*{min-width:0}
.av-foot{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 10px;color:var(--mute);font-size:12px}

/* game-style buttons */
.gbtn{font:inherit;font-weight:bold;color:#2a1405;cursor:pointer;border:1px solid #f6d48a;border-radius:4px;padding:5px 14px;min-width:76px;
  background:linear-gradient(#ffe39a,#d99b3c 55%,#b8742a);box-shadow:inset 0 1px 0 #fff6,0 1px 2px #000;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2}
.gbtn small{font-size:11px;font-weight:normal}
.gbtn:hover{filter:brightness(1.1)}.gbtn:active{transform:translateY(1px)}
.gbtn:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed}
.gbtn.red{background:linear-gradient(#ff9a7a,#c8402a 55%,#8a2010);color:#fff3e0;border-color:#ffb08a}
.gbtn.gray{background:linear-gradient(#bbb,#777);color:#111;border-color:#ddd}
.gbtn.big{font-size:16px;padding:7px 22px}

/* card slot (84x97 frame art, portrait 50x60) */
.slot{position:relative;width:76px;height:88px;display:inline-block}
.slot .sf{position:absolute;inset:0;width:100%;height:100%}
.slot .sc{position:absolute;left:13px;top:10px;width:50px;height:60px;object-fit:contain}
.slot.lock .sc{filter:grayscale(1) brightness(.45)}
.slot.sel::after{content:'';position:absolute;inset:-3px;border:2px solid #ffe27a;border-radius:6px;box-shadow:0 0 8px #ffd34a}
.slot.click{cursor:pointer}.slot.click:hover{filter:brightness(1.15)}
.slot .snm{position:absolute;left:-4px;right:-4px;bottom:-15px;font-size:11px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--soft)}
.slot .sn{position:absolute;right:6px;bottom:14px;font-size:11px;font-weight:bold;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.slot .sl{position:absolute;left:6px;top:4px;font-size:10px;background:#7a1a10;color:#ffe7a6;border-radius:3px;padding:0 3px}
.slot .sa{position:absolute;right:2px;top:4px;font-size:10px;background:#1a6a20;color:#fff;border-radius:3px;padding:0 3px}
.slot .sb{position:absolute;left:0;right:0;top:-6px;margin:auto;width:max-content;max-width:110%;font-size:10px;background:#b8281a;color:#fff;border-radius:6px;padding:0 4px;white-space:nowrap}
.slot.empty{border:1px dashed #5a3e2c;border-radius:6px;opacity:.6}
.slot.pop{animation:pop .45s both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* panes */
.bk-L,.bk-M,.bk-R,.gr-L,.gr-M,.gr-R,.sw-L,.sw-M,.sw-R,.fg-pane{background:var(--pane);border:1px solid #5a3e2c;border-radius:4px;padding:8px}
.bk-rt{font-weight:bold;color:var(--gold);border-bottom:1px solid #5a3e2c;padding-bottom:4px;margin-bottom:6px}
.bk-banner{background:linear-gradient(90deg,transparent,#8f1010 15%,#8f1010 85%,transparent);color:#ffe7a6;font-weight:bold;text-align:center;padding:3px 6px;margin-bottom:6px}
.ih{color:var(--gold);font-weight:bold;margin:8px 0 3px;font-size:13px}
.ir{margin:3px 0;font-size:13px}.ir img{width:18px;height:18px;vertical-align:middle}
.sr{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:1px 0;border-bottom:1px dotted #3b2722}
.sr span{color:var(--soft)}.sr i{font-style:normal;font-size:11px;min-width:42px;text-align:right}.sr i.up{color:#8fe08f}.sr i.dn{color:#ff8a7a}
.sr.click{cursor:pointer}.sr.click:hover span{color:#fff}

/* tab 1 */
#pg-book{grid-template-columns:372px 252px 1fr}
.bk-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.bk-cnt{background:#0e0705;border:1px solid #5a3e2c;padding:2px 10px;border-radius:3px}
.bk-head select,.gr-head select{font:inherit;background:#2a140c;color:var(--ink);border:1px solid var(--gold2);border-radius:3px;padding:2px 4px}
.bk-grid{display:grid;grid-template-columns:repeat(4,76px);gap:22px 12px;justify-content:center;min-height:330px;padding-top:4px}
.bk-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px}
.bk-pager button{background:#3a1a10;color:var(--gold);border:1px solid var(--gold2);border-radius:3px;cursor:pointer;width:26px;height:22px;font-size:11px}
.bk-pager span{background:#0e0705;border:1px solid #5a3e2c;padding:1px 10px;min-width:64px;text-align:center}
.bk-M{display:flex;flex-direction:column}
.bk-body{flex:1;min-height:300px;display:flex;align-items:flex-end;justify-content:center;background:#120806 url(../img/avatar/ui/morph_bg.jpg) center/cover;border:1px solid #3b2722;padding-bottom:16px}
.bk-body img{max-width:220px;max-height:260px;image-rendering:auto}
.bk-body img.face{width:100px;height:120px;object-fit:contain;margin-bottom:60px}
.bk-bar{display:flex;align-items:center;justify-content:space-between;padding-top:8px}
.bk-orb{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b8ffd8,#1a8a5a 60%,#0a3a20);border:2px solid #e8c46a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;line-height:1.05}
.bk-orb b{font-size:13px;color:#fff;text-shadow:0 0 3px #000}
.bk-R{display:flex;flex-direction:column}
.bk-info{flex:1;overflow:auto;max-height:340px;padding-right:4px}
.bk-clock{margin-top:8px;display:flex;justify-content:space-between;align-items:center}
.bk-clock span{background:#0e0705;border:1px solid var(--gold2);padding:2px 10px;font-family:Consolas,monospace;font-size:15px;color:#ffe7a6}
.bk-checks{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:13px}

/* tab 2 */
#pg-group{grid-template-columns:300px 1fr 280px}
.gr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.gr-list{max-height:380px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.gr-row{display:flex;justify-content:space-between;gap:6px;text-align:left;font:inherit;font-size:13px;background:#24130d;border:1px solid transparent;color:var(--ink);padding:4px 6px;border-radius:3px;cursor:pointer}
.gr-row.on{border-color:var(--gold);background:#4a2410}
.gr-cards{display:flex;flex-wrap:wrap;gap:24px 12px;justify-content:center;padding:10px 0 18px}
.gr-bonus{margin-bottom:10px}

/* tab 3 */
#pg-forge{grid-template-columns:1fr}
.fg-sub{display:flex;gap:6px}
.fg-sub button{font:inherit;font-weight:bold;padding:5px 18px;border:1px solid #6b4a24;border-radius:4px;background:#2a140c;color:#bfa078;cursor:pointer}
.fg-sub button.on{background:#8a5a22;color:#ffe7a6;border-color:var(--gold)}
.fg-wallet{display:flex;flex-wrap:wrap;gap:5px}
.fg-h{font-weight:bold;color:var(--gold);margin-bottom:8px}
.fg-row{margin:6px 0}
.fg-row input[type=number],.dlg input[type=number]{width:80px;font:inherit;background:#2a140c;color:var(--ink);border:1px solid var(--gold2);border-radius:3px;padding:2px 4px}
.fg-ranks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.rk{display:flex;flex-direction:column;align-items:center;font:inherit;font-weight:bold;background:#24130d;border:1px solid #5a3e2c;border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--ink)}
.rk img{width:22px;height:22px}.rk small{font-weight:normal;font-size:11px;color:var(--mute)}
.rk.on{border-color:var(--gold);background:#4a2410}
.fg-out{display:flex;flex-wrap:wrap;gap:24px 10px;margin-top:14px}
.fg-aw{display:grid;grid-template-columns:1fr 320px;gap:10px}
.fg-awl{display:flex;flex-wrap:wrap;gap:24px 10px;align-content:flex-start;max-height:380px;overflow:auto;padding:6px}

/* tab 4 */
#pg-swap{grid-template-columns:1fr 220px 280px}
.sw-box{display:grid;grid-template-columns:repeat(5,76px);gap:24px 10px;justify-content:center;padding:10px 0 18px}
.sw-M{display:flex;flex-direction:column;align-items:center;gap:6px}
.sw-btns{display:flex;gap:8px;margin-top:10px}
.sw-loop{display:block;margin-top:8px;font-size:13px}

/* overlays */
.ov{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.ga-win{position:relative;width:100%;max-width:760px;max-height:94vh;overflow:auto;background:linear-gradient(#3a1d14,#24110c);border:2px solid var(--gold2);border-radius:6px}
.ga-off{background:#3a0d08;color:#ffd979;text-align:center;padding:8px;font-weight:bold}
.ga-boxes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.ga-box{text-align:center;border:1px solid #5a3e2c;border-radius:4px;padding:8px;min-height:240px;background:#140906 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.ga-box.L{background-image:linear-gradient(#0000 40%,#000c),url(../img/avatar/ui/banner_soul.jpg)}
.ga-box.R{background-image:linear-gradient(#0000 40%,#000c),url(../img/avatar/ui/banner_xian.jpg)}
.ga-box h3{margin:0;color:#ffe7a6;text-shadow:0 0 4px #000}
.ga-pity{font-size:12px}
.pbar{height:10px;background:#0e0705;border:1px solid var(--gold2);border-radius:5px;overflow:hidden;margin-top:2px}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a3ae0,#e0a0ff)}
.ga-bt{display:flex;gap:6px;justify-content:center}
.ga-side{padding:0 10px 10px}
.ga-rates{display:flex;flex-wrap:wrap;gap:6px 14px}
.rate{display:flex;align-items:center;gap:4px;font-size:13px}.rate img{width:20px;height:20px}
.ga-buy{display:flex;gap:8px;margin:8px 0}
.hh{color:var(--gold);font-weight:bold;margin:6px 0 3px}
.ga-hist{display:flex;flex-wrap:wrap;gap:3px}.ga-hist img{width:25px;height:30px;border:1px solid #5a3e2c;border-radius:2px}
.ga-hist img.r3{border-color:var(--r3)}.ga-hist img.r4{border-color:var(--r4)}.ga-hist img.r2{border-color:var(--r2)}.ga-hist img.r1{border-color:var(--r1)}
.ga-res{position:absolute;inset:38px 0 0;background:#0c0504ee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px}
.ga-grid{display:grid;grid-template-columns:repeat(5,76px);gap:26px 12px}
.dlg{width:100%;max-width:420px;background:linear-gradient(#3a1d14,#24110c);border:2px solid var(--gold2);border-radius:6px;padding:12px 14px}
.dlg-t{font-weight:bold;color:var(--gold);font-size:16px;margin-bottom:8px}
.dlg-b{line-height:1.6;max-height:70vh;overflow:auto}
.dlg-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.ratel h4{margin:10px 0 4px}
.minigrid{display:flex;flex-wrap:wrap;gap:22px 8px;padding-bottom:16px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#2a140c;border:1px solid var(--gold);color:#ffe7a6;padding:8px 16px;border-radius:6px;z-index:60;max-width:90vw;text-align:center}

/* narrow screens */
@media (max-width:980px){
  #pg-book,#pg-group,#pg-swap{grid-template-columns:minmax(0,1fr)}
  .bk-grid{grid-template-columns:repeat(4,76px);gap:22px 8px}
  .bk-info{max-height:none}
  .fg-aw{grid-template-columns:1fr}
}
@media (max-width:560px){
  .av-tabs{grid-template-columns:repeat(2,1fr)}
  .bk-grid,.sw-box,.ga-grid{grid-template-columns:repeat(3,76px)}
  .ga-boxes{grid-template-columns:1fr}
  .bk-L{padding:8px 2px}
}