* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Color Palette Variables */
:root {
    --blue: rgb(90, 111, 239);
    --light-blue: rgb(139, 177, 252);
    --purple: rgb(198, 121, 233);
    --pinkish: rgb(225, 89, 197);
    --orange: rgb(217, 170, 131);
    --green: rgb(155, 218, 130);
    --lighter-gray: rgb(38, 38, 38);
    --darker-gray: rgb(64, 64, 64);
    --dark-gray: rgb(23, 23, 23);

    /* Shared by the analysis controls and the timeline row, so the toggles
       and the DB button start on the same vertical */
    /* Muted accents for controls, so they do not outshine timeline events */
    --purple-muted: rgb(143, 87, 168);
    --pinkish-muted: rgb(166, 66, 146);
    --blue-muted: rgb(70, 87, 186);
    --light-blue-muted: rgb(104, 133, 189);

    --view-label-column: 160px;
    --timeline-inset: 1.5rem;
    --panel-inset: 20px;        /* .analysis-controls / .timeline-section padding */
    --controlbar-inset: 14px;   /* .video-controlbar side padding */

}

html {
    /* Prevent horizontal shifting from scrollbar appearance/disappearance */
    scrollbar-gutter: stable;
    overflow-y: scroll; /* Force scrollbar space to always be reserved */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--lighter-gray) 100%);
    color: #ffffff;
    line-height: 1.6;
    min-height: 100vh;
    /* Additional scrollbar stability */
    width: 100%;
    margin: 0;
    padding: 0;
    /* Global zoom to make everything smaller */
    zoom: 0.67;
}

/* Counteract zoom for video elements to fix progress bar synchronization */
video {
    zoom: 1.492537; /* 1 / 0.67 = 1.492537 to counteract the body zoom */
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
}

/* Main Header with 4 elements */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 40px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 30px;
    /* Prevent layout shifts during header adjustments */
    transition: width 0.1s ease, min-width 0.1s ease;
    /* Isolate header from layout systems below and ensure consistent width */
    flex-shrink: 0;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* Reserve space for language switcher to prevent layout shift */
.main-header::after {
    content: '';
    min-width: 80px; /* Same as language-switcher-button min-width */
    height: 40px; /* Approximate height of language switcher */
    flex-shrink: 0;
    opacity: 0; /* Invisible placeholder */
    transition: opacity 0.1s ease;
}

/* Hide the placeholder when language switcher is present */
.main-header:has(.language-switcher)::after,
.main-header.has-language-switcher::after {
    display: none;
}

/* 1. Gymnast Photo Container with Effects */
.gymnast-photo-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 40px;
}

.photo-illumination {
    position: absolute;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(240, 240, 240, 0.6) 0%, rgba(220, 220, 220, 0.4) 30%, rgba(200, 200, 200, 0.2) 50%, transparent 80%);
    border-radius: 50%;
    z-index: 1;
    filter: blur(12px);
}

.photo-gradient-hoop {
    position: absolute;
    width: 96px;
    height: 96px;
    background: conic-gradient(
        from 0deg,
        var(--blue),
        var(--light-blue),
        var(--purple),
        var(--pinkish),
        var(--orange),
        var(--blue)
    );
    border-radius: 50%;
    z-index: 2;
    padding: 3px;
}

.photo-gradient-hoop::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--dark-gray);
    border-radius: 50%;
}

.gymnast-photo {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 3;
    background: var(--darker-gray);
}

.gymnast-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Gymnast Info Column */
.gymnast-info-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    flex: 1;
}

.gymnast-name {
    font-size: 2.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.gymnast-details {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
}

.flag-icon {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    background: var(--darker-gray);
}

.academy-icon,
.lazy-academy-logo {
    width: 40px;
    height: 30px;
    object-fit: contain;
    /* No background - let transparency show through */
}

.country-name,
.academy-name {
    color: #cccccc;
    font-weight: 400;
}

/* 3. Object Info Row */
.object-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-right: 40px;
}

.object-name {
    font-size: 2.2rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1;
}

.object-icon {
    width: 4.4rem;
    height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.object-icon .apparatus-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* 4. Championship Info Column */
.championship-info-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    text-align: right;
}

.championship-name {
    font-size: 2.2rem;
    font-weight: 600;
    color: #999999;
    transition: all 0.3s ease;
}

.championship-name.clickable {
    cursor: pointer;
    position: relative;
}

.championship-name.clickable::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.championship-name.clickable:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.championship-name.clickable:hover::after {
    transform: scaleX(1);
}

.gymnast-level {
    font-size: 1.6rem;
    font-weight: 400;
    color: #999999;
}

/* Main Layout - Now 2-column */
.main-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    padding: 30px;
    flex: 1;
    align-items: start;
}

/* Video Section */
.video-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.video-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}

.video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.overlay-video {
    pointer-events: none;
    mix-blend-mode: normal;
}

/* Video layer stacking order.

   Two cameras, two stacks. A view's layers are ordered among themselves and
   nowhere against the other view's: the two are alternative pictures of the same
   routine, not one pile, and only one of them is on screen at a time. So both
   groups start at the bottom - each view's base picture is its own floor - and
   neither reaches over the other. */

/* The closeup, on the master itself */
#main-video {
    z-index: 1;
}

#contrastive-video {
    z-index: 2;
}

#performer-contacts-video {
    z-index: 3;
}

#performer-2d-skeletons-video {
    z-index: 4;
}

/* The wide shot, on a layer of its own */
#wideshot-video {
    z-index: 1;
}

#zone-video {
    z-index: 2;
}

/* The gymnast reads over the floor markings, not under them */
#contacts-wideshot-video {
    z-index: 3;
}

/* An inset in the corner rather than a layer over the picture, so it is drawn
   last of the wide shot's */
#carpet-minimap-video {
    z-index: 4;
}

/* Carpet minimap - a fixed inset in the corner, not a full-frame layer. Stack
   scoped so it beats `.video-stack video` and survives split-screen.

   Pixels only: videos here carry zoom: 1/0.67 to undo the body zoom, which
   cancels for a pixel length but multiplies a percentage one. */
.video-stack .video-minimap {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 180px;
    height: 180px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

/* Scaled down further where the frame is too narrow for even 180 */
@media (max-width: 900px) {
    .video-stack .video-minimap {
        top: 8px;
        left: 8px;
        width: 110px;
        height: 110px;
    }
}

/* Custom video control bar (replaces native <video controls>) */
.video-container .video-stack {
    border-radius: 16px 16px 0 0;
}

.video-controlbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--dark-gray);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
}

.vcb-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vcb-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.vcb-button:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

.vcb-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    pointer-events: none;
}

/* Icon pairs - one of each shows depending on player state */
.vcb-icon-pause,
.video-controlbar.is-playing .vcb-icon-play,
.vcb-icon-muted,
.video-controlbar.is-muted .vcb-icon-volume,
.vcb-icon-collapse,
.video-controlbar.is-fullscreen .vcb-icon-expand {
    display: none;
}

.video-controlbar.is-playing .vcb-icon-pause,
.video-controlbar.is-muted .vcb-icon-muted,
.video-controlbar.is-fullscreen .vcb-icon-collapse {
    display: block;
}

/* Parked at the end of the clip: the play button offers a restart instead */
.vcb-icon-replay,
.video-controlbar.is-ended .vcb-icon-play,
.video-controlbar.is-ended .vcb-icon-pause {
    display: none;
}

.video-controlbar.is-ended .vcb-icon-replay {
    display: block;
}

/* Contrastive view as a light switch: lit is the raw view, unlit is the dark
   contrastive render */
.vcb-contrast {
    color: rgba(255, 255, 255, 0.45);
}

.vcb-contrast.is-lit {
    color: #ffffff;
}

.vcb-contrast .vcb-icon-bulb-on,
.vcb-contrast.is-lit .vcb-icon-bulb-off {
    display: none;
}

.vcb-contrast.is-lit .vcb-icon-bulb-on {
    display: block;
}

.vcb-contrast[hidden] {
    display: none;
}

.vcb-time {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.vcb-time-separator {
    color: rgba(255, 255, 255, 0.4);
}

.vcb-progress {
    position: relative;
    flex: 1 1 auto;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.vcb-progress:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.vcb-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    overflow: hidden;
    transition: height 0.15s ease;
}

.vcb-progress:hover .vcb-progress-track,
.video-controlbar.is-scrubbing .vcb-progress-track {
    height: 6px;
}

.vcb-progress-buffered,
.vcb-progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
}

.vcb-progress-buffered {
    background: rgba(255, 255, 255, 0.25);
}

.vcb-progress-played {
    background: var(--light-blue);
}

.vcb-progress-handle {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--light-blue);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform 0.15s ease;
    pointer-events: none;
}

.vcb-progress:hover .vcb-progress-handle,
.vcb-progress:focus-visible .vcb-progress-handle,
.video-controlbar.is-scrubbing .vcb-progress-handle {
    transform: translateY(-50%) scale(1);
}

/* Switched on but not yet on the master's frame. Transparent rather than
   display: none - the sync code tests display, so hiding it that way would
   stop it being seeked at all. */
.video-stack video.is-settling {
    opacity: 0;
}

/* Waiting on data, or held while a layer catches up - the same thing to look at */
.video-controlbar.is-buffering .vcb-progress-played,
.video-controlbar.is-holding .vcb-progress-played {
    animation: vcb-pulse 1s ease-in-out infinite;
}

@keyframes vcb-pulse {
    50% { opacity: 0.45; }
}

.vcb-rate {
    position: relative;
    flex: 0 0 auto;
}

.vcb-rate-button {
    width: auto;
    min-width: 42px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.vcb-rate-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
    background: var(--lighter-gray);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    z-index: 12;
}

.vcb-rate-menu[hidden] {
    display: none;
}

.vcb-rate-option {
    padding: 6px 16px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    cursor: pointer;
}

.vcb-rate-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.vcb-rate-option.is-active {
    color: var(--light-blue);
    font-weight: 600;
}

.vcb-volume {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* The level opens over the picture rather than pushing the bar wider, the way
   the speed menu does. Tapping the speaker still just mutes it. */
.vcb-volume-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Fixed, so the panel does not breathe as the readout goes from 0% to 100% */
    box-sizing: border-box;
    width: 3.25rem;
    padding: 10px 8px;
    background: var(--lighter-gray);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    z-index: 12;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Bridges the gap down to the speaker, so crossing it does not drop the hover */
.vcb-volume-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
}

.vcb-volume:hover .vcb-volume-popup,
.vcb-volume:focus-within .vcb-volume-popup {
    opacity: 1;
    visibility: visible;
}

.vcb-volume-value {
    width: 100%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.vcb-volume-slider {
    /* Vertical, quiet at the bottom. The pair is what modern engines read;
       the appearance keeps older WebKit upright too. */
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: slider-vertical;
    width: 24px;
    height: 90px;
    accent-color: var(--light-blue);
    cursor: pointer;
}

/* Expanded player. The whole container is lifted in here rather than handed
   the screen by the Fullscreen API, which stretches it edge to edge and leaves
   the picture adrift in the middle. Two containers carry a player: the
   routine's on the performance page, and a clip's on the detailed pages. */
.vcb-expanded-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(6px);
    animation: vcb-expanded-in 0.15s ease-out;
}

@keyframes vcb-expanded-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Sized against the overlay rather than the viewport: the page carries a body
   zoom, which cancels for a percentage of an ancestor's box but multiplies a
   viewport unit. The margin the player is framed by is what is left of these.
   Height leads and the ratio derives the width, so a wide short window gets a
   shorter player rather than a stretched one. */
.vcb-expanded-overlay .video-container.vcb-expanded,
.vcb-expanded-overlay .action-video-container.vcb-expanded {
    display: flex;
    flex-direction: column;
    height: 90%;
    width: auto;
    max-width: 92%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* The bar takes its height off the box and the picture keeps its own shape
   inside what is left, letterboxed by object-fit like any player */
.vcb-expanded .video-stack {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
}

.vcb-expanded .video-controlbar {
    flex: 0 0 auto;
}

/* Keeps the page from reflowing under the overlay while the player is out */
.vcb-expanded-placeholder {
    width: 100%;
}

body.vcb-expanded-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .vcb-expanded-overlay .video-container.vcb-expanded,
    .vcb-expanded-overlay .action-video-container.vcb-expanded {
        height: 96%;
        max-width: 96%;
    }
}

@media (hover: none) {
    .vcb-button {
        width: 44px;
        height: 44px;
    }

    .vcb-progress-handle {
        transform: translateY(-50%) scale(1);
    }
}

@media (max-width: 768px) {
    .video-controlbar {
        gap: 6px;
        padding: 6px 10px;
    }

    .vcb-volume-popup {
        padding: 8px 6px;
    }
}

@media (max-width: 480px) {
    .vcb-step,
    .vcb-rate {
        display: none;
    }
}

/* Split-screen layout for 3D skeleton mode */
.video-stack {
    transition: all 0.5s ease;
}

.video-stack.split-screen {
    display: flex;
    flex-direction: row;
    gap: 2px; /* Small gap between panels */
}

/* Normal mode - all videos full width */
.video-stack:not(.split-screen) .video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Analysis Controls */
.analysis-controls {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* One row per camera view: name in the first column, its toggles in the second */
.view-grid {
    display: grid;
    grid-template-columns: var(--view-label-column) 1fr;
    gap: 14px 0;
    align-items: center;
}

.view-name {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #cccccc;
    font-family: inherit;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease;
}

.view-name:hover {
    color: #ffffff;
}

.view-name.is-selected {
    color: #ffffff;
    font-weight: 700;
}

.view-name:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

.view-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill 0.3s ease;
}

.view-name.is-selected .view-icon {
    fill: #ffffff;
}

.analysis-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.analysis-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.analysis-toggle input[type="checkbox"] {
    display: none;
}

/* Custom Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--lighter-gray);
    border: 1px solid var(--darker-gray);
    border-radius: 24px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* Fix alignment by using transform-based centering for the dot */
    display: flex;
    align-items: center;
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--darker-gray);
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%);
}

/* ON state styling */
.analysis-toggle input[type="checkbox"]:checked + .toggle-switch {
    background: linear-gradient(135deg, var(--purple-muted), var(--pinkish-muted));
    border-color: var(--purple-muted);
}

.analysis-toggle input[type="checkbox"]:checked + .toggle-switch::before {
    transform: translateX(20px) translateY(-50%);
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Overlays left on in the view you are not watching. Grey rather than a colour
   of its own: the layer is switched on but not drawing, and a second colour
   reads as a second kind of on rather than as off. */
.toggle-row.is-inactive .analysis-toggle input[type="checkbox"]:checked + .toggle-switch {
    background: linear-gradient(135deg, var(--darker-gray), var(--lighter-gray));
    border-color: var(--darker-gray);
}

.toggle-row.is-inactive .analysis-toggle input[type="checkbox"]:checked + .toggle-switch::before {
    background: #b0b0b0;
}

.toggle-row.is-inactive .analysis-toggle input[type="checkbox"]:checked ~ .toggle-label {
    font-weight: 400;
    color: #cccccc;
}

.toggle-label {
    color: #cccccc;
    font-weight: 400;
    transition: all 0.3s ease;
}

/* Bold text when toggle is selected */
.analysis-toggle input[type="checkbox"]:checked ~ .toggle-label {
    font-weight: 700;
    color: #ffffff;
}

/* Disabled analysis toggle styling */
.analysis-toggle.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
}

.analysis-toggle.disabled:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: none;
}

.analysis-toggle.disabled .toggle-switch {
    opacity: 0.5;
    cursor: not-allowed;
}

.analysis-toggle.disabled .toggle-label {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Timeline Section */
.timeline-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
}

.timeline-container {
    position: relative;
    height: 80px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.4s ease;
}

.timeline-container:active {
    cursor: grabbing;
}

/* Inset from the box so the routine's start and end are visible as marks
   rather than running off the edges. No transform: it would create a stacking
   context and trap the segments' z-index below the mask. */
.timeline {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--timeline-inset);
    right: var(--timeline-inset);
    display: flex;
    align-items: center;
}

/* The routine's full length, behind the elements. Thickness is a share of the
   box's height, so it holds its proportion as the strip grows. */
.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 5%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    z-index: 0;   /* Below every segment, the mask included */
}

/* First and last moment of the routine */
.timeline-container::before,
.timeline-container::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0.125rem;
    height: 1.75rem;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.35);
    border-radius: 0.0625rem;
    z-index: 1;
}

.timeline-container::before {
    left: calc(var(--timeline-inset) - 0.0625rem);
}

.timeline-container::after {
    right: calc(var(--timeline-inset) - 0.0625rem);
}

.timeline-segment {
    position: absolute;
    height: 50px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
}

/* A ruling that is a moment rather than a stretch: a block a fraction of a
   percent wide is a smudge, so it is drawn as a mark on the line instead.
   Both shapes share .timeline-mark, so selection and tooltips do not care
   which one a ruling turned out to be. The shape is this rule's to change -
   it is named for what it stands for, not for what it is drawn as. */
.timeline-moment {
    position: absolute;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    margin-left: -0.4375rem;
    transform: translateY(-50%);
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    /* Above the blocks, so a point inside a stretch is still readable */
    z-index: 6;
}

.timeline-moment.active {
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}

.timeline-moment:hover {
    transform: translateY(-50%) scale(1.25);
}

/* Palette slots, handed out to rules in the order they first appear. The A and
   penalties strips carry one group between them, so the group colours the DB
   strip reads by would leave every ruling the same shade. */
.timeline-segment.slot-1,
.timeline-moment.slot-1,
.timeline-underlay.slot-1,
.timeline-category-swatch.slot-1 {
    background: linear-gradient(135deg, var(--blue), var(--light-blue));
}

.timeline-segment.slot-2,
.timeline-moment.slot-2,
.timeline-underlay.slot-2,
.timeline-category-swatch.slot-2 {
    background: linear-gradient(135deg, var(--purple), var(--pinkish));
}

.timeline-segment.slot-3,
.timeline-moment.slot-3,
.timeline-underlay.slot-3,
.timeline-category-swatch.slot-3 {
    background: linear-gradient(135deg, var(--green), #16a085);
}

.timeline-segment.slot-4,
.timeline-moment.slot-4,
.timeline-underlay.slot-4,
.timeline-category-swatch.slot-4 {
    background: linear-gradient(135deg, var(--orange), #f1c40f);
}

.timeline-segment.slot-5,
.timeline-moment.slot-5,
.timeline-underlay.slot-5,
.timeline-category-swatch.slot-5 {
    background: linear-gradient(135deg, var(--pinkish), #e74c3c);
}

.timeline-segment.slot-6,
.timeline-moment.slot-6,
.timeline-underlay.slot-6,
.timeline-category-swatch.slot-6 {
    background: linear-gradient(135deg, var(--light-blue), var(--green));
}

.timeline-segment.slot-7,
.timeline-moment.slot-7,
.timeline-underlay.slot-7,
.timeline-category-swatch.slot-7 {
    background: linear-gradient(135deg, var(--purple), var(--blue));
}

.timeline-segment.slot-8,
.timeline-moment.slot-8,
.timeline-underlay.slot-8,
.timeline-category-swatch.slot-8 {
    background: linear-gradient(135deg, var(--orange), var(--pinkish));
}

/* Group Color Classes - Normal State */
.timeline-segment.group-dance-steps,
.timeline-underlay.group-dance-steps,
.timeline-category-swatch.group-dance-steps {
    background: linear-gradient(135deg, var(--blue), var(--light-blue));
}

.timeline-segment.group-rotation,
.timeline-underlay.group-rotation,
.timeline-category-swatch.group-rotation {
    background: linear-gradient(135deg, var(--purple), var(--pinkish));
}

.timeline-segment.group-jump,
.timeline-underlay.group-jump,
.timeline-category-swatch.group-jump {
    background: linear-gradient(135deg, var(--pinkish), var(--orange));
}

.timeline-segment.group-balance,
.timeline-underlay.group-balance,
.timeline-category-swatch.group-balance {
    background: linear-gradient(135deg, var(--orange), var(--light-blue));
}

.timeline-segment.group-dynamic,
.timeline-underlay.group-dynamic,
.timeline-category-swatch.group-dynamic {
    background: linear-gradient(135deg, var(--light-blue), var(--purple));
}

.timeline-segment.group-vertical,
.timeline-underlay.group-vertical,
.timeline-category-swatch.group-vertical {
    background: linear-gradient(135deg, var(--green), var(--blue));
}

.timeline-segment.group-technical,
.timeline-segment.group-unknown,
.timeline-underlay.group-technical,
.timeline-underlay.group-unknown,
.timeline-category-swatch.group-technical,
.timeline-category-swatch.group-unknown {
    background: linear-gradient(135deg, #ffffff, #cccccc);
    color: #333333;
}

/* DA Action Group Color Classes - Normal State */
.timeline-segment.group-dance-connections,
.timeline-underlay.group-dance-connections,
.timeline-category-swatch.group-dance-connections {
    background: linear-gradient(135deg, var(--blue), var(--green));
}

.timeline-segment.group-mixed-movements,
.timeline-underlay.group-mixed-movements,
.timeline-category-swatch.group-mixed-movements {
    background: linear-gradient(135deg, var(--purple), var(--pinkish));
}

.timeline-segment.group-apparatus-work,
.timeline-underlay.group-apparatus-work,
.timeline-category-swatch.group-apparatus-work {
    background: linear-gradient(135deg, var(--orange), var(--light-blue));
}

.timeline-segment.group-acrobatic,
.timeline-underlay.group-acrobatic,
.timeline-category-swatch.group-acrobatic {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.timeline-segment.group-flexibility,
.timeline-underlay.group-flexibility,
.timeline-category-swatch.group-flexibility {
    background: linear-gradient(135deg, var(--pinkish), #f39c12);
}

.timeline-segment.group-jumps,
.timeline-underlay.group-jumps,
.timeline-category-swatch.group-jumps {
    background: linear-gradient(135deg, var(--light-blue), var(--blue));
}

.timeline-segment.group-turns,
.timeline-underlay.group-turns,
.timeline-category-swatch.group-turns {
    background: linear-gradient(135deg, var(--green), #27ae60);
}

.timeline-segment.group-dynamic,
.timeline-underlay.group-dynamic,
.timeline-category-swatch.group-dynamic {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
}

.timeline-segment.group-combined,
.timeline-underlay.group-combined,
.timeline-category-swatch.group-combined {
    background: linear-gradient(135deg, var(--purple), var(--blue), var(--green));
}

/* Muted State - for past segments. Shaded with a filter rather than a
   translucent fill, so the track line cannot show through them. */
.timeline-segment.muted {
    filter: brightness(0.55) saturate(0.65);
}

/* Timeline Crosses - for reductions */
.timeline-cross {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Above every segment */
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

/* Not yet reached in 'progress' mode. Segments fade in on the transition they
   already carry; crosses have none, so they simply appear. */
.timeline-segment.is-upcoming {
    opacity: 0;
    pointer-events: none;
}

.timeline-cross.is-upcoming {
    display: none;
}

.timeline-cross:hover {
    transform: translateY(-50%) scale(1.1);
}

.cross-image {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    margin-left: -10px; /* Center the image horizontally */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.timeline-cross:hover .cross-image {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.timeline-segment:hover {
    transform: translateY(-50%) translateY(-2px);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* Active state - enhanced saturation and glow */
.timeline-segment.active {
    transform: translateY(-50%) translateY(-4px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
    filter: brightness(1.2) saturate(1.3);
}

.timeline-cursor {
    position: absolute;
    pointer-events: none;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ffffff;
    border-radius: 2px;
    left: 0;
    transition: left 0.1s;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    z-index: 11;
}

.timeline-cursor::before,
.timeline-cursor::after {
    content: '';
    position: absolute;
    left: -4px;
    width: 11px;
    height: 11px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.timeline-cursor::before {
    top: -6px;
}

.timeline-cursor::after {
    bottom: -6px;
}

/* Where the action sits in the routine, beside its group badge */
.action-timerange {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The container is a fixed 16/9 box with overflow hidden, so the bar has to
   sit outside it - let the stack own the ratio and the container grow */
.action-video-container.has-controlbar {
    aspect-ratio: auto;
}

.action-video-container.has-controlbar .video-stack {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Every detailed page's strip, under the view switcher */
.detailed-timeline-section {
    margin: 1.5rem 1.875rem 1.25rem;
    /* Above .action-details-section, which carries z-index 1 and would
       otherwise paint the cards over an open filter menu */
    z-index: 2;
    /* The height an action stands at on every detailed strip. Named, so the
       context drawn under the rulings matches the rulings themselves. */
    --timeline-mark-height: 3.375rem;
}

.detailed-timeline-section[hidden] {
    display: none;
}

/* Anywhere on the strip is a moment in the routine, so the whole box is a
   target - not a drag handle, which is what the base grabbing cursor implies */
.detailed-timeline-section .timeline-container,
.detailed-timeline-section .timeline-container:active {
    cursor: pointer;
    height: 5.25rem;
}

.detailed-timeline-section .timeline-cursor {
    transition: left 0.2s ease;
}

/* One line, one height, on every detailed strip and the performance one:
   a stretch is a block of this height and a moment a point centred on it */
.detailed-timeline-section .timeline-segment {
    height: var(--timeline-mark-height);
}

.detailed-timeline-section .timeline-segment:hover {
    transform: translateY(-50%) translateY(-0.125rem);
    border-color: rgba(255, 255, 255, 0.8);
}

.detailed-timeline-section .timeline-segment.active {
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}

.detailed-timeline-section .timeline-controls {
    grid-template-columns: var(--view-label-column) 1fr auto;
}

/* What the rulings fall within, drawn under them: the elements an execution
   error was called against. Muted and set back, so the crosses read over it
   rather than competing with it - it is context, not a ruling. */
.timeline-underlay {
    position: absolute;
    top: 50%;
    height: var(--timeline-mark-height, 3.375rem);
    transform: translateY(-50%);
    border-radius: 6px;
    opacity: 0.9;
    filter: brightness(0.55) saturate(0.65);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    /* Under every mark, and under the cursor */
    z-index: 2;
    cursor: default;
    transition: filter 0.2s ease;
}

/* Enough to read its name off, not enough to take the eye from the crosses */
.timeline-underlay:hover {
    filter: brightness(0.8) saturate(0.85);
}

/* The E strip marks each error with a cross, the mark the performance page
   already uses for a fault a judge points at. It is the moment shape underneath
   - the strip does not know what it is drawn as - restyled here, and the whole
   image is the target rather than the dot it replaces. */
#e-timeline-section .timeline-moment {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: -0.625rem;
    background: url('/assets/red-cross.png') center / contain no-repeat;
    border: none;
    border-radius: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#e-timeline-section .timeline-moment:hover {
    transform: translateY(-50%) scale(1.2);
}

#e-timeline-section .timeline-moment.active {
    box-shadow: none;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

/* Elements that were not counted carry a mark; the segment is already a
   centring flex box, so the glyph lands in the middle of it */
.db-timeline-section .timeline-segment.is-rejected::after {
    content: '!';
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* Element detail over a dimmed page */
.action-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

.action-modal {
    position: relative;
    width: 100%;
    max-width: 75rem;
    margin: auto;
}

/* The card inside is the list's, made solid, plus the corner button */
.action-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.action-modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
}

.action-modal-close svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.action-modal-close:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

/* Stops the page behind scrolling while the overlay is open */
body.modal-open {
    overflow: hidden;
}

/* Compact control bar for the per-action clips on the detail pages */
.action-video-container .video-controlbar {
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0 0 12px 12px;
}

.action-video-container .vcb-button {
    width: 1.625rem;
    height: 1.625rem;
}

.action-video-container .vcb-icon {
    width: 1rem;
    height: 1rem;
}

.action-video-container .vcb-time {
    font-size: 11px;
}

.action-video-container .vcb-rate-button {
    min-width: 2.125rem;
    font-size: 11px;
}

.timeline-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    white-space: nowrap;
}

.timeline-total-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

/* The number is the point of the block, so it gets the weight */
.timeline-total-value {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Under the strip: the count and the reset are one control, so the whole
   phrase including the cross is the click target */
/* Reserved whether or not there is anything to say, so the block does not
   change height as filters come and go */
.timeline-summary {
    margin-top: 0.75rem;
    min-height: 1.5rem;
}

.timeline-summary-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    margin-left: -0.4rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.timeline-summary-reset svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
}

.timeline-summary-reset:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.timeline-summary-reset:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

/* Timeline layer buttons - overlayable, each with a category drop-down */
.timeline-controls {
    display: grid;
    grid-template-columns: var(--view-label-column) 1fr;
    align-items: center;
    margin-bottom: 12px;
}

/* Pulled left onto the same verticals as the video bar icons */
.timeline-playback {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: calc(var(--controlbar-inset) - var(--panel-inset));
}

.timeline-control-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.timeline-control-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.timeline-control-button:disabled,
.timeline-control-button:disabled:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.22);
    cursor: default;
}

.timeline-control-button:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

.timeline-playback .vcb-icon-pause,
.timeline-playback.is-playing .vcb-icon-play {
    display: none;
}

.timeline-playback.is-playing .vcb-icon-pause {
    display: block;
}

.timeline-layers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.timeline-layer {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    overflow: visible;
}

.timeline-layer-button {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 8px 0 0 8px;
    color: #cccccc;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.timeline-layer-button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Revealed as the playhead passes */
.timeline-layer-button.is-progress {
    background: linear-gradient(135deg, var(--purple-muted), var(--pinkish-muted));
    color: #ffffff;
}

/* Always shown, the playhead does not gate it */
.timeline-layer-button.is-all {
    background: linear-gradient(135deg, #3d1f63, #58318a);
    color: #ffffff;
}

.timeline-layer-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 8px 8px 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.timeline-layer-caret:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.timeline-layer-caret svg {
    width: 10px;
    height: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.timeline-layer.menu-open .timeline-layer-caret svg {
    transform: rotate(180deg);
}

.timeline-layer-button:focus-visible,
.timeline-layer-caret:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

/* Disabled layers stay visible but inert */
.timeline-layer.disabled {
    opacity: 0.4;
    background: rgba(255, 255, 255, 0.04);
}

.timeline-layer.disabled .timeline-layer-button,
.timeline-layer.disabled .timeline-layer-caret {
    cursor: not-allowed;
}

.timeline-layer.disabled .timeline-layer-button:hover,
.timeline-layer.disabled .timeline-layer-caret:hover {
    background: transparent;
    color: #cccccc;
}

.timeline-layer-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    padding: 6px;
    background: var(--lighter-gray);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    z-index: 20;
}

.timeline-layer-menu[hidden] {
    display: none;
}

.timeline-layer-menu::-webkit-scrollbar {
    width: 8px;
}

.timeline-layer-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.timeline-layer-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.timeline-layer-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.timeline-category {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    color: #cccccc;
    font-size: 0.82rem;
    cursor: pointer;
}

.timeline-category-all {
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px 6px 0 0;
    color: #ffffff;
    font-weight: 600;
}

.timeline-category-swatch {
    width: 22px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.timeline-category-swatch.is-placeholder {
    background: none;
    box-shadow: none;
}

.timeline-category:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.timeline-category input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--purple);
    cursor: pointer;
    flex-shrink: 0;
}

/* Timeline tooltip - replaces the native title popup so the delay and the
   layout of the metadata are ours */
.timeline-tooltip {
    position: absolute;
    z-index: 1000;
    max-width: 320px;
    padding: 10px 12px;
    background: rgba(23, 23, 23, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 0.82rem;
    line-height: 1.45;
    pointer-events: none;
}

.timeline-tooltip[hidden] {
    display: none;
}

.timeline-tooltip-title {
    font-weight: 600;
}

/* Sits between the element name and its time range */
.timeline-tooltip-group {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.7);
}

.timeline-tooltip-subtitle {
    margin-top: 2px;
    color: var(--light-blue);
    font-variant-numeric: tabular-nums;
}

.timeline-tooltip-rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 12px;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.timeline-tooltip-rows dt {
    color: rgba(255, 255, 255, 0.6);
}

.timeline-tooltip-rows dd {
    margin: 0;
}

/* Analysis Panel */
.analysis-panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: sticky;
    top: 0;
    align-self: start; /* Don't stretch vertically */
}

/* Combined Score - Updated layout with sub-scores */
.combined-score {
    background: linear-gradient(135deg, var(--blue), var(--pinkish), var(--orange));
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(90, 111, 239, 0.3);
    min-height: 120px; /* Increased to accommodate 2x3 grid */
    max-height: 220px; /* Two rows plus the mode tabs */
    flex-shrink: 0; /* Don't shrink this element */
}

/* Full-width tab strip flush to the top of the block, browser-tab style:
   the active tab reads as part of the panel, the other sits recessed */
.score-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: -16px -24px 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.score-mode-tab {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.28);
    border: none;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.score-mode-tab + .score-mode-tab {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12);
}

.score-mode-tab:hover {
    background: rgba(0, 0, 0, 0.18);
    color: #ffffff;
}

.score-mode-tab.is-active,
.score-mode-tab.is-active:hover {
    background: transparent;
    color: #ffffff;
}

.score-mode-tab:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

.combined-score h3 {
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.2; /* Prevent excessive height */
}

.combined-score h3 .total-score {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
}

.sub-scores-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0; /* Prevent shrinking */
}

.sub-score-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* Legacy support for old .sub-scores class */
.sub-scores {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-shrink: 0; /* Prevent shrinking */
}

.sub-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.sub-score-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
    line-height: 1.2;
}

.sub-score-value {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}

/* Disabled sub-score styling (performance page) */
.sub-score.score-disabled {
    opacity: 0.4;
}

.sub-score.score-disabled .sub-score-label,
.sub-score.score-disabled .sub-score-value {
    color: #666;
}

/* Analysis Comments - Keep gray background */
.analysis-comments {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Height will be set dynamically by JavaScript */
    /* Start with a reasonable height before JS calculates exact height */
    height: 400px;
}

/* Floating Audio Toggle */
.audio-toggle-floating {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
}

.audio-toggle-floating:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.audio-toggle-floating input[type="checkbox"] {
    display: none;
}

.audio-toggle-floating .toggle-switch {
    position: relative;
    width: 28px;
    height: 16px;
    background: var(--lighter-gray);
    border: 1px solid var(--darker-gray);
    border-radius: 16px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* Fix alignment by using transform-based centering for the dot */
    display: flex;
    align-items: center;
}

.audio-toggle-floating .toggle-switch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    width: 12px;
    height: 12px;
    background: var(--darker-gray);
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%);
}

.audio-toggle-floating input[type="checkbox"]:checked + .toggle-switch {
    background: linear-gradient(135deg, var(--purple-muted), var(--pinkish-muted));
    border-color: var(--purple-muted);
}

.audio-toggle-floating input[type="checkbox"]:checked + .toggle-switch::before {
    transform: translateX(12px) translateY(-50%);
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.audio-toggle-floating .toggle-label {
    color: #cccccc;
    font-size: 1.0rem;
    transition: all 0.3s ease;
    min-width: 16px;
    text-align: center;
}

.audio-toggle-floating input[type="checkbox"]:checked ~ .toggle-label {
    color: #ffffff;
    transform: scale(1.1);
}

.comments-chat {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    padding: 10px 0;
    scroll-behavior: smooth;
    min-height: 0;
    gap: 12px;
}

/* Individual comment items with improved positioning and transparency */
.comment-item {
    position: relative;
    padding: 16px 24px 16px 32px;
    margin-right: 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    overflow: hidden;
}

/* Bottom layer - full width gradient background */
.comment-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--blue), var(--pinkish), var(--orange));
    border-radius: 12px;
    z-index: 1;
}

/* Top layer - gray overlay with smooth transparency at 45 degrees */
.comment-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 3%;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg, 
        var(--lighter-gray) 0%,
        var(--lighter-gray) 50%,
        rgba(38, 38, 38, 0.9) 60%,
        rgba(38, 38, 38, 0.7) 75%,
        rgba(38, 38, 38, 0.4) 90%,
        rgba(38, 38, 38, 0.1) 100%
    );
    border-radius: 12px;
    z-index: 2;
}

/* Detailed view comments - slimmer gradient area */
.detailed-view .comment-item::after {
    left: 1%;
}

.comment-item:hover::after {
    background: linear-gradient(
        45deg, 
        rgba(38, 38, 38, 0.98) 0%,
        rgba(38, 38, 38, 0.98) 50%,
        rgba(38, 38, 38, 0.9) 60%,
        rgba(38, 38, 38, 0.75) 75%,
        rgba(38, 38, 38, 0.5) 90%,
        rgba(38, 38, 38, 0.2) 100%
    );
}

/* Detailed view comments hover - slimmer gradient area */
.detailed-view .comment-item:hover::after {
    left: 1%;
}

.comment-item:hover {
    transform: translateX(4px);
}

/* Content positioning - moved to the right for better readability */
.comment-timestamp,
.comment-text {
    position: relative;
    z-index: 3;
    margin-left: 8px;
}

/* Most recent comment (first in reverse order) */
.comment-item:first-child .comment-text {
    color: #ffffff;
}

.comment-item:first-child .comment-timestamp {
    color: var(--light-blue);
}

/* Older comments - grayer */
.comment-item:not(:first-child) .comment-text {
    color: #999999;
}

.comment-item:not(:first-child) .comment-timestamp {
    color: #666666;
}

.comment-timestamp {
    font-size: 0.85rem;
    margin-bottom: 8px;
    font-weight: 500;
}

.comment-text {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Scrollbar Styling */
.comments-chat::-webkit-scrollbar {
    width: 8px;
}

.comments-chat::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.comments-chat::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.comments-chat::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Logo Styling - Now sits below main layout */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    margin-top: 20px;
    gap: 10px;
}

.sberai-logo {
    max-width: 150px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.sberai-logo:hover {
    opacity: 1;
}

/* DETAILED VIEW STYLES */

/* Detailed Layout - Single column with full width */
.detailed-layout {
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 30px;
    flex: 1;
}

.action-details-section {
    flex: 1;
}

/* The analysis workspace: the page's one player on the left, the readings that
   drive it scrolling on the right. See "Detailed pages" in README.md. */
.analysis-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* The caption has a row to itself, so the listing starts at the picture's
       top edge and stays there however many lines the caption runs to */
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 30px;
    row-gap: 0.625rem;
    /* Where the picture is small enough that the readings would be a slit */
    min-height: 26rem;
}

/* display:grid would otherwise beat the [hidden] default */
.analysis-workspace[hidden] {
    display: none;
}

/* The player's own parts are the grid's items, so the caption can take the row
   above without the picture and the listing falling out of line */
.shared-player {
    display: contents;
}

/* The E page's cards: an execution error read for what it cost. The total is
   the largest thing on the card and sits where the eye lands; the faults behind
   it follow heaviest first, each over a bar filled by its share of half a point,
   so the list reads by weight before it is read word by word. */
.analysis-listing .e-list {
    gap: 12px;
}

.analysis-listing .e-card {
    padding: 14px 16px;
    border-radius: 12px;
}

/* A card with nothing against it is a line, not a block */
.analysis-listing .e-card.is-clean {
    padding-block: 10px;
}

.analysis-listing .e-card .action-text-section {
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.e-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.e-card .e-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.e-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    margin-top: 0.4rem;
}

.e-card-clean {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    font-style: italic;
}

.e-card-total {
    color: var(--pinkish);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.e-card-total.is-clean {
    color: rgba(255, 255, 255, 0.3);
}

.e-faults {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.e-fault {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(225, 89, 197, 0.16) calc(var(--fault-share, 0) * 100%),
        rgba(255, 255, 255, 0.03) 0);
}

.e-fault-cost {
    flex-shrink: 0;
    min-width: 2.5rem;
    color: var(--pinkish);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Noted, not charged */
.e-fault-cost.is-free {
    color: rgba(255, 255, 255, 0.4);
}

/* Where on the body the fault was, when the analysis names it */
.e-fault-part {
    flex-shrink: 0;
    min-width: 4.5rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    text-align: center;
}

.e-fault-said {
    flex: 1;
    min-width: 0;
}

.e-fault-text {
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Only there when it says more than the line above it */
.e-fault-detail {
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.4;
}

.shared-player-caption {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0 0.25rem;
}

.analysis-workspace .shared-player-caption {
    grid-column: 1;
    grid-row: 1;
}

.analysis-workspace .shared-player-frame {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}

/* The listing is a column of cards that carry no picture of their own. Beside
   the player it gets a column and a scroller; stacked under the player it is
   just the cards, and the page scrolls. */
.analysis-workspace .analysis-listing {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    min-height: 0;
}

.analysis-workspace .analysis-listing .action-details-list {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room for the scrollbar, so a card's edge is not under it */
    padding-right: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.analysis-workspace .analysis-listing .action-details-list::-webkit-scrollbar {
    width: 6px;
}

.analysis-workspace .analysis-listing .action-details-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

/* The column has a definite height, so its cards are under shrink pressure -
   and a card clips its own overflow, which makes its automatic minimum size
   zero. Without this they squash flat instead of letting the column scroll. */
.analysis-listing .action-details-list > * {
    flex-shrink: 0;
}

/* The card carries no picture of its own here, so it is one column */
.analysis-listing .action-detail-row {
    display: block;
}

/* Was a column dividing the height of the clip beside it; with no clip it is
   as tall as what it holds, and its parts are not squashed either */
.analysis-listing .action-text-section {
    overflow: visible;
    min-height: 0;
    height: auto;
}

.analysis-listing .action-text-section > * {
    flex-shrink: 0;
}

/* The cap and the grow-to-fill fitted the boundaries into the clip's leftover
   height; with no clip they take exactly the room they need */
.analysis-listing .a-stills-carousel {
    flex: 0 0 auto;
    overflow: visible;
    max-height: none;
}

/* The card whose ruling is on the player */
.analysis-listing .action-detail-row.is-playing-here {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* A ruling's full name, wrapped rather than cut off - the names run long and
   the line is there to say which one is on the picture. Two lines' worth is
   held whatever it says, so stepping through rulings does not shift the
   picture and the readings beside it by a line at a time. */
.shared-player-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    min-width: 0;
    min-height: calc(2 * 1.35em);
}

.shared-player-range {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The picture is the footage's own shape, read off the video once it loads -
   16:9 until then, which is what the routine is. Specific enough to beat the
   16:9 every controlbar player is given. */
.shared-player-frame.has-controlbar .video-stack {
    aspect-ratio: var(--video-aspect, 16 / 9);
}

/* Lifted into its overlay, the frame keeps that shape too */
.vcb-expanded-overlay .shared-player-frame.vcb-expanded {
    aspect-ratio: var(--video-aspect, 16 / 9);
}

/* Clips its own corners, so the stack and the bar inside need no radius */
.shared-player-frame {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    border-radius: 16px;
}

/* The zone wideshot stands in for the whole stack while it is showing */
.shared-player-frame .zone-video {
    z-index: 7;
}

/* No raw layer under the picture, so nothing for the bulb to reveal */
.shared-player-frame.is-zone [data-vcb="contrast"],
.shared-player-frame.no-contrast [data-vcb="contrast"] {
    display: none;
}

/* Nothing to play: the frame keeps its shape and the banner lies over it */
.shared-player-frame.is-unavailable .video-error-banner {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    justify-content: center;
    border: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
}

/* Half a page is wider than the card players this bar was sized down for */
.shared-player-frame .video-controlbar {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
}

.shared-player-frame .vcb-button {
    width: 2rem;
    height: 2rem;
}

.shared-player-frame .vcb-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.shared-player-frame .vcb-time {
    font-size: 0.78rem;
}

/* Too narrow for two columns: caption, picture and readings stack in that order
   and the page scrolls as one */
@media (max-width: 1100px) {
    .analysis-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        min-height: 0;
    }

    .shared-player-caption,
    .shared-player-frame,
    .analysis-listing {
        grid-column: 1;
        grid-row: auto;
    }

    .analysis-listing .action-details-list {
        position: static;
        overflow: visible;
        padding-right: 0;
    }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.section-header h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.view-toggle-button {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-toggle-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(90, 111, 239, 0.3);
}

/* Multiple button layout in view toggle */
.view-toggle {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.view-toggle .view-toggle-button {
    flex-shrink: 0;
}

/* Action Details List */
.action-details-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Phases of the element; each seeks the clip to where it starts */
.action-phases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.action-phase {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    color: #cccccc;
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.action-phase:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.action-phase:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

/* Constituent actions of a series, risk or combination. Collapsed by default
   so a compound element still reads as one row in the list. */
.action-series {
    margin-top: 0.75rem;
}

.action-series-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.625rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #e6e6e6;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.action-series-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.action-series-count {
    padding: 0 0.375rem;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.75rem;
}

.action-series-caret {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.action-series-toggle[aria-expanded="true"] .action-series-caret {
    transform: rotate(180deg);
}

.action-series-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.action-series-list[hidden] {
    display: none;
}

.action-series-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: rgba(255, 255, 255, 0.04);
    /* The verdict reads off the left edge, so the row itself stays quiet */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #e6e6e6;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.action-series-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.action-series-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.action-series-item-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.action-series-item-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.action-series-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.action-series-item-span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.action-series-item-verdict {
    font-size: 0.75rem;
    font-weight: 600;
}

.action-series-item.is-counted {
    border-left-color: var(--green);
}

.action-series-item.is-counted .action-series-item-verdict {
    color: var(--green);
}

.action-series-item.is-not-counted {
    border-left-color: var(--pinkish);
}

.action-series-item.is-not-counted .action-series-item-verdict {
    color: var(--pinkish);
}

.action-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

/* The way into the full reading, in the card's bottom right corner - last in
   the column and pushed to its end. Nothing else on the card leads anywhere,
   so the way on has to be visible rather than implied. */
.action-expand {
    align-self: flex-end;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.action-expand:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.action-expand:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

.action-expand svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
    transition: transform 0.2s ease;
}

/* The arrow leads on, so it leans that way when pointed at */
.action-expand:hover svg {
    transform: translateX(0.125rem);
}

/* The card's read on the analysis: enough to judge the element at a glance,
   with the per-phase breakdown left to the popup. */
.action-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.action-summary-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.action-summary-label {
    color: rgba(255, 255, 255, 0.55);
}

.action-summary-value {
    font-weight: 600;
    color: #e6e6e6;
}

.action-summary-value.is-ok { color: var(--green); }
.action-summary-value.is-under { color: var(--pinkish); }
.action-summary-value.is-over { color: var(--orange); }
.action-summary-value.is-unmeasured { color: rgba(255, 255, 255, 0.45); }

.action-summary-sep {
    color: rgba(255, 255, 255, 0.3);
}

.action-summary-target {
    color: rgba(255, 255, 255, 0.55);
}

/* A phase group's heading, shown only when a pass row alone would be ambiguous */
.action-series-group {
    padding: 0.4rem 0.125rem 0.125rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* The group is the container: its passes are indented and hang off a rule, so
   the nesting is visible rather than implied by order. */
.action-group-block + .action-group-block {
    margin-top: 0.625rem;
}

.action-group-passes {
    margin-left: 0.5rem;
    padding-left: 0.625rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.action-pass + .action-pass {
    margin-top: 0.375rem;
}

/* The pass's segments sit under its row, indented to read as its contents */
.action-pass .action-phases {
    margin: 0.25rem 0 0 0.75rem;
}

/* Performed against target, colour-coded by how the turn stood to its bound */
.action-series-item-rotation {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.7);
}

.action-series-item-rotation.is-ok { color: var(--green); }
.action-series-item-rotation.is-under { color: var(--pinkish); }
.action-series-item-rotation.is-over { color: var(--orange); }
.action-series-item-rotation.is-unmeasured { color: rgba(255, 255, 255, 0.45); }

/* Not a failure: the element could not be measured at all */
.action-score-status.is-unscored {
    color: rgba(255, 255, 255, 0.55);
}

.timeline-segment.is-unscored {
    filter: saturate(0.25);
}

/* How the phase came out. Missing reads as absent rather than merely dim,
   so it is not mistaken for a phase that simply has no timing. */
.action-phase.is-missing {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.4);
}

.action-phase.is-not-counted,
.action-phase.is-flawed {
    background: rgba(225, 89, 197, 0.14);
    border-color: rgba(225, 89, 197, 0.4);
    color: var(--pinkish);
}

.action-phase.is-done {
    color: #ffffff;
}

.action-phase.is-counted,
.action-phase.is-bonus {
    background: rgba(155, 218, 130, 0.14);
    border-color: rgba(155, 218, 130, 0.45);
    color: var(--green);
}

.action-phase.is-flawed .action-phase-duration,
.action-phase.is-not-counted .action-phase-duration,
.action-phase.is-counted .action-phase-duration,
.action-phase.is-bonus .action-phase-duration {
    color: inherit;
    opacity: 0.75;
}

.action-phase-duration {
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

/* The card is clickable: it puts its reading on the page's player */
.action-detail-row {
    cursor: pointer;
}

/* The E and DA pages still carry a clip inside the card */
.action-detail-row .action-video-section {
    cursor: default;
}

.action-modal .action-detail-row {
    cursor: default;
    /* One column here too: the picture is the page's, behind the dim */
    display: block;
    /* Solid, unlike the card in the list: this one stands over the page rather
       than on it, and the reading is hard to hold against a moving routine
       showing through it */
    background: var(--lighter-gray);
    backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* display:grid would otherwise beat the [hidden] default */
.action-detail-row[hidden] {
    display: none;
}

.action-detail-row {
    display: grid;
    /* The clip is a reference rather than the subject - the reading beside it
       is - so it takes the narrower column, on every detailed page and in the
       modal alike. Narrower is also shorter: the picture keeps its 16/9. */
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
    gap: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.action-detail-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1;
}

/* Group color styling for action rows */
.action-detail-row.group-dance-steps::before {
    background: linear-gradient(135deg, var(--blue), var(--light-blue));
}

.action-detail-row.group-rotation::before {
    background: linear-gradient(135deg, var(--purple), var(--pinkish));
}

.action-detail-row.group-jump::before {
    background: linear-gradient(135deg, var(--pinkish), var(--orange));
}

.action-detail-row.group-balance::before {
    background: linear-gradient(135deg, var(--orange), var(--light-blue));
}

.action-detail-row.group-dynamic::before {
    background: linear-gradient(135deg, var(--light-blue), var(--purple));
}

.action-detail-row.group-vertical::before {
    background: linear-gradient(135deg, var(--green), var(--blue));
}

.action-detail-row.group-technical::before,
.action-detail-row.group-unknown::before {
    background: linear-gradient(135deg, #ffffff, #cccccc);
}

/* =============================================================================
   DETAILED VIEW COLOR CODING FOR TIME ELEMENTS
   ============================================================================= */

/* Action group container colors - unified boxy style */

/* Comment timestamp colors */
.action-detail-row.group-dance-steps .comment-timestamp {
    color: var(--blue);
    font-weight: 600;
}

.action-detail-row.group-rotation .comment-timestamp {
    color: var(--purple);
    font-weight: 600;
}

.action-detail-row.group-jump .comment-timestamp {
    color: var(--pinkish);
    font-weight: 600;
}

.action-detail-row.group-balance .comment-timestamp {
    color: var(--orange);
    font-weight: 600;
}

.action-detail-row.group-dynamic .comment-timestamp {
    color: var(--light-blue);
    font-weight: 600;
}

.action-detail-row.group-vertical .comment-timestamp {
    color: var(--green);
    font-weight: 600;
}

.action-detail-row.group-technical .comment-timestamp,
.action-detail-row.group-unknown .comment-timestamp {
    color: #666666;
    font-weight: 600;
}

/* Reduction timestamp colors */
.action-detail-row.group-dance-steps .reduction-timestamp {
    color: var(--blue);
    font-weight: 600;
}

.action-detail-row.group-rotation .reduction-timestamp {
    color: var(--purple);
    font-weight: 600;
}

.action-detail-row.group-jump .reduction-timestamp {
    color: var(--pinkish);
    font-weight: 600;
}

.action-detail-row.group-balance .reduction-timestamp {
    color: var(--orange);
    font-weight: 600;
}

.action-detail-row.group-dynamic .reduction-timestamp {
    color: var(--light-blue);
    font-weight: 600;
}

.action-detail-row.group-vertical .reduction-timestamp {
    color: var(--green);
    font-weight: 600;
}

.action-detail-row.group-technical .reduction-timestamp,
.action-detail-row.group-unknown .reduction-timestamp {
    color: #666666;
    font-weight: 600;
}

/* Rewind button colors */
.action-detail-row.group-dance-steps .rewind-button {
    background: linear-gradient(135deg, var(--blue), var(--light-blue));
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.action-detail-row.group-dance-steps .rewind-button:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 4px 15px rgba(90, 111, 239, 0.4);
}

.action-detail-row.group-rotation .rewind-button {
    background: linear-gradient(135deg, var(--purple), var(--pinkish));
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.action-detail-row.group-rotation .rewind-button:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 4px 15px rgba(198, 121, 233, 0.4);
}

.action-detail-row.group-jump .rewind-button {
    background: linear-gradient(135deg, var(--pinkish), var(--orange));
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.action-detail-row.group-jump .rewind-button:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 4px 15px rgba(225, 89, 197, 0.4);
}

.action-detail-row.group-balance .rewind-button {
    background: linear-gradient(135deg, var(--orange), var(--light-blue));
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.action-detail-row.group-balance .rewind-button:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 4px 15px rgba(217, 170, 131, 0.4);
}

.action-detail-row.group-dynamic .rewind-button {
    background: linear-gradient(135deg, var(--light-blue), var(--purple));
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.action-detail-row.group-dynamic .rewind-button:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 4px 15px rgba(139, 177, 252, 0.4);
}

.action-detail-row.group-vertical .rewind-button {
    background: linear-gradient(135deg, var(--green), var(--blue));
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.action-detail-row.group-vertical .rewind-button:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 4px 15px rgba(155, 218, 130, 0.4);
}

.action-detail-row.group-technical .rewind-button,
.action-detail-row.group-unknown .rewind-button {
    background: linear-gradient(135deg, #ffffff, #cccccc);
    color: #333333;
    border: none;
    transition: all 0.2s ease;
}

.action-detail-row.group-technical .rewind-button:hover,
.action-detail-row.group-unknown .rewind-button:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 4px 15px rgba(204, 204, 204, 0.4);
}

/* =============================================================================
   DA DETAILED VIEW COLOR CODING
   ============================================================================= */

/* DA Action row border colors */
.action-detail-row.group-dance-connections::before {
    background: linear-gradient(135deg, var(--blue), var(--green));
}

.action-detail-row.group-mixed-movements::before {
    background: linear-gradient(135deg, var(--purple), var(--pinkish));
}

.action-detail-row.group-apparatus-work::before {
    background: linear-gradient(135deg, var(--orange), var(--light-blue));
}

.action-detail-row.group-acrobatic::before {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.action-detail-row.group-flexibility::before {
    background: linear-gradient(135deg, var(--pinkish), #f39c12);
}

.action-detail-row.group-jumps::before {
    background: linear-gradient(135deg, var(--light-blue), var(--blue));
}

.action-detail-row.group-turns::before {
    background: linear-gradient(135deg, var(--green), #27ae60);
}

.action-detail-row.group-dynamic::before {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
}

.action-detail-row.group-combined::before {
    background: linear-gradient(135deg, var(--purple), var(--blue), var(--green));
}

/* DA Action group container colors - unified boxy style */

/* DA Accepted/Not accepted indicator styles - match action-group style */
.action-accepted-indicator {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.action-not-accepted-indicator {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* =============================================================================
   A DETAILED VIEW LAYOUT & STYLING
   ============================================================================= */

/* Make A detailed layout constrained by video height */
.a-detailed-layout .action-detail-row {
    align-items: start;
}

/* Remove any unnecessary padding/margin from video section in A view */
.a-detailed-layout .action-video-section {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Make action text section a flex container for A detailed view, constrained by video height */
.a-detailed-layout .action-text-section {
    display: flex;
    flex-direction: column;
    align-self: start;
    overflow: hidden;
}

.a-detailed-layout .action-metadata {
    flex-shrink: 0;
    margin-bottom: 0;
}

.a-detailed-layout .action-header {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Stills Carousel - integrate with existing detailed view layout */
.a-stills-carousel {
    margin-top: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden; /* Prevent overflow */
}

.stills-container {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    padding: 4px 0 0 0; /* Add top padding for hover animation */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    flex: 1;
    align-items: stretch;
    min-height: 0; /* Allow shrinking */
}

.stills-container::-webkit-scrollbar {
    height: 4px;
}

.stills-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.stills-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.no-stills {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    flex: 1;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

.still-thumbnail {
    flex: 0 0 auto;
    height: 100%; /* Use all available height */
    aspect-ratio: 4/3; /* Maintain proper thumbnail proportions */
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
}

.still-thumbnail:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.still-thumbnail.active {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(90, 111, 239, 0.3);
}

/* Serial Index Badge */

.still-frame {
    border-radius: 6px;
    margin-bottom: 0.3rem;
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.still-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.still-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    text-align: center;
    gap: 8px;
}

.still-image-placeholder .placeholder-icon {
    font-size: 20px;
    opacity: 0.4;
    filter: grayscale(100%);
}

.still-image-placeholder .placeholder-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.2;
}

.still-time {
    color: #ccc;
    font-size: 0.65rem;
    text-align: center;
    font-weight: 500;
    flex-shrink: 0;
    padding: 0.25rem 0;
    margin-top: auto;
}

/* A rule's own strip, above its boundaries: where this rule was read across
   the routine and nothing else - no transport, no filter, no total. Read
   against the same ruler as the strip at the top of the page, so a mark sits
   under the same moment in both. */
.rule-timeline {
    margin-top: 1rem;
    flex-shrink: 0;
}

.rule-timeline[hidden] {
    display: none;
}

.rule-timeline .timeline-container {
    height: 2.25rem;
    cursor: default;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
}

.rule-timeline .timeline-mark {
    top: calc((var(--lane, 0) + 0.5) * (100% / var(--timeline-lanes, 1)));
    transform: translateY(-50%);
}

.rule-timeline .timeline-segment {
    height: calc((100% / var(--timeline-lanes, 1)) - 0.5rem);
    min-height: 0.5rem;
    border-radius: 4px;
}

.rule-timeline .timeline-segment:hover,
.rule-timeline .timeline-moment:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

.rule-timeline .timeline-moment {
    width: 0.6rem;
    height: 0.6rem;
    margin-left: -0.3rem;
}

.rule-timeline .timeline-moment:hover {
    transform: translateY(-50%) scale(1.3);
}

.rule-timeline .timeline-mark.active {
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

/* The card's strip is inset the same as the page's, so the routine's start and
   end read as marks rather than running off the edges */
.rule-timeline .timeline::before {
    height: 8%;
}

/* A ruling's stills, as the stretches they were read over. The picture is not
   the point here - the boundaries are - so each is a chip carrying them, and
   the strip wraps rather than scrolling sideways. The carpet map on use of
   space is a picture that is the point, and keeps its tile. */
.stills-container:has(.still-timing) {
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 0.5rem;
}

.still-thumbnail.still-timing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: auto;
    aspect-ratio: auto;
    padding: 0.4rem 0.65rem 0.4rem 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.still-thumbnail.still-timing:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.still-thumbnail.still-timing.active {
    border-color: var(--blue);
    background: rgba(90, 111, 239, 0.18);
    box-shadow: none;
}

.still-timing-index {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    background: linear-gradient(135deg, rgba(90, 111, 239, 0.95), rgba(198, 121, 233, 0.95));
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.still-timing-range {
    white-space: nowrap;
}

/* Nothing was found for this slot, so it says so where a range would be */
.still-thumbnail.still-timing.special-collection-placeholder {
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    cursor: default;
}

.still-thumbnail.still-timing.special-collection-placeholder:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.03);
}

.still-thumbnail.still-timing.special-collection-placeholder .still-timing-index {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

/* Carpet map - one still of the whole routine. It keeps the footprint of a
   still thumbnail so the block lines up with every other rule's strip. */
.carpet-map-thumbnail .still-frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carpet-map-thumbnail .still-time {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
}

/* Sits over the map's top-right corner, like the serial badge on a still */
.carpet-map-download {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(20, 20, 20, 0.7);
    color: #fff;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.carpet-map-download[hidden] {
    display: none;
}

.carpet-map-download:hover,
.carpet-map-download:focus-visible {
    opacity: 1;
    background: rgba(90, 111, 239, 0.9);
}

.carpet-map-download:disabled {
    cursor: progress;
    opacity: 0.5;
}

.carpet-map-download svg,
.carpet-map-popup-download svg {
    width: 18px;
    height: 18px;
}

.carpet-map-thumbnail.carpet-map-unavailable {
    cursor: default;
}

.carpet-map-thumbnail.carpet-map-unavailable:hover {
    transform: none;
    border-color: transparent;
}

/* Carpet map popup - near-fullscreen, the picture is the whole point */
.carpet-map-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    animation: carpet-map-popup-in 0.15s ease-out;
}

@keyframes carpet-map-popup-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.carpet-map-popup-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.carpet-map-popup-image {
    max-width: 96vw;
    max-height: 96vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.carpet-map-popup-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.carpet-map-popup-close:hover {
    background: rgba(60, 60, 60, 0.95);
}

.carpet-map-popup-download {
    position: absolute;
    top: -6px;
    right: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.carpet-map-popup-download:hover,
.carpet-map-popup-download:focus-visible {
    background: rgba(90, 111, 239, 0.95);
}

.carpet-map-popup-download:disabled {
    cursor: progress;
    opacity: 0.5;
}

body.carpet-map-popup-open {
    overflow: hidden;
}

/* A Action Border Colors */
.action-detail-row.group-musical-interpretation::before {
    background: linear-gradient(135deg, var(--purple), var(--blue));
}

.action-detail-row.group-space-utilization::before {
    background: linear-gradient(135deg, var(--green), var(--blue));
}

.action-detail-row.group-choreographic-creativity::before {
    background: linear-gradient(135deg, var(--orange), var(--pinkish));
}

.action-detail-row.group-artistic-expression::before {
    background: linear-gradient(135deg, var(--pinkish), #e74c3c);
}

.action-detail-row.group-rhythmic-precision::before {
    background: linear-gradient(135deg, var(--blue), var(--purple));
}

.action-detail-row.group-body-lines::before {
    background: linear-gradient(135deg, var(--green), #16a085);
}

.action-detail-row.group-compositional-integrity::before {
    background: linear-gradient(135deg, var(--orange), #f1c40f);
}

.action-detail-row.group-program-conclusion::before {
    background: linear-gradient(135deg, var(--purple), var(--blue), var(--green));
}

/* A Action Group Colors - unified boxy style */

/* Deductions Group Colors - unified red style for all deduction types */

/* Responsive adjustments for stills */
@media (max-width: 768px) {
    .stills-container {
        gap: 0.5rem;
    }
}

/* Video Section */
.action-video-section {
    position: relative;
}

.action-video-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    position: relative;
}

.action-video-container .video-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

/* The container already clips at its own radius. A larger one on the stack
   curves the video more tightly and leaves black showing in the corners. */
.action-video-container .video-stack,
.action-video-container .video-stack video {
    border-radius: 0;
}

/* Split-screen layout for detailed view (always enabled) */
.action-video-container .video-stack.split-screen {
    display: flex;
    flex-direction: row;
    gap: 2px; /* Small gap between panels */
}

/* Fallback for non-split screen mode */
.action-video-container .video-stack:not(.split-screen) .video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Video layer stacking for detailed view */
.action-video-container .main-video {
    z-index: 1;
}

.action-video-container .raw-video {
    z-index: 2;
    mix-blend-mode: multiply;
    opacity: 0.7;
}

.action-video-container .contrastive-video {
    z-index: 3;
}

.action-video-container .contacts-video {
    z-index: 4;
}

.action-video-container .body-viz-video {
    z-index: 5;
}

.action-video-container .skeleton-3d-video {
    z-index: 6;
}

.duration {
    font-size: 0.8rem;
    color: #cccccc;
}

.video-controls-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 11;
}

.rewind-button {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid var(--blue);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0;
}

/* Custom restart arrow using CSS shapes */
.rewind-button::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--light-blue);
    border-radius: 50%;
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(-10deg);
    transition: border-color 0.3s ease;
}

.rewind-button::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--light-blue);
    top: 11px;
    right: 13px;
    transform: rotate(25deg);
    transition: border-left-color 0.3s ease;
}

.rewind-button:hover {
    background: rgba(90, 111, 239, 0.2);
    border-color: var(--light-blue);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(90, 111, 239, 0.4);
}

.rewind-button:hover::before {
    border-color: #ffffff;
    border-top-color: transparent;
    border-right-color: transparent;
}

.rewind-button:hover::after {
    border-left-color: #ffffff;
}

.rewind-button:active {
    transform: scale(0.95);
}

.rewind-button.rewinding {
    background: var(--blue);
    transform: scale(0.9) rotate(360deg);
}

.rewind-button.rewinding::before {
    border-color: #ffffff;
    border-top-color: transparent;
    border-right-color: transparent;
}

.rewind-button.rewinding::after {
    border-left-color: #ffffff;
}

/* Text Section */
.action-text-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Sits off the top edge so the short text column reads balanced against
       the full-height video beside it */
    padding-top: 0.875rem;
}

.action-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.9375rem;
}

/* Tags and the score panel share a row aligned on their bottom edges, so the
   two line up without depending on either one's height */
.action-header-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9375rem;
}

/* Verdict and the two figures behind it, pinned to the top right corner */
.action-score-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    flex-shrink: 0;
    min-width: 8.25rem;
    padding: 0.5rem 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.action-score-status {
    padding: 0.1875rem 0.5rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}

.action-score-status.is-accepted {
    background: rgba(155, 218, 130, 0.18);
    color: var(--green);
}

.action-score-status.is-rejected {
    background: rgba(225, 89, 197, 0.18);
    color: var(--pinkish);
}

.action-score-figures {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Labels left, values right, so the numbers line up across every row */
.action-score-figure {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.625rem;
    font-size: 0.78rem;
}

.action-score-label {
    color: rgba(255, 255, 255, 0.6);
}

.action-score-value {
    color: #ffffff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.action-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.action-group-row {
    display: flex;
    /* Chips share the height of the tallest, rather than each sizing itself */
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* Neutral grey: the coloured bar at the top of the block already carries the
   group, so the tag only has to be readable */
.action-group {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: #e6e6e6;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Compound elements only, so it reads as an exception to the plain case */
.action-type {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: rgba(198, 121, 233, 0.16);
    border: 1px solid rgba(198, 121, 233, 0.4);
    border-radius: 6px;
    color: var(--purple);
    font-size: 0.85rem;
    font-weight: 600;
}

.action-valuable-indicator {
    font-size: 0.85rem;
    font-weight: 500;
    color: #888888; /* Gray color */
    display: flex;
    align-items: center;
    font-style: normal;
}

/* Metadata Section */
.action-metadata h4,
.action-comments h4,
.action-reductions h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.metadata-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Cross-references section - separate from regular metadata */
.cross-references-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cross-references-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.metadata-item {
    display: flex;
    gap: 8px;
    padding: 4px 0;
}

.metadata-key {
    font-weight: 500;
    color: #cccccc;
    min-width: 120px;
}

.metadata-value {
    color: #ffffff;
    font-weight: 400;
    flex: 1;
}

/* Cross-reference metadata items */
.cross-reference-item {
    background: linear-gradient(135deg, #b8c6db 0%, #f5f7fa 100%) !important;
    border: 1px solid #c0c8d4 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Special styling for E deductions cross-reference */
.cross-reference-item.e-deductions-ref {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
    border: 1px solid #d8b4fe !important;
}

.cross-reference-item.e-deductions-ref:hover:not(.disabled) {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
    border-color: #c4b5fd !important;
}

/* Arrow removed - tooltip is now positioned dynamically */

.cross-reference-item:hover:not(.disabled) {
    background: linear-gradient(135deg, #a8b6cb 0%, #e5e9f0 100%) !important;
    border-color: #95a5b8 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.cross-reference-item.disabled {
    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%) !important;
    border: 1px solid #9ca3af !important;
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.cross-reference-item .cross-ref-label {
    font-weight: 600;
    color: #374151;
    min-width: 80px;
}

.cross-reference-item .cross-ref-action {
    color: #1f2937;
    letter-spacing: 0.05em;
    flex: 1;
}

.cross-reference-item.disabled .cross-ref-label,
.cross-reference-item.disabled .cross-ref-action {
    color: #6b7280;
}

/* Add a small icon to indicate it's a link */
.cross-reference-item:not(.disabled)::after {
    content: "→";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.cross-reference-item:hover:not(.disabled)::after {
    color: #374151;
    transform: translateY(-50%) translateX(2px);
}

/* Highlight effect for cross-referenced actions */
.highlighted-cross-ref {
    animation: highlightPulse 3s ease-in-out;
    position: relative;
    z-index: 10;
}

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
        background-color: rgba(59, 130, 246, 0.1);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(59, 130, 246, 0.3);
        background-color: rgba(59, 130, 246, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        background-color: transparent;
    }
}

/* Comments Section */
.related-comments, .related-reductions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-item {
    padding: 10px 12px;
    background: rgba(139, 177, 252, 0.1);
    border: 1px solid rgba(139, 177, 252, 0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comment-timestamp {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--light-blue);
}

.comment-text {
    font-size: 0.95rem;
    color: #ffffff;
    line-height: 1.4;
}

/* Reductions Section */
.reduction-item {
    padding: 10px 12px;
    background: rgba(225, 89, 197, 0.1);
    border: 1px solid rgba(225, 89, 197, 0.2);
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
}

.reduction-timestamp {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pinkish);
}

.reduction-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pinkish);
}

/* No data messages */
.no-data, .no-metadata, .no-comments, .no-reductions {
    text-align: center;
    color: #666666;
    font-style: italic;
    padding: 20px;
}

/* Navigation Footer */
.navigation-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
}

.logo-container.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.logo-container.clickable:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.logo-hint {
    font-size: 0.8rem;
    color: #666666;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo-container.clickable:hover .logo-hint {
    opacity: 1;
}

/* View Toggle Layout - matches main grid structure */
.view-toggle-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    margin: 20px 30px 10px 30px;
}

.view-toggle-main-buttons {
    display: flex;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.view-toggle-back-container {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Main toggle buttons - custom width based on button type */
.view-toggle-main-buttons .view-toggle-main-button {
    padding: 16px 12px;
    background: rgba(60, 60, 60, 0.8);
    color: rgba(255, 255, 255, 0.7);
    border: none;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Main overview button takes 50% */
.view-toggle-main-buttons .main-overview-button {
    flex: 5;
    font-size: 15px;
    padding: 16px 24px;
}

/* Detailed buttons take 10% each */
.view-toggle-main-buttons .detailed-button {
    flex: 1;
    font-size: 13px;
    padding: 16px 8px;
}

/* Disabled button state */
.view-toggle-main-buttons .view-toggle-main-button.disabled {
    background: rgba(40, 40, 40, 0.6);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    opacity: 0.6;
}

.view-toggle-main-buttons .view-toggle-main-button.disabled:hover {
    background: rgba(40, 40, 40, 0.6);
    color: rgba(255, 255, 255, 0.4);
    transform: none;
}

/* Header loading states - only apply to pages with caching enabled */
.enable-smooth-loading .gymnast-name, 
.enable-smooth-loading .country-name, 
.enable-smooth-loading .academy-name, 
.enable-smooth-loading .object-name, 
.enable-smooth-loading .championship-name, 
.enable-smooth-loading .gymnast-level {
    transition: opacity 0.3s ease-in-out;
    min-height: 1.2em; /* Prevent layout shift */
}

.enable-smooth-loading .gymnast-name:not(.loaded), 
.enable-smooth-loading .country-name:not(.loaded), 
.enable-smooth-loading .academy-name:not(.loaded), 
.enable-smooth-loading .object-name:not(.loaded), 
.enable-smooth-loading .championship-name:not(.loaded), 
.enable-smooth-loading .gymnast-level:not(.loaded) {
    opacity: 0;
}

.enable-smooth-loading .gymnast-name.loaded, 
.enable-smooth-loading .country-name.loaded, 
.enable-smooth-loading .academy-name.loaded, 
.enable-smooth-loading .object-name.loaded, 
.enable-smooth-loading .championship-name.loaded, 
.enable-smooth-loading .gymnast-level.loaded {
    opacity: 1;
}

.enable-smooth-loading .gymnast-photo img, 
.enable-smooth-loading .flag-icon, 
.enable-smooth-loading .academy-icon {
    transition: opacity 0.3s ease-in-out;
}

.enable-smooth-loading .gymnast-photo img:not(.loaded), 
.enable-smooth-loading .flag-icon:not(.loaded), 
.enable-smooth-loading .academy-icon:not(.loaded) {
    opacity: 0;
}

.enable-smooth-loading .gymnast-photo img.loaded, 
.enable-smooth-loading .flag-icon.loaded, 
.enable-smooth-loading .academy-icon.loaded {
    opacity: 1;
}

/* Loading placeholder for header elements */
.header-loading {
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 2s infinite linear;
    border-radius: 4px;
    height: 1.2em;
    display: inline-block;
    min-width: 120px;
}

.main-title.header-loading {
    width: 60%;
    height: 1.4em;
}

.category-name.header-loading,
.chief-judge-first-name.header-loading,
.chief-judge-last-name.header-loading,
.start-date.header-loading,
.end-date.header-loading {
    min-width: 160px;
}

.championship-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.championship-loading-overlay.is-hidden {
    display: none;
}

@keyframes loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== ENHANCED ANIMATED HEADER SYSTEM ===== */
/* Based on frontend engineer's spectacular design */

/* Enhanced hero configuration - full width like original */
.championships-main-header {
    position: relative;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0 0 0;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,.4);
    overflow: hidden;
    --px: 0; --py: 0;
    background: linear-gradient(135deg, rgb(90,111,239), rgb(198,121,233), rgb(225,89,197));
    filter: saturate(1.0);
    user-select: none;
    transition: background .5s ease, filter .5s ease;
}

/* Light theme variant (previous default) */
.championships-main-header.light-theme {
    background:
        radial-gradient(1200px 600px at calc(50% + 90px*var(--px)) calc(50% + 40px*var(--py)), rgba(139, 177, 252, 0.25), transparent 60%),
        radial-gradient(800px 500px at calc(50% - 160px*var(--px)) calc(40% - 60px*var(--py)), rgba(198, 121, 233, 0.22), transparent 60%),
        linear-gradient(180deg, #8BB1FC, #C679E9); /* Light theme: light-blue to purple */
    filter: saturate(1.12);
}

/* Dark Original theme variant (simple animations with dark color palette) */
.championships-main-header.dark-original-theme {
    background: linear-gradient(135deg, 
        #1a1a1a 0%, 
        #2d2d2d 25%, 
        #3a3a3a 50%, 
        #2d2d2d 75%, 
        #1a1a1a 100%);   /* Darker pinkish */
    filter: saturate(0.9);
}

/* Dark theme variant (enhanced animations with dramatic navy effects) */
.championships-main-header.dark-theme {
    background:
        radial-gradient(1200px 600px at calc(50% + 90px*var(--px)) calc(50% + 40px*var(--py)), rgba(63, 175, 255, 0.25), transparent 60%),
        radial-gradient(800px 500px at calc(50% - 160px*var(--px)) calc(40% - 60px*var(--py)), rgba(255, 120, 196, 0.22), transparent 60%),
        linear-gradient(180deg, #0b1020 0%, #121a35 60%, #0a0f20 100%); /* Dark theme: deep navy gradient */
    filter: saturate(1.15);
}

/* ===== ORIGINAL THEME (Simple Emoji Animations) ===== */
/* Header decoration containers */
.header-sparkles, .header-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Hide original animations in light/dark themes (enhanced themes) */
.light-theme .header-sparkles, 
.light-theme .header-clouds,
.dark-theme .header-sparkles, 
.dark-theme .header-clouds {
    opacity: 0;
    pointer-events: none;
}

/* Show enhanced animations in ALL themes - user requested dynamic improvements */
/* Original theme uses simple sparkles/clouds, but enhanced animations are now visible */
.championships-main-header .header-starfield,
.championships-main-header .enhanced-cloud-group,
.championships-main-header .enhanced-sparkle,
.championships-main-header .shooting-star,
.championships-main-header .header-fog {
    opacity: 1;
    pointer-events: auto;
}

/* Reduce opacity slightly in original themes for more subtle effect */
.championships-main-header:not(.light-theme):not(.dark-theme) .enhanced-cloud-group,
.championships-main-header:not(.light-theme):not(.dark-theme) .enhanced-sparkle {
    opacity: 0.7;
}

/* Original sparkle animations */
.sparkle {
    position: absolute;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    animation: sparkleFloat 6s ease-in-out infinite;
    transition: opacity 0.5s ease;
}

@keyframes sparkleFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        opacity: 0.8; 
    }
    50% { 
        transform: translateY(-10px) rotate(180deg); 
        opacity: 1; 
    }
}

/* Original cloud animations */
.cloud {
    position: absolute;
    color: rgba(255, 255, 255, 0.6);
    font-size: 2rem;
    animation: cloudFloat 8s ease-in-out infinite;
    transition: opacity 0.5s ease;
}

@keyframes cloudFloat {
    0%, 100% { 
        transform: translateX(0px); 
        opacity: 0.6; 
    }
    50% { 
        transform: translateX(-15px); 
        opacity: 0.8; 
    }
}

/* Animation layer base */
.header-layer { position: absolute; inset: 0; pointer-events: none; }

/* Enhanced starfield */
.header-starfield { position: absolute; inset: 0; pointer-events: none; }
.header-starfield i { 
    position: absolute; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.95); 
    filter: blur(0.5px); 
}
@keyframes starBlink { 0%,100%{opacity:0.2} 50%{opacity:0.9} }

/* Enhanced cloud system */
.header-enhanced-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.enhanced-cloud-group {
    position: absolute; width: 220px; height: 120px; opacity: .88;
    animation: cloudDrift var(--cloud-dur, 32s) ease-in-out infinite alternate, cloudFade 18s ease-in-out infinite;
    transition: opacity 1.2s ease-in-out, filter .5s ease, background .5s ease; will-change: transform, opacity;
}
.enhanced-cloud-group.mounting { animation-play-state: paused; }
.enhanced-cloud { 
    position: absolute; 
    background: rgba(139, 177, 252, 0.92); /* Default: light blue clouds */
    border-radius: 999px; 
    filter: blur(2px); 
    box-shadow: 0 0 40px rgba(139, 177, 252, 0.25); 
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

/* Dark theme clouds */
.dark-theme .enhanced-cloud { 
    background: #fff; /* White clouds for dark theme */
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.25); 
}
.enhanced-cloud.puff.a { width: 120px; height: 70px; left: 20px; top: 36px; }
.enhanced-cloud.puff.b { width: 80px; height: 80px; left: 80px; top: 24px; }
.enhanced-cloud.puff.c { width: 140px; height: 90px; left: 110px; top: 40px; }
.enhanced-cloud.puff.d { width: 70px; height: 60px; left: 60px; top: 58px; }
.enhanced-cloud.puff { transform: translate(var(--tx,0px), var(--ty,0px)) scale(var(--ps,1)); will-change: transform; }
.enhanced-cloud-group::after { 
    content:""; 
    position:absolute; 
    inset:0; 
    background: radial-gradient(100px 50px at 60% 40%, rgba(255,255,255,0.45), transparent 70%); 
    mix-blend-mode: screen; 
    transition: background 0.5s ease;
}
@keyframes cloudDrift { 
    0%{ transform: translate(-50%, -50%) scale(var(--s,1)) translateX(-30px);} 
    25%{ transform: translate(-50%, -50%) scale(var(--s,1)) translateX(40px);} 
    50%{ transform: translate(-50%, -50%) scale(var(--s,1)) translateX(-20px);} 
    75%{ transform: translate(-50%, -50%) scale(var(--s,1)) translateX(50px);} 
    100%{ transform: translate(-50%, -50%) scale(var(--s,1)) translateX(-30px);} 
}
@keyframes cloudFade { 0%,100% {opacity: 0.25;} 50% {opacity: 0.9;} }

/* New dynamic cloud animations */
@keyframes cloudCircular {
    0% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) 
                  translateX(calc(var(--circular-radius, 20px) * var(--circular-direction, 1))) 
                  translateY(0px); 
    }
    25% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) 
                  translateX(0px) 
                  translateY(calc(var(--circular-radius, 20px) * var(--circular-direction, 1))); 
    }
    50% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) 
                  translateX(calc(var(--circular-radius, 20px) * var(--circular-direction, 1) * -1)) 
                  translateY(0px); 
    }
    75% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) 
                  translateX(0px) 
                  translateY(calc(var(--circular-radius, 20px) * var(--circular-direction, 1) * -1)); 
    }
    100% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) 
                  translateX(calc(var(--circular-radius, 20px) * var(--circular-direction, 1))) 
                  translateY(0px); 
    }
}

@keyframes cloudPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(calc(var(--s,1) * 0.5)); 
        opacity: 0.3;
    }
    25% { 
        transform: translate(-50%, -50%) scale(calc(var(--s,1) * 1.4)); 
        opacity: 0.8;
    }
    50% { 
        transform: translate(-50%, -50%) scale(calc(var(--s,1) * 0.7)); 
        opacity: 0.5;
    }
    75% { 
        transform: translate(-50%, -50%) scale(calc(var(--s,1) * 1.6)); 
        opacity: 0.9;
    }
}

@keyframes cloudVerticalFloat {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) translateY(0px); 
    }
    25% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) translateY(-20px); 
    }
    50% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) translateY(15px); 
    }
    75% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) translateY(-10px); 
    }
}

@keyframes cloudWobble {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) rotate(0deg); 
    }
    25% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) rotate(var(--max-rotation, 20deg)); 
    }
    50% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) rotate(calc(var(--max-rotation, 20deg) * -0.7)); 
    }
    75% { 
        transform: translate(-50%, -50%) scale(var(--s,1)) rotate(calc(var(--max-rotation, 20deg) * 0.5)); 
    }
}

/* Enhanced sparkles with brand colors */
.header-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.enhanced-sparkle { 
    position: absolute; 
    animation: twinkle 5.2s ease-in-out infinite; 
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.6)); 
    will-change: filter, opacity, transform; 
}
.enhanced-sparkle::before, .enhanced-sparkle::after { 
    content:""; 
    position:absolute; 
    left:50%; 
    top:50%; 
    transform: translate(-50%, -50%); 
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); 
    width: 140%; 
    height: 1px; 
    filter: blur(0.2px);
} 
.enhanced-sparkle::after{ transform: translate(-50%, -50%) rotate(90deg); }
@keyframes twinkle { 
    0%,100%{opacity:0.6; transform: translateY(0) scale(1);} 
    10%{opacity:1; transform: translateY(-1px) scale(1.1);} 
    50%{opacity:.85; transform: translateY(-2px) scale(1.2);} 
    70%{opacity:1; transform: translateY(0) scale(.98);} 
}

/* Shooting stars */
.header-shooters { position: absolute; inset: 0; pointer-events: none; }
.shooting-star { 
    position:absolute; 
    width: 160px; 
    height: 2px; 
    pointer-events:none; 
    animation: shootFade var(--dur, 1800ms) linear forwards; 
}
.shoot-core { 
    position:absolute; 
    left:0; 
    top:-2px; 
    width:6px; 
    height:6px; 
    border-radius:50%; 
    background:#fff; 
    box-shadow: 0 0 12px rgba(139, 177, 252, 0.95), 0 0 26px rgba(90, 111, 239, 0.65); /* Default: blue glow */
    animation: shootMove var(--dur, 1800ms) linear forwards; 
    transition: box-shadow 0.5s ease;
}
.shoot-tail { 
    position:absolute; 
    left:-150px; 
    top:-1px; 
    right:10px; 
    height:2px; 
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(139, 177, 252, 0.9) 70%, rgba(139, 177, 252, 0.35)); /* Default: blue tail */
    filter: drop-shadow(0 0 6px rgba(139, 177, 252, 0.8)); 
    animation: shootMove var(--dur, 1800ms) linear forwards; 
    transition: background 0.5s ease, filter 0.5s ease;
}

/* Dark theme shooting stars */
.dark-theme .shoot-core { 
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 26px rgba(151, 198, 255, 0.65); /* White with blue glow */
}
.dark-theme .shoot-tail { 
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.9) 70%, rgba(255,255,255,0.4)); /* White tail */
    filter: drop-shadow(0 0 6px rgba(163, 210, 255, 0.8)); 
}
@keyframes shootMove { 0%{ transform: translateX(0) translateY(0);} 100%{ transform: translateX(-440px) translateY(140px);} }
@keyframes shootFade { 0%{opacity:0;} 10%{opacity:1;} 100%{opacity:0;} }

/* Enhanced fog/mist effects */
.header-fog { 
    position:absolute; 
    inset:0; 
    bottom:0; 
    height:28%; 
    mix-blend-mode: screen; 
}
.header-mist { 
    position:absolute; 
    inset:0; 
    opacity:.55; 
    background:
        radial-gradient(220px 90px at 15% 80%, rgba(139, 177, 252, 0.25), transparent 70%),
        radial-gradient(260px 110px at 55% 90%, rgba(198, 121, 233, 0.22), transparent 70%),
        radial-gradient(300px 100px at 85% 85%, rgba(225, 89, 197, 0.2), transparent 70%);
    filter: blur(14px); 
    animation: mistShift 22s ease-in-out infinite; 
    transition: background 0.5s ease;
}
.header-mist.m2 { 
    opacity:.35; 
    filter: blur(18px); 
    animation-duration: 32s; 
    animation-direction: alternate-reverse; 
}
.header-mist.mounting { animation-play-state: paused; }
.header-mist.exiting { opacity: 0 !important; }

/* Dark theme fog/mist */
.dark-theme .header-mist { 
    background:
        radial-gradient(220px 90px at 15% 80%, rgba(255, 255, 255, 0.25), transparent 70%),
        radial-gradient(260px 110px at 55% 90%, rgba(203, 219, 255, 0.25), transparent 70%),
        radial-gradient(300px 100px at 85% 85%, rgba(255, 255, 255, 0.2), transparent 70%);
}
@keyframes mistShift { 
    0%{ transform: translateX(-12px) translateY(0);} 
    50%{ transform: translateX(16px) translateY(-4px);} 
    100%{ transform: translateX(-18px) translateY(2px);} 
}

/* Content with enhanced glass effect */
.header-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

.header-content.glass {
    display: inline-block;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Theme variants removed - using fixed dynamic theme in main header rule */

/* Theme toggle button - hidden by default, shown only when user presses "T" key */
.theme-toggle {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    user-select: none;
    /* Hidden by default - only shown when user presses 'T' key */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Hover effect for immediate discovery */
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Theme toggle visible state */
.theme-toggle.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.theme-toggle.visible:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-toggle.visible:active {
    transform: translateY(0);
}

.theme-toggle .icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.dark-theme .theme-toggle .icon {
    transform: rotate(180deg);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .enhanced-cloud-group, .enhanced-sparkle, .shooting-star, .header-mist, .header-starfield i,
    .sparkle, .cloud { 
        animation: none !important; 
        transition: none !important; 
    }
}

/* Placeholder content styling for disabled detailed views */

.view-toggle-main-buttons .view-toggle-main-button:last-child {
    border-right: none;
}

/* Back button - spans full width of its container */
.view-toggle-back-container .view-toggle-back-button {
    flex: 1;
    width: 100%;
    padding: 16px 20px;
    background: rgba(80, 80, 80, 0.8);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Button hover and active states */
.view-toggle-main-buttons .view-toggle-main-button:hover,
.view-toggle-back-container .view-toggle-back-button:hover {
    background: rgba(100, 100, 100, 0.9);
    color: white;
}

.view-toggle-main-buttons .view-toggle-main-button.active {
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.8) 0%, 
        rgba(118, 75, 162, 0.8) 50%, 
        rgba(255, 154, 158, 0.7) 100%);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Remove old separate back button styles - now part of row */

/* Clean video styling - no overlays needed */
.video-container {
    position: relative;
}

.video-stack {
    border-radius: 16px;
}

.video-stack video {
    border-radius: inherit;
}

/* Layout consistency */
.detailed-layout {
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Responsive design for view toggle layout */
@media (max-width: 1400px) {
    .view-toggle-layout {
        grid-template-columns: 1fr 320px;
        gap: 25px;
        margin: 20px 25px 10px 25px;
    }
}

@media (max-width: 1200px) {
    .view-toggle-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 20px 30px 10px 30px;
    }
}

@media (max-width: 768px) {
    .view-toggle-layout {
        margin: 15px 20px 10px 20px;
        gap: 15px;
    }
    
    .view-toggle-main-buttons {
        flex-direction: column;
        gap: 1px;
    }
    
    .view-toggle-main-buttons .view-toggle-main-button {
        padding: 14px 20px;
        font-size: 13px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .view-toggle-main-buttons .view-toggle-main-button:last-child {
        border-bottom: none;
    }
    
    .view-toggle-back-container .view-toggle-back-button {
        padding: 14px 20px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .view-toggle-layout {
        margin: 10px 15px 5px 15px;
    }
    
    .view-toggle-main-buttons .view-toggle-main-button,
    .view-toggle-back-container .view-toggle-back-button {
        padding: 12px 16px;
        font-size: 12px;
    }
}

/* Loading indicators for lazy video loading */
.video-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 20;
    color: #ffffff;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(139, 177, 252, 0.2);
    border-top: 4px solid var(--light-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--light-blue);
    text-align: center;
}

/* Video Error Banner with Retry */
.video-error-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 20;
    background: rgba(20, 20, 30, 0.95);
    border: 2px solid rgba(225, 89, 197, 0.3);
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    text-align: center;
}

.video-error-banner .banner-icon {
    font-size: 3rem;
}

.video-error-banner .banner-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.video-error-banner .banner-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pinkish);
}

.video-error-banner .banner-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.video-error-banner .retry-button {
    margin-top: 10px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-error-banner .retry-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 177, 252, 0.4);
}

.video-error-banner .retry-button:active {
    transform: translateY(0);
}

/* CHAMPIONSHIP OVERVIEW STYLES */

/* Championship Header Styling */
.championship-header {
    background: linear-gradient(135deg, var(--blue), var(--purple), var(--pinkish));
    padding: 20px 40px;
}

.championship-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

/* Play Overlay */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 12;
    border-radius: 12px;
}

.play-button {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    transition: all 0.3s ease;
}

.play-button:hover {
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

.play-button svg {
    margin-left: 4px; /* Adjust for visual centering */
}

/* Performance Info Section */

.gymnast-info {
    display: flex;
    gap: 15px;
    align-items: center;
    flex: 1;
}

/* Performance Actions */

.action-button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 140px;
}

.action-button.primary {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #ffffff;
}

.action-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(90, 111, 239, 0.3);
}

.action-button.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.action-button.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

/* Preview Button Styling */
.preview-button {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid var(--purple);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--purple);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-button:hover {
    background: rgba(198, 121, 233, 0.2);
    border-color: var(--pinkish);
    color: #ffffff;
    transform: scale(1.1);
}

/* Secondary Button Styling */
.view-toggle-button.secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.view-toggle-button.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Championship Layout Adjustments */
.championship-layout {
    padding: 30px;
}

.championship-section {
    flex: 1;
}

.championship-list {
    gap: 25px;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .main-layout {
        grid-template-columns: 1fr 320px;
        gap: 25px;
        padding: 25px;
    }
    
    .main-header {
        padding: 20px 30px;
        gap: 25px;
    }
}

@media (max-width: 1200px) {
    .main-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .analysis-panel {
        position: static;
        max-height: none;
    }
    
    .main-header {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    
    .gymnast-info-column {
        order: 2;
    }
    
    .object-info-row {
        order: 3;
    }
    
    .championship-info-column {
        order: 4;
        align-items: center;
        text-align: center;
    }
    
    /* Detailed view responsive - stack video and text vertically */
    .action-detail-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .detailed-layout {
        padding: 20px;
        gap: 20px;
    }
    
    .section-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .metadata-grid {
        grid-template-columns: 1fr;
    }
    
    /* Championship responsive - medium screens */
    .championship-header {
        padding: 15px 25px;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .gymnast-photo-container {
        margin-right: 0;
    }
    
    .object-info-row {
        margin-right: 0;
    }
    
    .gymnast-details {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .main-layout {
        padding: 20px;
        gap: 20px;
    }
    
    .toggle-row {
        flex-direction: column;
    }
    
    .analysis-toggle {
        justify-content: center;
    }
    
    .timeline-container {
        height: 60px;
    }
    
    .timeline-segment {
        height: 35px;
        font-size: 0.7rem;
    }
    
    .gymnast-name {
        font-size: 1.8rem;
    }
    
    .championship-name {
        font-size: 1.6rem;
    }
    
    .gymnast-level {
        font-size: 1.2rem;
    }
    
    .object-name {
        font-size: 1.3rem;
    }
    
    .sberai-logo {
        max-width: 100px;
        max-height: 50px;
    }
    
    /* Detailed view mobile responsive */
    .detailed-layout {
        padding: 15px;
        gap: 15px;
    }
    
    .section-header h2 {
        font-size: 1.6rem;
    }
    
    .action-detail-row {
        padding: 15px;
        gap: 15px;
    }
    
    .action-name {
        font-size: 1.2rem;
    }
    
    .action-group {
        font-size: 0.9rem;
        padding: 3px 8px;
    }
    
    .action-valuable-indicator {
        font-size: 0.75rem;
    }
    
    .action-group-row {
        gap: 8px;
    }
    
    .metadata-key {
        min-width: 90px;
        font-size: 0.85rem;
    }
    
    .metadata-value {
        font-size: 0.85rem;
    }
    
    .view-toggle-button {
        font-size: 0.9rem;
        padding: 10px 16px;
    }
    
    .comment-item, .reduction-item {
        padding: 8px 10px;
    }
    
    .logo-hint {
        font-size: 0.7rem;
    }
    
    /* Championship mobile responsive */
    
    .championship-subtitle {
        font-size: 1rem;
    }
    
    .action-button {
        min-width: 120px;
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    .play-button {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 480px) {
    .photo-illumination {
        width: 110px;
        height: 110px;
    }
    
    .photo-gradient-hoop {
        width: 80px;
        height: 80px;
    }
    
    .gymnast-photo {
        width: 70px;
        height: 70px;
    }
    
    .gymnast-name {
        font-size: 1.5rem;
    }
    
    .championship-name {
        font-size: 1.3rem;
    }
    
    .gymnast-level {
        font-size: 1rem;
    }
    
    .object-name {
        font-size: 1.1rem;
    }
    
    .total-score {
        font-size: 1.6rem;
    }
    
    .sub-score-value {
        font-size: 1.1rem;
    }
    
    .sberai-logo {
        max-width: 80px;
        max-height: 40px;
    }
    
    .logo-container {
        padding-top: 15px;
    }
}

/* ================================
   CHAMPIONSHIPS OVERVIEW STYLES
   ================================ */

/* Championships Overview Container */
.championships-overview {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lang-btn {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.lang-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.lang-btn.active {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    border-color: var(--blue);
    color: white;
}

/* Legacy championships header rule removed - now using enhanced header system */

/* Language switcher positioning for championships overview */
.championships-main-header .language-switcher {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important; /* Increased z-index for dropdown visibility */
}

/* Ensure language switcher dropdown is always visible on all pages */
.performance-view .language-switcher,
.detailed-view .language-switcher {
    z-index: 99999 !important;
}

.performance-view .language-dropdown,
.detailed-view .language-dropdown {
    z-index: 100000 !important;
}

/* Ensure main header doesn't create stacking context issues */
.performance-view .main-header,
.detailed-view .main-header {
    position: relative;
    z-index: 1;
}

/* Ensure video containers and analysis panels don't block dropdown */
.performance-view .video-section,
.performance-view .analysis-panel,
.detailed-view .action-details-section {
    position: relative;
    z-index: 1;
}

.header-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: inherit;
}

/* Legacy sparkle and cloud CSS removed - now using enhanced header system */

/* Legacy header-content styles - enhanced system provides better styling */

.main-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
}

/* Championship subtitle styling in header-content */
.header-content .championship-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin: -20px 0 0 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Chief judge info styling */
.header-content .chief-judge-info {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    margin: 8px 0 0 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.header-content .chief-judge-label {
    margin-right: 8px;
    font-weight: 400;
}

/* Championship info row styling for horizontal layout */
.championship-info-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 20px;
    gap: 120px;
    flex-wrap: nowrap;
    min-height: 120px;
}

/* Updated styles for elements in the championship info row */
.championship-info-row .championship-dates,
.championship-info-row .chief-judge-info,
.championship-info-row .championship-subtitle {
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    margin: 0;
    flex: 0 1 auto;
    min-width: 200px;
}

/* Dates, Chief Judge, and Subtitle sections use column layout for label above value */
.championship-info-row .championship-dates,
.championship-info-row .chief-judge-info,
.championship-info-row .championship-subtitle {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Specific adjustments for dates section */
.championship-info-row .championship-dates .dates-label {
    margin-right: 0;
    font-weight: 500;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
}

.championship-info-row .championship-dates .start-date,
.championship-info-row .championship-dates .end-date {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    /* Allow dates to expand naturally */
}

/* Custom dates container to limit to 3 rows max */
.championship-info-row .championship-dates {
    max-height: 150px;
    overflow: hidden;
}

/* Specific adjustments for chief judge section */
.championship-info-row .chief-judge-info .chief-judge-label {
    margin-right: 0;
    font-weight: 500;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
}

.championship-info-row .chief-judge-info .chief-judge-first-name,
.championship-info-row .chief-judge-info .chief-judge-last-name {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    /* Removed ellipsis constraints - let names take as much space as needed */
}

/* Specific adjustments for subtitle section */
.championship-info-row .championship-subtitle .age-group-label {
    font-weight: 500;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
}

.championship-info-row .championship-subtitle .category-name {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    /* Allow category names to expand as needed */
}

/* Language Selector */

.lang-btn {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.lang-btn.active {
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
    border-color: rgba(255, 255, 255, 0.9);
}

/* Main Content */
.championships-main {
    flex: 1;
    padding: 60px 60px;
    background: transparent;
    position: relative;
}

/* Loading State */
.loading-state {
    text-align: center;
    padding: 80px 20px;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #e3e3e3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 30px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-state p {
    font-size: 1.2rem;
    color: #666;
    margin: 0;
}

/* Error State */
.error-state {
    text-align: center;
    padding: 80px 20px;
}

.error-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.error-state h3 {
    color: #e74c3c;
    margin: 0 0 15px 0;
    font-size: 1.5rem;
}

.error-state p {
    color: #666;
    margin: 0 0 30px 0;
    font-size: 1.1rem;
}

.retry-btn {
    padding: 12px 30px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-btn:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
}

/* Championships Grid */
.championships-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Championship Card */
.championship-card {
    position: relative;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    background-clip: padding-box; /* Prevent background bleeding through border */
}

.championship-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 25px 60px rgba(90, 111, 239, 0.35),
        0 35px 100px rgba(139, 177, 252, 0.25),
        0 45px 140px rgba(198, 121, 233, 0.2),
        0 55px 180px rgba(225, 89, 197, 0.15);
}

/* Championship card header styling */
.card-header {
    position: relative;
    padding: 20px;
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
    z-index: 3; /* Above photo overlay (z-index: 1) */
    background: rgba(39, 39, 39, 0.8);
    backdrop-filter: blur(10px);
    background-clip: padding-box; /* Prevent background bleeding */
}

/* Active championship - rainbow background like header */
.championship-card.status-active {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.9) 0%, 
        rgba(118, 75, 162, 0.9) 50%, 
        rgba(255, 154, 158, 0.8) 100%);
    background-clip: padding-box; /* Prevent gradient bleeding through border */
    box-shadow: 
        0 10px 30px rgba(102, 126, 234, 0.3),
        0 20px 40px rgba(118, 75, 162, 0.2),
        0 30px 60px rgba(255, 154, 158, 0.1);
}

.championship-card.status-active .card-header {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    background-clip: padding-box; /* Prevent header background bleeding */
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.championship-card.status-active:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 40px rgba(102, 126, 234, 0.4),
        0 25px 60px rgba(118, 75, 162, 0.35),
        0 35px 100px rgba(255, 154, 158, 0.25),
        0 45px 140px rgba(139, 177, 252, 0.2);
}

/* Inactive championship - gray and unclickable */
.championship-card.status-inactive {
    border: 2px solid rgba(158, 158, 158, 0.3);
    background: rgba(120, 120, 120, 0.1);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: 
        0 5px 15px rgba(158, 158, 158, 0.2);
}

.championship-card.status-inactive .card-header {
    background: linear-gradient(135deg, rgba(158, 158, 158, 0.8), rgba(189, 189, 189, 0.6));
    color: rgba(255, 255, 255, 0.8);
}

.championship-card.status-inactive:hover {
    transform: none;
    box-shadow: 
        0 5px 15px rgba(158, 158, 158, 0.2);
}

.championship-name {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Location info row */
.card-location {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    background: rgba(64, 64, 64, 0.8);
}

.flag-icon {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    background: var(--darker-gray);
}

.location-name {
    font-size: 1rem;
    font-weight: 500;
    color: #cccccc;
}

/* Photo section */
.card-photo {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    padding: 16px;
    background: rgba(64, 64, 64, 0.8);
}

.card-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.championship-card:hover .card-bg-image {
    transform: scale(1.0);
}

.card-photo-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    border-radius: 12px;
    z-index: 1; /* Ensure proper layering */
}

/* Footer - Simple style matching championship.html */
.championships-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    text-align: center;
    background: none;
}

.championships-footer .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.championships-footer .sberai-logo {
    height: 32px;
    opacity: 0.8;
}

/* Medium screens - reduce gaps but keep horizontal layout */
@media (max-width: 1200px) {
    .championship-info-row {
        gap: 60px;
    }
    
    .championship-info-row .championship-dates,
    .championship-info-row .chief-judge-info,
    .championship-info-row .championship-subtitle {
        min-width: 150px;
        font-size: 1.6rem;
    }
}

/* Large screens - more generous spacing */
@media (min-width: 1400px) {
    .championship-info-row {
        gap: 180px;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-title {
        font-size: 2.5rem;
    }
    
    /* Championship info row responsive design */
    .championship-info-row {
        flex-direction: column;
        gap: 20px;
        margin-top: 15px;
        flex-wrap: wrap;
    }
    
    .championship-info-row .championship-dates,
    .championship-info-row .chief-judge-info,
    .championship-info-row .championship-subtitle {
        font-size: 1.3rem;
        text-align: center;
    }
    
    /* Mobile adjustments for labels in dates, chief judge, and subtitle sections */
    .championship-info-row .championship-dates .dates-label,
    .championship-info-row .chief-judge-info .chief-judge-label,
    .championship-info-row .championship-subtitle .age-group-label {
        font-size: 1.1rem;
    }
    
    /* Mobile adjustments for chief judge name elements */
    .championship-info-row .chief-judge-info .chief-judge-first-name,
    .championship-info-row .chief-judge-info .chief-judge-last-name {
        font-size: 1.2rem;
    }
    
    .championships-main-header {
        margin: 20px 0 0 0; /* Full width on mobile too */
        height: 240px; /* Slightly shorter on mobile */
        border-radius: 20px;
    }
    
    .championships-main-header .language-switcher {
        top: 15px !important;
        right: 15px !important;
    }
    
    .championships-main {
        padding: 40px 20px;
    }
    
    .championships-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .championship-card {
        height: 350px;
    }
    
    .championship-name {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .championships-main-header {
        height: 200px; /* Compact on small mobile */
        margin: 15px 0 0 0; /* Full width on small mobile too */
        border-radius: 16px;
    }
    
    .championships-main-header .language-switcher {
        top: 12px !important;
        right: 12px !important;
    }
    
    .main-title {
        font-size: 1.8rem;
    }
    
    .championships-main {
        padding: 30px 15px;
    }
    
    .championships-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .championship-card {
        height: 320px;
    }
    
    .card-header {
        padding: 15px;
    }
    
    .championship-name {
        font-size: 1.2rem;
    }
    
    .card-location {
        padding: 12px 15px;
    }
    
    .location-name {
        font-size: 0.9rem;
    }
    
    .card-photo {
        padding: 12px;
    }
    
    .card-photo-overlay {
        top: 12px;
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
}

/* Championship Performance Cards - New Layout */
.championship-performance-card {
    display: flex;
    gap: 24px;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 320px; /* Adjusted height for 45% video width */
}

/* Card background with comment gradient style */
.championship-performance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--blue), var(--pinkish), var(--orange));
    border-radius: 16px;
    z-index: 1;
}

.championship-performance-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* Removed gradient spill */
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg, 
        var(--lighter-gray) 0%,
        var(--lighter-gray) 50%,
        rgba(38, 38, 38, 0.95) 60%,
        rgba(38, 38, 38, 0.85) 75%,
        rgba(38, 38, 38, 0.7) 90%,
        rgba(38, 38, 38, 0.4) 100% /* More muted end */
    );
    border-radius: 16px;
    z-index: 2;
}

.championship-performance-card:hover::after {
    background: linear-gradient(
        45deg, 
        rgba(38, 38, 38, 0.98) 0%,
        rgba(38, 38, 38, 0.98) 50%,
        rgba(38, 38, 38, 0.9) 60%,
        rgba(38, 38, 38, 0.8) 75%,
        rgba(38, 38, 38, 0.6) 90%,
        rgba(38, 38, 38, 0.3) 100% /* More muted hover end */
    );
}

.championship-performance-card:hover {
    transform: translateY(-12px); /* Even more pronounced spring effect */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 25px 60px rgba(90, 111, 239, 0.35),
        0 35px 100px rgba(139, 177, 252, 0.25),
        0 45px 140px rgba(198, 121, 233, 0.2),
        0 55px 180px rgba(225, 89, 197, 0.15); /* Multi-layered glow like championship cards */
}

/* First Element: Video Section */
.card-video-section {
    position: relative;
    z-index: 3;
    flex: 0 0 50%; /* Video takes 45% of width for better balance */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-video-container {
    position: relative;
    width: 100%;
    height: 100%; /* Use full available height instead of fixed height */
    min-height: 300px; /* Minimum height for proper display */
    border-radius: 12px;
    overflow: hidden;
    background: var(--darker-gray);
}

.card-video-container .video-stack {
    width: 100%;
    height: 100%;
}

.card-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This should fill the container without black borders */
    object-position: center; /* Center the video content */
}

.card-video-container .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.card-video-container:hover .play-overlay {
    opacity: 1;
}

.card-video-container .play-button {
    color: white;
    font-size: 48px;
    transition: transform 0.2s ease;
}

.card-video-container .play-button:hover {
    transform: scale(1.1);
}

/* Video Not Available Banner */
.video-not-available-banner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    gap: 15px;
}

.video-not-available-banner .banner-icon {
    font-size: 48px;
    opacity: 0.5;
    filter: grayscale(100%);
}

.video-not-available-banner .banner-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-not-available-banner .banner-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.video-not-available-banner .banner-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* Responsive styles for banner */
@media (max-width: 768px) {
    .video-not-available-banner {
        padding: 20px;
        gap: 10px;
    }
    
    .video-not-available-banner .banner-icon {
        font-size: 40px;
    }
    
    .video-not-available-banner .banner-title {
        font-size: 16px;
    }
    
    .video-not-available-banner .banner-description {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .video-not-available-banner {
        padding: 15px;
        gap: 8px;
    }
    
    .video-not-available-banner .banner-icon {
        font-size: 32px;
    }
    
    .video-not-available-banner .banner-title {
        font-size: 14px;
    }
    
    .video-not-available-banner .banner-description {
        font-size: 12px;
    }
}

/* Performance page specific banner styling */
.video-container .video-not-available-banner.performance-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    margin: 0;
    /* Override the semi-transparent background with a more visible one */
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Ensure video-container maintains its aspect ratio even with banner */
.video-container:has(.video-not-available-banner.performance-banner) {
    aspect-ratio: 16/9;
}

@media (max-width: 768px) {
    .video-container .video-not-available-banner.performance-banner {
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .video-container .video-not-available-banner.performance-banner {
        border-radius: 8px;
    }
}

/* Detailed pages specific banner styling */
.action-video-container .video-not-available-banner.detailed-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    margin: 0;
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Stills/highlights not available placeholder */
.stills-not-available-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    text-align: center;
    gap: 12px;
}

.stills-not-available-placeholder .placeholder-icon {
    font-size: 36px;
    opacity: 0.4;
    filter: grayscale(100%);
}

.stills-not-available-placeholder .placeholder-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .stills-not-available-placeholder {
        min-height: 120px;
        padding: 20px;
    }
    
    .stills-not-available-placeholder .placeholder-icon {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .stills-not-available-placeholder {
        min-height: 100px;
        padding: 15px;
        gap: 8px;
    }
    
    .stills-not-available-placeholder .placeholder-icon {
        font-size: 24px;
    }
    
    .stills-not-available-placeholder .placeholder-text {
        font-size: 13px;
    }
}

/* Second Element: Info Section */
.card-info-section {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 12px 24px 0 20px; /* Added top padding and right padding to prevent overflow */
}

/* Element 1: Top row with gymnast details + placement */
.top-info-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px; /* Space before score breakdown */
}

/* Sub-element 1.1: Gymnast details column */
.gymnast-details-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased vertical space between photo+name and country+academy rows */
    flex: 1; /* Take remaining space */
}

.gymnast-photo-container {
    flex: 0 0 112px; /* Increased by 50% on top of previous 25% (from 75px to 112px) */
    position: relative;
}

.gymnast-photo-container::before {
    content: '';
    position: absolute;
    top: -30px; /* Increased glow area */
    left: -30px;
    right: -30px;
    bottom: -30px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(240, 240, 240, 0.4) 25%, rgba(220, 220, 220, 0.2) 50%, transparent 80%);
    border-radius: 50%;
    z-index: 1;
    filter: blur(12px); /* Increased blur for more pronounced glow */
}

.gymnast-photo-container img,
.gymnast-photo-container .lazy-photo {
    width: 112px; /* Increased by 50% on top of previous 25% (from 75px to 112px) */
    height: 112px; /* Increased by 50% on top of previous 25% (from 75px to 112px) */
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3); /* Slightly thicker border */
    position: relative;
    z-index: 2;
}

/* Row 1.1.1: Photo + Name + Item (horizontal) */
.photo-name-item-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Row 1.1.2: Flag + Country + Academy Logo + Academy Name (horizontal) */
.flag-country-academy-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 10px;
    margin-top: 10px;
}

/* Starting number column styling - styled like score columns */
.starting-number-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    min-width: 32px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    border-bottom: 2px solid rgba(90, 111, 239, 0.8);
}

.starting-number-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    min-width: 24px;
    text-align: center;
}

.gymnast-name {
    font-size: 2.6rem; /* Increased by 50% on top of previous 25% (from 1.75rem to 2.6rem) */
    font-weight: 600;
    color: white;
    margin: 0;
    line-height: 1.2; /* Tighter line height for larger text */
}

.object-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.object-icon .apparatus-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.flag-icon {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

.academy-icon,
.lazy-academy-logo {
    width: 24px;
    height: 18px;
    object-fit: contain;
}

.country-name, .academy-name {
    color: #cccccc;
    font-size: 1.19rem; /* 30% smaller than 1.7rem */
    font-weight: 400;
    line-height: 1.3;
}

/* Performance Description Row in Championship Cards */
.championship-performance-card .description-row {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
}

.championship-performance-card .performance-description {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.4;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-left: 8px;
}

/* Score Breakdown Section - New dedicated area */
.score-breakdown-section {
    flex: 1; /* Take remaining vertical space */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pin DB row closer to bottom */
    padding-right: 4px; /* Prevent overflow on right edge */
}

.score-breakdown-row {
    display: flex;
    gap: 6px; /* More compact for tighter packing */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 12px; /* More vertical padding, less horizontal */
}

.score-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px; /* Slightly more gap for better readability */
    padding: 8px 2px; /* Very compact horizontal padding */
}

.score-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.score-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

/* Disabled score styling */
.score-column.score-disabled {
    opacity: 0.4;
    position: relative;
}

.score-column.score-disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    pointer-events: none;
}

.score-column.score-disabled .score-label,
.score-column.score-disabled .score-value {
    color: #666;
}

/* Placement Section (now inline in top row) */
.card-score-section {
    position: relative;
    z-index: 3;
    flex: 0 0 140px; /* Slightly smaller for inline placement */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Reduced gap for more compact */
    padding: 16px; /* Reduced padding */
    margin-right: 8px; /* Prevent overflow on right edge */
    background: linear-gradient(135deg, rgba(225, 89, 197, 0.3), rgba(225, 89, 197, 0.15)); /* Much more muted pink */
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(225, 89, 197, 0.1); /* Reduced shadow opacity */
}

.total-score {
    font-size: 1.8rem; /* Reduced for compact inline display */
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.placement-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px; /* Reduced gap for more compact */
}

.placement-number {
    font-size: 1.4rem; /* Reduced for compact inline display */
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.podium-visualization {
    position: relative;
    width: 50px; /* Slightly smaller for compact display */
    height: 32px; /* Proportionally smaller height */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.podium-step {
    width: 100%;
    border-radius: 4px 4px 0 0;
    position: relative;
    background: linear-gradient(180deg, #666, #333);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.podium-step.podium-first {
    height: 32px; /* Proportionally smaller */
    background: linear-gradient(180deg, #FFD700, #FFA500);
}

.podium-step.podium-second {
    height: 26px; /* Proportionally smaller */
    background: linear-gradient(180deg, #C0C0C0, #A0A0A0);
}

.podium-step.podium-third {
    height: 20px; /* Proportionally smaller */
    background: linear-gradient(180deg, #CD7F32, #8B4513);
}

.podium-step.podium-other {
    height: 14px; /* Proportionally smaller */
    background: linear-gradient(180deg, #666, #333);
}

/* Loading States for Championship Cards */
.card-loading {
    opacity: 0.95;
}

.video-loading-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        rgba(38, 38, 38, 0.8) 0%,
        rgba(50, 50, 50, 0.8) 50%,
        rgba(38, 38, 38, 0.8) 100%
    );
    background-size: 200% 200%;
    animation: shimmer 2s ease-in-out infinite;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.loading-text {
    color: rgba(255, 255, 255, 0.4) !important;
    position: relative;
    overflow: hidden;
}

.loading-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: loading-sweep 1.5s ease-in-out infinite;
}

@keyframes loading-sweep {
    to { left: 100%; }
}

.loading-score {
    color: rgba(255, 255, 255, 0.3) !important;
    position: relative;
}

.loading-score::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    min-height: 3em;
    border-radius: 8px;
}

.loading-skeleton .loading-placeholder {
    opacity: 0.5;
    font-style: italic;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Smooth transitions when loading completes */
.country-name,
.academy-name,
.score-value,
.total-score {
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .championship-performance-card {
        flex-direction: column;
        gap: 16px;
        min-height: 400px; /* Adjusted for 45% video width */
    }
    
    .card-video-section {
        flex: none;
    }
    
    .card-info-section {
        padding: 10px 20px 0 16px; /* Adjusted tablet padding */
    }
    
    .card-video-container {
        height: 260px; /* Adjusted for 45% width video */
        min-height: 260px; /* Ensure minimum height on tablets */
    }
    
    .top-info-row {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }
    
    .gymnast-details-column {
        flex: none;
        gap: 18px; /* Slightly reduced but still generous spacing for tablets */
    }
    
    .flag-country-academy-row {
        justify-content: flex-start;
    }
    
    .card-score-section {
        flex: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        max-width: 300px;
        align-self: center;
    }
    
    .placement-info {
        flex-direction: row;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .championship-performance-card {
        padding: 16px;
        margin-bottom: 16px;
        min-height: 360px; /* Adjusted for new layout and 45% video */
    }
    
    .card-info-section {
        padding: 8px 16px 0 12px; /* Adjusted mobile padding */
    }
    
    .card-video-container {
        height: 230px; /* Adjusted for mobile with 45% video */
        min-height: 230px; /* Ensure proper mobile height */
    }
    
    .gymnast-details-column {
        gap: 16px; /* Preserved mobile spacing */
        align-items: center;
        text-align: center;
    }
    
    .photo-name-item-row {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    
    .flag-country-academy-row {
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .card-score-section {
        padding: 10px 12px;
        max-width: 250px;
    }
    
    .score-breakdown-row {
        flex-wrap: wrap;
        gap: 4px;
        padding: 16px 8px; /* Adjusted padding for mobile */
    }
    
    .score-column {
        flex: 1 1 calc(50% - 2px);
        min-width: 65px; /* More compact for mobile */
    }
    
    .gymnast-name {
        font-size: 2.2rem; /* Proportionally scaled for mobile from 2.6rem */
        line-height: 1.2;
    }
    
    .gymnast-photo-container {
        flex: 0 0 95px; /* Scaled down from 112px for mobile but still much larger */
    }
    
    .gymnast-photo-container::before {
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        filter: blur(10px); /* Slightly less blur on mobile */
    }
    
    .gymnast-photo-container img,
    .gymnast-photo-container .lazy-photo {
        width: 95px;
        height: 95px;
    }
    
    .country-name, .academy-name {
        font-size: 0.98rem; /* 30% smaller than proportionally scaled 1.4rem */
        line-height: 1.3;
    }
    
    .total-score {
        font-size: 1.6rem; /* Slightly smaller for compact mobile layout */
    }
    
    .placement-number {
        font-size: 1.2rem; /* Slightly smaller for mobile */
    }
}

/* =============================================================================
   VIEW-SPECIFIC PHOTO STYLES
   ============================================================================= */

/* Performance View - Proper photo sizing for header */
.performance-view .gymnast-photo-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 40px;
}

.performance-view .photo-illumination {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    filter: blur(8px);
}

.performance-view .photo-gradient-hoop {
    position: absolute;
    width: 100px;
    height: 100px;
    background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #fd79a8, #e17055, #ff6b6b);
    border-radius: 50%;
    z-index: 2;
    filter: blur(2px);
}

.performance-view .photo-gradient-hoop::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--dark-gray);
    border-radius: 50%;
}

.performance-view .gymnast-photo {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 3;
    background: var(--darker-gray);
}

.performance-view .gymnast-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Detailed View - Same as performance view for consistency */
.detailed-view .gymnast-photo-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 40px;
}

.detailed-view .photo-illumination {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    filter: blur(8px);
}

.detailed-view .photo-gradient-hoop {
    position: absolute;
    width: 100px;
    height: 100px;
    background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #fd79a8, #e17055, #ff6b6b);
    border-radius: 50%;
    z-index: 2;
    filter: blur(2px);
}

.detailed-view .photo-gradient-hoop::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--dark-gray);
    border-radius: 50%;
}

.detailed-view .gymnast-photo {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 3;
    background: var(--darker-gray);
}

.detailed-view .gymnast-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Championship View - Keep existing custom sizing but make it specific */
.championship-view .gymnast-photo-container {
    flex: 0 0 112px !important; /* Larger size for championship view */
    position: relative;
}

.championship-view .gymnast-photo-container::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(240, 240, 240, 0.4) 25%, rgba(220, 220, 220, 0.2) 50%, transparent 80%);
    border-radius: 50%;
    z-index: 1;
    filter: blur(12px);
}

.championship-view .gymnast-photo-container img,
.championship-view .gymnast-photo-container .lazy-photo {
    width: 112px !important; /* Larger for championship view */
    height: 112px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}

/* Mobile responsiveness for view-specific styles */
@media (max-width: 768px) {
    .performance-view .photo-illumination,
    .detailed-view .photo-illumination {
        width: 100px;
        height: 100px;
    }
    
    .performance-view .photo-gradient-hoop,
    .detailed-view .photo-gradient-hoop {
        width: 80px;
        height: 80px;
    }
    
    .performance-view .gymnast-photo,
    .detailed-view .gymnast-photo {
        width: 70px;
        height: 70px;
    }
    
    .championship-view .gymnast-photo-container {
        flex: 0 0 95px !important;
    }
    
    .championship-view .gymnast-photo-container::before {
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        filter: blur(10px);
    }
    
    .championship-view .gymnast-photo-container img,
    .championship-view .gymnast-photo-container .lazy-photo {
        width: 95px !important;
        height: 95px !important;
    }
}

/* Scroll to Top Button */
.scroll-to-top-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple), var(--pinkish));
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    z-index: 1000;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.scroll-to-top-button.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top-button:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.4),
        0 16px 48px rgba(90, 111, 239, 0.3),
        0 20px 64px rgba(198, 121, 233, 0.2);
    background: linear-gradient(135deg, 
        rgba(90, 111, 239, 0.9), 
        rgba(198, 121, 233, 0.9), 
        rgba(225, 89, 197, 0.9));
}

.scroll-to-top-button:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.scroll-to-top-button svg {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.scroll-to-top-button:hover svg {
    transform: translateY(-2px);
}

/* Responsive adjustments for scroll-to-top button */
@media (max-width: 768px) {
    .scroll-to-top-button {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
    }
    
    .scroll-to-top-button svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .scroll-to-top-button {
        bottom: 15px;
        right: 15px;
        width: 44px;
        height: 44px;
    }
    
    .scroll-to-top-button svg {
        width: 18px;
        height: 18px;
    }
}

/* Special Collection Placeholders for A Actions (129, 130) */

.special-collection-placeholder .still-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    text-align: center;
    gap: 8px;
    height: 100%;
}

.x-icon {
    position: absolute;
    top: -2px;
    right: -8px;
    width: 10px;
    height: 10px;
    color: rgba(255, 255, 255, 0.4);
    filter: grayscale(100%);
}

.special-collection-placeholder .placeholder-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
    line-height: 1.2;
    text-align: center;
}