.play{--tier-good:var(--color-brand);--tier-mid:#f5c23d;--tier-far:var(--color-danger);--tone-soft:var(--color-sky-soft);--tone-ink:var(--color-link)}.play-grid{gap:var(--gutter);overflow-anchor:none;flex-direction:column;scroll-margin-top:1rem;display:flex}.play-col{display:contents}.play-map{border-radius:var(--w-radius);background-color:var(--color-soft);order:1;height:clamp(18rem,46svh,26rem);position:relative;overflow:hidden}.play-map-note{pointer-events:none;border-radius:1rem;max-width:calc(100% - 4rem);padding:.375rem .75rem;font-size:.8125rem;font-weight:550;line-height:1.3;position:absolute;top:.625rem;left:.625rem}@media (min-width:768px){.play-grid{grid-template-columns:minmax(0,28rem) minmax(0,1fr);align-items:start;scroll-margin-top:6rem;display:grid}.play-col{gap:var(--gutter);flex-direction:column;min-width:0;display:flex}.play-map{height:clamp(28rem,100svh - 8rem,48rem);position:sticky;top:6rem}}.play-dock{bottom:calc(env(safe-area-inset-bottom,0px) + .75rem);z-index:5;border-radius:var(--w-radius);order:2;gap:.625rem;padding:.75rem;display:grid;position:sticky}.play-status{align-items:center;gap:.75rem;min-width:0;min-height:3.5rem;display:flex}.play-status-text{gap:.0625rem;min-width:0;display:grid}.play-status-title{font-size:.9375rem;font-weight:700;line-height:1.3}.play-status-sub{-webkit-line-clamp:2;color:var(--color-muted);-webkit-box-orient:vertical;font-size:.8125rem;line-height:1.3;display:-webkit-box;overflow:hidden}.play-actions{gap:.5rem;display:flex}.play-actions>.btn:not(.btn-icon){flex:1;min-width:0}.play-tile.w-icon{letter-spacing:-.02em;border-radius:30%;flex:none;width:3.5rem;height:3.5rem;font-size:1.125rem;font-weight:800}.play-tile.w-icon svg{width:1.5rem;height:1.5rem}[data-tier=good]{--tone-soft:var(--color-brand-soft);--tone-ink:var(--color-brand-ink)}[data-tier=mid]{--tone-soft:var(--color-sun-soft);--tone-ink:var(--color-sun-ink)}[data-tier=far]{--tone-soft:var(--color-danger-soft);--tone-ink:var(--color-danger)}.play-meter{gap:.375rem;margin:0;padding:0;list-style:none;display:flex}.play-meter>li{background-color:var(--color-soft);border-radius:999px;flex:1;height:.5rem;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #0e3c6426}.play-meter>li:after{content:"";border-radius:inherit;background-color:var(--fill,transparent);transform-origin:0;scale:var(--filled,0) 1;transition:scale .6s var(--ease-spring), background-color .3s;position:absolute;inset:0}.play-meter>[data-state=current]{--fill:var(--color-link);--filled:1}.play-meter>[data-state=done]{--fill:var(--tier-good);--filled:1}.play-meter>[data-state=mid]{--fill:var(--tier-mid);--filled:1}.play-meter>[data-state=far]{--fill:var(--tier-far);--filled:1}.play-photo{aspect-ratio:16/10;background-color:var(--color-soft);border-radius:1rem;position:relative;overflow:hidden}@media (min-width:768px){.play-photo{aspect-ratio:4/3}}.play-photo>img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.play-credit{white-space:nowrap;text-overflow:ellipsis;color:#f4f6fa;border-radius:999px;max-width:calc(100% - 1rem);padding:.25rem .625rem;font-size:.75rem;line-height:1.3;position:absolute;bottom:.5rem;left:.5rem;overflow:hidden}.chip.play-choice{text-align:left;white-space:normal;border-radius:1rem;justify-content:space-between;width:100%;min-height:3rem;padding:.5rem .75rem .5rem 1rem;font-size:.9375rem;line-height:1.25}.play-choice-tick{opacity:0;width:1.125rem;height:1.125rem;transition:opacity .15s, scale .45s var(--ease-spring);flex:none;scale:.5}.play-choice[aria-pressed=true] .play-choice-tick{opacity:1;scale:1}.play-choice-skeleton{border-radius:1rem;min-height:3rem;display:block}.segmented.segmented-even{border-radius:1rem;grid-auto-columns:auto;grid-auto-flow:column;width:100%;display:grid;overflow:visible}.segmented-even>.segmented-btn{text-align:center;white-space:normal;border-radius:.8125rem;min-width:0;min-height:2.75rem;padding:.125rem .375rem;font-size:.8125rem;line-height:1.15}.segmented-even>.segmented-btn:disabled{color:var(--color-muted);cursor:not-allowed;background:0 0}.segmented-even:has(>:disabled){opacity:.6}.play-crit{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.5rem .625rem;display:grid}.play-crit>.segmented{grid-column:1/-1}.play-result{isolation:isolate;gap:1rem}.play-result:before{content:"";z-index:-1;background:radial-gradient(120% 100% at 0 0, var(--tone-soft), transparent 75%);pointer-events:none;height:16rem;position:absolute;inset:0 0 auto}.play-headline{letter-spacing:-.03em;text-wrap:balance;font-size:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);font-weight:800;line-height:1.1}.play-score{justify-content:space-between;align-items:flex-end;gap:1rem;display:flex}.play-score-n{letter-spacing:-.04em;font-size:clamp(3.25rem,2.6rem + 2.5vw,4.25rem);font-weight:800;line-height:1;display:block}.play-squares{flex:none;gap:.375rem;padding-bottom:.25rem;display:flex}.play-square{background-image:var(--gloss), linear-gradient(180deg, transparent 50%, #0000001f);border-radius:30%;width:2.5rem;height:2.5rem;box-shadow:inset 0 1px #ffffffb3,0 6px 12px -6px #0e284680}.play-square[data-tier=good]{background-color:var(--tier-good)}.play-square[data-tier=mid]{background-color:var(--tier-mid)}.play-square[data-tier=far]{background-color:var(--tier-far)}.play-rows{gap:.25rem;margin:0;padding:0;list-style:none;display:grid}.play-row{border-radius:1.125rem;grid-template-columns:3.5rem minmax(0,1fr) auto;align-items:center;gap:.875rem;padding:.375rem;display:grid}a.play-row{transition:background-color .2s, translate .45s var(--ease-spring)}@media (hover:hover){a.play-row:hover{background-color:color-mix(in srgb, currentColor 6%, transparent);translate:.25rem}}.play-row-thumb{background-color:var(--color-soft);border-radius:.875rem;width:3.5rem;height:3.5rem;position:relative;overflow:hidden}.play-row-thumb>img{object-fit:cover;width:100%;height:100%}.play-row-title{font-size:.9375rem;font-weight:650;line-height:1.3;display:block}.play-row-meta{color:var(--color-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;line-height:1.35;display:block;overflow:hidden}.play-row-points{color:var(--tone-ink);font-size:.9375rem;font-weight:800}.play-flame.w-icon{--tone-soft:var(--color-sun-soft);--tone-ink:var(--color-sun-ink);border-radius:999px;width:100%;height:100%}.play-flame.w-icon svg{width:1.5rem;height:1.5rem}.play-note{color:var(--color-muted);font-size:.75rem;line-height:1.4}@media (prefers-reduced-motion:no-preference){.play-in{animation:play-in .35s var(--ease-out) both}.play-pop{animation:play-pop .6s var(--ease-spring) both;animation-delay:calc(var(--i,0) * 90ms)}.play-photo>img{animation:play-photo .4s var(--ease-out) both}}@keyframes play-in{0%{opacity:0;translate:0 8px}}@keyframes play-pop{0%{opacity:0;scale:.6}}@keyframes play-photo{0%{opacity:0;scale:1.03}}
