.wrapped-hero__replay { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 18px; border-radius: 980px; background: #fff; color: #0F5C33; font-size: 15px; font-weight: 600; }
.wrapped-hero__replay:hover { text-decoration: none; opacity: .9; }

html.ws-open { overflow: hidden; }
.ws { --cur: #0E5A34; --tool: #F3FFF6; position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; gap: 20px; background: color-mix(in srgb, var(--cur) 32%, #060A08); transition: background-color .6s; overscroll-behavior: none; outline: 0; color-scheme: dark; }
.ws[hidden] { display: none; }
.ws__frame { --u: min(1cqw, .5625cqh); position: relative; container-type: size; width: 100%; height: 100%; overflow: hidden; background: #060A08; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.ws__stage { position: absolute; inset: 0; }

.ws__bars { position: absolute; z-index: 5; top: max(calc(var(--u) * 2.4), env(safe-area-inset-top)); left: calc(var(--u) * 3); right: calc(var(--u) * 3); display: flex; gap: max(2px, calc(var(--u) * .6)); pointer-events: none; }
.ws__bars span { flex: 1 1 0; height: max(3px, calc(var(--u) * .8)); border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--tool) 30%, transparent); }
.ws__bars i { display: block; height: 100%; background: var(--tool); transform: scaleX(0); transform-origin: left; }
.ws__tools { position: absolute; z-index: 5; top: calc(max(calc(var(--u) * 2.4), env(safe-area-inset-top)) + max(3px, calc(var(--u) * .8)) + calc(var(--u) * 1.4)); right: calc(var(--u) * 2); display: flex; }
.ws__tool { display: grid; place-items: center; width: max(42px, calc(var(--u) * 11)); height: max(42px, calc(var(--u) * 11)); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tool); cursor: pointer; }
.ws__tool:focus-visible, .ws__side:focus-visible, .ws-btn:focus-visible, .ws-card a:focus-visible { outline: 2px solid var(--tool); outline-offset: 2px; }
.ws__tool .i { width: max(20px, calc(var(--u) * 5.6)); height: max(20px, calc(var(--u) * 5.6)); }
.ws__icon-play { display: none; }
.ws.is-stopped .ws__icon-play { display: contents; }
.ws.is-stopped .ws__icon-pause { display: none; }
.ws__side { display: none; }
.ws__toast { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--u) * 7); margin: 0; padding: 9px 16px; border-radius: 980px; background: var(--tool); color: var(--cur); font-size: max(13px, calc(var(--u) * 3.6)); font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.ws__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.ws-card { --bg: #0E5A34; --ink: #F3FFF6; --hi: #B8F56A; position: absolute; inset: 0; overflow: hidden; visibility: hidden; color: var(--ink); --ox: 50%; --oy: 50%; }
.ws-card--forest { --bg: #0E5A34; --ink: #F3FFF6; --hi: #B8F56A; }
.ws-card--open { --bg: #F6C62F; --ink: #1E1800; --hi: #8A0F4E; }
.ws-card--water { --bg: #0A4AA6; --ink: #FFFFFF; --hi: #86E3FF; }
.ws-card--flag { --bg: #F26A1B; --ink: #1E0B00; --hi: #4B1500; }
.ws-card--course { --bg: #AD0F6B; --ink: #FFFFFF; --hi: #FFE27A; }
.ws-card--clay { --bg: #7E3D14; --ink: #FFF4E6; --hi: #FFC27A; }
.ws-card--night { --bg: #0D1714; --ink: #EEF7F1; --hi: #50CD89; }
.ws-card.is-leaving { visibility: visible; z-index: 1; }
.ws-card.is-active { visibility: visible; z-index: 2; }
.ws-card__burst { position: absolute; inset: 0; background: var(--bg); }
.ws-card__topo { position: absolute; inset: -42%; background: var(--ink); opacity: .13; mask: url(../media/wrapped-contours.svg) center / cover no-repeat; transform: rotate(var(--r)) scale(1.05); will-change: transform; }
.ws-card__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 22) calc(var(--u) * 8) calc(var(--u) * 13); overflow-wrap: anywhere; }
.ws-card a { color: inherit; }
.ws-card.is-leaving .ws-card__body { animation: ws-out .25s ease both; }
.ws-card.is-active .ws-card__burst { animation: ws-burst .62s cubic-bezier(.3,.7,.2,1) both; }
.ws-card.is-active .ws-card__topo { animation: ws-topo .8s ease both, ws-drift 18s linear both; }
.ws-card.is-active .ws-in { animation: ws-rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 80) * 1ms); }
.ws-card.is-active .ws-pop { animation: ws-pop .7s cubic-bezier(.2,1.25,.3,1) both; animation-delay: calc(var(--d, 80) * 1ms); }
.ws-card.is-active .ws-meter i { animation: ws-grow .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 80) * 1ms); }
.ws-card.is-active .ws-course * { animation: ws-draw .5s ease both; animation-delay: calc(var(--d, 80) * 1ms); }
.ws.is-paused .ws-card, .ws.is-paused .ws-card *, .ws.is-paused .ws-card *::before { animation-play-state: paused !important; }

@keyframes ws-burst { from { clip-path: circle(0 at var(--ox) var(--oy)); } to { clip-path: circle(150% at var(--ox) var(--oy)); } }
@keyframes ws-topo { from { opacity: 0; } to { opacity: .13; } }
@keyframes ws-drift { from { transform: rotate(var(--r)) scale(1.05); } to { transform: rotate(calc(var(--r) + 7deg)) scale(1.2); } }
@keyframes ws-rise { from { opacity: 0; transform: translateY(calc(var(--u) * 5)); } to { opacity: 1; transform: none; } }
@keyframes ws-pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes ws-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ws-draw { from { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ws-out { to { opacity: 0; } }
@keyframes ws-dot { from { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.5); } to { opacity: 1; transform: none; } }

.ws-mark { position: absolute; top: calc(max(calc(var(--u) * 2.4), env(safe-area-inset-top)) + calc(var(--u) * 5.4)); left: calc(var(--u) * 8); display: flex; align-items: center; gap: calc(var(--u) * 2); margin: 0; font-size: calc(var(--u) * 4.1); font-weight: 700; letter-spacing: .02em; }
.ws-mark svg { width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); fill: none; stroke: var(--hi); stroke-width: 2.4; }
.ws-kicker { align-self: flex-start; margin: 0; padding: calc(var(--u) * 1.2) calc(var(--u) * 3.2); border-radius: 980px; background: color-mix(in srgb, var(--ink) 16%, transparent); font-size: calc(var(--u) * 3.4); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ws-hero { margin: 0; color: inherit; font-size: calc(var(--u) * 12.6); font-weight: 800; line-height: 1; letter-spacing: -.035em; overflow-wrap: normal; hyphens: manual; }
.ws-title { margin: 0 0 calc(var(--u) * 3); color: inherit; font-size: calc(var(--u) * 9.2); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; overflow-wrap: normal; }
.ws-lead { margin: 0; font-size: calc(var(--u) * 6); font-weight: 600; line-height: 1.22; letter-spacing: -.01em; }
.ws-lead--sm { font-size: calc(var(--u) * 4.5); font-weight: 500; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.ws-num { display: block; color: var(--hi); font-size: calc(var(--u) * 23); font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-num--pct { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 21); }
.ws-num--md { font-size: calc(var(--u) * 13.5); }
.ws-word { margin: 0; color: var(--hi); font-size: calc(var(--u) * 16.5); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; overflow-wrap: normal; }
.ws-unit { margin: 0; font-size: calc(var(--u) * 5.6); font-weight: 600; line-height: 1.25; }
.ws-note { margin: 0; font-size: calc(var(--u) * 4.2); color: color-mix(in srgb, var(--ink) 84%, transparent); }
.ws-trend { display: inline-flex; align-items: center; align-self: flex-start; gap: calc(var(--u) * 1.4); width: fit-content; margin: calc(var(--u) * 1.6) 0 0; padding: calc(var(--u) * 1.3) calc(var(--u) * 3); border-radius: 980px; background: color-mix(in srgb, var(--ink) 15%, transparent); font-size: calc(var(--u) * 3.6); font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-trend .i { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.ws-hint { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 3.6); font-weight: 600; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.ws-course { width: 100%; max-height: calc(var(--u) * 58); margin: calc(var(--u) * 2) 0; fill: none; stroke: var(--hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ws-course * { stroke-dasharray: 1; }

.ws-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ws-list li { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3.1) 0; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.ws-list li:first-child { border-top: 0; }
.ws-list__rank { flex: none; width: calc(var(--u) * 6.4); color: var(--hi); font-size: calc(var(--u) * 7.2); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ws-list__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.ws-list__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: calc(var(--u) * 4.7); font-weight: 700; line-height: 1.18; }
.ws-list__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--u) * 3.2); color: color-mix(in srgb, var(--ink) 82%, transparent); }
.ws-list__value { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: calc(var(--u) * 6); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ws-list__value small { font-size: calc(var(--u) * 2.9); font-weight: 500; letter-spacing: 0; }
.ws-meter { display: block; height: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 1); border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.ws-meter i { display: block; width: var(--w); height: 100%; border-radius: 99px; background: var(--hi); transform-origin: left; }
.ws-medals { flex: none; display: flex; gap: calc(var(--u) * 1.6); }
.ws-medal { display: grid; place-items: center; width: calc(var(--u) * 9.6); height: calc(var(--u) * 9.6); border-radius: 50%; color: #1A1408; font-size: calc(var(--u) * 4.5); font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-medal--1 { background: #E6BC3F; }
.ws-medal--2 { background: #C4CDD8; }
.ws-medal--3 { background: #D5935C; }
.ws-winner { display: block; font-size: calc(var(--u) * 6.4); font-weight: 700; line-height: 1.18; }
.ws-others { list-style: none; margin: calc(var(--u) * 3) 0 0; padding: 0; font-size: calc(var(--u) * 3.9); }
.ws-others li { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 1.8) 0; border-top: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); }
.ws-others a { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ws-tab { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-stack { display: flex; flex-direction: column; gap: calc(var(--u) * 4.2); margin-top: calc(var(--u) * 2); }
.ws-stack > div { display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.ws-stack span { font-size: calc(var(--u) * 4.6); font-weight: 600; }
.ws-stack .ws-trend { margin-top: calc(var(--u) * .8); }
.ws-split { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 5); padding-top: calc(var(--u) * 5); border-top: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); }
.ws-split .ws-winner { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ws-actions { display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 7); }
.ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); min-height: 44px; padding: calc(var(--u) * 3) calc(var(--u) * 5); border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 980px; background: none; color: var(--ink); font: inherit; font-size: max(14px, calc(var(--u) * 4.1)); font-weight: 700; cursor: pointer; }
.ws-btn--primary { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.ws-fine { margin: calc(var(--u) * 3) 0 0; font-size: calc(var(--u) * 3.1); line-height: 1.35; color: color-mix(in srgb, var(--ink) 78%, transparent); }

.ws-card--map .ws-card__topo { display: none; }
.ws-card--map .ws-card__body { justify-content: space-between; padding-bottom: calc(var(--u) * 16); pointer-events: none; }
.ws-map { position: absolute; inset: 0; z-index: 0; background: #0D1714; pointer-events: none; }
.ws-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(.9) saturate(.7); }
.ws-map .leaflet-control-attribution { pointer-events: auto; background: rgba(13,23,20,.72); color: rgba(238,247,241,.8); font-size: 10px; }
.ws-map .leaflet-control-attribution a { color: inherit; }
.ws-map::after { content: ""; position: absolute; inset: 0; z-index: 500; pointer-events: none; background: linear-gradient(180deg, rgba(13,23,20,.9) 0, rgba(13,23,20,.4) 22%, transparent 32%, transparent 74%, rgba(13,23,20,.9) 90%); }
.ws-dot { transform-box: fill-box; transform-origin: center; animation: ws-dot .5s ease both; }
.ws-card--map .ws-mark { z-index: 1; }
.ws-card--map .ws-title { position: relative; z-index: 1; }
.ws-ticker { position: relative; z-index: 1; display: grid; margin: 0; }
.ws-ticker strong { color: var(--hi); font-size: calc(var(--u) * 19); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

@media (min-width: 640px) and (min-height: 480px) {
	.ws__frame { width: calc(min(100dvh - 48px, 880px) * .5625); height: min(100dvh - 48px, 880px); border-radius: 22px; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
	.ws__side { display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
	.ws__side:hover { background: rgba(255,255,255,.24); }
	.ws__side:disabled { opacity: .3; cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
	.ws, .ws * , .ws *::before, .ws *::after { animation: none !important; transition: none !important; }
	.ws-card__topo { transform: rotate(var(--r)) scale(1.1); }
}

@media print {
	.ws { display: none; }
	html.ws-open { overflow: visible; }
}