/* ROTOR V28: one level reading plane over a moving 3D world.
   World and locations stay left; player and play stay right. */
:root {
  --ui-safe: clamp(16px, 2vw, 32px);
  --ui-safe-top: max(18px, env(safe-area-inset-top));
  --ui-safe-bottom: max(16px, env(safe-area-inset-bottom));
  --ui-content-top: 148px;
  --ui-green: #b6ef3c;
  --ui-yellow: #ffe45b;
  --ui-silver: #f3f6ed;
  --ui-glass-line: #f4ffdd77;
  --ui-control-face: linear-gradient(165deg, #faffde24, #0007 52%, #b6ef3c09);
  --ui-control-edge: inset 0 1px 1px #ffffe899, inset 0 -2px 3px #000a;
}
html body .cm-header {
  inset: var(--ui-safe-top) var(--ui-safe) auto;
  padding: 0;
  gap: 16px;
  align-items: center;
}
html body .cm-header nav { gap: 10px; }
html body .cm-brand { max-width: 220px; }
html body .cm-brand svg { max-height: 58px; width: auto; max-width: 220px; }
html body .rotor-view-toggle {
  left: var(--ui-safe);
  top: var(--ui-content-top);
  width: max-content;
  max-width: calc(100vw - 2 * var(--ui-safe));
  min-height: 44px;
  padding: 10px 17px;
  color: #ddff9c;
  border: 1px solid #efffc982;
  border-radius: 24px;
  background: var(--ui-control-face);
  box-shadow: var(--ui-control-edge), 0 7px 19px #0007;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
html body .rotor-view-pip {
  left: var(--ui-safe);
  right: auto;
  top: calc(var(--ui-content-top) + 54px);
  bottom: auto;
  width: 294px;
  max-width: calc(100vw - 2 * var(--ui-safe));
  max-height: calc(100vh - 254px);
  max-height: calc(100dvh - 254px);
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  border: 1px solid #f4ffdd99;
  border-radius: 32px;
  background: linear-gradient(155deg, #faffde14, #0001 45%, #fff1) !important;
  box-shadow: inset 0 2px 1px #ffffeaaa, inset 1px 0 2px #fff3, inset 0 -3px 6px #eaffcf1f, 0 18px 38px #0009;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none;
  scrollbar-width: thin;
  scrollbar-color: #b6ef3c80 transparent;
  scrollbar-gutter: stable;
}
html body .rotor-view-pip.expanded { width: min(448px, calc(100vw - 2 * var(--ui-safe))); }
html body .rotor-view-pip header {
  display: flex;
  align-items: center;
  gap: 7px;
  position: static;
  margin: 0 0 11px;
  padding: 0;
  min-width: 0;
}
html body .rotor-view-pip header :is(select,button) {
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #ecffd477;
  background: var(--ui-control-face);
  color: #dbff93;
  box-shadow: var(--ui-control-edge);
  padding: 9px 11px;
  font-size: 11px;
}
html body .rotor-view-pip header select { min-width: 0; flex: 1; width: 100%; border-radius: 21px; font-weight: 750; }
html body .rotor-view-pip header button { width: 44px; flex: none; border-radius: 50%; color: var(--ui-silver); font-size: 20px; }
html body .rotor-view-window {
  width: 100%;
  aspect-ratio: 1.6;
  border: 1px solid #f8ffdf66;
  border-radius: 22px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box;
}
html body .pip-world-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin-top: 12px; }
html body .pip-world-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 46px;
  padding: 10px 8px;
  border: 1px solid #dfff9982;
  border-radius: 19px;
  color: #ddff9c;
  background: var(--ui-control-face);
  box-shadow: var(--ui-control-edge);
  text-align: center;
  text-decoration: none;
  font: 750 11px/1.35 Inter, Arial, sans-serif;
  letter-spacing: .03em;
}
html body .pip-world-actions a:hover,
html body .rotor-view-toggle:hover {
  border-color: #b6ef3c;
  color: #efffd1;
  background-color: #b6ef3c1c;
}
html body .rotor-view-pip select option { background: #0a1005; color: #edffcd; }
html body .cm-view-rail {
  left: var(--ui-safe);
  right: auto;
  bottom: var(--ui-safe-bottom);
  transform: none;
  width: max-content;
  max-width: calc(100vw - 2 * var(--ui-safe));
  min-height: 54px;
  box-sizing: border-box;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px;
  border-radius: 29px;
  border: 1px solid #f2ffdb66;
  background: linear-gradient(160deg, #ffffff14, #0008);
  box-shadow: inset 0 2px 1px #faffda77, 0 9px 24px #0007;
}
html body .cm-view-rail :is(button,summary) {
  min-height: 44px;
  border: 1px solid #e6ffc44a;
  border-radius: 22px;
  background: var(--ui-control-face);
  color: #d8f3ad;
  box-shadow: var(--ui-control-edge);
  font-size: 11px;
  padding: 10px 14px;
}
html body .cm-view-rail #cmViewRail { min-width: 0; gap: 6px; }
html body #cmViewPicker { max-width: 240px; white-space: normal; }
html body .cm-view-rail :is(button,summary):hover,
html body .cm-view-rail button[aria-pressed=true] { color: #f4ffdc; border-color: #b6ef3c; background-color: #b6ef3c1e; }
html body .cm-settings-body { background: #080d04ed; color: var(--ui-silver); border-color: #dfff9970; border-radius: 24px; }
/* Replay is docked into the rail by the Club installer. Legacy host stays clear. */
html body:not(.three-hero-opening) #threeHeroOpenerControls {
  top: auto;
  left: auto;
  right: auto;
  bottom: var(--ui-safe-bottom);
  max-width: calc(100vw - 2 * var(--ui-safe));
}
html body .three-hero-replay { color: #d8f3ad; background: var(--ui-control-face); border-color: #e6ffc44a; box-shadow: var(--ui-control-edge); }
html body .rotor-pilot-summary {
  right: var(--ui-safe);
  top: var(--ui-content-top);
  width: 224px;
  min-width: 0;
  max-width: calc(100vw - 2 * var(--ui-safe));
  max-height: calc(100dvh - 230px);
  overflow: auto;
  border: 1px solid #f1ffda77;
  padding: 15px 17px;
  border-radius: 30px;
  background: linear-gradient(155deg,#faffde0c,#0002) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 2px 1px #faffdd88, inset 0 -2px 4px #fff1, 0 12px 30px #0006;
  box-sizing: border-box;
  color: var(--ui-silver);
}
html body .rotor-pilot-summary :is(small,span) { color: #d5efb4; }
html body .rotor-pilot-summary strong { color: var(--ui-yellow); }
html body .rotor-badge-inspect { border-radius: 22px; background: var(--ui-control-face); border-color: #e6ffc470; color: #ddff9c; box-shadow: var(--ui-control-edge); }
html body .rotor25-emblem-access { border-color: #ffe45b88; color: #ffe45b; border-radius: 22px; min-height: 44px; }
html body .rotor-emblem-panel {
  right: var(--ui-safe) !important;
  top: var(--ui-content-top) !important;
  bottom: auto !important;
  max-height: calc(100vh - 202px) !important;
  max-height: calc(100dvh - 202px) !important;
  width: min(336px, calc(100vw - 2 * var(--ui-safe))) !important;
  border-radius: 32px !important;
  background: linear-gradient(152deg,#faffde0b,#0005) !important;
  box-shadow: inset 0 2px 1px #faffdd88, inset 1px 0 2px #fff2, 0 20px 44px #0008 !important;
}
html body .rotor-emblem-panel :is(h2,label,button,select,input) { color: var(--ui-silver) !important; }
html body .rotor-emblem-panel :is(input[type=range],input[type=color]) { accent-color: var(--ui-green); }
html body .rotor-emblem-panel output { color: var(--ui-green) !important; }
html body .rotor-emblem-panel .rotor-emblem-save { background: #ffe45b !important; color: #0b0e05 !important; text-shadow: none; }
html body:not(.rotor-preview) #mainMenu {
  left: var(--ui-safe);
  max-width: calc(100vw - 2 * var(--ui-safe));
  border-color: #f0ffcf77;
  border-radius: 32px;
  background: linear-gradient(154deg, #faffdf0c, #0003) !important;
  box-shadow: inset 0 2px 1px #faffdf77, 0 14px 30px #0006;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body:not(.rotor-preview) #mainMenu h1 em { color: var(--ui-green); }
html body #mainMenu :is(.cm-kicker,.rotor25-player-line,.cm-angles-toggle) { color: #dbf6b0; }
html body #mainMenu .cm-intro { color: #eff6e4; }
html body #mainMenu .cm-primary a {
  min-height: 48px;
  border-radius: 25px;
  border-color: #e6ffc47a;
  background: var(--ui-control-face);
  box-shadow: var(--ui-control-edge);
  color: #e9ffd0;
  font-size: 11px;
  text-shadow: 0 1px 2px #0009;
}
html body #mainMenu .cm-primary .cm-play { color: #dfff9e; border-color: #b6ef3cbb; background: linear-gradient(160deg,#b6ef3c2a,#15220688); }
html body #mainMenu .cm-primary .cm-player-create { color: var(--ui-yellow); border-color: #ffe45b88; }
html body #mainMenu .cm-primary a:hover { transform: none; border-color: #eaffb9; background-color: #b6ef3c20; }
html body #cmGreenRoom { bottom: calc(var(--ui-safe-bottom) + 70px); border-radius: 25px; border-color: #b6ef3c88; color: #e2ffc0; background: var(--ui-control-face); box-shadow: var(--ui-control-edge); }
/* Match information uses the same green instruments, without changing the court. */
html body #energyMeter { height: 18px; border-radius: 12px; border: 1px solid #e7ffc099; background: linear-gradient(180deg,#000b,#fff1); padding: 3px; box-sizing: border-box; box-shadow: inset 0 2px 5px #0009, 0 5px 14px #0006; }
html body #energyMeter #bar { border-radius: 9px; background: linear-gradient(180deg,#f0ffd5,#b6ef3c 34%,#7faa2b 70%,#cbff61); box-shadow: inset 0 1px #fff7; }
html body :is(.energyCaption b,#boostState,#flightSpeed,#ballSpeed,#ballSpin) { color: var(--ui-green); }
html body :is(#flightHud small,.energyLegend,#flightHud .session) { color: #d5edb9; }
html body #scoreboard { border-radius: 28px; border-color: #eeffd577; background: linear-gradient(150deg,#ffffef14,#0008); box-shadow: inset 0 2px #faffdf77,0 10px 26px #0006; }
html body #scoreboard b { color: #d4ff77; }
html body #scoreboard :is(small,#matchType,#matchType em) { color: #e8f5d8; }
html body :is(.scanProgress i,#scanBar) { background: var(--ui-green); }
html body :is(.scanStatus,#scanStatus,.cm-travel,#boot .boot-sub) { color: var(--ui-green); }
html body :is(.stadium-home-link,.stadium-return-link,#pilotToggle,.stadium-room-nav>summary) { border-radius: 25px; color: #ddff9c; background: var(--ui-control-face); border-color: #e5ffc480; box-shadow: var(--ui-control-edge); }
html body .stadium-room-nav>nav { border-radius: 26px; background: #080e04e8; border-color: #e5ffc480; box-shadow: inset 0 2px #faffdc66,0 16px 34px #0008; }
html body .stadium-room-nav>nav :is(a,button) { min-height: 44px; border-radius: 18px; color: #e0ffad; background: transparent; }
html body :is(button,a,summary,select,input):focus-visible { outline: 2px solid #b6ef3c !important; outline-offset: 3px !important; }
html body ::selection { background: #b6ef3c; color: #090d04; text-shadow: none; }
/* Extra windows may coexist on a desktop; narrow screens give the active one space. */
html body.world-pip-open #pfDeck[data-provider=youtube][data-media-kind=native]:not([hidden]):not([data-stadium-ui-hidden]) { inset: auto auto 88px var(--ui-safe) !important; width: 164px !important; padding: 6px !important; }
html body.world-pip-open #pfDeck #pfSpotifyControls .host { display: none !important; }
html body.world-pip-open #pfDeck :is(.pf-attribution,.radio-extra) { display: none !important; }
html body.club-center-open .rotor-emblem-panel { visibility: hidden; pointer-events: none; }
@media (max-width: 760px) {
  :root { --ui-content-top: 120px; }
  html body .cm-header { top: var(--ui-safe-top); }
  html body .rotor-view-pip { top: 174px; width: min(294px,calc(100vw - 2 * var(--ui-safe))); max-height: calc(100dvh - 286px); }
  html body .rotor-view-pip.expanded { width: calc(100vw - 2 * var(--ui-safe)); }
  html body .cm-view-rail { width: calc(100vw - 2 * var(--ui-safe)); display: flex; padding: 6px; gap: 5px; border-radius: 26px; }
  html body .cm-view-rail :is(button,summary) { font-size: 10px; padding: 9px 12px; }
  html body .cm-view-rail #cmViewRail { flex: 1 1 auto; }
  html body #cmViewPicker { max-width: 180px; flex: 1; }
  html body .rotor-emblem-panel { top: auto !important; bottom: calc(var(--ui-safe-bottom) + 100px) !important; left: var(--ui-safe) !important; right: var(--ui-safe) !important; width: auto !important; max-height: 42dvh !important; }
  html body .rotor-pilot-summary { width: 164px; padding: 12px; max-height: 210px; }
  html body .rotor-pilot-summary .rotor-badge-stage { height: 92px; }
  html body .rotor-pilot-summary .rotor-badge-actions { flex-wrap: wrap; }
  html body .rotor-pilot-summary .rotor-badge-actions small { display: none; }
  html body .rotor-pilot-summary .rotor-badge-inspect { width: 100%; }
  html body:not(.rotor-preview) #mainMenu { width: min(390px,calc(100vw - 2 * var(--ui-safe))); bottom: calc(var(--ui-safe-bottom) + 124px); max-height: calc(100dvh - 290px); padding: 16px 18px; }
  html body.world-pip-open #mainMenu,
  html body.club-center-open #mainMenu { visibility: hidden; pointer-events: none; }
  html body .rotor-view-pip .pip-world-actions { gap: 6px; }
  html body .three-hero-replay { min-height: 44px; padding-inline: 12px; font-size: 10px !important; }
  html body #cmGreenRoom { bottom: calc(var(--ui-safe-bottom) + 120px); }
}
@media (max-width: 460px) {
  html body .cm-view-rail #cmViewRail { width: 100%; order: -1; justify-content: space-between; }
  html body .cm-view-rail #cmViewPicker { max-width: none; }
  html body .cm-view-rail > :is(button,details) { flex: 1; }
  html body .rotor-pilot-summary { width: 146px; top: 140px; }
  html body .rotor-pilot-summary > :is(.rotor-badge-stage,.rotor-badge-actions,.rotor25-emblem-access) { display: none; }
  html body .rotor-view-pip { width: calc(100vw - 2 * var(--ui-safe)); }
  html body.world-pip-open .rotor-pilot-summary { display: none; }
}
@media (max-height: 540px) {
  :root { --ui-content-top: 74px; }
  html body .rotor-view-pip { top: 128px; max-height: calc(100dvh - 214px); }
  html body .rotor-emblem-panel { top: 74px !important; bottom: 88px !important; max-height: calc(100dvh - 162px) !important; }
  html body:not(.rotor-preview) #mainMenu { max-height: calc(100dvh - 194px); }
}
@media (prefers-reduced-transparency: reduce) {
  html body :is(.rotor-view-pip,.rotor-pilot-summary,.rotor-emblem-panel,#mainMenu,#scoreboard) { background: #080d04f5 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.rotor-view-pip,.rotor-club-button,.cm-view-rail button,#mainMenu a) { transition: none; }
}
@media (forced-colors: active) {
  html body :is(.rotor-view-pip,.rotor-view-toggle,.cm-view-rail,.rotor-pilot-summary,.rotor-emblem-panel,#mainMenu,#scoreboard) { background: Canvas !important; color: CanvasText !important; border-color: CanvasText; box-shadow: none; }
  html body :is(button,a,summary,select,input):focus-visible { outline-color: Highlight !important; }
}

/* Popup windows own their footprint at every viewport; their actions keep routes available. */
html body:is(.world-pip-open,.club-center-open) #mainMenu { visibility: hidden !important; pointer-events: none !important; }
html body:is(.world-pip-open,.club-center-open) #cmGreenRoom { visibility: hidden !important; pointer-events: none !important; }
html body.club-center-open #pfDeck { visibility: hidden !important; pointer-events: none !important; }
html body .rotor-view-pip > header { flex-wrap: wrap; }
html body .rotor-view-pip > header select { flex: 1 1 130px; min-width: 0; }
html body .rotor-view-pip > header button { flex: 0 0 44px; }
html body .rotor-arena-badge[hidden] { display: none !important; }
html body .club-player-visual .rotor-arena-badge { position: relative !important; inset: auto !important; width: 100% !important; max-height: none !important; }

html body .cm-learning { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
html body .cm-learning a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: 1 1 120px; padding: 10px 14px; border-radius: 18px; color: #d8ff93; border: 1px solid #b6ef3c80; background: var(--ui-control-face); box-shadow: var(--ui-control-edge); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-decoration: none; }
html body .cm-learning a:hover { color: #ffffff; border-color: #d7ff7b; }
html body .cm-learning a:focus-visible { outline: 2px solid #ffe45b; outline-offset: 4px; }

.rotor-boot-error { position: fixed; z-index: 10000; inset: 30% max(20px,calc((100vw - 460px)/2)) auto; padding: 22px; border: 1px solid #b6ef3c; border-radius: 24px; color: #fff; background: #080c08ee; box-shadow: 0 20px 60px #000a; }
.rotor-boot-error button,.rotor-boot-error a { display: inline-flex; min-height: 44px; align-items: center; padding: 12px; margin: 6px; border: 1px solid #b6ef3c; border-radius: 16px; color: #b6ef3c; background: #111a0e; }

html body .rotor-view-pip > header { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; z-index: auto !important; }
html body[data-game-loading=true] #menu { visibility: hidden; pointer-events: none; }
.rotor-game-loading { position: fixed; z-index: 700; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px 24px; border: 1px solid #b6ef3c88; border-radius: 26px; color: #d8ff94; background: #060d05cc; box-shadow: inset 0 1px #eaffc56b,0 12px 45px #0008; font: 800 12px/1.4 Inter,Arial,sans-serif; letter-spacing: .08em; }
.rotor-game-loading::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #b6ef3c; box-shadow: 0 0 18px #b6ef3c; }
@media (min-width: 461px) and (max-width: 760px) { html body.world-pip-open .rotor-pilot-summary:not(.rotor-club-center .rotor-pilot-summary) { visibility: hidden !important; } }

html body.playing #pfDeck:not(.expanded) { visibility: hidden !important; pointer-events: none !important; }