@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700;800&family=Orbitron:wght@400;500;600;700;800;900&display=swap");:root{--bg:#020a13;--bg-2:#091428;--panel:rgba(1,10,19,0.85);--panel-2:rgba(10,25,47,0.8);--panel-solid:#0a1628;--panel-2-solid:#0d1f3c;--border:rgba(30,55,90,0.5);--border-focus:#c89b3c;--text:#f0e6d2;--text-bright:#ffffff;--muted:#5b7a8a;--accent:#c89b3c;--accent-rgb:200,155,60;--accent-2:#0ac8b9;--accent-2-rgb:10,200,185;--accent-3:#c8aa6e;--win:#0ac8b9;--win-rgb:10,200,185;--loss:#e84057;--loss-rgb:232,64,87;--purple:#9b59b6;--blue-glow:#0397ab;--gold-glow:rgba(200,155,60,0.6);--radius:8px;--radius-sm:6px;--radius-lg:12px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1);--font-display:"Orbitron","Outfit",sans-serif;--font-body:"Outfit","Space Grotesk",sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.6;scrollbar-width:thin;scrollbar-color:var(--border) var(--bg);overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(1,36,60,.8) 0,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 0,rgba(200,155,60,.08) 0,transparent 50%),radial-gradient(ellipse 60% 40% at 20% 100%,rgba(10,200,185,.05) 0,transparent 50%);pointer-events:none;z-index:0}body>*{position:relative;z-index:1}@keyframes float-particle{0%,to{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.6}90%{opacity:.6}50%{transform:translateY(-300px) translateX(50px)}}@keyframes float-particle-2{0%,to{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.4}90%{opacity:.4}50%{transform:translateY(-250px) translateX(-30px)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-3)}.container{max-width:1280px;margin:0 auto;padding:30px 24px 100px}h1,h2,h3,h4{font-family:var(--font-body);font-weight:800;letter-spacing:-.01em;margin:0 0 12px;color:var(--text)}h2{font-size:20px;text-transform:uppercase;letter-spacing:.04em}.site-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;margin:-30px -24px 24px;background:linear-gradient(180deg,rgba(1,10,19,.95),rgba(1,10,19,.6));border-bottom:1px solid var(--accent);position:relative}.site-header:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 15px var(--gold-glow),0 0 30px var(--gold-glow)}.site-title{font-family:var(--font-display);font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;background:linear-gradient(180deg,#f0e6d2,#c8aa6e 50%,#c89b3c);-webkit-background-clip:text;filter:drop-shadow(0 0 20px rgba(200,155,60,.4));line-height:1.2}.site-title,.site-title span{-webkit-text-fill-color:transparent}.site-title span{background:linear-gradient(180deg,#0ac8b9,#0397ab);-webkit-background-clip:text;filter:drop-shadow(0 0 20px rgba(10,200,185,.5))}.subtitle{color:var(--muted);font-size:14px;font-weight:500;margin-top:-6px;margin-bottom:24px;letter-spacing:.02em}.lol-border{position:relative}.lol-border:before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:linear-gradient(135deg,var(--accent) 0,transparent 40%,transparent 60%,var(--accent-2) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:xor;pointer-events:none}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 24px rgba(0,0,0,.4);transition:var(--transition);position:relative}.panel:hover{border-color:rgba(200,155,60,.3)}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}input,select{font:inherit;color:var(--text);background:rgba(1,10,19,.9);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;outline:none;transition:var(--transition);font-family:var(--font-body)}input::placeholder{color:var(--muted)}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(200,155,60,.15),0 0 20px rgba(200,155,60,.1);background:rgba(1,10,19,.95)}button{cursor:pointer;background:linear-gradient(180deg,#c89b3c,#785a28);border:1px solid #c8aa6e;color:#010a13;font-weight:700;font-family:var(--font-body);letter-spacing:.04em;text-transform:uppercase;font-size:12px;padding:10px 20px;border-radius:var(--radius-sm);box-shadow:0 0 10px rgba(200,155,60,.2),inset 0 1px 0 rgba(255,255,255,.15);transition:var(--transition);position:relative;overflow:hidden}button:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 50%);pointer-events:none}button:hover{transform:translateY(-1px);box-shadow:0 0 20px rgba(200,155,60,.4),0 4px 15px rgba(200,155,60,.3),inset 0 1px 0 rgba(255,255,255,.2);filter:brightness(1.15);border-color:#f0e6d2}button:active{transform:translateY(0);filter:brightness(.95)}button:disabled{opacity:.3;transform:none;box-shadow:none;cursor:not-allowed;filter:grayscale(.5)}button.ghost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none;text-transform:none;font-weight:600}button.ghost:before{display:none}button.ghost:hover{background:rgba(200,155,60,.08);border-color:var(--accent);box-shadow:0 0 10px rgba(200,155,60,.1);color:var(--accent-3)}button.danger{background:transparent;color:var(--loss);border:1px solid rgba(232,64,87,.4);font-size:12px;padding:4px 8px;border-radius:4px;box-shadow:none;text-transform:none}button.danger:before{display:none}button.danger:hover{background:rgba(232,64,87,.1);box-shadow:0 0 10px rgba(232,64,87,.2);border-color:var(--loss)}.tabs{display:flex;gap:0;flex-wrap:wrap;margin-bottom:24px;border-bottom:2px solid var(--border);padding-bottom:0}.tab,.tabs{position:relative}.tab{background:transparent;color:var(--muted);font-weight:600;font-family:var(--font-body);font-size:13px;padding:12px 20px;border:none;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;transition:var(--transition);text-transform:uppercase;letter-spacing:.06em}.tab:before{display:none}.tab:hover{color:var(--text);transform:none;box-shadow:none;background:rgba(200,155,60,.05)}.tab.active{color:var(--accent-3);border-bottom-color:var(--accent);text-shadow:0 0 10px rgba(200,155,60,.5);background:linear-gradient(180deg,rgba(200,155,60,.08),transparent)}.tab.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--accent);box-shadow:0 0 8px var(--gold-glow)}.user-chip{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-weight:600;font-size:13px;transition:var(--transition);position:relative}.user-chip:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--accent);border-radius:0 2px 2px 0;opacity:0;transition:var(--transition)}.user-chip:hover{border-color:var(--accent);box-shadow:0 0 15px rgba(200,155,60,.1)}.user-chip:hover:before{opacity:1}.muted{color:var(--muted)}.win{color:var(--win);text-shadow:0 0 10px rgba(10,200,185,.3)}.loss{color:var(--loss);text-shadow:0 0 10px rgba(232,64,87,.3)}.gold{color:var(--accent-3);text-shadow:0 0 8px rgba(200,155,60,.3)}.grid{display:grid;grid-gap:20px;gap:20px}.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(480px,1fr))}.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.card{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:22px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 12px rgba(0,0,0,.3);position:relative;overflow:hidden}.card,.card:before{transition:var(--transition)}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,155,60,.3),transparent);opacity:0}.card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.4),0 0 20px rgba(200,155,60,.08);border-color:rgba(200,155,60,.3)}.card:hover:before{opacity:1}.gamer-card{border-top:2px solid var(--accent)}.gamer-card:hover{box-shadow:0 8px 25px rgba(200,155,60,.15),0 0 30px rgba(200,155,60,.1);border-color:var(--accent)}.champ{display:flex;align-items:center;gap:12px}.champ img{width:44px;height:44px;border-radius:var(--radius-sm);border:2px solid var(--accent);box-shadow:0 0 10px rgba(200,155,60,.2);transition:var(--transition)}.champ:hover img{box-shadow:0 0 15px rgba(200,155,60,.4)}.champ.sm img{width:32px;height:32px;border-width:1.5px}table{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}td,th{padding:10px 14px;border-bottom:1px solid rgba(30,55,90,.3);background:rgba(1,10,19,.4)}th{color:var(--accent-3);font-family:var(--font-body);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.1em;background:rgba(1,10,19,.7);border-bottom:1px solid var(--accent)}tr:last-child td{border-bottom:none}tr:hover td{background:rgba(200,155,60,.03)}.badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-sm);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:rgba(1,10,19,.6);border:1px solid var(--border)}.badge.win{color:var(--win);border-color:rgba(10,200,185,.4);background:rgba(10,200,185,.08)}.badge.loss{color:var(--loss);border-color:rgba(232,64,87,.4);background:rgba(232,64,87,.08)}.progress{height:6px;background:rgba(1,10,19,.8);border-radius:3px;overflow:hidden;margin:12px 0;border:1px solid rgba(30,55,90,.3);position:relative}.progress>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-3));box-shadow:0 0 8px rgba(200,155,60,.5);border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative}.progress>div:after{content:"";position:absolute;right:0;top:-1px;bottom:-1px;width:4px;background:#fff;border-radius:2px;box-shadow:0 0 6px var(--accent);animation:progress-glow 1.5s ease-in-out infinite}@keyframes progress-glow{0%,to{opacity:.5}50%{opacity:1}}.empty{color:var(--muted);text-align:center;padding:50px 0;font-size:15px;font-style:italic}.kbd-options{display:grid;grid-gap:10px;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:12px}.kbd-options button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);text-align:left;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.2);text-transform:none;font-weight:600}.kbd-options button:before{display:none}.kbd-options button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px);background:rgba(10,25,47,.9);box-shadow:0 4px 12px rgba(200,155,60,.15)}.kbd-options button.correct{border-color:var(--win);color:var(--win);background:rgba(10,200,185,.1);box-shadow:0 0 15px rgba(10,200,185,.2)}.kbd-options button.wrong{border-color:var(--loss);color:var(--loss);background:rgba(232,64,87,.1);box-shadow:0 0 15px rgba(232,64,87,.2)}.stat-line{display:flex;justify-content:space-between;align-items:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.gamer-tier{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-sm);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid transparent;text-align:center;font-family:var(--font-body);position:relative}.tier-ur{background:rgba(91,122,138,.1);color:var(--muted);border-color:rgba(91,122,138,.3)}.tier-apprentice{background:rgba(10,200,185,.08);color:var(--accent-2);border-color:rgba(10,200,185,.3);box-shadow:0 0 8px rgba(10,200,185,.1)}.tier-god{background:linear-gradient(135deg,rgba(200,155,60,.2),rgba(200,170,110,.1));color:var(--accent-3);border-color:var(--accent);box-shadow:0 0 20px rgba(200,155,60,.3);animation:tier-god-pulse 3s ease-in-out infinite}.tier-carry{background:linear-gradient(135deg,rgba(10,200,185,.12),rgba(3,151,171,.06));color:var(--win);border-color:rgba(10,200,185,.4);box-shadow:0 0 12px rgba(10,200,185,.2)}.tier-feeder{background:linear-gradient(135deg,rgba(232,64,87,.12),rgba(185,28,28,.06));color:var(--loss);border-color:rgba(232,64,87,.4);box-shadow:0 0 12px rgba(232,64,87,.2);animation:tier-feeder-shake .5s ease-in-out}@keyframes tier-god-pulse{0%,to{box-shadow:0 0 10px rgba(200,155,60,.2);filter:brightness(1)}50%{box-shadow:0 0 25px rgba(200,155,60,.5),0 0 50px rgba(200,155,60,.2);filter:brightness(1.1)}}@keyframes tier-feeder-shake{0%,to{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px rgba(200,155,60,.25);filter:brightness(1)}50%{box-shadow:0 0 20px rgba(200,155,60,.55);filter:brightness(1.1)}}.win-loss-container{margin:16px 0;background:rgba(1,10,19,.5);padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border)}.win-loss-bar{display:flex;height:8px;background:rgba(1,10,19,.8);border-radius:4px;overflow:hidden;border:1px solid rgba(30,55,90,.2)}.win-fill{background:linear-gradient(90deg,#0ac8b9,#0ce8d8);box-shadow:0 0 8px rgba(10,200,185,.4)}.loss-fill,.win-fill{height:100%;transition:width .8s cubic-bezier(.4,0,.2,1)}.loss-fill{background:linear-gradient(90deg,#e84057,#ff6b7a);box-shadow:0 0 8px rgba(232,64,87,.4)}.win-loss-text{display:flex;justify-content:center;align-items:center;margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.05em;font-family:var(--font-body)}summary{outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:color .2s ease;cursor:pointer}summary:hover{color:var(--accent-3)}footer{text-align:center;border-top:1px solid var(--border);padding-top:24px;position:relative}footer:before{content:"";position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.game-select-card{transition:var(--transition);border:1.5px solid var(--border);cursor:pointer;overflow:hidden;position:relative}.game-select-card:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transition:transform .3s ease}.game-select-card:hover{transform:translateY(-6px) scale(1.01);border-color:var(--accent);box-shadow:0 12px 30px rgba(200,155,60,.15),0 0 40px rgba(200,155,60,.05)}.game-select-card:hover:after{transform:scaleX(1)}.duel-player-card{transition:var(--transition)}.duel-player-card:hover:not(.revealed){transform:translateY(-4px) scale(1.02);border-color:var(--accent);box-shadow:0 8px 25px rgba(200,155,60,.15)}.duel-player-card.selected{border-color:var(--accent)!important;box-shadow:0 0 20px rgba(200,155,60,.3)!important}.quick-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:16px;gap:16px;margin-bottom:24px}.quick-stat{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;position:relative;overflow:hidden;transition:var(--transition)}.quick-stat:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}.quick-stat:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(200,155,60,.1)}.quick-stat .stat-icon{font-size:24px;margin-bottom:6px}.quick-stat .stat-value{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text-bright);line-height:1.2}.quick-stat .stat-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fade-in{animation:fade-in .4s ease-out}.fun-fact-banner{background:linear-gradient(135deg,rgba(200,155,60,.1),rgba(10,200,185,.05));border:1px solid rgba(200,155,60,.2);border-radius:var(--radius);padding:14px 20px;margin-bottom:20px;display:flex;align-items:center;gap:14px;animation:slide-up .5s ease-out;transition:var(--transition);cursor:pointer;min-height:54px}.fun-fact-banner:hover{border-color:var(--accent);box-shadow:0 0 15px rgba(200,155,60,.1)}.fun-fact-banner .fact-icon{font-size:22px;flex-shrink:0}.fun-fact-banner .fact-text{font-size:13px;color:var(--text);font-weight:500}.fun-fact-banner .fact-text strong{color:var(--accent-3)}.potd-banner{background:linear-gradient(135deg,rgba(200,155,60,.15),rgba(200,170,110,.05));border:1px solid var(--accent);border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;animation:slide-up .6s ease-out}.potd-banner:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent));animation:shimmer 3s linear infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.potd-banner .potd-icon{font-size:36px;text-shadow:0 0 20px rgba(200,155,60,.5)}.potd-banner .potd-info{flex:1 1}.potd-banner .potd-name{font-family:var(--font-body);font-size:16px;font-weight:800;color:var(--accent-3)}.potd-banner .potd-detail{font-size:12px;color:var(--muted);margin-top:2px}.potd-banner .potd-stat{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--win);text-shadow:0 0 10px rgba(10,200,185,.3)}.shame-wall{background:linear-gradient(135deg,rgba(232,64,87,.08),rgba(1,10,19,.9));border:1px solid rgba(232,64,87,.2);border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:14px;animation:slide-up .7s ease-out;transition:var(--transition)}.shame-wall:hover{border-color:rgba(232,64,87,.4)}.shame-wall .shame-icon{font-size:28px}.shame-wall .shame-text{font-size:13px;color:var(--text);font-weight:500}.shame-wall .shame-text strong{color:var(--loss)}.lang-toggle{background:transparent!important;border:1px solid var(--border)!important;color:var(--text)!important;padding:6px 14px!important;font-size:12px!important;font-weight:600!important;text-transform:none!important;box-shadow:none!important;border-radius:var(--radius-sm)!important;letter-spacing:0!important}.lang-toggle:before{display:none!important}.lang-toggle:hover{border-color:var(--accent)!important;background:rgba(200,155,60,.05)!important;transform:none!important}@media (max-width:768px){.container{padding:16px 12px 80px}.site-header{margin:-16px -12px 16px;padding:12px 16px;flex-direction:column;gap:8px;text-align:center}.site-title{font-size:22px}.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}.tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.tab{font-size:11px;padding:10px 12px;white-space:nowrap}.quick-stats{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.site-title{font-size:18px}.quick-stats{grid-template-columns:1fr}}