body {position: fixed;inset: 0;margin: 0;overflow: hidden;background: #080809;cursor: pointer;font-family: Consolas, monospace;}

h1, h3, p {position: absolute;left: 50%;transition: top 1.6s cubic-bezier(.22,1,.36,1),bottom 1.6s cubic-bezier(.22,1,.36,1),transform 1.6s cubic-bezier(.22,1,.36,1),opacity 1.6s,color .4s,text-shadow .4s;text-align: center;}

h1 {top: 45%;transform: translate(-50%, -50%);color: #D0D0E8;font-size: 48px;}

h3 {top: 53%;transform: translate(-50%, -50%);color: #D0D0E8;font-size: 22px;}

p {top: 61%;transform: translate(-50%, -50%);color: #8282A6;max-width: 800px;line-height: 1.6;}

h1:hover, h3:hover {color: #ffffff;text-shadow: 0 0 20px #A0A0FF,0 0 40px #8080FF;}

p:hover {color: #B0B0D8;text-shadow: 0 0 15px #9090C0;}

body.active h1 {top: 35px;transform: translate(-50%,0);font-size: 42px;}

body.active h3 {top: 53%;transform: translate(-50%,-50%);}

body.active p {top: auto;bottom: 25px;transform: translate(-50%,0);color: #A0A0C8;}

.modal {
    position: fixed;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    opacity: 0;

    width: min(88vw, 460px);
    max-height: 80vh;
    padding: 35px 20px 25px;

    background: #0A0A0C;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid #1A1A24;
    border-radius: 14px;

    box-shadow:
        0 0 40px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.02);

    color: #D0D0E8;
    text-align: center;

    pointer-events: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    position: relative;
    overflow: visible;

    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(.22,1,.36,1);
}

.modal-character {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: clamp(220px, 70%, 360px);
    transform: translate(-35%, 29%);
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
}

.modal-dance {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: clamp(90px, 30%, 140px);
    transform: translate(-165%, 10%);
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
}

.modal img:not(.modal-character):not(.modal-dance) {
    max-width: 95%;
    height: auto;
    max-height: 25vh;
    object-fit: contain;
    border-radius: 8px;
    margin: 4px 0;
    z-index: 1;
}

.modal h2 {
    position: relative;
    margin: 0;
    font-size: clamp(22px, 5vw, 28px);
    z-index: 2;
}

body .modal p,
body.active .modal p {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    
    margin: 0;
    color: #9B9BB5;
    line-height: 1.4;
    font-size: clamp(14px, 3.5vw, 16px);
    z-index: 2;
}

.modal button {
    position: relative;
    padding: 12px 28px;
    border: 1px solid #323241;
    border-radius: 14px;
    background: #1A1A24;
    color: white;
    cursor: pointer;
    transition: .2s;
    font-family: inherit;
    font-size: 15px;
    box-shadow:
        0 0 40px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.02);
    width: min(100%, 260px);
    z-index: 2;
}

.modal button:hover {
    background: #323241;
}

.modal.show {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}