:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0e1a;--panel:#ffffff0d;--panel-2:#ffffff14;--line:#ffffff1a;--text:#e6e9f0;--muted:#e6e9f08c;--accent:#5b8cff;--green:#6ad48a;--yellow:#f0c674;--red:#e06c75;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% -10%, #1a2138 0%, var(--bg) 55%);min-height:100vh;color:var(--text);margin:0}#root{min-height:100vh}h1,h2,h3{letter-spacing:.02em;margin:0}h1{font-size:2.6rem}.meta{color:var(--muted);margin:0;font-size:.85rem}.hint{color:var(--yellow);font-size:.9rem}.screen{flex-direction:column;gap:1.25rem;width:min(720px,100%);margin:0 auto;padding:2rem 1.25rem 4rem;display:flex}.screen--center{text-align:center;justify-content:center;align-items:center;min-height:80vh}.room{min-height:100vh}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}.topbar__status{color:var(--muted);align-items:center;gap:.5rem;font-size:.85rem;display:inline-flex}.btn{border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;border-radius:10px;padding:.65rem 1.2rem;font-size:1rem;transition:transform 80ms,background .15s,border-color .15s}.btn:hover{background:var(--panel-2)}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:#fff;border-color:#0000;font-weight:600}.btn--primary:hover{background:#6e9bff}.btn--ghost{background:0 0}.btn--big{padding:.9rem 2.4rem;font-size:1.15rem}.btn--sm{padding:.4rem .9rem;font-size:.85rem}.status{background:var(--panel);border-radius:999px;align-items:center;gap:.6rem;padding:.6rem 1.2rem;display:inline-flex}.dot{background:var(--yellow);border-radius:50%;flex-shrink:0;width:.7rem;height:.7rem}.dot.connected{background:var(--green)}.dot.connecting{background:var(--yellow)}.dot.disconnected{background:var(--red)}.badge{background:var(--panel-2);text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:.3rem .8rem;font-size:.8rem;display:inline-block}.badge--error{color:var(--red);background:#e06c7533}.landing{gap:1.75rem}.field{text-align:left;flex-direction:column;gap:.4rem;width:min(360px,100%);display:flex}.field span{color:var(--muted);font-size:.85rem}input{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:.7rem .9rem;font-size:1rem}input:focus{border-color:var(--accent);outline:none}.landing-block{flex-direction:column;gap:.8rem;width:min(520px,100%);display:flex}.mode-grid{gap:.8rem;display:grid}.mode-card{text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;border-radius:14px;flex-direction:column;gap:.35rem;padding:1rem 1.2rem;transition:border-color .15s,background .15s;display:flex}.mode-card:hover{border-color:var(--accent);background:var(--panel-2)}.mode-card strong{font-size:1.1rem}.mode-card__cap{color:var(--accent);font-size:.8rem}.divider{color:var(--muted);text-transform:uppercase;letter-spacing:.15em;font-size:.85rem}.join-row{gap:.6rem;display:flex}.code-input{text-transform:uppercase;letter-spacing:.3em;text-align:center;flex:1;font-weight:600}.lobby-head{justify-content:space-between;align-items:center;gap:1rem;display:flex}.code-chip{border:1px solid var(--line);background:var(--panel);color:var(--text);letter-spacing:.2em;cursor:pointer;border-radius:10px;flex-direction:column;align-items:flex-end;gap:.15rem;padding:.5rem .9rem;font-weight:700;display:inline-flex}.code-chip__hint{letter-spacing:.05em;color:var(--muted);font-size:.65rem;font-weight:400}.player-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.player-row{background:var(--panel);border:1px solid #0000;border-radius:12px;align-items:center;gap:.75rem;padding:.7rem 1rem;display:flex}.player-row.is-ready{border-color:#6ad48a66}.player-row__name{flex:1;align-items:center;gap:.5rem;display:flex}.player-row__status{color:var(--muted);font-size:.85rem}.player-row__kick{border:1px solid var(--line);width:1.8rem;height:1.8rem;color:var(--muted);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:.9rem;line-height:1;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.player-row__kick:hover{color:var(--red);border-color:var(--red);background:#e06c751f}.tag{text-transform:uppercase;letter-spacing:.08em;background:var(--panel-2);color:var(--muted);border-radius:6px;padding:.1rem .4rem;font-size:.65rem}.tag--you{color:#aac3ff;background:#5b8cff40}.lobby-actions{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.phase{gap:.5rem}.team-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1rem;display:grid}.team-panel{border:1px solid var(--line);background:var(--panel);border-top:3px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem}.team-panel--blue{border-top-color:var(--accent)}.team-panel--red{border-top-color:var(--red)}.team-panel__title{align-items:center;gap:.5rem;margin-bottom:.9rem;font-size:1.05rem;display:flex}.team-roster{flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.team-roster__row{background:var(--panel-2);border-radius:10px;align-items:center;gap:.6rem;padding:.55rem .8rem;display:flex}.team-roster__name{flex:1}.team-roster__role{text-transform:uppercase;letter-spacing:.06em;color:#aac3ff;background:#5b8cff2e;border-radius:999px;padding:.15rem .6rem;font-size:.8rem}.team-roster__role.is-hidden{background:var(--panel);color:var(--muted);text-transform:none;letter-spacing:0}.team-roster__role.has-icon{border:1px solid var(--line);background:#ffffff0d;justify-content:center;align-items:center;padding:.25rem;display:inline-flex}.role-icon{width:22px;height:22px;display:block}.team-grid--split{column-gap:2.75rem;position:relative}.team-grid--split .team-panel--blue{animation:.6s cubic-bezier(.2,.8,.25,1) both split-left}.team-grid--split .team-panel--red{animation:.6s cubic-bezier(.2,.8,.25,1) both split-right}.team-grid--split .team-roster__row{opacity:0;animation:.4s both roster-in}.team-vs{border:1px solid var(--line);letter-spacing:.12em;color:var(--muted);opacity:0;pointer-events:none;background:#0a0e1ad9;border-radius:10px;padding:.3rem .7rem;font-size:1.2rem;font-weight:800;animation:.45s cubic-bezier(.2,.9,.3,1.4) .5s both vs-in;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.4)}@keyframes split-left{0%{opacity:0;transform:translate(48px)scale(.96)}to{opacity:1;transform:none}}@keyframes split-right{0%{opacity:0;transform:translate(-48px)scale(.96)}to{opacity:1;transform:none}}@keyframes roster-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes vs-in{to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@media (width<=560px){.team-vs{display:none}}@media (prefers-reduced-motion:reduce){.team-grid--split .team-panel--blue,.team-grid--split .team-panel--red,.team-grid--split .team-roster__row,.team-vs{opacity:1;animation:none}}.team-grid--roles .team-roster__row{opacity:0;animation:.4s both roster-in}.team-grid--roles .team-roster__role{animation:.5s cubic-bezier(.2,.9,.3,1.5) both role-pop}@keyframes role-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.team-grid--roles .team-roster__row,.team-grid--roles .team-roster__role{opacity:1;animation:none}}.champ-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.champ-card{background:var(--panel-2);border:1px solid #0000;border-radius:12px;align-items:center;gap:.75rem;padding:.5rem .7rem;transition:border-color .25s,box-shadow .25s,background .25s;display:flex}.champ-card__portrait{border:1px solid var(--line);background:#ffffff0a;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;overflow:hidden}.champ-card__portrait img{object-fit:cover;width:100%;height:100%}.champ-card__pending{color:var(--muted);font-size:1.4rem;font-weight:700}.champ-card__meta{flex-direction:column;gap:.1rem;min-width:0;display:flex}.champ-card__nick{font-weight:600}.champ-card__champ{color:var(--muted);font-size:.85rem}.champ-card__role{text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line);color:var(--muted);white-space:nowrap;background:#ffffff0d;border-radius:10px;flex-shrink:0;justify-content:center;align-self:center;align-items:center;margin-left:auto;padding:.3rem;font-size:.72rem;display:inline-flex}.champ-card__role--you{background:#5b8cff38;border-color:#5b8cff80;box-shadow:0 0 10px #5b8cff4d}.champ-card.is-revealed .champ-card__role{animation:.4s cubic-bezier(.2,.9,.3,1.5) .2s both role-pop}@media (prefers-reduced-motion:reduce){.champ-card.is-revealed .champ-card__role{animation:none}}.champ-card.is-revealed{transform-origin:top;animation:.55s cubic-bezier(.2,.8,.3,1.05) both champ-flip}.champ-card.is-revealed .champ-card__portrait{animation:.45s .12s both champ-portrait}.champ-card.is-revealed.champ-card--blue{border-color:#5b8cff99;box-shadow:0 0 20px #5b8cff59}.champ-card.is-revealed.champ-card--red{border-color:#e06c7599;box-shadow:0 0 20px #e06c7559}.champ-card.is-revealed .champ-card__champ{color:var(--text)}.champ-card.is-next .champ-card__pending{animation:1s ease-in-out infinite champ-pulse}.champ-card.is-next{border-color:#ffffff40}@keyframes champ-flip{0%{opacity:0;transform:perspective(700px)rotateX(-78deg)}60%{opacity:1}99%{transform:perspective(700px)rotateX(0)}to{opacity:1;transform:none}}@keyframes champ-portrait{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes champ-pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}.champ-card.is-offline,.team-roster__row.is-offline,.player-row.is-offline{opacity:.5}@media (prefers-reduced-motion:reduce){.champ-card.is-revealed,.champ-card.is-revealed .champ-card__portrait,.champ-card.is-next .champ-card__pending{animation:none}}.rune-page{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:.5rem;display:grid}.rune-tree{border:1px solid var(--line);background:var(--panel);border-top:3px solid var(--line);border-radius:16px;flex-direction:column;gap:.8rem;padding:1.1rem 1.2rem;display:flex}.rune-tree--primary{border-top-color:var(--accent)}.rune-tree--secondary{border-top-color:var(--yellow)}.rune-tree__title{align-items:center;gap:.5rem;font-size:1.05rem;display:flex}.rune-tree__title img{width:26px;height:26px}.rune-row{flex-direction:column;gap:.45rem;display:flex}.rune-chip{background:var(--panel-2);border-radius:10px;align-items:center;gap:.6rem;padding:.4rem .6rem;display:flex}.rune-chip img{flex-shrink:0;width:32px;height:32px}.rune-chip--big{background:#5b8cff24;border:1px solid #5b8cff59}.rune-chip--big img{width:44px;height:44px}.rune-chip__name{font-size:.9rem}.rune-shards{flex-wrap:wrap;gap:.4rem;margin-top:.2rem;display:flex}.rune-shard{color:var(--yellow);background:#f0c67429;border-radius:999px;padding:.25rem .6rem;font-size:.75rem}.phase-nav{border-top:1px solid var(--line);margin-top:1.25rem;padding-top:1rem}.item-block{flex-direction:column;gap:.7rem;margin-top:.5rem;display:flex}.items-hero{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:16px;align-items:center;gap:1rem;padding:1rem 1.2rem;display:flex}.items-hero--blue{border-left-color:var(--accent);box-shadow:0 0 20px #5b8cff2e}.items-hero--red{border-left-color:var(--red);box-shadow:0 0 20px #e06c752e}.items-hero__portrait{border:1px solid var(--line);background:#ffffff0a;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;display:flex;overflow:hidden}.items-hero__portrait img{object-fit:cover;width:100%;height:100%}.items-hero__info{flex-direction:column;gap:.1rem;min-width:0;display:flex}.items-hero__nick{font-size:1.1rem;font-weight:700}.items-hero__champ{color:var(--text)}.items-hero__team{color:var(--muted);font-size:.78rem}.items-hero__role{border:1px solid var(--line);background:#ffffff0d;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;margin-left:auto;display:inline-flex}.items-hero__role .role-icon{width:28px;height:28px}.rune-strip{background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.7rem .9rem;display:flex}.rune-strip__keystone{background:#00000040;border-radius:8px;width:44px;height:44px}.rune-strip__icon,.rune-strip__style{border-radius:6px;width:30px;height:30px}.rune-strip__style{opacity:.85}.rune-strip__sep{background:var(--line);align-self:stretch;width:1px;min-height:28px;margin:0 .25rem}.item-inventory{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.5rem;display:grid}.item-inv-cell{aspect-ratio:1;border:1px solid var(--line);background:#ffffff0a;border-radius:10px;overflow:hidden}.item-inv-cell img{object-fit:cover;width:100%;height:100%}.item-modal{z-index:50;position:fixed;inset:0;overflow-y:auto}.item-modal__backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#05040acc;animation:.3s both backdrop-in;position:fixed;inset:0}.item-modal__content{flex-direction:column;justify-content:center;align-items:center;gap:.6rem;width:100%;max-width:860px;min-height:100%;margin:0 auto;padding:1.5rem;display:flex;position:relative}.item-modal__title{font-size:1.5rem;animation:.3s both backdrop-in}.item-cards{perspective:1100px;grid-template-columns:repeat(3,minmax(0,1fr));place-items:stretch center;gap:1.5rem;width:100%;margin-top:.75rem;display:grid}.item-pick{flex-direction:column;align-items:center;gap:.9rem;width:100%;max-width:250px;height:100%;animation:.45s cubic-bezier(.2,.9,.3,1.3) both card-pop;display:flex}.item-pick:first-child{animation-delay:50ms}.item-pick:nth-child(2){animation-delay:.14s}.item-pick:nth-child(3){animation-delay:.23s}.item-card{width:100%;min-height:400px;color:var(--text);cursor:pointer;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--scale,1));will-change:transform;background:linear-gradient(#181023 0%,#0c0913 100%);border:none;border-radius:20px;flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:1.1rem;padding:2rem 1.3rem;transition:transform .18s,box-shadow .2s;display:flex;position:relative;box-shadow:0 0 22px #be82ff66,inset 0 0 26px #965adc1f}.item-card:before{content:"";-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(155deg,#f3ddff 0%,#c79bf0 45%,#7d4fb8 100%);border-radius:20px;padding:2px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.item-card:after{content:"";background:radial-gradient(circle at var(--mx,50%) var(--my,50%), #ffffff29, transparent 45%);opacity:0;pointer-events:none;border-radius:20px;transition:opacity .2s;position:absolute;inset:0}.item-card:hover{--scale:1.04;box-shadow:0 12px 40px #d296ff8c,inset 0 0 26px #aa6ef033}.item-card:hover:after{opacity:1}.item-card__portrait{background:#ffffff0a;border:1px solid #d8b4ff73;border-radius:14px;width:88px;height:88px;overflow:hidden;box-shadow:0 0 14px #a064e659}.item-card__portrait img{object-fit:cover;width:100%;height:100%}.item-card__name{letter-spacing:.01em;text-align:center;font-size:1.15rem;font-weight:700;line-height:1.3}.item-card__desc{color:var(--muted);text-align:center;white-space:pre-line;-webkit-line-clamp:9;line-clamp:9;-webkit-box-orient:vertical;font-size:.78rem;line-height:1.5;display:-webkit-box;overflow:hidden}.item-reroll{color:#e8d6ff;cursor:pointer;background:#7d4fb82e;border:1px solid #d8b4ff73;border-radius:999px;align-items:center;gap:.5rem;padding:.55rem 1.1rem;font-size:.9rem;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex}.item-reroll:hover:not(:disabled){background:#a064e652;border-color:#e6c8ffb3}.item-reroll:disabled{opacity:.4;cursor:default}.item-reroll__icon{font-size:1.1rem;line-height:1}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes card-pop{0%{opacity:0;transform:translateY(34px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=640px){.item-cards{grid-template-columns:1fr;gap:1.1rem}.item-card{min-height:300px}}@media (prefers-reduced-motion:reduce){.item-pick,.item-modal__backdrop,.item-modal__title{animation:none}.item-card{transition:box-shadow .2s;transform:none!important}}