:root{--bg:#060a16;--bg2:#0b1226;--surf:#111a36;--surf2:#18234a;--line:#a0b9ff1f;--line2:#a0b9ff38;--text:#eef2ff;--dim:#94a3cf;--mute:#66749f;--gold:#f6c453;--gold2:#c8902a;--goldGrad:linear-gradient(180deg, #ffd978 0%, #f0b03a 55%, #d58d1d 100%);--ally:#4d93ff;--enemy:#ff5c70;--ok:#2fd69a;--r:16px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--font:"Noto Sans Thai", "Sarabun", "Leelawadee UI", "Thonburi", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);margin:0}body{font-family:var(--font);overscroll-behavior:none;-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;text-align:inherit;background:0 0;border:0;padding:0}input{font:inherit;color:inherit}b{font-weight:700}h1,h2,h3,p{margin:0}ul{margin:0;padding:0;list-style:none}[data-lane=SL]{--lc:#ff8a3d}[data-lane=JG]{--lc:#3ddc84}[data-lane=MID]{--lc:#b36bff}[data-lane=AD]{--lc:#ffd23d}[data-lane=SP]{--lc:#ff6b9d}.app{background:var(--bg);flex-direction:column;max-width:480px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden}.screen{min-height:0;padding-top:var(--safe-t);background:radial-gradient(130% 45% at 50% -8%, #1a2a5e 0%, #060a1600 70%), var(--bg);flex-direction:column;flex:1;animation:.28s ease-out both enter;display:flex}@keyframes enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}*{scrollbar-width:none}::-webkit-scrollbar{width:0;height:0;display:none}.scroll{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.grow{flex:1;min-width:0}.top{flex:none;align-items:center;gap:8px;min-height:58px;padding:8px 12px 6px;display:flex}.tt{text-align:center;flex:1;min-width:0}.tt h1{letter-spacing:.2px;font-size:18px}.tt p{color:var(--dim);margin-top:1px;font-size:12px}.ib{background:var(--surf);border:1px solid var(--line);border-radius:14px;place-items:center;width:44px;height:44px;display:grid}.ib svg{width:22px;height:22px}.ib:active{transform:scale(.94)}.ib.ghosty{visibility:hidden}.steps{flex:none;align-items:center;gap:6px;padding:2px 16px 10px;display:flex}.st{color:var(--mute);flex:1;align-items:center;gap:8px;font-size:12px;display:flex;position:relative}.st i{background:var(--surf);border:1px solid var(--line2);border-radius:50%;flex:none;place-items:center;width:24px;height:24px;font-size:12px;font-style:normal;font-weight:700;display:grid}.st i svg{width:13px;height:13px}.st span{white-space:nowrap}.st:not(:last-child):after{content:"";background:var(--line2);border-radius:1px;flex:1;height:2px;margin-left:2px}.st.now{color:var(--text);font-weight:700}.st.now i{background:var(--goldGrad);color:#261800;border-color:#0000}.st.done{color:var(--ok)}.st.done i{border-color:var(--ok);color:var(--ok);background:#2fd69a26}.st.done:after{background:var(--ok)}.foot{padding:12px 16px calc(12px + var(--safe-b));background:linear-gradient(180deg, #060a1600, var(--bg) 28%);flex-direction:column;flex:none;align-items:center;gap:6px;display:flex}.footInfo{color:var(--dim);font-size:13px}.footInfo b{color:var(--gold);font-size:15px}.big{text-align:center;background:var(--goldGrad);color:#261800;border-radius:16px;justify-content:center;align-items:center;gap:8px;width:100%;min-height:54px;font-size:17px;font-weight:700;display:flex}.big em{background:#2618002e;border-radius:10px;padding:2px 8px;font-size:13px;font-style:normal}.big:active{transform:scale(.98)}.big.sm{min-height:46px;font-size:15px}.link{color:var(--dim);text-underline-offset:3px;min-height:36px;padding:0 12px;font-size:14px;text-decoration:underline}.toast{left:50%;top:calc(var(--safe-t) + 66px);color:#10152b;z-index:20;white-space:nowrap;background:#fff;border-radius:22px;padding:9px 16px;font-size:14px;font-weight:600;position:absolute;transform:translate(-50%)}.card{background:linear-gradient(180deg, var(--surf2), var(--surf));border:1px solid var(--line);border-radius:var(--r)}.row{align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 14px;display:flex}.row:active{transform:scale(.985)}.row b{font-size:16px;display:block}.row small{color:var(--dim);margin-top:2px;font-size:12.5px;display:block}.chev{color:var(--mute);font-size:22px}.ci{width:40px;height:40px;color:var(--gold);background:#f6c4531f;border-radius:12px;place-items:center;display:grid}.ci svg{width:20px;height:20px}.li{width:42px;height:42px;color:var(--lc);background:color-mix(in srgb, var(--lc) 14%, transparent);border:1px solid color-mix(in srgb, var(--lc) 40%, transparent);border-radius:13px;flex:none;place-items:center;display:grid}.li.lg{border-radius:16px;width:54px;height:54px}.stack{display:flex}.stack .pt{border:2px solid var(--surf);border-radius:50%;width:30px;height:30px;margin-left:-9px}.stack .pt:first-child{margin-left:0}.pt{object-fit:cover;background:var(--surf);width:100%;height:100%;display:block}.pt.fb{color:#fff;text-shadow:0 1px 2px #0009;place-items:center;font-size:15px;font-weight:800;display:grid}.c-tank{background:linear-gradient(135deg,#2f7bd6,#1b4a8f)}.c-fighter{background:linear-gradient(135deg,#d9822b,#8f4b12)}.c-assassin{background:linear-gradient(135deg,#b83ad6,#6a1d86)}.c-mage{background:linear-gradient(135deg,#3bb6c9,#17697a)}.c-carry{background:linear-gradient(135deg,#d6c23a,#7e7413)}.c-support{background:linear-gradient(135deg,#36c17b,#17724a)}.gridbox{flex-direction:column;flex:1;min-height:0;display:flex}.tools{flex-direction:column;flex:none;gap:8px;padding:4px 12px 6px;display:flex}.chips{scrollbar-width:none;gap:6px;margin:0 -12px;padding:0 12px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chip{background:var(--surf);border:1px solid var(--line);white-space:nowrap;border-radius:19px;flex:none;align-items:center;gap:6px;height:38px;padding:0 14px;font-size:14px;display:flex}.chip.on{background:var(--goldGrad);color:#261800;border-color:#0000;font-weight:700}.search{background:var(--surf);border:1px solid var(--line);height:42px;color:var(--mute);border-radius:13px;align-items:center;gap:8px;padding:0 12px;display:flex}.search svg{flex:none;width:18px;height:18px}.search input{-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:0;flex:1;min-width:0;font-size:15px}.hint{color:var(--dim);font-size:12px}.heroes{--cw:calc((min(100vw, 480px) - 48px) / 4);--ch:calc(var(--cw) * 1.08);-webkit-overflow-scrolling:touch;min-height:0;padding:4px 12px calc(14px + var(--safe-b));flex:1;grid-template-columns:repeat(4,1fr);align-content:start;gap:8px;display:grid;overflow-y:auto}.hc{background:var(--surf);content-visibility:auto;height:var(--ch);contain-intrinsic-size:auto var(--ch);border:2px solid #0000;border-radius:14px;position:relative;overflow:hidden}.hc .pt{position:absolute;inset:0}.hc .shade{pointer-events:none;background:linear-gradient(#04071200,#040712eb);height:52%;position:absolute;bottom:0;left:0;right:0}.hc .nm{text-align:center;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 2px #000;font-size:11.5px;font-weight:600;line-height:1.15;position:absolute;bottom:4px;left:4px;right:4px;overflow:hidden}.hc:active{transform:scale(.95)}.hc.sel{border-color:var(--gold)}.hc .tick{background:var(--goldGrad);color:#261800;border-radius:50%;place-items:center;width:22px;height:22px;display:grid;position:absolute;top:4px;right:4px}.hc .tick svg{width:13px;height:13px}.hc.off{pointer-events:none}.hc.off .pt{filter:grayscale()brightness(.45)}.hc.off .nm{color:var(--mute)}.empty{text-align:center;color:var(--dim);grid-column:1/-1;padding:28px 0}.home{padding-top:0}.hero{height:270px;padding-top:var(--safe-t);flex:none;position:relative;overflow:hidden}.mosaic{opacity:.55;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(4,1fr);display:grid;position:absolute;inset:0;transform:scale(1.12)rotate(-4deg)}.mosaic .pt{border-radius:0}.hero:after{content:"";background:linear-gradient(180deg, #060a1626 0%, #060a168c 45%, var(--bg) 100%);position:absolute;inset:0}.heroTxt{z-index:2;position:absolute;bottom:16px;left:20px;right:20px}.eyebrow{letter-spacing:2px;color:var(--gold);font-size:11px;font-weight:700}.heroTxt h1{margin:6px 0 8px;font-size:30px;font-weight:800;line-height:1.18}.heroTxt p{color:var(--dim);font-size:14px;line-height:1.5}.homeBody{padding:4px 16px calc(24px + var(--safe-b));flex-direction:column;gap:10px;display:flex}.cta{background:var(--goldGrad);color:#261800;border-radius:20px;align-items:center;gap:14px;width:100%;min-height:72px;padding:0 18px;display:flex}.cta:active{transform:scale(.98)}.cta b{font-size:19px;display:block}.cta small{opacity:.75;font-size:12.5px}.ctaIc{background:#26180029;border-radius:14px;place-items:center;width:44px;height:44px;display:grid}.ctaIc svg{width:22px;height:22px}.secHead{justify-content:space-between;align-items:baseline;margin-top:10px;display:flex}.secHead h2{font-size:16px}.secHead span{color:var(--dim);font-size:13px}.lanelist{flex-direction:column;gap:8px;display:flex}.ver{text-align:center;color:var(--mute);margin-top:6px;font-size:11px}.lanebig{padding:4px 16px calc(20px + var(--safe-b));flex-direction:column;gap:10px;display:flex}.lb{border-left:4px solid var(--lc);align-items:center;gap:14px;width:100%;min-height:84px;padding:0 16px;display:flex}.lb:active{transform:scale(.985)}.lb b{font-size:19px;display:block}.lb small{color:var(--dim);margin-top:3px;font-size:12.5px;display:block}.lanetabs{flex:none;grid-template-columns:repeat(5,1fr);gap:6px;padding:2px 12px 8px;display:grid}.lt{background:var(--surf);border:1px solid var(--line);height:62px;color:var(--mute);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:10.5px;display:flex;position:relative}.lt svg{width:20px;height:20px}.lt em{text-align:center;background:var(--surf2);min-width:17px;height:17px;color:var(--dim);border-radius:9px;padding:0 4px;font-size:10.5px;font-style:normal;font-weight:700;line-height:17px;position:absolute;top:4px;right:5px}.lt.on{color:var(--lc);background:color-mix(in srgb, var(--lc) 14%, var(--surf));border-color:var(--lc);font-weight:700}.lt.on em{background:var(--lc);color:#10152b}.setupHead{flex:none;padding:4px 16px 6px}.setupHead h2{font-size:17px}.setupHead p{color:var(--dim);margin-top:3px;font-size:12.5px}.banwrap{flex:none;padding:0 12px}.sideLbl{align-items:center;gap:6px;margin:4px 2px;font-size:12.5px;font-weight:700;display:flex}.sideLbl i,.team h3 i{background:currentColor;border-radius:50%;width:8px;height:8px;display:inline-block}.sideLbl.a,.team.a h3{color:var(--ally)}.sideLbl.e,.team.e h3{color:var(--enemy)}.bans{grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:4px;display:grid}.bslot{aspect-ratio:1;background:var(--surf);border:2px dashed var(--line2);border-radius:14px;place-items:center;display:grid;position:relative;overflow:hidden}.bans.a .bslot{border-color:#4d93ff73}.bans.e .bslot{border-color:#ff5c7073}.bslot.full{border-style:solid}.bslot.on{border-style:solid;border-color:#fff}.bslot .num{color:var(--mute);font-weight:700}.bslot .pt{filter:grayscale(.6)brightness(.7);position:absolute;inset:0}.bslot .x{background:linear-gradient(135deg,#0000 47%,#ff5c70f2 48% 52%,#0000 53%);position:absolute;inset:0}.teams{flex:none;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px;display:grid}.team{flex-direction:column;gap:5px;display:flex}.team h3{align-items:center;gap:6px;margin:0 2px 1px;font-size:12.5px;display:flex}.slot{background:var(--surf);border:1.5px solid var(--line);border-radius:12px;align-items:center;gap:8px;height:40px;padding:3px 8px 3px 3px;display:flex;position:relative;overflow:hidden}.team.a .slot{border-left:3px solid var(--ally)}.team.e .slot{border-left:3px solid var(--enemy)}.slot .pt{border-radius:9px;flex:none;width:32px;height:32px}.slot .pt.empty{border:1px dashed var(--line2);background:#a0b9ff12}.slot .nm{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--mute);flex:1;font-size:13px;overflow:hidden}.slot.full .nm{color:var(--text);font-weight:600}.slot.me{border-color:var(--gold);background:linear-gradient(90deg, #f6c45329, var(--surf))}.slot.me .nm{color:var(--gold);font-weight:700}.slot em{color:var(--gold);flex:none;display:grid}.slot em svg{width:15px;height:15px}.slot.on{background:var(--surf2);border-color:#fff}.slot:active{transform:scale(.98)}.seg{flex:none;grid-template-columns:1fr 1.35fr;gap:6px;padding:10px 12px 6px;display:grid}.seg button{background:var(--surf);border:1px solid var(--line);border-radius:13px;justify-content:center;align-items:center;gap:6px;min-width:0;height:46px;padding:0 8px;font-size:14px;font-weight:600;display:flex}.seg button span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.seg button svg{width:16px;height:16px;color:var(--gold);flex:none}.seg button.on{background:var(--goldGrad);color:#261800;border-color:#0000}.seg button.on svg{color:#261800}.recpane{padding:4px 12px calc(20px + var(--safe-b))}.modes{background:var(--surf);border:1px solid var(--line);border-radius:14px;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;display:grid}.modes button{text-align:center;height:38px;color:var(--dim);border-radius:10px;font-size:14px}.modes button.on{background:var(--surf2);color:var(--gold);border:1px solid var(--line2);font-weight:700}.subseg{border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr;margin-top:10px;display:grid}.subseg button{text-align:center;height:44px;color:var(--mute);border-bottom:3px solid #0000;justify-content:center;align-items:center;gap:6px;font-size:14px;font-weight:600;display:flex}.subseg button.on{color:var(--text);border-bottom-color:var(--gold)}.subseg em{background:var(--surf2);color:var(--dim);border-radius:9px;padding:1px 7px;font-size:11px;font-style:normal}.subnote{color:var(--dim);margin:10px 2px;font-size:12.5px;line-height:1.5}.rr{background:linear-gradient(180deg, var(--surf2), var(--surf));border:1px solid var(--line);border-radius:18px;margin-bottom:10px;padding:12px}.rr.best{background:linear-gradient(180deg, #2a2a4a, var(--surf));border-color:#f6c4538c}.rrTop{align-items:center;gap:12px;display:flex}.rrImg{border:2px solid var(--line2);border-radius:16px;flex:none;width:64px;height:64px;position:relative;overflow:hidden}.rr.best .rrImg{border-color:var(--gold)}.rrImg i{text-align:center;background:var(--bg);min-width:22px;height:22px;color:var(--gold);border-radius:0 0 10px;font-size:12px;font-style:normal;font-weight:800;line-height:22px;position:absolute;top:0;left:0}.rr.best .rrImg i{background:var(--goldGrad);color:#261800}.rrInfo{flex:1;min-width:0}.rrInfo b{font-size:17px;display:block}.meta{color:var(--dim);flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:12px;display:flex}.stars{color:var(--gold);letter-spacing:1px}.stars u{color:var(--surf2);text-decoration:none}.mine{color:var(--ok);background:#2fd69a1f;border:1px solid #2fd69a66;border-radius:8px;margin-top:5px;padding:1px 8px;font-size:11px;font-weight:700;display:inline-block}.score{text-align:center;flex:none;min-width:52px}.score b{color:var(--gold);font-size:22px;line-height:1;display:block}.score small{color:var(--mute);font-size:11px}.why{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.why li{border:1px solid var(--line);color:#cfd8ff;background:#a0b9ff14;border-radius:9px;padding:5px 9px;font-size:12px;line-height:1.35}.pickBtn{text-align:center;width:100%;height:46px;color:var(--gold);background:#f6c45324;border:1px solid #f6c45380;border-radius:13px;margin-top:10px;font-size:15px;font-weight:700}.pickBtn.on{background:var(--ok);color:#042a1b;border-color:#0000}.pickBtn:active{transform:scale(.98)}.emptyBox{text-align:center;border:1px dashed var(--line2);color:var(--dim);border-radius:18px;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;font-size:13.5px;display:flex}.emptyBox b{color:var(--text);font-size:16px}.rankbar{background:linear-gradient(90deg, #f6c45324, var(--surf));border:1px solid #f6c45359;border-radius:14px;flex:none;justify-content:space-between;align-items:center;gap:10px;margin:0 12px 8px;padding:6px 6px 6px 14px;font-size:13.5px;font-weight:600;display:flex}.rankbar>div{gap:5px;display:flex}.rankbar button{text-align:center;background:var(--bg2);border:1px solid var(--line2);width:42px;height:38px;color:var(--dim);border-radius:11px;font-size:16px;font-weight:800}.rankbar button.on{background:var(--goldGrad);color:#261800;border-color:#0000}.slot .ord{text-align:center;width:15px;color:var(--mute);flex:none;font-size:12px}.slot.me .ord{color:var(--gold)}.early{color:#ffd978;background:#f6c4531a;border:1px solid #f6c4534d;border-radius:12px;margin-top:10px;padding:8px 12px;font-size:12.5px;line-height:1.5}.modal{z-index:30;background:#03060ecc;align-items:flex-end;animation:.2s ease-out both enter;display:flex;position:absolute;inset:0}.sheet{width:100%;padding:22px 16px calc(20px + var(--safe-b));background:var(--bg2);border-top:1px solid var(--line2);border-radius:24px 24px 0 0}.sheet h2{text-align:center;font-size:20px}.sheet p{color:var(--dim);text-align:center;margin:6px 0 16px;font-size:13px;line-height:1.5}.ranks{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.ranks button{background:linear-gradient(180deg, var(--surf2), var(--surf));border:1px solid var(--line2);text-align:center;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:4px;height:86px;display:flex}.ranks button b{color:var(--gold);font-size:28px;line-height:1}.ranks button small{color:var(--dim);font-size:10.5px}.ranks button:active{border-color:var(--gold);transform:scale(.94)}.counter{align-items:center;gap:6px;margin-top:6px;font-size:12px;display:flex}.counter em{color:var(--text);font-style:normal;font-weight:700}.counter .cs{letter-spacing:1px;color:var(--gold);font-size:15px;line-height:1}.counter .cs u{color:#a0b9ff38;text-decoration:none}.counter small{color:var(--dim)}.counter.c3 small{color:var(--ok);font-weight:700}.counter.c0 .cs{color:var(--mute)}.allswitch{align-self:flex-start;height:34px;font-size:13px}.lb small.cnt{color:var(--gold);margin-top:1px}.lic{object-fit:contain;background:#e8f4f6;border-radius:22%;flex:none;padding:2px;display:block}.li .lic{width:32px;height:32px}.li.lg .lic{width:42px;height:42px}.lt .lic{width:26px;height:26px}.lt:not(.on) .lic{opacity:.55}.chip .lic{width:20px;height:20px;padding:1px}.pl,.pr{display:contents}@media (orientation:landscape) and (max-height:520px){.app{max-width:none}.steps{display:none}.top{min-height:46px;padding:4px 10px}.ib{width:38px;height:38px}.tt h1{font-size:16px}.tt p{display:none}.heroes{--ch:84px;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;padding-bottom:10px}.hc .nm{font-size:11px}.foot{padding:8px 12px}.big{min-height:46px;font-size:16px}.pick{grid-template-rows:auto minmax(0,1fr);grid-template-columns:43% minmax(0,1fr);display:grid}.pick>.top{grid-column:1/-1}.pick .pl{flex-direction:column;min-height:0;display:flex;overflow-y:auto}.pick .pr{flex-direction:column;min-width:0;min-height:0;display:flex}.rankbar{margin-bottom:6px;padding:4px 4px 4px 12px}.rankbar button{width:36px;height:34px}.slot{height:36px}.seg{padding-top:0}.seg button{height:40px}.ban{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:43% minmax(0,1fr);display:grid}.ban>.top{grid-column:1/-1}.ban>.banwrap{grid-area:2/1;overflow-y:auto}.ban>.gridbox{grid-area:2/2/span 2}.ban>.foot{grid-area:3/1}.setup{grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:38% minmax(0,1fr);display:grid}.setup>.top{grid-area:1/1/auto/-1}.setup>.lanetabs{grid-area:2/1/span 2;grid-template-columns:1fr;align-content:start;gap:5px;overflow-y:auto}.lt{flex-direction:row;justify-content:flex-start;gap:8px;height:36px;padding:0 10px;font-size:13px}.lt em{margin-left:auto;position:static}.setup>.setupHead{grid-area:2/2;padding:0 12px 4px}.setupHead h2{font-size:14px}.setupHead p{display:none}.setup>.gridbox{grid-area:3/2/span 2}.setup>.foot{grid-area:4/1}.lanepick .lanebig{grid-template-columns:1fr 1fr;align-content:start;gap:8px;display:grid}.lb{min-height:72px}.home{grid-template-columns:40% minmax(0,1fr);display:grid}.hero{height:auto}.heroTxt h1{font-size:22px}.heroTxt p{display:none}}.why li.win{color:#aef0d5;background:#2fd69a1f;border-color:#2fd69a73}.why li.lose{color:#ffc2ca;background:#ff5c701f;border-color:#ff5c7080}.why li.syn{color:#bcd6ff;background:#4d93ff1f;border-color:#4d93ff73}