.mw_root { position: relative; width: 100%; max-width: 36rem; min-width: 0; margin-inline: auto; color: #f1f4f6; }
.mw_disc { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; container-type: inline-size; }
.mw_definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.mw_sector { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; min-width: 44px; min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--activity-color); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.mw_sectorSvg { display: block; width: 100%; height: 100%; pointer-events: none; }
.mw_shape { fill: var(--activity-soft); stroke: none; }
.mw_sector[aria-pressed="true"] .mw_shape { fill: var(--activity-color); }
.mw_sector:hover:not(:disabled) .mw_shape { filter: brightness(1.08); }
.mw_focus { fill: none; stroke: transparent; stroke-width: .9; pointer-events: none; }
.mw_sector:focus-visible { outline: none; }
.mw_sector:focus-visible .mw_focus { stroke: #fff; }
.mw_sector:disabled { opacity: .55; cursor: default; }
.mw_content { position: absolute; left: var(--map-wheel-x); top: var(--map-wheel-y); width: 28%; display: grid; place-items: center; transform: translate(-50%, -50%); pointer-events: none; }
.mw_icon { display: block; width: clamp(calc(2rem * var(--map-dial-scale,1)), 15cqw, calc(3.5rem * var(--map-dial-scale,1))); height: auto; flex-shrink: 0; transform-origin: center; transition:transform 160ms ease; }
.mw_name { position: absolute; top: calc(100% + calc(.18rem * var(--map-dial-scale,1))); left: 0; width: 100%; text-align: center; color: var(--activity-color); font-size: clamp(calc(.8125rem * var(--map-dial-scale,1)), 4.3cqw, calc(1.125rem * var(--map-dial-scale,1))); font-weight: 700; line-height: 1.4; white-space: nowrap; opacity: 0; visibility: hidden; transform:translateY(calc(.12rem * var(--map-dial-scale,1)));transition:opacity 160ms ease,transform 160ms ease; }
.mw_sector[aria-pressed="true"] .mw_name { color: var(--activity-ink); opacity: 1; visibility: visible; transform:translateY(0); }
.mw_sector:focus-visible:not(:disabled) .mw_icon {transform:translateY(-8%)}.mw_sector:focus-visible:not(:disabled) .mw_name {opacity:1;visibility:visible;transform:translateY(0)}
.mw_content[data-selection-feedback="true"] .mw_icon { animation: mapWheelIconBounce 280ms ease-out both; }
.mw_content[data-selection-feedback="true"] .mw_name { animation: mapWheelNameReveal 160ms ease-out 280ms both; }
@keyframes mapWheelIconBounce { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-13%) scale(1.06); } 72% { transform: translateY(2%) scale(.99); } }
@keyframes mapWheelNameReveal { from { opacity: 0; visibility: hidden; transform: translateY(calc(.18rem * var(--map-dial-scale,1))); } to { opacity: 1; visibility: visible; transform: translateY(0); } }
.mw_outlines { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mw_seams { fill: none; stroke: #253338; stroke-width: .8; stroke-linecap: butt; stroke-opacity: 1; opacity: 1; }
.mw_outerRing { r: 49%; fill: none; stroke: var(--activity-color); stroke-width: 2; }
.mw_hubFace { fill: var(--activity-soft); stroke: var(--activity-color); stroke-width: 1.9; stroke-linejoin: round; }
.mw_arrow { fill: var(--activity-soft); stroke: var(--activity-color); stroke-width: 1.9; stroke-linejoin: round; }
.mw_hubFace[data-counting="true"] { stroke-opacity: .35; }
.mw_progress { fill: none; stroke: var(--activity-color); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mw_center { position: absolute; z-index: 3; inset: 0; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.mw_window { position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; overflow: hidden; pointer-events: none; }
.mw_slide { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.mw_calligraphy { display: block; width: 88%; height: 88%; object-fit: contain; filter: brightness(1.15) drop-shadow(0 0 calc(.45px * var(--map-dial-scale,1)) rgba(255, 255, 255, .9)); user-select: none; -webkit-user-drag: none; }
.mw_numeral { display: grid; place-items: center; width: 100%; height: 100%; color: #f6f5ee; font-family: Bahnschrift, "DIN Alternate", "Arial Narrow", "Segoe UI", sans-serif; font-size: clamp(calc(2.125rem * var(--map-dial-scale,1)), 19cqw, calc(5.5rem * var(--map-dial-scale,1))); font-weight: 550; font-stretch: semi-condensed; font-variation-settings: "wght" 550, "wdth" 85; font-variant-numeric: lining-nums tabular-nums; line-height: 1; transform: translateY(-.025em); }
.mw_srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@container (max-width: 280px) {
 .mw_sector:is([data-map-wheel-option="billiards"], [data-map-wheel-option="badminton"]) .mw_content { top: calc(var(--map-wheel-y) - clamp(0px, calc(calc(34px * var(--map-dial-scale,1)) - 12cqw), calc(18px * var(--map-dial-scale,1)))); }
 .mw_sector:is([data-map-wheel-option="billiards"], [data-map-wheel-option="badminton"]) .mw_name { top: 100%; }
}
@media (hover:hover) and (pointer:fine) { .mw_sector:hover:not(:disabled) .mw_icon {transform:translateY(-8%)}.mw_sector:hover:not(:disabled) .mw_name {opacity:1;visibility:visible;transform:translateY(0)} }
@media (prefers-reduced-motion: reduce) { .mw_content[data-selection-feedback="true"] .mw_icon { animation: none; } .mw_content[data-selection-feedback="true"] .mw_name { animation: none; }.mw_icon,.mw_name{transition:none}.mw_sector:hover:not(:disabled) .mw_icon,.mw_sector:focus-visible:not(:disabled) .mw_icon{transform:none} }
@media (forced-colors: active) { .mw_shape, .mw_hubFace, .mw_arrow { fill: Canvas; } .mw_hubFace, .mw_arrow, .mw_seams { stroke: ButtonText; } .mw_name, .mw_sector[aria-pressed="true"] .mw_name, .mw_numeral { color: CanvasText; } .mw_outerRing, .mw_progress { stroke: Highlight; } .mw_sector:focus-visible .mw_focus { stroke: Highlight; } }

/* Accepted carbon-blue wheel scope; category icon pixels retain their identity. */
@media(forced-colors:none){
.mw_root{color:var(--yi-ink)}.mw_shape{fill:var(--yi-sector)}.mw_sector:nth-of-type(even) .mw_shape{fill:var(--yi-sector-alternate)}.mw_sector[aria-pressed="true"] .mw_shape{fill:var(--yi-selected-surface);stroke:var(--yi-selected-stroke);stroke-width:.8}.mw_sector:hover:not(:disabled) .mw_shape{fill:var(--yi-hover-surface);filter:none}.mw_sector:active:not(:disabled) .mw_shape{fill:var(--yi-pressed-surface)}.mw_name,.mw_sector[aria-pressed="true"] .mw_name{color:var(--yi-ink)}.mw_sector:focus-visible .mw_focus{stroke:var(--yi-focus)}.mw_seams{stroke:var(--yi-divider)}.mw_outerRing{stroke:var(--yi-outer-rim)}.mw_hubFace,.mw_arrow{fill:var(--yi-surface);stroke:var(--yi-outer-rim)}.mw_progress{stroke:var(--yi-countdown-ring)}.mw_numeral{color:var(--yi-countdown-ink)}
}

/* Accepted exterior roles; the selected hub is distinct from the fixed time watch. */
@media(forced-colors:none){
.mw_hubFace,.mw_arrow{fill:var(--yi-hub-surface);stroke:var(--yi-hub-ring)}.mw_hubFace[data-counting=true]{fill:var(--yi-hub-countdown-surface)}.mw_progress{stroke:var(--yi-hub-countdown-ring)}.mw_numeral{color:var(--yi-hub-countdown-ink)}
.mw_calligraphy{filter:var(--map-wheel-yi-filter,brightness(1.15) drop-shadow(0 0 calc(.45px * var(--map-dial-scale,1)) rgba(255,255,255,.9)))}
}

@media(max-width:760px){
 html[lang=en] .mw_name{white-space:normal;overflow-wrap:normal;word-break:normal;left:8%;width:84%;line-height:1.2}
 html[lang=en] .mw_sector:is([data-map-wheel-option=boardgames],[data-map-wheel-option=internet_cafe]) .mw_content{top:calc(var(--map-wheel-y) - 6cqw)}
}

/* Centre the icon and its label as one group within the narrower nine-category wedges. */
.mw_content{row-gap:calc(.18rem * var(--map-dial-scale,1))}
.mw_name{position:static;top:auto}