/* ROTOR Final 02 — root + Green Room layout. Loads LAST on index.html and green-room.html (after final01-ux.css). Palette only: court blue #043cff · rotor yellow #ffcf00 · ball green #9aff00 · UI lime #c7fc68 (pressable only) · silver #e9eef2 · black. Glass is the real pane (pip-glass / data-rotor-glass-pane) or a CSS chrome rim + inset highlight. No blur, no violet, no fills of lime. READING LANES (nothing overlaps; every lane is fixed-position, one occupant per lane) ┌ 1440×900 / ≥1100 ─────────────────────────────────────────────────────────────────────────────────────┐ │ TL music bubble #pfDeck left 18 top 18 64×64 (expands → 300×64 to the right) │ │ TL2 brand .cm-header left 98 top 22 (yields/fades while the bubble is expanded) │ │ TR route dock .rotor-access-dock right 20 top 14 44 px strip, icons + labels │ │ R dock panels .rotor-access-panel right safe top 94 (on demand, below the strip) │ │ BL headline block #mainMenu left 24 bottom 104 width min(520px,40vw) │ │ BC view rail .cm-view-rail centred bottom 18 46 px strip, ≤520 wide │ │ BC+ primary action #final02Lane / :is(#rotorSceneEnterArena,#f11HomeBig) centre, lifted above the rail by its keeper │ │ (fallback when no lane keeper: right 20 bottom 18, under the PiP) │ │ BR world PiP #rotorWorldView right 20 bottom 102 width min(330px,32vw) │ │ -- emblem window .rotor-pilot-summary / #rotor39EmblemPresence HIDDEN on the root │ │ -- kiosk slabs + club pills HIDDEN (destinations live in the dock) │ ├ 1024×768 (901–1099) ──────────────────────────────────────────────────────────────────────────────────┤ │ same lanes; dock labels shrink; headline width 40vw (410); PiP 32vw (327) │ ├ 768×1024 (481–900) ───────────────────────────────────────────────────────────────────────────────────┤ │ TL bubble 18/18 · TL2 brand 98/22 · TR dock icon-only (8 × 44 px circles, 50 px strip) │ │ BL headline left 24 bottom 104 width ≤460 · BL2 rail LEFT 20 bottom 18 · BR PiP right 20 bottom 102 w220 │ │ primary action: lane keeper (bottom centre-right) / fallback right 20 bottom 18 │ ├ 375×812 (≤480) ────────────────────────────────────────────────────────────────────────────────────────┤ │ TL bubble 12/12 (expanded body opens BELOW the disc at top 112) · brand hidden │ │ TR dock 4×2 grid of 44 px circles: x 175..363, y 12..104 │ │ TR2 world PiP (if open) right 12 top 118 w150 · dock panels full width top 12 │ │ BL headline left 12 bottom 184 (272 when the primary lane owns the thumb zone) max-height 30vh │ │ B primary action: lane keeper full-width bottom 14 / fallback left 12 right 12 bottom 124 │ │ B rail 3-column grid left 12 right 12 bottom 10 (84 with the primary lane) · 2 rows × 38 px │ └────────────────────────────────────────────────────────────────────────────────────────────────────────┘ Green Room (body.stadium-green): the mast loses its dark bar and starts at x 98 (bubble at 18/18); ENTER STADIUM and the pilot toggle leave the mast (STADIUM / PLAYER are in the dock); #choices (DUEL / TRAINING / THE CIRCUIT pills) is hidden; LOCATIONS stays beside the wordmark; #stadiumArrival title at left 24 top 92. */ :root{ --f2-ease:cubic-bezier(.22,.61,.36,1); --f2-silver:#e9eef2;--f2-lime:#c7fc68;--f2-blue:#043cff;--f2-yellow:#ffcf00;--f2-ball:#9aff00;--f2-ink:#07090c; --f2-rim:#e9eef29c;--f2-rim-soft:#e9eef24d; --f2-chrome:linear-gradient(145deg,#ffffff1a,#ffffff05 45%,#00000033); --f2-chrome-shadow:inset 0 1px 0 #ffffffcc,inset 0 -1px 0 #e9eef22b,0 10px 26px #0005; /* lane tokens other Final 02 modules may read */ --f2-lane-top:18px;--f2-lane-side:20px;--f2-lane-bottom:18px;--f2-rail-height:46px; } /* ───────────────── 1. Green menus off: kiosk slabs, club pills, duplicate room links ───────────────── */ html body nav.stadium25-kiosk-access.stadium25-kiosk-access{display:none!important;pointer-events:none!important} html body.stadium-green #world-ui #choices, html body.stadium-green #world-ui #choices[data-layout]{display:none!important;visibility:hidden!important;pointer-events:none!important} html body .cm-header nav .rotor-club-button{display:none!important} /* CLUB is a dock route */ html body #cmGreenRoom#cmGreenRoom{display:none!important} /* GREEN ROOM is a dock route */ html body.stadium-green #world-ui .mast :is(.stadium-return-link,#pilotToggle){display:none!important} /* STADIUM / PLAYER are dock routes */ /* ───────────────── 2. Route dock: one compact glass strip, top-right ───────────────── */ html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock{ position:fixed!important;top:14px!important;right:20px!important;left:auto!important;bottom:auto!important; width:auto!important;max-width:calc(100vw - 118px)!important;margin:0!important; display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important; height:44px!important;min-height:0!important;padding:3px!important;box-sizing:border-box!important; border:1px solid var(--f2-rim)!important;border-radius:22px!important; background:var(--f2-chrome)!important;box-shadow:var(--f2-chrome-shadow)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; overflow:visible!important;z-index:155; } html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route{ position:relative;flex:0 0 auto!important;display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:5px!important; height:38px!important;min-height:38px!important;min-width:38px!important;padding:0 11px 0 8px!important;margin:0!important;box-sizing:border-box!important; border-radius:19px!important;font:700 10px/1 Inter,Arial,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase;white-space:nowrap!important; color:var(--f2-silver)!important;text-shadow:0 1px 2px #000c;text-decoration:none!important; transition:color 220ms var(--f2-ease),border-color 220ms var(--f2-ease),box-shadow 220ms var(--f2-ease); } /* The 3D pane renderer owns the face of tagged controls; untagged ones get the CSS chrome rim. */ html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d]){ border:1px solid var(--f2-rim-soft)!important;background:linear-gradient(160deg,#ffffff14,#ffffff03)!important;box-shadow:inset 0 1px 0 #ffffff66!important; } html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:is(:hover,:focus-visible){color:#ffffff!important;transform:none!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d]):is(:hover,:focus-visible){ border-color:var(--f2-silver)!important;box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -2px 0 #c7fc6899!important; } html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:active{transform:translateY(1px)!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route[aria-expanded="true"]{box-shadow:inset 0 -2px 0 var(--f2-lime)!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:focus-visible{outline:2px solid var(--f2-lime)!important;outline-offset:2px!important} /* PLAY is the single yellow route; every other route is silver (the old per-route lime/yellow fills are gone). */ html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-play{color:var(--f2-yellow)!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock :is(.rotor-access-world,.rotor-access-club,.rotor-access-player,a[href="/"],a[href*="green-room"],a[href*="training"],a[href*="online"]){color:var(--f2-silver)!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-glyph{ width:18px!important;height:18px!important;flex:0 0 18px!important;flex-basis:18px!important;margin:0!important;opacity:1!important; background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:16px 16px!important; } /* Icon fallbacks (silver line icons) when the 3D glyph renderer has not tagged the control. */ html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d])[data-f2-route="stadium"] .rotor-access-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20V11a7 7 0 0 1 14 0v9M9 20v-5h6v5'/%3E%3C/svg%3E")!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d])[data-f2-route="play"] .rotor-access-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffcf00'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E")!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d])[data-f2-route="world"] .rotor-access-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef2' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E")!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d])[data-f2-route="training"] .rotor-access-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef2' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23e9eef2'/%3E%3C/svg%3E")!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d])[data-f2-route="online"] .rotor-access-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef2' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='7' r='3'/%3E%3Ccircle cx='17.5' cy='17' r='3'/%3E%3Cpath d='M8.8 9.2l6.4 5.6'/%3E%3C/svg%3E")!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d])[data-f2-route="green-room"] .rotor-access-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v17M3 21h18M15 12h.01'/%3E%3C/svg%3E")!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d])[data-f2-route="club"] .rotor-access-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef2' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E")!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d])[data-f2-route="player"] .rotor-access-glyph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef2' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")!important} /* Panels opened from the strip sit under it, never over the headline. */ html body.rotor-access-ready .rotor-access-panel.rotor-access-panel{top:70px!important} @media (min-width:1300px){html body.rotor-access-ready .rotor-access-panel.rotor-access-panel{right:20px!important;max-width:460px!important}} /* ───────────────── 3. Root brand: right of the bubble, nav hidden (its links are dock routes) ───────────────── */ html body .cm-header.cm-header.cm-header{ display:flex!important;position:fixed!important;left:98px!important;top:22px!important;right:auto!important;bottom:auto!important;inset:22px auto auto 98px!important; width:auto!important;max-width:calc(100vw - 480px)!important;padding:0!important;margin:0!important;gap:0!important; background:none!important;border:0!important;box-shadow:none!important;z-index:40!important;pointer-events:none; transition:opacity 300ms var(--f2-ease); } html body .cm-header.cm-header.cm-header nav{display:none!important} html body .cm-header.cm-header.cm-header .cm-brand{pointer-events:auto;display:block!important;font:800 30px/1 'Barlow Condensed',Inter,sans-serif!important;letter-spacing:.02em!important;color:var(--f2-silver)!important;text-shadow:0 2px 8px #000;text-decoration:none} html body .cm-header.cm-header.cm-header .cm-brand span{color:var(--f2-yellow)} html body .cm-header.cm-header.cm-header .cm-brand small{display:block!important;margin-top:3px;font:600 9px/1 Inter,sans-serif!important;letter-spacing:.22em!important;color:#c9d2d8!important} html body:is(.three-hero-opening,.rotor-preview,.try-racket,.emblem-editor-open) .cm-header.cm-header.cm-header{display:none!important} /* The brand yields while the music pill is open beside it (root header and Green Room wordmark). */ html body:has(#pfDeck.pf-courtside-deck:is(:hover,:focus-within,.f2-open)) .cm-header.cm-header.cm-header, html body.stadium-green:has(#pfDeck.pf-courtside-deck:is(:hover,:focus-within,.f2-open)) #world-ui .mast .wordmark{opacity:0;pointer-events:none;transition:opacity 300ms var(--f2-ease)} /* ───────────────── 4. Headline block: bottom-left ───────────────── */ html body #mainMenu#mainMenu#mainMenu.cm-main{ left:24px!important;right:auto!important;top:auto!important;bottom:104px!important;transform:none!important; width:min(520px,40vw)!important;max-width:calc(100vw - 48px)!important;max-height:min(52vh,calc(100vh - 220px))!important;overflow:visible!important; } html body.blue-court-opening #mainMenu#mainMenu#mainMenu h1 em{color:var(--f2-yellow)!important} /* the accent word is rotor yellow, never a lime fill */ html body.blue-court-opening #mainMenu#mainMenu#mainMenu .cm-intro{color:var(--f2-silver)!important} /* ───────────────── 5. View rail: slim bottom-centre strip PREV · view · NEXT · PAUSE · VIEW SETTINGS ▾ · RACKET ───────────────── */ html body .cm-view-rail.cm-view-rail.cm-view-rail{ position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:var(--f2-lane-bottom)!important;transform:translateX(-50%)!important; z-index:30!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:4px!important; width:max-content!important;max-width:min(520px,calc(100vw - 40px))!important;min-height:0!important;height:var(--f2-rail-height)!important; padding:4px!important;box-sizing:border-box!important;border:1px solid var(--f2-rim)!important;border-radius:23px!important; background:var(--f2-chrome)!important;box-shadow:var(--f2-chrome-shadow)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmViewRail{order:1;display:flex!important;align-items:center!important;gap:4px!important;min-width:0!important;flex:0 1 auto!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmTour{order:2} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmViewSettings{order:3;position:relative!important;display:block!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmRacketControl{order:4;position:static!important;inset:auto!important;transform:none!important;display:inline-flex!important;color:var(--f2-silver)!important;background:none!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmLocationsOpen{display:none!important} /* final02-layout.js moves it inside VIEW SETTINGS */ html body .cm-view-rail.cm-view-rail.cm-view-rail :is(button,summary){ flex:0 0 auto;height:38px!important;min-height:38px!important;padding:0 12px!important;box-sizing:border-box!important; display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px; font:700 10px/1 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase;white-space:nowrap!important; color:var(--f2-silver)!important;text-shadow:0 1px 2px #000c;list-style:none;cursor:pointer; } html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewPicker{min-width:0!important;max-width:130px!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--f2-silver)!important} /* PREV / NEXT are 38 px chevron targets; their aria-labels stay the accessible names. */ html body .cm-view-rail.cm-view-rail.cm-view-rail :is(#cmPrevious,#cmNext){position:relative!important;width:38px!important;min-width:38px!important;padding:0!important;font-size:0!important;letter-spacing:0!important} html body .cm-view-rail.cm-view-rail.cm-view-rail :is(#cmPrevious,#cmNext)::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border:solid currentColor;border-width:0 0 2px 2px;transform:translate(-30%,-50%) rotate(45deg)} html body .cm-view-rail.cm-view-rail.cm-view-rail #cmNext::before{transform:translate(-70%,-50%) rotate(-135deg)} /* PAUSE / PLAY tour: one 38 px icon button; aria-pressed=true means the tour is running (shows pause bars). */ html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmTour{position:relative!important;width:38px!important;min-width:38px!important;padding:0!important;font-size:0!important;letter-spacing:0!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmTour::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:12px;background:currentColor;box-shadow:6px 0 0 currentColor;translate:calc(-50% - 3px) -50%} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmTour[aria-pressed="false"]::before{width:0;height:0;background:none;box-shadow:none;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;translate:-35% -50%} /* VIEW SETTINGS: single details, chevron marker, popover above the strip. */ html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewSettings>summary::after{content:""!important;width:6px;height:6px;margin-left:4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-135deg);transition:transform 220ms var(--f2-ease)} html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewSettings[open]>summary::after{transform:rotate(45deg)} html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewSettings>.cm-settings-body{ position:absolute!important;left:auto!important;right:0!important;bottom:calc(100% + 10px)!important;top:auto!important;transform:none!important; width:240px!important;display:grid!important;grid-template-columns:1fr!important;gap:6px!important;padding:8px!important;box-sizing:border-box!important; border:1px solid var(--f2-rim)!important;border-radius:18px!important;background:linear-gradient(160deg,#ffffff14,#000000a6)!important;box-shadow:inset 0 1px 0 #ffffffb3,0 14px 30px #0007!important; } html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewSettings:not([open])>.cm-settings-body{display:none!important} html body .cm-view-rail.cm-view-rail.cm-view-rail .cm-settings-body :is(button,summary){width:100%!important;justify-content:space-between!important;height:40px!important;min-height:40px!important} html body .cm-view-rail.cm-view-rail.cm-view-rail :is(button,summary):focus-visible{outline:2px solid var(--f2-lime)!important;outline-offset:2px!important} html body.try-racket .cm-view-rail.cm-view-rail.cm-view-rail{display:none!important} /* ───────────────── 6. Emblem window hides on the root (the pass lives in the world). Stays when a panel hosts it. ───────────────── */ html body:not(.club-center-open):not(.rotor-access-panel-open)>#rotor39EmblemPresence#rotor39EmblemPresence, html body:not(.club-center-open):not(.rotor-access-panel-open)>aside.rotor-pilot-summary.rotor-pilot-summary.rotor-pilot-summary{display:none!important;visibility:hidden!important;pointer-events:none!important} /* ───────────────── 7. Primary action lane (styled by final02-opening; coordinates only when no lane keeper runs) ───────────────── */ html body:not(.final02-lane) :is(#rotorSceneEnterArena,#f11HomeBig){right:20px;left:auto;top:auto;bottom:18px} /* ───────────────── 8. World PiP lane + CHOOSE YOUR VIEW panel ───────────────── */ html body .cm-angles.cm-angles.cm-angles{top:70px!important;right:20px!important;bottom:84px!important;left:auto!important;width:min(360px,calc(100vw - 40px))!important;z-index:160!important} html body:has(#cmAngles:not([hidden])) #rotorWorldView.rotor-view-pip{visibility:hidden!important;pointer-events:none!important} /* ───────────────── 9. Green Room mast ───────────────── */ html body.stadium-green #world-ui .mast.mast.mast{ position:fixed!important;inset:0 0 auto!important;min-height:0!important;height:auto!important;padding:16px 24px 0 98px!important; display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;flex-wrap:nowrap!important; background:transparent!important;border-bottom:0!important;box-shadow:none!important;pointer-events:none; } html body.stadium-green #world-ui .mast.mast.mast>*{pointer-events:auto} html body.stadium-green #world-ui .mast.mast.mast .wordmark{flex:0 0 auto!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important;font:800 30px/1 'Barlow Condensed',Inter,sans-serif!important;letter-spacing:.02em!important;color:var(--f2-silver)!important;text-shadow:0 2px 8px #000;transition:opacity 300ms var(--f2-ease)} html body.stadium-green #world-ui .mast.mast.mast .wordmark span{color:var(--f2-yellow)} html body.stadium-green #world-ui .mast.mast.mast .wordmark small{display:block!important;margin-top:3px;font:600 9px/1 Inter,sans-serif!important;letter-spacing:.22em!important;color:#c9d2d8!important} html body.stadium-green #world-ui .mast.mast.mast .stadium-room-nav>summary{height:38px!important;min-height:38px!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important;gap:6px;font:700 10px/1 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;border:1px solid var(--f2-rim-soft)!important;border-radius:19px!important;background:linear-gradient(160deg,#ffffff14,#ffffff03)!important;box-shadow:inset 0 1px 0 #ffffff66!important;color:var(--f2-silver)!important} html body.stadium-green:not(.in-power-court) #world-ui{background:linear-gradient(#020406b3 0,transparent 96px,transparent calc(100% - 194px),#020406f5 calc(100% - 168px))!important} html body.stadium-green:not(.in-power-court) #stadiumArrival#stadiumArrival{top:92px!important;left:24px!important} /* ───────────────── Breakpoints ───────────────── */ @media (max-width:1099px){ html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route{padding:0 9px 0 7px!important;letter-spacing:.1em!important} } @media (max-width:900px){ /* dock → icon-only circles (labels stay in the accessible name; title gives the tooltip) */ html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock{height:50px!important;padding:3px!important;border-radius:25px!important;gap:3px!important;max-width:calc(100vw - 110px)!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;gap:0!important;border-radius:50%!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .f2-route-label{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-glyph{width:22px!important;height:22px!important;flex-basis:22px!important;background-size:20px 20px!important} /* headline and rail share the left edge; the primary lane and the PiP own the right */ html body #mainMenu#mainMenu#mainMenu.cm-main{width:min(460px,calc(100vw - 48px))!important} html body .cm-view-rail.cm-view-rail.cm-view-rail{left:20px!important;transform:none!important;max-width:calc(100vw - 280px)!important} html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewSettings>.cm-settings-body{right:auto!important;left:0!important} html body #rotorWorldView.rotor-view-pip.rotor-view-pip{width:220px!important} } @media (max-width:600px){ html body .cm-header.cm-header.cm-header{display:none!important} } @media (max-width:480px){ /* dock: 4×2 grid of 44 px circles, top-right (x 175..363 · y 12..104) */ html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock{top:12px!important;right:12px!important;height:auto!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(4,44px)!important;gap:4px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important} html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route:not([data-rotor-ui-3d]){box-shadow:inset 0 1px 0 #ffffff66,0 6px 16px #0006!important} html body.rotor-access-ready .rotor-access-panel.rotor-access-panel{top:112px!important;left:12px!important;right:12px!important;width:auto!important;max-height:calc(100dvh - 124px)!important} /* headline: above the primary lane */ html body #mainMenu#mainMenu#mainMenu.cm-main{left:12px!important;bottom:184px!important;width:calc(100vw - 24px)!important;max-width:none!important;max-height:30vh!important} html body.final02-lane #mainMenu#mainMenu#mainMenu.cm-main{bottom:272px!important;max-height:24vh!important} html body.blue-court-opening #mainMenu#mainMenu#mainMenu h1{font-size:clamp(30px,9.5vw,44px)!important;max-width:none!important} html body.blue-court-opening #mainMenu#mainMenu#mainMenu .cm-intro{font-size:11px!important;max-width:34ch!important;margin-top:8px!important} /* rail: 3-column grid, two rows of 38 px */ html body .cm-view-rail.cm-view-rail.cm-view-rail{left:12px!important;right:12px!important;bottom:10px!important;transform:none!important;width:auto!important;max-width:none!important;height:auto!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) 38px!important;grid-auto-rows:38px!important;gap:4px!important;border-radius:20px!important} html body.final02-lane .cm-view-rail.cm-view-rail.cm-view-rail{bottom:84px!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmViewRail{grid-column:1/-1!important;grid-row:1!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) 38px!important} html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewPicker{max-width:none!important;width:100%!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmTour{grid-column:1!important;grid-row:2!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmViewSettings{grid-column:2!important;grid-row:2!important} html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewSettings>summary{width:100%!important} html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewSettings>.cm-settings-body{left:0!important;right:0!important;width:auto!important;grid-template-columns:1fr 1fr!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmRacketControl{grid-column:3!important;grid-row:2!important;width:38px!important;min-width:38px!important;padding:0!important;font-size:0!important;letter-spacing:0!important;position:relative!important} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmRacketControl::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:14px;border:2px solid currentColor;border-radius:50% 50% 45% 45%;translate:-50% -72%} html body .cm-view-rail.cm-view-rail.cm-view-rail>#cmRacketControl::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:8px;background:currentColor;translate:-50% 30%} /* primary action fallback lane (between headline and rail) */ html body:not(.final02-lane) :is(#rotorSceneEnterArena,#f11HomeBig){left:12px;right:12px;top:auto;bottom:124px} /* world PiP under the dock, panel full width */ html body #rotorWorldView.rotor-view-pip.rotor-view-pip{top:118px!important;bottom:auto!important;right:12px!important;left:auto!important;width:150px!important} html body .cm-angles.cm-angles.cm-angles{top:112px!important;right:12px!important;left:12px!important;bottom:110px!important;width:auto!important} /* Green Room: wordmark right of the bubble, LOCATIONS on the second row, title below */ html body.stadium-green #world-ui .mast.mast.mast{padding:14px 12px 0 88px!important} html body.stadium-green #world-ui .mast.mast.mast .wordmark{font-size:22px!important} html body.stadium-green #world-ui .mast.mast.mast .stadium-room-nav{position:fixed!important;left:12px!important;top:116px!important} html body.stadium-green #world-ui .mast.mast.mast .stadium-room-nav>nav{left:0!important;right:auto!important} html body.stadium-green:not(.in-power-court) #stadiumArrival#stadiumArrival{top:172px!important;left:12px!important;max-width:calc(100vw - 24px)!important} } @media (max-height:560px) and (orientation:landscape){ html body #mainMenu#mainMenu#mainMenu.cm-main{bottom:80px!important;max-height:40vh!important} html body .cm-view-rail.cm-view-rail.cm-view-rail{bottom:12px!important} } @media (prefers-reduced-motion:reduce){ html body .cm-header.cm-header.cm-header,html body.stadium-green #world-ui .mast.mast.mast .wordmark, html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock .rotor-access-route, html body .cm-view-rail.cm-view-rail.cm-view-rail #cmViewSettings>summary::after{transition:none!important} } @media (forced-colors:active){ html body.rotor-access-ready .rotor-access-dock.rotor-access-dock.rotor-access-dock,html body .cm-view-rail.cm-view-rail.cm-view-rail{background:Canvas!important;border-color:CanvasText!important;box-shadow:none!important} } /* Final 02 critic fix: on phones the world PiP yields to an open dock panel or an open music bubble. */ @media (max-width:480px){html body.rotor-access-panel-open #rotorWorldView,html body:has(#pfDeck.f2-open) #rotorWorldView{display:none!important}}