:root{--bg: #111418;--panel: #181c22;--panel-2: #222831;--ink: #e7e5dd;--muted: #9aa29f;--line: #2e353e;--gold: #ddae45;--cinnabar: #e5604f;--teal: #5dc0b7;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Noto Sans Thai,Leelawadee UI,Tahoma,sans-serif;font-size:14px;line-height:1.5}button{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:4px 12px;cursor:pointer}button:hover:not(:disabled){border-color:var(--gold)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff;font-weight:600}.muted{color:var(--muted)}.small{font-size:.8rem}#app{max-width:1440px;height:100dvh;margin:0 auto;padding:10px 16px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}.brand{font-weight:700;font-size:1.05rem}.stats,.meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-variant-numeric:tabular-nums}.meta{margin-left:auto}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;min-height:0}.board-col{display:flex;flex-direction:column;gap:8px;min-height:0}#board{flex:1 1 auto;min-height:140px}#board canvas{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer}.bench-row,.shop-row,.status{flex:none}.status{min-height:1.5em;color:var(--muted)}.field-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}.field-bar .lbl{color:var(--muted);font-size:.85rem;margin-right:6px}.fb-life{display:flex;align-items:baseline}.fb-life b{font-size:1.7rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}.fb-life.low b{color:var(--cinnabar)}.fb-life.hit b{animation:life-hit .6s ease-out}@keyframes life-hit{0%{color:#ff4d3d;transform:scale(1.35)}to{transform:scale(1)}}.fb-life b{display:inline-block}.fb-cap{font-weight:600;font-variant-numeric:tabular-nums}.fb-origins{display:flex;flex-wrap:wrap;align-items:center;gap:4px;cursor:help}.otag{font-size:.78rem;padding:1px 8px;border-radius:999px;border:1px solid var(--line);border-left:4px solid var(--c);background:var(--panel)}.status.error{color:var(--cinnabar)}.side{display:grid;gap:12px;align-content:start;min-height:0;overflow-y:auto;padding-right:4px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}.panel h3{margin:0 0 6px;font-size:.95rem}.cls-icon{display:inline-block;vertical-align:-.15em;margin-right:3px;flex:none}#selected{position:relative}.panel-close{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;line-height:1;font-size:.85rem;border-radius:6px;background:transparent;color:var(--muted)}.panel-close:hover{color:var(--ink)}#selected h3,#selected .ghost-head{padding-right:28px}.panel-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:4px}.panel-toggle .chev{color:var(--muted);width:1em}.syn-chips{display:flex;flex-wrap:wrap;gap:4px}.syn-chip{font-size:.78rem;padding:1px 8px;border-radius:999px;border:1px solid var(--gold);background:#ddae451f}.syn-chip b{color:var(--gold)}.row-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}.bench-row,.shop-row{padding:8px 10px}.actions{display:flex;gap:8px;flex-wrap:wrap}.econ{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-variant-numeric:tabular-nums}.econ #gold{color:var(--gold);font-weight:700;font-size:1.1rem}.econ #life{font-weight:600}.shop-label{font-size:.85rem;color:var(--muted);margin-bottom:4px}.shop-row.locked .shop-label{color:var(--gold)}.slots{display:grid;gap:6px}#bench{grid-template-columns:repeat(6,minmax(0,1fr))}#shop{grid-template-columns:repeat(5,minmax(0,1fr))}.card{min-width:0;min-height:44px;padding:4px 7px;text-align:left;line-height:1.3;display:grid;gap:1px;align-content:start;border-left:4px solid var(--c, #888)}.card .n{font-weight:600}.elite-tag{font-size:.8rem;color:#111418;background:var(--gold);border-radius:4px;padding:0 6px;vertical-align:middle}.card .s{font-size:.78rem;color:var(--muted)}.card .n,.card .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card{position:relative}.card:has(>.unit-pic){padding-left:44px}.card>.unit-pic{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:38px;height:38px;object-fit:contain;pointer-events:none}@media(max-width:900px){#app{height:auto}.layout{grid-template-columns:1fr}#board{flex:none}#board canvas{height:auto}.side{overflow:visible}#bench{grid-template-columns:repeat(4,minmax(0,1fr))}#shop{grid-template-columns:repeat(3,minmax(0,1fr))}}.card.empty{opacity:.35;border-left-color:var(--line);cursor:default}.card.summon{border-left-style:dashed;background:#1d2229}.shop-card{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;cursor:pointer}.shop-card:hover{border-color:var(--gold)}.shop-card{grid-template-columns:minmax(0,1fr) auto;column-gap:6px;align-items:center}.shop-card .n,.shop-card .s{grid-column:1 / -1}.shop-card .buy{padding:0 8px;font-size:.78rem;grid-column:1 / -1;justify-self:end;margin-top:4px}.shop-card:has(>.unit-pic){padding-left:54px}.shop-card>.unit-pic{width:48px;height:48px}.owned{margin-top:6px;color:var(--gold);font-size:.85rem}.shop-row.locked{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}button.on{background:var(--gold);border-color:var(--gold);color:#111418;font-weight:600}.card.selected{outline:2px solid #fff}.shop-card.selected{outline-color:var(--gold)}.chip-list{display:grid;gap:4px}.syn{display:grid;gap:2px;padding:4px 0;border-bottom:1px solid var(--line)}.syn:last-child{border-bottom:0}.syn .h{display:flex;justify-content:space-between;font-weight:600;cursor:pointer;list-style:none}.syn .h::-webkit-details-marker{display:none}.syn .h span:first-child:before{content:"▸";display:inline-block;width:1em;color:var(--muted);transition:transform .15s}.syn[open] .h span:first-child:before{transform:rotate(90deg)}.syn:not(.active) .h{color:var(--muted)}.syn.active .h span:last-child{color:var(--gold)}.syn-legend{font-size:.72rem;color:var(--muted);margin:-2px 0 4px}.members{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}.mem{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;padding:1px 7px 1px 3px;border-radius:5px;border:1px solid var(--line);line-height:1.5}.mem i{font-style:normal;font-size:.68rem;font-weight:700;min-width:15px;text-align:center;border-radius:3px;background:var(--c);color:#fff}.mem.field{border-color:var(--gold);background:#ddae4524;color:var(--ink)}.mem.bench{border-style:dashed;border-color:var(--ink);color:var(--ink)}.mem.none{opacity:.45}.syn .tier{font-size:.8rem;color:var(--muted)}.syn .tier.on{color:var(--gold)}.ghost-line{display:flex;justify-content:space-between;gap:8px;font-size:.88rem}.ghost-line .gname{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border-radius:4px}.ghost-line .gname:hover{color:var(--gold)}.ghost-head{display:flex;align-items:center;gap:10px}.ghost-portrait{width:64px;height:64px;object-fit:contain;flex:none;background:var(--panel-2);border-radius:8px}.ghost-head h3{margin:0}.ghost-traits{display:grid;gap:4px;font-size:.85rem;margin:6px 0}.lore{margin-top:6px;padding:6px 8px;border-left:2px solid var(--gold);background:#ddae4512;font-size:.85rem;font-style:italic}.gicon{width:26px;height:26px;object-fit:contain;flex:none}.tag{font-size:.72rem;padding:0 6px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);margin-left:4px}.tag.spirit{color:var(--teal)}button.tag{padding:0 6px;font-size:.72rem;line-height:1.5;border-radius:999px;cursor:help}button.tag.on{background:#ddae4526;border-color:var(--gold);color:var(--gold);font-weight:400}.tip{font-size:.8rem;color:var(--muted);padding:4px 8px;margin:2px 0 4px;border-left:2px solid var(--gold);background:#ddae4512}.tip b{color:var(--ink)}.live{margin:4px 0;font-size:.85rem;font-variant-numeric:tabular-nums}.live b{color:var(--cinnabar)}.warn{margin-top:8px;padding:6px 8px;border-radius:6px;font-size:.82rem;line-height:1.45;border:1px solid var(--cinnabar);background:#e5604f1f}.warn b{color:var(--cinnabar)}.warn.ok{border-color:var(--teal);background:#5dc0b71a}.warn.ok b{color:var(--teal)}.shop-card.seer{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}.shop-card{position:relative}.shop-card.owned,.shop-card.owned-elite{border-color:#c9cfd6}.shop-card.promo{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 12px #e2b23f8c;animation:promo-glow 1.6s ease-in-out infinite}@keyframes promo-glow{50%{box-shadow:0 0 0 1px var(--gold),0 0 4px #e2b23f40}}.own-badge{position:absolute;top:-8px;right:6px;font-size:.68rem;font-weight:600;line-height:1.4;padding:0 6px;border-radius:999px;background:#c9cfd6;color:#111418;pointer-events:none}.shop-card.promo .own-badge{background:var(--gold)}.shop-card.shop-card{border-left:4px solid var(--c, #888)}.kv{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;font-size:.8rem;margin:6px 0;font-variant-numeric:tabular-nums}.kv b{display:block;font-size:.9rem}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center}.overlay[hidden]{display:none}.start-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;padding:16px;overflow-y:auto;overscroll-behavior:contain;grid-template-columns:minmax(0,1fr);background:radial-gradient(ellipse at 50% 30%,#2a1f24 0%,var(--bg) 70%)}.start-screen[hidden]{display:none}html:has(.start-screen:not([hidden])){overflow:hidden}.start-box{width:min(520px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center;text-align:center}.start-box h1{margin:0;font-size:2.3rem;letter-spacing:.02em;color:var(--gold)}.start-box p{margin:0}.start-ghosts{display:flex;justify-content:center;gap:4px;max-width:100%}.start-ghosts img{flex:0 1 64px;min-width:0;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}.start-result{padding:6px 12px;border-radius:6px;border:1px solid var(--line);background:var(--panel);font-size:.9rem}.start-play{font-size:1.15rem;padding:10px 44px}.start-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.start-buttons .start-play:not(.primary){padding:10px 24px;border-color:var(--gold)}.start-copy{margin-left:8px;padding:1px 10px;font-size:.8rem}.start-result .start-feedback,.overlay .box .start-feedback{display:block;margin-top:8px;font-size:.85rem}.start-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}.start-feedback{color:var(--ink);text-decoration:none;padding:4px 14px;border-radius:6px;border:1px solid var(--gold);background:#ddae451a}.start-feedback:hover{background:#ddae4533}.start-privacy{margin:0;max-width:420px}.start-seed{display:grid;gap:4px;width:100%}.start-seed input{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 10px;text-align:center}.start-seed input:focus{outline:none;border-color:var(--gold)}.start-how{margin:0;padding:12px 16px 12px 32px;text-align:left;font-size:.88rem;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px;display:grid;gap:4px}.overlay .box.relic-box{max-width:860px;width:calc(100% - 32px);text-align:left}.relic-box h2{margin:0;font-size:1.15rem}.relic-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.relic-card{display:grid;gap:6px;align-content:start;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}.relic-card.on{border-color:var(--gold)}.overlay .box.strategy-box{max-width:1000px}.relic-card.plain{border-style:dashed;background:var(--panel)}.relic-card.plain .rn{color:inherit}.relic-card .rn{font-weight:700;color:var(--gold)}.relic-card .rd{font-size:.88rem;line-height:1.45}.relic-card>button{justify-self:start}.relic-picks{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.relic-picks .muted{width:100%}#wave .chip-list+h3{margin-top:12px}.relic-line{padding:4px 0;border-bottom:1px solid var(--line)}.relic-line:last-child{border-bottom:0}.overlay .box{background:var(--panel);border:1px solid var(--gold);border-radius:10px;padding:24px;display:grid;gap:12px;max-width:420px;text-align:center}#board canvas,#bench .card{touch-action:none}body.dragging{-webkit-user-select:none;user-select:none;cursor:grabbing}body.dragging .shop-row{outline:2px dashed var(--cinnabar);outline-offset:-2px}body.dragging .bench-row{outline:2px dashed var(--line);outline-offset:-2px}.shop-row.drop-hover{background:#e5604f24}.bench-row.drop-hover{outline-color:var(--gold);background:#ddae4514}.drag-ghost{position:fixed;left:0;top:0;z-index:50;pointer-events:none;background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--c, #888);border-radius:6px;padding:4px 10px;font-weight:600;box-shadow:0 6px 18px #00000080}.coach{position:fixed;z-index:40;display:grid;gap:10px;padding:12px 14px;border:1px solid var(--gold);border-radius:10px;background:var(--panel-2);box-shadow:0 8px 28px #0000008c;font-size:.92rem;line-height:1.5}.coach[hidden]{display:none}.coach-actions{display:flex;justify-content:flex-end;gap:8px}.coach-skip{background:transparent;border-color:transparent;color:var(--muted)}.tut-focus{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px;animation:tut-pulse 1.4s ease-in-out infinite}@keyframes tut-pulse{50%{outline-color:#ddae4540}}@media(prefers-reduced-motion:reduce){.tut-focus{animation:none}}.codex-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;overflow-y:auto;overscroll-behavior:contain;padding:16px;background:var(--bg)}.codex-screen[hidden]{display:none}html:has(.codex-screen:not([hidden])){overflow:hidden}.codex-box{max-width:1200px;margin:0 auto;display:grid;gap:14px}.codex-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}.codex-top h2{margin:0;color:var(--gold);font-size:1.4rem}.codex-tabs{display:flex;gap:6px;margin-right:auto}.codex-tab{padding:5px 14px;border:1px solid var(--line);border-radius:999px;color:inherit;text-decoration:none}.codex-tab.on{border-color:var(--gold);background:#ddae451f}.codex-main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}.codex-list{grid-column:1;grid-row:1;display:grid;gap:16px}.codex-detail{grid-column:2;grid-row:1;position:sticky;top:0;display:grid;gap:6px;max-height:calc(100vh - 32px);overflow-y:auto}.codex-detail .ghost-portrait{width:96px;height:96px}.codex-actions{display:flex;justify-content:flex-end;margin-top:4px}.codex-section h3{margin:0 0 8px;font-size:1rem;border-left:4px solid var(--c);padding-left:8px}.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}.codex-card{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:8px;background:var(--panel);color:inherit;text-decoration:none}.codex-card img{grid-row:1 / 3;width:48px;height:48px;object-fit:contain}.codex-card .n{font-weight:600;font-size:.9rem}.codex-card .s{font-size:.75rem;color:var(--muted)}.codex-card .n,.codex-card .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.codex-card:hover,.codex-card.on{border-color:var(--gold)}.codex-card.on{background:var(--panel-2)}@media(max-width:800px){.codex-main{grid-template-columns:minmax(0,1fr)}.codex-list,.codex-detail{grid-column:1;grid-row:auto}.codex-detail{position:static;max-height:none}.codex-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}