::-webkit-scrollbar {
    display: none;
}

html,
body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: auto;
}


/* Sunset */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 0 0,
            rgba(255, 200, 0, 0.35),
            rgba(255, 120, 0, 0.25),
            rgba(200, 60, 0, 0.15),
            transparent 100%);
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

body.fantasy::before {
    opacity: 1;
}

.sunset {
    position: absolute;
    top: 73px;
    left: 35px;
    transform: translateY(-50%);
    width: 75px;
    height: 75px;
    background: radial-gradient(circle at 30% 30%, #fff7a1 0%, #ffd966 35%, #ff9900 65%, #ff3300 90%);
    border-radius: 50%;
    box-shadow: 0 0 40px 15px rgba(255, 180, 0, 0.6),
        0 0 80px 30px rgba(255, 100, 0, 0.4);
    z-index: 5;
    animation: sunset-glow 3s infinite alternate;
    opacity: 0;
    visibility: hidden;
}

.sunset.active {
    opacity: 1;
    visibility: visible;
}

@keyframes sunset-glow {
    from {
        transform: translateY(-50%) scale(1);
        opacity: 0.95;
    }

    to {
        transform: translateY(-50%) scale(1.2);
        opacity: 0.8;
    }
}

/* 0 To 9 */

/* Matrix 0 */

.matrix-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20000;
    mix-blend-mode: screen;
}

body.matrix-active {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Floating 1 */

.floating {
    will-change: transform;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Portal 2 */

.portal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.8s ease;
}

.portal-overlay.active {
    backdrop-filter: blur(8px);
}

.portal {
    position: absolute;
    height: 450px;
    width: 450px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.2);
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
    transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        opacity 0.6s ease,
        clip-path 0.9s ease-in-out;
    animation: wobble 3s infinite ease-in-out;
}

.portal.show {
    transform: scale(1);
    opacity: 1;
    clip-path: circle(50% at 50% 50%);
}

.portal.hide {
    transform: scale(0.1);
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
}

.portal-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 77% 80%, #FDFEB4 2.5%, transparent 2.5%),
        radial-gradient(circle at 75% 83%, #FDFEB4 2%, transparent 2%),
        radial-gradient(circle at 79% 83%, #FDFEB4 1%, transparent 1%),
        radial-gradient(circle at 45% 13%, #FFFFD5 1.5%, transparent 1.5%),
        radial-gradient(circle at 42% 13%, #FFFFD5 2%, transparent 2%),
        radial-gradient(circle at 38% 14%, #FFFFD5 1.5%, transparent 1.5%),
        radial-gradient(circle at 53% 51%, transparent 64%, #43A93E 64%),
        radial-gradient(circle at 47% 59%, transparent 64%, #43843E 64%),
        radial-gradient(circle at 47% 60%, transparent 59%, #1A9042 59%),
        radial-gradient(circle at 50% 59%, transparent 55%, #1B863C 55%),
        radial-gradient(circle at 45% 60%, transparent 55%, #399C49 55%),
        radial-gradient(circle at 47% 60%, transparent 46%, #1A9042 46%),
        radial-gradient(circle at 46% 55%, transparent 43%, #75B03B 43%),
        radial-gradient(circle at 36% 55%, transparent 43%, #A9CB48 43%),
        radial-gradient(circle at 50% 60%, transparent 40%, #66BA4F 40%),
        radial-gradient(circle at 50% 53%, transparent 40%, #E5E051 37%),
        radial-gradient(circle at 30% 48%, transparent 40%, #EAF157 37%),
        radial-gradient(circle at 57% 69%, transparent 40%, #EAF157 40%),
        radial-gradient(circle at 40% 88%, transparent 40%, #E9E072 37%),
        radial-gradient(circle at 67% 54%, transparent 40%, #FAEB7B 37%),
        radial-gradient(circle at 49% 35%, transparent 40%, #FFF8C5 37%),
        radial-gradient(circle at 79% 59%, transparent 40%, #FFFE9C 37%),
        radial-gradient(circle at 50% 50%, #FDFEB4 100%, #FDFEB4 100%);
    box-shadow: 0px 0px 40px 10px #448C3F;
    animation: spin 6s linear infinite, swirl 5s ease-in-out infinite alternate;
    z-index: 1;
}

.portal iframe {
    position: relative;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    border: none;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
    z-index: 2;
    background: white;
    pointer-events: auto;
    overflow: auto;
    animation: spin s linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes swirl {
    0% {
        filter: hue-rotate(0deg) blur(0px);
    }

    50% {
        filter: hue-rotate(30deg) blur(2px);
    }

    100% {
        filter: hue-rotate(-30deg) blur(0px);
    }
}

@keyframes wobble {

    0%,
    100% {
        transform: scale(0.98) rotate(0deg);
    }

    25% {
        transform: scale(1.02) rotate(1deg);
    }

    50% {
        transform: scale(1.01) rotate(-1deg);
    }

    75% {
        transform: scale(1.02) rotate(0.5deg);
    }
}

/* Snake 3 */

.rsg-game-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(6px);
}

.rsg-game-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.rsg-game-container {
    background: linear-gradient(#1D1D1D, #111111);
    padding: 20px;
    border-radius: 18px;
    border: 2px solid #17843f;
    box-shadow: 0px 0px 8px 0px #25D36655;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 450px;
    width: 400px;
    max-width: 92vw;
}

.rsg-title {
    font-family: "Orbitron", sans-serif;
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: white;
    text-shadow: 0 0 10px #a4a4a4;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Lalezar';
    background-color: #1A9042;
    border-radius: 10px;
    padding: 3px 15px 0px 15px;
    border: 3px solid #25D366;
    box-shadow: 0 0 18px #25D36666;
}

.rsg-info-bar {
    display: flex;
    justify-content: space-between;
    width: 75%;
    color: #e0e0ff;
    font-size: 1rem;
    margin-bottom: 20px;
    font-family: "Courier New", monospace;
    font-family: 'Lalezar';
}

#rsgGameCanvas {
    background: #0A0A0A;
    border: 3px solid #25D366;
    border-radius: 10px;
    box-shadow: 0 0 18px #25D36666;
}

.rsg-game-over-message {
    color: #ff3300;
    font-size: 1.1rem;
    margin-top: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Lalezar';
}

/* 404 error 4 */

#eg-404-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(8, 8, 10, 0.92), rgba(2, 2, 6, 0.96));
    color: #e6eef4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
}

#eg-404-overlay.active {
    display: flex;
}

.eg-404-card {
    width: min(940px, 92vw);
    max-height: 86vh;
    background: linear-gradient(180deg, rgba(12, 14, 18, 0.85), rgba(6, 8, 12, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 28px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    overflow: hidden;
}

.eg-404-code {
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    color: #ff4d6d;
    text-shadow: 0 8px 30px rgba(255, 77, 109, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-404-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eg-404-title {
    font-size: 20px;
    font-weight: 700;
    color: #f1f7fb;
}

.eg-404-msg {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.45;
}

.eg-404-terminal {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    padding: 12px;
    height: 220px;
    overflow: auto;
    font-size: 13px;
    color: #bfe9c0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.eg-log-line {
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 6px;
    opacity: 0.95;
}

.eg-404-progress {
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.eg-404-progress>.bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #25D366 50%, #17843f 100%);
    transition: width 240ms linear;
    box-shadow: 0 6px 24px rgba(0, 210, 255, 0.08);
}

.eg-404-controls {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.eg-btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: #eafcff;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
}

.eg-btn.ghost {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.eg-404-footer {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes eg-flicker {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    10% {
        opacity: 0.9;
        transform: translateX(-1px);
    }

    20% {
        opacity: 1;
        transform: translateX(0);
    }

    30% {
        opacity: 0.85;
        transform: translateX(2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.eg-404-code.glitch {
    animation: eg-flicker 1.1s infinite;
}

@media (max-width:760px) {
    .eg-404-card {
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 12px;
    }

    .eg-404-code {
        font-size: 72px;
        padding: 8px 0;
    }

    .eg-404-terminal {
        height: 160px;
    }
}

/* flip coin 5 */

.coin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    backdrop-filter: blur(6px);
    flex-direction: column;
}

.coin {
    width: 150px;
    height: 150px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.3),
        inset 0 0 10px rgba(0, 0, 0, 0.6),
        0 8px 25px rgba(0, 0, 0, 0.6);
}

.coin .face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.coin .heads {
    background: radial-gradient(circle at 30% 30%, #ffe680, #c4a300);
}

.coin .tails {
    background: radial-gradient(circle at 70% 70%, #ddd, #666);
    transform: rotateY(180deg);
}

.coin svg {
    width: 60%;
    height: 60%;
    fill: #222;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}

@keyframes coin-flip {
    0% {
        transform: rotateY(0) translateY(0);
    }
    30% {
        transform: rotateY(720deg) translateY(-200px);
    }
    60% {
        transform: rotateY(1440deg) translateY(-80px);
    }
    100% {
        transform: rotateY(2160deg) translateY(0);
    }
}

@keyframes coin-bounce {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-15px) scale(1.05); }
    60% { transform: translateY(0) scale(0.98); }
    80% { transform: translateY(-6px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

.coin.bounce {
    animation: coin-bounce 0.6s ease-out;
}

.flash {
    position: fixed;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 100000;
    animation: flash-effect 0.3s ease-out;
}

@keyframes flash-effect {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

.coin-result {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 10px black;
    margin-bottom: 20px;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.coin-result.show {
    opacity: 1;
    transform: translateY(0);
}


/* Flappy Bird 6 */

.flappy-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(6px);
}

.flappy-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.flappy-container {
    background: linear-gradient(#1D1D1D, #111111);
    padding: 20px;
    border-radius: 18px;
    border: 2px solid #17843f;
    box-shadow: 0px 0px 8px 0px #25D36655;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 450px;
    width: 400px;
    max-width: 92vw;
}

.flappy-title {
    font-family: 'Lalezar', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: white;
    text-shadow: 0 0 10px #a4a4a4;
    margin-bottom: 10px;
    margin-top: 10px;
    background-color: #1A9042;
    border-radius: 10px;
    padding: 3px 15px 0px 15px;
    border: 3px solid #25D366;
    box-shadow: 0 0 18px #25D36666;
}

.flappy-info {
    display: flex;
    justify-content: space-between;
    width: 75%;
    color: #e0e0ff;
    font-size: 1rem;
    margin-bottom: 20px;
    font-family: 'Lalezar', sans-serif;
}

#flappyCanvas {
    background: #0A0A0A;
    border: 3px solid #25D366;
    border-radius: 10px;
    box-shadow: 0 0 18px #25D36666;
}

.flappy-message {
    color: #ff3300;
    font-size: 1.1rem;
    margin-top: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Lalezar', sans-serif;
}

/* blue screen 7 */

#bsodOverlay {
    position: fixed;
    inset: 0;
    background: #0182D9;
    color: #fff;
    font-family: "Segoe UI", sans-serif;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20vh 10vw;
    z-index: 99999;
    line-height: 1.5;
}

#bsodOverlay.active {
    display: flex;
}

.bsod-face {
    font-size: 18vh;
    line-height: 1;
    margin-bottom: 4vh;
}

.bsod-text {
    font-size: 2.6vh;
    max-width: 65vw;
    margin-bottom: 3vh;
}

.bsod-progress {
    font-size: 2.3vh;
    margin-bottom: 6vh;
}

.bsod-bottom {
    display: flex;
    align-items: center;
    gap: 3vh;
}

.bsod-qr {
    width: 10vh;
    height: 10vh;
    background: #fff;
    padding: 0.8vh;
    border-radius: 0.3vh;
    flex-shrink: 0;
}

.bsod-info {
    font-size: 1.8vh;
    max-width: 50vw;
    line-height: 1.6;
}

/* 8 old screen */

.retro-body {
    filter: grayscale(100%) contrast(1.2);
    transition: filter 1s ease;
    overflow: hidden;
}

.retro-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    background: transparent;
    transform-origin: center;
    transition: opacity 1s ease;
}

.retro-overlay.active {
    opacity: 1;
}

.retro-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
    background-size: cover;
    opacity: 0.15;
    mix-blend-mode: screen;
    animation: flicker 1s infinite;
    z-index: 1;
}

.crt-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.03) 0px,
            rgba(255, 255, 255, 0.03) 2px,
            transparent 3px,
            transparent 4px);
    pointer-events: none;
    z-index: 2;
}

.vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 3;
}

.retro-overlay.power-on {
    animation: crtPowerOn 1s forwards;
    opacity: 1;
}

@keyframes crtPowerOn {
    0% {
        transform: scaleY(0) scaleX(0);
        background: black;
    }

    50% {
        transform: scaleY(0.05) scaleX(1);
        background: white;
    }

    100% {
        transform: scaleY(1) scaleX(1);
        background: black;
    }
}

.retro-overlay.shutdown {
    animation: crtCollapse 1s forwards;
}

@keyframes crtCollapse {
    0% {
        transform: scaleY(1) scaleX(1);
        opacity: 1;
        background: black;
    }

    50% {
        transform: scaleY(0.05) scaleX(1);
        background: white;
    }

    100% {
        transform: scaleY(0) scaleX(0);
        background: black;
        opacity: 0;
    }
}

@keyframes flicker {
    0% {
        opacity: 0.08;
    }

    50% {
        opacity: 0.15;
    }

    100% {
        opacity: 0.08;
    }
}

/* terminal 9 */

#ci_overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483646;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;
}

#ci_overlay.active {
    display: flex;
}

#ci_terminal {
    width: min(920px, 92vw);
    max-height: 78vh;
    background: linear-gradient(180deg, #041016 0%, #00080a 100%);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(2, 6, 10, 0.6);
    color: #b8ffb8;
    font-family: "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
    border: 1px solid rgba(120, 255, 120, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(6vh);
    animation: ciPop 220ms cubic-bezier(.2, .9, .3, 1);
}

/* small pop */
@keyframes ciPop {
    from {
        transform: translateY(10vh) scale(0.99);
        opacity: 0;
    }

    to {
        transform: translateY(6vh) scale(1);
        opacity: 1;
    }
}

#ci_header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.ci-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.ci-dot.red {
    background: #ff5f56;
}

.ci-dot.yellow {
    background: #ffbd2e;
}

.ci-dot.green {
    background: #27c93f;
}

#ci_title {
    color: rgba(184, 255, 184, 0.95);
    font-weight: 600;
    font-size: 0.95rem;
}

#ci_body {
    padding: 14px;
    overflow: auto;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #b8ffb8;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.005));
}

.ci-line {
    white-space: pre-wrap;
    word-break: break-word;
}

.ci-cursor {
    display: inline-block;
    width: 10px;
    height: 1.02em;
    background: #b8ffb8;
    margin-left: 3px;
    animation: blink 900ms steps(2, start) infinite;
    vertical-align: text-bottom;
}

@keyframes blink {

    0%,
    40% {
        opacity: 1
    }

    60%,
    100% {
        opacity: 0
    }
}

.ci-hex {
    color: #8be9b6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
    font-size: 0.9rem;
}

#ci_progress_wrap {
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.03);
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#ci_progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2ff18d, #00c29a);
    transition: width 180ms linear;
    box-shadow: 0 0 8px rgba(0, 200, 150, 0.18);
}

#ci_footer {
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(184, 255, 184, 0.85);
}

#ci_close_hint {
    opacity: 0.8;
}

.ci-glitch {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    background-image: linear-gradient(transparent 0%, rgba(0, 255, 180, 0.02) 1px, transparent 2px);
    opacity: 0.06;
}

@media (max-width:720px) {
    #ci_terminal {
        width: 94vw;
        max-height: 86vh;
        transform: translateY(4vh);
        font-size: 0.9rem;
    }

    .ci-cursor {
        width: 7px;
    }
}