@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,800;1,900&family=Inter:wght@400;600;700;800&display=swap');
:root{--ink:#211038;--purple:#511cb6;--lilac:#e7d8ff;--line:#e6dcef}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  --stripe-start:calc(6.36vw + 75px);
  --stripe-white:calc(49.5vw + 220px);
  --stripe-lilac:calc(3.54vw + 15px);
  --stripe-edge:calc(.7vw + 4px);
  --white-end:calc(var(--stripe-start) + var(--stripe-white));
  --purple-start:calc(var(--white-end) + var(--stripe-lilac) + var(--stripe-edge));
  --purple-end:calc(var(--stripe-start) - var(--stripe-lilac) - var(--stripe-edge));
  --stripe-repeat:calc(var(--purple-start) + var(--stripe-white));
  background:repeating-linear-gradient(135deg,
    #4e1da5 var(--purple-end),
    #6d32cb var(--purple-end) calc(var(--purple-end) + var(--stripe-edge)),
    #f0e5ff calc(var(--purple-end) + var(--stripe-edge)) var(--stripe-start),
    #fff var(--stripe-start) var(--white-end),
    #f0e5ff var(--white-end) calc(var(--purple-start) - var(--stripe-edge)),
    #a174ed calc(var(--purple-start) - var(--stripe-edge)) var(--purple-start),
    #4e1da5 var(--purple-start) var(--stripe-repeat)
  );color:var(--ink);font:400 1rem/1.5 Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #9c62f6;outline-offset:5px}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
header{background:#ffffffed;border-bottom:1px solid var(--line)}
nav,.brand,.links{display:flex;align-items:center}
nav{justify-content:space-between;gap:16px;min-height:70px}
.brand{gap:10px;font-weight:800;white-space:nowrap}
.brand img{width:42px}
.links{gap:clamp(12px,3vw,34px);font-size:.88rem;font-weight:700}
.links a:hover{color:var(--purple)}
.hero{overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:440px;padding-block:45px}
.eyebrow{font-size:.77rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
h1,h2,h3,p{margin:0}
h1{font:italic 900 clamp(5rem,12vw,10rem)/.74 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.025em;margin:20px 0 30px}
h1 span{color:var(--purple)}
.crest{width:min(100%,370px);justify-self:center;filter:drop-shadow(0 18px 22px #39137328)}
.button{display:inline-flex;align-items:center;gap:18px;background:var(--purple);color:#fff;padding:12px 17px;border-radius:5px;font-weight:800;font-size:.9rem}
.button:hover{background:#6c29d1}
.replay-section{padding-block:34px 64px}
.featured{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;color:white;background:#2d0d63}
.featured::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#2d0d63 0%,#2d0d63e8 38%,#5023944d 100%),url('assets/meta-cover.webp') center 45%/cover;
}
.feature-copy{padding:clamp(24px,5vw,52px)}
.featured .eyebrow,.featured h2 span{color:var(--lilac)}
.featured h2{font:italic 900 clamp(2.6rem,6vw,4.4rem)/.93 'Barlow Condensed',Impact,sans-serif;margin:12px 0;text-transform:uppercase}
.button-light{margin-top:20px;background:white;color:var(--purple)}
.button-light:hover{background:var(--lilac)}
.section-title{width:fit-content;background:#fff;border-radius:4px;padding:2px 8px 2px 0;font:italic 900 2.6rem/1.1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;margin:38px 0 16px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (min-width:900px){.home-page .replay-section .cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{background:#fff;overflow:hidden;border:1px solid var(--line);border-radius:10px;transition:box-shadow .2s}
.card:hover{box-shadow:0 8px 25px #511cb629}
.card img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover}
.card div{padding:15px}
.card time,.card p{font-size:.8rem;color:#5d437f}
.card h3{margin:3px 0}
.card span{float:right;color:var(--purple)}
footer{padding:20px 0;font-weight:700}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
footer .wrap>span{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:4px 9px}
@media(max-width:640px){
.wrap{width:calc(100% - 32px)}
.hero-grid{min-height:320px;gap:8px}
body{
  --stripe-start:12px;
  --stripe-white:calc(74vw + 64px);
  --stripe-lilac:18px;
  --stripe-edge:6px;
}
h1{font-size:clamp(3.6rem,15vw,6rem)}
.brand img{width:32px}
.cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}

/* Navigation and TKD Garden */
header{position:relative;z-index:2}
.links{flex-wrap:wrap}
.links [aria-current="page"]{color:var(--purple);text-decoration:underline;text-underline-offset:5px}
.nav-menu{position:relative}
summary{cursor:pointer}
summary:focus-visible{outline:3px solid #9c62f6;outline-offset:4px}
.nav-menu>summary:hover{color:var(--purple)}
.nav-menu>div{position:absolute;inset:calc(100% + 10px) 0 auto auto;min-width:160px;background:white;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #37147c24;padding:5px}
.nav-menu a{display:block;padding:9px 11px;border-radius:4px;white-space:nowrap}
.nav-menu a:hover{background:#f5edff}
.garden{padding-block:30px 60px}
.garden-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:clamp(14px,4vw,44px)}
.garden-intro h1{font-size:clamp(3.4rem,9vw,7.5rem);line-height:.88;margin-bottom:0}
.garden-intro img{width:clamp(65px,18vw,190px)}
.garden-section .section-title{margin-top:30px}
.activity-row + .activity-row{margin-top:22px}
.activity-title{width:fit-content;padding:3px 8px;border-radius:4px;background:#fff;color:var(--purple);margin-bottom:10px}
.button-outline{background:white;color:var(--purple);border:1px solid var(--line)}
.button-outline:hover{background:var(--lilac)}
.garden .cards{align-items:start}
.scrim>summary{list-style:none}
.scrim>summary::-webkit-details-marker{display:none}
.scrim>summary:focus-visible{outline-offset:-4px}
.scrim[open]>summary span{transform:rotate(180deg)}
.scrim .scrim-detail{border-top:1px solid var(--line)}
.scrim table{width:100%;border-collapse:collapse;font-size:.83rem}
.scrim th,.scrim td{text-align:left;padding:7px 3px;border-bottom:1px solid var(--line)}
.scrim th:last-child,.scrim td{text-align:right}
.scrim-detail a{display:inline-block;margin-top:14px;color:var(--purple);font-weight:700;font-size:.85rem}
@media(max-width:640px){header nav{flex-wrap:wrap;padding-block:12px;gap:10px}.links{width:100%;justify-content:space-between;gap:8px}}

.calendar-feature{padding:clamp(22px,5vw,48px);border-radius:14px;background:linear-gradient(120deg,#32106d,#662ac5);color:white}
.calendar-feature .eyebrow{color:var(--lilac)}
.calendar-feature h2{font:italic 900 clamp(2.4rem,6vw,4.2rem)/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;margin:8px 0 12px}
.calendar-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.calendar-heading span{background:white;border-radius:4px;padding:3px 8px;color:#5d437f;font-size:.8rem}
.calendar-filters{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0 0 16px}
.calendar-filters legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.calendar-filters label{cursor:pointer;background:white;border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-weight:700;font-size:.86rem}
.calendar-filters input{accent-color:var(--purple)}
.calendar-filters label:has(:checked){background:#f0e5ff;border-color:#a174ed;color:var(--purple)}
.calendar-history{background:white;border:1px solid var(--line);border-radius:10px;padding:16px}
.calendar-day>summary{padding:12px 4px;font-weight:800;color:var(--purple)}
.calendar-day + .calendar-day,.calendar-match{border-top:1px solid var(--line)}
.calendar-match{display:grid;grid-template-columns:4rem minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 4px}
.calendar-match small{display:block;color:#5d437f}
.calendar-match a{color:var(--purple);font-weight:700}
.calendar-empty{padding-top:12px;color:#5d437f}
.calendar-standings{margin-top:16px}
@media(max-width:640px){
  .calendar-match{grid-template-columns:3.2rem minmax(0,1fr) auto;font-size:.84rem;gap:8px}
  .calendar-match a{grid-column:2/-1}
}
.calendar-upcoming{margin-bottom:16px}.calendar-milestone{grid-template-columns:minmax(0,1fr)}

/* Dark violet surfaces against the white page */
.card,.calendar-history{
  --panel-text:#f9f5ff;
  --panel-muted:#ded0f3;
  --panel-line:#694397;
  background:#291342;
  border-color:var(--panel-line);
  color:var(--panel-text);
}
.card time,.card p,.calendar-match small,.calendar-empty{
  color:var(--panel-muted);
}
.card span,.scrim-detail a,.calendar-match a,.calendar-day>summary{
  color:#e6c9ff;
}
.scrim .scrim-detail,.scrim th,.scrim td,.calendar-day + .calendar-day,.calendar-match{
  border-color:var(--panel-line);
}
.scrim .scrim-detail{background:#211033}
.card:hover{border-color:#b48aff;box-shadow:0 8px 25px #511cb638}
.calendar-day>summary:hover,.calendar-match a:hover,.scrim-detail a:hover{
  color:white;
}
.calendar-filters label:has(:checked){
  background:var(--purple);
  border-color:var(--purple);
  color:white;
}
.calendar-filters input{accent-color:#8b45d8}

.meta section[id]{scroll-margin-top:24px}
.meta-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:24px 0 16px}
.meta-heading .section-title{margin:0}
.meta-heading p{background:white;width:fit-content;color:#5d437f}
.tier-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,26%);align-items:start;gap:16px}
.tier-row{display:grid;grid-template-columns:52px minmax(0,1fr);margin-bottom:8px;background:#291342;color:white;border-radius:10px;overflow:hidden}
.tier-row h3{display:grid;place-items:center;background:var(--tier,#4f2882);font-size:1.7rem}
.tier-row[data-tier=S]{--tier:#7430d2}
.tier-row[data-tier=A]{--tier:#6024ae}
.tier-row[data-tier=C]{--tier:#44236b}
.tier-row[data-tier=D]{--tier:#351e50}
.tier-heroes{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;padding:8px}
.tier-heroes button{border:1px solid #694397;background:#3b2058;color:white;border-radius:6px;padding:4px;cursor:pointer;font:600 .7rem Inter,system-ui,sans-serif}
.tier-heroes button:hover,.tier-heroes button[aria-pressed=true]{border-color:#e7d8ff;background:#6933a3}
.tier-heroes img,.patch-heading img,#hero-detail img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;display:block}
.meta-panel{padding:16px;border-radius:10px;background:#291342;color:#f9f5ff;border:1px solid #694397}
#hero-detail{position:sticky;top:16px}
#hero-detail img{width:76px;margin-bottom:8px}
.meta-panel p{color:#ded0f3;margin-top:6px}
#patch-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.patch-card{padding:clamp(16px,2.2vw,26px)}
.patch-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.patch-heading img{width:clamp(68px,8vw,92px)}
.patch-heading h3{font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.1}
.patch-heading span{margin-left:auto;background:#4f2882;border-radius:5px;padding:4px 7px;font-size:.75rem}
.patch-card .patch-summary{margin:14px 0 18px;font-size:.95rem;line-height:1.5}
.patch-abilities{display:grid;gap:8px}
.patch-ability{background:#351c50;border:1px solid #694397;border-radius:8px;padding:11px 12px}
.patch-ability-title{display:flex;align-items:center;gap:9px;margin:0;font-size:1.08rem;line-height:1.25}
.patch-ability-title img{width:36px;height:36px;object-fit:contain;flex:none}
.patch-ability ul{margin:6px 0 0;padding-left:18px;color:#ded0f3;font-size:.88rem}
.patch-ability li+li{margin-top:4px}
.patch-values{display:inline-block;margin-inline-start:8px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:640px){
  .meta-heading{align-items:flex-start;flex-wrap:wrap}
  .tier-layout,#patch-cards{grid-template-columns:1fr}
  #hero-detail{position:sticky;top:auto;bottom:8px;z-index:1}
  #hero-detail img{float:left;width:48px;margin:0 10px 0 0}
}

#parche .meta-heading{
  justify-content:flex-end;
  text-align:right;
}
#parche .meta-heading :is(.section-title,p){
  background:transparent;
  padding:0;
  color:var(--ink);
  margin-inline-start:auto;
}
@supports (background-clip:text){
  #parche .meta-heading[data-stripe-contrast] :is(.section-title,p){
    background-image:repeating-linear-gradient(135deg,
      #fff var(--purple-end) calc(var(--purple-end) + var(--stripe-edge)),
      var(--ink) calc(var(--purple-end) + var(--stripe-edge)) var(--purple-start),
      #fff var(--purple-start) var(--stripe-repeat)
    );
    background-size:var(--page-size);
    background-position:var(--stripe-position);
    background-clip:text;
    color:transparent;
  }
}

.patch-card[data-change="up"]{--change-accent:#a5f0bc;--change-glow:#3eb46c}
.patch-card[data-change="down"]{--change-accent:#ffb8be;--change-glow:#df5365}
.patch-card[data-change]{
  background:linear-gradient(145deg,color-mix(in srgb,var(--change-glow) 20%,#291342),#291342 60%);
  border-color:color-mix(in srgb,var(--change-glow) 65%,#291342);
}
.patch-card[data-change] .patch-heading span{
  background:color-mix(in srgb,var(--change-glow) 22%,#291342);
  border:1px solid color-mix(in srgb,var(--change-glow) 68%,#291342);
  color:var(--change-accent);
}
.patch-ability li[data-effect="up"]{--effect-accent:#a5f0bc}
.patch-ability li[data-effect="down"]{--effect-accent:#ffb8be}
.patch-ability li::marker,.patch-ability .patch-values{color:var(--effect-accent,#ded0f3)}

#tier-editor{margin-bottom:16px;padding:12px;background:#f0e5ff;border-radius:8px}
#tier-editor button{border:0;cursor:pointer;margin-top:8px}
#tier-export-status:not(:empty){margin-top:8px}
.tier-target{width:100%;height:100%;min-height:52px;padding:4px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.tier-target:hover,.tier-target:focus-visible{background:#ffffff24}
.tier-row[data-tier=""] .tier-target{font-size:.72rem}

.tier-heroes button[draggable="true"]{cursor:grab}
.tier-heroes button[draggable="true"]:active{cursor:grabbing}
.tier-row.is-drop-target{outline:3px solid #b98aff;outline-offset:-3px}
.tier-row.is-drop-target .tier-heroes{background:#4a286a}

.tier-heroes button[data-insert="before"]{box-shadow:inset 3px 0 #d9baff}
.tier-heroes button[data-insert="after"]{box-shadow:inset -3px 0 #d9baff}

.tier-actions{display:flex;flex-wrap:wrap;gap:8px}
#tier-editor .tier-actions .button-outline{border:1px solid var(--line)}
.tier-actions button:disabled{opacity:.5;cursor:default}
#tier-save-status:not(:empty){margin-top:8px}

.tier-heroes button{position:relative}
.tier-patch-indicator{
  position:absolute;
  top:2px;
  right:2px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:1px solid currentColor;
  border-radius:4px;
  background:#211038;
  font-size:10px;
  line-height:1;
}
.tier-patch-indicator[data-change="up"]{color:#a5f0bc}
.tier-patch-indicator[data-change="down"]{color:#ffb8be}

.crest-stage{position:relative;width:min(100%,370px);justify-self:center;isolation:isolate}
.crest-stage .crest{display:block;width:100%}
@media(prefers-reduced-motion:no-preference){
  .home-page .crest{animation:crest-enter 2.2s cubic-bezier(.2,.75,.3,1) both}
  .crest-stage::before{
    content:"";position:absolute;inset:5%;z-index:-1;pointer-events:none;
    background:linear-gradient(135deg,transparent 34%,#b98aff78 50%,transparent 65%);
    filter:blur(20px);animation:crest-flash 2.6s ease-out both;
  }
  .home-page .featured::before{transition:transform .5s ease}
  .home-page .featured .button span{transition:transform .22s ease}
  .home-page .featured:is(:hover,:focus-within)::before{transform:scale(1.045)}
  .home-page .featured:is(:hover,:focus-within) .button span{transform:translateX(4px)}
  .home-page .replay-section .card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
  .home-page .replay-section .card:is(:hover,:focus-visible){
    transform:translateY(-5px);border-color:#ad76ff;box-shadow:0 10px 25px #511cb64d;
  }
  .home-page .replay-arrived{animation:replay-enter .42s ease-out var(--replay-delay,0ms) backwards}
}
@keyframes crest-enter{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes crest-flash{0%{opacity:0;transform:translate(16px,-16px)}45%{opacity:1}100%{opacity:0;transform:translate(-20px,20px)}}
@keyframes replay-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

@media(prefers-reduced-motion:no-preference){
  .home-page .crest-stage::after{
    content:"";
    position:absolute;
    inset:8%;
    z-index:-1;
    pointer-events:none;
    border-radius:50%;
    background:radial-gradient(ellipse at 72% 22%,#a96affad,transparent 52%),
               radial-gradient(ellipse at 24% 75%,#d2b0ff80,transparent 45%);
    filter:blur(19px);
    animation:crest-halo-in 1.2s ease-out 2.6s both,crest-halo-orbit 14s linear 2.6s infinite;
  }
}
@keyframes crest-halo-in{from{opacity:0}to{opacity:.8}}
@keyframes crest-halo-orbit{to{transform:rotate(1turn)}}

.home-page .hero-word{display:inline-block;position:relative}
.home-page .hero-word-text{display:inline-block;color:inherit;transform-origin:left center}
.home-page .hero-word-tkd{color:var(--ink)}
@media(hover:hover){
  .home-page .hero-word{pointer-events:none}
  .home-page .hero-word::after{content:"";position:absolute;inset:0;pointer-events:auto}
  .home-page h1 .hero-word::after{inset:8% 2%}
  .home-page .hero-word:hover{color:#956400}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .home-page .hero-word-text{transition:color .2s ease,transform .2s ease}
  .home-page .hero-word:hover .hero-word-text{transform:scale(1.055)}
}

.home-page{
  --replay-gold:#ffd36a;
  --replay-gold-ink:#956400;
}
.home-page .featured .button-light:is(:hover,:focus-visible){
  background:var(--replay-gold);
  color:#301c08;
}
.home-page .replay-section .section-title:hover{color:var(--replay-gold-ink)}
.home-page .replay-section .card:is(:hover,:focus-visible){
  border-color:var(--replay-gold);
  box-shadow:0 10px 25px #95640038;
}
.home-page .replay-section .card:is(:hover,:focus-visible) :is(h3,p span){
  color:var(--replay-gold);
}
@media(prefers-reduced-motion:no-preference){
  .home-page .featured .button-light{transition:background-color .2s ease,color .2s ease}
  .home-page .replay-section :is(.section-title,.card h3,.card p span){transition:color .2s ease}
}

.access-trigger{display:flex;align-items:center;gap:8px;margin-left:auto;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--purple);font:700 .8rem Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}
.language-switch{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:7px;background:#fff}
.language-switch button{border:0;border-radius:4px;background:transparent;color:var(--ink);padding:5px 6px;font:800 .74rem Inter,system-ui,sans-serif;cursor:pointer}
.language-switch button[aria-pressed=true]{background:var(--purple);color:white}
.language-switch button:focus-visible{outline:2px solid var(--gold-border);outline-offset:2px}
#access-level{padding:4px 7px;border-radius:4px;background:#f0e5ff}
.access-trigger.is-pro #access-level{background:#ffd36a;color:#301c08}
#team-access{width:min(420px,calc(100% - 32px));border:1px solid var(--line);border-radius:14px;padding:24px;color:var(--ink)}
#team-access::backdrop{background:#211038a6}
#access-form:not([hidden]){display:grid;gap:9px;margin-top:16px}
#access-form input{padding:9px;border:1px solid #694397;border-radius:5px;font:inherit}
#team-access button{cursor:pointer}
.access-close{float:right}
.access-close button{background:none;border:0;font-size:1.5rem;color:var(--ink)}
#access-status,#access-logout{margin-top:12px}
@media(max-width:640px){.header-actions{order:1}.links{order:2}}

@media(min-width:761px){
  header nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  }
  header .brand{justify-self:start}
  header .links{justify-content:center}
  header .header-actions{justify-self:end}
}
@media(min-width:641px) and (max-width:760px){
  header nav{flex-wrap:wrap;padding-block:12px;gap:10px}
  header .header-actions{order:1}
  header .links{order:2;width:100%}
}
@media(max-width:760px){
  header .links{justify-content:center;column-gap:clamp(8px,3vw,24px)}
}
@media(max-width:470px){#access-action{display:none}}

.scrim thead th:nth-child(n+2),.scrim td{text-align:right}
.replay-banner{margin-block:18px;padding:clamp(20px,5vw,52px);border-radius:14px;color:white;background:linear-gradient(90deg,#291342,#4e1da5d9),var(--replay-cover,url('assets/maps/Ilios.webp')) center/cover}
.replay-banner .eyebrow,.replay-banner .replay-title-opponent{color:var(--lilac)}
.replay-banner h1{width:fit-content;font-size:clamp(2.5rem,7vw,5.8rem);line-height:.95;margin:14px 0}
.replay-banner .replay-title-text{display:block;color:inherit;pointer-events:none;transform-origin:left center}
.replay-maps-heading p{width:fit-content;background:white;padding:4px 8px;border-radius:4px;margin-bottom:10px}
.replay-map{margin-top:10px;background:#291342;color:white;border:1px solid #694397;border-radius:10px;overflow:hidden}
.replay-map summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;font-weight:800}
.replay-map summary small{display:block;color:#ded0f3;font-weight:400}
.replay-map summary strong{white-space:nowrap;color:#e7d8ff}
.replay-map-body{padding:0 18px 18px}
.replay-map-image{display:block;width:100%;aspect-ratio:4/1;object-fit:cover;border-radius:6px;margin-bottom:12px}
.replay-bans{padding-inline-start:22px}
.replay-private{margin-top:14px;padding-top:12px;border-top:1px solid #694397}
.replay-private p{margin:0 0 8px}
.replay-private code{color:#ffd36a}
.replay-stat-scroll{overflow-x:auto;margin:16px 0;border:1px solid #694397;border-radius:8px}
.replay-stat-scroll table{width:100%;border-collapse:collapse;font-size:1rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.replay-stat-scroll caption{padding:14px 16px;text-align:left;font-size:1.2rem;font-weight:800;color:#e7d8ff;background:#3b2058}
.replay-stat-scroll :is(th,td){padding:10px 14px;border-bottom:1px solid #694397;text-align:left}
.replay-stat-scroll tbody tr:last-child td{border-bottom:0}
.replay-stat-hero{display:block;width:60px;height:60px;object-fit:cover;border-radius:6px;background:#3b2058}

.replay-picker{display:grid;grid-template-columns:repeat(5,minmax(104px,1fr));gap:8px;overflow-x:auto;padding:4px}
.replay-pick{display:grid;gap:4px;align-content:start;min-width:0;padding:6px;border:1px solid #694397;border-radius:8px;background:#291342;color:white;text-align:left;font:inherit;cursor:pointer}
.replay-pick[aria-pressed=true]{outline:2px solid #a174ed;outline-offset:1px;background:#4e1da5}
.replay-pick:focus-visible{outline:2px solid #ffd36a;outline-offset:1px}
.replay-thumb{width:100%;height:clamp(36px,6vw,68px);display:block;object-fit:cover;border-radius:4px}
.replay-pick-name{font-size:.82rem;font-weight:800;overflow-wrap:anywhere}
.replay-mode{display:flex;align-items:center;gap:5px;color:#e7d8ff;font-size:.72rem}
.replay-mode img{width:16px;height:16px;object-fit:contain}
.replay-map-title{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px}
.replay-map-title strong{color:#e7d8ff}

.replay-bans{display:flex;flex-wrap:wrap;gap:8px 28px}
.replay-bans li>img{width:44px;height:44px;object-fit:cover;border-radius:5px;vertical-align:middle;margin-right:8px}
.replay-bans li>span{display:inline-block;vertical-align:middle}
.replay-bans small{display:block;color:#ded0f3}
.replay-lineup{margin-block:12px}
.replay-lineup ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:6px 0 0;padding:0}
.replay-lineup li{display:grid;justify-items:center;align-content:start;width:70px;text-align:center;font-size:.72rem;color:#e7d8ff}
.replay-lineup img{width:56px;height:56px;object-fit:cover;border-radius:5px;background:#3b2058}

.lesson-intro,.lesson,.lesson-placeholder{margin-block:18px;padding:clamp(20px,4vw,38px);border:1px solid var(--line);border-radius:16px;background:#fff;scroll-margin-top:24px}
.lesson-intro .section-title{margin-top:0}
.lesson-nav{min-height:0;justify-content:flex-start;flex-wrap:wrap;gap:8px;margin-top:20px}
.lesson-nav a{padding:8px 12px;border-radius:8px;background:#f0e5ff;color:#421482;font-weight:700}
.lesson-nav a:hover,.lesson-nav a[aria-current=true]{background:#421482;color:white}
.lesson{background:#291342;color:#fff;border-color:#694397}
.lesson h2,.lesson-placeholder h2{margin:0 0 10px;font:italic 900 clamp(1.8rem,4vw,2.7rem)/1.05 'Barlow Condensed',Impact,sans-serif}
.lesson p{margin:0 0 12px;color:#e7d8ff}
.lesson-steps{padding-inline-start:24px;margin-block:20px}
.lesson-steps li{padding-inline-start:5px}
.lesson-steps li::marker{color:#cfafff;font-weight:800}
.lesson aside{border-inline-start:3px solid #a174ed;background:#382054;padding:12px 16px}
.lesson aside p{margin:5px 0 0}
.lesson-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:8px;margin-block:16px}
.lesson-flow span{padding:10px 12px;border-radius:8px;background:#4d2875;font-weight:700}
.lesson-combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:10px}
.lesson-combos section,.lesson-timeline li{padding:12px 16px;border-radius:8px;background:#4d2875}
.lesson-combos section + section{background:#382054;border:1px solid #8a58c4}
.lesson-combos h4{margin:0 0 6px}
.lesson-timeline{padding:0;list-style:none}
.lesson-timeline b{display:block;color:#e7d8ff;margin-bottom:4px}
.lesson-costs{margin-top:20px}
.lesson-costs summary{cursor:pointer;color:#e7d8ff;font-weight:800}
.lesson-costs p{margin-block:8px}
.lesson-costs input{display:block;margin-block:5px 12px;padding:8px 12px;border:1px solid #a174ed;border-radius:6px;font:inherit}
.lesson-table-wrap{max-height:360px;overflow:auto}
.lesson-costs table{width:100%;border-collapse:collapse}
.lesson-costs :is(th,td){text-align:left;padding:8px 10px;border-bottom:1px solid #694397}
.lesson-costs thead th{position:sticky;top:0;background:#4d2875}
.lesson-placeholder{padding-block:18px}
.lesson-placeholder p{margin:0}
.roster-grid{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,2.8fr);gap:18px}
.roster-picker{display:grid;align-content:start;gap:8px}
.roster-picker button{padding:10px 16px;border:1px solid #694397;border-radius:8px;background:#291342;color:#fff;text-align:left;cursor:pointer;font:italic 900 1.65rem/1 'Barlow Condensed',Impact,sans-serif}
.roster-picker small{display:block;margin-top:5px;color:#e7d8ff;font:700 .72rem/1.3 Inter,system-ui,sans-serif}
.roster-picker button[aria-pressed=true]{background:#512099;border-color:#a174ed}
.roster-picker button:focus-visible{outline:3px solid #a174ed;outline-offset:2px}
.roster-profiles{display:grid;min-width:0}
.roster-profiles .roster-card{grid-area:1/1;visibility:hidden;display:grid;align-items:center;min-height:355px;padding:clamp(20px,4vw,42px)}
.roster-profiles .roster-card.is-active{visibility:visible}
.roster-card{position:relative;isolation:isolate;overflow:hidden;padding:22px 20px;border:1px solid #694397;border-radius:14px;background:radial-gradient(ellipse at 100% 0,#6033a2,#291342 70%);color:white}
.roster-art{position:absolute;z-index:-1;inset:0 0 0 auto;width:44%;height:100%;object-fit:contain;object-position:right center;opacity:.56;mask-image:linear-gradient(90deg,transparent,#000 38%)}
.roster-copy{position:relative;max-width:35ch;text-shadow:0 1px 3px #211038}
.roster-copy h3{font:italic 900 2.8rem/1 'Barlow Condensed',Impact,sans-serif;margin:10px 0 4px}
.roster-origin,.roster-role{font-size:.85rem;font-weight:800;color:#e7d8ff}
.roster-origin{display:flex;align-items:center;gap:8px}
.roster-origin img{width:24px;height:16px;object-fit:cover}
.roster-heroes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0 0}
.roster-heroes li{display:grid;justify-items:center;font-size:.74rem;gap:3px}
.roster-heroes img{width:44px;height:44px;object-fit:cover;border-radius:6px;background:#3b2058}
@media(max-width:680px){
  .roster-grid{grid-template-columns:minmax(0,1fr)}
  .roster-picker{grid-template-columns:repeat(auto-fit,minmax(106px,1fr))}
  .roster-picker button{font-size:1.35rem}
  .roster-profiles .roster-card{min-height:300px}
}
.scrim-live{color:#ffaaa9;font-weight:800}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:300ms;animation-timing-function:ease-in-out}
.gold-cursor{position:fixed;inset:0 auto auto 0;z-index:999;pointer-events:none;width:1px;height:1px;opacity:0}
.gold-cursor.is-visible{opacity:1}
.gold-cursor::before{content:"";position:absolute;inset:-70px;border-radius:50%;background:radial-gradient(circle,#ffc85257 0%,#ffc85229 27%,transparent 68%)}
:root{--gold-light:#ffe09a;--gold-ink:#805400;--gold-border:#bc8427;--gold-halo:#ffc85238}
.garden-intro :is(h1,.eyebrow),.meta-heading p{width:fit-content}
.roster-picker button[aria-pressed=true],.replay-pick[aria-pressed=true]{color:var(--gold-light);border-color:var(--gold-border)}
.replay-pick[aria-pressed=true]{outline-color:var(--gold-border)}
.lesson aside{border-inline-start-color:var(--gold-border)}
.lesson-timeline b{color:var(--gold-light)}

@media (hover:hover){
  .replay-banner h1:hover :is(.replay-title-text,.replay-title-opponent){color:var(--gold-light)}
  .links a:hover,
  .nav-menu>summary:hover,.brand:hover{color:var(--gold-ink)}
  .gold-word{display:inline-block;position:relative;color:inherit;pointer-events:none}
  .gold-word::after{content:"";position:absolute;inset:8% 1%;pointer-events:auto}
  .gold-word-label{display:inline-block;color:inherit}
  .gold-word:hover>.gold-word-label{color:var(--gold-word-color,var(--gold-ink))}
  :is(.replay-banner,.calendar-feature,.roster-card,.lesson,.patch-heading,.replay-map-title){--gold-word-color:var(--gold-light)}
  #parche .meta-heading .gold-word:hover>.gold-word-label{
    color:var(--gold-light);paint-order:stroke fill;-webkit-text-stroke:1px var(--gold-ink);
  }
  .lesson-placeholder h2:hover,
  :is(.lesson-steps,.lesson aside) b:hover,.lesson-costs summary:hover,
  .calendar-day>summary:hover,.calendar-match a:hover,.scrim-detail a:hover,
  .scrim:hover h3,.roster-picker button:hover,.roster-picker small:hover,.replay-pick:hover,
  .calendar-feature>p:not(.scrim-live):hover{color:var(--gold-light);text-shadow:0 0 12px var(--gold-halo)}
  .lesson-placeholder h2:hover{color:var(--gold-ink);text-shadow:none}
  :is(.roster-card,.lesson,.lesson-placeholder,.calendar-history,.scrim,.replay-map,.replay-stat-scroll,.meta-panel:not(.patch-card)):hover{
    border-color:var(--gold-border);
    box-shadow:0 0 18px var(--gold-halo);
  }
  .patch-card:hover{box-shadow:0 0 18px var(--gold-halo)}
  .patch-ability:hover,.tier-heroes button:hover,.roster-picker button:hover,
  .replay-pick:hover,.access-trigger:hover{border-color:var(--gold-border)}
  .button:not(:disabled):hover{background:var(--gold-light);border-color:var(--gold-border);color:#291342}
}
@media (prefers-reduced-motion:no-preference){
  .gold-cursor{transition:opacity 150ms ease}
  :is(.garden-intro,.replay-banner,.calendar-feature) :is(h1,.eyebrow),
  .section-title,.lesson h2,.patch-heading h3{transition:color 180ms ease,text-shadow 180ms ease}
  :is(.roster-card,.lesson,.lesson-intro,.lesson-placeholder,.calendar-history,.replay-map,.replay-stat-scroll,.meta-panel){
    transition:border-color 200ms ease,box-shadow 200ms ease;
  }
  .roster-picker button{transition:background-color 160ms ease,border-color 160ms ease}
  .roster-card.is-active .roster-copy{animation:roster-profile-in 170ms ease-out}
  @keyframes roster-profile-in{from{opacity:.5;transform:translateY(4px)}}
  .lesson-nav a{transition:background-color 180ms ease,color 180ms ease}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .replay-title-text{transform:scale(1);transition:transform 420ms ease-in-out,color 260ms ease}
  .replay-title-opponent{transition:color 260ms ease}
  .replay-banner h1:hover .replay-title-text{transform:scale(1.035)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .gold-word-label{transition:scale 220ms ease,color 180ms ease}
  .gold-word:hover>.gold-word-label{scale:1.045}

  .card img,.replay-thumb,.replay-map-image,.tier-heroes img,
  .patch-heading img,.replay-bans img,.replay-stat-hero,.roster-heroes img{
    transition:scale 250ms ease;
  }
  .card:hover img,.replay-pick:hover .replay-thumb,.replay-map-image:hover,
  .tier-heroes button:hover img,.patch-heading:hover img,
  .replay-bans img:hover,.replay-stat-hero:hover,.roster-heroes img:hover{scale:1.055}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none}
}