:root{color-scheme:dark;--bg: #05060d;--panel: rgba(9, 12, 30, .92);--ink: #e8ecff;--dim: #8d95b8;--cyan: #2ee8ff;--pink: #ff3db8;--gold: #ffd23a;--display: "ZCOOL QingKe HuangYou", "PingFang SC", "Microsoft YaHei", sans-serif;--tech: "Chakra Petch", "PingFang SC", "Microsoft YaHei", sans-serif;--body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}[hidden]{display:none!important}body{background:var(--bg);color:var(--ink);font-family:var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}#stage{position:absolute;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:grid;place-items:center}#box{position:relative;--s: 1}#cv{display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.topbtns{position:absolute;top:calc(10px * var(--s));right:calc(12px * var(--s));display:flex;gap:calc(6px * var(--s))}.ibtn{font:700 calc(10px * var(--s)) / 1 var(--tech);color:var(--dim);background:#0a0d20cc;border:1px solid rgba(141,149,184,.35);padding:calc(6px * var(--s)) calc(8px * var(--s));cursor:pointer;letter-spacing:.04em;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}.ibtn:hover,.ibtn:focus-visible{color:var(--cyan);border-color:var(--cyan);outline:none}#toast{position:absolute;left:50%;top:calc(440px * var(--s));transform:translate(-50%,6px);opacity:0;pointer-events:none;font:600 calc(12px * var(--s)) / 1.3 var(--body);color:var(--ink);background:#0a0c1ee6;border:1px solid var(--pink);padding:calc(7px * var(--s)) calc(12px * var(--s));white-space:nowrap;transition:opacity .18s,transform .18s}#toast.on{opacity:1;transform:translate(-50%)}#banner{position:absolute;left:calc(10px * var(--s));right:calc(10px * var(--s));top:calc(360px * var(--s));text-align:center;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}#banner.on{opacity:1;transform:none}#banTitle{font:calc(30px * var(--s)) / 1.1 var(--display);color:#fff;text-shadow:0 0 calc(14px * var(--s)) var(--cyan)}#banTip{margin-top:calc(6px * var(--s));font:600 calc(12px * var(--s)) / 1.45 var(--body);color:var(--cyan);padding-inline:calc(30px * var(--s));text-wrap:balance}.ov{position:absolute;inset:0;display:grid;place-items:center;background:#04050eb8;backdrop-filter:blur(2px)}.card{width:calc(340px * var(--s));background:var(--panel);border:1px solid rgba(46,232,255,.45);position:relative;padding:calc(22px * var(--s)) calc(22px * var(--s)) calc(20px * var(--s));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}.card:before{content:"";position:absolute;left:calc(18px * var(--s));top:0;width:calc(46px * var(--s));height:2px;background:var(--cyan)}.eyebrow{font:700 calc(9px * var(--s)) / 1 var(--tech);letter-spacing:.22em;color:var(--cyan)}.eyebrow.pink{color:var(--pink)}.title{font:calc(54px * var(--s)) / 1 var(--display);margin-top:calc(8px * var(--s));color:#fff;text-shadow:0 0 calc(8px * var(--s)) rgba(255,61,184,.9),0 0 calc(26px * var(--s)) rgba(255,61,184,.5)}.title2{font:calc(38px * var(--s)) / 1.05 var(--display);color:#fff;margin-top:calc(6px * var(--s));text-shadow:0 0 calc(16px * var(--s)) var(--cyan)}.title2.pink{text-shadow:0 0 calc(16px * var(--s)) var(--pink)}.rules{list-style:none;margin:calc(16px * var(--s)) 0 0;padding:0;display:grid;gap:calc(9px * var(--s))}.rules li{display:grid;grid-template-columns:calc(22px * var(--s)) 1fr;gap:calc(8px * var(--s));align-items:start;font:500 calc(12.5px * var(--s)) / 1.5 var(--body)}.rules b{color:var(--gold);font-weight:700}.rules .k{font:800 italic calc(13px * var(--s)) / 1.4 var(--tech);color:var(--cyan)}.chips{display:grid;grid-template-columns:1fr 1fr;gap:calc(6px * var(--s));margin-top:calc(16px * var(--s))}.chip{display:flex;white-space:nowrap;min-width:0;align-items:center;gap:calc(8px * var(--s));text-align:left;cursor:pointer;color:var(--ink);background:#ffffff08;border:1px solid rgba(141,149,184,.25);padding:calc(8px * var(--s)) calc(10px * var(--s));font:500 calc(12px * var(--s)) / 1 var(--body)}.chip b{font:700 calc(10px * var(--s)) / 1 var(--tech);color:var(--cyan);letter-spacing:.06em}.chip i{margin-left:auto;font-style:normal;color:var(--gold);letter-spacing:0;font-size:calc(10px * var(--s))}.chip:hover,.chip:focus-visible{border-color:var(--cyan);outline:none;background:#2ee8ff0f}.btns{display:grid;gap:calc(8px * var(--s));margin-top:calc(18px * var(--s))}.btn{cursor:pointer;font:calc(20px * var(--s)) / 1 var(--display);letter-spacing:.08em;color:var(--bg);background:var(--cyan);border:0;padding:calc(12px * var(--s)) 0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 20px #2ee8ff66}.btn:hover,.btn:focus-visible{background:#fff;outline:none}.btn.alt{background:transparent;color:var(--ink);border:1px solid rgba(141,149,184,.45);box-shadow:none}.btn.alt:hover,.btn.alt:focus-visible{color:var(--cyan);border-color:var(--cyan)}.btn.offer{background:linear-gradient(90deg,var(--cyan),var(--pink) 50%,var(--gold))}.note{font:500 calc(10px * var(--s)) / 1.4 var(--body);color:var(--dim);margin:calc(6px * var(--s)) 0 0;text-align:center}.meta{font:600 calc(10px * var(--s)) / 1 var(--tech);color:var(--dim);letter-spacing:.1em;margin-top:calc(14px * var(--s))}.stars{display:flex;gap:calc(10px * var(--s));margin-top:calc(14px * var(--s))}.star{width:calc(34px * var(--s));height:calc(34px * var(--s));background:#8d95b840;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.star.lit{background:var(--gold);filter:drop-shadow(0 0 6px rgba(255,210,58,.8));animation:pop .45s backwards}.star.lit:nth-child(2){animation-delay:.12s}.star.lit:nth-child(3){animation-delay:.24s}@keyframes pop{0%{transform:scale(.2);opacity:0}}.stats{display:grid;grid-template-columns:repeat(3,1fr);row-gap:calc(10px * var(--s));gap:calc(8px * var(--s));margin-top:calc(16px * var(--s))}.stats div{border-top:1px solid rgba(141,149,184,.25);padding-top:calc(7px * var(--s))}.stats span{display:block;font:600 calc(9.5px * var(--s)) / 1 var(--body);color:var(--dim)}.stats strong{display:block;margin-top:calc(5px * var(--s));font:italic 800 calc(20px * var(--s)) / 1 var(--tech);color:#fff;font-variant-numeric:tabular-nums}.reason{font:500 calc(13px * var(--s)) / 1.55 var(--body);margin:calc(10px * var(--s)) 0 0}@media(prefers-reduced-motion:reduce){.star.lit{animation:none}#toast,#banner{transition:none}}.debug{position:absolute;left:calc(12px * var(--s));top:calc(66px * var(--s));z-index:20;width:min(260px,calc(100vw - 16px));background:#060814f0;border:1px solid rgba(255,210,58,.5);font:500 12px/1.3 var(--body);color:var(--ink)}.debug:not([open]){width:auto}.debug summary{cursor:pointer;padding:4px 8px;font:700 11px/1 var(--tech);color:var(--gold);letter-spacing:.1em}.debug-body{display:grid;gap:8px;padding:4px 10px 10px}.debug-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}.debug-row input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--gold)}.debug-row output{font:700 11px/1 var(--tech);color:var(--gold);font-variant-numeric:tabular-nums}.debug-row.check{grid-template-columns:auto 1fr}.debug-reset{cursor:pointer;font:600 12px/1 var(--body);color:var(--ink);background:transparent;border:1px solid rgba(141,149,184,.45);padding:7px}.debug-reset:hover,.debug-reset:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}.rules .sp{display:inline-flex;gap:.3em;flex-wrap:wrap}.rules .c{color:var(--cyan)}.rules .m{color:var(--pink)}.rules .y{color:var(--gold)}.rules .g{color:#4dff8a}.rules .h{color:#c9d6ff}.rules .v{color:#b07bff}.eyebrow.gold{color:var(--gold)}.title2.gold{text-shadow:0 0 calc(16px * var(--s)) var(--gold)}.stats strong.gold{color:var(--gold)}.pick{width:calc(392px * var(--s));text-align:center}.pick .title2{margin-bottom:calc(14px * var(--s))}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(8px * var(--s))}.ucard{--c: var(--cyan);display:grid;grid-template-rows:auto auto auto 1fr auto auto;justify-items:center;gap:calc(6px * var(--s));min-height:calc(210px * var(--s));padding:calc(14px * var(--s)) calc(8px * var(--s)) calc(10px * var(--s));background:var(--panel);border:1px solid var(--c);color:var(--ink);cursor:pointer;text-align:center;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:inset 0 0 calc(24px * var(--s)) color-mix(in srgb,var(--c) 18%,transparent);animation:deal .35s backwards;font:inherit}.ucard:nth-child(2){animation-delay:.06s}.ucard:nth-child(3){animation-delay:.12s}.ucard.rare{--c: var(--gold)}.ucard:hover,.ucard:focus-visible{outline:none;transform:translateY(-3px);box-shadow:inset 0 0 calc(30px * var(--s)) color-mix(in srgb,var(--c) 35%,transparent),0 0 18px color-mix(in srgb,var(--c) 40%,transparent)}.ucard .tag{font:700 calc(8px * var(--s)) / 1 var(--tech);letter-spacing:.16em;color:var(--c)}.ucard .ic{font:800 calc(30px * var(--s)) / 1.1 var(--tech);color:var(--c);text-shadow:0 0 12px var(--c)}.ucard .nm{font:calc(19px * var(--s)) / 1.1 var(--display);color:#fff}.ucard .ds{font:500 calc(11px * var(--s)) / 1.5 var(--body);color:var(--ink);text-wrap:balance}.ucard .pips{display:flex;gap:calc(3px * var(--s))}.ucard .pips i{width:calc(7px * var(--s));height:calc(7px * var(--s));background:#8d95b84d}.ucard .pips i.on{background:var(--c)}.ucard .pips i.new{background:#fff;box-shadow:0 0 6px var(--c)}.ucard .hn{font:500 calc(9.5px * var(--s)) / 1.4 var(--body);color:#e8ecff8c;text-wrap:balance}.ucard.evo{border-color:var(--gold);background:linear-gradient(180deg,#ffd23a29,#0d1128f2 60%)}.ucard.evo .tag{color:var(--gold);font-size:calc(10px * var(--s))}.ucard.evo .hn{color:var(--gold)}.ucard.evo .ic{animation:evoPulse 1.2s ease-in-out infinite}@keyframes evoPulse{50%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes deal{0%{transform:translateY(16px) scale(.92);opacity:0}}.best{margin-top:calc(14px * var(--s));font:600 calc(11px * var(--s)) / 1.4 var(--tech);color:var(--dim);letter-spacing:.04em}.best b{color:var(--gold)}.record{margin-top:calc(10px * var(--s));font:calc(18px * var(--s)) / 1 var(--display);color:var(--gold);text-shadow:0 0 10px var(--gold)}.meta-shop{display:grid;gap:calc(6px * var(--s));margin-top:calc(14px * var(--s))}.meta-shop .hd{display:flex;justify-content:space-between;font:700 calc(9px * var(--s)) / 1 var(--tech);letter-spacing:.14em;color:var(--dim)}.meta-shop .hd b{color:var(--gold);letter-spacing:.04em;font-size:calc(11px * var(--s))}.mrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:calc(8px * var(--s));padding:calc(7px * var(--s)) calc(10px * var(--s));border:1px solid rgba(141,149,184,.25);background:#ffffff08}.mrow .n{font:600 calc(12px * var(--s)) / 1.2 var(--body)}.mrow .n small{display:block;color:var(--dim);font-size:calc(10px * var(--s));font-weight:500}.mrow button{font:700 calc(11px * var(--s)) / 1 var(--tech);color:var(--bg);background:var(--gold);border:0;cursor:pointer;padding:calc(7px * var(--s)) calc(10px * var(--s));clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}.mrow button:disabled{background:#8d95b84d;color:var(--dim);cursor:default}.mrow button:not(:disabled):hover,.mrow button:not(:disabled):focus-visible{background:#fff;outline:none}@media(prefers-reduced-motion:reduce){.ucard,.ucard.evo .ic{animation:none}}.diff{display:flex;align-items:center;justify-content:center;gap:calc(14px * var(--s));margin-top:calc(12px * var(--s))}.diff span{display:grid;justify-items:center;font:600 calc(12px * var(--s)) / 1.3 var(--tech);color:var(--ink);min-width:calc(120px * var(--s))}.diff b{color:var(--gold);font-size:calc(15px * var(--s))}.diff small{color:var(--dim);font-size:calc(10px * var(--s))}.diff button{width:calc(34px * var(--s));height:calc(34px * var(--s));background:transparent;border:1px solid var(--cyan);color:var(--cyan);font:inherit;cursor:pointer}.diff button:disabled{opacity:.25;cursor:default}.won-info{margin-top:calc(14px * var(--s));font:600 calc(13px * var(--s)) / 1.6 var(--tech);color:var(--ink);text-align:center}.won-info b{color:var(--gold)}.won-hint{margin-top:calc(10px * var(--s));font:500 calc(11px * var(--s)) / 1.5 var(--body);color:var(--dim);text-align:center}.btn.ghost{background:transparent;color:var(--ink);border-color:var(--dim)}#ovOver.won .eyebrow,#ovOver.won .title2{color:var(--gold);text-shadow:0 0 12px var(--gold)}.ucard.chest{background:linear-gradient(180deg,#ffd23a1f,#0d1128f2 60%)}
