@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/vazirmatn-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
        U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
        U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/vazirmatn-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/vazirmatn-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --red: #d60000;
    --red-dark: #9e0000;
    --blue: #2a2977;
    --blue-dark: #16163f;
    --gold: #ffd24a;
}

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

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--red);
    color: #fff;
    font-family: Vazirmatn, "IRANSans", "Segoe UI", Tahoma, sans-serif;
    text-align: center;
    transition: background-color .45s ease;
    overscroll-behavior: none;
}

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.backdrop--blue {
    opacity: 0;
    background: radial-gradient(circle at 50% 30%, #3b39a8, var(--blue) 45%, var(--blue-dark));
    transition: opacity .2s linear;
}

.backdrop--stripes {
    background: repeating-linear-gradient(115deg,
        rgba(255, 255, 255, .05) 0 22px,
        rgba(255, 255, 255, 0) 22px 62px);
    animation: slide 18s linear infinite;
}

.backdrop--glow {
    inset: -30%;
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .20), transparent 55%);
}

@keyframes slide {
    to { background-position: 400px 0; }
}

#stage {
    position: relative;
    z-index: 2;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}

section {
    width: 100%;
    max-width: 760px;
}

.crest {
    width: min(34vw, 170px);
    height: auto;
    cursor: pointer;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .35));
    animation: breathe 3.4s ease-in-out infinite;
    transition: transform 1.1s cubic-bezier(.5, -0.4, .75, .4), opacity .5s;
}

@keyframes breathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.06) rotate(-2deg); }
}

h1 {
    margin: 14px 0 6px;
    font-weight: 900;
    font-size: clamp(38px, 11vw, 96px);
    line-height: 1.05;
    letter-spacing: -.5px;
    text-shadow: 0 6px 26px rgba(0, 0, 0, .35);
}

.sub {
    margin: 0 0 22px;
    font-size: clamp(12px, 3.4vw, 17px);
    font-weight: 400;
    opacity: .82;
}

.banner {
    width: 100%;
    max-width: 620px;
    border: 3px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: transform .3s ease;
}

.banner:hover {
    transform: translateY(-4px) rotate(.5deg);
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px auto 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    font-size: clamp(11px, 3vw, 14px);
    font-variant-numeric: tabular-nums;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: ping 1.6s infinite;
}

@keyframes ping {
    70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.cta {
    display: block;
    margin: 24px auto 0;
    padding: 14px 30px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--red-dark);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(15px, 4vw, 20px);
    cursor: pointer;
    box-shadow: 0 10px 0 rgba(0, 0, 0, .22);
    animation: bob 1.5s ease-in-out infinite;
}

.cta:active {
    transform: translateY(6px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .22);
}

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

#wipe {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(circle at 50% 30%, #3b39a8, var(--blue) 45%, var(--blue-dark));
    clip-path: circle(0px at 50% 50%);
    transition: clip-path .85s cubic-bezier(.65, 0, .35, 1);
}

.shake {
    animation: shake .5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {
    10%, 90%      { transform: translate(-3px, 1px) rotate(-.4deg); }
    20%, 80%      { transform: translate(5px, -2px) rotate(.5deg); }
    30%, 50%, 70% { transform: translate(-9px, 2px) rotate(-.8deg); }
    40%, 60%      { transform: translate(9px, -1px) rotate(.8deg); }
}

.fall {
    transform: translateY(130vh) rotate(760deg) scale(.5) !important;
    opacity: 0;
    animation: none !important;
}

#show {
    display: none;
}

#show.on {
    display: block;
    animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes pop {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: scale(1); }
}

.crown {
    display: inline-block;
    font-size: clamp(56px, 16vw, 130px);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .45));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-14px) rotate(4deg); }
}

.dm-title {
    font-size: clamp(40px, 12.5vw, 130px);
    background: linear-gradient(100deg, #fff 20%, var(--gold) 42%, #fff 62%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    animation: shine 3.2s linear infinite;
}

@keyframes shine {
    to { background-position: -250% 0; }
}

.taunt {
    min-height: 2.6em;
    max-width: 28ch;
    margin: 4px auto 22px;
    font-size: clamp(15px, 4.2vw, 23px);
    font-weight: 700;
    line-height: 1.6;
    opacity: .95;
}

.btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.btn {
    max-width: 100%;
    padding: 12px 20px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(13px, 3.6vw, 16px);
    cursor: pointer;
    transition: transform .15s, background .2s;
}

.btn:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(1px);
}

.btn--red {
    background: var(--red);
    border-color: rgba(255, 255, 255, .5);
}

.score {
    font-size: clamp(12px, 3.2vw, 15px);
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

#cfx {
    position: fixed;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

.pop-emoji {
    position: fixed;
    z-index: 9;
    font-size: 30px;
    pointer-events: none;
    user-select: none;
    animation: fly 1.1s ease-out forwards;
}

@keyframes fly {
    to {
        transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.4);
        opacity: 0;
    }
}

#toast {
    position: fixed;
    z-index: 12;
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
    transition: opacity .25s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}

#toast.on {
    opacity: 1;
    transform: translate(-50%, 0);
}

#sound {
    position: fixed;
    z-index: 12;
    top: calc(12px + env(safe-area-inset-top));
    left: 12px;
    display: none;
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

#sound.on {
    display: block;
}

footer {
    position: relative;
    z-index: 2;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom));
    font-size: 12px;
    opacity: .55;
}

@media (max-width: 560px) {
    .btns {
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }

    .btn {
        width: min(310px, 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .12s !important;
    }
}