*{box-sizing:border-box}:root{--gold: #d4b06a;--ink: #0b0d13;--panel: #141824d9;--line: #2a3040;--stat-body: #e5484d;--stat-mind: #3e9df0;--stat-luck: #46a758;--stat-cha: #eab308;--stat-spi: #9d5cd0;--stat-nat: #8a8f98}html,body{margin:0;height:100%}body.page-table{background:radial-gradient(ellipse 70% 45% at 50% 0%,#1c2233 0%,transparent 55%),radial-gradient(ellipse 70% 45% at 50% 100%,#1a2030 0%,transparent 55%),radial-gradient(ellipse 120% 90% at 50% 55%,#10141f 0%,var(--ink) 70%);color:#f4efe4;font-family:Sarabun,Noto Sans Thai,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}#app{height:100vh;display:flex;flex-direction:column}.hero{display:flex;align-items:center;gap:16px;padding:8px 26px}.hero.enemy{justify-content:center;flex-direction:row-reverse}.hero.me{justify-content:center}.hero-figure{position:relative;width:92px;height:92px;flex-shrink:0}.hero-figure .ring{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 26px -4px var(--gold),inset 0 0 18px #d4b06a40;background:conic-gradient(from 120deg,#232838,#10141f,#232838)}.hero-figure .face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a3145,#0e1119 75%);display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-figure .face .icon{width:52px;height:52px;color:#fff;filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}.hero-figure .face .icon svg{width:100%;height:100%}.hero-figure .lvl-badge{position:absolute;right:-6px;bottom:-2px;min-width:30px;height:30px;padding:0 7px;border-radius:999px;background:linear-gradient(135deg,#f0c06a,#d4934a);color:#14100a;font-family:Cinzel,serif;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;border:2px solid #14100a;box-shadow:0 2px 10px #0009}.hero-figure.enemy .face .icon{transform:scaleY(-1)}.hero-info{display:flex;flex-direction:column;gap:6px;min-width:300px}.hero-name{display:flex;align-items:baseline;gap:10px}.hero-name .nm{font-weight:800;font-size:16px;letter-spacing:.3px}.hero-name .cls{color:var(--gold);font-size:12.5px;font-weight:600}.hpbar{height:17px;border-radius:9px;background:#232838;border:1px solid #000;overflow:hidden;position:relative}.hpbar .fill{height:100%;background:linear-gradient(90deg,#e5484d,#ff8a8d);transition:width .5s ease;box-shadow:0 0 12px #e5484d88}.hpbar .fill.hi{background:linear-gradient(90deg,#46a758,#8fe3a4);box-shadow:0 0 12px #46a75888}.hpbar .num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:Cinzel,serif;font-weight:800;font-size:12.5px;color:#fff;text-shadow:0 1px 3px #000}.hero-row{display:flex;align-items:center;gap:10px}.stat-orbs{display:flex;gap:7px}.stat-orb{position:relative;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--sc, #666) 55%,#fff),var(--sc, #666) 75%);border:1px solid rgba(255,255,255,.3);box-shadow:0 0 10px -2px var(--sc, #666),inset 0 -3px 6px #00000080}.stat-orb .ic{width:19px;height:19px;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}.stat-orb .ic svg{width:100%;height:100%}.stat-orb b{position:absolute;right:-4px;bottom:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:#14161f;border:1px solid var(--sc, #666);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 2px rgba(0,0,0,.8)}.level-pile{position:relative;width:66px;height:90px;flex-shrink:0}.level-pile .pile-card{position:absolute;width:56px;height:78px;border-radius:7px;background:repeating-linear-gradient(45deg,#1d2334 0,#1d2334 5px,#151a29 5px,#151a29 10px);border:1px solid #39415c;box-shadow:0 2px 6px #0009}.level-pile .count{position:absolute;right:-6px;top:-8px;z-index:5;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#14161f;border:1px solid var(--gold);color:var(--gold);font-family:Cinzel,serif;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}.level-pile .lbl{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:10px;color:#7d869c;letter-spacing:1px}.opp-hand{display:flex;margin-left:18px}.card-back{width:40px;height:56px;border-radius:6px;margin-left:-16px;background:repeating-linear-gradient(45deg,#1d2334 0,#1d2334 6px,#141927 6px,#141927 12px);border:1px solid #39415c;box-shadow:0 2px 6px #0009}.opp-hand .card-back:first-child{margin-left:0}.wait-backs{display:flex;gap:10px;justify-content:center;padding:18px 0 6px}.wait-backs .card-back{width:64px;height:92px;border-radius:8px;margin-left:0;animation:wait-breathe 1.6s ease-in-out infinite}@keyframes wait-breathe{0%,to{transform:translateY(0);opacity:.85}50%{transform:translateY(-6px);opacity:1}}.arena{flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;min-height:0;position:relative;padding:6px 0}.phase-strip{display:flex;gap:5px;align-items:center;justify-content:center;padding:5px 18px;background:#10131dcc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.phase-pill{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:999px;border:1px solid var(--line);color:#6b7288;transition:all .2s ease}.phase-pill.active{background:linear-gradient(135deg,#f0c06a,#d4934a);color:#14100a;border-color:#f0c06a;box-shadow:0 0 14px -2px #d4b06a}.phase-pill.done{color:#3d455c}.turn-label{margin-left:14px;color:#9aa3b8;font-size:12px}.turn-label b{color:#fff}.action-bar{display:flex;gap:8px;padding:8px 18px;align-items:center;justify-content:center;flex-wrap:wrap}.btn{font-family:inherit;font-size:13px;font-weight:700;padding:9px 18px;border-radius:12px;cursor:pointer;border:1px solid #3a4258;background:#1a2032e6;color:#e7ecf7;transition:all .15s ease;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.btn:hover:not(:disabled){border-color:var(--gold);color:#fff;transform:translateY(-1px)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,#f0c06a,#d4934a);color:#14100a;border-color:#f0c06a}.btn.danger{background:linear-gradient(135deg,#e5484d,#a52a2e);border-color:#e5484d;color:#fff}.btn.ghost{background:transparent}.action-hint{color:#9aa3b8;font-size:12.5px;margin-right:18px}.my-zone{position:relative}.hand-fan{position:relative;height:218px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:6px;gap:6px}.hand-fan .card-slot{position:relative;width:148px;height:214px;flex-shrink:0;transition:transform .16s ease,filter .18s ease;cursor:pointer}.hand-fan .card-slot .card{transform:scale(.4625);transform-origin:top left;position:absolute;top:0;right:0;bottom:0;left:0}.hand-fan .card-slot:hover{transform:translateY(-26px);z-index:50}.hand-fan .card-slot.selected{transform:translateY(-40px);z-index:51}.hand-fan .card-slot.selected:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:20px;border:2px solid var(--gold);box-shadow:0 0 20px -2px var(--gold);pointer-events:none}.hand-fan .card-slot.dim .card{filter:grayscale(.75) brightness(.5)}.hand-fan .card-slot .card .card-flavor{display:none}.hand-fan .card-slot.playable:before{content:"";position:absolute;top:-5px;right:-3px;width:15px;height:15px;border-radius:50%;background:#8fe3a4;box-shadow:0 0 12px #46a758;z-index:10}.log-panel{height:86px;overflow-y:auto;padding:6px 22px;font-size:12px;line-height:1.6;color:#9aa3b8;background:#0d1018d9;border-top:1px solid var(--line);scrollbar-width:thin}.log-panel .t{color:#5a6378;margin-right:6px;font-size:10px}.log-panel .atk{color:#ff9b9d}.log-panel .heal{color:#8fe3a4}.log-panel .lvl{color:var(--gold)}.log-panel .sys{color:#6b7288;font-style:italic}.fx-ghost{position:fixed;z-index:500;pointer-events:none;transform:translate(-50%,-60%) scale(.55) rotate(3deg);opacity:.92;filter:drop-shadow(0 18px 40px rgba(0,0,0,.8))}.fx-ghost.illegal{filter:grayscale(1) brightness(.55)}.drop-target-glow{outline:2px dashed rgba(212,176,106,.6);outline-offset:6px;border-radius:18px;box-shadow:0 0 34px -6px #d4b06a66}.hero.elf-glow{outline-color:#8fe3a4d9;box-shadow:0 0 42px -4px #46a7588c}.hand-fan .card-slot.elf-target:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:16px;border:2px solid #8fe3a4;box-shadow:0 0 18px -2px #46a758;pointer-events:none;animation:elf-pick 1.2s ease-in-out infinite}@keyframes elf-pick{0%,to{box-shadow:0 0 12px -4px #46a758}50%{box-shadow:0 0 24px -2px #46a758}}.phase-banner{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:95;pointer-events:none;font-size:24px;font-weight:700;color:#ffe9c2;text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 30px rgba(212,176,106,.35);letter-spacing:.5px;animation:banner-in 1.9s ease forwards;white-space:nowrap}@keyframes banner-in{0%{opacity:0;transform:translate(-50%,-38%) scale(.92)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%{opacity:1}to{opacity:0;transform:translate(-50%,-62%) scale(1.03)}}.class-ready-badge{position:absolute;left:50%;top:-34px;transform:translate(-50%);z-index:6;white-space:nowrap;font-size:12px;font-weight:800;color:#14100a;background:linear-gradient(135deg,#f5d78e,#d4934a);border:2px solid #14100a;padding:4px 12px;border-radius:999px;box-shadow:0 4px 16px #0009,0 0 18px #d4b06aa6;animation:badge-bounce 1.1s ease infinite;pointer-events:none}@keyframes badge-bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.turn-chips{position:fixed;right:22px;top:calc(50% + 66px);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}.turn-chip{font-size:11.5px;font-weight:700;color:#e7ecf7;padding:4px 12px;border-radius:999px;background:#141824d9;border:1px solid #3a4258;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.turn-chip.used{opacity:.38;text-decoration:line-through}.mulligan-full{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#05060ad1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.mulligan-full h2{font-family:Cinzel,serif;color:var(--gold);margin:0;letter-spacing:2px;font-size:28px}.mulligan-full .sub{color:#9aa3b8;font-size:14px}.mulligan-full .choice-list{max-width:1180px}.mulligan-full .choice-list .card-slot{width:148px;height:214px}.mulligan-full .choice-list .card-slot .card{transform:scale(.4625)}.mulligan-full .choice-list .card-slot .card .card-flavor{display:block}.mulligan-full .btn-row{display:flex;gap:14px}.endturn-btn{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:60;cursor:pointer;border:none;background:none;padding:0;font-family:inherit}.endturn-btn .disc{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#5d6780,#232838 58%,#14171f);border:3px solid var(--gold);box-shadow:0 8px 26px #000000a6,0 0 30px -6px #d4b06a73,inset 0 0 22px #d4b06a2e;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease}.endturn-btn:hover:not(.disabled) .disc{transform:scale(1.06);box-shadow:0 10px 32px #000000b3,0 0 40px -4px #d4b06ab3,inset 0 0 26px #d4b06a4d}.endturn-btn.disabled{opacity:.45;cursor:not-allowed}.endturn-btn .lbl{color:#ffe9c2;font-weight:800;font-size:13.5px;text-align:center;line-height:1.25;text-shadow:0 2px 6px rgba(0,0,0,.8);padding:0 10px}.endturn-btn.main .disc{border-color:#e5484d;box-shadow:0 8px 26px #000000a6,0 0 34px -6px #e5484d99,inset 0 0 22px #e5484d38}.endturn-btn.main .lbl{color:#ffd9da}.turn-timer{position:fixed;right:26px;top:calc(50% - 106px);width:96px;z-index:110;display:flex;flex-direction:column;align-items:center;pointer-events:none;text-align:center}.turn-timer .tt-num{font-family:Cinzel,serif;font-size:23px;font-weight:800;color:#ffe9c2;text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 18px rgba(212,176,106,.45);background:#0c0e16d9;border:1.5px solid var(--gold);border-radius:12px;padding:5px 12px;line-height:1.2;min-width:64px;white-space:nowrap;box-shadow:0 4px 12px #00000080,0 6px 22px #000000a6,inset 0 0 14px #d4b06a24}.turn-timer .tt-num.urgent{color:#ff6b6e;border-color:#e5484d;background:#200a0ce6;box-shadow:0 6px 22px #000000a6,0 0 26px -4px #e5484d8c;animation:tt-pulse 1s ease-in-out infinite}.turn-timer .tt-peer{font-size:12px;line-height:1.45;color:#ffc9cb;margin-top:10px;background:#2e0e12eb;border:1px solid rgba(229,72,77,.65);border-radius:10px;padding:5px 10px;box-shadow:0 6px 18px #0009}.turn-timer .tt-peer b{font-size:14px;color:#ff9b9e}@keyframes tt-pulse{50%{transform:scale(1.1)}}.popover{position:fixed;z-index:120;background:#141824f2;border:1px solid var(--gold);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 40px #000000b3,0 0 30px -8px #d4b06a66;min-width:210px;animation:fadein .12s ease}.popover .btn{width:100%}.popover .ptitle{font-size:11px;color:#9aa3b8;text-align:center;letter-spacing:1px;text-transform:uppercase}.inspect-modal{display:flex;gap:24px;align-items:flex-start;max-width:780px;overflow:hidden}.modal.inspect-modal{max-height:none}.inspect-card{flex-shrink:0}.inspect-desc{flex:1;min-width:260px}.inspect-desc h2{margin-bottom:8px}.desc-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid #232838;font-size:13px}.desc-row .k{width:105px;flex-shrink:0;color:#9aa3b8;font-weight:600}.desc-row .v{color:#eef1f8;line-height:1.45}.inspect-desc .btn{margin-top:12px}.phase-strip.mid{background:transparent;border:none;padding:3px 0;margin:2px 0;flex-shrink:0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#05060acc;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadein .25s ease}.modal{background:#141824;border:1px solid var(--gold);border-radius:18px;padding:24px 30px;max-width:660px;width:min(92vw,660px);box-shadow:0 0 60px -10px #d4b06a59;max-height:88vh;overflow-y:auto}.modal h2{font-family:Cinzel,serif;color:var(--gold);margin:0 0 6px;letter-spacing:1px}.modal p.sub{color:#9aa3b8;margin:0 0 16px;font-size:13.5px}.modal .btn-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center}.attack-card{border:1px solid #e5484d;border-radius:12px;padding:14px 18px;margin-bottom:14px;background:linear-gradient(135deg,#e5484d1f,#06080d99);text-align:center}.attack-card .src{font-weight:700;color:#ff9b9d}.attack-card .dmg{font-family:Cinzel,serif;font-size:32px;font-weight:800;color:#ffd9da;text-shadow:0 0 14px #e5484d}.choice-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.choice-list .card-slot{width:106px;height:153px;position:relative;cursor:pointer;transition:transform .15s ease}.choice-list .card-slot .card{transform:scale(.331);transform-origin:top left;position:absolute;top:0;right:0;bottom:0;left:0}.choice-list .card-slot:hover{transform:translateY(-5px);z-index:5}.choice-list .card-slot.selected{transform:translateY(-9px)}.choice-list .card-slot.selected:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:16px;border:2px solid var(--gold);box-shadow:0 0 16px -2px var(--gold)}.choice-overlay .option-btn{padding:14px 20px;font-size:15px;border-radius:12px;font-weight:700;min-width:150px}.choice-overlay .option-btn.selected{border-color:var(--gold);color:var(--gold);box-shadow:0 0 16px -2px var(--gold)}.chain-stack{background:#0a0c14b8;border:1px solid rgba(212,176,106,.28);border-radius:12px;padding:10px 14px;margin:6px auto 0;max-width:380px;font-size:13px}.chain-stack .chain-title{color:#9aa3b8;margin-bottom:6px}.chain-stack .chain-entry{padding:3px 4px;color:#e6e8ee;display:flex;gap:6px;align-items:center}.chain-stack .chain-entry:before{content:"◆";color:var(--gold);font-size:9px}.chain-stack .chain-entry.canceled{color:#7d869c;text-decoration:line-through}.chain-stack .chain-entry.canceled:before{content:"✕";color:#e5484d}.menu-screen{min-height:100vh;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:30px 20px 46px;gap:16px}.menu-head{text-align:center}.menu-head h1{font-family:Cinzel,serif;font-size:54px;margin:0;letter-spacing:4px;background:linear-gradient(180deg,#fff,#d4b06a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 8px 40px rgba(212,176,106,.25)}.menu-head .tagline{color:#9aa3b8;margin-top:4px;font-size:15px}.tribe-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.tribe-slot{position:relative;width:258px;height:372px;cursor:pointer;transition:transform .18s ease,filter .18s ease;filter:brightness(.6) saturate(.55)}.tribe-slot .card{transform:scale(.807);transform-origin:top left}.tribe-slot:hover{transform:translateY(-8px);filter:brightness(.85)}.tribe-slot.chosen{filter:none;transform:translateY(-12px) scale(1.03)}.tribe-slot.chosen:after{content:"✓ เลือกเผ่านี้";position:absolute;left:50%;bottom:-36px;transform:translate(-50%);font-size:12.5px;font-weight:800;color:#14100a;white-space:nowrap;background:linear-gradient(135deg,#f5d78e,#d4934a);padding:6px 16px;border-radius:999px;border:2px solid #14100a;box-shadow:0 4px 16px #0009,0 0 22px #d4b06a99;z-index:10}.card.tribe.ornate{border:2px solid #f5d78e;background:radial-gradient(ellipse 130% 90% at 50% -20%,rgba(212,176,106,.16),transparent 55%),linear-gradient(0deg,#0e0c08,#1a1610 55%,#241e12);box-shadow:0 0 0 1px #14100a,0 0 0 3px #d4b06a59,0 0 0 4px #14100a,0 0 38px -6px #d4b06a80,0 22px 55px -22px #000000f2}.card.tribe.ornate:before{border:1px solid rgba(245,215,142,.55);background:linear-gradient(135deg,transparent 46%,rgba(245,215,142,.14) 50%,transparent 54%),linear-gradient(45deg,transparent 46%,rgba(245,215,142,.14) 50%,transparent 54%)}.card.tribe.ornate .card-art{background:radial-gradient(ellipse 90% 80% at 50% 45%,rgba(212,176,106,.2),transparent 60%),radial-gradient(ellipse 120% 100% at 50% 110%,#1c160c,#0a0806 70%);border:1px solid rgba(245,215,142,.5)}.tribe-mandala{position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:50%;background:conic-gradient(transparent 0deg,rgba(245,215,142,.14) 24deg,transparent 48deg,transparent 120deg,rgba(245,215,142,.1) 144deg,transparent 168deg,transparent 240deg,rgba(245,215,142,.14) 264deg,transparent 288deg);animation:mandala-spin 26s linear infinite;pointer-events:none}@keyframes mandala-spin{to{transform:rotate(360deg)}}.tribe-aura{position:absolute;top:20%;right:20%;bottom:20%;left:20%;border-radius:50%;background:radial-gradient(circle,rgba(245,215,142,.22),transparent 65%);filter:blur(6px);animation:aura-pulse 3.2s ease-in-out infinite;pointer-events:none}@keyframes aura-pulse{0%,to{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.05)}}.card.tribe.ornate .art-ring{border:1.5px double rgba(245,215,142,.55);border-radius:50%}.card.tribe.ornate .card-name{color:#ffe9c2;text-shadow:0 0 14px rgba(212,176,106,.55)}.card.tribe.ornate .hp-orb{border:2px solid #f5d78e;box-shadow:0 4px 14px #000000b3,0 0 16px #d4b06a73,inset 0 0 12px #d4b06a4d}.card.tribe.ornate .ability-title{letter-spacing:1.4px}.tribe-info{margin-top:34px;text-align:center;max-width:620px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 26px;display:flex;flex-direction:column;gap:6px;align-items:center}.tribe-info .deck-name{font-family:Cinzel,serif;font-size:20px;font-weight:800;letter-spacing:.5px;color:var(--c, var(--gold));text-shadow:0 0 18px color-mix(in srgb,var(--c, #d4b06a) 45%,transparent)}.tribe-info .deck-style{color:#c9d1e4;font-size:14px}.tribe-info .deck-goal{color:#8fe3a4;font-size:12.5px}.tribe-info .btn{margin-top:8px}.menu-actions{display:flex;gap:14px;margin-top:4px;flex-wrap:wrap;justify-content:center}.menu-actions .big{font-size:15px;padding:15px 28px;min-width:280px}.menu-tips{color:#6b7288;font-size:12px;max-width:680px;text-align:center;line-height:1.6}.decklist-modal{max-width:900px;width:min(94vw,900px)}.decklist-modal .choice-list{gap:6px;padding-bottom:10px}.decklist-modal .card-slot{width:106px;height:153px}.decklist-modal .btn-row{box-shadow:0 -10px 20px #141824}.deck-count{position:absolute;right:-4px;top:-8px;z-index:12;font-size:11px;font-weight:800;color:#14100a;background:linear-gradient(135deg,#f5d78e,#d4934a);border-radius:999px;padding:2px 8px;border:1px solid #14100a}.win-banner{text-align:center;font-family:Cinzel,serif;font-size:42px;color:var(--gold);text-shadow:0 4px 30px rgba(212,176,106,.5);margin:10px 0}.pass-screen{text-align:center}.pass-screen .who{font-family:Cinzel,serif;font-size:34px;color:var(--gold);margin:14px 0}.toast{position:fixed;top:76px;left:50%;transform:translate(-50%);background:#241f14;border:1px solid var(--gold);color:#ffe9c2;padding:10px 22px;border-radius:10px;z-index:200;font-size:13.5px;animation:fadein .2s ease;box-shadow:0 8px 30px #0009}.toast.good{background:#12211a;border-color:#46a758;color:#c8f0d2}.toast.bad{background:#2a1420;border-color:#e5484d;color:#ffd9da}#fx-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;pointer-events:none}#fx-layer .fx-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);animation:fx-pop 1.15s ease forwards;filter:drop-shadow(0 20px 60px rgba(0,0,0,.8)) drop-shadow(0 0 40px var(--c, #d4b06a66))}#fx-layer .fx-card .card{box-shadow:0 0 0 1px #000c,0 0 46px -6px var(--c, #d4b06a)}@keyframes fx-pop{0%{transform:translate(-50%,-50%) scale(.55);opacity:0}14%{transform:translate(-50%,-50%) scale(1.02);opacity:1}22%{transform:translate(-50%,-50%) scale(1)}78%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(.92);opacity:0}}.fx-hero-flash{position:fixed;z-index:91;pointer-events:none;border-radius:18px;animation:hero-flash .7s ease forwards}.fx-hero-flash.damage{background:radial-gradient(ellipse at center,#e5484d6b,#e5484d14 70%);box-shadow:inset 0 0 40px #e5484d8c}.fx-hero-flash.heal{background:radial-gradient(ellipse at center,#46a75861,#46a7580f 70%);box-shadow:inset 0 0 40px #46a75880}@keyframes hero-flash{0%{opacity:0}18%{opacity:1}to{opacity:0}}.hero.shake-dmg{animation:shake .5s ease}.hero.shake-dmg .hpbar{box-shadow:0 0 18px #e5484d}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}.hero.flash-heal{animation:healg .8s ease}@keyframes healg{0%,to{filter:none}40%{filter:drop-shadow(0 0 22px #46a758) brightness(1.25)}}.account-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;padding:10px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.account-bar .acc-name{font-weight:700;color:#fff}.account-bar .acc-rec{color:#9aa3b8;font-size:13px;font-weight:700}.btn.small{font-size:12px;padding:6px 12px;border-radius:9px}.net-deck-hint{display:block;font-size:11px;opacity:.75;font-weight:600}.wallet-bar{display:inline-flex;align-items:center;gap:8px}.wallet-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:#0e1220;font-weight:800;font-size:13px;line-height:1}.wallet-chip .wc-ic{font-size:13px}.wallet-chip.gold .wc-num{color:var(--gold)}.wallet-chip.crystal .wc-num{color:#7dd9ff}.wallet-chip.dust .wc-num{color:#c9a7ff}.menu-head .wallet-bar{margin-top:8px}.shop{gap:18px}.shop-bar{justify-content:center}.shop-section{display:flex;flex-direction:column;gap:10px}.shop-sec-title{font-weight:800;font-size:16px;color:#fff;text-align:center;display:flex;align-items:baseline;gap:8px;justify-content:center}.shop-sec-title small{font-weight:600;font-size:12px;color:#8a92a8}.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;width:min(92vw,720px)}.shop-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:22px 16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);position:relative}.shop-item .si-icon{font-size:42px;filter:drop-shadow(0 4px 12px #0008)}.shop-item .si-name{font-weight:800;color:#fff}.shop-item .si-sub{color:#9aa3b8;font-size:12.5px;line-height:1.5;min-height:38px}.shop-item.crystal{border-color:#2a4a63;box-shadow:0 0 22px -10px #7dd9ff}.shop-item.disabled{opacity:.55}.si-tag{font-size:10.5px;font-weight:800;color:#14100a;background:linear-gradient(135deg,#f0c06a,#d4934a);padding:2px 10px;border-radius:999px;letter-spacing:.3px}.si-soon{font-size:11px;font-weight:800;letter-spacing:.5px;color:#f0c06a;border:1px dashed #f0c06a66;padding:3px 12px;border-radius:999px}.auth-card{width:min(92vw,420px);display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.auth-tabs{display:flex;gap:8px}.auth-tab{flex:1;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:9px;border-radius:10px;border:1px solid var(--line);background:transparent;color:#9aa3b8;transition:all .15s ease}.auth-tab.active{background:linear-gradient(135deg,#f0c06a,#d4934a);color:#14100a;border-color:#f0c06a}.auth-form{display:flex;flex-direction:column;gap:10px}.auth-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#c6cde0}.auth-field input{font-family:inherit;font-size:14px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0e1220;color:#f4efe4;outline:none}.auth-field input:focus{border-color:var(--gold)}.auth-error{color:#ff8a8d;font-size:13px;min-height:0;text-align:center}.auth-error:empty{display:none}.deck-list{display:flex;flex-direction:column;gap:10px;width:min(92vw,560px)}.deck-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);position:relative;flex-wrap:wrap}.deck-item.active{border-color:var(--gold);box-shadow:0 0 18px -6px var(--gold)}.deck-item-name{font-weight:700;font-size:15px;color:#fff}.deck-item-sub{color:#9aa3b8;font-size:12.5px;margin-top:2px}.deck-active-badge{position:absolute;top:0;left:16px;transform:translateY(-55%);font-size:11.5px;font-weight:800;letter-spacing:.3px;background:linear-gradient(135deg,#f0c06a,#d4934a);color:#14100a;padding:3px 12px;border-radius:999px;box-shadow:0 2px 10px #000a}.menu-tips{color:#8a92a8;font-size:12.5px;max-width:680px;text-align:center;line-height:1.65}.tribe-pick-col{display:flex;flex-direction:column;align-items:center;gap:10px}.tribe-pick-cap{text-align:center;max-width:264px;line-height:1.5}.tribe-pick-cap .t-name{font-weight:800;font-size:15px;color:var(--gold)}.tribe-pick-cap .t-name small{color:#8a92a8;font-weight:600;font-size:11.5px}.tribe-pick-cap .t-style{color:#9aa3b8;font-size:12.5px;margin-top:2px}.deckbuilder.editing{align-items:stretch;height:100vh;max-height:100vh;overflow:hidden;width:100%;max-width:none;margin:0;padding:14px 18px;gap:10px}.db-topbar{position:static;z-index:30;flex:0 0 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:#10131ef2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.db-name{font-family:inherit;font-size:15px;font-weight:700;color:#fff;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#0e1220;min-width:180px;outline:none}.db-name:focus{border-color:var(--gold)}.db-tribe-chip{display:inline-flex;align-items:center;gap:4px;cursor:help;font-size:13px;font-weight:800;color:var(--gold);padding:8px 14px;border:1px solid #5c4a24;border-radius:999px;background:#221c10aa;transition:border-color .15s ease,box-shadow .15s ease}.db-tribe-chip:hover{border-color:var(--gold);box-shadow:0 0 14px -4px var(--gold)}.db-warn{color:#ffcf8a;font-size:12px;padding:8px 12px;line-height:1.5;border-bottom:1px solid #5c4a24;background:#2a2210aa}.db-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.db-search{font-family:inherit;font-size:13px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#0e1220;color:#f4efe4;outline:none;min-width:200px}.db-search:focus{border-color:var(--gold)}.db-filter{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:#9aa3b8}.db-filter.on{border-color:var(--gold);color:#fff}.db-filter-icon{display:inline-flex;width:14px;height:14px}.db-filter-icon svg{width:100%;height:100%}.db-browser{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px 0 6px;align-items:flex-start;align-content:flex-start;flex:1 1 auto;min-height:0;overflow-y:auto}.db-browser .card-slot{position:relative;width:106px;height:153px;cursor:pointer;overflow:hidden;border-radius:11px;transition:transform .14s ease,filter .14s ease}.db-browser .card-slot .card{transform:scale(.331);transform-origin:top left;position:absolute;top:0;right:0;bottom:0;left:0}.db-browser .card-slot:hover{transform:translateY(-4px);z-index:5}.db-browser .card-slot.dim{filter:brightness(.5) saturate(.5)}.db-count{position:absolute;top:4px;right:4px;z-index:3;font-size:12px;font-weight:800;background:linear-gradient(135deg,#f0c06a,#d4934a);color:#14100a;min-width:24px;text-align:center;padding:2px 6px;border-radius:999px;box-shadow:0 2px 8px #0009}.db-main{display:flex;gap:14px;align-items:stretch;width:100%;flex:1 1 auto;min-height:0}.db-left{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.db-right{flex:0 0 320px;display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 34px -14px #000d;overflow:hidden}.db-browser,.db-deck-list{scrollbar-width:thin;scrollbar-color:#3a4258 transparent}.db-browser::-webkit-scrollbar,.db-deck-list::-webkit-scrollbar{width:9px}.db-browser::-webkit-scrollbar-track,.db-deck-list::-webkit-scrollbar-track{background:transparent}.db-browser::-webkit-scrollbar-thumb,.db-deck-list::-webkit-scrollbar-thumb{background:#333a52;border-radius:999px;border:2px solid #141824}.db-browser::-webkit-scrollbar-thumb:hover,.db-deck-list::-webkit-scrollbar-thumb:hover{background:#475070}.db-deck-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1c2032,#141824)}.db-deck-total{font-family:Cinzel,serif;font-size:27px;font-weight:800;line-height:1;color:#ff8a8d;text-shadow:0 2px 12px #0008;white-space:nowrap}.db-deck-total .sep{opacity:.45;font-size:20px;padding:0 1px}.db-deck-total.ok{color:#8fe3a4}.db-deck-lbl{font-size:13px;font-weight:800;color:#fff;line-height:1.4}.db-deck-lbl span{display:block;font-size:10.5px;font-weight:600;color:#8a92a8}.db-deck-list{flex:1 1 auto;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding:8px 10px}.db-deck-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-left:3px solid #8a8f98;border-radius:9px;background:#0e1220;cursor:pointer;transition:border-color .12s ease,background .12s ease}.db-deck-row:hover{border-color:var(--gold);border-left-color:var(--gold);background:#161a2a}.db-deck-row .r-icon{display:inline-flex;width:15px;height:15px;flex:none}.db-deck-row .r-icon svg{width:100%;height:100%}.db-deck-row .r-name{flex:1;font-size:13px;font-weight:600;color:#e8ecf7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.db-deck-row .r-count{font-size:13px;font-weight:800;color:var(--gold);flex:none}.db-deck-row.out{animation:db-row-out .24s cubic-bezier(.5,0,.9,.6) forwards;pointer-events:none}@keyframes db-row-out{0%{transform:translate(0);opacity:1}35%{opacity:1}to{transform:translate(-112%);opacity:0}}.db-deck-empty{color:#6b7288;font-size:12.5px;text-align:center;padding:22px 8px}.db-right .db-side{position:static;flex:0 0 auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin-top:0;border:0;border-top:1px solid var(--gold);border-radius:0;background:#171a26f5;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.db-side-lbl{font-weight:800;font-size:12.5px;color:var(--gold)}.db-side-hint{color:#8a92a8;font-size:11px}@media (max-width: 980px){.deckbuilder.editing{height:auto;max-height:none;min-height:100vh;overflow-y:auto}.db-main{flex-direction:column-reverse;flex:0 0 auto}.db-left{flex:0 0 auto}.db-browser{flex:0 0 auto;overflow-y:visible}.db-right{flex:0 0 auto}.db-deck-list{max-height:240px}}.deck-empty{color:#6b7288;font-size:13.5px;text-align:center;padding:26px 10px;border:1px dashed var(--line);border-radius:14px}.gear-btn.in-game{position:fixed;top:10px;right:12px;z-index:45;font-size:15px;line-height:1;padding:7px 10px}.settings-modal{width:min(92vw,430px)}.setting-row{display:grid;grid-template-columns:118px 1fr 44px;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line)}.setting-row:last-of-type{border-bottom:none}.setting-row .k{font-size:13.5px;color:#c7cede;text-align:left}.setting-row .v{font-size:12.5px;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}.setting-row input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;background:linear-gradient(90deg,var(--gold),#6b5a34);outline:none;cursor:pointer}.setting-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#f0c06a;border:2px solid #14100a;box-shadow:0 0 10px -2px #f0c06acc}.setting-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#f0c06a;border:2px solid #14100a}.settings-modal p.sub{color:#b6c0d4}.setting-hr{border-top:1px solid var(--line);margin:16px 0 0}.ult-zone{position:relative;width:84px;height:120px;flex-shrink:0;cursor:default;border-radius:10px}.ult-zone .card.ultimate{transform:scale(.309);transform-origin:top left;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ult-zone.ready{cursor:pointer}.ult-zone.ready:after{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px;border-radius:14px;border:2px solid #f5d78e;box-shadow:0 0 22px -2px #f5d78ed9,inset 0 0 16px -6px #f5d78e99;animation:ult-ready-pulse 1.3s ease-in-out infinite;pointer-events:none}.ult-zone.ready .card.ultimate{filter:brightness(1.12)}.ult-zone.used .card.ultimate{filter:grayscale(1) brightness(.45);opacity:.6}.ult-zone.used:before{content:"ใช้แล้ว";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:5;font-weight:800;font-size:12px;color:#8b93a8;letter-spacing:1px;text-shadow:0 1px 4px #000;transform:rotate(-14deg);border:2px dashed #5a6378;border-radius:10px}.ult-ready-badge{position:absolute;bottom:-22px;left:50%;transform:translate(-50%);z-index:6;white-space:nowrap;font-size:11px;font-weight:800;color:#14100a;background:linear-gradient(135deg,#f5d78e,#d4934a);border:2px solid #14100a;border-radius:999px;padding:2px 10px;box-shadow:0 4px 16px #0009,0 0 18px #d4b06acc;animation:badge-bounce 1.1s ease infinite;pointer-events:none}@keyframes ult-ready-pulse{0%,to{box-shadow:0 0 14px -4px #f5d78e8c,inset 0 0 10px -6px #f5d78e66}50%{box-shadow:0 0 30px -2px #f5d78e,inset 0 0 20px -6px #f5d78ecc}}.hero-name .cls-chip{cursor:default;padding:1px 7px;border-radius:999px;background:#d4b06a24;border:1px solid rgba(212,176,106,.4);color:#ffe9c2;transition:background .15s ease}.hero-name .cls-chip:hover{background:#d4b06a4d}.hero-name .dot{color:#7d869c;margin:0 2px}#fx-layer .fx-card.ult{--c: #d4b06a;filter:drop-shadow(0 18px 46px rgba(0,0,0,.85)) drop-shadow(0 0 60px rgba(212,176,106,.5))}.db-side-cards{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.db-side-slot{position:relative;width:92px;height:133px;flex:none;border-radius:8px;cursor:pointer;transition:transform .14s ease,filter .14s ease}.db-side-slot .card{transform:scale(.2875);transform-origin:top left;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.db-side-slot:hover{transform:translateY(-4px);z-index:5}.db-side-slot:hover .card{filter:brightness(1.12) drop-shadow(0 6px 14px rgba(229,72,77,.35))}.db-side-slot.ult .card{filter:drop-shadow(0 4px 16px rgba(212,176,106,.4))}.db-side-slot.out{animation:db-row-out .24s cubic-bezier(.5,0,.9,.6) forwards;pointer-events:none}.db-side-empty{color:#6b7288;font-size:11.5px;padding:4px 2px}.db-ultimate{border-top:1px dashed rgba(212,176,106,.45);margin-top:10px;padding-top:10px}.tooltip{position:fixed;z-index:900;pointer-events:none;animation:tooltip-in .14s ease}.tooltip-box{position:relative}.tooltip-card{transform:scale(.72);transform-origin:top left;filter:drop-shadow(0 14px 38px rgba(0,0,0,.85))}.tooltip-stat{display:flex;align-items:center;gap:14px;max-width:300px;padding:12px 16px;border-radius:12px;background:#141824f5;border:1px solid rgba(212,176,106,.5);box-shadow:0 10px 40px #000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tooltip-stat .stat-orb.big{width:52px;height:52px;font-size:0;flex-shrink:0}.tooltip-stat .stat-orb.big .ic svg{width:30px;height:30px}.tooltip-stat b{display:block;font-size:15px;color:#ffe9c2;letter-spacing:.4px}.tooltip-stat p{margin:3px 0 0;font-size:12.5px;line-height:1.55;color:#b6c0d4}@keyframes tooltip-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}