@font-face {
    font-family: 'MinecraftTitle';
    src: url('../fonts/craft-text.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.lilycraft-logo {
    display: inline-block;
    padding: 10px 28px 14px;
    color: #f9f4d2;
    font-family: 'MinecraftBitmap', 'Courier New', monospace;
    font-size: clamp(46px, 9vw, 92px);
    letter-spacing: 0;
    text-shadow:
        4px 4px 0 #3b2415,
        7px 7px 0 rgba(0, 0, 0, 0.42),
        0 0 18px rgba(255, 226, 112, 0.85);
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.22));
}

.lilycraft-back {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px 10px;
    border: 3px solid #090909;
    border-radius: 0;
    background:
        linear-gradient(180deg, #8b8b8b 0%, #6b6b6b 48%, #4f4f4f 49%, #777 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 4px, transparent 4px 12px);
    color: #ffffff;
    font-family: 'MinecraftTitle', 'Minecraft', 'VT323', monospace !important;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #222, 3px 3px 0 #000;
    box-shadow:
        inset 3px 3px 0 rgba(255, 255, 255, 0.42),
        inset -3px -3px 0 rgba(0, 0, 0, 0.5),
        4px 4px 0 rgba(0, 0, 0, 0.56),
        0 0 18px rgba(112, 255, 112, 0.24);
    transform: translateY(0);
    transition: transform 120ms ease, opacity 180ms ease, filter 180ms ease, background 160ms ease;
}

.lilycraft-back:hover {
    transform: translate(-1px, -1px);
    filter: brightness(1.12) saturate(1.08);
    background:
        linear-gradient(180deg, #76b45c 0%, #4d8d3f 48%, #2f662c 49%, #57944a 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 4px, transparent 4px 12px);
}

.lilycraft-back:active {
    transform: translate(3px, 3px);
    box-shadow:
        inset 3px 3px 0 rgba(0, 0, 0, 0.45),
        inset -3px -3px 0 rgba(255, 255, 255, 0.2),
        1px 1px 0 rgba(0, 0, 0, 0.56);
}

.lilycraft-playing .lilycraft-back {
    opacity: 0;
    pointer-events: none;
}

.lilycraft-mode-note {
    width: min(420px, 82vw);
    margin: 12px auto 0;
    padding: 10px 14px;
    border: 2px solid rgba(0, 0, 0, 0.62);
    background: rgba(20, 12, 8, 0.62);
    color: #f7dfaa;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    text-shadow: 2px 2px 0 #140c08;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.18),
        inset -2px -2px 0 rgba(0, 0, 0, 0.32);
}

@media (max-width: 700px) {
    .lilycraft-logo {
        font-size: clamp(34px, 15vw, 58px);
        padding-inline: 12px;
    }

    .lilycraft-back {
        top: 10px;
        left: 10px;
        padding: 8px 12px;
        font-size: 13px;
    }
}