@font-face {
    font-family: 'Canarina';
    src: url('font/Canarina-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
#level-six-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    display: none;
    opacity: 0;
}
#level-six-text-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}   
#level-six-text-container canvas {
    width: 100% !important;
    height: 100% !important;
}
#level-six-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e8e3dc;
    z-index: 1;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    --lvl6-ink:        rgba(78, 78, 86, 0.95);
    --lvl6-ink-strong: rgba(54, 54, 62, 0.97);
    --lvl6-ink-soft:   rgba(108, 108, 118, 0.62);
    --lvl6-bg-fill:    rgba(135, 135, 145, 0.20);
    --lvl6-bg-fill-2:  rgba(115, 115, 125, 0.15);
    --lvl6-glow-text:
        0 0 10px rgba(130, 130, 140, 0.38),
        0 0 22px rgba(75, 75, 88, 0.18);
    --lvl6-glow-box:
        0 0 26px rgba(120, 120, 132, 0.22),
        inset 0 0 22px rgba(195, 195, 205, 0.10);
    --lvl6-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.32  0 0 0 0 0.36  0 0 0 0.26 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
#level-six-container canvas { 
    display: block; 
}
#level-six-container .password-container {
    position: absolute;
    bottom: 70px;
    width: 100%;
    text-align: center;
    z-index: 101;
}
#level-six-container #lvl6CodeField {
    padding: 15px;
    width: 300px;
    height: 30px;
    background:
        var(--lvl6-grain) repeat,
        linear-gradient(180deg, var(--lvl6-bg-fill), var(--lvl6-bg-fill-2));
    background-size: 180px 180px, auto;
    background-blend-mode: overlay, normal;
    color: var(--lvl6-ink-strong);
    border: 2px solid var(--lvl6-ink-soft);
    border-radius: 8px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    text-align: center;
    cursor: cell;
    box-shadow:
        var(--lvl6-glow-box),
        inset 0 0 12px rgba(225, 220, 240, 0.12);
    text-shadow: 0 0 8px rgba(180, 168, 205, 0.30);
}
#level-six-container #lvl6CodeField:focus {
    outline: none;
    border-color: var(--lvl6-ink);
    background:
        var(--lvl6-grain) repeat,
        linear-gradient(180deg, rgba(150, 150, 160, 0.24), rgba(125, 125, 138, 0.18));
    background-size: 180px 180px, auto;
    background-blend-mode: overlay, normal;
    box-shadow:
        0 0 18px rgba(130, 130, 142, 0.30),
        0 0 30px rgba(85, 85, 100, 0.22),
        inset 0 0 14px rgba(200, 200, 210, 0.14);
}
#level-six-container .cipher-text {
    position: absolute;
    bottom: 142px;
    width: 100%;
    text-align: center;
    z-index: 100;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 50px;
    color: var(--lvl6-ink);
    font-style: italic;
    letter-spacing: 4px;
    text-shadow: var(--lvl6-glow-text);
    transition: all 0.5s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#level-six-container .cipher-text:hover,
#level-six-container .cipher-text.active {
    bottom: 78px;
    opacity: 0.7;
    transform: scale(0.85);
    z-index: 99;
}
#level-six-container #lvl6CodeField::placeholder {
    color: rgba(85, 85, 95, 0.60);
    font-style: normal;
    font-size: 24px;
    text-align: center;
}
#level-six-container .level-box {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background:
        var(--lvl6-grain) repeat,
        linear-gradient(180deg, var(--lvl6-bg-fill), var(--lvl6-bg-fill-2));
    background-size: 180px 180px, auto;
    background-blend-mode: overlay, normal;
    border: 8px solid var(--lvl6-ink-soft);
    padding: 0px 35px;
    color: var(--lvl6-ink-strong);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: 2em;
    text-shadow: var(--lvl6-glow-text);
    box-shadow: var(--lvl6-glow-box);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 800;
    letter-spacing: 3px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#level-six-container .hint-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px;
    bottom: 6px;
    color: var(--lvl6-ink);
    font-style: italic;
    letter-spacing: 4px;
    text-shadow: var(--lvl6-glow-text);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 102;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#level-six-container .hint-text[style*="display: block"] {
    opacity: 1;
}
#level-six-container .error-shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}
@keyframes glowPulse {
    from {
        text-shadow:
            0 0 14px rgba(255, 255, 255, 0.85),
            0 0 28px rgba(180, 140, 230, 0.4);
    }
    to {
        text-shadow:
            0 0 18px rgba(255, 255, 255, 0.92),
            0 0 34px rgba(180, 140, 230, 0.45);
    }
}
@keyframes level-box-glow {
    0%, 100% { 
        border-color: #e0bbdd;
        text-shadow: 0 0 5px #ba93e9;
        box-shadow: 
            0 0 30px rgba(221, 140, 214, 0.3),
            0 0 60px rgba(214, 134, 208, 0.2);
    }
    50% { 
        border-color: #9f67e2;
        text-shadow: 
            0 0 5px #9f67e2,
            0 0 15px #9f67e2;
        box-shadow: 
            0 0 30px rgba(221, 101, 211, 0.3),
            0 0 60px rgba(221, 101, 211, 0.2);
    }
}
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
#level-six-container .password-container,
#level-six-container .cipher-text,
#level-six-container .hint-text,
#level-six-container .level-box {
    transition: all 0.5s ease;
}
#level-six-container .hint-text,
#level-six-container .cipher-text {
    transform-origin: center center;
    transition: all 0.8s ease;
}
#lvl6CodeField {
    transition: all 0.3s ease;
    cursor: cell;
}
#lvl6-grain-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    transition: opacity 0.5s ease;
}
#lvl6-orb-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
#level-six-container .audio-btn,
.audio-popup-backdrop.theme-6 .audio-popup {
    --ac-color: rgba(54, 54, 62, 0.97);
    --ac-bg: rgba(135, 135, 145, 0.20);
    --ac-border-w: 8px;
    --ac-border-style: solid;
    --ac-radius: 50%;
    --ac-glow:
        0 0 26px rgba(120, 120, 132, 0.22),
        inset 0 0 22px rgba(195, 195, 205, 0.10);
    --ac-font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --ac-symbols: '◐ ◓ ◑ ◒';
}
#level-six-container .audio-btn {
    border-color: rgba(108, 108, 118, 0.62);
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.32  0 0 0 0 0.36  0 0 0 0.26 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") repeat,
        linear-gradient(180deg, rgba(135, 135, 145, 0.20), rgba(115, 115, 125, 0.15));
    background-size: 180px 180px, auto;
    background-blend-mode: overlay, normal;
    text-shadow:
        0 0 10px rgba(130, 130, 140, 0.42),
        0 0 22px rgba(75, 75, 88, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.95;
}
.audio-popup-backdrop.theme-6 .audio-popup {
    --ac-radius: 24px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.32  0 0 0 0 0.36  0 0 0 0.26 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") repeat,
        linear-gradient(180deg, rgba(168, 168, 178, 0.92), rgba(140, 140, 152, 0.88));
    background-size: 180px 180px, auto;
    background-blend-mode: overlay, normal;
    border-color: rgba(95, 95, 108, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}