:root{--lol-blue-dark: #091428;--lol-blue: #0A1428;--lol-blue-light: #0A323C;--lol-blue-accent: #0397AB;--lol-gold: #C89B3C;--lol-gold-light: #F0E6D2;--lol-grey: #5B5A56;--lol-grey-dark: #3C3C41;--lol-red: #CF2847;--lol-green: #1E8B30}body{background-color:var(--lol-blue-dark);color:var(--lol-gold-light);font-family:Beaufort for LOL,Spiegel,Helvetica Neue,Arial,sans-serif;margin:0;padding:0}section.streamer-home{display:flex;flex-direction:column;align-items:center;width:100%;gap:20px;background-image:url("./media/lol-background-IDT4SVFT.png");background-size:cover;background-attachment:fixed;background-position:center;min-height:100vh;padding:20px 0}section.search{margin:20px auto;padding:20px;max-width:1300px;width:100%;background:#0a1428e6;border-radius:0;box-shadow:0 0 15px #c89b3c80;border:1px solid var(--lol-gold);position:relative}section.search:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,var(--lol-gold),transparent,var(--lol-gold));z-index:-1;border-radius:2px;opacity:.3}form{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:1300px;margin:0 auto;width:100%}section.results{display:grid;grid-template-columns:1fr;gap:30px;max-width:1300px;width:100%;padding:20px;justify-content:center}.card{background:var(--lol-blue);border:1px solid var(--lol-gold);border-radius:0;box-shadow:0 5px 15px #091428cc;overflow:hidden;min-width:300px;max-width:100%;height:auto;display:flex;flex-direction:column;position:relative;transition:transform .3s ease,box-shadow .3s ease}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,transparent,var(--lol-gold),transparent)}.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0397ab66}@media (max-width: 600px){.card{margin-bottom:20px}}label{display:block;font-weight:700;margin-bottom:8px;color:var(--lol-gold);text-transform:uppercase;font-size:.85rem;letter-spacing:1px}input,select{display:block;width:100%;padding:12px;margin-top:5px;background-color:#091428b3;border:1px solid var(--lol-grey);border-radius:0;box-sizing:border-box;transition:border-color .3s ease,box-shadow .3s ease;color:var(--lol-gold-light)}input:focus,select:focus{border-color:var(--lol-blue-accent);outline:none;box-shadow:0 0 8px #0397ab80}datalist{margin-top:0}.selected-items{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.item-tag{background:var(--lol-blue-light);padding:5px 12px;border-radius:0;display:flex;align-items:center;font-size:.9rem;color:var(--lol-gold-light);border-left:2px solid var(--lol-gold)}.item-tag button{background:none;border:none;color:var(--lol-gold);font-size:1.2rem;margin-left:8px;cursor:pointer;transition:color .3s ease}.item-tag button:hover{color:var(--lol-red)}ul.suggestions{list-style:none;padding:0;margin:10px 0 0;border:1px solid var(--lol-grey);border-radius:0;max-height:150px;overflow-y:auto;background-color:var(--lol-blue);scrollbar-width:thin;scrollbar-color:var(--lol-gold) var(--lol-blue-dark)}ul.suggestions::-webkit-scrollbar{width:8px}ul.suggestions::-webkit-scrollbar-track{background:var(--lol-blue-dark)}ul.suggestions::-webkit-scrollbar-thumb{background-color:var(--lol-gold)}ul.suggestions li{padding:10px 15px;cursor:pointer;transition:background-color .3s ease,color .3s ease;border-bottom:1px solid rgba(240,230,210,.1)}ul.suggestions li:hover{background-color:var(--lol-blue-light);color:var(--lol-gold)}button.primary{padding:12px 24px;background:linear-gradient(to bottom,var(--lol-gold),#A17A2C);color:var(--lol-blue-dark);border:none;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;font-size:.9rem}button.primary:hover{background:linear-gradient(to bottom,#D6AF6D,var(--lol-gold));box-shadow:0 0 10px #c89b3c99}button.primary:active{transform:scale(.98)}.lane-selection div{display:flex;align-items:center;width:100%;margin:8px 0;padding:5px;transition:background-color .3s ease}.lane-selection div:hover{background-color:var(--lol-blue-light)}.lane-selection input[type=radio]{flex-shrink:0;width:20px;margin:5px;accent-color:var(--lol-gold)}.lane-selection label{flex-grow:1;margin:5px;text-align:left;text-transform:none;font-size:1rem;letter-spacing:normal}h1,h2,h3,h4,h5,h6{color:var(--lol-gold);text-transform:uppercase;letter-spacing:2px;margin-bottom:20px;position:relative;display:inline-block}h1:after,h2:after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--lol-gold),transparent)}
