/* ROTOR circuit-06 — PERMANENT FROSTED-GLASS STICK PADS + INPUT-MODE GLUE + DOCK GRIP (Jarak).
   Loads AFTER v107-rubber.css on index AND arena (v107 strips backdrop-filter from its own selector list; the pads
   are deliberately NOT in that list so this real frosted glass survives). The two pads (racket-axis-input.js) are
   always present: controls under a pointer, live telltales otherwise. Palette: #043cff/#02247a/#031852 cobalt,
   #ffcf00 yellow, #9aff00 ball green, #c7fc68 lime (interaction only), #e9eef2 silver, black.
   Motion: cubic-bezier(.22,.61,.36,1). */

/* ---- placement: main screen docks the pads just above the OLED row gutter, inside the two copy columns ----
   :not(#_) lifts specificity above the legacy :is()-with-ID hide rules (stadium33-finish.css §blue-court-opening,
   final09-hotspots.css) — blue-court-opening is a persistent body class, so the pads must out-rank it. */
html body:not(.stadium-arena):not(#_) .racket-axis-controls{
  position:fixed;display:flex!important;justify-content:space-between;align-items:end;pointer-events:none;z-index:1430;
  left:var(--f10-oled-left,calc(var(--col-x) + var(--col-w) + 18px))!important;
  right:calc(var(--col-x) + var(--col-w) + 18px)!important;
  bottom:calc(100vh - var(--f10-oled-top,calc(100vh - 260px)) + 14px)!important;
  top:auto!important;width:auto!important;
}
/* arena: corners above the flight HUD */
html body.stadium-arena:not(#_) .racket-axis-controls{
  position:fixed;display:flex!important;justify-content:space-between;align-items:end;pointer-events:none;z-index:1430;
  left:24px!important;right:24px!important;top:auto!important;width:auto!important;
  bottom:calc(110px + env(safe-area-inset-bottom,0px))!important;
}
html body.stadium-arena.playing #v100Queue{bottom:calc(var(--v100-m,24px) + 150px)}
/* the pads step aside only for the idents / landing / identity studio / club / access panel
   (same :not(#_) rank as the show rules above, and later in the sheet, so these states always win) */
html body:is(.three-hero-opening,.final02-landing,.club-center-open,.rotor-access-panel-open,[data-world-view=identity]):not(#_) .racket-axis-controls{display:none!important}

/* ---- the pads: 118px frosted-glass discs ---- */
html body:not(#_) .racket-axis-stick{
  width:118px;height:118px;border-radius:50%;position:relative;flex:none;
  border:1px solid rgba(233,238,242,.30);
  background:
    radial-gradient(circle at 32% 26%,rgba(233,238,242,.16),rgba(233,238,242,.05) 38%,rgba(3,24,82,.22) 62%,rgba(0,0,0,.55)),
    linear-gradient(165deg,rgba(233,238,242,.08),rgba(2,36,122,.14) 55%,rgba(0,0,0,.62));
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(233,238,242,.35),inset 0 -10px 18px rgba(0,0,0,.45),inset 0 0 24px rgba(4,60,255,.10),0 14px 34px rgba(0,0,0,.6);
  pointer-events:auto;touch-action:none;opacity:.55;
  transition:opacity .22s cubic-bezier(.22,.61,.36,1),border-color .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s cubic-bezier(.22,.61,.36,1),width .22s cubic-bezier(.22,.61,.36,1),height .22s cubic-bezier(.22,.61,.36,1);
}
/* grain in the glass (same feTurbulence noise as glass-buttons.css), not a blur */
html body .racket-axis-stick::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");background-size:160px 160px}
/* top specular + four crosshair ticks */
html body .racket-axis-stick::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:
  linear-gradient(rgba(233,238,242,.5),rgba(233,238,242,.5)) calc(50% - .5px) 6px/1px 8px no-repeat,
  linear-gradient(rgba(233,238,242,.5),rgba(233,238,242,.5)) calc(50% - .5px) calc(100% - 6px)/1px 8px no-repeat,
  linear-gradient(rgba(233,238,242,.5),rgba(233,238,242,.5)) 6px calc(50% - .5px)/8px 1px no-repeat,
  linear-gradient(rgba(233,238,242,.5),rgba(233,238,242,.5)) calc(100% - 6px) calc(50% - .5px)/8px 1px no-repeat,
  radial-gradient(ellipse 60% 34% at 50% 12%,rgba(233,238,242,.26),transparent 70%)}
/* 42px chrome knob */
html body .racket-axis-knob{
  width:42px;height:42px;left:calc(50% - 21px);top:calc(50% - 21px);border-radius:50%;
  border:1px solid rgba(233,238,242,.5);
  background:radial-gradient(circle at 36% 30%,#f4f7fa,#c3ccd6 35%,#5d6773 62%,#1a2029 88%);
  box-shadow:0 4px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 5px rgba(0,0,0,.4);
  transition:box-shadow .22s cubic-bezier(.22,.61,.36,1);
}
/* labels 9px Inter 800, below the disc */
html body .racket-axis-label{top:auto;bottom:-17px;font:800 9px/1 Inter,system-ui,sans-serif;letter-spacing:.2em;color:#e9eef2;text-shadow:0 1px 2px #000c}
/* RISE bar (ball green) driven by --rise (-1..1) set on the MOVE pad */
html body .racket-axis-rise{position:absolute;right:-10px;top:14px;bottom:14px;width:4px;border-radius:2px;background:rgba(233,238,242,.12);pointer-events:none}
html body .racket-axis-rise i{position:absolute;left:0;right:0;top:0;bottom:50%;border-radius:2px;background:#9aff00;box-shadow:0 0 8px rgba(154,255,0,.6);transform-origin:50% 100%;transform:scaleY(var(--rise,0))}
/* live state: lime rim + lit knob (lime = interaction only) */
html body:not(#_) .racket-axis-stick[data-live=true]{opacity:1;border-color:#c7fc68;
  box-shadow:inset 0 1px 0 rgba(233,238,242,.35),inset 0 -10px 18px rgba(0,0,0,.45),0 0 0 1px rgba(199,252,104,.18),0 0 26px rgba(199,252,104,.25),0 14px 34px rgba(0,0,0,.6)}
html body:not(#_) .racket-axis-stick[data-live=true] .racket-axis-knob{
  box-shadow:0 0 6px rgba(199,252,104,.9),0 0 18px rgba(199,252,104,.55),0 0 34px rgba(199,252,104,.25),0 4px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.7)}
/* contact flash: the FACE pad goes yellow for 420ms on the player's hit */
html body:not(#_) .racket-axis-controls[data-hit] .racket-axis-face{border-color:#ffcf00;
  box-shadow:inset 0 1px 0 rgba(233,238,242,.35),0 0 0 1px rgba(255,207,0,.3),0 0 30px rgba(255,207,0,.4),0 14px 34px rgba(0,0,0,.6)}
/* input not routed (menus/overlays): pads dim further but never hide */
html body:not(#_) .racket-axis-controls[data-live=false] .racket-axis-stick{opacity:.72} /* playrotor-angle-01 (Joey: 'the green joysticks showing you control rotation and movement'): the MOVE / FACE pads read at idle (.4 → .72) instead of fading into the court */

/* ---- stroke buttons stay a touch-layout surface ---- */
html body .racket-axis-shots{display:none}
@media(pointer:coarse),(any-pointer:coarse){html body .racket-axis-shots{display:flex}}
html[data-active-input=touch] body .racket-axis-shots{display:flex}

/* ---- input-mode arbiter glue (platform.js sets html[data-active-input]) ---- */
html[data-active-input=controller] body .racket-axis-controls{opacity:.35}                      /* pure telltale */
html[data-active-input=controller] body:not(#_) .racket-axis-stick{opacity:1}
html[data-active-input=touch] body .racket-axis-controls{opacity:1}
html[data-active-input=touch] body:not(#_) .racket-axis-stick{opacity:1;width:132px;height:132px}       /* +12% under fingers */
/* keyboard keeps the idle .55 pad opacity */

/* ---- macOS-dock grip (final10-world-ui.js): cycles min → hidden → full ---- */
html body #circuitDockGrip{position:fixed;z-index:1460;cursor:pointer;
  left:calc(var(--f10-oled-left,50vw) - 32px);top:calc(var(--f10-oled-top,60vh) + 10px);width:22px;height:92px;border-radius:12px;
  background:radial-gradient(rgba(233,238,242,.05) .5px,transparent .65px) 0 0/7px 7px,linear-gradient(165deg,#0a0e18,#05070c);
  border:1px solid rgba(233,238,242,.14);
  box-shadow:inset 0 1px 0 rgba(233,238,242,.10),inset 0 -2px 3px rgba(0,0,0,.6),0 10px 26px rgba(0,0,0,.5);
  color:#e9eef2;font:800 10px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s cubic-bezier(.22,.61,.36,1)}
html body #circuitDockGrip:is(:hover,:focus-visible){border-color:#c7fc68;box-shadow:inset 0 1px 0 rgba(233,238,242,.14),0 0 12px rgba(199,252,104,.28),0 10px 26px rgba(0,0,0,.5);outline:none}
/* hidden dock: the grip becomes the thin glass sliver at the bottom */
html body #circuitDockGrip[data-mode=hidden]{left:50%!important;transform:translateX(-50%);top:auto!important;bottom:10px;width:150px;height:16px;border-radius:9px;
  background:linear-gradient(160deg,rgba(4,60,255,.14),rgba(233,238,242,.06));border-color:rgba(233,238,242,.30);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
html body #circuitDockGrip[hidden]{display:none!important}

/* ---- controller chip (platform.js) ---- */
html body .rotor-pad-chip{font:800 11px/1 Inter,system-ui,sans-serif}

@media(max-width:390px){html body:not(#_) .racket-axis-stick{width:98px;height:98px}html[data-active-input=touch] body:not(#_) .racket-axis-stick{width:108px;height:108px}}
@media(prefers-reduced-motion:reduce){html body .racket-axis-stick,html body .racket-axis-knob,html body .racket-axis-controls,html body #circuitDockGrip{transition:none!important}}

/* playrotor-angle-01 (Joey: "the two green joystick circles — a better TAKE CONTROL cue, a blinking thing"): while the home screen is up
   and nobody has touched the pads, both MOVE / FACE pads breathe a lime ring (lime = you can touch this). The first live input ends it. */
@keyframes rotorTakeControl{0%,100%{box-shadow:0 0 0 0 rgba(199,252,104,0),inset 0 1px 0 rgba(233,238,242,.35),0 14px 34px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 7px rgba(199,252,104,.42),0 0 28px rgba(199,252,104,.55),inset 0 1px 0 rgba(233,238,242,.35),0 14px 34px rgba(0,0,0,.6)}}
html body.f8-home:not(.playing):not(.v100-touring):not(.rotor-arriving) .racket-axis-controls[data-live=false] .racket-axis-stick{animation:rotorTakeControl 2.4s cubic-bezier(.22,.61,.36,1) infinite;border-color:rgba(199,252,104,.75);opacity:.9}
html body.f8-home .racket-axis-controls[data-live=false] .racket-axis-stick:nth-child(2){animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){html body.f8-home .racket-axis-controls[data-live=false] .racket-axis-stick{animation:none}}

/* playrotor-angle-01 (Joey 2026-10-22: 'make UI better overall — things blink, stand out, better UX so the user knows to do x y, and the full
   arena / tour'): three calls to action breathe on the home screen, staggered so they never pulse together. Lime = you can press this.
   PLAY DUEL (the one yellow) breathes its own yellow; STADIUM FULL TOUR and ENTER COURT carry the lime ring. Hover / focus / touring stops them. */
@keyframes rotorCallToAction{0%,100%{box-shadow:0 0 0 0 rgba(199,252,104,0)}50%{box-shadow:0 0 0 5px rgba(199,252,104,.38),0 0 22px rgba(199,252,104,.45)}}
@keyframes rotorCallToActionYellow{0%,100%{box-shadow:0 0 0 0 rgba(255,207,0,0);filter:brightness(1)}50%{box-shadow:0 0 0 6px rgba(255,207,0,.32),0 0 30px rgba(255,207,0,.5);filter:brightness(1.12)}}
html body.f8-home:not(.playing):not(.v100-touring):not(.rotor-arriving):not(.three-hero-opening) #v100TourPlay:not(:hover):not(:focus-visible){animation:rotorCallToAction 3s cubic-bezier(.22,.61,.36,1) infinite 1s;border-color:rgba(199,252,104,.8)}
html body.f8-home:not(.playing):not(.v100-touring):not(.rotor-arriving):not(.three-hero-opening) #v100Enter:not(:hover):not(:focus-visible){animation:rotorCallToAction 3s cubic-bezier(.22,.61,.36,1) infinite 2s}
html body.f8-home:not(.playing):not(.v100-touring):not(.rotor-arriving):not(.three-hero-opening) #mainMenu .cm-play:not(:hover):not(:focus-visible){animation:rotorCallToActionYellow 3s cubic-bezier(.22,.61,.36,1) infinite}
@media (prefers-reduced-motion:reduce){html body #v100TourPlay,html body #v100Enter,html body #mainMenu .cm-play{animation:none!important}}