/* ============================================================
   ACCUR8POOL — "break shot" v2
   Zastępuje TYLKO cue.css. styles.css i auth-mobile.css zostają
   podpięte bez zmian — ten plik niczego z nich nie nadpisuje poza
   wyglądem samego przycisku-bili.

   Zmiana względem v1: bilą jest PRAWDZIWY <button>, nie jego kopia.
   Kij uderza w niego, on się toczy i obraca. Efekty siedzą w dwóch
   warstwach — jedna pod przyciskiem (łuza, przyciemnienie), druga
   nad nim (kij, kreda, refleks świetlny).
   ============================================================ */

:root {
    --ball-size: 76px;
    --felt-deep: #0d3a2c;
    --felt: #1d6b52;
    --cue-wood: #5a3418;
    --cue-ring: #f3ead4;
    --chalk: #7cc2ea;
}

/* ============================================================
   PRZYCISK = BILA
   Jeśli masz już wygląd #ball w styles.css i wolisz swój — skasuj
   ten jeden blok, reszta pliku działa niezależnie.
   ============================================================ */
#ball,
#register-ball {
    /* position + z-index: bila musi być NAD łuzą (warstwa tylna),
       ale POD refleksem i kijem (warstwa przednia) */
    position: relative;
    z-index: 5;

    display: grid;
    place-items: center;
    width: var(--ball-size);
    height: var(--ball-size);
    margin: 22px auto 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;

    background:
        radial-gradient(circle at 34% 28%, #3fa87a 0%, var(--felt) 45%, var(--felt-deep) 100%);
    color: #123b2c;
    font: 700 calc(var(--ball-size) * 0.34) / 1 system-ui, -apple-system, sans-serif;

    box-shadow:
        inset -7px -9px 18px rgba(0, 0, 0, 0.45),
        0 10px 18px rgba(0, 0, 0, 0.3);

    transition: transform 0.18s ease, box-shadow 0.18s ease;
    will-change: transform;
}

/* Biały krążek z numerem — obraca się razem z bilą, tak jak w realu */
#ball::before,
#register-ball::before {
    content: '';
    position: absolute;
    width: 54%;
    height: 54%;
    border-radius: 50%;
    background: #fbf7ec;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

/* Sam numer musi być nad krążkiem */
#ball,
#register-ball { isolation: isolate; }

#ball::before,
#register-ball::before { z-index: -1; }

#ball:hover,
#register-ball:hover {
    transform: translateY(-2px);
    box-shadow:
        inset -7px -9px 18px rgba(0, 0, 0, 0.45),
        0 14px 24px rgba(0, 0, 0, 0.35);
}

#ball:focus-visible,
#register-ball:focus-visible {
    outline: 3px solid var(--chalk);
    outline-offset: 4px;
}

/* Podczas lotu bila wychodzi poza kartę — bez tego zostałaby ucięta */
.auth-card { overflow: visible; }

/* ============================================================
   WARSTWY EFEKTÓW
   ============================================================ */

/* TYLNA — łuza i przyciemnienie tła. Pod przyciskiem. */
#pool-fx-back {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

#pool-fx-back::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 100% at 50% 55%, transparent 30%, rgba(4, 26, 18, 0.55) 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
}

#pool-fx-back.dim::before { opacity: 1; }

/* PRZEDNIA — kij, kreda, refleks. Nad przyciskiem. */
#pool-fx-front {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    overflow: hidden;
}

/* ============================================================
   REFLEKS ŚWIETLNY
   Osobny element, bo ma jechać RAZEM z bilą, ale się NIE obracać.
   Prawdziwa kula ma odbicie w tym samym punkcie niezależnie od tego,
   jak szybko się kręci — to ten detal sprzedaje trójwymiarowość.
   ============================================================ */
.fx-glare {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,0.85) 0 5%, rgba(255,255,255,0.25) 13%, transparent 42%);
    opacity: 0;
}

.fx-glare.on { opacity: 1; }

/* Smuga prędkości */
.fx-streak {
    position: absolute;
    height: 18%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(190, 255, 225, 0.5));
    filter: blur(3px);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.fx-streak.on { opacity: 1; }

/* ============================================================
   KIJ
   ============================================================ */
.fx-cue {
    position: absolute;
    border-radius: 6px 3px 3px 6px;
    transform-origin: right center;
    background: linear-gradient(
        90deg,
        #2b1708 0%,
        var(--cue-wood) 30%,
        #9c6b34 70%,
        var(--cue-ring) 88%,
        var(--cue-ring) 93%,
        var(--felt) 100%
    );
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    opacity: 0;
    will-change: transform;
}

.fx-cue-tip {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 7%;
    border-radius: 2px 4px 4px 2px;
    background: var(--felt);
    transform-origin: right center;
    will-change: transform;
}

/* ============================================================
   ŁUZA
   ============================================================ */
.fx-pocket {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #000 0%, #06140f 60%, #0d2b21 100%);
    box-shadow:
        inset 0 6px 14px rgba(0, 0, 0, 0.9),
        0 0 0 3px rgba(20, 60, 45, 0.75),
        0 0 26px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.fx-pocket.open { opacity: 1; transform: scale(1); }

.fx-pocket.closing {
    transition: opacity 0.14s ease, transform 0.14s ease;
    opacity: 0;
    transform: scale(0.55);
}

.fx-pocket.gulp::after {
    content: '';
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    border: 2px solid rgba(120, 255, 205, 0.65);
    animation: fx-gulp 0.5s ease-out forwards;
}

@keyframes fx-gulp {
    from { transform: scale(0.7); opacity: 0.9; }
    to   { transform: scale(1.9); opacity: 0; }
}

/* ============================================================
   UDERZENIE
   ============================================================ */
.fx-chalk {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--chalk);
    opacity: 0;
    animation: fx-chalk-fly 0.55s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}

@keyframes fx-chalk-fly {
    0%   { opacity: 0.95; transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0;    transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(0.4); }
}

.fx-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    animation: fx-ring-out 0.45s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes fx-ring-out {
    from { transform: scale(0.35); opacity: 0.85; }
    to   { transform: scale(2.4);  opacity: 0; }
}

/* Wstrząs karty — krótki i nieregularny */
.auth-card.fx-shake { animation: fx-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

@keyframes fx-shake {
    0%, 100% { transform: translate(0, 0); }
    18%      { transform: translate(-5px, 2px) rotate(-0.35deg); }
    38%      { transform: translate(4px, -2px) rotate(0.25deg); }
    62%      { transform: translate(-3px, 1px); }
    82%      { transform: translate(2px, 0); }
}

.auth-card.fx-deny { animation: fx-deny 0.42s ease; }

@keyframes fx-deny {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-9px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(3px); }
}

.auth-card.fx-sink { animation: fx-sink 0.4s cubic-bezier(0.5, 0, 0.85, 0.3) forwards; }

@keyframes fx-sink {
    to { transform: translateY(16px) scale(0.955); opacity: 0; filter: blur(3px); }
}

/* ============================================================
   CELOWANIE — kij pojawia się przy najechaniu na bilę
   ============================================================ */
@media (hover: hover) and (pointer: fine) {

    #login-form,
    #register-form { position: relative; }

    #login-form::after,
    #register-form::after {
        content: '';
        position: absolute;
        right: calc(50% + var(--ball-size) / 2 + 4px);
        bottom: calc(4px + var(--ball-size) / 2 - 5px);
        width: 210px;
        height: 10px;
        border-radius: 6px 3px 3px 6px;
        background: linear-gradient(
            90deg, #2b1708 0%, var(--cue-wood) 30%, #9c6b34 70%,
            var(--cue-ring) 88%, var(--cue-ring) 93%, var(--felt) 100%
        );
        transform: translateX(-46px) rotate(-3deg);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
    }

    #login-form:has(#ball:hover)::after,
    #register-form:has(#register-ball:hover)::after {
        opacity: 0.9;
        transform: translateX(-12px) rotate(-3deg);
    }

    body.fx-shooting #login-form::after,
    body.fx-shooting #register-form::after { opacity: 0 !important; }
}

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width: 480px) {
    :root { --ball-size: 66px; }
}

/* ============================================================
   DOSTĘPNOŚĆ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .fx-cue,
    .fx-streak,
    .fx-chalk,
    .fx-ring { display: none; }

    #ball,
    #register-ball { transition: none; }

    .auth-card.fx-shake,
    .auth-card.fx-deny,
    .auth-card.fx-sink { animation: none; }

    .auth-card.fx-sink { opacity: 0; transition: opacity 0.2s ease; }

    #login-form::after,
    #register-form::after { display: none; }
}