:root{--bg:#0d1226;--panel:#161d3a;--line:#2b3566;--tx:#eef1ff;--mut:#9aa6d6;--gold:#ffc83d;--purple:#b46bff;--common:#8fb4ff;--ok:#44d69a;--bad:#ff6b6b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.5}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 12px}
button.primary{background:linear-gradient(135deg,#ffb800,#ff7a00);color:#1a1200;font-weight:700;border:0}
button.ghost:hover{border-color:var(--gold)}
select,input[type=text],input[type=password],input[type=number],input[type=datetime-local],textarea{background:#0f1530;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--tx)}
.muted{color:var(--mut);font-size:13px}
.t-head{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.t-head h1{font-size:18px;margin:0;flex:1}
.t-back{color:var(--gold);text-decoration:none}
.disclaimer{background:#2a2410;color:#ffe08a;padding:8px 16px;font-size:13px;border-bottom:1px solid #5a4a14}
.hour{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:linear-gradient(90deg,#1b2552,#2a1a52)}
.hour.active{background:linear-gradient(90deg,#5a3d00,#8a5a00);box-shadow:inset 0 0 30px #ffc83d55}
.pill{padding:2px 10px;border-radius:99px;background:#33407a;font-size:12px}
.hour.active .pill{background:var(--gold);color:#241800;font-weight:700}
.count{font:700 22px ui-monospace,Consolas,monospace;margin-left:auto}
.data-warn{margin:10px 16px;padding:10px 14px;border:1px dashed var(--bad);border-radius:10px;background:#2a1520;font-size:14px}
.t-main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;padding:12px 16px}
.map-wrap{min-width:0}
.map-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.map-tools label{font-size:13px;display:flex;gap:4px;align-items:center}
.viewport{position:relative;height:68vh;min-height:360px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#0a1d33;touch-action:none;cursor:grab;user-select:none}
.viewport.drag{cursor:grabbing}
.stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.stage img{display:block;max-width:none;pointer-events:none;-webkit-user-drag:none}
.stage.blank{background:repeating-linear-gradient(0deg,#0d2a47 0 99px,#14395c 99px 100px),repeating-linear-gradient(90deg,transparent 0 99px,#14395c 99px 100px)}
.map-empty{position:absolute;inset:auto 12px 12px 12px;background:#000b;border-radius:8px;padding:8px 12px;font-size:13px;pointer-events:none}
.marker{position:absolute;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%) scale(var(--inv,1));display:grid;place-items:center;font-size:13px;padding:0;border:3px solid var(--common);background:#101a3a;cursor:pointer;z-index:2}
.marker.purple{border-color:var(--purple)}.marker.gold{border-color:var(--gold);box-shadow:0 0 10px var(--gold)}
.marker.candidate{border-style:dashed;background:#101a3a99}
.marker.candidate::after{content:"?";font-size:12px;color:#fff}
.marker.fixed::after{content:"■";font-size:10px;color:#fff}
.marker.claimed{opacity:.35;filter:grayscale(1)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--mut);margin-top:6px}
.mk{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--gold);vertical-align:middle}
.mk.cand{border-style:dashed}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 3px 0 6px}
.dot.common{background:var(--common)}.dot.purple{background:var(--purple)}.dot.gold{background:var(--gold)}
.side{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;max-height:calc(68vh + 90px);overflow:auto}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tabs button.on{background:var(--gold);color:#241800;border-color:var(--gold)}
.card{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:#10173a}
.card h4{margin:0 0 2px;font-size:14px}
.row{display:flex;gap:8px;align-items:center}
.row .ico{font-size:26px;width:40px;text-align:center;flex:none}
.row img{width:40px;height:40px;object-fit:cover;border-radius:6px}
.tag{font-size:11px;padding:1px 7px;border-radius:99px;background:#2b3566;margin-right:4px}
.tag.legendary{background:#8a5a00;color:#ffe08a}.tag.epic{background:#5b2c8a}.tag.rare{background:#1f4f8a}.tag.unconfirmed{background:#5a2030;color:#ffb3b3}.tag.boost{background:var(--gold);color:#241800}
form.stack{display:grid;gap:8px}
table{width:100%;border-collapse:collapse;font-size:13px}
td,th{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}

.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:50;padding:12px}
.modal[hidden],.flash[hidden]{display:none}
.modal-card{position:relative;width:min(440px,100%);max-height:94vh;overflow:auto;background:linear-gradient(#1c2650,#121838);border:2px solid var(--line);border-radius:18px;padding:18px;text-align:center}
.modal-card.gold{border-color:var(--gold);box-shadow:0 0 40px #ffc83d66}
.modal-card.purple{border-color:var(--purple);box-shadow:0 0 36px #b46bff66}
.close{position:absolute;right:10px;top:10px}
.rarity-tag{display:inline-block;padding:2px 14px;border-radius:99px;font-weight:700;margin-bottom:6px;background:#2b3566}
.rarity-tag.gold{background:var(--gold);color:#241800}.rarity-tag.purple{background:var(--purple);color:#1b0033}
.chest{position:relative;width:170px;height:130px;margin:12px auto;perspective:600px}
.chest .body{position:absolute;bottom:0;left:0;right:0;height:80px;border-radius:6px 6px 14px 14px;background:linear-gradient(#8a5a2b,#5a3414);border:3px solid #3a200a}
.chest .lid{position:absolute;bottom:72px;left:-4px;right:-4px;height:48px;border-radius:40px 40px 4px 4px;background:linear-gradient(#a36a34,#7a4a20);border:3px solid #3a200a;transform-origin:0 100%;transition:transform .6s cubic-bezier(.2,1.4,.4,1);z-index:2}
.chest.gold .body,.chest.gold .lid{background:linear-gradient(#ffd75e,#c8860a);border-color:#7a4d00}
.chest.purple .body,.chest.purple .lid{background:linear-gradient(#c18bff,#6b2fb3);border-color:#3a1066}
.chest .glow{position:absolute;left:50%;top:40%;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);opacity:0;background:radial-gradient(#fff,#ffc83d 40%,transparent 70%)}
.chest.charging .glow{opacity:.8;animation:pulse .6s infinite alternate}
.chest.charging{animation:shake .12s infinite}
.chest.opened .lid{transform:rotateX(70deg) translateY(-14px)}
.chest.opened .glow{opacity:1;width:260px;height:260px;transition:all .5s}
.chest.shaking{animation:shake .07s infinite}
.chest.goldlight .glow{opacity:1;width:300px;height:300px;transition:all 1s}
@keyframes pulse{to{width:120px;height:120px}}
@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-2px,1px) rotate(-.6deg)}75%{transform:translate(2px,-1px) rotate(.6deg)}}
.prompt{font-size:20px;font-weight:800;margin:6px 0}
kbd{background:#fff;color:#111;border-radius:5px;padding:0 8px}
.bar{height:14px;background:#0a0f26;border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar div{height:100%;width:0;background:linear-gradient(90deg,#ffd75e,#ff7a00)}
.hold-btn{display:none;margin:12px auto 0;width:100%;padding:16px;font-size:18px;font-weight:700;background:#ff7a00;color:#1a1200;border:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media (hover:none),(pointer:coarse){.hold-btn{display:block}}
.hold-btn[hidden]{display:none!important}
.ring{--p:0deg;width:84px;height:84px;margin:4px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) var(--p),#27305e 0)}
.ring span{width:68px;height:68px;border-radius:50%;background:#10173a;display:grid;place-items:center;font:800 30px system-ui;color:#fff}
.ring.full{box-shadow:0 0 22px var(--gold)}
.chest .drop{position:absolute;left:50%;top:30px;width:0;height:0;z-index:3;pointer-events:none}
.drop .beam{position:absolute;left:-26px;bottom:-30px;width:52px;height:170px;opacity:0;background:linear-gradient(to top,var(--beam),transparent);filter:blur(2px);transform-origin:50% 100%}
.drop .plate{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:14px;display:grid;place-items:center;overflow:hidden;font-size:34px;background:#0b1030;border:3px solid var(--beam);box-shadow:0 0 22px var(--beam);opacity:0}
.drop .plate img{width:100%;height:100%;object-fit:cover}
.drop .plate .big{font-size:36px}
.drop.go .beam{animation:beam 1.2s ease-out forwards}
.drop.go .plate{animation:itemdrop 1s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes beam{0%{opacity:0;transform:scaleY(.1)}30%{opacity:.9}100%{opacity:.55;transform:scaleY(1)}}
@keyframes itemdrop{0%{opacity:0;transform:translateY(20px) scale(.4)}35%{opacity:1;transform:translateY(-90px) scale(1.1)}60%{transform:translateY(-20px)}78%{transform:translateY(-58px)}100%{opacity:1;transform:translateY(-34px)}}
.msg{min-height:22px;margin-top:8px;font-size:13px;color:var(--mut)}.msg.err{color:var(--bad)}
.result{margin-top:10px}
.result .rw{padding:12px;border-radius:12px;background:#0d1330;border:1px solid var(--line);animation:pop .5s}
.result .big{font-size:52px}
.result img{max-width:120px;border-radius:10px}
.tokens{display:flex;gap:10px;justify-content:center;margin:10px 0}
.token{width:130px;padding:14px 6px;border-radius:14px;background:radial-gradient(#ffe48a,#d89a12);color:#3a2400;font-weight:800;animation:flip .8s both;box-shadow:0 0 24px #ffc83d}
.token:nth-child(2){animation-delay:.5s}
.token b{display:block;font-size:26px}
@keyframes flip{from{transform:rotateY(90deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle,#fff,#ffc83d 40%,#ff7a0088);animation:flash 1.4s forwards}
@keyframes flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@media (max-width:900px){.t-main{grid-template-columns:1fr;padding:8px}.viewport{height:56vh}.side{max-height:none}.count{margin-left:0}}