:root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
    margin: 0;
    background: #000;
}

body {
    height: 1500vh;
    font-family: Vazirmatn, Tahoma, sans-serif;
}

#black {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#hint {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: #ffffff; /* تغییر رنگ به سفید */
    font-size: 15px;
    letter-spacing: 2px; /* فاصله زیبا بین حروف انگلیسی */
    pointer-events: none;
    animation: bounceHint 2s infinite ease-in-out; /* انیمیشن حرکت نرم */
}

@keyframes bounceHint {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* =================================================================
   جدید۸: صحنه‌ی پایانی روی صفحه‌ی سیاه آخر (کد قدیمی بالا دست‌نخورده است)
   ================================================================= */
#finale {
    --mx: 50%;
    --my: 50%;
    position: fixed;
    inset: 0;
    z-index: 4;
    direction: ltr;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle 320px at var(--mx) var(--my), rgba(30, 144, 255, 0.16), transparent 70%),
        #000;
    opacity: 0;
    pointer-events: none;
    touch-action: pan-y;
    transition: opacity 1.2s ease;
}

#finale.on {
    opacity: 1;
    pointer-events: auto;
}

.f-line {
    width: min(60vw, 520px);
    height: 1px;
    background: linear-gradient(90deg, transparent, #5cb8ff, transparent);
    box-shadow: 0 0 18px #1e90ff;
    transform: scaleX(0);
    transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s;
}

#finale.on .f-line {
    transform: scaleX(1);
}

.f-wrap {
    position: relative;
    margin: 34px 0 18px;
    display: grid;
}

.f-title {
    grid-area: 1 / 1;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font: 300 clamp(26px, 6vw, 72px) / 1 "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 1.1em;
    opacity: 0;
    transition: letter-spacing 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s, opacity 1.6s ease 1.2s;
}

#finale.on .f-title {
    letter-spacing: 0.34em;
    opacity: 1;
}

.f-title.dim {
    color: #1b1b1f;
}

.f-title.bright {
    color: #ffffff;
    text-shadow: 0 0 22px rgba(92, 184, 255, 0.9);
    -webkit-mask-image: radial-gradient(circle 190px at var(--mx) var(--my), #000 0%, transparent 100%);
    mask-image: radial-gradient(circle 190px at var(--mx) var(--my), #000 0%, transparent 100%);
}

.f-sub {
    margin: 0;
    color: #8aa3b8;
    font: 300 13px / 1 Arial, sans-serif;
    letter-spacing: 0.7em;
    opacity: 0;
    transition: opacity 1.4s ease 2.6s;
}

#finale.on .f-sub {
    opacity: 1;
}

.f-btn {
    margin-top: 48px;
    padding: 14px 38px;
    cursor: pointer;
    color: #cfe8ff;
    background: transparent;
    border: 1px solid rgba(92, 184, 255, 0.45);
    font: 300 12px / 1 Arial, sans-serif;
    letter-spacing: 0.5em;
    opacity: 0;
    transition: opacity 1.2s ease 3.2s, background 0.3s, box-shadow 0.3s;
}

#finale.on .f-btn {
    opacity: 1;
}

.f-btn:hover {
    background: rgba(30, 144, 255, 0.12);
    box-shadow: 0 0 24px rgba(30, 144, 255, 0.5);
}