@layer ui{
.gh{padding-top:8rem;padding-bottom:3rem;position:relative;overflow:clip;isolation:isolate}
.gh::before{content:"";position:absolute;inset:-30%;z-index:-1;background:conic-gradient(from var(--a) at 50% 20%,var(--c,#F26B1D),#0F0D0B 30%,var(--c,#F26B1D) 60%,#0F0D0B 90%);filter:blur(90px);opacity:.4;animation:spin 20s linear infinite}
.gh.W{--c:oklch(60% .18 150)}.gh.L{--c:oklch(55% .21 25)}.gh.T{--c:oklch(78% .16 95)}
.back{display:inline-flex;gap:.5rem;text-decoration:none;font:500 .76rem var(--m);text-transform:uppercase;color:var(--o)}
.board{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin-block:2rem}
.board .t{font:800 clamp(2rem,6vw,5rem)/.88 var(--d);letter-spacing:-.06em}.board .t.r{text-align:right}
.board .n{font:800 clamp(6rem,22vw,17rem)/.8 var(--d);letter-spacing:-.09em;text-align:center}.board .n small{display:block;font:500 .75rem var(--m);letter-spacing:.06em;margin-top:1rem}
@media(max-width:700px){.board{grid-template-columns:1fr;text-align:center}.board .t.r{text-align:center}}
.g-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.g-bento .tile.a{grid-column:span 7}.g-bento .tile.b{grid-column:span 5}.g-bento .tile.c{grid-column:span 6}.g-bento .tile.d{grid-column:span 6}.g-bento .tile.f{grid-column:1/-1}
@media(max-width:900px){.g-bento .tile{grid-column:1/-1!important}}
table.per{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}table.per th{font:500 .72rem var(--m);text-transform:uppercase;color:#bfae9d;padding:.5rem}table.per td{padding:.8rem .5rem;text-align:center;border-top:1px solid #ffffff1a;font:800 1.5rem var(--d)}table.per td:first-child,table.per th:first-child{text-align:left;font:800 1.1rem var(--d)}table.per td.tot{color:var(--o)}
.tl{width:100%;height:auto}.tl text{font:500 9px var(--m);fill:#bfae9d}
.plays{display:grid;gap:.5rem}.play{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.7rem .9rem;border-radius:.9rem;background:#ffffff0d}
.play.B{background:color-mix(in oklab,var(--o) 22%,transparent)}.play .pt{font:500 .7rem var(--m);color:#bfae9d;text-transform:uppercase}.play b{font:800 1.1rem var(--d);letter-spacing:-.03em}.play small{color:#d9cbbd;display:block;font-size:.85rem}
.pn{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid #ffffff14}
.meter{height:.9rem;border-radius:99px;background:linear-gradient(90deg,var(--loss),var(--tie),var(--win));position:relative;margin:1.4rem 0 .5rem;opacity:.9}
.meter i{position:absolute;top:50%;translate:-50% -50%;width:1.7rem;aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px #0008}.meter .you{background:var(--o)}.meter .opp{background:var(--k)}
.mfoot{display:flex;justify-content:space-between;font:500 .66rem var(--m);text-transform:uppercase;color:#bfae9d}
.recap h4{font:800 clamp(1.8rem,3.4vw,2.8rem)/.95 var(--d);letter-spacing:-.05em;margin-bottom:1rem}.recap p{color:#e8dccf;font-size:1.1rem;max-width:62ch}
.gnav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem}
footer{background:#080605;color:#bfae9d;padding:3rem 1rem;text-align:center;font-size:.88rem;border-top:6px solid var(--o)}footer a{color:#fff}
}
