html, body {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 12px;
    /*font-size: calc(0.035 * var(--mobileWrapperWidth));*/
    overflow: hidden;
    --mainMenu: 175px;
    --lineHeight: 14px;
    line-height: var(--lineHeight);

    /* Font rendering optimizations */
    -webkit-font-smoothing: antialiased; /* macOS Safari/Chrome: smoother thin text */
    -moz-osx-font-smoothing: grayscale;  /* Firefox on macOS */
    text-rendering: geometricPrecision;  /* better kerning and ligatures */
}

* {
    box-sizing: border-box;
    --margin: 7px;     
}

audio {
    position: absolute;
    z-index: 100;
    opacity: 0;
    pointer-events: none !important;
    display: none;
}

@font-face {
    font-family: "JJannon";
    src: url(fonts/JJannon-Book.woff2);
}

@font-face {
    font-family: "Mono";
    src: url(fonts/NeueMontrealMono/web/PPNeueMontrealMono-Regular.woff2);
    font-feature-settings: "case";
}

.eye {
    transform-origin: center;
    position: absolute;
    width: 2.8vw;
    height:2.8vw;
    object-fit: cover;
    
}

.eye.left {
    bottom:43vw;
    left: 53.5vw;
}

.eye.right {
    bottom:43.3vw;
    left: 61.4vw;
}


#mobileWrapper {
    width: 100vw;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    will-change: transform;
    transform: translate3d(0,0,0);

    font-family: "Mono";
}

#bgImageWrapper {
    position: absolute;
    z-index: -100;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: blue;
}

#topImage, #bottomImage, .bustImage {
    width: calc(100% + 14px);
    height: auto;
    position: absolute;
    left: -7px;
}

#topImage, .bustImage {
    bottom: var(--mainMenu);
}

#bottomImage {
    top: calc(100% - var(--mainMenu))
}

.bustImage {
    opacity: 0;
}

.bustImage.active {
    opacity: 1;
}

#jensWrapper {
    background-color: blue;
    display: none;
    pointer-events: none;
    z-index: 1000;
    width: 100vw;
    height: 100dvh;

}

#jens {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
}

.user {
    position: absolute;
    width: 100%;
    height: var(--lineHeight);
    padding: var(--margin);
    z-index: 6;
}

#menuWrapper {
    z-index: 9 ;
    overflow: hidden;
    position: absolute;
    width: calc(100% - (2 * var(--margin)));
    height: calc(100% - (2 * var(--margin)));
    bottom: var(--margin);
    left: var(--margin);
    background-color: lightgray;
    padding: var(--margin);
    border-radius: var(--margin);
    background-image: url(images/marble.jpg);
    background-repeat: repeat-y;
    background-size: 100% auto;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    transition: height 1s ease-in-out;
}


.shadowOverlay { /* shadowOverlay für #menuWrapper*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* damit es nicht klickt */
    box-shadow: 
        inset -2px 2px 2px rgba(255,255,255,0.5),
        inset 2px -2px 2px rgba(0,0,0,0.5);
    border-radius: var(--margin);
    z-index: 20; /* über allen Kindern */
}

#mainMenu, #subMenu {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
}

#subMenu {
    opacity: 0;
    z-index: 10;
    grid-template-rows: var(--lineHeight) 1fr var(--lineHeight) 1fr var(--lineHeight);
}

#menuWrapper.active {
    height: var(--mainMenu);
}

#menuWrapper.active #mainMenu {
    pointer-events: none;
}

#mainMenu {
    z-index: 11;
    grid-template-rows: var(--lineHeight) 1fr var(--lineHeight) 1fr var(--lineHeight) 1fr var(--lineHeight) 1fr var(--lineHeight) 0fr 0px;
    transition: grid-template-rows 1s ease-in-out;
}

/* ELON ELON ELON  */ 
#menuWrapper.elon #mainMenu {grid-template-rows: var(--lineHeight) 1fr var(--lineHeight) 1fr var(--lineHeight) 0fr 0px 0fr 0px 0fr 0px;}
#menuWrapper.elon #mainMenu > div:not(.elon) {display: none;}

/* SAM SAM SAM  */ 
#menuWrapper.sam #mainMenu {grid-template-rows: 0px 0fr var(--lineHeight) 1fr var(--lineHeight) 1fr var(--lineHeight) 0fr 0px 0fr 0px;}
#menuWrapper.sam #mainMenu > div:not(.sam) {display: none;}

/* MARK MARK MARK  */ 
#menuWrapper.mark #mainMenu {grid-template-rows: 0px 0fr 0px 0fr var(--lineHeight) 1fr var(--lineHeight) 1fr var(--lineHeight) 0fr 0px;}
#menuWrapper.mark #mainMenu > div:not(.mark) {display: none;}

/* JEFF JEFF JEFF  */ 
#menuWrapper.jeff #mainMenu {grid-template-rows: 0px 0fr 0px 0fr 0px 0fr var(--lineHeight) 1fr var(--lineHeight) 1fr var(--lineHeight);}
#menuWrapper.jeff #mainMenu > div:not(.jeff) {display: none;}




#menuWrapper.active #subMenu {
    transition: opacity 1s ease-in-out;
    transition-delay: 1s;
    opacity: 1;
}

.white, .glow {
    color: white;

}

.white {
    text-align: justify;
    text-align-last: justify;
    text-shadow: 
        -1px 1px 1px rgba(0,0,0,0.5),
        1px -1px 1px rgba(255,255,255,0.5);
}

.glow {
    text-shadow: 
        0px 0px 2px white,
        0px 0px 5px white,
        0px 0px 15px blue,
        0px 0px 30px blue
    ;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes shimmer {
    0% {background-position-y: 0%;}
    75% {background-position-y: 100%;}
    100% {background-position-y: 0%;}
}

.gold {
    cursor: pointer;
    letter-spacing: 1px;
    font-family: "JJannon", serif;
    text-transform: uppercase;
    font-feature-settings: "case";

    font-size: 24px;
    line-height: 24px;

    background: linear-gradient(to bottom, #cfc09f 27%, #ffecb3 40%, #3a2c0f 100%);
    /*background: linear-gradient(to bottom, #C6B185 27%, #EFE2D1 40%, #283D49 85%);*/
    background-size: 100% 115%;
    animation: shimmer 5s ease-in-out infinite;
    
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shadow {
    text-shadow: 
        -1px 1px 1px rgba(0,0,0,0.75), 
        1px -1px 1px rgba(255,255,255,0.75);
}

#lyrics {
    text-transform: uppercase;
    font-feature-settings: "case";
    font-family: "JJannon", serif;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    text-align-last: center;
    transition: opacity 250ms ease-in-out;
    opacity: 1; /* Standardzustand */
    /*font-size: calc(0.052 * var(--mobileWrapperWidth));
    line-height: calc(0.052 * var(--mobileWrapperWidth));*/

}

.lyrics-hidden {
    opacity: 0 !important;
}

#progressBar {
    position: absolute;
    background: linear-gradient(to right, red 95%, rgba(0,0,0,0) 100%);
    /*background-color: red;*/
    height: 100%;
    width: 105%;
    transform: translateX(-100%);
}

.particles .particle {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: center center;
  z-index: 5;
  /*border: 1px solid white;*/

}
.spawn, .spawn2 {
    background-color: aqua;
    position: absolute;
    width: 7px;
    height: 7px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

/* --- Respect --- */
.respect {
    --coinSize: 70px;
    width: 100%;
    height: var(--coinSize);
    position: absolute;
    top: var(--coinSize);
    display: grid;
    grid-template-columns: 1fr var(--coinSize) 1fr;
    grid-row: var(--coinSize);
    gap: var(--margin)
}

.respect > div:not(.coinWrapper) {
    grid-row: 1 / span 1;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

/* --- 3D Coin --- */
.coinWrapper {
    width: 100%;
    height: 100%;
    perspective: 1200px;
}

.coin {
    will-change: transform;
    transform: translateZ(0); /* erzwingt eigenen GPU-Layer */
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    border-radius: 100%;
    overflow: visible;
    animation: spinPause 5s infinite ease-in-out;
}

@keyframes spinPause {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(360deg); } /* Drehung fertig nach 20% der Zeit */
    100% { transform: rotateY(360deg); } /* Pause für den Rest der Zeit */
}

.face {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background: rgba(0, 0, 255, 0.1);*/
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid white;
    box-shadow:
        0px 0px 2px white,
        0px 0px 5px white,
        inset 0px 0px 2px white,
        inset 0px 0px 5px white;
    /* Rückseite verstecken (optional, bei Glas oft schöner wenn sichtbar) Hier lassen wir es sichtbar für den Glas-Look, aber transformieren die Rückseite */
    backface-visibility: visible; 
}

.front {transform: translateZ(0.1px);}
.back {transform: rotateY(180deg) translateZ(0.1px);}


.fingerprint {
    position: absolute;
    width: 85%;
    height: 85%;
}

.fingerprint.blur {
        filter: blur(1px);
}

#dogeCoin {
    color: white;
    font-size: 45px;
    /*font-family: "JJannon", serif;*/
    font-family: sans-serif;
    text-shadow: 
        0px 0px 2px white,
        0px 0px 5px white,
    ;
}


/*  PLAY PAUSE CLOSE */

#pauseBtn, #playBtn, #closeBtn {
    cursor: pointer;
}

.frame {
    padding-left: 2px;
    padding-right: 2px;
    border: 1px solid transparent;

}

.frame.active {
    border: 1px solid white;
    box-shadow: 
        -1px 1px 1px rgba(0,0,0,0.5), 
        1px -1px 1px rgba(255,255,255,0.5),
        inset -1px 1px 1px rgba(0,0,0,0.5), 
        inset 1px -1px 1px rgba(255,255,255,0.5);
}
/*

.frame.active .init {
    font-feature-settings: "init" 1;
}
.frame.active .medi {
    font-feature-settings: "medi" 1;
}
.frame.active .fina {
    font-feature-settings: "fina" 1;
}
*/
@media (min-width: 500px) {
    #mobileWrapper {
        transform-origin: bottom left;
        /*transform: rotate(19.2deg);*/
        position: absolute;
        bottom: 19.3vw;
        left: 17.1vw;
        opacity: 0.9;

        width: 390px;
        height: 800px;
        z-index: 1000;
        display: block;
        backface-visibility: hidden;
    }

    #jensWrapper {
        display: block;
        pointer-events: all;
    }

    .coin, .gold {
        animation: none;
    }

    #lyrics {
        transition: none;
    }
}