/*
 * Style integracji z modem VLCT Deathrun.
 *
 * Osobny arkusz, a nie dopisek do app.css, z prostego powodu: app.min.css powstaje
 * przez zewnetrzny bundler (Excubo.WebCompiler + dotnet-bundle sciagane z sieci przez
 * PreBuild.ps1), ktorego nie uruchamiamy. Wlasny plik dziala tak samo w Debug
 * i w wydaniu, kosztem jednego dodatkowego zapytania.
 *
 * Kolory pochodza ze zmiennych motywu IW4MAdmin, wiec komponenty same dostosowuja
 * sie do jasnego i ciemnego trybu oraz do koloru akcentu wybranego w konfiguracji.
 */

/* ------------------------------------------------------------------ */
/* Animowane paski klatek                                              */
/*                                                                     */
/* Animowane materialy CoD4 to jeden obraz z klatkami ulozonymi pionowo */
/* (velocity_logo_animated to 128x12800, czyli 100 klatek). Warstwa ma  */
/* wysokosc frames*100% kontenera, a przesuniecie o -100% w krokach     */
/* steps(frames) przewija ja klatka po klatce - dokladnie tak, jak robi */
/* to podglad w cod4-menu-builder. Zero JavaScriptu.                    */
/* ------------------------------------------------------------------ */

.vlct-sprite {
    position: relative;
    overflow: hidden;
    display: block;
}

/*
   Centrowanie TYLKO w szafce. Sprite jest kwadratowy (256x256), a kafelek szerszy,
   wiec bez tego przywiera do lewej; callingcard (256x64) wypelnial szerokosc i jako
   jedyny wygladal dobrze.

   UWAGA: reguly NIE wolno dawac na samo .vlct-sprite - emblemat na karcie gracza
   (/vlct/card) ma wlasne pozycjonowanie i globalne margin-inline: auto go rozjezdza.
   Sprawdzone 2026-08-17 na zywo.
*/
.vlct-locker .vlct-sprite {
    margin-inline: auto;
}

.vlct-sprite-layer {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* Piksele klatek maja byc ostre - to grafika z gry, nie fotografia. */
    image-rendering: auto;
}

.vlct-sprite-layer--vertical {
    width: 100%;
    height: calc(var(--vlct-frames) * 100%);
    animation: vlct-sprite-scroll-y var(--vlct-duration) steps(var(--vlct-frames)) infinite;
}

.vlct-sprite-layer--horizontal {
    height: 100%;
    width: calc(var(--vlct-frames) * 100%);
    animation: vlct-sprite-scroll-x var(--vlct-duration) steps(var(--vlct-frames)) infinite;
}

.vlct-sprite-layer--static {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
}

@keyframes vlct-sprite-scroll-y {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

@keyframes vlct-sprite-scroll-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Szanujemy ustawienie systemowe - migajace emblematy potrafia byc meczace. */
@media (prefers-reduced-motion: reduce) {
    .vlct-sprite-layer--vertical,
    .vlct-sprite-layer--horizontal {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Naglowek profilu                                                    */
/* ------------------------------------------------------------------ */

.vlct-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.vlct-identity__badge {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.vlct-identity__emblem {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.vlct-identity__rank {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

/* Callingcard to szeroki pasek (512x128), wiec dostaje wlasne proporcje. */
.vlct-identity__card {
    width: 12rem;
    height: 3rem;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.vlct-identity__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.vlct-identity__label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.vlct-identity__value {
    font-size: 0.875rem;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Podglad grafiki po kliknieciu                                       */
/* ------------------------------------------------------------------ */

.vlct-preview {
    /* Wymiary ustawia komponent, bo zaleza od rozmiaru pojedynczej klatki. */
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
}

.vlct-preview__sprite {
    width: 100%;
    height: 100%;
}

/* Tekstury z gry sa male i pikselowe - wygladzanie zamienia je w papke,
   wiec przy powiekszeniu zachowujemy ostre piksele. */
.vlct-preview__sprite .vlct-sprite-layer {
    image-rendering: pixelated;
}

/* Kafelek, ktory da sie kliknac - subtelna podpowiedz, ze cos sie stanie. */
.vlct-clickable {
    cursor: zoom-in;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    width: 100%;
}

.vlct-clickable:focus-visible {
    outline: 2px solid var(--color-primary, #6366f1);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Szafka z kosmetyka                                                  */
/* ------------------------------------------------------------------ */

.vlct-locker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.75rem;
}

.vlct-locker__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem;
    border-radius: 0.75rem;
    transition: border-color 0.2s, transform 0.2s;
}

.vlct-locker__item:hover {
    transform: translateY(-2px);
}

.vlct-locker__icon {
    width: 4rem;
    height: 4rem;
}

.vlct-locker__icon--wide {
    width: 100%;
    height: 2.25rem;
}

.vlct-locker__name {
    font-size: 0.6875rem;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

/* Pozycje niedostepne dla gracza - widoczne, ale wyraznie przygaszone,
   zeby bylo widac ile jeszcze zostalo do zdobycia. */
.vlct-locker__item--locked .vlct-locker__icon {
    filter: grayscale(1);
    opacity: 0.35;
}

.vlct-locker__item--locked .vlct-locker__name {
    opacity: 0.5;
}

/* Brak grafiki w zrodlach modu (menu_spray_35, menu_item_camo09) -
   pokazujemy szachownice zamiast pustego miejsca. */
.vlct-locker__placeholder {
    background:
        repeating-conic-gradient(rgba(120, 150, 190, 0.18) 0% 25%, rgba(120, 150, 190, 0.07) 0% 50%)
        0 0 / 12px 12px;
    border-radius: 0.375rem;
}

/* ============================================================================
   EDYTOR PROFILU (/vlct/loadout)
   ========================================================================= */

/* Kafelek wyboru jest przyciskiem, wiec trzeba mu zdjac domyslny wyglad
   i przywrocic uklad, ktory ma kafelek szafki. */
.vlct-loadout__option {
    appearance: none;
    background: none;
    font: inherit;
    cursor: pointer;
    text-align: center;
}

.vlct-loadout__option:disabled {
    cursor: not-allowed;
}

.vlct-loadout__range {
    width: 100%;
    accent-color: rgb(var(--color-primary, 59 130 246));
}

/* Suwaki skladowych koloru dostaja kolor kanalu, ktory ustawiaja -
   bez tego trzy identyczne paski wymagalyby czytania podpisow. */
.vlct-loadout__range--r { accent-color: #ef4444; }
.vlct-loadout__range--g { accent-color: #22c55e; }
.vlct-loadout__range--b { accent-color: #3b82f6; }

.vlct-loadout__swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.vlct-loadout__checkbox {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: rgb(var(--color-primary, 59 130 246));
}

/* Pole liczbowe edytora ma wspolny styl w vlct-forms.css. */

/* Makieta ekranu 640x480. Proporcje trzymane przez aspect-ratio, wiec znaczniki
   moga byc pozycjonowane w procentach i uklad dziala w kazdej szerokosci. */
.vlct-loadout__screen {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px) 0 0 / 100% 12.5%,
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px) 0 0 / 12.5% 100%,
        rgba(15, 23, 42, 0.55);
    overflow: hidden;
}

.vlct-loadout__marker {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--vlct-hud-color, #7ce0ff);
    border: 1px solid currentColor;
    background: rgba(15, 23, 42, 0.75);
    opacity: 0.65;
}

.vlct-loadout__marker--active {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* ============================================================================
   PANEL POSTEPU (najblizsze cele)
   ========================================================================= */

.vlct-progress__icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

/* Callingcardy maja proporcje 4:1. Klasa z szafki daje im width:100%, co w kafelku
   siatki jest w porzadku, ale tutaj ikona jest bezposrednim dzieckiem wiersza flex
   obok elementu flex-1 - bez stalej szerokosci i flex-shrink:0 rozpychala uklad. */
.vlct-progress__icon--wide {
    width: 5rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.vlct-progress__track {
    height: 0.375rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.vlct-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.7), rgba(59, 130, 246, 1));
}

/* ============================================================================
   PUBLICZNA WIZYTOWKA (/vlct/card/{id})
   ========================================================================= */

.vlct-card__banner {
    position: relative;
    aspect-ratio: 4 / 1;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.8);
}

/* Callingcard ma proporcje 4:1, wiec wypelnia banner dokladnie - stad cover
   zamiast contain, ktore zostawialoby paski po bokach. */
.vlct-card__banner-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vlct-card__banner-art .vlct-sprite-layer {
    background-size: cover;
}

/* Gradient pod tekstem - callingcardy bywaja jasne i nick by na nich zniknal. */
.vlct-card__banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.85) 30%, rgba(2, 6, 23, 0.25) 100%);
}

.vlct-card__emblem {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
}

.vlct-card__rank {
    width: 1rem;
    height: 1rem;
    display: inline-block;
}

/* ============================================================================
   LISTY MODU (/vlct/rosters)
   ========================================================================= */

.vlct-roster__action {
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.12);
    color: rgb(129, 140, 248);
    transition: background 0.15s;
}

.vlct-roster__action:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.22);
}

.vlct-roster__action:disabled {
    opacity: 0.4;
}

/* Listy potrafia mieć kilkadziesiat pozycji - wlasny pasek przewijania trzyma
   obie kolumny tej samej wysokosci, zamiast rozciagac strone. */
.vlct-roster__list {
    max-height: 22rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vlct-roster__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(148, 163, 184, 0.06);
}

.vlct-roster__row > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.vlct-roster__remove {
    flex-shrink: 0;
    color: rgba(148, 163, 184, 0.8);
    transition: color 0.15s;
}

.vlct-roster__remove:hover:not(:disabled) {
    color: rgb(248, 113, 113);
}

/* ============================================================================
   SESJE GRACZA
   ========================================================================= */

.vlct-session__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.875rem;
}

/* Domyslny trojkat <details> w Safari i Chrome wyglada inaczej niz nasza strzalka. */
.vlct-session__summary::-webkit-details-marker {
    display: none;
}

.vlct-session__summary:hover {
    background: rgba(148, 163, 184, 0.05);
}

.vlct-session__when {
    font-weight: 600;
    white-space: nowrap;
}

.vlct-session__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* ============================================================================
   TABLICA NA ZYWO (/vlct/live)
   ========================================================================= */

.vlct-live__emblem {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

/* ============================================================================
   ZAKLADKI PROFILU
   ========================================================================= */

.vlct-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    /* Pasek przewijania pod zakladkami na waskim ekranie tylko przeszkadza. */
    scrollbar-width: none;
}

.vlct-tabs::-webkit-scrollbar {
    display: none;
}

.vlct-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    color: rgba(148, 163, 184, 0.9);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.vlct-tabs__tab:hover {
    color: inherit;
}

.vlct-tabs__tab--active {
    color: inherit;
    border-bottom-color: rgb(99, 102, 241);
}

.vlct-tabs__tab i {
    font-size: 1.05rem;
}


/* ------------------------------------------------------------------ */
/* Bitwa skrzynek. Animacja jest czystym CSS-em - restart wymusza      */
/* zmiana @key na OpenId, wiec przegladarka tworzy element od nowa.    */
/* Rozliczenie salda NIE zalezy od tej animacji: strona pokazuje wynik */
/* po odpowiedzi serwisu, oprawa tylko go ubiera.                      */
/* ------------------------------------------------------------------ */

.vlct-crate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.vlct-crate__box {
    font-size: 84px;
    line-height: 1;
    color: var(--muted, #8b98a5);
}

.vlct-crate__box--shake {
    animation: vlct-crate-shake 700ms ease-in-out;
}

.vlct-crate__reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: vlct-crate-reveal 400ms cubic-bezier(.2, .9, .3, 1.2);
}

/* Duzo wieksze niz pierwotne 56px - przedmiot jest tu bohaterem ekranu, nie ikonka. */
.vlct-crate__item {
    width: 132px;
    height: 132px;
    border-radius: 10px;
}

.vlct-crate__rarity {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Im rzadszy drop, tym mocniejsza poswiata. Indeks zgadza sie z rzadkoscia z reguly gry. */
/* ------------------------------------------------------------------ */
/* PALETA RZADKOSCI - JEDNO ZRODLO                                     */
/* Ten sam kolor musi trafic na drop, na kafel tasmy i do tabeli szans. */
/* Wczesniej tabela szla klasami Tailwinda, a drop wlasnymi hexami -    */
/* i kolory sie nie zgadzaly.                                          */
/* ------------------------------------------------------------------ */

:root {
    --vlct-r0: #8b98a5;
    --vlct-r1: #4fc07c;
    --vlct-r2: #5b8cff;
    --vlct-r3: #c77dff;
    --vlct-r4: #e8b33d;
    --vlct-r5: #ff5d5d;
    --vlct-r6: #4de2e2;
}

.vlct-rarity--r0 { color: var(--vlct-r0); }
.vlct-rarity--r1 { color: var(--vlct-r1); }
.vlct-rarity--r2 { color: var(--vlct-r2); }
.vlct-rarity--r3 { color: var(--vlct-r3); }
.vlct-rarity--r4 { color: var(--vlct-r4); }
.vlct-rarity--r5 { color: var(--vlct-r5); }
.vlct-rarity--r6 { color: var(--vlct-r6); }

.vlct-rarity-edge--r0 { border-color: rgba(139, 152, 165, .45); }
.vlct-rarity-edge--r1 { border-color: var(--vlct-r1); }
.vlct-rarity-edge--r2 { border-color: var(--vlct-r2); }
.vlct-rarity-edge--r3 { border-color: var(--vlct-r3); }
.vlct-rarity-edge--r4 { border-color: var(--vlct-r4); }
.vlct-rarity-edge--r5 { border-color: var(--vlct-r5); }
.vlct-rarity-edge--r6 { border-color: var(--vlct-r6); }

.vlct-crate__reveal--r0 .vlct-crate__rarity { color: var(--vlct-r0); }
.vlct-crate__reveal--r1 .vlct-crate__rarity { color: var(--vlct-r1); }
.vlct-crate__reveal--r2 .vlct-crate__rarity { color: var(--vlct-r2); }
.vlct-crate__reveal--r3 .vlct-crate__rarity { color: var(--vlct-r3); }
.vlct-crate__reveal--r4 .vlct-crate__rarity { color: var(--vlct-r4); }
.vlct-crate__reveal--r5 .vlct-crate__rarity { color: var(--vlct-r5); }
.vlct-crate__reveal--r6 .vlct-crate__rarity { color: var(--vlct-r6); }

.vlct-crate__reveal--r2 .vlct-crate__item { box-shadow: 0 0 10px rgba(91, 140, 255, .45); }
.vlct-crate__reveal--r3 .vlct-crate__item { box-shadow: 0 0 14px rgba(199, 125, 255, .55); }
.vlct-crate__reveal--r4 .vlct-crate__item { box-shadow: 0 0 20px rgba(232, 179, 61, .75); }

/* Dwa najwyzsze szczeble dostaja poswiate, ktora pulsuje - wypadaja odpowiednio raz na 125
   i raz na 500 otwarc, wiec moga sobie pozwolic na to, zeby bylo je widac z drugiego konca
   pokoju. Nieruchoma poswiata przy takiej rzadkosci po prostu ginelaby wsrod zlota. */
.vlct-crate__reveal--r5 .vlct-crate__item {
    box-shadow: 0 0 26px rgba(255, 93, 93, .85);
    animation: vlct-crate-pulse 1.4s ease-in-out infinite;
}

.vlct-crate__reveal--r6 .vlct-crate__item {
    box-shadow: 0 0 34px rgba(77, 226, 226, .95);
    animation: vlct-crate-pulse 1.1s ease-in-out infinite;
}

@keyframes vlct-crate-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.35); }
}

@keyframes vlct-crate-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    15%      { transform: translateX(-3px) rotate(-4deg); }
    30%      { transform: translateX(3px) rotate(4deg); }
    45%      { transform: translateX(-4px) rotate(-6deg); }
    60%      { transform: translateX(4px) rotate(6deg); }
    80%      { transform: translateX(-2px) rotate(-3deg); }
}

@keyframes vlct-crate-reveal {
    from { transform: scale(.55); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* KARUZELA                                                            */
/* Tasma stoi na left:50%, wiec przesuniecie o (indeks + 0.5) szerokosci */
/* kafla stawia wygrana pozycje dokladnie pod wskaznikiem. Dzieki temu   */
/* nie trzeba znac szerokosci pojemnika ani liczyc niczego w JS.        */
/* ------------------------------------------------------------------ */

.vlct-crate__viewport {
    /* Zapasowa wartosc - prawdziwa podaje komponent, bo ta sama liczba wyznacza
       droge przejazdu i nie moze zyc w dwoch miejscach. */
    --vlct-crate-cell: 132px;

    position: relative;
    width: 100%;
    height: calc(var(--vlct-crate-cell) * 1.55);
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0, 0, 0, .18);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .45);
}

/* Krawedzie sciemnione, zeby tasma wjezdzala i wyjezdzala z cienia. */
.vlct-crate__viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 18%,
        rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .75) 100%);
}

.vlct-crate__pointer {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    z-index: 2;
    background: linear-gradient(180deg, #e8b33d 0%, rgba(232, 179, 61, .25) 50%, #e8b33d 100%);
    box-shadow: 0 0 10px rgba(232, 179, 61, .8);
}

.vlct-crate__track {
    position: absolute;
    left: 50%;
    top: 0;
    display: flex;
    height: 100%;
    align-items: center;
    will-change: transform;
    animation: vlct-crate-roll 5s cubic-bezier(.12, .55, .12, 1) both;
}

.vlct-crate__cell {
    flex: 0 0 var(--vlct-crate-cell);
    width: var(--vlct-crate-cell);
    height: calc(var(--vlct-crate-cell) * 1.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, .05);
    font-size: 40px;
    color: var(--muted, #8b98a5);
}

.vlct-crate__cell .vlct-crate__item {
    width: calc(var(--vlct-crate-cell) - 28px);
    height: calc(var(--vlct-crate-cell) - 28px);
    border-radius: 8px;
}

/* Ta sama skala rzadkosci co przy odslonieciu - tyle ze na kaflu tasmy. */
.vlct-crate__cell--r1 { box-shadow: inset 0 -3px 0 var(--vlct-r1); }
.vlct-crate__cell--r2 { box-shadow: inset 0 -3px 0 var(--vlct-r2); }
.vlct-crate__cell--r3 { box-shadow: inset 0 -3px 0 var(--vlct-r3); }
.vlct-crate__cell--r4 { box-shadow: inset 0 -3px 0 var(--vlct-r4); }
.vlct-crate__cell--r5 { box-shadow: inset 0 -3px 0 var(--vlct-r5); }
.vlct-crate__cell--r6 { box-shadow: inset 0 -3px 0 var(--vlct-r6); }

/* Obie wartosci przychodza gotowe, w pikselach, ze stylu inline na tasmie.            */
/* NIE liczyc ich tutaj przez calc(dlugosc * zmienna) - taka klatka potrafi zostac     */
/* odrzucona i wtedy tasma stoi w pozycji startowej, co wyglada jak zepsuta animacja.  */
@keyframes vlct-crate-roll {
    from { transform: translateX(var(--vlct-crate-from, -336px)); }
    to   { transform: translateX(var(--vlct-crate-to, -3696px)); }
}

/* Odsloniecie rysowane rownolegle z tasma istnieje wylacznie dla reduced-motion. */
.vlct-crate__reveal--still { display: none; }

/* Kto wylaczyl animacje w systemie, dostaje od razu wynik - bez drgania, tasmy i skalowania. */
@media (prefers-reduced-motion: reduce) {
    .vlct-crate__box--shake,
    .vlct-crate__reveal {
        animation: none;
    }

    .vlct-crate__viewport {
        display: none;
    }

    .vlct-crate__reveal--still {
        display: flex;
    }
}

/* ============================================================================
   TABELA REKORDOW (edytor)
   ========================================================================= */

/*
    Wlasna siatka, a nie .vlct-roster__row: tamten wiersz rozciaga PIERWSZE dziecko,
    a tutaj pierwsze dziecko to numer miejsca. Kolumny stale, zeby czasy i daty
    staly w jednej linii w kazdym wierszu - przy flexie kazdy wiersz ukladal sie
    inaczej, zaleznie od dlugosci nicku.
*/
.vlct-record__row {
    display: grid;
    grid-template-columns: 2.25rem 2.25rem 1.75rem minmax(0, 1fr) 4.5rem 5.5rem 3rem 3.5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(148, 163, 184, 0.06);
}

/* Emblemat jako grafika, nie nazwa materialu - te same pliki, ktore panel wystawia
   dla profilu gracza. Stala wysokosc, zeby wiersze nie skakaly, gdy ktorys emblemat
   jest animowany i ma inne proporcje klatki. */
.vlct-record__emblem {
    width: 1.75rem;
    height: 1.75rem;
}

/* Tryb edycji ma zupelnie inna zawartosc (pola formularza), wiec zwykly flex. */
.vlct-record__row--edit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.vlct-record__pos {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.7);
}

/* Numer trasy widoczny zawsze - przy filtrze "all" miejsca zaczynaja sie od 1
   w kazdej trasie i bez tego nie wiadomo, do ktorej tabeli nalezy wiersz. */
.vlct-record__route {
    justify-self: start;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: rgba(148, 163, 184, 0.8);
}

.vlct-record__time {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.vlct-record__date {
    text-align: right;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.7);
    /* Odstep na wypadek, gdyby siatka nie zadzialala (np. stary arkusz z cache
       przegladarki) - bez tego czas i data zlewaja sie w jeden ciag cyfr. */
    padding-left: 0.5rem;
}

.vlct-record__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

/* Na waskim ekranie data i numer konta odpadaja pierwsze - reszta ma zostac czytelna. */
@media (max-width: 48rem) {
    .vlct-record__row {
        grid-template-columns: 2rem 2rem 1.5rem minmax(0, 1fr) 4.25rem 3.25rem;
    }

    .vlct-record__date,
    .vlct-record__client {
        display: none;
    }
}

/* Historia zmian tablic: kiedy, co, kto. Stale kolumny z tego samego powodu
   co w wierszu rekordu - daty maja stac w jednej linii. */
.vlct-change__row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 8rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(148, 163, 184, 0.06);
}

.vlct-change__when {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: rgba(148, 163, 184, 0.7);
}

@media (max-width: 48rem) {
    .vlct-change__row {
        grid-template-columns: minmax(0, 1fr) 6rem;
    }

    .vlct-change__when {
        display: none;
    }
}