:root{color:#f5f7fb;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg:#0a0d14;--bg-secondary:#0d1220;--panel:#131824b8;--panel-soft:#ffffff0a;--panel-border:#ffffff14;--text:#f5f7fb;--muted:#b8c1d1;--accent:#7c5cff;--accent-2:#2ea0ff;--shadow:0 20px 60px #00000059;background:#0a0d14;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body,#root{min-width:100%;min-height:100%;margin:0}.champion-mastery-block{flex-direction:column;align-items:center;gap:.15rem;margin-top:.45rem;display:flex}.champion-mastery-rank{border-radius:999px;padding:.2rem .5rem;font-size:.72rem;font-weight:700;line-height:1}.champion-mastery-percent{opacity:.78;font-size:.72rem}.mastery-rank-challenger{color:#8fd8ff;background:#6ec8ff33}.mastery-rank-master{color:#d4a6ff;background:#be78ff33}.mastery-rank-diamond{color:#9dc7ff;background:#78b4ff33}.mastery-rank-emerald{color:#6ee7b7;background:#50dca033}.mastery-rank-platinum{color:#7dd3fc;background:#64dcdc33}.mastery-rank-gold{color:#fcd34d;background:#ffd26433}.mastery-rank-silver{color:#d1d5db;background:#dcdceb33}.mastery-rank-bronze{color:#d6a37a;background:#b4785038}.mastery-rank-iron{color:#9ca3af;background:#8c8c8c33}body{background:radial-gradient(circle at top left, #7c5cff24, transparent 30%), radial-gradient(circle at bottom right, #2ea0ff1f, transparent 30%), linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);color:var(--text)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{border:none}.app-shell{min-height:100vh;position:relative;overflow:hidden}.background-glow{filter:blur(90px);pointer-events:none;opacity:.55;border-radius:999px;position:absolute}.background-glow-1{background:#7c5cff52;width:260px;height:260px;top:90px;left:-60px}.background-glow-2{background:#2ea0ff3d;width:300px;height:300px;bottom:80px;right:-80px}.champion-avatar{background:linear-gradient(135deg,#7c5cfff2,#2ea0ffe6);border-radius:16px;justify-content:center;align-items:center;width:52px;height:52px;display:flex;overflow:hidden}.selected-champion-display{align-items:center;gap:10px;display:flex}.toplane-rules-footer{border-top:1px solid #ffffff1f;margin-top:1rem;padding-top:1rem}.toplane-rules-footer p{margin:0 0 .75rem;line-height:1.6}.notes-save-row{align-items:center;gap:.75rem;margin-top:.75rem;display:flex}.saved-message{color:#7ee787;margin:0;font-size:.92rem;font-weight:600}.toplane-rules-footer p:last-child{margin-bottom:0}.selected-champion-image{object-fit:cover;border-radius:10px;width:32px;height:32px}.champion-avatar-image{object-fit:cover;width:100%;height:100%;display:block}.app-logo{height:48px}.header-left{align-items:center;gap:12px;display:flex}.logo-button{cursor:pointer;background:0 0;border:none;padding:0}.logo-button:hover{transform:scale(1.05)}.topbar{z-index:2;justify-content:space-between;align-items:center;width:min(1120px,100% - 32px);margin:0 auto;padding:24px 0 0;display:flex;position:relative}.brand{letter-spacing:.04em;color:#fff;align-items:center;font-size:15px;font-weight:700;display:flex}.topbar-link{color:var(--muted);font-size:14px}.hero{z-index:2;justify-content:center;align-items:center;min-height:auto;padding:20px 16px;display:flex;position:relative}.hero-card{border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);width:min(900px,100%);box-shadow:var(--shadow);text-align:center;border-radius:28px;padding:48px}.badge{color:#d8d2ff;background:#7c5cff24;border:1px solid #7c5cff47;border-radius:999px;margin-bottom:20px;padding:8px 14px;font-size:13px;font-weight:600;display:inline-block}.hero-card h1{letter-spacing:-.04em;margin:0;font-size:clamp(2.4rem,7vw,4.8rem);line-height:.95}.hero-text{max-width:700px;color:var(--muted);margin:22px auto 0;font-size:1.05rem}.hero-actions{flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px;display:flex}.primary-button,.secondary-button{border-radius:14px;justify-content:center;align-items:center;min-width:170px;padding:14px 20px;font-weight:700;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s,opacity .18s;display:inline-flex}.primary-button{cursor:pointer;background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;box-shadow:0 12px 30px #4c63ff47}.primary-button:hover{transform:translateY(-1px)}.secondary-button{cursor:pointer;color:#eef2ff;background:#ffffff08;border:1px solid #ffffff1a}.secondary-button:hover{border-color:#fff3;transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.page-shell{min-height:100vh;padding:24px 16px 40px;position:relative;overflow:hidden}.app-header{z-index:2;justify-content:space-between;align-items:center;gap:16px;width:min(1120px,100%);margin:0 auto 28px;display:flex;position:relative}.page-subtitle{color:var(--muted);margin:6px 0 0;font-size:.95rem}.content-width{z-index:2;width:min(1120px,100%);margin:0 auto;position:relative}.panel-card{border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);border-radius:28px;padding:32px}.section-label{color:#cfe7ff;letter-spacing:.02em;background:#2ea0ff1f;border:1px solid #2ea0ff3d;border-radius:999px;margin-bottom:14px;padding:7px 12px;font-size:12px;font-weight:700;display:inline-block}.page-title{letter-spacing:-.04em;margin:0;font-size:clamp(2rem,5vw,3.2rem);line-height:1}.page-description{max-width:760px;color:var(--muted);margin:16px 0 0;font-size:1rem}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;display:grid}.summary-card{background:var(--panel-soft);border:1px solid #ffffff14;border-radius:20px;margin-top:24px;padding:18px}.summary-grid .summary-card{margin-top:0}.summary-label{color:var(--muted);margin-bottom:8px;font-size:.84rem;display:block}.summary-name{color:#fff;font-size:1.15rem;display:block}.button-row{justify-content:space-between;gap:12px;margin-top:28px;display:flex}.small-button{min-width:auto;padding:12px 16px}.info-section{z-index:2;width:min(1120px,100% - 32px);margin:0 auto;padding:8px 0 56px;position:relative}.info-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.info-card{box-shadow:var(--shadow);background:#ffffff09;border:1px solid #ffffff14;border-radius:22px;padding:24px}.info-card h2{margin-top:0;margin-bottom:10px;font-size:1.1rem}.info-card p{color:var(--muted);margin:0;font-size:.98rem}.select-panel-card{flex-direction:column;gap:22px;display:flex}.select-panel-top{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.selected-champion-summary{min-width:240px;margin-top:0}.search-row{align-items:center;display:flex}.champion-search{color:#fff;background:#ffffff0b;border:1px solid #ffffff1a;border-radius:16px;outline:none;width:100%;padding:14px 16px;transition:border-color .18s,background .18s}.champion-search::placeholder{color:#9aa4b7}.champion-search:focus{background:#ffffff0f;border-color:#7c5cff8c}.champion-grid-section{margin-top:22px}.champion-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;display:grid}.champion-card{color:#fff;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;align-items:center;gap:12px;min-height:130px;padding:18px 14px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:flex;position:relative}.champion-card:hover{background:#ffffff12;border-color:#7c5cff73;transform:translateY(-3px);box-shadow:0 14px 32px #0003}.champion-card-selected{background:#7c5cff24;border-color:#7c5cffbf;box-shadow:0 12px 30px #4c63ff29,inset 0 0 0 1px #ffffff0a}.champion-avatar{color:#fff;background:linear-gradient(135deg,#7c5cfff2,#2ea0ffe6);border-radius:16px;justify-content:center;align-items:center;width:52px;height:52px;font-size:1.15rem;font-weight:800;display:flex}.champion-name{text-align:center;font-weight:700;line-height:1.2}.empty-state{color:var(--muted);text-align:center;background:#ffffff09;border:1px dashed #ffffff1f;border-radius:20px;padding:28px}.select-bottom-row{margin-top:22px}.summary-stack{flex-direction:column;gap:12px;display:flex}.champion-card-note{color:var(--muted);font-size:.78rem;font-weight:600}.champion-card:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.champion-card:disabled:hover{background:#ffffff0a;border-color:#ffffff14;transform:none}.champion-select-page{padding-bottom:120px}.fixed-bottom-actions-wrap{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#0a0d1400,#0a0d14e6,#0a0d14fa);padding:16px;position:fixed;bottom:0;left:0;right:0}.fixed-bottom-actions{justify-content:space-between;gap:12px;display:flex}.matchup-layout{flex-direction:column;gap:22px;display:flex}.matchup-hero-card{flex-direction:column;gap:24px;display:flex}.matchup-hero-top{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.matchup-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-toggle{background:#ffffff0a;border:1px solid #ffffff14;border-radius:18px;gap:10px;padding:8px;display:inline-flex}.mode-button{color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;padding:12px 16px;font-weight:700;transition:background .18s,color .18s,transform .18s,border-color .18s,box-shadow .18s}.mode-button:hover{color:#fff;background:#ffffff0f;border-color:#ffffff14}.mode-button-active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border-color:#0000;box-shadow:0 12px 30px #4c63ff2e}.mode-button-active:hover{background:linear-gradient(135deg, var(--accent), var(--accent-2));border-color:#0000}.notes-panel{flex-direction:column;gap:18px;display:flex}.section-heading{margin:0;font-size:1.25rem}.key-rules-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.key-rule-card{color:#eef0ff;background:#7c5cff1a;border:1px solid #7c5cff33;border-radius:18px;padding:18px;font-weight:700}.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.note-block h3,.edit-note-block h3{margin-top:0;margin-bottom:10px;font-size:1.05rem}.note-block p{color:var(--muted);margin:0;line-height:1.65}.note-block-full{grid-column:1/-1}.tag-grid{flex-wrap:wrap;gap:12px;display:flex}.tag-button{color:#eef2ff;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:999px;padding:12px 14px;font-weight:600;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.tag-button:hover{background:#ffffff12;border-color:#ffffff29;transform:translateY(-1px)}.tag-button-good-active{background:#2ea0ff24;border-color:#2ea0ff59}.tag-button-good-active:hover{background:#2ea0ff2e;border-color:#2ea0ff6b}.tag-button-bad-active{background:#ff787824;border-color:#ff787859}.tag-button-bad-active:hover{background:#ff78782e;border-color:#ff78786b}.notes-textarea,.notes-input,.matchup-textarea{color:#fff;box-sizing:border-box;width:100%;font:inherit;background:#ffffff0b;border:1px solid #ffffff1a;border-radius:16px;outline:none;padding:14px 16px;transition:border-color .18s,background .18s,box-shadow .2s}.notes-textarea,.matchup-textarea{resize:vertical;line-height:1.6}.notes-textarea{min-height:140px}.matchup-textarea{color:#e8ecff;background:#080c14b3;border:1px solid #ffffff1f;min-height:180px;margin-top:12px}.notes-textarea:focus,.notes-input:focus,.matchup-textarea:focus{background:#ffffff0f;border-color:#7c5cff8c}.matchup-textarea:focus{border-color:#78aaffe6;box-shadow:0 0 0 3px #78aaff26}.quick-note-groups{gap:16px;margin-top:12px;margin-bottom:14px;display:grid}.quick-note-group{gap:10px;display:grid}.quick-note-group-title{letter-spacing:.08em;text-transform:uppercase;color:#8ea4ff;font-size:.8rem;font-weight:700}.quick-note-button-row{flex-wrap:wrap;gap:10px;display:flex}.quick-note-button{color:#e8ecff;font:inherit;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:999px;padding:10px 14px;font-size:.92rem;line-height:1.2;transition:transform .15s,border-color .15s,background .15s,color .15s}.quick-note-button:hover{background:#78aaff1f;border-color:#78aaff99;transform:translateY(-1px)}.quick-note-button:active{transform:translateY(0)}.quick-note-button-selected{color:#fff;background:#78aaff38;border-color:#78aafff2;box-shadow:0 0 0 2px #78aaff24}.note-list{gap:6px;margin:0;padding-left:1.2rem;display:grid}.note-list li{color:#d6deff;line-height:1.5}.empty-note-text{color:#d6deffad;margin:0;line-height:1.5}.toplane-rules-list{gap:10px;margin:0;padding-left:1.25rem;display:grid}.toplane-rules-list li{color:#d6deff;line-height:1.6}.key-rules-edit-grid{grid-template-columns:1fr;gap:12px;display:grid}.save-row{justify-content:flex-end;display:flex}.champion-card:focus-visible,.mode-button:focus-visible,.tag-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.champion-search:focus-visible,.notes-textarea:focus-visible,.notes-input:focus-visible,.matchup-textarea:focus-visible,.quick-note-button:focus-visible{outline-offset:2px;outline:2px solid #7c5cffcc}.opponent-page{background:radial-gradient(circle at top,#1a1028 0%,#0a0d14 60%)}.opponent-page .panel-card{border-color:#8c50ff40}.opponent-page .section-label{color:#a78bfa}.opponent-page .page-title{color:#c4b5fd}@media (width<=1000px){.champion-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=900px){.app-header{flex-direction:column;align-items:flex-start}.summary-grid{grid-template-columns:1fr}.panel-card{padding:24px}.info-grid{grid-template-columns:1fr}.select-panel-top{flex-direction:column}.selected-champion-summary{width:100%;min-width:0}.summary-stack{width:100%}.champion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.matchup-hero-top{flex-direction:column}.matchup-summary-grid,.key-rules-grid,.notes-grid{grid-template-columns:1fr}}@media (width<=600px){.topbar{width:calc(100% - 24px);padding-top:18px}.hero{padding:14px 12px 16px}.hero-card{border-radius:22px;padding:28px 18px}.hero-text{font-size:.98rem}.page-shell{padding:18px 12px 28px}.panel-card{border-radius:20px;padding:20px}.primary-button,.secondary-button{width:100%}.button-row,.fixed-bottom-actions{flex-direction:column}.info-section{width:calc(100% - 24px);padding-bottom:28px}.champion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-toggle{flex-direction:column;width:100%}.mode-button{width:100%}.save-row{justify-content:stretch}.save-row .small-button,.save-row .primary-button{width:100%}.champion-select-page{padding-bottom:160px}}