:root{--navy-900: #010a13;--navy-800: #0a1428;--navy-700: #0f2440;--panel: #1e2328;--panel-glass: rgba(38, 46, 56, .88);--panel-glass-hover: rgba(50, 60, 72, .92);--border: #3c3c41;--gold: #c8aa6e;--gold-bright: #f0e6d2;--teal: #0ac8b9;--text: #cdbe91;--text-dim: #a09b8c}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(ellipse at top,var(--navy-700) 0%,var(--navy-900) 70%);color:var(--text);font-family:Segoe UI,Helvetica Neue,Arial,sans-serif}button{font-family:inherit;cursor:pointer}.app{min-height:100%;display:flex;flex-direction:column}.app--player{position:relative;background-color:var(--navy-900);background-size:cover;background-position:center 15%;background-attachment:fixed}.app-bg-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#010a1380,#010a1399 30%,#010a13cc);pointer-events:none}.app-header{position:relative;z-index:100;display:flex;align-items:center;gap:28px;padding:22px 32px;background:#010a138c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(60,60,65,.5)}.app-logo{background:none;border:none;padding:0;font-size:24px;font-weight:700;letter-spacing:.06em;color:var(--gold-bright);text-transform:uppercase;white-space:nowrap}.app-logo:hover{color:var(--teal)}.kofi-link{color:var(--text-dim);text-decoration:none;font-size:12px;white-space:nowrap;opacity:.75;transition:opacity .15s,color .15s}.kofi-link:hover{opacity:1;color:var(--gold-bright)}.kofi-link--header{margin-left:auto}.kofi-link--landing{position:absolute;top:20px;right:24px;z-index:1}.champion-search{position:relative}.champion-search--default{width:min(500px,100%)}.champion-search input{width:100%;background:var(--panel);border:1px solid var(--border);color:var(--gold-bright);outline:none}.champion-search--default input{padding:15px 20px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-size:19px}.champion-search input:focus{border-color:var(--teal)}.champion-search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;list-style:none;margin:0;padding:4px;background:var(--panel);border:1px solid var(--border);max-height:320px;overflow-y:auto;text-align:left}.champion-search-results li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:2px;font-size:17px}.champion-search-results li img{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);object-fit:cover}.champion-search--large .champion-search-results{padding:8px;max-height:280px;overflow-y:auto}.champion-search--large .champion-search-results li{padding:10px 16px;font-size:16px;gap:12px}.champion-search--large .champion-search-results li img{width:40px;height:40px}.champion-search-results li.active,.champion-search-results li:hover{background:var(--navy-700);color:var(--gold-bright)}.champion-search-error{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--panel);border:1px solid var(--gold);color:var(--text-dim);font-size:13px}.champion-search-error button{flex-shrink:0;background:transparent;border:1px solid var(--teal);color:var(--teal);padding:4px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}.champion-search-error button:hover{background:var(--teal);color:var(--navy-900)}.app--landing{min-height:100vh}.landing-hero{position:relative;flex:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background-color:var(--navy-900);background-size:cover;background-position:center 18%;background-attachment:fixed}.landing-bg-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(55% 45% at 50% 42%,rgba(10,200,185,.12) 0%,transparent 70%),radial-gradient(40% 32% at 50% 46%,rgba(200,170,110,.08) 0%,transparent 70%),linear-gradient(180deg,#010a138c,#010a1373 35%,#010a13eb);pointer-events:none}.landing-title{position:relative;margin:0;font-size:clamp(32px,4vw,56px);font-weight:800;letter-spacing:.02em;color:var(--gold-bright);text-shadow:0 0 80px rgba(200,170,110,.3)}.landing-subtitle{position:relative;margin:14px 0 32px;color:var(--text-dim);font-size:clamp(13px,1vw,16px)}.landing-hero .champion-search--large{position:relative;width:min(620px,90vw)}.champion-search--large input{padding:14px 18px;font-size:16px;border-radius:2px;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);box-shadow:0 24px 70px #00000073}.champion-search--large input::placeholder{color:var(--text-dim)}.champion-panel{position:relative;padding:40px 32px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}.champion-panel h1{margin:0;font-size:clamp(26px,3vw,44px);font-weight:800;color:var(--gold-bright);letter-spacing:.02em;text-shadow:0 4px 30px rgba(0,0,0,.7)}.champion-title{margin:8px 0 0;color:var(--teal);text-transform:uppercase;font-size:15px;letter-spacing:.16em;text-shadow:0 2px 12px rgba(0,0,0,.8)}.champion-panel .reshuffle-btn{margin-top:24px;align-self:center}.app-main{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;padding:24px 32px 40px}@media (max-width: 780px){.app-main{grid-template-columns:1fr}}.player-column{display:flex;flex-direction:column;gap:12px}.youtube-player{background:var(--panel-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);overflow:hidden;box-shadow:0 12px 40px #00000073}.youtube-player-frame-wrap{position:relative;width:100%;aspect-ratio:16 / 9;background:#000}.youtube-player-frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#000}.youtube-player-controls{display:flex;align-items:center;padding:18px 22px}.transport-group{flex:1;display:flex;align-items:center;justify-content:center;gap:24px}.volume-control{display:flex;align-items:center;gap:8px}.volume-slider{width:80px;accent-color:var(--teal)}@media (max-width: 480px){.volume-slider{width:56px}}.transport-btn{background:transparent;border:none;color:var(--gold-bright);padding:8px;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .15s,transform .1s}.transport-btn:hover{opacity:1;transform:scale(1.08)}.transport-btn svg{width:22px;height:22px;fill:currentColor}.play-btn{background:var(--teal);border:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy-900);box-shadow:0 4px 16px #0ac8b966;transition:transform .12s,box-shadow .12s}.play-btn svg{width:22px;height:22px;fill:currentColor}.play-btn:hover{transform:scale(1.06);box-shadow:0 6px 22px #0ac8b98c}.notice{padding:8px 12px;background:#c8aa6e1f;border:1px solid var(--gold);color:var(--gold-bright);font-size:13px}.reshuffle-btn{align-self:flex-start;padding:16px 34px;background:transparent;border:2px solid var(--teal);color:var(--teal);text-transform:uppercase;font-size:17px;font-weight:600;letter-spacing:.1em;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.reshuffle-btn:hover{background:var(--teal);color:var(--navy-900)}.tracklist-column{display:flex;flex-direction:column;gap:16px;min-height:0}.suggest-songs-btn{align-self:center;display:inline-block;text-decoration:none;text-align:center}.track-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:560px;overflow-y:auto}.track-list li{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.06)}.track-list li:hover{background:var(--panel-glass-hover);border-color:#ffffff26}.track-list li.active{border-color:var(--teal);background:#0f3c50e0}.track-index{width:22px;color:var(--text-dim);font-size:13px;text-align:right;flex-shrink:0}.track-list li.active .track-index{color:var(--teal)}.track-info{flex:1;min-width:0;display:flex;flex-direction:column}.track-title{color:var(--gold-bright);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{color:var(--text-dim);font-size:12px}.track-external{flex-shrink:0;color:var(--text-dim);text-decoration:none;font-size:14px}.track-external:hover{color:var(--teal)}