:root{color-scheme:light;--bg: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);--panel: rgba(255, 255, 255, 0.9);--header-bg: rgba(0, 0, 0, 0.7);--surface: #ffffff;--surface-2: #f8f9fb;--surface-3: #e9ecef;--text: #333333;--text-muted: #666666;--text-soft: #888888;--border: #dddddd;--border-soft: #eeeeee;--brand: #1a2a6c;--brand-hover: #2a3a9c;--brand-text: #1a2a6c;--gold: #fdbb2d;--gold-deep: #b87900;--patreon: #ff424d;--patreon-hover: #ff5c66;--discord: #5865f2;--surface-ok: #f3fbf5;--ok-text: #1f7a4d;--surface-warn: #fff6e0;--warn-text: #8a5a00;--surface-danger: #ffebee;--danger-text: #b21f1f}html[data-theme=dark]{color-scheme:dark;--bg: linear-gradient(135deg, #0b1130, #2a0d0d, #3a2c0a);--panel: rgba(17, 19, 30, 0.92);--header-bg: rgba(0, 0, 0, 0.55);--surface: #1b1e2b;--surface-2: #232736;--surface-3: #2c3142;--text: #e8eaf2;--text-muted: #a8aec2;--text-soft: #8c93a8;--border: #363c50;--border-soft: #2a2f40;--brand: #33478f;--brand-hover: #4358b5;--brand-text: #93a6e8;--surface-ok: #16301f;--ok-text: #6ede9f;--surface-warn: #332708;--warn-text: #f0c063;--surface-danger: #331417;--danger-text: #ff9090}body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg);will-change:transform;pointer-events:none}.loading{display:flex;justify-content:center;align-items:center;height:100px;font-size:1.2rem;color:var(--brand-text)}.error{color:var(--danger-text);padding:15px;background-color:var(--surface-danger);border-radius:8px;margin:10px 0;text-align:center}.logo{max-height:60px;width:auto}.logo-home{padding:0;border:none;background:none;cursor:pointer;line-height:0;border-radius:8px;transition:transform 0.2s ease}.logo-home:hover{transform:scale(1.04)}.logo-home:focus-visible{outline:3px solid var(--gold);outline-offset:4px}@media (max-width: 768px){.logo{max-height:50px}}@media (max-width: 480px){.logo{max-height:40px}}*{margin:0;padding:0;box-sizing:border-box;font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}body{background:var(--bg);color:var(--text);min-height:100vh;padding:20px}.screen{display:none;width:100%;max-width:1200px;margin:0 auto}.screen.active{display:block}#game-screen>header{background:var(--header-bg);color:white;padding:15px 20px;border-radius:10px 10px 0 0;display:flex;justify-content:space-between;align-items:center}.user-info{display:flex;align-items:center;gap:15px}main{background:var(--panel);padding:20px;border-radius:0 0 10px 10px}.pack-section,.collection-section{margin-bottom:30px}.pack-section h2,.collection-section h2{color:var(--brand-text);margin-bottom:15px}#pack-timer{font-size:1.2rem;margin-bottom:15px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:25px;margin-top:20px}.card{background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:transform 0.3s;position:relative;display:flex;flex-direction:column;content-visibility:auto;contain-intrinsic-size:260px 455px}.card:hover{transform:translateY(-5px)}.card-rarity{padding:8px 0;text-align:center;font-weight:bold;font-size:0.9rem;color:white;text-shadow:1px 1px 2px rgba(0,0,0,0.7);width:100%;order:1}.card-img{width:100%;height:auto;aspect-ratio:5 / 6;display:flex;justify-content:center;align-items:center;overflow:hidden;flex:none;order:2}.card-img img{width:100%;height:100%;object-fit:cover}.card-info{padding:15px;text-align:center;flex-grow:1;order:3}.card-name,.card-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-name{font-weight:bold;margin-bottom:8px;font-size:calc(1.1rem * var(--fit, 1))}.card-artist{font-style:italic;color:var(--text-muted);margin-bottom:8px;font-size:calc(1rem * var(--fit, 1))}.card-id{font-size:0.9rem;color:var(--text);font-variant-numeric:tabular-nums;margin-top:8px;background-color:var(--surface-2);padding:4px 8px;border-radius:4px;display:inline-block;border:1px solid var(--border);box-shadow:0 2px 4px rgba(0,0,0,0.1);font-weight:bold}.card-preview .card .card-info{padding:10px}.card-preview .card .card-id{font-size:0.8rem;margin-top:3px;background-color:var(--surface-2)}.common .card-rarity{background-color:#707070}.uncommon .card-rarity{background-color:#007a33}.rare .card-rarity{background-color:#0050a0}.epic .card-rarity{background-color:#6a00a0}.legendary .card-rarity{background-color:#d35400}.special .card-rarity{background-color:#c40000}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center;z-index:1000}.modal.active{display:flex}.modal-content{background:var(--surface);padding:30px;border-radius:15px;max-width:95%;width:90%;max-height:90vh;overflow-y:auto;text-align:center}.modal-content h2{text-align:center;margin-bottom:20px;color:var(--brand-text)}#close-modal{display:block;margin:20px auto 0;padding:10px 20px;background:#1a2a6c;color:white;border:none;border-radius:5px;cursor:pointer}.dialog-content{max-width:420px}#app-dialog-title{font-size:1.2rem}#app-dialog-message{white-space:pre-line;line-height:1.5;color:var(--text)}.dialog-ok-btn{background:#1a2a6c;color:white}.dialog-ok-btn:hover{background:#142055}.dialog-cancel-btn{background:#f44336;color:white}.dialog-cancel-btn:hover{background:#d32f2f}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card{animation:fadeIn 0.5s ease-out}@media (max-width: 768px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px}.card{width:100%;max-width:180px;margin:0 auto}.card-info{padding:10px}.card-name{font-size:calc(0.9rem * var(--fit, 1));margin-bottom:5px}.card-rarity{font-size:0.8rem}.card-artist{font-size:calc(0.8rem * var(--fit, 1));margin-bottom:5px}.card-count{font-size:0.8rem;padding:2px 6px}body{padding:12px}main,.tab-content{padding:12px}.modal-content{width:96%;padding:18px}#game-screen>header{flex-direction:column;gap:10px;padding:12px}.user-info{flex-wrap:wrap;justify-content:center;width:100%;gap:8px 10px}#username-display{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex-direction:column;--tabs-pad: 10px}.tabs .tab-button,.tabs .nav-group-btn{width:100%;text-align:center;padding:10px 15px;font-size:0.9rem}.tabs .nav-group{position:static}.tabs .nav-group-menu{position:static;min-width:0;border-left:none;border-right:none;border-radius:0;box-shadow:none}.tabs .nav-group-menu .tab-button{text-align:center;white-space:normal}.tabs .nav-group-menu .nav-main{justify-content:center}.leaderboard-item{flex-direction:row;align-items:center}.leaderboard-count{align-self:center}}@media (max-width: 480px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.card{max-width:165px}body{padding:8px}#game-screen>header{padding:10px 8px}.user-info{gap:8px}.user-info .user-avatar{width:32px;height:32px}.user-info #username-display{font-size:0.95rem}.user-info .notif-bell{width:34px;height:34px;font-size:1rem}.user-info .theme-toggle{font-size:0.95rem}}.tabs{display:flex;flex-wrap:wrap;background:var(--header-bg);padding:0 var(--tabs-pad, 20px);border-bottom:2px solid var(--gold);position:relative}.nav-group{position:relative}.nav-group-btn{padding:12px 24px;background:none;color:white;border:none;cursor:pointer;font-size:1rem;font-weight:bold;transition:background 0.3s}.nav-group-btn::after{content:"▾";margin-left:7px;font-size:0.8em;display:inline-block;transition:transform 0.2s}.nav-group.open .nav-group-btn::after{transform:rotate(180deg)}.nav-group-btn:hover{background:rgba(253,187,45,0.3)}.nav-group-btn.active{color:var(--gold);box-shadow:inset 0 -4px 0 var(--gold)}.nav-group-menu{display:none;position:absolute;top:100%;left:0;z-index:30;min-width:100%;flex-direction:column;background:#1c1c1c;border:1px solid var(--gold);border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);overflow:hidden}.nav-group.open .nav-group-menu{display:flex}.nav-group-menu .nav-main{display:flex;align-items:center;gap:10px}.nav-tag{padding:2px 8px;border:1px solid rgba(253,187,45,0.75);border-radius:999px;color:var(--gold);font-size:0.62rem;font-weight:900;letter-spacing:0.16em;text-transform:uppercase;line-height:1.4}.tab-button.active .nav-tag{border-color:rgba(42,26,0,0.6);color:#2a1a00}.nav-group-menu .tab-button{width:100%;text-align:left;white-space:nowrap;padding:11px 20px;font-size:0.95rem}.tab-button{padding:12px 24px;background:none;color:white;border:none;cursor:pointer;font-size:1rem;font-weight:bold;transition:background 0.3s}.tab-button.active{background:var(--gold);color:#333}.tab-button:hover:not(.active){background:rgba(253,187,45,0.3)}.tab-button.tab-support{color:#ff8a92}.tab-button.tab-support:hover:not(.active){background:rgba(255,66,77,0.28)}.tab-button.tab-support.active{background:var(--patreon);color:#2a1410}.tab-content{display:none;background:var(--panel);padding:20px;border-radius:0 0 10px 10px}.tab-content.active{display:block}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #1a2a6c;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.hidden{display:none!important}.avatar-options{display:grid;grid-template-columns:repeat(3,max-content);gap:16px;justify-content:center}.avatar-options .avatar-option{width:76px;height:76px;padding:0;border-radius:50%;overflow:hidden;cursor:pointer;background:none;border:3px solid var(--border);opacity:0.6;transition:transform 0.15s,border-color 0.15s,opacity 0.15s,box-shadow 0.15s}.avatar-options .avatar-option img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}.avatar-options .avatar-option:hover{transform:scale(1.06);opacity:0.9}.avatar-options .avatar-option.selected{opacity:1;border-color:var(--gold);box-shadow:0 0 0 3px rgba(253,187,45,0.55);transform:scale(1.08)}.user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:var(--surface)}.leaderboard-player{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;justify-content:flex-start}.leaderboard-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:var(--surface)}.leaderboard-player .leaderboard-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 480px){.leaderboard-avatar{width:28px;height:28px}}.fi{display:inline-block;width:1.15em;height:1.15em;vertical-align:-0.2em;flex:none;overflow:visible}img.fi-img{object-fit:contain}.league-chip{--league: #2e8b6e;display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:var(--league);color:#fff;font-size:0.75rem;font-weight:800;letter-spacing:0.02em;line-height:1.5;white-space:nowrap;vertical-align:middle}.league-slim{--league: #2e8b6e;--league-glow: #2fd39a;--league-ink: #23785c}.league-pudgy{--league: #3f6fb5;--league-glow: #5b9bff;--league-ink: #2f5c9e}.league-chubby{--league: #7a4bb0;--league-glow: #b57bff;--league-ink: #6a3ba3}.league-fat{--league: #cf5f1a;--league-glow: #ff8a3d;--league-ink: #b04e12}.league-immobile{--league: linear-gradient(135deg, #c2185b, #e0a10a);--league-glow: #ffc23d;--league-ink: #c2185b}.rating-slot{display:flex;align-items:center;gap:12px;text-align:left}.rating-emblem{position:relative;flex:none;display:block;width:5.2em;height:6.4em;font-size:15px}.rating-emblem::before{content:"";position:absolute;left:50%;bottom:0.25em;width:5.6em;height:5.6em;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,var(--league-glow, #8c93a8) 0,transparent 70%);opacity:0.35}.rating-emblem::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:0.4em;border-radius:50%;background:var(--league-glow, #8c93a8);opacity:0.5;filter:blur(2px)}.rating-emblem .re-fig{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%}.rating-emblem.unrated .re-fig{filter:grayscale(1) opacity(0.7)}.rating-emblem.small{font-size:9px}.rating-body{display:flex;flex-direction:column;gap:2px;min-width:0}.rating-lg{font-size:0.72rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--league-glow, currentColor)}.rating-num{font-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.rating-sub{font-size:0.78rem;opacity:0.75}.rating-home{color:#fff}.rating-home .rating-lg{color:rgba(255,255,255,0.85)}