@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
    font-family: 'BD Plakatbau';
    src: url('/bdplakatt.woff') format('woff');
    font-display: swap;
}

body,
html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

canvas {
    width: 100%;
    height: 100%;
}

.name-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    column-gap: -10px;
    row-gap: -10px;
    z-index: 10;
    pointer-events: none;
}

.letter-canvas {
    width: 90px;
    height: 90px;
    mix-blend-mode: difference;
    transition: transform 0.25s ease, filter 0.25s ease;
    pointer-events: auto;
}

.letter-canvas:hover {
    transform: translateY(-6px) scale(1.05);
    filter: drop-shadow(0 0 10px #ff0100);
}

.home-icon {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 10000;
    display: inline-block;
}

.home-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
    transition: transform 0.2s ease;
    cursor: pointer;
}

.home-icon img:hover {
    transform: scale(1.1);
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    /* match your theme */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.4s ease;
}

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

/* view counter */
.view-tracker {
    position: fixed;
    top: 15px;
    right: 15px;
    font-size: 14px;
    color: white;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 14px;
    border-radius: 6px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Press Start 2P', monospace;
}

/* Blinking animation */
@keyframes blink {

    0%,
    95%,
    100% {
        transform: scale(1);
        /* eye open */
    }

    96%,
    97% {
        transform: scale(1, 0);
        /* eye closed briefly */
    }
}

/* Eye container */
.blink {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    animation: blink 19s ease-in-out infinite;
    line-height: 0;
}

/* Eye shape */
.eye {
    transform: rotate(45deg) translateY(-0.3em);
    width: 1.3em;
    height: 1.3em;
    background: white;
    border-radius: 100% 0;
    position: relative;
}

/* Eye iris and shine */
.eye::before,
.eye::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    border-radius: 100%;
}

.eye::before {
    height: 0.6em;
    width: 0.6em;
    background: black;
    margin-top: -0.3em;
    margin-left: -0.3em;
}

.eye::after {
    height: 0.3em;
    width: 0.3em;
    background: white;
    margin-top: -0.15em;
    margin-left: -0.15em;
}