* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --bg: #080b12;
    --card: rgba(20, 25, 36, 0.88);

    --key: rgba(255, 255, 255, 0.055);
    --key-hover: rgba(255, 255, 255, 0.10);

    --text: #ffffff;
    --muted: #8b93a5;

    --accent: #6c63ff;
    --success: #36d399;
    --danger: #ff5572;
    --warning: #ffd166;
}

body {

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(108, 99, 255, 0.20),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 90%,
            rgba(54, 211, 153, 0.08),
            transparent 30%
        ),

        var(--bg);

    overflow: hidden;
}


/* =====================================================
   HLAVNÍ KARTA
===================================================== */

.lock {

    width:
        min(390px, calc(100% - 30px));

    padding:
        32px 25px 28px;

    background:
        var(--card);

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        30px;

    box-shadow:

        0 30px 80px
        rgba(0,0,0,0.55),

        inset 0 1px 0
        rgba(255,255,255,0.05);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    text-align:
        center;

    transition:
        all 0.7s ease;
}


/* =====================================================
   IKONA ZÁMKU
===================================================== */

.lock-icon {

    width: 82px;
    height: 82px;

    margin:
        0 auto 18px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:

        linear-gradient(
            145deg,
            rgba(108,99,255,0.22),
            rgba(108,99,255,0.06)
        );

    border:
        1px solid
        rgba(108,99,255,0.28);

    box-shadow:

        0 0 35px
        rgba(108,99,255,0.18);

    transition:

        background 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        transform 0.5s ease,
        opacity 0.7s ease;
}

.lock-icon svg {

    width:
        39px;

    height:
        39px;

    fill:
        none;

    stroke:
        var(--accent);

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        stroke 0.5s ease;
}


/* =====================================================
   TEXT
===================================================== */

h1 {

    font-size:
        24px;

    font-weight:
        650;

    letter-spacing:
        -0.5px;
}

.subtitle {

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        14px;
}


/* =====================================================
   PIN
===================================================== */

.pin {

    display:
        flex;

    justify-content:
        center;

    gap:
        13px;

    margin:
        28px 0 26px;
}

.dot {

    width:
        13px;

    height:
        13px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.12);

    border:
        1px solid
        rgba(255,255,255,0.10);

    transition:

        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.dot.active {

    background:
        var(--accent);

    border-color:
        var(--accent);

    transform:
        scale(1.18);

    box-shadow:

        0 0 14px
        rgba(108,99,255,0.65);
}


/* =====================================================
   KLÁVESNICE
===================================================== */

.keypad {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        11px;
}

button {

    border:
        none;

    outline:
        none;

    color:
        white;

    font-family:
        inherit;

    cursor:
        pointer;

    user-select:
        none;
}

.key {

    height:
        65px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        18px;

    background:
        var(--key);

    border:
        1px solid
        rgba(255,255,255,0.055);

    font-size:
        22px;

    font-weight:
        500;

    transition:

        background .12s ease,
        transform .12s ease,
        box-shadow .12s ease;
}

.key:hover {

    background:
        var(--key-hover);
}

.key:active {

    transform:
        scale(0.93);

    background:
        rgba(108,99,255,0.20);

    box-shadow:

        0 0 20px
        rgba(108,99,255,0.15);
}


/* =====================================================
   ČERVENÉ C
===================================================== */

.key.action {

    color:
        #ffffff;

    opacity:
        0.8;

    font-size:
        18px;

    background:

        linear-gradient(
            145deg,
            #e74c3c,
            #c0392b
        );

    border-color:
        transparent;

    box-shadow:

        0 8px 20px
        rgba(231,76,60,0.20);
}

.key.action:hover {

    background:

        linear-gradient(
            145deg,
            #f05a4a,
            #d64535
        );

    opacity:
        1;
}


/* =====================================================
   POTVRZENÍ
===================================================== */

.key.confirm {

    background:

        linear-gradient(
            145deg,
            #6c63ff,
            #5148e8
        );

    border-color:
        transparent;

    box-shadow:

        0 8px 25px
        rgba(108,99,255,0.25);
}


/* =====================================================
   STATUS
===================================================== */

.status {

    min-height:
        20px;

    margin-top:
        20px;

    color:
        var(--muted);

    font-size:
        13px;
}

.status.success {

    color:
        var(--success);
}

.status.error {

    color:
        var(--danger);
}


/* =====================================================
   ŠPATNÝ PIN
===================================================== */

.wrong-check .dot {

    animation:
        wrongDot
        3s
        ease
        forwards;
}

.wrong-check .dot:nth-child(1) {
    animation-delay: .05s;
}

.wrong-check .dot:nth-child(2) {
    animation-delay: .15s;
}

.wrong-check .dot:nth-child(3) {
    animation-delay: .25s;
}

.wrong-check .dot:nth-child(4) {
    animation-delay: .35s;
}

.wrong-check .dot:nth-child(5) {
    animation-delay: .55s;
}

.wrong-check .dot:nth-child(6) {
    animation-delay: .7s;
}

.wrong-check .dot:nth-child(7) {
    animation-delay: .8s;
}

.wrong-check .dot:nth-child(8) {
    animation-delay: .9s;
}

.wrong-check .dot:nth-child(9) {
    animation-delay: 1.0s;
}

.wrong-check .dot:nth-child(10) {
    animation-delay: 1.1s;
}


@keyframes wrongDot {

    0% {

        background:
            var(--accent);

        border-color:
            var(--accent);

        box-shadow:
            0 0 10px
            rgba(108,99,255,.5);

        transform:
            scale(1);
    }

    25% {

        background:
            var(--success);

        border-color:
            var(--success);

        box-shadow:
            0 0 24px
            rgba(54,211,153,.9);

        transform:
            scale(1.28);
    }

    70% {

        background:
            var(--success);

        border-color:
            var(--success);

        box-shadow:
            0 0 18px
            rgba(54,211,153,.7);

        transform:
            scale(1.18);
    }

    82% {

        background:
            var(--warning);

        border-color:
            var(--warning);

        box-shadow:
            0 0 22px
            rgba(255,209,102,.9);

        transform:
            scale(1.28);
    }

    92% {

        background:
            var(--danger);

        border-color:
            var(--danger);

        box-shadow:
            0 0 30px
            rgba(255,85,114,1);

        transform:
            scale(1.4);
    }

    100% {

        background:
            var(--danger);

        border-color:
            var(--danger);

        box-shadow:
            0 0 20px
            rgba(255,85,114,.8);

        transform:
            scale(1.18);
    }
}


/* =====================================================
   VŠECHNY ČERVENÉ
===================================================== */

.wrong-final .dot {

    background:
        var(--danger);

    border-color:
        var(--danger);

    transform:
        scale(1.18);

    box-shadow:
        0 0 20px
        rgba(255,85,114,.75);
}


/* =====================================================
   PULZOVÁNÍ ČERVENÝCH
===================================================== */

.wrong-final.pulsing .dot {

    animation:
        redPulse
        1.2s
        ease-in-out
        infinite;
}


@keyframes redPulse {

    0% {

        transform:
            scale(1.15);

        box-shadow:
            0 0 12px
            rgba(255,85,114,.45);
    }

    50% {

        transform:
            scale(1.35);

        box-shadow:
            0 0 30px
            rgba(255,85,114,.95);
    }

    100% {

        transform:
            scale(1.15);

        box-shadow:
            0 0 12px
            rgba(255,85,114,.45);
    }
}


/* =====================================================
   ZHASÍNÁNÍ
===================================================== */

.wrong-final.fade-out .dot {

    animation:
        redFadeOut
        1.2s
        ease
        forwards;
}


@keyframes redFadeOut {

    0% {

        opacity:
            1;

        transform:
            scale(1.2);

        background:
            var(--danger);

        box-shadow:
            0 0 25px
            rgba(255,85,114,.8);
    }

    100% {

        opacity:
            0;

        transform:
            scale(.65);

        background:
            rgba(255,255,255,.12);

        border-color:
            rgba(255,255,255,.10);

        box-shadow:
            0 0 0
            rgba(255,85,114,0);
    }
}


/* =====================================================
   SPRÁVNÝ PIN
===================================================== */

.unlocking .dot {

    animation:
        verifyDot
        2.5s
        ease
        forwards;
}

.unlocking .dot:nth-child(1) {
    animation-delay: .05s;
}

.unlocking .dot:nth-child(2) {
    animation-delay: .15s;
}

.unlocking .dot:nth-child(3) {
    animation-delay: .25s;
}

.unlocking .dot:nth-child(4) {
    animation-delay: .35s;
}

.unlocking .dot:nth-child(5) {
    animation-delay: .55s;
}

.unlocking .dot:nth-child(6) {
    animation-delay: .7s;
}

.unlocking .dot:nth-child(7) {
    animation-delay: .8s;
}

.unlocking .dot:nth-child(8) {
    animation-delay: .9s;
}

.unlocking .dot:nth-child(9) {
    animation-delay: 1.0s;
}

.unlocking .dot:nth-child(10) {
    animation-delay: 1.1s;
}


@keyframes verifyDot {

    0% {

        background:
            var(--accent);

        border-color:
            var(--accent);

        transform:
            scale(1);

        box-shadow:
            0 0 10px
            rgba(108,99,255,.5);
    }

    50% {

        background:
            var(--success);

        border-color:
            var(--success);

        transform:
            scale(1.45);

        box-shadow:
            0 0 30px
            rgba(54,211,153,1);
    }

    100% {

        background:
            var(--success);

        border-color:
            var(--success);

        transform:
            scale(1.18);

        box-shadow:
            0 0 15px
            rgba(54,211,153,.65);
    }
}


/* =====================================================
   VŠECH 10 TEČEK ZŮSTANE ZELENÝCH
===================================================== */

.correct-final .dot {

    background:
        var(--success);

    border-color:
        var(--success);

    transform:
        scale(1.18);

    opacity:
        1;

    box-shadow:
        0 0 20px
        rgba(54,211,153,.8);
}


/* =====================================================
   ZELENÝ ZÁMEK
===================================================== */

.green-lock .lock-icon {

    background:
        rgba(54,211,153,.16);

    border-color:
        rgba(54,211,153,.65);

    box-shadow:
        0 0 65px
        rgba(54,211,153,.85);

    transform:
        scale(1.08);

    animation:
        greenLockFlash
        .8s
        ease
        forwards;
}

.green-lock .lock-icon svg {

    stroke:
        var(--success);

    filter:
        drop-shadow(
            0 0 18px
            rgba(54,211,153,1)
        );
}


@keyframes greenLockFlash {

    0% {

        transform:
            scale(1);
    }

    45% {

        transform:
            scale(1.14);

        box-shadow:
            0 0 80px
            rgba(54,211,153,1);
    }

    100% {

        transform:
            scale(1.08);

        box-shadow:
            0 0 55px
            rgba(54,211,153,.75);
    }
}


/* =====================================================
   ODEMČENÝ ZÁMEK – ZMIZENÍ
===================================================== */

.unlocked .lock-icon {

    animation:
        hideLock
        .7s
        ease
        forwards;

    pointer-events:
        none;
}


@keyframes hideLock {

    0% {

        opacity:
            1;

        transform:
            scale(1.08);
    }

    100% {

        opacity:
            0;

        transform:
            scale(.65);
    }
}

.lock-icon.removed {

    display:
        none;
}


/* =====================================================
   ODEMČENÝ OBSAH
===================================================== */

.success-screen {

    display:
        none;

    text-align:
        center;

    padding:
        10px;

    animation:
        successReveal
        1s
        ease;
}

.success-icon {

    width:
        82px;

    height:
        82px;

    margin:
        0 auto 22px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:
        rgba(54,211,153,.12);

    border:
        1px solid
        rgba(54,211,153,.4);

    color:
        var(--success);

    font-size:
        42px;

    box-shadow:
        0 0 45px
        rgba(54,211,153,.30);
}

.success-screen h2 {

    margin-bottom:
        10px;

    color:
        var(--success);

    font-size:
        22px;
}

.success-screen p {

    margin-bottom:
        5px;

    font-size:
        16px;
}

.success-screen span {

    color:
        var(--muted);

    font-size:
        13px;
}


@keyframes successReveal {

    0% {

        opacity:
            0;

        transform:
            translateY(30px)
            scale(.9);
    }

    100% {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =====================================================
   MOBIL
===================================================== */

@media (max-width:430px) {

    .lock {

        padding:
            26px 19px 22px;

        border-radius:
            25px;
    }

    .lock-icon {

        width:
            72px;

        height:
            72px;
    }

    .key {

        height:
            60px;
    }
}
/* ČERVENÝ ZÁMEK */

.red-lock .lock-icon {
    border-color: rgba(255, 85, 114, 0.45);

    background:
        rgba(255, 85, 114, 0.12);

    box-shadow:
        0 0 40px rgba(255, 85, 114, 0.30);
}

.red-lock .lock-icon svg {
    stroke: var(--danger);
}