*{box-sizing:border-box}
body{margin:0;padding-top:30px;background:#12141c;color:#e8e8f0;font-family:system-ui,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 10px}
h1{font-size:1.3rem;text-align:center}h3{margin:12px 0 6px;font-size:1rem}
.card{background:#1d2030;border-radius:10px;padding:12px;margin-bottom:10px}
.authbox{max-width:420px;margin:40px auto}
input,select{width:100%;padding:10px;margin-bottom:8px;border-radius:6px;border:1px solid #3a3f58;background:#12141c;color:#fff}
.gender{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-size:.9rem}.gender input{width:auto;margin:0 4px 0 0}
button{background:#4f7cff;color:#fff;border:0;border-radius:6px;padding:9px 12px;cursor:pointer;font-size:.9rem}
button.alt{background:#3a3f58}button.small{padding:6px 10px}button.red{background:#d9534f}button:disabled{opacity:.4}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}
.muted{color:#9aa0b8;font-size:.8rem}.warn{color:#f5a524}.sp{color:#f5a524;font-weight:bold}
.uncommon{color:#46a758}.rare{color:#3aa0ff}.epic{color:#b57bff}.legend{color:#ff7a45}
.bar{height:8px;background:#12141c;border-radius:5px;overflow:hidden;margin:3px 0 6px}
.bar>i{display:block;height:100%;transition:width .4s}
.hp>i{background:#e5484d}.xp>i{background:#46a758}.en>i{background:#f5a524}.mp>i{background:#4f9dff}
.item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #2a2e45}.item:last-child{border:0}
.col{display:flex;flex-direction:column;gap:4px}
.zones{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.zones button{flex:1 1 40%;background:#2a2e45}.zones button.on{background:#46a758}
.cats{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.cats button{background:#2a2e45;padding:6px 8px;font-size:.8rem}.cats button.on{background:#4f7cff}
.form-row{display:flex;gap:6px}.form-row input{margin:0}
.mon{text-align:center;font-size:2.5rem}

/* ===== หน้าหลักตามแบบ ===== */
#topbar{position:sticky;top:30px;z-index:20;background:#171a28ee;backdrop-filter:blur(6px);padding:8px 4px;border-bottom:2px solid #2a2e45}
.pills{align-items:center;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pill{background:#262a40;border-radius:20px;padding:4px 10px;font-size:.9rem;display:flex;align-items:center;gap:6px}
.pill .plus{padding:0 7px;border-radius:50%;background:#46a758;font-weight:bold}
.tbars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tb{font-size:.7rem;color:#9aa0b8}.tb .bar{margin:2px 0 0}
#screen{margin:10px 0 96px}
.panel{background:linear-gradient(#242a4acc,#1a1e34cc);border:2px solid #f5c54255;border-radius:12px;padding:10px}
.pname{font-size:1.1rem;font-style:italic}.plv{font-size:.8rem;color:#9aa0b8}
.hexcol{display:flex;flex-direction:column;align-items:flex-start;padding:6px 0}
.hexwrap{position:relative;width:70px;margin-bottom:-6px;cursor:pointer}.hexwrap.r{margin-left:46px}
.hex{--c:#6b7391;width:70px;height:78px;background:var(--c);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;align-items:center;justify-content:center}
.hexin{width:62px;height:70px;background:#262a40;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;align-items:center;justify-content:center;font-size:1.7rem}
.hex.uncommon{--c:#46a758}.hex.rare{--c:#3aa0ff}.hex.epic{--c:#b57bff}.hex.legend{--c:#ff7a45}
.hex.empty,.hex.plus{--c:#3a3f58}.hex.empty .hexin{opacity:.35}.hex.broken{filter:grayscale(1)}
.stars{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.55rem;color:#f5c542;text-shadow:0 0 2px #000}
.sh{margin:8px 0 4px;padding:3px 8px;background:#3a4a8a;border-radius:4px;font-size:.8rem}
.srow{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;font-size:.85rem;border-bottom:1px solid #ffffff12}
.srow b{color:#7fb6ff}.srow .bn{background:#f5c542;color:#333;font-style:normal;border-radius:3px;padding:0 5px;margin-right:6px;font-size:.75rem;font-weight:bold}
#stage .stage{position:relative;height:400px;border-radius:12px;overflow:hidden;background:linear-gradient(#5b6ba8,#2a2e50)}
.bg1{background:linear-gradient(#7ec8ff,#b8e6a0 68%,#5c9b4a)!important}.bg2{background:linear-gradient(#243b2c,#14261c)!important}
.bg3{background:linear-gradient(#2a2438,#15111f)!important}.bg4{background:linear-gradient(#4a1c14,#a8451d 82%,#2a0f0a)!important}
.sprites{position:absolute;inset:44px 0 56px;display:flex;align-items:flex-end;justify-content:center;gap:28px;padding-bottom:10px}
.pchar{display:flex;flex-direction:column;align-items:center}.pnamebox{margin-top:4px;background:#000a;border-radius:10px;padding:2px 12px;font-size:.85rem;white-space:nowrap}
.avatar{height:270px;filter:drop-shadow(0 6px 8px #0006);animation:bob 3s ease-in-out infinite}
.smon{text-align:center;width:130px;animation:bob 2.4s ease-in-out infinite}.smon .mi{font-size:4.5rem}
@keyframes bob{50%{transform:translateY(-7px)}}
@keyframes hit{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}60%{transform:translateX(10px)}}
@keyframes hurt{0%,100%{filter:none}30%{filter:brightness(2) sepia(1) hue-rotate(-40deg) saturate(6)}}
.smon.hit{animation:hit .35s}.avatar.hurt{animation:hurt .4s}
.fbar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;padding:8px;background:#000a}.fbar button{flex:1}
#dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:4px;overflow-x:auto;padding:8px;background:#171a28f2;border-top:2px solid #2a2e45}
#dock button{flex:0 0 auto;min-width:68px;background:#262a40;font-size:.7rem;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
#dock button span{font-size:1.4rem}
#modal{position:fixed;left:0;right:0;top:var(--mtop,110px);bottom:var(--mbot,70px);z-index:50;background:#000a;display:flex;align-items:center;justify-content:center;padding:8px}#modal[hidden]{display:none}
.mbox{background:#1d2030;border-radius:12px;width:100%;max-width:640px;max-height:100%;display:flex;flex-direction:column;border:2px solid #f5c54255}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #2a2e45;font-weight:bold}
#mbody{padding:12px;overflow:auto}
#alertbar{position:fixed;top:0;left:0;right:0;height:30px;z-index:80;background:#0b0d16;border-bottom:1px solid #f5c54255;overflow:hidden;cursor:pointer;display:flex;align-items:center}#alertbar[hidden]{display:none}
#alertbar .mq{white-space:nowrap;font-size:.85rem;padding-left:100%;color:#ffe08a;will-change:transform}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.shead{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;padding:8px;gap:6px}
.sname{text-align:center;background:#000a;border-radius:10px;padding:4px 12px;font-size:.85rem;line-height:1.3}.smap{font-weight:bold;color:#f5c542}
.hexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px 6px;justify-items:center;margin-bottom:12px}
.hexgrid .hexwrap{margin:0 0 14px}.hexn{text-align:center;margin-top:2px}.uplv{position:absolute;top:0;right:-4px;background:#f5c542;color:#222;font-weight:bold;font-size:.7rem;border-radius:8px;padding:0 5px}
.bn2{color:#7fe08a}
#dock .dockbtn{flex:0 0 auto;min-width:68px;background:#262a40;font-size:.7rem;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:6px;color:#fff;text-decoration:none}#dock .dockbtn span{font-size:1.4rem}
.pills #logout{margin-left:auto}
.duel{display:flex;align-items:center;gap:10px;text-align:center}.duelside{flex:1}.mini{width:34px;height:48px;object-fit:contain;vertical-align:middle}.mini.big{width:70px;height:100px}
.rlog{min-height:90px;font-size:.85rem;margin:8px 0}
@media(max-width:820px){
  #stage .stage{height:340px}.avatar{height:210px}.tbars{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){.pill{font-size:.8rem;padding:3px 8px}.shead button{padding:5px 7px;font-size:.75rem}.tbars{grid-template-columns:repeat(2,1fr)}}
.mdet{background:#12141c;border-radius:6px;padding:6px 8px;margin-top:4px;font-size:.8rem;line-height:1.5}