:root{--bg:#1a1611;--panel:#221d17;--panel2:#2a241c;--line:#fff0d21a;--text:#eee6d6;--muted:#9b917f;--accent:#e0b45c;--danger:#d0583a;--g-F:#8a857c;--g-N:#d9d4c7;--g-R:#4aa8ff;--g-SR:#b65cff;--g-SSR:#ffc83d;--g-UR:#ff6fd8}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-tap-highlight-color:transparent;margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Malgun Gothic,Apple SD Gothic Neo,sans-serif;overflow:hidden}button,select,input,textarea{font:inherit;color:inherit}#app{grid-template:"hud hud"52px"left stage"1fr/290px 1fr;height:100%;display:grid}#hud{border-bottom:1px solid var(--line);background:#15120e;grid-area:hud;align-items:center;gap:16px;padding:0 14px;display:flex}#hud .brand{color:var(--accent);letter-spacing:.04em;font-weight:800}[hidden]{display:none!important}#hud .brand small{opacity:.65;letter-spacing:.08em;margin-left:4px;font-size:11px;font-weight:600}#hud .stat b{font-variant-numeric:tabular-nums}#hud .spacer{flex:1}#left{background:var(--panel);border-right:1px solid var(--line);grid-area:left;min-height:0;padding:10px;overflow-y:auto}#stage{grid-area:stage;min-width:0;min-height:0;position:relative;overflow:hidden}#cv{touch-action:none;-webkit-user-select:none;user-select:none;display:block}#stageUI{z-index:2;flex-direction:column;align-items:flex-end;gap:8px;width:168px;display:flex;position:absolute;top:10px;right:10px}#stageUI .icons{gap:6px;display:flex}.sicon{cursor:pointer;background:#1e1913e0;border:1px solid #fff0d22e;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:1px;width:81px;height:58px;padding:0;display:flex;position:relative}.sicon:hover{border-color:var(--accent)}.sicon .ico{font-size:24px;line-height:1}.sicon .sl{color:#cfc5b3;font-size:11px;font-weight:700}.sicon b{background:var(--accent);color:#1a1611;border-radius:9px;min-width:18px;padding:0 5px;font-size:11px;line-height:18px;position:absolute;top:-6px;right:-6px}#upgrades{flex-direction:column;gap:5px;width:100%;display:flex}#upgrades .tier{color:#cfc5b3;text-align:right;padding-right:2px;font-size:11px}.upg{text-align:left;cursor:pointer;background:#1e1913e0;border:1px solid #fff0d22e;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n c""v v";gap:0 6px;width:100%;height:40px;padding:3px 8px;font-size:11.5px;line-height:1.35;display:grid;overflow:hidden}.upg:hover:not(:disabled){border-color:var(--accent)}.upg:disabled{opacity:.55;cursor:default}.upg span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.upg .un{grid-area:n;font-weight:800}.upg .un i{color:var(--accent);font-size:10.5px;font-style:normal}.upg .uc{color:#e8cf8a;grid-area:c;font-weight:700}.upg .uv{color:var(--muted);grid-area:v;font-size:10.5px}.free{color:#8fe08a}.ph{color:var(--muted);margin:2px 0 10px;font-size:15px}.card,.gcard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:6px;margin-bottom:10px;padding:10px 12px;display:flex}.card.off{opacity:.8}.gcard.locked{opacity:.6}.row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.row.end{justify-content:flex-end}.row.btns{justify-content:flex-start;gap:6px}.lv{color:var(--accent);font-size:13px;font-weight:700}.dim{color:var(--muted);font-size:12.5px}.warn{color:#ff8a6a;font-size:12.5px;font-weight:600}.stats3{color:#cfc5b3;grid-template-columns:1fr 1fr 1.1fr;gap:0 8px;font-size:12.5px;display:grid}.stats3>span{white-space:nowrap;text-overflow:ellipsis;height:19px;overflow:hidden}.stats3 .warn{font-size:12.5px}.stats{color:#cfc5b3;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;display:flex}.bar{background:#0006;border-radius:3px;height:5px;overflow:hidden}.bar i{background:var(--accent);height:100%;display:block}.probs{flex-wrap:wrap;gap:4px 10px;font-size:12.5px;display:flex}.ur-text{color:var(--g-UR);font-weight:700}label{color:var(--muted);flex-direction:column;gap:3px;font-size:12.5px;display:flex}label.chk{color:var(--text);flex-direction:row;align-items:center;gap:6px}select,textarea{border:1px solid var(--line);background:#120f0b;border-radius:6px;padding:5px 6px}textarea{resize:vertical;width:100%;font-size:12px}.btn{cursor:pointer;white-space:nowrap;background:#3a3126;border:1px solid #fff0d229;border-radius:8px;padding:6px 12px;font-weight:700}.btn:hover:not(:disabled){border-color:#fff0d266}.btn:disabled{opacity:.4;cursor:default}.btn.sm{padding:4px 9px;font-size:12.5px}.btn.xs{padding:2px 7px;font-size:12px}.btn.icon{padding:5px 10px}.btn.primary{color:#1a1611;background:linear-gradient(#f0c870,#c9953a);border-color:#0000}.btn.danger{background:#5a2a1c;border-color:#8a3a22}kbd{opacity:.6;border:1px solid;border-radius:3px;margin-left:4px;padding:0 3px;font-size:10px}.badge{text-align:center;color:#15120e;background:var(--gc);border-radius:4px;min-width:30px;padding:1px 5px;font-size:11px;font-weight:900;display:inline-block}.g-F{--gc:var(--g-F)}.g-N{--gc:var(--g-N)}.g-R{--gc:var(--g-R)}.g-SR{--gc:var(--g-SR)}.g-SSR{--gc:var(--g-SSR)}.g-UR{--gc:var(--g-UR)}.badge.g-UR,.dot.g-UR{background:linear-gradient(90deg,#ff6f6f,#ffd36f,#6fff9a,#6fd8ff,#b06fff,#ff6fd8) 0 0/300% 100%;animation:2.5s linear infinite rainbow}@keyframes rainbow{to{background-position:300% 0}}.list{flex-direction:column;gap:4px;display:flex}.item{background:var(--panel2);border-radius:7px;align-items:center;gap:6px;padding:5px 8px;font-size:13px;display:flex}.item .nm{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.item .cnt{color:var(--muted);font-variant-numeric:tabular-nums}.item .val{color:#e8cf8a;font-variant-numeric:tabular-nums;font-size:12px}.empty{color:var(--muted);text-align:center;padding:30px 0}.rtab{border-collapse:collapse;width:100%;margin:0 0 8px;font-size:12px}.rtab th{padding:2px;font-weight:400}.rtab th .badge{min-width:0;padding:0 3px;font-size:9px}.rtab td{text-align:center;padding:2px}.rtab td.sn{text-align:left;text-overflow:ellipsis;white-space:nowrap;max-width:120px;padding-left:2px;overflow:hidden}.dot{color:#15120e;background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;font-style:normal;font-weight:900;display:inline-flex}.dot[class*=g-]{background:var(--gc)}#resultLayer{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.rcard{pointer-events:auto;text-align:center;background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 22%, transparent), #17130f 72%), #17130f;border:3px solid var(--rc);width:min(92%,270px);box-shadow:0 0 28px color-mix(in srgb, var(--rc) 55%, transparent);border-radius:16px;flex-direction:column;gap:6px;padding:14px 14px 16px;animation:.28s cubic-bezier(.2,1.4,.4,1) both cardIn;display:flex}.rcard.g-UR{border-image:linear-gradient(90deg,#ff6f6f,#ffd36f,#6fff9a,#6fd8ff,#b06fff) 1;border-radius:0}.rcard.failed{box-shadow:none;border-color:#6e6a63;animation:.25s ease-out both failIn}.rcard .rhead{justify-content:center;align-items:center;gap:6px;display:flex}.rcard .rhead .badge{padding:2px 10px;font-size:14px}.rcard .new{color:#1a1611;background:#9fe8ff;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:800}.rcard canvas{width:220px;max-width:100%;height:160px;margin:0 auto}.rcard .name{font-size:19px;font-weight:800}.rcard .desc{color:#cfc5b3;font-size:12px}.rcard .big{color:#a8a39a;font-size:28px;font-weight:900;animation:.4s linear quiver}.rcard .auto{color:#e8cf8a;font-weight:700}.rcard .row.btns{justify-content:center}.rcard .hint{color:#a89f8e;font-size:12px}#resultLayer.on{pointer-events:auto;cursor:pointer}@keyframes cardIn{0%{opacity:0;transform:scale(.3)translateY(40px)}to{opacity:1;transform:none}}@keyframes failIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}@keyframes quiver{0%,to{transform:none}20%{transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}#popup{z-index:20;background:#15120e;border:1px solid #fff0d240;border-radius:10px;min-width:190px;padding:10px;display:none;position:fixed;box-shadow:0 8px 24px #00000080}#popup .row{justify-content:flex-start}#modal{z-index:30;background:#0009;justify-content:center;align-items:center;padding:16px;display:none;position:fixed;inset:0}.mbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(760px,100%);max-height:100%;padding:18px 20px;position:relative;overflow-y:auto}.mbox h2{margin:0 0 8px}.mbox h3{color:var(--muted);margin:14px 0 6px;font-size:14px}.mclose{cursor:pointer;color:var(--muted);background:0 0;border:none;font-size:18px;position:absolute;top:10px;right:10px}.grid2{grid-template-columns:1fr 1fr;gap:6px 16px;display:grid}.metagrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;display:grid}.meta{background:var(--panel2);border:1px solid var(--line);border-radius:10px;justify-content:space-between;gap:8px;min-height:78px;padding:9px 11px;display:flex}.meta.owned{border-color:#ff9a5a59}.meta.maxed{border-color:#8fe08a73}.meta .ml{flex-direction:column;justify-content:space-between;gap:2px;min-width:0;display:flex}.meta .mname{font-size:14px}.meta .meff{color:var(--muted);font-size:12px}.meta .mval{color:#cfc5b3;white-space:nowrap;font-size:12.5px}.meta .mval b{color:#ffb070}.meta .mr{flex-direction:column;flex-shrink:0;justify-content:space-between;align-items:flex-end;display:flex}.shard{color:#ff9a5a;font-size:18px}.rep{padding-left:18px}#toasts{z-index:40;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;top:60px;left:50%;transform:translate(-50%)}.toast{background:#15120ef2;border:1px solid #fff0d233;border-radius:8px;padding:7px 14px;font-weight:700;transition:opacity .4s,transform .4s}.toast.big{color:#ffd0a8;border-color:#ff9a5a;font-size:16px;box-shadow:0 0 24px #ff783c66}.toast.out{opacity:0;transform:translateY(-8px)}.extinction{z-index:35;pointer-events:none;position:fixed;inset:0;overflow:hidden}.extinction canvas{display:block}.ext-title{text-align:center;opacity:0;filter:blur(8px);position:absolute;top:30%;left:0;right:0;transform:scale(2.2)}.ext-title.show{animation:.9s cubic-bezier(.2,1.4,.4,1) .25s forwards extTitle}.ext-title.out{transition:opacity .6s;opacity:0!important}.ext-title .t1{letter-spacing:.08em;color:#fff1d0;text-shadow:0 0 18px #ff8a3a,0 0 46px #ff4a1a,0 6px #5a1a08;font-size:clamp(44px,9vw,96px);font-weight:900}.ext-title .t2{color:#ffd0a8;letter-spacing:.3em;text-shadow:0 0 10px #ff6a2a;margin-top:6px;font-size:clamp(15px,2.4vw,22px)}@keyframes extTitle{0%{opacity:0;filter:blur(8px);transform:scale(2.2)}60%{opacity:1;filter:blur();transform:scale(.94)}to{opacity:1;filter:none;transform:scale(1)}}#app.quake{animation:.9s linear quake}@keyframes quake{0%,to{transform:none}10%{transform:translate(-14px,8px)rotate(-.6deg)}20%{transform:translate(12px,-10px)rotate(.5deg)}30%{transform:translate(-10px,-6px)}45%{transform:translate(8px,7px)rotate(-.3deg)}60%{transform:translate(-5px,4px)}80%{transform:translate(3px,-2px)}}.ending{z-index:50;background:0 0;position:fixed;inset:0}.ending canvas{display:block}.ending-text{text-align:center;color:#f0e2bd;padding:0 16px;font-size:18px;position:absolute;bottom:8%;left:0;right:0}.ending-text .fade{animation:1.2s ease-out both failIn}.ending .credits{background:#0a0806bf;border:1px solid #fff0d233;border-radius:14px;padding:18px 26px;display:inline-block}.ending .credits h2{color:var(--accent);margin:0 0 8px}@media (max-width:899px){#app{grid-template:"hud"46px"stage"minmax(320px,58vh)"left"1fr/1fr}#left{border-right:none;border-top:1px solid var(--line)}#hud{gap:8px;padding:0 8px;font-size:13px}#hud .brand,#hud .lbl{display:none}#hud .btn{padding:5px 8px}.grid2{grid-template-columns:1fr}#stageUI{width:150px;top:6px;right:6px}.sicon{width:72px;height:50px}.sicon .ico{font-size:20px}}.mbox.wide{width:min(980px,100%)}.devgrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;display:grid}.devgrid .card{margin:0}.recgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;display:grid}.recgrid .card{margin:0}.help h3{color:var(--accent)}.help p{margin:4px 0 8px;font-size:13.5px}.mbox.chest-wrap{background:0 0;border:none;width:min(560px,100%);padding:0;overflow:visible}.mbox.chest-wrap .mclose{color:#eee;z-index:3;top:-30px;right:4px}.chest{perspective:900px}.chest-box{background:linear-gradient(#6b4524,#4a2d14);border:3px solid #d9a441;border-radius:14px;padding:14px 12px 12px;animation:.35s ease-out both boxIn;position:relative;box-shadow:0 18px 40px #0009,inset 0 0 0 6px #0000002e}@keyframes boxIn{0%{opacity:0;transform:translateY(24px)scale(.94)}to{opacity:1;transform:none}}.chest-head{color:#ffe7b0;justify-content:space-between;align-items:baseline;padding:0 34px 8px;display:flex}.chest-head .dim{color:#d9c49a}.chest-main{align-items:center;gap:6px;display:flex}.chest .nav{color:#ffd977;cursor:pointer;background:#0000004d;border:1px solid #d9a441;border-radius:8px;flex-shrink:0;width:28px;height:64px;padding:0;font-size:16px}.chest .nav:disabled{opacity:.25;cursor:default}.slots{background:#1c130b;border-radius:8px;flex:1;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;animation:.4s ease-out .2s both slotsIn;display:grid;box-shadow:inset 0 4px 14px #000c}@keyframes slotsIn{0%{opacity:0}to{opacity:1}}.slot{aspect-ratio:1;cursor:pointer;background:radial-gradient(circle at 50% 40%,#3a2c1d,#24190f);border:1px solid #ffdc9626;border-radius:8px;flex-direction:column;justify-content:flex-end;align-items:center;gap:1px;min-width:0;padding:3px;display:flex;position:relative;overflow:hidden}.slot.has{border-color:color-mix(in srgb, var(--gc,#888) 70%, transparent);box-shadow:inset 0 0 14px color-mix(in srgb, var(--gc,#888) 25%, transparent)}.slot.sel{outline-offset:-2px;outline:2px solid #ffd977}.slot canvas{object-fit:contain;width:calc(100% - 8px);height:calc(100% - 34px);position:absolute;inset:4px 4px 30px}.slot canvas.unk{filter:brightness(0)opacity(.55)}.slot canvas.dimart{filter:grayscale()opacity(.35)}.slot .sn{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;font-weight:700;position:relative;overflow:hidden}.slot.empty .sn{color:var(--muted)}.slot .sc{flex-wrap:wrap;justify-content:center;gap:2px;min-height:14px;display:flex;position:relative}.slot .sc i{background:var(--gc);color:#15120e;border-radius:3px;padding:0 3px;font-size:9.5px;font-style:normal;font-weight:900;line-height:13px}.slot .sc i.g-UR{background:linear-gradient(90deg,#ff6f6f,#ffd36f,#6fff9a,#6fd8ff,#b06fff)}.slot.status{cursor:default;background:#2a1e12;border-color:#ffdc964d;justify-content:center;gap:2px;padding:4px 6px}.slot.status .st-h{color:#d9c49a;font-size:10.5px;font-weight:700}.st-r{justify-content:space-between;align-items:center;width:100%;font-size:11px;display:flex}.st-r .badge{min-width:26px;padding:0 3px;font-size:9.5px}.st-r.zero{opacity:.4}.chest-detail{color:#d9c49a;flex-direction:column;gap:4px;margin:8px 34px 0;font-size:12px;display:flex}.chest-detail .item{background:#0000004d}.bulk{background:#00000059;border-radius:8px;flex-direction:column;gap:6px;margin:10px 0 0;padding:8px 10px;display:flex}.bulk-checks{flex-wrap:wrap;gap:4px 10px;display:flex}.bulk-checks .chk{gap:3px}.bulk-checks .dupchk{color:#ffe7b0;font-weight:700}.bulk .dim{color:#c8b38a}.bulk-go{align-items:center;gap:8px;display:flex}.bulk-sum b{color:#ffd977}@media (max-width:520px){.chest-head,.chest-detail{margin-left:0;margin-right:0;padding-left:4px;padding-right:4px}.chest .nav{width:22px}.slot .sn{font-size:10px}}#feed{z-index:2;pointer-events:none;flex-direction:column;gap:6px;width:230px;display:flex;position:absolute;top:104px;left:10px}.fitem{background:linear-gradient(90deg, color-mix(in srgb, var(--rc) 22%, #17130f), #17130feb);border:1px solid color-mix(in srgb, var(--rc) 70%, transparent);border-left:4px solid var(--rc);box-shadow:0 4px 14px #00000073, 0 0 14px color-mix(in srgb, var(--rc) 30%, transparent);border-radius:10px;align-items:center;gap:8px;padding:6px 10px 6px 6px;transition:opacity .5s,transform .5s;animation:.3s cubic-bezier(.2,1.3,.4,1) both feedIn;display:flex}.fitem.out{opacity:0;transform:translate(-30px)}.fitem.failed{background:#17130feb;border-color:#6e6a63 #6e6a63 #6e6a63 #8a857c;box-shadow:0 4px 14px #00000073}.fitem.g-UR{border-left:4px solid #0000;border-image:linear-gradient(#ff6f6f,#ffd36f,#6fff9a,#6fd8ff,#b06fff) 1}.fitem canvas{flex-shrink:0;width:56px;height:41px}.fitem .ft{flex-direction:column;gap:1px;min-width:0;display:flex}.fitem .fh{align-items:center;gap:4px;display:flex}.fitem .new{color:#1a1611;background:#9fe8ff;border-radius:3px;padding:0 4px;font-size:9.5px;font-weight:800}.fitem .fn{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:800;overflow:hidden}.fitem .fs{color:#cfc5b3;white-space:nowrap;font-size:11px}.fitem .fs .badge{min-width:0;padding:0 3px;font-size:9.5px}@keyframes feedIn{0%{opacity:0;transform:translate(-60px)scale(.9)}to{opacity:1;transform:none}}@media (max-width:899px){#feed{gap:4px;width:175px;top:6px;left:6px}.fitem{gap:6px;padding:4px 8px 4px 4px}.fitem canvas{width:42px;height:31px}.fitem .fn{font-size:12px}}.urcount{align-items:center;gap:4px;display:inline-flex}.urcount .badge{min-width:0;padding:0 4px;font-size:9.5px}.urcount.dim .badge{filter:grayscale(.6)opacity(.6)}.rbonus{flex-wrap:wrap;gap:4px 16px;font-size:13px;display:flex}.rbonus b{color:#8fe08a}.mtrack{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:5px;display:grid}.ms{border:1px solid var(--line);opacity:.55;background:#0000004d;border-radius:7px;flex-direction:column;align-items:center;padding:4px 2px;font-size:11px;display:flex}.ms .mn{color:var(--muted);font-weight:800}.ms .mr{white-space:nowrap;font-weight:700}.ms.got{opacity:1;background:#8fe08a1a;border-color:#8fe08a99}.ms.got .mn{color:#8fe08a}.ms.next{opacity:1;border-color:var(--accent);box-shadow:0 0 8px #e0b45c66}
