:root{--bg: #141a24;--panel: rgba(20, 27, 38, .88);--line: rgba(255, 255, 255, .12);--text: #e8edf4;--muted: #9aa6b6;--accent: #3d8bff;--good: #44d466;--warn: #ff6a4a;--gold: #f3c234}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;user-select:none;-webkit-user-select:none;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}.hidden{display:none!important}#view{position:fixed;top:0;right:0;bottom:0;left:0}#view canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block}#view canvas.overlay{touch-action:none}#top{position:fixed;top:0;left:0;right:0;height:44px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;pointer-events:none;background:linear-gradient(#0a0e14d9,#0a0e1400)}#top>*{pointer-events:auto}.res{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:var(--gold);text-shadow:0 1px 2px #000;min-width:110px}.ore-icon{width:14px;height:14px;background:var(--gold);transform:rotate(45deg);border-radius:2px;box-shadow:0 0 8px #f3c234cc}#clock{font-variant-numeric:tabular-nums;font-weight:600;text-shadow:0 1px 2px #000}.mid{display:flex;align-items:center;gap:12px}#groups{display:flex;gap:4px}.gb{position:relative;width:38px;height:32px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:#10151ed1;overflow:hidden;font-weight:700;font-size:13px;color:var(--text);touch-action:none;transition:transform .08s}.gb.empty{color:#ffffff59;border-style:dashed;background:#10151e73}.gb img{position:absolute;top:1px;right:2px;bottom:1px;left:9px;width:calc(100% - 11px);height:calc(100% - 2px);object-fit:contain}.gb .gn{position:absolute;left:3px;top:1px;font-size:10px;color:var(--muted);z-index:1}.gb .gc{position:absolute;right:3px;bottom:0;font-size:11px;text-shadow:0 1px 2px #000;z-index:1}.gb.on{border-color:#c8dca0d9;box-shadow:inset 0 0 0 1px #c8dca059}.gb.held,.ut.held{transform:scale(.9);border-color:var(--gold)}#panel.multi{width:auto;max-width:min(420px,calc(100vw - 160px));padding:6px}.mh{display:flex;align-items:flex-start;gap:6px}.uts{display:flex;flex-wrap:wrap;gap:4px;flex:1}.ut{position:relative;width:46px;height:46px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;overflow:hidden;touch-action:none;transition:transform .08s}.ut img{width:100%;height:100%;object-fit:contain;display:block}.ut .uti{font-size:20px;line-height:44px}.ut .utn{position:absolute;right:3px;top:1px;font-size:11px;font-weight:700;text-shadow:0 1px 2px #000}.ut .uth{position:absolute;left:3px;right:3px;bottom:3px;height:3px;background:#0000008c;border-radius:2px;overflow:hidden}.ut .uth>span{display:block;height:100%;width:100%}.acts{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}.ab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:52px;height:42px;padding:3px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#d7dde6;font-size:10px}.ab svg{width:18px;height:18px}.ab:active{background:#ffffff1f}.ab.on{color:var(--gold);border-color:#f3c23499;background:#f3c23414}.hint{color:var(--muted);font-size:10px;margin-top:5px}.ut.inf img{transform:scale(1.9) translateY(4%)}.gb.inf img{transform:scale(1.8) translateY(6%)}.tbtns{display:flex;gap:6px;min-width:110px;justify-content:flex-end}.tbtn{width:44px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-weight:700}#toasts{position:fixed;top:48px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:5}.toast{padding:6px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);transition:opacity .5s;white-space:nowrap;font-weight:600}.toast.warn{color:#ffb4a4;border-color:#ff6a4a99}.toast.good{color:#aef0bd;border-color:#44d46680}.toast.fade{opacity:0}#minimap{position:fixed;left:max(8px,env(safe-area-inset-left));bottom:8px;width:130px;height:130px;border:2px solid rgba(255,255,255,.25);border-radius:6px;background:#000;touch-action:none;image-rendering:pixelated;box-shadow:0 2px 10px #00000080}#panel{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:8px;width:min(380px,calc(100vw - 160px));max-height:calc(100vh - 60px);overflow-y:auto;padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 18px #00000073}.ph{display:flex;align-items:center;gap:10px}.pi{font-size:28px}.pt{flex:1;min-width:0}.pt b{font-size:15px}.hp{height:6px;background:#00000080;border-radius:3px;margin:4px 0 2px;overflow:hidden}.hp>div{height:100%;width:100%;background:var(--good);transition:width .15s}.sub{font-size:12px;color:var(--muted)}.sub .warn{color:var(--warn);font-weight:700}.x{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#ffffff0f;flex:none}.note{color:var(--muted);font-size:12px;margin:6px 0}.sec{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin:10px 0 4px}.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.chip{font-size:12px;padding:2px 6px;border-radius:10px;background:#ffffff14}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin-top:8px}.btn{position:relative;min-height:64px;padding:6px 4px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(#2a3446,#1f2736);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;line-height:1.15;text-align:center}.btn:active{transform:scale(.96);background:#33415a}.btn .bi{font-size:22px}.btn>span{max-width:100%;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}.btn .cost{color:var(--gold);font-weight:700}.btn .req{color:var(--muted);font-size:10px}.btn.poor .cost{color:var(--warn)}.btn.poor,.btn.locked{opacity:.55}.btn.on{border-color:var(--warn);background:linear-gradient(#5a2a2a,#3a1f1f)}.btn.wide{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;gap:8px;text-align:left;min-height:48px;padding:6px 10px}.btn.wide .req{flex:1}.btn small{color:var(--muted)}.badge{position:absolute;top:3px;right:5px;background:var(--accent);border-radius:9px;padding:0 6px;font-weight:700;font-size:11px}.queue{display:flex;gap:6px;flex-wrap:wrap}.qi{position:relative;width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#222b3a;font-size:20px;overflow:hidden}.qi.slot{display:flex;align-items:center;justify-content:center;border-style:dashed}.qp{position:absolute;left:0;right:0;bottom:0;height:5px;background:#00000080}.qp>div{height:100%;background:#c58bff;width:0}.grid.cards{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.btn.card{justify-content:flex-start;padding:5px 5px 6px;gap:3px}.card .pic{position:relative;width:100%;height:72px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,#8caac847,#00000040);overflow:hidden}.card .pic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}.card .pic .bi{font-size:34px}.card .mini{position:absolute;left:3px;top:2px;font-size:15px;line-height:1;padding:2px 3px;border-radius:6px;background:#0a0e14b3}.card .nm{font-weight:700;font-size:12px}.btn.card.locked .pic img{filter:grayscale(1) brightness(.7)}#basebar{position:fixed;left:max(8px,env(safe-area-inset-left));top:50px;bottom:148px;width:62px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;z-index:3}#basebar::-webkit-scrollbar{display:none}.bb{position:relative;flex:none;width:58px;height:58px;padding:0;border-radius:10px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 60%,rgba(120,150,185,.35),var(--panel));overflow:hidden;box-shadow:0 2px 8px #0006}.bb:active{transform:scale(.95)}.bb img{width:100%;height:100%;object-fit:contain;display:block}.bb .bbi{font-size:26px;line-height:58px}.bb .bbe{position:absolute;left:2px;top:1px;font-size:13px;line-height:1;padding:1px 2px;border-radius:5px;background:#0a0e14b3}.bb .bbq{position:absolute;right:2px;top:1px;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}.bb .bbw{display:none;position:absolute;right:2px;bottom:7px;font-size:13px;filter:drop-shadow(0 0 2px #f00)}.bb.nopower .bbw{display:block}.bb .bbp{position:absolute;left:3px;right:3px;bottom:3px;height:4px;border-radius:2px;background:#0000008c;visibility:hidden}.bb .bbp>div{height:100%;width:0;border-radius:2px;background:#c58bff}.bb.site .bbp>div{background:var(--gold)}.bb.site img{opacity:.55}.bb.sel{border:2px solid var(--good);box-shadow:0 0 10px #44d4668c}.bb.hurt{border-color:var(--warn)}.bsep{flex:none;height:2px;margin:1px 8px;border-radius:1px;background:#ffffff2e}#placebar{position:fixed;left:50%;bottom:10px;transform:translate(-50%);padding:8px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);text-align:center;z-index:4}#place-name{font-size:13px;margin-bottom:6px;color:var(--muted)}.pbtns{display:flex;gap:8px;justify-content:center}.big{--bb: #3a4558;--be: #7d8aa0;--bt: #e8edf4;flex:none;min-width:140px;height:46px;padding:0 22px;border:0;border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:linear-gradient(180deg,#ffffff24,#fff0 42%,#00000047),repeating-linear-gradient(135deg,#ffffff06 0,#ffffff06 2px,#00000008 2px,#00000008 4px),var(--bb);box-shadow:inset 0 0 0 1px var(--be),inset 0 2px #ffffff24,inset 0 -3px #0006;color:var(--bt);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.7);transition:filter .12s,transform .06s}.big:hover{filter:brightness(1.12)}.big:active{transform:translateY(1px);filter:brightness(.92)}.big.ok{--bb: #4d5c2b;--be: #a4b85a;--bt: #f1f5d6}.big.no{--bb: #43292a;--be: #b4594a;--bt: #f3cdc4}.big.disabled{opacity:.4;filter:grayscale(.6)}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10;padding:16px;background:radial-gradient(ellipse at center,#1e2a3ceb,#080a10f7)}.card{max-width:560px;width:100%;max-height:100%;overflow-y:auto;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}.card h1{margin:0;font-size:44px;letter-spacing:.12em;color:var(--gold);text-shadow:0 0 24px rgba(243,194,52,.4)}.card h1.win{color:var(--good)}.card h1.lose{color:var(--warn)}.card h2{margin:0}.tag{margin:0;color:var(--muted)}.seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.seg button{padding:10px 18px;border:0;border-radius:0;background:#222b3a;font-weight:700;letter-spacing:.06em;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);box-shadow:inset 0 0 0 1px var(--line)}.seg button.on{background:#3b3a24;color:var(--gold);box-shadow:inset 0 0 0 1px #f3c234b3}.help{text-align:left;font-size:13px;color:var(--muted);background:#ffffff0a;border-radius:10px;padding:10px 14px}.help ul{margin:6px 0 8px;padding-left:18px}.help b{color:var(--text)}.help p{margin:4px 0 10px}.opts{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center}.opt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.opt-l{min-width:104px;text-align:right;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.opt-hint{margin:-2px 0 4px;color:var(--muted);font-size:12px;min-height:1em;max-width:440px}.links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.link{background:none;border:0;color:var(--text);padding:8px 10px;font-weight:600;border-bottom:1px solid rgba(243,194,52,.5)}.link:hover{color:var(--gold)}.page{z-index:11;align-items:stretch;background:#10151e}.card.wide{max-width:980px;text-align:left;align-items:stretch;gap:10px}.page-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 8px;background:linear-gradient(#10151efa 70%,#10151e00)}.page-top h2{color:var(--gold);letter-spacing:.06em}.back{width:40px;height:40px;border-radius:8px;border:1px solid var(--line);background:#ffffff0f;font-size:16px;flex:none}.codex h3{margin:14px 0 6px;color:var(--gold);font-size:14px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid rgba(243,194,52,.25);padding-bottom:4px}.codex h3 small{color:var(--muted);text-transform:none;letter-spacing:0}.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:8px}.cx-card{background:#ffffff0b;border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}.cx-head{display:flex;gap:10px;align-items:flex-start}.cx-head b{font-size:14px}.cx-head p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.35}.cx-pic{flex:none;width:72px;height:72px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,#8caac847,#00000040);font-size:30px}.cx-pic img{width:100%;height:100%;object-fit:contain}.cx-stats{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:2px 8px;margin:0;font-size:12px}.cx-stats dt{color:var(--muted)}.cx-stats dd{margin:0;font-weight:600}.cx-tags{display:flex;flex-wrap:wrap;gap:4px}.cx-tags span{font-size:11px;padding:2px 7px;border-radius:9px;background:#ffffff12}.cx-good{color:#aef0bd}.cx-bad{color:#ffb4a4}.cx-note{color:var(--text)}#end-stats{border-collapse:collapse;min-width:280px}#end-stats td,#end-stats th{padding:5px 12px;border-bottom:1px solid var(--line)}#end-stats td:first-child{text-align:left;color:var(--muted)}@media (max-height: 480px){#minimap{width:110px;height:110px}#panel{max-height:calc(100vh - 54px);padding:7px;width:min(330px,calc(100vw - 140px))}.grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:5px;margin-top:6px}.btn{min-height:50px;font-size:10px;padding:4px 2px}.btn .bi{font-size:17px}.btn .req{font-size:9px}.btn.wide{min-height:40px}.pi{font-size:22px}.note{display:none}.x{width:30px;height:30px}.qi{width:38px;height:38px;font-size:17px}.sec{margin:6px 0 3px}.grid.cards{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.card .pic{height:46px}.card .nm{font-size:10px}#basebar{top:46px;bottom:126px;width:50px;gap:4px}.bb{width:46px;height:46px}.bb .bbi{font-size:21px;line-height:46px}.gb{width:34px;height:28px}.ut{width:40px;height:40px}.ab{height:38px;min-width:46px}.card h1{font-size:34px}.card{gap:8px}}
