.mode-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}.mode-tabs button{display:grid;grid-template-columns:35px 1fr;text-align:left;align-items:center;gap:3px 12px;border:1px solid var(--line);background:#12191f;padding:16px 22px;position:relative}.mode-tabs button>span{grid-row:span 2;font:600 23px var(--display);color:#566973}.mode-tabs strong{font-size:15px}.mode-tabs small{font-size:11px;color:var(--muted)}.mode-tabs .selected{background:#1b261e;border-color:#9ec74180}.mode-tabs .selected>span{color:var(--lime)}.mode-tabs .selected:after{content:'';position:absolute;left:0;top:20%;height:60%;width:3px;background:var(--lime)}.intro{padding-top:28px}.site-header nav{gap:24px}
.daily-banner{display:grid;grid-template-columns:1fr auto;gap:18px 28px;border:1px solid #829d4655;background:linear-gradient(120deg,#22301d99,#121a20);padding:25px 28px;margin-bottom:22px}.daily-banner h2,.friend-banner h2{font-size:25px;margin:8px 0}.daily-banner p,.friend-banner p{font-size:12px;color:var(--muted)}.daily-clock{text-align:right}.daily-clock>span{display:block;font-size:11px;color:var(--muted)}.daily-clock>strong{display:block;font:600 34px var(--display);color:var(--lime);letter-spacing:3px;font-variant-numeric:tabular-nums}.daily-clock .text-button{font-size:11px}.daily-progress{grid-column:1/-1;display:flex;gap:7px;align-items:center}.daily-progress>span{display:grid;place-items:center;width:30px;height:30px;font:600 14px var(--display);background:#10191d;border:1px solid #364335;color:#778879}.daily-progress .spent{background:#344339;color:#b8c5b9}.daily-progress .chosen{background:var(--lime);color:#1b2810;border-color:var(--lime)}.daily-progress>b{margin-left:8px;font-size:12px;color:#c1d3ac}.daily-note{grid-column:1/-1!important;font-size:11px!important}.daily-note .text-button{margin-left:15px;color:var(--lime);padding:0}.daily-exhausted{grid-column:1/-1;padding-top:14px;border-top:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:15px}.daily-exhausted .secondary{flex-shrink:0}.friend-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;margin-bottom:22px;background:linear-gradient(110deg,#152b33,#14201e);border:1px solid #44788755}.friend-banner .eyebrow{color:#89cbd6}.friend-banner h2{overflow-wrap:anywhere}
.lineup-stage{display:grid;grid-template-columns:minmax(0,1fr) 280px;border:1px solid #354236;background:#101a1a;overflow:hidden}.rift-field{position:relative;min-height:515px;background:#101c20 url('./rift.svg') center/cover no-repeat;isolation:isolate}.rift-label{position:absolute;left:24px;top:19px;color:#b6cdad;font:500 11px var(--display);letter-spacing:2px;display:flex;gap:9px;align-items:center}.rift-label i{height:5px;width:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #c3f451}.rift-caption{position:absolute;bottom:16px;left:24px;color:#708479;font-size:10px;letter-spacing:3px}.rift-card{position:absolute;transform:translate(-50%,-50%);width:126px;min-height:156px;border:1px solid #6d8c6460;background:#101b20e8;box-shadow:0 10px 24px #0005;z-index:1;padding-bottom:8px;transition:border-color .2s}.rift-card.filled{border-color:#9abd705e}.rift-card:hover{border-color:#b3d881}.rift-TOP{left:18%;top:27%}.rift-JGL{left:32%;top:67%}.rift-MID{left:51%;top:42%}.rift-ADC{left:73%;top:70%}.rift-SUP{left:89%;top:80%}.rift-role{display:flex;gap:5px;align-items:center;padding:5px 7px;background:#182820;border-bottom:1px solid #6d8c6430;font-size:10px;color:#cadcbd}.rift-role svg{width:13px;height:13px;stroke:#c4dfad}.rift-role small{font:600 10px var(--display);color:#779078;margin-left:auto}.rift-face{display:block;width:100%;padding:0;background:transparent}.rift-portrait{display:block;position:relative;overflow:hidden;height:86px;background:linear-gradient(145deg,#28433f80,#15222c)}.rift-portrait img,.compare-portrait img,.duel-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.rift-portrait .portrait-fallback{font-size:37px}.rift-card>strong{display:block;font:600 21px/1.15 var(--display);padding:6px 8px 1px;overflow-wrap:anywhere}.rift-meta{display:block;font-size:9px;line-height:1.35;color:#8fa89a;padding:0 8px;min-height:14px;overflow-wrap:anywhere}.rift-rating{position:absolute;right:7px;top:29px;font:700 21px var(--display);color:var(--lime);text-shadow:0 1px 8px #000}.rift-remove{position:absolute;right:-8px;top:-9px;border:1px solid #566a52;border-radius:50%;width:22px;height:22px;line-height:18px;padding:0;background:#15201a;color:#d5e7cc;z-index:3}.rift-vacant{height:86px;display:grid;place-items:center;font-size:27px;color:#6d8a72;background:#15231a55}.rift-card:not(.filled)>strong{font:500 12px var(--font);color:#7f9685;padding-top:10px}.rift-card:not(.filled) .rift-meta{font-size:8px;margin-top:2px;color:#526f5e}
.lineup-insight{padding:29px 24px;border-left:1px solid #354236;background:linear-gradient(160deg,#1d2c22,#121c1e)}.lineup-insight .micro{font-size:10px;letter-spacing:2px;color:#92aa7d}.lineup-insight h3{font-size:19px;line-height:1.6;margin:13px 0 16px}.lineup-meter{display:flex;align-items:center;gap:18px}.lineup-meter>strong{font:600 60px/1 var(--display);color:var(--lime)}.lineup-meter small{font-size:25px;color:#708366}.lineup-meter>span{font-size:11px;color:#a6b89a}.role-progress{display:flex;gap:9px;margin:23px 0}.role-progress>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #4b5d4633;background:#10211d}.role-progress svg{width:17px;height:17px;stroke:#516b5c}.role-progress .ready{background:#a4d23e1f;border-color:#a4d23e55}.role-progress .ready svg{stroke:var(--lime)}.insight-facts>div{display:flex;align-items:center;justify-content:space-between;margin:9px 0;padding-bottom:9px;border-bottom:1px solid #52664333;font-size:11px;color:#9cae94}.insight-facts strong{font:600 23px var(--display);color:#dcebcf}.insight-facts small{font:400 10px var(--font)}.insight-note{color:#778c7c;font-size:10px;line-height:1.8;margin-top:17px}.bond-list{display:flex;flex-direction:column;gap:7px;margin-top:15px}.bond-list span{font-size:10px;color:#c2d5ae;padding:5px 8px;background:#9ab36914;border-left:2px solid #94b665}.invite-lineup{font-size:11px;width:100%;margin-top:21px;padding:11px 8px}.just-picked{animation:join-rift .65s ease-out}@keyframes join-rift{0%{opacity:.25;transform:translate(-50%,-64%) scale(.9);box-shadow:0 0 35px #b9ee6570}60%{border-color:var(--lime)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.replacement-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.replacement-grid article{border:1px solid var(--line);padding:16px;background:#162025}.replacement-grid article:last-child{border-color:#a7d54c66}.compare-portrait{position:relative;display:block;height:190px;margin:12px 0;overflow:hidden;background:#203337}.compare-portrait .portrait-fallback{font-size:70px}.replacement-grid h3{font:600 28px var(--display);overflow-wrap:anywhere}.replacement-grid p{font-size:12px;color:var(--muted)}.replacement-grid strong{font:600 35px var(--display);color:var(--lime)}.replacement-grid strong small{font:400 10px var(--font);color:var(--muted)}.replacement-delta{margin:20px 0;font-size:13px;color:#b2c59b}.modal-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.share-preview,.friend-intro{padding:22px;background:linear-gradient(120deg,#203325,#142126);border:1px solid #91b65840;margin-bottom:22px}.share-preview h3,.friend-intro h3{font-size:21px;line-height:1.6;margin:9px 0;overflow-wrap:anywhere}.share-preview p,.friend-intro p{font-size:12px;color:var(--muted)}.share-label{display:block;margin:20px 0 9px;font-size:12px;color:#c2d2b9}#share-url,#challenge-input,#share-team-name,#guest-name{width:100%;display:block;padding:13px;border:1px solid #465244;background:#0d171d;color:var(--white);font:13px/1.7 var(--font);border-radius:0;min-width:0}#share-url,#challenge-input{resize:vertical;overflow-wrap:anywhere;word-break:break-all}#share-url{color:#b2cfa4;font-family:monospace;font-size:11px}.hub-actions{display:flex;gap:10px;flex-wrap:wrap}.form-error{color:#f0aa93;font-size:12px;margin-top:12px}.friend-intro .eyebrow{font-size:11px}
.invite-hero{padding:40px 0 30px}.invite-hero h1{font-size:clamp(26px,3vw,40px);overflow-wrap:anywhere}.invite-hero p{color:var(--muted);margin:14px 0 22px}.invite-meta{display:flex;gap:12px;flex-wrap:wrap}.invite-meta span{font-size:11px;padding:5px 12px;border:1px solid #58794a55;background:#9dc5640d;color:#b1c49f}.invite-meta b{color:var(--lime)}.accept-challenge{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:end;border:1px solid var(--line);background:#111a1d;padding:25px;margin:20px 0 35px}.accept-challenge label{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}.accept-challenge>div:nth-child(2){display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.accept-challenge>p{grid-column:1/-1;font-size:11px;color:var(--muted)}
.duel-arena{display:grid;grid-template-columns:1fr 170px 1fr;align-items:center;gap:20px;padding:50px 35px 30px;border:1px solid #45634b;background:radial-gradient(ellipse at 50% 0,#8ead3f1a,transparent 70%),#111c21}.duel-side{text-align:center;min-width:0}.duel-side>span{font-size:10px;letter-spacing:2px;color:#91ac85}.duel-side h2{font-size:28px;overflow-wrap:anywhere;line-height:1.5;margin:10px 0}.duel-side p{font-size:11px;color:var(--muted)}.duel-score{font:600 78px/1.1 var(--display);text-align:center;color:var(--lime);white-space:nowrap}.duel-score i{font-style:normal;color:#5f7469;margin:0 8px}.duel-score small{display:block;font:400 11px var(--font);color:var(--muted);letter-spacing:0;margin-top:13px}.duel-verdict{grid-column:1/-1;text-align:center;margin-top:25px;font-size:13px;color:#b9ccac}.duel-finished{border-color:#b2d25e88}.duel-finished .duel-verdict{color:var(--lime);font-weight:600}.duel-rosters{display:grid;grid-template-columns:minmax(0,1fr) 85px minmax(0,1fr);gap:9px;margin:30px 0}.duel-rosters>h3{font-size:14px;padding:10px;overflow-wrap:anywhere}.duel-rosters>span{font-size:10px;text-align:center;align-self:center;color:var(--muted)}.duel-person{display:flex;align-items:center;min-width:0;gap:15px;padding:9px 16px 9px 9px;border:1px solid #2e423c;background:#142127}.duel-portrait{position:relative;display:block;width:65px;height:70px;overflow:hidden;flex-shrink:0;background:#20343b}.duel-portrait .portrait-fallback{font-size:25px}.duel-person>div{min-width:0}.duel-person strong{display:block;font:600 24px var(--display);overflow-wrap:anywhere}.duel-person small{display:block;font-size:10px;color:var(--muted);overflow-wrap:anywhere}.duel-person>b{margin-left:auto;color:var(--lime);font:600 25px var(--display)}.duel-role{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-size:10px;color:#93af8a}.duel-role svg{height:19px;width:19px;stroke:#94ba77}.duel-games{margin:30px 0}.duel-games h3{font-size:16px;margin-bottom:15px}.duel-games>div{display:grid;grid-template-columns:75px 1fr 60px 1fr;gap:18px;align-items:center;padding:16px;border-bottom:1px solid var(--line);font-size:12px}.duel-games b{font:600 14px var(--display);color:#9ebd8f}.duel-games strong{font:600 23px var(--display);color:var(--lime)}.duel-games small{color:var(--muted);text-align:right}
@media(max-width:1100px){.lineup-stage{grid-template-columns:minmax(0,1fr) 240px}.lineup-insight{padding:24px 18px}.rift-card{width:110px}.rift-field{min-height:490px}.rift-SUP{left:87%;top:82%}.rift-ADC{left:70%;top:65%}.rift-MID{left:52%;top:29%}.site-header{gap:14px;padding-left:24px;padding-right:24px}.site-header nav{gap:17px}.brand{font-size:18px}}
@media(max-width:800px){.lineup-stage{grid-template-columns:1fr}.rift-field{min-height:480px}.rift-card{width:126px}.rift-MID{left:51%;top:38%}.rift-SUP{left:88%;top:80%}.rift-ADC{left:70%;top:65%}.lineup-insight{border-left:0;border-top:1px solid #354236;display:grid;grid-template-columns:1fr 1fr;gap:10px 25px;padding:22px}.lineup-insight .micro,.lineup-insight h3,.lineup-meter,.role-progress{grid-column:1}.lineup-insight h3{margin:0}.lineup-meter>strong{font-size:44px}.role-progress{margin:0}.insight-facts{grid-column:2;grid-row:1/4}.insight-note,.bond-list{grid-column:2;grid-row:4;align-self:center;margin:0}.invite-lineup{grid-column:1/-1;margin:4px 0 0}.mode-tabs button{padding:13px 15px;column-gap:8px}.mode-tabs small{font-size:10px}.mode-tabs strong{font-size:13px}.daily-banner{padding:22px}.accept-challenge{grid-template-columns:1fr 1fr}.accept-challenge>div:nth-child(2){flex-direction:column}.duel-person{gap:9px}.duel-person strong{font-size:21px}.duel-rosters{grid-template-columns:minmax(0,1fr) 55px minmax(0,1fr)}}
@media(max-width:540px){.site-header nav{overflow-x:auto;justify-content:flex-start;gap:23px;scrollbar-width:none}.nav-item{flex-shrink:0;font-size:11px}.mode-tabs{gap:6px;margin-top:17px}.mode-tabs button{padding:11px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.mode-tabs button>span{font-size:14px}.mode-tabs strong{font-size:12px}.mode-tabs small{font-size:8px;letter-spacing:-.2px}.intro{padding-top:24px}.daily-banner{padding:17px 14px;gap:14px 12px}.daily-banner .eyebrow{font-size:9px;letter-spacing:1px}.daily-banner h2{font-size:18px}.daily-banner p{font-size:10px}.daily-clock>strong{font-size:23px;letter-spacing:1px}.daily-clock>span{font-size:9px}.daily-clock .text-button{font-size:9px}.daily-progress{gap:4px;flex-wrap:wrap}.daily-progress>span{width:24px;height:24px;font-size:11px}.daily-progress>b{font-size:10px;margin:4px 0 0;flex-basis:100%}.daily-note{font-size:9px!important}.daily-exhausted{flex-direction:column;align-items:flex-start}.friend-banner{padding:18px 14px;align-items:flex-start;flex-direction:column;gap:10px}.friend-banner h2{font-size:19px}.friend-banner .eyebrow{font-size:10px}.friend-banner p{font-size:10px}.friend-banner .secondary{font-size:10px;padding:8px 12px}
.rift-field{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 8px;min-height:0;padding:49px 12px 42px;background-size:auto 100%;background-position:center}.rift-label{left:13px;top:18px;font-size:9px;letter-spacing:1px}.rift-card{position:relative;left:auto!important;top:auto!important;transform:none;width:auto;min-width:0;min-height:157px;grid-column:span 2}.rift-card:nth-last-of-type(-n+2){grid-column:span 3}.rift-card>strong{font-size:19px;padding:6px 6px 2px}.rift-meta{font-size:8px;padding:0 6px}.rift-role{font-size:9px;gap:3px;padding:5px}.rift-role small{font-size:8px}.rift-role svg{width:11px;height:11px}.rift-portrait{height:88px}.rift-vacant{height:88px}.rift-rating{font-size:20px;right:5px}.rift-caption{bottom:13px;left:13px;font-size:8px;letter-spacing:1px}.rift-remove{right:-5px;top:-7px;width:20px;height:20px;font-size:14px}.lineup-insight{gap:8px 16px;padding:18px 15px}.lineup-insight .micro{font-size:8px;letter-spacing:1px}.lineup-insight h3{font-size:14px}.lineup-meter{gap:8px}.lineup-meter>strong{font-size:39px}.lineup-meter small{font-size:18px}.lineup-meter>span{font-size:9px}.role-progress{gap:5px}.role-progress>span{width:24px;height:24px}.role-progress svg{width:13px;height:13px}.insight-facts>div{font-size:9px;margin:5px 0;padding-bottom:5px}.insight-facts strong{font-size:20px}.insight-note{font-size:8px}.bond-list span{font-size:8px;padding:3px 5px}.invite-lineup{font-size:10px}.just-picked{animation:join-mobile .6s ease-out}@keyframes join-mobile{from{opacity:.25;transform:translateY(-12px) scale(.95);box-shadow:0 0 25px #b9ee6560}to{opacity:1;transform:none}}
.compare-portrait{height:130px}.replacement-grid{gap:10px}.replacement-grid article{padding:10px}.replacement-grid h3{font-size:23px}.replacement-grid .micro{font-size:9px}.replacement-grid p{font-size:9px}.replacement-delta{font-size:11px}.modal-actions button{flex:1;font-size:11px;padding:12px}.share-preview,.friend-intro{padding:16px}.share-preview h3,.friend-intro h3{font-size:17px}.share-preview p,.friend-intro p{font-size:11px}.hub-actions button{font-size:11px;width:100%}.invite-hero{padding:25px 0 22px}.invite-hero h1{font-size:27px}.invite-hero .eyebrow{font-size:10px;letter-spacing:1px}.invite-hero p{font-size:12px}.invite-meta{gap:6px}.invite-meta span{font-size:9px;padding:4px 7px}.accept-challenge{grid-template-columns:1fr;padding:17px}.accept-challenge>div:nth-child(2){gap:8px}.accept-challenge button{font-size:11px;padding:13px 10px}.accept-challenge>p{font-size:10px}.duel-arena{grid-template-columns:1fr 90px 1fr;gap:8px;padding:28px 12px 22px}.duel-side h2{font-size:17px;margin:8px 0}.duel-side>span{font-size:9px}.duel-side p{font-size:9px}.duel-score{font-size:43px}.duel-score i{margin:0 4px}.duel-score small{font-size:8px}.duel-verdict{font-size:11px;margin-top:17px}.duel-rosters{grid-template-columns:minmax(0,1fr) 33px minmax(0,1fr);gap:6px;margin:22px 0}.duel-rosters>h3{font-size:11px;padding:5px}.duel-rosters>span{font-size:8px}.duel-person{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 6px;padding:7px 5px;position:relative}.duel-portrait{width:38px;height:50px;grid-row:span 2}.duel-person strong{font-size:16px;line-height:1.2}.duel-person small{font-size:8px;line-height:1.4}.duel-person>b{font-size:14px;margin:0;grid-column:2}.duel-role{font-size:8px}.duel-role svg{height:15px;width:15px}.duel-games>div{grid-template-columns:50px 1fr 45px;gap:8px;padding:12px 6px;font-size:10px}.duel-games small{grid-column:2/4;text-align:left;font-size:9px}.duel-games b{font-size:11px}.duel-games strong{font-size:19px}.duel-rosters .portrait-fallback{font-size:19px}}
@media(prefers-reduced-motion:reduce){.just-picked{animation:none}.rift-card,.mode-tabs button{transition:none}}

/* Keep the five map cards separate even when the sidebar narrows the field. */
@media(min-width:541px){.rift-card{width:clamp(90px,14%,126px)}.rift-TOP{left:16%;top:27%}.rift-JGL{left:26%;top:73%}.rift-MID{left:50%;top:30%}.rift-ADC{left:64%;top:68%}.rift-SUP{left:86%;top:77%}}