:root{--bg: #0c1118;--panel: #151d28;--border: #243044;--text: #e8eef7;--muted: #8b9cb3;--accent: #3d8bfd;--accent-dim: #2563b8;--ok: #3ecf8e;--warn: #f0b429;--danger: #f07178;--card-w-sm: 3rem;--card-h-sm: 3.61rem;--card-w-md: 4.25rem;--card-h-md: 5.11rem;--card-w-lg: 4.75rem;--card-h-lg: 5.71rem}*{box-sizing:border-box}body{margin:0;font-family:Outfit,system-ui,sans-serif;background:radial-gradient(ellipse 120% 80% at 50% -20%,#1a2840 0%,var(--bg) 55%);color:var(--text);min-height:100vh;overflow-x:hidden}.app-shell{transition:opacity .4s ease}.app-shell--hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.splash-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 100% 90% at 50% 0%,#1a2840,#0c1118 60%);transition:opacity .45s ease,visibility .45s ease}.splash-screen--exit{opacity:0;visibility:hidden}.splash-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem;max-width:22rem;animation:splash-rise .7s ease-out both}@keyframes splash-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.splash-logo{width:min(240px,70vw);height:auto;margin-bottom:.5rem;animation:splash-logo-pulse 2s ease-in-out infinite}@keyframes splash-logo-pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.08)}}.splash-byline{margin:0 0 1.25rem;font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#c9a227}.splash-spinner{width:2.5rem;height:2.5rem;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:splash-spin .85s linear infinite;margin-bottom:.75rem}@keyframes splash-spin{to{transform:rotate(360deg)}}.splash-status{margin:0 0 1rem;font-size:.9rem;color:var(--muted)}.splash-progress-track{width:min(220px,80vw);height:6px;border-radius:999px;background:var(--border);overflow:hidden}.splash-progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-dim),var(--accent),#5eb0ff);animation:splash-progress 3.5s cubic-bezier(.4,0,.2,1) forwards}@keyframes splash-progress{0%{width:0%}15%{width:22%}50%{width:68%}85%{width:92%}to{width:100%}}.loading-bar-block{margin-top:.75rem}.loading-bar-label{margin:0 0 .4rem;font-size:.8rem;color:var(--muted)}.loading-bar-track{height:6px;border-radius:999px;background:var(--border);overflow:hidden}.loading-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent-dim),var(--accent))}.loading-bar-fill--indeterminate{width:40%;animation:loading-bar-slide 1.1s ease-in-out infinite}@keyframes loading-bar-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}.loading-bar-fill--pulse{width:100%;animation:loading-bar-pulse 1.2s ease-in-out infinite}@keyframes loading-bar-pulse{0%,to{opacity:.45}50%{opacity:1}}.loading-bar-block--compact{margin-top:.4rem;max-width:220px}.loading-bar-block--compact .loading-bar-label{margin-bottom:.25rem;font-size:.72rem}.loading-bar-block--compact .loading-bar-track{height:4px}.loading-bar-block--wide{margin-top:.65rem;max-width:min(520px,100%)}.loading-bar-fill--determinate{width:0;transition:width .35s ease}.variant-counter{display:inline-block;margin-left:.45rem;padding:.1rem .45rem;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--border);color:var(--muted)}.variant-chip--locked .variant-chip-tag{display:none}#root{max-width:1100px;margin:0 auto;padding:1.5rem 1.25rem 3rem}.site-header{text-align:center;margin-bottom:1.5rem}.site-title{margin:0;line-height:0}.seo-intro{margin:.65rem auto 0;max-width:38rem;font-size:.82rem;line-height:1.55;color:var(--muted);text-align:center}.site-logo{display:block;width:min(300px,78vw);height:auto;margin:0 auto .35rem}.site-byline{margin:0 0 .65rem;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#c9a227}.support-btn--center{display:inline-flex;margin:0 auto .75rem}.subtitle{color:var(--muted);font-size:.95rem;max-width:36rem;margin:0 auto}.support-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1.15rem;border-radius:8px;border:1px solid #e0b840;background:linear-gradient(145deg,#4a3c18,#2a2210);color:#ffe08a;font-size:.88rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;box-shadow:0 3px 14px #c9a22759}.support-btn:hover{transform:translateY(-1px);border-color:#e8c547;box-shadow:0 4px 14px #c9a2274d}.site-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--border);color:var(--muted);font-size:.85rem}.social-follow-btn{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .9rem;border-radius:8px;border:1px solid var(--border);background:#0003;color:var(--muted);font-size:.8rem;font-weight:600;text-decoration:none;transition:color .15s,border-color .15s,background .15s}.social-follow-btn:hover{color:var(--text);border-color:var(--muted);background:#3d8bfd1f}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1rem}.panel h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .75rem;font-weight:600}.player-tag-form,.import-block{position:relative;z-index:5}.field-label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em}.player-tag-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch}.player-tag-row .tag-input{flex:1 1 200px;min-width:200px}.actions-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}input[type=text],input[type=url],.tag-input{width:100%;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:.6rem .75rem;font-size:1rem;font-family:inherit;pointer-events:auto;position:relative;z-index:2;-webkit-user-select:text;user-select:text}input[type=text]:focus,.tag-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}input[type=text]::placeholder{color:var(--muted);opacity:1}.import-row{display:flex;gap:.5rem;flex-wrap:wrap}.import-row input{flex:1 1 220px;min-width:0}.import-block{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.import-help{margin:.65rem 0 0;font-size:.85rem;line-height:1.45}.picker-block{margin:1rem 0;padding:1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.picker-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .75rem;font-weight:600}.picker-selection{display:flex;flex-wrap:wrap;gap:.4rem;min-height:calc(var(--card-h-md) + 1.5rem);align-items:flex-start;justify-content:flex-start;padding:.75rem;border-radius:8px;background:#0003;border:1px solid var(--border)}.picker-toolbar{display:flex;justify-content:space-between;align-items:center;margin:.5rem 0}.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,var(--card-w-md));grid-auto-rows:var(--card-h-md);justify-content:start;align-items:start;gap:.35rem;max-height:min(52vh,480px);overflow-y:auto;padding:.75rem;border-radius:8px;background:#00000026;border:1px solid var(--border);margin-bottom:.75rem}.card-frame{flex:0 0 auto;width:var(--card-w-md);height:var(--card-h-md);display:flex;align-items:center;justify-content:center;overflow:hidden;line-height:0}.card-frame--sm{width:var(--card-w-sm);height:var(--card-h-sm)}.card-frame--md{width:var(--card-w-md);height:var(--card-h-md)}.card-frame--lg{width:var(--card-w-lg);height:var(--card-h-lg)}.card-visual{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center;border:none;background:transparent;border-radius:4px;vertical-align:top}.card-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--card-w-md);height:var(--card-h-md);line-height:0;cursor:pointer;outline:none;transition:transform .12s,filter .12s}.card-chip .card-visual{pointer-events:none}.card-chip:hover:not(.card-chip--banned){transform:scale(1.05);filter:brightness(1.08)}.card-chip--selected .card-frame{outline:2px solid var(--ok);outline-offset:2px;border-radius:4px}.card-chip--banned{opacity:.35;cursor:not-allowed;pointer-events:none}.card-chip-x{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#f0717873;color:#fff;font-size:1.25rem;font-weight:700;pointer-events:none}button:not(.card-chip){font-family:inherit;font-weight:600;border:none;border-radius:8px;padding:.6rem 1rem;cursor:pointer;font-size:.9rem;transition:background .15s,transform .1s}button:not(.card-chip):active{transform:scale(.98)}button.primary{background:var(--accent);color:#fff}button.primary:hover{background:var(--accent-dim)}button.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}button.ghost:hover{color:var(--text);border-color:var(--muted)}button.danger{background:transparent;color:var(--danger);border:1px solid #4a2830;padding:.35rem .6rem;font-size:.8rem}.counter{font-size:1.1rem;font-weight:600}.deck-strip-with-levels{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0;max-width:100%}.deck-slot{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto;width:var(--card-w-md)}.deck-slot-lvl{font-size:.7rem;font-weight:700;color:var(--accent);line-height:1}.profile-block{margin-top:1rem}.profile-name{margin-bottom:.75rem}.level-overview{margin-top:.5rem;padding:.75rem;border-radius:8px;background:#0003;border:1px solid var(--border);max-height:min(50vh,420px);overflow-y:auto}.level-row{margin-bottom:.75rem}.level-row:last-child{margin-bottom:0}.level-row-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;margin-bottom:.35rem}.level-badge{font-size:.8rem;font-weight:700;color:var(--text)}.level-icons{display:grid;grid-template-columns:repeat(auto-fill,var(--card-w-lg));grid-auto-rows:var(--card-h-lg);gap:.35rem;align-items:start}.variant-overview{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border)}.variant-locked-hint{margin:0 0 .5rem;font-size:.78rem}.variant-locked-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}.variant-locked-item{display:flex;flex-direction:column;gap:.25rem}.variant-locked-label{font-size:.75rem;font-weight:600;color:var(--text)}.variant-group{margin-bottom:.75rem}.variant-group-title{font-size:.78rem;font-weight:600;margin:0 0 .35rem;color:var(--text)}.variant-icons{display:flex;flex-wrap:wrap;gap:.35rem}.variant-chip{position:relative;line-height:0}.variant-chip-tag{position:absolute;right:-2px;bottom:-2px;font-size:.55rem;font-weight:700;background:var(--ok);color:#0a0e14;border-radius:3px;padding:0 2px;line-height:1.2}.variant-chip-tag--no{background:var(--danger);color:#fff}.suggest-help{margin-bottom:.75rem;line-height:1.45}.suggest-help strong{color:var(--ok);font-weight:600}.suggest-meta{flex:1 1 100%}.deck-card{border:1px solid var(--border);border-radius:10px;padding:.65rem .75rem;margin-bottom:.6rem;background:#00000026}.deck-card header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem;font-size:.85rem}.deck-card-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.copy-deck-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s,background .15s}.copy-deck-btn:hover{color:var(--accent);border-color:var(--accent)}.copy-deck-btn--ok{color:var(--ok);border-color:var(--ok)}.copy-icon{display:block}.level-pill{display:inline-block;padding:.15rem .45rem;border-radius:999px;font-size:.75rem;font-weight:600;background:#1e3a2f;color:var(--ok)}.level-pill.low{background:#3a2a1e;color:var(--warn)}.warn-pill{display:inline-block;padding:.15rem .45rem;border-radius:999px;font-size:.75rem;font-weight:600;background:#3a1e1e;color:#f87171}.suggest-pills{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.suggest-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem 0;border-bottom:1px solid var(--border)}.suggest-row .deck-strip-with-levels{flex:1 1 100%}.suggest-row:last-child{border-bottom:none}.meta{font-size:.8rem;color:var(--muted)}.error{color:var(--danger);font-size:.9rem;margin-top:.5rem}.import-row{display:flex;gap:.5rem;margin-top:.75rem}.import-row input{flex:1}.chip-list{display:flex;flex-wrap:wrap;gap:.35rem}.chip{font-size:.78rem;padding:.2rem .5rem;border-radius:6px;background:var(--bg);border:1px solid var(--border)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 700px){.grid-2{grid-template-columns:1fr}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-panel{width:min(420px,100%);background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.35rem;box-shadow:0 16px 48px #00000073}.modal-title{margin:0 0 .75rem;font-size:1.1rem;font-weight:700}.modal-text{margin:0 0 1.25rem;color:var(--muted);font-size:.95rem;line-height:1.55}.modal-text strong{color:var(--text)}.modal-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.modal-donate-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:.55rem 1.1rem;border-radius:8px;font-weight:600;font-size:.9rem}.donate-cta{background:linear-gradient(145deg,#2d8f5c,#1e6b44);color:#fff;border:1px solid #3ecf8e;box-shadow:0 2px 12px #3ecf8e40}.donate-cta:hover{background:linear-gradient(145deg,#36a86a,#248052);border-color:#5ee0a8;box-shadow:0 4px 16px #3ecf8e59}@media (max-width: 768px){:root{--card-w-sm: 2.65rem;--card-h-sm: 3.19rem;--card-w-md: 3.35rem;--card-h-md: 4.02rem;--card-w-lg: 3.75rem;--card-h-lg: 4.51rem}#root{padding:1rem .85rem calc(2rem + env(safe-area-inset-bottom,0px));padding-left:max(.85rem,env(safe-area-inset-left,0px));padding-right:max(.85rem,env(safe-area-inset-right,0px))}.site-logo{width:min(260px,85vw)}.subtitle{font-size:.88rem;padding:0 .25rem}.panel{padding:.9rem .85rem;border-radius:10px}.player-tag-row{flex-direction:column;align-items:stretch}.player-tag-row .tag-input{min-width:0;flex:1 1 auto;width:100%}.player-tag-row button{width:100%;min-height:2.75rem}.picker-grid{max-height:min(45vh,360px);justify-content:center;gap:.3rem;padding:.5rem}.picker-selection{justify-content:center;min-height:calc(var(--card-h-md) + 1rem);padding:.5rem}.deck-card header{flex-wrap:wrap;align-items:flex-start}.deck-strip-with-levels{justify-content:center}.suggest-row{flex-direction:column;align-items:stretch;gap:.65rem}.suggest-row .primary{width:100%;min-height:2.75rem}.level-icons{justify-content:center}.import-row{flex-direction:column}.import-row button{width:100%;min-height:2.75rem}.modal-panel{max-height:min(90vh,520px);overflow-y:auto}.modal-actions{flex-direction:column-reverse;align-items:stretch}.modal-actions .ghost,.modal-actions .donate-cta{width:100%;min-height:2.75rem;justify-content:center}}@media (max-width: 480px){:root{--card-w-md: 3rem;--card-h-md: 3.61rem}.support-btn{width:100%;max-width:14rem;justify-content:center}.counter{font-size:1rem}.deck-card-actions .danger{padding:.45rem .65rem}button:not(.card-chip):not(.copy-deck-btn){min-height:2.65rem}}:root{--bg: #0b0b14;--panel: #16162a;--border: rgba(255, 255, 255, .1);--text: #f5f5fa;--muted: #9a9ab8;--accent: #8b5cf6;--accent-dim: #6d28d9;--ok: #10b981;--warn: #f59e0b;--danger: #f43f5e}body{background:var(--bg)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% -10%,rgba(139,92,246,.18),transparent 50%),radial-gradient(circle at 90% 10%,rgba(244,114,182,.12),transparent 50%),radial-gradient(circle at 50% 100%,rgba(16,185,129,.06),transparent 60%);pointer-events:none;z-index:0}#root{position:relative;z-index:1}.splash-screen{background:radial-gradient(ellipse at 50% 30%,rgba(139,92,246,.22),transparent 55%),radial-gradient(ellipse at 50% 80%,rgba(244,114,182,.14),transparent 60%),var(--bg)}.splash-byline{background:linear-gradient(90deg,#a78bfa,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}.splash-spinner{border-top-color:#a78bfa;border-right-color:#f472b6}.splash-progress-fill,.loading-bar-fill{background:linear-gradient(90deg,var(--accent-dim),var(--accent),#f472b6)}.site-byline{background:linear-gradient(90deg,#a78bfa,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}.support-btn{gap:.4rem;border-color:#8b5cf68c;background:linear-gradient(135deg,#8b5cf659,#6d28d980);color:#f5f5fa;box-shadow:0 4px 16px #8b5cf659}.support-btn-icon{flex-shrink:0;color:#f472b6}.support-btn:hover{border-color:#a78bfa;box-shadow:0 6px 20px #8b5cf673}.panel{background:#16162ae0;border-color:#ffffff14;box-shadow:0 8px 32px #00000059}button.primary{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 4px 14px #8b5cf659}button.primary:hover{background:linear-gradient(135deg,#9d75f8,#7c3aed)}button.ghost:hover{border-color:var(--accent);background:#8b5cf61f}.social-follow-btn:hover{border-color:var(--accent);background:#8b5cf624;color:var(--text)}.counter span{color:var(--accent)}.deck-slot-lvl{color:#a78bfa}.suggest-help strong{color:var(--ok)}.level-pill{background:#10b98124;border:1px solid rgba(16,185,129,.28);color:var(--ok)}.level-pill.low{background:#f59e0b24;border-color:#f59e0b47;color:var(--warn)}.warn-pill{background:#ef444424;border:1px solid rgba(239,68,68,.32);color:#f87171}.variant-chip--locked .card-frame{filter:grayscale(1) brightness(.55);opacity:.72}.variant-chip-tag{background:var(--ok)}.variant-chip-tag--no{background:var(--danger)}.modal-panel{background:#16162a;border-color:#ffffff1a}.modal-actions .primary{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px #10b9814d}.copy-deck-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border-radius:10px;border:1px solid rgba(139,92,246,.4);background:linear-gradient(145deg,#8b5cf633,#6d28d91f);color:#c4b5fd;cursor:pointer;box-shadow:0 2px 10px #00000047;transition:color .15s,border-color .15s,background .15s,box-shadow .15s,transform .12s}.copy-deck-btn:hover{color:#f5f5fa;border-color:#a78bfa;background:linear-gradient(145deg,#8b5cf661,#6d28d947);box-shadow:0 4px 16px #8b5cf666;transform:translateY(-1px)}.copy-deck-btn:active{transform:translateY(0)}.copy-deck-btn--ok{color:#6ee7b7;border-color:#10b9818c;background:linear-gradient(145deg,#10b98138,#05966924);box-shadow:0 4px 14px #10b98147}.copy-deck-btn__icon{display:block}
