/* AI4Trening — shared premium exercise-player stage V1 One portrait-first visual language across exercise players. WOD has its own matching premium stage in wod-v1204.css. */ :root{ --ai4-player-stage-max:430px; --ai4-player-stage-radius:30px; --ai4-player-stage-line:rgba(255,255,255,.13); --ai4-player-stage-bg: radial-gradient(circle at 50% 34%,rgba(183,255,0,.075),transparent 38%), linear-gradient(180deg,#111a14 0%,#07100a 100%); --ai4-player-stage-shadow: 0 24px 56px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05); } #sportPlayer.sport-premium:not(.family-premium) .spx-media, #sportPlayer.family-premium .family-stage, .core-media, #exerciseDemo .ai4-motion-stage, #exerciseMedia.workout-handsfree-motion1640 .ai4-motion-stage, #visual.visual, .urkraft-media:not(.is-text-only){ position:relative!important; width:min(100%,var(--ai4-player-stage-max))!important; max-width:var(--ai4-player-stage-max)!important; height:auto!important; min-height:0!important; aspect-ratio:4/5!important; margin-left:auto!important; margin-right:auto!important; overflow:hidden!important; border:1px solid var(--ai4-player-stage-line)!important; border-radius:var(--ai4-player-stage-radius)!important; background:var(--ai4-player-stage-bg)!important; box-shadow:var(--ai4-player-stage-shadow)!important; isolation:isolate; } #sportPlayer.sport-premium:not(.family-premium) .spx-media, #sportPlayer.family-premium .family-stage{ margin-top:0!important; margin-bottom:18px!important; } #sportPlayer.sport-premium:not(.family-premium) .spx-tech-hero{ width:min(100%,var(--ai4-player-stage-max))!important; max-width:var(--ai4-player-stage-max)!important; height:auto!important; aspect-ratio:4/5!important; margin:14px auto 0!important; overflow:hidden!important; border:1px solid var(--ai4-player-stage-line)!important; border-radius:26px!important; background:var(--ai4-player-stage-bg)!important; box-shadow:var(--ai4-player-stage-shadow)!important; } #sportPlayer.sport-premium:not(.family-premium) .spx-media>img, #sportPlayer.sport-premium:not(.family-premium) .spx-tech-hero img, .core-media img, #exerciseDemo .ai4-motion-stage img, #exerciseDemo .ai4-motion-stage video, #exerciseMedia.workout-handsfree-motion1640 .ai4-motion-stage img, #exerciseMedia.workout-handsfree-motion1640 .ai4-motion-stage video, #visual.visual>img, .urkraft-media:not(.is-text-only)>img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; background:#07100a!important; transform:none!important; } /* Motion canvases are 16:9 internally. Scale by height instead of stretching. */ #exerciseDemo .ai4-motion-stage .ai4-motion-canvas, #exerciseMedia.workout-handsfree-motion1640 .ai4-motion-stage .ai4-motion-canvas, #sportPlayer .spx-media .ai4-motion-inline .ai4-motion-canvas, #urkraftMedia .ai4-motion-inline .ai4-motion-canvas{ top:0!important; bottom:0!important; left:50%!important; right:auto!important; width:auto!important; min-width:100%!important; height:100%!important; transform:translateX(-50%)!important; } #sportPlayer.sport-premium:not(.family-premium) .spx-media:before, #sportPlayer.family-premium .family-stage:after, .core-media:after, #exerciseDemo .ai4-motion-stage:after, #exerciseMedia.workout-handsfree-motion1640 .ai4-motion-stage:after, #visual.visual:before, .urkraft-media:not(.is-text-only):before{ content:""; position:absolute; z-index:2; inset:0; pointer-events:none; border-radius:inherit; background: linear-gradient(180deg,rgba(3,7,4,.13),transparent 27%,transparent 69%,rgba(3,7,4,.28)), radial-gradient(circle at 50% 42%,transparent 54%,rgba(2,7,4,.20) 100%); box-shadow:inset 0 0 0 1px rgba(183,255,0,.035); } #sportPlayer .spx-media :is(.spx-badge,.spx-tech,.spx-paused-badge,.spx-countdown), #visual.visual :is(.focus-hud,.focus-toggle,.timer-cue,.transition-preview){ z-index:4!important; } @media(max-width:390px){ :root{--ai4-player-stage-radius:26px} #sportPlayer.sport-premium:not(.family-premium) .spx-tech-hero{border-radius:24px!important} } @media(prefers-reduced-motion:reduce){ #sportPlayer .spx-media, #sportPlayer .family-stage, .core-media, #exerciseDemo .ai4-motion-stage, #exerciseMedia.workout-handsfree-motion1640 .ai4-motion-stage, #visual.visual, .urkraft-media:not(.is-text-only){transition:none!important} } /* V1.1 — canonical player controls, safe-area and state grammar. */ :root{ --ai4-player-control-min:52px; --ai4-player-primary-min:58px; --ai4-player-control-radius:16px; --ai4-player-control-gap:10px; --ai4-player-control-line:rgba(255,255,255,.12); --ai4-player-control-bg:#111a14; --ai4-player-control-text:#edf4ef; --ai4-player-control-muted:#9aa69e; --ai4-player-control-accent:#b7ff00; } #sportPlayer .sport-player-actions, .core-player .core-controls, body.ssx-premium .ss-nav, #rehabWorkout .ss-nav, .wrap #player .controls, #player.player .controls{ gap:var(--ai4-player-control-gap)!important; } :is( #sportPlayer .sport-player-actions>button, #sportPlayer .sport-player-pause, .core-player .core-controls>button, .core-player .core-subcontrols>button, body.ssx-premium .ss-nav>button, #strengthSingleSet835 .ssp-player-controls>button, #rehabWorkout .ss-nav>button, #rehabWorkout .rehab-actions>button, .wrap #player .controls>button, #player.player .controls>button, #workoutLive831 .wl-controls>button ){ min-height:var(--ai4-player-control-min)!important; border:1px solid var(--ai4-player-control-line)!important; border-radius:var(--ai4-player-control-radius)!important; background:var(--ai4-player-control-bg)!important; color:var(--ai4-player-control-text)!important; font-family:inherit!important; font-weight:900!important; line-height:1.15!important; letter-spacing:.005em; box-shadow:none!important; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:border-color .14s ease,background-color .14s ease,color .14s ease,opacity .14s ease; } :is( #sportPlayer #playerPrev, #sportPlayer #playerNext, .core-player .core-arrow, .wrap #player .controls>button:not(.timer) ){ width:var(--ai4-player-control-min)!important; min-width:var(--ai4-player-control-min)!important; height:var(--ai4-player-control-min)!important; min-height:var(--ai4-player-control-min)!important; padding:0!important; border-radius:var(--ai4-player-control-radius)!important; font-size:20px!important; } :is( #sportPlayer .sport-player-actions .player-main, .core-player .core-controls .core-primary, .wrap #player .controls .timer, body.ssx-premium .ss-primary, #rehabWorkout #finishRehab.is-ready, #player.player .controls .primary, #workoutLive831 .wl-main ){ min-height:var(--ai4-player-primary-min)!important; border-color:rgba(183,255,0,.58)!important; border-radius:var(--ai4-player-control-radius)!important; background:var(--ai4-player-control-accent)!important; color:#071008!important; font-size:13px!important; font-weight:950!important; } .wrap #player .controls .timer{ height:var(--ai4-player-primary-min)!important; } :is( #sportPlayer .sport-player-actions>button, #sportPlayer .sport-player-pause, .core-player .core-controls>button, .core-player .core-subcontrols>button, body.ssx-premium .ss-nav>button, #strengthSingleSet835 .ssp-player-controls>button, #rehabWorkout .ss-nav>button, #rehabWorkout .rehab-actions>button, .wrap #player .controls>button, #player.player .controls>button, #workoutLive831 .wl-controls>button ):focus-visible{ outline:2px solid rgba(183,255,0,.9)!important; outline-offset:3px!important; } :is( #sportPlayer .sport-player-actions>button, .core-player .core-controls>button, body.ssx-premium .ss-nav>button, #strengthSingleSet835 .ssp-player-controls>button, #rehabWorkout .ss-nav>button, #rehabWorkout .rehab-actions>button, .wrap #player .controls>button, #player.player .controls>button, #workoutLive831 .wl-controls>button ):disabled{ opacity:.42!important; cursor:not-allowed!important; } :is( #sportPlayer .sport-player-pause, .core-player .core-subcontrols>button, .wrap #player .controls .timer.paused, #strengthSingleSet835 .ssp-player-controls>[aria-pressed="true"], #workoutLive831 .wl-controls>[aria-pressed="true"] ){ border-color:rgba(183,255,0,.34)!important; background:rgba(183,255,0,.07)!important; color:#dfff8a!important; } :is( #sportPlayer .sport-player-clock, .core-player :is(.core-timer,#coreWorkClock,#restClock), body.ssx-premium #restClock, #rehabWorkout #restClock, .wrap #player :is(#timerLabel,#seconds), #player.player .timer, #workoutLive831 [role="timer"] ){ font-variant-numeric:tabular-nums; } .wrap #visual.visual:is(.loading,.broken)::after{ z-index:5!important; inset:0!important; padding:24px!important; border-radius:inherit!important; background:rgba(7,16,10,.92)!important; color:var(--ai4-player-control-muted)!important; line-height:1.45!important; } :is(#strengthSessionApp,#rehabWorkout) [role="alert"]:not(:empty){ margin-top:10px!important; padding:11px 12px!important; border:1px solid rgba(255,142,130,.24)!important; border-radius:14px!important; background:rgba(47,18,15,.64)!important; color:#ffc4bd!important; line-height:1.45!important; } #strengthSessionApp[aria-busy="true"]{ cursor:progress; } @media(max-width:679px){ .wrap:has(#player){ padding-bottom:calc(50px + env(safe-area-inset-bottom,0px))!important; } :is(#sportPlayer,.core-player,#strengthSessionApp,#rehabWorkout,.wrap #player,#player.player,#workoutLive831){ scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)); } } @media(max-width:360px){ :root{ --ai4-player-control-min:48px; --ai4-player-primary-min:56px; --ai4-player-control-gap:8px; } } @media(prefers-reduced-motion:reduce){ :is( #sportPlayer .sport-player-actions>button, #sportPlayer .sport-player-pause, .core-player .core-controls>button, .core-player .core-subcontrols>button, body.ssx-premium .ss-nav>button, #strengthSingleSet835 .ssp-player-controls>button, #rehabWorkout .ss-nav>button, #rehabWorkout .rehab-actions>button, .wrap #player .controls>button, #player.player .controls>button, #workoutLive831 .wl-controls>button ){ transition:none!important; } } /* V1.2 — adult sport players use a compact source-native landscape stage. Family/Turnlek keeps its own portrait-first stage. */ #sportPlayer.sport-premium:not(.family-premium) .spx-media{ width:calc(100% + 36px)!important;max-width:none!important;height:auto!important;min-height:0!important;aspect-ratio:16/9!important; margin:0 -18px 16px!important;border-width:0 0 1px!important;border-radius:0!important;box-shadow:none!important } #sportPlayer.sport-premium:not(.family-premium) .spx-media>img, #sportPlayer.sport-premium:not(.family-premium) .spx-media .ai4-motion-inline>img, #sportPlayer.sport-premium:not(.family-premium) .spx-media .ai4-motion-video{object-fit:contain!important;object-position:center!important} #sportPlayer.sport-premium:not(.family-premium) .spx-tech-hero{width:100%!important;max-width:620px!important;aspect-ratio:16/9!important} @media(max-width:620px){#sportPlayer.sport-premium:not(.family-premium) .spx-media{width:calc(100% + 28px)!important;margin-left:-14px!important;margin-right:-14px!important}}