html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

        background-color: #f7f9fb;
        background-image: url("bg-science-pattern.png");

        background-repeat: repeat;
        background-size: 600px 780px;
        background-position: center;
    }
    html {
        -webkit-text-size-adjust: 100%;
    }

    #start-screen {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.2rem;
        box-sizing: border-box;
    }

    .btn-panel {
        position: relative;
        max-width: 420px;
        width: 100%;
        background: white;
        border-radius: 20px;
        padding: 2rem 1.8rem;
        text-align: center;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.15);

        display: flex;
        flex-direction: column;
        gap: 1.2rem;

        border: 1px solid rgba(43, 140, 255, 0.1);
    }

    .btn-panel h1 {
        margin: 0;
        font-size: clamp(1.6rem, 4vw, 2rem);
        font-weight: 700;
        color: #1b2a3a;
    }

    .btn-panel .subtitle {
        margin-top: -1rem;
        font-size: 1rem;
        color: #4f6b88;
    }

    #start-btn {
        margin-top: 0.5rem;
        padding: 0.9rem 1.4rem;

        font-size: 1.1rem;
        font-weight: 600;
        color: white;

        background: linear-gradient(135deg, #2b8cff, #1f6ed5);
        border: none;
        border-radius: 999px;

        cursor: pointer;

        box-shadow:
            0 6px 15px rgba(43, 140, 255, 0.35);

        transition:
            transform 0.15s ease,
            box-shadow 0.15s ease;
    }

    #start-btn:active {
        /* transform: scale(0.96);
        box-shadow:
            0 3px 10px rgba(43, 140, 255, 0.4); */
        transform: translate(-50%, 50%) scale(0.95);
    }
    #start-btn:hover {
        transform: translateY(1px);
        /* transform: scale(1.01);  */
        box-shadow: 
            0 4px 10px rgba(26, 92, 173, 0.6);
    }

    .note {
        margin: 0;
        font-size: 1rem; /* +1 спрямо предишното */
        line-height: 1.45;
    }

    .note .main {
        color: #6b7f99;
    }

    .note .action {
        color: #f39c3d; /* меко, приятно оранжево */
        font-weight: 600;
    }

    .help-btn {
        position: absolute;

        /* anchor point */
        left: 50%;
        bottom: 0;

        /* place its CENTER on the card edge */
        transform: translate(-50%, 50%);

        width: 54px;
        height: 54px;
        border-radius: 50%;

        background: #bae7b5;
        border: 2px solid white;
        color: #4f6b88;

        font-size: 22px;
        font-weight: bold;

        cursor: pointer;

        box-shadow: 0 6px 16px rgba(0,0,0,0.2);

        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .help-btn:hover {
        transform: translate(-50%, 50%) scale(1.08);
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    .help-btn:active {
        transform: translate(-50%, 50%) scale(0.95);
    }

    /* =========================
    Instructions Panel (Modal)
    ========================= */

    #instructions-panel {
        position: fixed;
        inset: 0;
        display: none;              /* hidden by default */
        align-items: center;
        justify-content: center;

        padding: 1.2rem;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);

        z-index: 999;

        /* for device horizontal scrolling */
        overflow-y: auto;
    }

    #instructions-panel[aria-hidden="false"] {
        display: flex;
    }

    .instructions-container {
        width: 100%;
        max-width: 500px;
        background: white;
        border-radius: 20px;
        overflow: hidden;

        box-shadow: 0 20px 50px rgba(0,0,0,0.25);

        /* for device horizontal scrollong */
        max-height: calc(100vh - 2.4rem); /* screen minus padding */
        overflow-y: auto;
    }

    /* Header */
    .instructions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 1.2rem 1.5rem;
        background: linear-gradient(135deg, #2b8cff, #1f6ed5);
        color: white;
    }

    .instructions-header h2 {
        margin: 0;
        font-size: 1.4rem;
    }

    .close-btn {
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 1.2rem;
        cursor: pointer;
    }

    .close-btn:hover {
        background: rgba(255,255,255,0.3);
    }

    /* Content */
    .instructions-content {
        padding: 1.5rem;
    }

    .instructions-content ol {
        /* margin: 0 0 1.5rem 1.2rem; */
        margin-left: -0.5rem;
        margin-bottom: 2rem;
    }

    .instructions-content li {
        margin-bottom: 0.6rem;
        color: #1b2a3a;
    }

    /* Extras */
    .requirements {
        background: #f8fafd;
        border-left: 4px solid #4fcf8f;
        border-radius: 10px;
        padding: 1rem;
        margin: 1.2rem 0;
    }

    .requirements h3 {
        margin: 0 0 0.6rem 0;
    }

    .requirements p {
        margin: 0.3rem 0;
        color: #4f6b88;
    }
    .requirements p:before {
        content: "✓";
        color: #4fcf8f;
        margin-right: 10px;
        font-weight: bold;
        font-size: 1.1rem;
    }

    .privacy-note {
        font-size: 0.9rem;
        color: #8a6d3b;
        background: #fff8e6;
        border: 1px solid #ffd166;
        border-radius: 8px;
        padding: 0.8rem;
        text-align: center;
    }