@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Cinzel:wght@400;600;700&display=swap");:root{--nav-height:56px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{max-width:100vw;overflow-x:hidden;color-scheme:dark}#__next{min-height:100vh}body{background:var(--bg-deep);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--fs-14);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--lh-body)}a{color:inherit;text-decoration:none}.game-row:hover{background:var(--bg-hover)!important}body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px}:root{--bg-deep:#1e2130;--bg-surface:#262a3a;--bg-elevated:#2f3346;--bg-hover:#383d52;--border:#3a405a;--border-subtle:#2a2f42;--text-primary:#e4e7ee;--text-secondary:#9096ac;--text-muted:#5c6278;--gold:#c9a84c;--gold-dim:#8a7234;--silver:#8a92a8;--bronze:#8b6d4f;--red:#9b3a3a;--red-bright:#c44e4e;--green:#3a7a4a;--green-bright:#4eaa62;--accent:#E0402A;--accent-hover:#FF6046;--accent-dim:#CC3520;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--font-display:"Cinzel","Trajan Pro",serif;--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-16:16px;--fs-18:18px;--fs-24:24px;--fs-32:32px;--fs-hero:clamp(42px,7vw,72px);--lh-tight:1.1;--lh-body:1.5;--lh-relaxed:1.7;--tr-body:0.5px;--tr-ui:1px;--tr-upper:1.5px;--tr-upper-wide:2px;--tr-display:3px;--tr-hero:10px;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--shadow-tooltip:0 8px 32px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04);--shadow-lightbox:0 16px 64px rgba(0,0,0,0.6);--r-0:2px;--r-2:4px;--r-3:6px;--r-4:8px;--r-6:10px;--r-8:12px;--r-pill:128px;--s-2:2px;--s-3:3px;--s-4:4px;--s-6:6px;--s-8:8px;--s-10:10px;--s-12:12px;--s-14:14px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;--s-40:40px;--s-48:48px;--t-fast:0.1s;--t-base:0.15s;--t-slow:0.2s;--t-easing:cubic-bezier(0.16,1,0.3,1)}html{color-scheme:dark}.h-hero{font-size:var(--fs-hero);font-weight:var(--fw-bold);letter-spacing:var(--tr-hero);line-height:var(--lh-tight)}.h-display,.h-hero{font-family:var(--font-display);text-transform:uppercase}.h-display{font-size:var(--fs-18);font-weight:var(--fw-semibold);letter-spacing:var(--tr-display);color:var(--text-secondary)}.h-section{font-size:var(--fs-13);letter-spacing:var(--tr-upper-wide)}.h-label,.h-section{font-family:var(--font-mono);font-weight:var(--fw-medium);text-transform:uppercase;color:var(--text-muted)}.h-label{font-size:var(--fs-11);letter-spacing:var(--tr-upper)}.t-body{font-size:var(--fs-14);color:var(--text-primary)}.t-body-sm{font-size:var(--fs-13);color:var(--text-secondary)}.t-meta{font-size:var(--fs-12)}.t-meta,.t-meta-xs{color:var(--text-muted);letter-spacing:var(--tr-body)}.t-meta-xs{font-size:var(--fs-11)}.t-stat-value{font-size:var(--fs-32);font-weight:var(--fw-bold);color:var(--text-primary);line-height:var(--lh-tight)}.t-placement{font-family:var(--font-display);font-size:28px;font-weight:var(--fw-bold);line-height:1}.t-tabular{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.game-row{display:grid;grid-template-columns:72px 1fr 120px 80px 60px 120px 100px;padding:0 var(--s-20);align-items:center;transition:background var(--t-base) var(--t-easing)}.cell{padding:var(--s-12) var(--s-6);font-size:var(--fs-16);min-width:0}.placement{font-family:var(--font-display);font-size:28px;font-weight:var(--fw-bold);width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid;border-radius:var(--r-0);opacity:.9}.units-cell{display:flex;flex-direction:column;gap:var(--s-4)}.lineup{display:flex;gap:3px;align-items:center;flex-wrap:wrap;flex-shrink:0}.unit-icon-wrap{position:relative;width:28px;height:28px;cursor:pointer}.unit-icon{width:28px;height:28px;border-radius:var(--r-3);border:2px solid var(--border);object-fit:cover;background:var(--bg-elevated);transition:transform var(--t-fast) var(--t-easing),box-shadow var(--t-fast) var(--t-easing)}.unit-icon-wrap:hover .unit-icon{transform:scale(1.1);box-shadow:0 0 8px rgba(0,0,0,.5);z-index:2}.unit-stars{position:absolute;bottom:-3px;right:-3px;font-size:9px;line-height:1;background:var(--bg-deep);border-radius:var(--r-2);padding:1px 3px}.unit-stars.s2{color:#5a8fd5}.unit-stars.s3{color:var(--gold)}.synergies{flex-wrap:wrap}.syn-badge,.synergies{display:flex;gap:var(--s-4);align-items:center}.syn-badge{font-size:var(--fs-12);color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-3);padding:3px 6px 3px 4px;cursor:pointer;transition:border-color var(--t-fast) var(--t-easing),background var(--t-fast) var(--t-easing)}.syn-badge:hover{border-color:var(--border);background:var(--bg-elevated)}.syn-icon{width:18px;height:18px;border-radius:var(--r-2);object-fit:cover}.syn-count{color:var(--text-secondary);font-weight:var(--fw-semibold)}.rank-cell{display:flex;align-items:center;gap:var(--s-8)}.rank-tier{font-size:15px;color:var(--text-secondary)}.rank-num{font-size:var(--fs-14);color:var(--text-muted)}.arrow-up{color:var(--green-bright)}.arrow-down,.arrow-up{font-size:var(--fs-13)}.arrow-down{color:var(--red-bright)}.wl{font-size:15px}.wl-w{color:var(--green-bright)}.wl-l{color:var(--red-bright)}.wl-sep{color:var(--text-muted)}.level-cell{font-size:var(--fs-16);color:var(--text-secondary)}.relics-cell{overflow:hidden}.relics,.relics-cell{display:flex;align-items:center}.relics{gap:var(--s-4);flex-wrap:wrap}.relic-icon{width:28px;height:28px;border-radius:var(--r-3);border:1px solid var(--border);object-fit:cover;background:var(--bg-surface);cursor:pointer;transition:transform var(--t-fast) var(--t-easing)}.relic-icon:hover{transform:scale(1.15)}.date-cell{font-size:var(--fs-14);color:var(--text-muted);position:relative}.date-cell div:last-child{font-size:var(--fs-12);opacity:.6}.tooltip{position:fixed;z-index:200;pointer-events:none;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-6);padding:var(--s-12) var(--s-14);max-width:320px;box-shadow:var(--shadow-tooltip);font-size:var(--fs-12);line-height:var(--lh-body);color:var(--text-primary)}.tooltip-header{display:flex;align-items:center;gap:var(--s-8);margin-bottom:var(--s-8)}.tooltip-icon{width:36px;height:36px;border-radius:var(--r-3);border:2px solid var(--border);object-fit:cover;flex-shrink:0}.tooltip-name{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--text-primary)}.tooltip-sub{font-size:var(--fs-11);color:var(--text-secondary);margin-top:1px}.tooltip-stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--border-subtle);font-size:var(--fs-11)}.tooltip-stat-label{color:var(--text-muted)}.tooltip-stat-value{color:var(--text-secondary);text-align:right}.tooltip-desc{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--border-subtle);font-size:var(--fs-11);color:var(--text-secondary);line-height:var(--lh-body)}.tooltip-tiers{display:flex;gap:var(--s-4);margin-top:var(--s-6)}.tooltip-tier{padding:2px 6px;border-radius:var(--r-2);font-size:10px;font-weight:var(--fw-semibold);background:var(--bg-hover);color:var(--text-muted);border:1px solid var(--border-subtle)}.tooltip-tier.active{background:rgba(224,64,42,.2);color:var(--accent-hover);border-color:var(--accent)}.btn-share{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--r-4);background:var(--bg-surface);cursor:pointer;transition:color var(--t-base) var(--t-easing),border-color var(--t-base) var(--t-easing),background var(--t-base) var(--t-easing);margin-top:var(--s-4)}.btn-share:hover{color:var(--text-secondary);border-color:var(--text-muted);background:var(--bg-elevated)}.game-edit-panel{border-top:1px solid var(--border);background:var(--bg-surface);padding:var(--s-20)}.edit-fields-grid{display:flex;flex-direction:column;gap:var(--s-16)}.edit-fields-row{display:flex;gap:var(--s-16);flex-wrap:wrap}.edit-label{display:flex;flex-direction:column;gap:var(--s-6);min-width:0}.edit-label>span{font-size:var(--fs-12);letter-spacing:var(--tr-upper);text-transform:uppercase;color:var(--text-muted)}.edit-label-wide{width:100%}.edit-field{font-family:var(--font-mono);font-size:var(--fs-14);color:var(--text-primary);background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--r-3);padding:var(--s-6) var(--s-10);min-width:0;transition:border-color var(--t-base) var(--t-easing)}.edit-field:focus{outline:none;border-color:var(--accent)}select.edit-field{cursor:pointer}.edit-rank-pair,.edit-wl-pair{display:flex;gap:var(--s-6);align-items:center}.edit-wl-input{width:56px;text-align:center}.edit-wl-dash{color:var(--text-muted)}.tag-picker{position:relative}.tag-picker-tags{display:flex;flex-wrap:wrap;gap:var(--s-6);padding:var(--s-8);background:var(--bg-deep);min-height:38px}.tag-chip,.tag-picker-tags{border:1px solid var(--border);border-radius:var(--r-3);align-items:center}.tag-chip{display:inline-flex;gap:var(--s-4);background:var(--bg-elevated);padding:3px 6px;font-size:var(--fs-13);color:var(--text-secondary)}.tag-chip-icon{width:20px;height:20px;border-radius:var(--r-2);object-fit:cover}.tag-chip-name{white-space:nowrap}.tag-chip-count{font-family:var(--font-mono);width:36px;text-align:center;font-size:var(--fs-12);color:var(--gold);background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--r-2);padding:1px 2px}.tag-chip-count:focus{outline:none;border-color:var(--accent)}.tag-chip-remove{font-size:var(--fs-16);line-height:1;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:0 2px}.tag-chip-remove:hover{color:var(--red-bright)}.tag-picker-input{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--text-primary);background:transparent;border:none;outline:none;flex:1 1;min-width:80px}.tag-picker-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-3);z-index:20;max-height:200px;overflow-y:auto;box-shadow:var(--shadow-tooltip)}.tag-picker-option{display:flex;align-items:center;gap:var(--s-8);width:100%;padding:var(--s-8) var(--s-12);font-family:var(--font-mono);font-size:var(--fs-13);color:var(--text-secondary);background:none;border:none;cursor:pointer;text-align:left;transition:background var(--t-fast) var(--t-easing),color var(--t-fast) var(--t-easing)}.tag-picker-option:hover{background:var(--bg-hover);color:var(--text-primary)}.tag-picker-option-icon{width:20px;height:20px;border-radius:var(--r-2);object-fit:cover}.edit-panel-actions{display:flex;align-items:center;gap:var(--s-10);margin-top:var(--s-20);padding-top:var(--s-16);border-top:1px solid var(--border-subtle)}.btn-confirm{font-family:var(--font-mono);font-size:var(--fs-13);padding:7px 18px;cursor:pointer;letter-spacing:var(--tr-body);border:1px solid var(--border);border-radius:var(--r-4);transition:color var(--t-base) var(--t-easing),background var(--t-base) var(--t-easing),border-color var(--t-base) var(--t-easing),opacity var(--t-base) var(--t-easing)}.btn-cancel{color:var(--text-muted);background:none}.btn-cancel:hover{color:var(--text-secondary);border-color:var(--text-muted)}.btn-primary{color:var(--bg-deep);background:var(--accent);border-color:var(--accent)}.btn-primary:hover{opacity:.9}.btn-primary:disabled{opacity:.5;cursor:default}.btn-delete-game{color:var(--text-muted);background:none}.btn-delete-game:hover{color:var(--red-bright);border-color:var(--red)}.btn-modal-danger{color:var(--text-primary);background:var(--red);border-color:var(--red)}.btn-modal-danger:hover{background:var(--red-bright)}