:root{--bg: #0f1a2b;--bg2: #16263a;--panel: #1c2f47;--panel2: #243b57;--text: #e8f0f8;--muted: #9fb3c8;--accent: #4fd1a0;--accent2: #7cc8f0;--gold: #f4c95d;--danger: #ff7a6a;--card-w: #fff;--card-r: #ff6a6a;--radius: 12px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased}#app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border-bottom:1px solid #ffffff14;position:sticky;top:0;z-index:10}.topbar .brand{font-weight:700;letter-spacing:.4px}.topbar .balance{margin-left:auto;font-weight:700}.icon-btn{background:var(--panel);color:var(--text);border:1px solid #ffffff1f;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:16px}.icon-btn:hover{background:var(--panel2)}.coin{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a0,var(--gold) 60%,#c99a2a);vertical-align:-2px;box-shadow:0 0 0 1px #00000030 inset}.screen{padding:18px 16px 40px;max-width:720px;width:100%;margin:0 auto;flex:1}.screen h1{font-size:30px;margin:8px 0 4px}.screen h2{font-size:22px;margin:4px 0 14px}.tagline{color:var(--muted);margin:0 0 18px}.honesty{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:18px}.empty{color:var(--muted);text-align:center;padding:24px 0}.menu{display:flex;flex-direction:column;gap:10px;margin-top:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--panel);color:var(--text);border:1px solid #ffffff1a;border-radius:var(--radius);padding:12px 16px;font-size:15px;cursor:pointer;transition:background .12s,transform .05s}.btn:hover{background:var(--panel2)}.btn:active{transform:scale(.98)}.btn.primary{background:var(--accent);color:#08251a;font-weight:700;border-color:transparent}.btn.primary:hover{background:#63dcad}.btn.small{padding:8px 12px;font-size:13px}.btn.ghost{background:transparent;border-style:dashed}.btn.danger{color:var(--danger)}.btn.active{border-color:var(--accent);color:var(--accent)}.btn[disabled]{opacity:.5;cursor:default}.item-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}.level-cell{aspect-ratio:1;border-radius:10px;border:1px solid #ffffff1f;background:var(--panel);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-size:16px}.level-cell:hover{background:var(--panel2)}.level-cell.locked{opacity:.45;cursor:default;font-size:12px}.level-num{font-weight:700}.level-stars{color:var(--gold);font-size:12px;letter-spacing:1px}.game{padding-top:12px}.game-meta{display:flex;gap:14px;align-items:center;justify-content:center;font-size:14px;color:var(--muted);margin-bottom:6px}.game-meta b{color:var(--text)}.combo.hot{color:var(--gold)}.board-wrap{display:flex;justify-content:center;overflow-x:auto;padding:6px 0}.board{position:relative}.card{position:absolute;background:var(--card-w);color:#1b2a3a;border-radius:7px;border:1px solid #00000022;box-shadow:0 1px 3px #0005;font-weight:700;user-select:none}.card-red{color:var(--card-r)}.card-corner{position:absolute;top:3px;left:5px;font-size:.34em;line-height:1}.card-suit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.62em}.card-back{background:repeating-linear-gradient(45deg,#2c4a6b,#2c4a6b 4px,#243b57 4px 8px);border:1px solid #ffffff22}.card.playable{cursor:pointer;box-shadow:0 0 0 3px var(--accent),0 2px 8px #000;animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 5px var(--accent2),0 2px 8px #000}}.game-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:10px}.card-slot{position:relative;width:64px;height:90px;background:transparent;border:none;cursor:pointer;padding:0}.stock-back{display:block;width:100%;height:100%;border-radius:7px;background:repeating-linear-gradient(45deg,#2c4a6b,#2c4a6b 4px,#243b57 4px 8px);border:1px solid #ffffff22;box-shadow:0 2px 6px #0006}.stock-count{position:absolute;right:-6px;top:-6px;background:var(--panel2);color:var(--text);border-radius:10px;font-size:12px;padding:1px 7px;font-weight:700}.card-slot[disabled]{opacity:.5;cursor:default}.waste{min-width:64px;min-height:90px}.waste-card{position:static!important}.banner{margin:10px auto 0;background:#3a2a1c;color:#ffd9a0;border:1px solid #ffb34755;border-radius:8px;padding:8px 14px;text-align:center;font-size:13px}.item-row.ads{opacity:.95}.settle{text-align:center}.stars{font-size:34px;color:var(--gold);letter-spacing:4px;margin:6px 0}.result-stats{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:15px;margin:14px 0}.result-stats .coins{color:var(--gold);font-size:20px;font-weight:700}.reveal{margin:12px auto;max-width:220px}.reveal-art{border:2px solid;border-radius:10px;overflow:hidden}.reveal-art canvas{display:block;width:100%;height:auto}.reveal-name{font-weight:700;margin-top:6px}.reveal-rarity{font-size:12px;margin-bottom:6px}.reveal-owned,.reveal.dup,.reveal.collected{color:var(--muted);margin:10px 0}.collect-progress{font-size:14px;color:var(--muted)}.collect-legend{font-size:12px;margin:4px 0 14px;color:var(--muted)}.collect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.collect-cell{border:2px solid;border-radius:10px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;align-items:center;padding:8px}.collect-art canvas{display:block;width:100%;height:auto;border-radius:6px}.collect-name{font-size:12.5px;margin-top:6px;text-align:center}.collect-cell.locked{opacity:.7}.collect-silhouette{font-size:34px;color:var(--muted);padding:34px 0}.collect-rarity{font-size:11px}.ci-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}.ci-day{background:var(--panel);border:1px solid #ffffff1f;border-radius:8px;padding:10px 4px;text-align:center;font-size:12px;color:var(--muted)}.ci-day b{display:block;margin-top:4px;color:var(--text)}.ci-day.claimed{opacity:.5;text-decoration:line-through}.ci-day.next{border-color:var(--accent);color:var(--accent)}.settings .setting-group{margin-bottom:16px}.setting-label{font-size:13px;color:var(--muted);margin-bottom:6px}.setting-row{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--panel);border:1px solid #ffffff1a;border-radius:10px;padding:12px 14px;color:var(--text);cursor:pointer;font-size:15px;margin-bottom:8px}.sw{width:40px;height:22px;border-radius:11px;background:#33465e;position:relative;transition:background .15s}.sw:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}.sw.on{background:var(--accent)}.sw.on:after{left:21px}.about{color:var(--muted);font-size:13px}.fairness-desc{color:var(--muted);font-size:13.5px;line-height:1.5}.fairness-json{background:#08131f;border:1px solid #ffffff1a;border-radius:10px;padding:12px;overflow:auto;font-size:12px;color:#b7f0d8;white-space:pre-wrap;word-break:break-all;max-height:300px}.fairness-status{margin-top:10px;font-size:14px;padding:10px;border-radius:8px}.fairness-status.ok{background:#0c2b1e;color:#7ce8b0}.fairness-status.bad{background:#3a1c1c;color:#ff9a8a}@media (max-width: 480px){.screen{padding:14px 10px 32px}.btn{padding:11px 13px;font-size:14px}.ci-grid{gap:3px}}.onboarding{position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 0%,#16263a,#0f1a2b 70%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;overflow-y:auto}.onboarding-card{background:var(--panel);border:1px solid #ffffff1f;border-radius:16px;padding:20px 22px 24px;max-width:400px;width:100%;text-align:center;position:relative}.onboarding-card h2{margin:0 0 4px;font-size:20px}.onboarding-card h3{margin:14px 0 6px;font-size:18px}.onboarding-card p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.6}.onboarding-step{color:var(--muted);font-size:12.5px;margin-bottom:10px}.onboarding-skip{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:4px 6px}.onboarding-skip:hover{color:var(--text)}.onboarding-art{display:flex;justify-content:center;background:#0b1724;border-radius:12px;padding:8px;border:1px solid #ffffff14}.onboarding-art canvas{display:block;width:100%;height:auto}.onboarding-dots{display:flex;justify-content:center;gap:7px;margin:14px 0 16px}.dot{width:8px;height:8px;border-radius:50%;background:#33465e}.dot.on{background:var(--accent)}.onboarding-nav{display:flex;gap:10px;justify-content:space-between}.onboarding-nav .btn{flex:1}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%);background:var(--panel2);color:var(--text);border:1px solid var(--accent);border-radius:20px;padding:10px 18px;font-size:14px;box-shadow:0 6px 20px #0006;z-index:50;max-width:90%;animation:rise .2s ease-out}@keyframes rise{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.hint-waste{box-shadow:0 0 0 3px var(--gold),0 2px 8px #000!important}.hint-card{box-shadow:0 0 0 3px var(--gold),0 2px 8px #000!important;animation:pulse-gold 1.2s infinite}@keyframes pulse-gold{50%{box-shadow:0 0 0 6px var(--gold),0 2px 8px #000}}.hint-stock{outline:3px solid var(--gold);border-radius:8px}.help-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.setting-chev{color:var(--muted)}
