@font-face {
    font-family: 'Press Start 2P';
    src: url('fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Share Tech Mono';
    src: url('fonts/share-tech-mono-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VT323';
    src: url('fonts/vt323-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Press Start 2P', monospace;
    background: #000;
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

button {
    font-family: inherit;
}

.page {
    display: none;
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.page.active {
    display: block;
    animation: pageIn 0.22s steps(4);
}

@keyframes pageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body:not([data-theme="cover"]) .page.active {
    padding-bottom: 110px;
}

.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.page-content {
    position: relative;
    z-index: 2;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body[data-theme="cover"] { --nav-bg: #000; --nav-fg: #FCBF2C; --nav-border: #FCBF2C; --nav-hover: #FF6B1A; --modal-border: #FCBF2C; --modal-glow: rgba(252,191,44,0.35); background: #5C94FC; }
body[data-theme="toc"] { --nav-bg: #000; --nav-fg: #FFF; --nav-border: #0066FF; --nav-hover: #FF6600; --modal-border: #0066FF; --modal-glow: rgba(0,102,255,0.35); background: #000; }
body[data-theme="origin"] { --nav-bg: #000; --nav-fg: #FDD835; --nav-border: #E52521; --nav-hover: #00A652; --modal-border: #FDD835; --modal-glow: rgba(253,216,53,0.35); background: #5C94FC; }
body[data-theme="questra"] { --nav-bg: #000; --nav-fg: #00ff00; --nav-border: #00ff00; --nav-hover: #ff0040; --modal-border: #00ff00; --modal-glow: rgba(0,255,0,0.3); background: #000; }
body[data-theme="legend"] { --nav-bg: #0f2818; --nav-fg: #ffd700; --nav-border: #ffd700; --nav-hover: #4a7c2e; --modal-border: #ffd700; --modal-glow: rgba(255,215,0,0.35); background: #0f2818; }
body[data-theme="key"] { --nav-bg: #0a0a2e; --nav-fg: #00ffff; --nav-border: #00ffff; --nav-hover: #ff00ff; --modal-border: #00ffff; --modal-glow: rgba(0,255,255,0.35); background: #000; }
body[data-theme="veil"] { --nav-bg: #000; --nav-fg: #6b6b6b; --nav-border: #262626; --nav-hover: #3a3a3a; --modal-border: #444; --modal-glow: rgba(120,120,120,0.2); background: #000; }
body[data-theme="back"] { --nav-bg: #000; --nav-fg: #fff; --nav-border: #fff; --nav-hover: #333; --modal-border: #fff; --modal-glow: rgba(255,255,255,0.25); background: #000; }
body[data-theme="estrada"] { --nav-bg: #020202; --nav-fg: #00ff41; --nav-border: #0a3d14; --nav-hover: #0a2a10; --modal-border: #00ff41; --modal-glow: rgba(0,255,65,0.25); background: #020202; }

#booknav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
    background: var(--nav-bg, #000);
    border-top: 4px solid var(--nav-border, #fff);
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: 'Press Start 2P', monospace;
}

#booknav .nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 720px;
}

#booknav button {
    background: #000;
    color: var(--nav-fg, #fff);
    border: 3px solid var(--nav-fg, #fff);
    padding: 12px 14px;
    font-size: 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 3px 3px 0 var(--nav-border, #fff);
    transition: transform 0.08s, background 0.08s, color 0.08s;
    flex: 1 1 0;
    max-width: 240px;
    white-space: nowrap;
}

#booknav button:hover,
#booknav button:focus-visible {
    background: var(--nav-hover, #333);
    color: #fff;
    transform: translate(-1px, -1px);
    outline: none;
}

#booknav button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--nav-border, #fff);
}

#booknav button[disabled] {
    opacity: 0.25;
    cursor: default;
    transform: none;
}

#booknav .nav-label {
    font-size: 8px;
    color: var(--nav-fg, #fff);
    opacity: 0.8;
    letter-spacing: 1px;
}

#booknav .nav-legal {
    font-size: 7px;
    color: var(--nav-fg, #fff);
    opacity: 0.6;
    letter-spacing: 1px;
    text-decoration: none;
    margin-top: 2px;
    text-align: center;
    line-height: 1.8;
}

#booknav .nav-legal:hover,
#booknav .nav-legal:focus-visible {
    opacity: 1;
    text-decoration: underline;
    outline: none;
}

body[data-theme="cover"] #booknav {
    display: none;
}

@media (max-width: 480px) {
    #booknav button { font-size: 8px; padding: 12px 8px; }
    #booknav .nav-row { gap: 6px; }
}

.rh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 14px;
    margin: 0 auto 18px;
    max-width: 1024px;
}

.rh span:nth-child(2) {
    text-align: center;
    flex: 1;
}

@media (max-width: 480px) {
    .rh { font-size: 7px; padding: 10px 8px; }
}

#tq-modal {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    padding: 16px;
}

#tq-modal.open {
    display: flex;
}

.tq-modal-box {
    background: #000;
    border: 4px solid var(--modal-border, #fff);
    box-shadow: 0 0 0 4px #000, 0 0 40px var(--modal-glow, rgba(255,255,255,0.2));
    max-width: 560px;
    width: 100%;
    padding: 26px 22px 22px;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    line-height: 1.9;
    position: relative;
    animation: modalPop 0.18s steps(3);
}

@keyframes modalPop {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.tq-modal-kicker {
    font-size: 8px;
    color: var(--modal-border, #fff);
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.tq-modal-title {
    font-size: clamp(13px, 3.5vw, 18px);
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.5;
    text-shadow: 2px 2px 0 #000, 0 0 12px var(--modal-glow, rgba(255,255,255,0.3));
}

.tq-modal-body {
    color: #e8e8e8;
    font-size: clamp(10px, 2.6vw, 12px);
    line-height: 2;
}

.tq-modal-body .ember-word {
    display: block;
    text-align: center;
    font-size: clamp(22px, 7vw, 40px);
    color: #ffb000;
    text-shadow: 0 0 10px #ff6a00, 0 0 30px #ff3300, 3px 3px 0 #000;
    margin: 18px 0;
    letter-spacing: 4px;
    animation: emberGlow 1.4s ease-in-out infinite alternate;
}

@keyframes emberGlow {
    from { text-shadow: 0 0 8px #ff6a00, 0 0 20px #ff3300, 3px 3px 0 #000; }
    to { text-shadow: 0 0 16px #ffd000, 0 0 40px #ff6a00, 3px 3px 0 #000; }
}

.tq-modal-close {
    display: block;
    margin: 20px auto 0;
    background: #000;
    color: var(--modal-border, #fff);
    border: 3px solid var(--modal-border, #fff);
    padding: 12px 22px;
    font-size: 10px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 #333;
}

.tq-modal-close:hover {
    background: var(--modal-border, #fff);
    color: #000;
}

.ember {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 28px;
    background: none;
    border: 0;
    cursor: pointer;
    vertical-align: middle;
    margin: 0 4px;
    opacity: 0.55;
    animation: emberFlicker 1.1s steps(2) infinite;
    padding: 0;
}

.ember::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        8px 0 0 #ffe066,
        8px 4px 0 #ffe066, 12px 4px 0 #ffe066,
        4px 8px 0 #ff8c00, 8px 8px 0 #ffe066, 12px 8px 0 #ff8c00,
        4px 12px 0 #ff3300, 8px 12px 0 #ff8c00, 12px 12px 0 #ff8c00,
        0 16px 0 #ff3300, 4px 16px 0 #ff8c00, 8px 16px 0 #fff2a8, 12px 16px 0 #ff8c00, 16px 16px 0 #ff3300,
        0 20px 0 #ff3300, 4px 20px 0 #ff8c00, 8px 20px 0 #fff2a8, 12px 20px 0 #ff8c00, 16px 20px 0 #ff3300,
        4px 24px 0 #ff3300, 8px 24px 0 #ff8c00, 12px 24px 0 #ff3300;
}

.ember:hover {
    opacity: 1;
    animation: none;
}

.ember.found {
    opacity: 1;
    animation: none;
    filter: drop-shadow(0 0 5px #ffb000);
}

@keyframes emberFlicker {
    0% { opacity: 0.55; transform: translateY(0); }
    50% { opacity: 0.35; transform: translateY(1px); }
    100% { opacity: 0.55; transform: translateY(0); }
}

body[data-theme="cover"] {
    overflow: hidden;
}

#cover {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: #5C94FC;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
}

#cover.active {
    display: flex;
}

#cover .cover-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px),
        repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
    pointer-events: none;
    z-index: 1;
}

#cover .pixel-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

#cover .cloud {
    position: absolute;
    background: #FCFCFC;
    opacity: 0.9;
}

#cover .cloud::before {
    content: '';
    position: absolute;
    background: #FCFCFC;
}

#cover .cloud1 { width: 40px; height: 20px; top: 10%; left: -100px; opacity: 0.6; animation: floatSlow 45s linear infinite; }
#cover .cloud1::before { width: 20px; height: 20px; top: -10px; left: 10px; }
#cover .cloud2 { width: 36px; height: 18px; top: 25%; left: -100px; opacity: 0.6; animation: floatSlow 50s linear infinite; animation-delay: 15s; }
#cover .cloud2::before { width: 18px; height: 18px; top: -9px; right: 9px; }
#cover .cloud3 { width: 56px; height: 28px; top: 15%; left: -100px; opacity: 0.75; animation: floatMedium 35s linear infinite; animation-delay: 5s; }
#cover .cloud3::before { width: 28px; height: 28px; top: -14px; left: 14px; }
#cover .cloud4 { width: 52px; height: 26px; top: 35%; left: -100px; opacity: 0.75; animation: floatMedium 38s linear infinite; animation-delay: 20s; }
#cover .cloud4::before { width: 26px; height: 26px; top: -13px; right: 13px; }
#cover .cloud5 { width: 48px; height: 24px; top: 45%; left: -100px; opacity: 0.75; animation: floatMedium 33s linear infinite; animation-delay: 12s; }
#cover .cloud5::before { width: 24px; height: 24px; top: -12px; left: 12px; }
#cover .cloud6 { width: 72px; height: 36px; top: 20%; left: -100px; opacity: 0.95; animation: floatFast 22s linear infinite; }
#cover .cloud6::before { width: 36px; height: 36px; top: -18px; left: 18px; }
#cover .cloud7 { width: 64px; height: 32px; top: 40%; left: -100px; opacity: 0.95; animation: floatFast 25s linear infinite; animation-delay: 8s; }
#cover .cloud7::before { width: 32px; height: 32px; top: -16px; right: 16px; }
#cover .cloud8 { width: 60px; height: 30px; top: 8%; left: -100px; opacity: 0.95; animation: floatFast 20s linear infinite; animation-delay: 18s; }
#cover .cloud8::before { width: 30px; height: 30px; top: -15px; left: 15px; }

@keyframes floatSlow {
    0% { left: -100px; transform: translateY(0); }
    100% { left: calc(100% + 100px); transform: translateY(0); }
}

@keyframes floatMedium {
    0% { left: -100px; transform: translateY(0); }
    33% { transform: translateY(4px); }
    66% { transform: translateY(-4px); }
    100% { left: calc(100% + 100px); transform: translateY(0); }
}

@keyframes floatFast {
    0% { left: -100px; transform: translateY(0); }
    25% { transform: translateY(-6px); }
    50% { transform: translateY(3px); }
    75% { transform: translateY(-3px); }
    100% { left: calc(100% + 100px); transform: translateY(0); }
}

#cover .enter-button-wrapper {
    text-align: center;
    z-index: 10;
    position: relative;
    background: #000;
    padding: 32px 48px;
    border: 8px solid #FCBF2C;
    box-shadow: 0 0 0 4px #000, 0 0 0 8px #FCE4A4, 0 0 0 12px #000;
}

#cover .warning-row {
    color: #FCBF2C;
    font-size: 14px;
    margin-bottom: 24px;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    white-space: nowrap;
    display: block;
}

#cover .star-left { display: inline-block; margin-right: 8px; animation: blink 0.5s infinite; }
#cover .star-right { display: inline-block; margin-left: 8px; animation: blink 0.5s infinite; animation-delay: 0.25s; }

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.3; }
}

#cover .trezor-enter-button {
    display: inline-block;
    padding: 16px 24px;
    background: #FF6B1A;
    color: #FCFCFC;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.8;
    border: none;
    position: relative;
    transition: all 0.1s;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 4px 0 #C44A00, 0 8px 0 #8B3400, 4px 0 0 #C44A00, -4px 0 0 #C44A00, 0 8px 8px rgba(0,0,0,0.3);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

#cover .trezor-enter-button:hover {
    background: #FCBF2C;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #D4A000, 0 10px 0 #8B6B00, 4px 0 0 #D4A000, -4px 0 0 #D4A000, 0 10px 12px rgba(0,0,0,0.4);
    text-shadow: none;
}

#cover .trezor-enter-button:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #C44A00, 0 4px 0 #8B3400, 2px 0 0 #C44A00, -2px 0 0 #C44A00, 0 4px 4px rgba(0,0,0,0.3);
}

#cover .press-start-text {
    margin-top: 20px;
    font-size: 10px;
    color: #FCFCFC;
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
    animation: flash 1s infinite;
}

@keyframes flash {
    0%, 100% { color: #FCFCFC; }
    50% { color: #FCBF2C; }
}

#cover .continue-link {
    margin-top: 18px;
    background: none;
    border: 2px solid #FCE4A4;
    color: #FCE4A4;
    font-size: 8px;
    padding: 10px 14px;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#cover .continue-link:hover {
    background: #FCE4A4;
    color: #000;
}

#cover .continue-link[hidden] {
    display: none;
}

#cover .book-title {
    font-size: 9px;
    color: #FCE4A4;
    letter-spacing: 2px;
    margin-bottom: 18px;
    text-shadow: 2px 2px 0 #000;
    line-height: 1.8;
}

#cover .cover-legal {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    z-index: 7;
    text-align: center;
    font-size: 8px;
    color: #FCE4A4;
    text-decoration: none;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    line-height: 1.8;
    padding: 0 12px;
}

#cover .cover-legal:hover {
    color: #FFF;
    text-decoration: underline;
}

#cover .trezor-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 64px;
    background:
        repeating-linear-gradient(90deg, #C84C0C 0px, #C84C0C 30px, #000 30px, #000 32px),
        repeating-linear-gradient(0deg, #C84C0C 0px, #C84C0C 30px, #000 30px, #000 32px);
    background-size: 32px 32px;
    border-top: 4px solid #000;
    z-index: 6;
}

#cover .turtle {
    position: absolute;
    bottom: 68px;
    left: -90px;
    width: 80px;
    height: 48px;
    z-index: 5;
    animation: turtleWalk 30s linear infinite;
}

#cover .t {
    position: absolute;
    width: 8px;
    height: 8px;
}

#cover .green { background: #228B22; }
#cover .dark { background: #0B5E20; }
#cover .light { background: #7CB342; }

@keyframes turtleWalk {
    0% { left: -90px; transform: scaleX(1); }
    48% { left: calc(100vw - 10px); transform: scaleX(1); }
    50% { left: calc(100vw - 10px); transform: scaleX(-1); }
    98% { left: -90px; transform: scaleX(-1); }
    100% { left: -90px; transform: scaleX(1); }
}

#cover .leg1 { animation: step 0.5s infinite; }
#cover .leg2 { animation: step 0.5s infinite; animation-delay: 0.25s; }

@keyframes step {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (max-width: 768px) {
    #cover .trezor-enter-button { font-size: 11px; padding: 12px 18px; }
    #cover .warning-row { font-size: 11px; }
    #cover .star-left, #cover .star-right { margin-left: 6px; margin-right: 6px; }
    #cover .enter-button-wrapper { padding: 24px 32px; margin: 0 20px; }
    #cover .press-start-text { font-size: 8px; }
    #cover .turtle { transform: scale(0.8); bottom: 70px; }
}

@media (max-width: 480px) {
    #cover .enter-button-wrapper { padding: 20px 24px; }
    #cover .trezor-enter-button { font-size: 10px; padding: 10px 16px; }
    #cover .warning-row { font-size: 10px; }
    #cover .turtle { transform: scale(0.6); }
    #cover .book-title { font-size: 7px; }
    #cover .cover-legal { font-size: 6px; }
}

#toc {
    background: #000;
}

#toc .sky-container {
    position: absolute;
    width: 100%;
    height: 65%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #001122 0%, #003366 100%);
    animation: sky-cycle 60s linear infinite;
}

@keyframes sky-cycle {
    0%, 100% { background: linear-gradient(to bottom, #001122 0%, #003366 100%); }
    25% { background: linear-gradient(to bottom, #FFB366 0%, #FFDD99 100%); }
    50% { background: linear-gradient(to bottom, #66BBFF 0%, #AADDFF 100%); }
    75% { background: linear-gradient(to bottom, #FF8844 0%, #FFAA66 100%); }
}

#toc .stars-container {
    position: absolute;
    width: 100%;
    height: 65%;
    top: 0;
    left: 0;
    z-index: 1;
    animation: stars-fade 60s linear infinite;
}

@keyframes stars-fade {
    0%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
    90% { opacity: 1; }
}

#toc .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    animation: twinkle 2s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

#toc .star1 { left: 10%; top: 15%; animation-delay: 0s; }
#toc .star2 { left: 20%; top: 25%; animation-delay: 0.3s; }
#toc .star3 { left: 30%; top: 10%; animation-delay: 0.6s; }
#toc .star4 { left: 40%; top: 30%; animation-delay: 0.9s; }
#toc .star5 { left: 50%; top: 20%; animation-delay: 1.2s; }
#toc .star6 { left: 60%; top: 35%; animation-delay: 1.5s; }
#toc .star7 { left: 70%; top: 15%; animation-delay: 1.8s; }
#toc .star8 { left: 80%; top: 40%; animation-delay: 0.2s; }
#toc .star9 { left: 90%; top: 25%; animation-delay: 0.5s; }
#toc .star10 { left: 15%; top: 45%; animation-delay: 0.8s; }
#toc .star11 { left: 25%; top: 50%; animation-delay: 1.1s; }
#toc .star12 { left: 35%; top: 55%; animation-delay: 1.4s; }
#toc .star13 { left: 45%; top: 48%; animation-delay: 1.7s; }
#toc .star14 { left: 55%; top: 52%; animation-delay: 0.1s; }
#toc .star15 { left: 65%; top: 58%; animation-delay: 0.4s; }

#toc .celestial-container {
    position: absolute;
    width: 100%;
    height: 65%;
    top: 0;
    left: 0;
    z-index: 2;
}

#toc .sun-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: sun-orbit 60s linear infinite;
}

@keyframes sun-orbit {
    0% { transform: rotate(180deg); }
    100% { transform: rotate(540deg); }
}

#toc .sun {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: -20px;
    margin-left: -20px;
}

#toc .sun-pixel {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #FFD700;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 0 #FFD700, 0 -10px 0 #FFD700, 10px 0 0 #FFD700, 0 10px 0 #FFD700, -10px 0 0 #FFD700, -7px -7px 0 #FFA500, 7px -7px 0 #FFA500, 7px 7px 0 #FFA500, -7px 7px 0 #FFA500;
}

#toc .moon-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: moon-orbit 60s linear infinite;
}

@keyframes moon-orbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#toc .moon {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 50%;
    top: -16px;
    margin-left: -16px;
}

#toc .moon-pixel {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #FFFFCC;
    top: 8px;
    left: 8px;
    box-shadow: 0 0 0 #FFFFCC, 0 -8px 0 #FFFFCC, 8px 0 0 #FFFFCC, 0 8px 0 #FFFFCC, -8px 0 0 #FFFFCC, -8px -8px 0 #FFFFCC, 8px -8px 0 #FFFFCC, 8px 8px 0 #FFFFCC, -8px 8px 0 #FFFFCC;
}

#toc .moon-crater {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #DDDDAA;
    top: 10px;
    left: 10px;
    box-shadow: 4px 4px 0 #DDDDAA, -4px 6px 0 #DDDDAA;
}

#toc .mountain-container {
    position: absolute;
    bottom: 35%;
    width: 100%;
    height: 30%;
    left: 0;
    z-index: 3;
}

#toc .mountain-scroll {
    position: absolute;
    width: 200%;
    height: 100%;
    animation: mountains-move 90s linear infinite;
}

@keyframes mountains-move {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

#toc .mountain-layer,
#toc .mountain-layer2 {
    position: absolute;
    width: 50%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, #CC00AA 0px, #CC00AA 8px, #000 8px, #000 16px),
        repeating-linear-gradient(90deg, #CC00AA 0px, #CC00AA 8px, #000 8px, #000 16px);
    background-blend-mode: multiply;
}

#toc .mountain-layer {
    left: 0;
    clip-path: polygon(0% 100%, 0% 70%, 5% 50%, 10% 45%, 15% 30%, 20% 20%, 25% 35%, 30% 45%, 35% 55%, 40% 40%, 45% 25%, 50% 15%, 55% 30%, 60% 40%, 65% 50%, 70% 35%, 75% 45%, 80% 55%, 85% 40%, 90% 30%, 95% 45%, 100% 35%, 100% 100%);
}

#toc .mountain-layer2 {
    left: 50%;
    clip-path: polygon(0% 100%, 0% 35%, 5% 45%, 10% 30%, 15% 40%, 20% 15%, 25% 25%, 30% 35%, 35% 45%, 40% 30%, 45% 40%, 50% 20%, 55% 35%, 60% 45%, 65% 55%, 70% 40%, 75% 50%, 80% 35%, 85% 45%, 90% 55%, 95% 40%, 100% 50%, 100% 100%);
}

#toc .void-area {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35%;
    left: 0;
    background: #000;
    z-index: 4;
}

#toc .road-container {
    position: absolute;
    bottom: 32%;
    width: 100%;
    height: 10%;
    left: 0;
    z-index: 5;
}

#toc .road-track {
    position: absolute;
    width: 200%;
    height: 100%;
    animation: scroll-road 25s linear infinite;
    background-image: repeating-linear-gradient(90deg, #CC9966 0px, #CC9966 4px, #AA7744 4px, #AA7744 8px);
    border-top: 3px solid #DDAA77;
    border-bottom: 3px solid #885522;
}

@keyframes scroll-road {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

#toc .game-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
}

#toc .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 480px;
    margin: auto;
}

#toc .title-block {
    background: #000;
    border: 4px solid #FF6600;
    padding: 10px 15px;
    box-shadow: 0 0 0 2px #000, 0 0 0 4px #0066FF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

#toc .main-title {
    color: #FFF;
    font-size: 16px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000;
}

#toc .sub-title {
    color: #FF6600;
    font-size: 8px;
    letter-spacing: 1px;
    text-align: center;
}

#toc .games-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

#toc .game-box {
    background: #000;
    border: 3px solid #0066FF;
    padding: 18px 22px;
    text-decoration: none;
    position: relative;
    transition: all 0.1s;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #FF6600;
    text-align: left;
    display: block;
    color: #fff;
}

#toc .game-box:hover,
#toc .game-box:focus-visible {
    background: #0066FF;
    border-color: #FF6600;
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #FFFF00;
    transform: translate(-2px, -2px);
    outline: none;
}

#toc .game-box:hover .game-label { color: #FFF; }
#toc .game-box:hover .game-name { color: #FFFF00; text-shadow: 2px 2px 0 #000; }

#toc .game-label {
    color: #FF6600;
    font-size: 10px;
    margin-bottom: 10px;
    transition: color 0.1s;
    text-shadow: 1px 1px 0 #000;
}

#toc .game-name {
    color: #FFF;
    font-size: 12px;
    line-height: 1.5;
    text-transform: uppercase;
    transition: color 0.1s;
    text-shadow: 1px 1px 0 #000066;
}

#toc .game-pages {
    color: #888;
    font-size: 8px;
    margin-top: 10px;
    letter-spacing: 1px;
}

#toc .game-box.final {
    border-color: #6a0dad;
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #2a0a3a;
}

#toc .game-box.final .game-label { color: #9b59b6; }
#toc .game-box.final .game-name { color: #bbb; }

#toc .game-box.final:hover {
    background: #2a0a3a;
    border-color: #9b59b6;
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #6a0dad;
}

#toc .game-box.back {
    border-color: #888;
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #333;
    margin-top: 20px;
}

#toc .game-box.back .game-label { color: #aaa; }
#toc .game-box.back .game-name { color: #ddd; }

#toc .game-box.back:hover {
    background: #222;
    border-color: #fff;
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #888;
}

#toc .game-box.back.estrada {
    margin-top: 0;
    border-color: #0a3d14;
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #062a0c;
}

#toc .game-box.back.estrada .game-label { color: #00ff41; opacity: 0.6; }
#toc .game-box.back.estrada .game-name { color: #ff2200; }

#toc .game-box.back.estrada:hover {
    background: #041a08;
    border-color: #00ff41;
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #0a3d14;
}

#toc .footer-spacer {
    position: relative;
    width: 100%;
    height: 120px;
    z-index: 10;
}

@media (max-width: 768px) {
    #toc .content-wrapper { gap: 15px; }
    #toc .main-title { font-size: 11px; letter-spacing: 1px; }
    #toc .title-block { padding: 15px 20px; }
    #toc .game-box { padding: 14px 18px; }
    #toc .game-name { font-size: 10px; }
    #toc .game-label { font-size: 8px; margin-bottom: 8px; }
    #toc .games-wrapper { gap: 12px; }
}

@media (max-width: 480px) {
    #toc .main-title { font-size: 9px; }
    #toc .title-block { padding: 12px 15px; }
    #toc .game-box { padding: 12px 15px; }
    #toc .game-name { font-size: 9px; }
    #toc .game-label { font-size: 7px; }
}

.theme-origin {
    font-family: 'Press Start 2P', monospace;
    color: #FFF;
    padding: 20px 10px;
}

.theme-origin .background-wrapper {
    background: linear-gradient(to bottom, #5C94FC 0%, #5C94FC 70%, #C84C0C 70%, #C84C0C 85%, #000 85%);
}

.theme-origin .pixel-overlay {
    background-image: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
    z-index: 10;
}

.theme-origin .cloud {
    position: fixed;
    color: rgba(255,255,255,0.9);
    font-size: 60px;
    z-index: 1;
    animation: tq-float-clouds 30s infinite linear;
    text-shadow: 2px 2px 10px rgba(255,255,255,0.3);
    pointer-events: none;
    line-height: 1;
}

.theme-origin .cloud-1 { top: 8%; animation-duration: 35s; font-size: 70px; }
.theme-origin .cloud-2 { top: 18%; animation-duration: 40s; animation-delay: -10s; }
.theme-origin .cloud-3 { top: 28%; animation-duration: 45s; animation-delay: -20s; font-size: 55px; }

@keyframes tq-float-clouds {
    from { left: -150px; }
    to { left: calc(100% + 150px); }
}

.theme-origin .container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.theme-origin .rh {
    color: #FFF;
    text-shadow: 2px 2px 0 #000;
    font-size: 10px;
}

.theme-origin h1 {
    background: linear-gradient(135deg, #E52521 0%, #FDD835 50%, #E52521 100%);
    color: #FFF;
    font-size: clamp(20px, 4vw, 36px);
    text-align: center;
    padding: 25px;
    margin-bottom: 30px;
    border: 4px solid #000;
    border-radius: 15px;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    box-shadow: 0 8px 0 #8B0000, 0 8px 10px rgba(0,0,0,0.5);
    position: relative;
    animation: tq-bounce 2s infinite;
}

.theme-origin h2 {
    background: linear-gradient(to bottom, #00A652 0%, #00A652 50%, #005A29 50%, #005A29 100%);
    color: #FFF;
    font-size: clamp(14px, 3vw, 20px);
    padding: 15px 20px;
    margin: 30px 0 20px;
    border: 3px solid #000;
    border-radius: 10px;
    text-shadow: 2px 2px 0 #000;
    position: relative;
    box-shadow: 0 5px 0 #003D1F;
    line-height: 1.5;
}

.theme-origin h2:first-child {
    margin-top: 10px;
}

.theme-origin h2::before {
    content: '⭐';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    animation: tq-pulse-star 1s infinite;
}

.theme-origin .content-section {
    background: linear-gradient(135deg, #FFB037 0%, #FFB037 49%, #FDD835 50%, #FDD835 100%);
    border: 4px solid #000;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 6px 0 #C76E00, 0 6px 15px rgba(0,0,0,0.4);
    color: #000;
}

.theme-origin p {
    color: #000;
    font-size: clamp(11px, 2.5vw, 14px);
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: left;
}

.theme-origin .terminal-prompt::before {
    content: "CHAD> ";
    color: #E52521;
    font-weight: bold;
}

.theme-origin .emoji {
    font-size: 1.5em;
    display: inline-block;
    animation: tq-wiggle 2s infinite;
}

.theme-origin .retro-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 8px;
}

.theme-origin .retro-list.two-col {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.theme-origin .retro-list li {
    background: linear-gradient(to right, #FFF 0%, #FFF 70%, #E0E0E0 100%);
    border: 3px solid #000;
    border-radius: 8px;
    padding: 12px 15px;
    color: #000;
    font-size: clamp(10px, 2vw, 13px);
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 0 #666;
    line-height: 1.6;
}

.theme-origin .retro-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 #666;
    background: linear-gradient(to right, #FFD700 0%, #FFD700 70%, #FFA500 100%);
}

.theme-origin .movie-link {
    color: #000;
    text-decoration: none;
    display: block;
    width: 100%;
    transition: all 0.3s ease;
}

.theme-origin .movie-link:hover {
    color: #E52521;
    padding-left: 10px;
}

.theme-origin .movie-link:visited {
    color: #005A29;
}

.theme-origin .movie-year {
    display: block;
    font-size: 8px;
    color: #555;
    margin-top: 6px;
    letter-spacing: 1px;
}

.theme-origin .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.theme-origin .grid-item {
    background: linear-gradient(to bottom, #C84C0C 0%, #C84C0C 48%, #8B3000 50%, #8B3000 100%);
    border: 2px solid #000;
    border-radius: 5px;
    padding: 12px 5px;
    text-align: center;
    color: #FFF;
    font-size: clamp(9px, 1.8vw, 12px);
    transition: all 0.3s ease;
    box-shadow: 0 3px 0 #5D1F00;
    text-shadow: 1px 1px 0 #000;
    position: relative;
    line-height: 1.5;
}

.theme-origin .grid-item:hover {
    transform: scale(1.05) translateY(-2px);
    background: linear-gradient(to bottom, #FFA500 0%, #FFA500 48%, #FF8C00 50%, #FF8C00 100%);
    box-shadow: 0 5px 0 #5D1F00;
}

.theme-origin .grid-item .order {
    display: block;
    font-size: 7px;
    color: #FDD835;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.theme-origin .grid-item.has-fact {
    cursor: pointer;
    border-color: #FDD835;
    box-shadow: 0 3px 0 #5D1F00, 0 0 12px rgba(253,216,53,0.6);
}

.theme-origin .grid-item.has-fact::after {
    content: '?';
    position: absolute;
    top: -8px;
    right: -6px;
    background: #FDD835;
    color: #000;
    width: 18px;
    height: 18px;
    border: 2px solid #000;
    border-radius: 3px;
    font-size: 10px;
    line-height: 14px;
    text-shadow: none;
    animation: tq-bounce 1.2s infinite;
}

.theme-origin .stamp-19-2 {
    position: absolute;
    right: 14px;
    bottom: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.16);
    text-decoration: none;
    transition: color 0.3s;
}

.theme-origin .stamp-19-2:hover {
    color: #E52521;
}

.theme-origin .fact-hint {
    color: #000;
    font-size: clamp(9px, 2vw, 11px);
    margin: 18px 0 0;
    text-align: center;
    line-height: 1.8;
}

@keyframes tq-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes tq-pulse-star {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.2); }
}

@keyframes tq-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

@media (max-width: 480px) {
    .theme-origin h2::before { display: none; }
    .theme-origin .content-section { padding: 16px 12px; }
}

.theme-questra {
    background: #000;
    color: #ffffff;
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.4;
    --contra-red: #ff0040;
    --contra-blue: #0080ff;
    --contra-yellow: #ffff00;
    --contra-orange: #ff8000;
    --contra-green: #00ff00;
    --contra-purple: #ff00ff;
    --contra-cyan: #00ffff;
    --contra-white: #ffffff;
    --contra-black: #000000;
    --contra-dark-blue: #000080;
    --contra-dark-green: #008000;
    --danger-glow: #ff6600;
}

.theme-questra .q-bg {
    background-image: linear-gradient(180deg, #001a33 0%, #000 50%, #001a33 100%);
}

.theme-questra .q-grid {
    background-image:
        repeating-linear-gradient(90deg, transparent 0, transparent 50px, rgba(0,128,0,0.1) 50px, rgba(0,128,0,0.1) 51px),
        repeating-linear-gradient(0deg, transparent 0, transparent 50px, rgba(0,128,0,0.1) 50px, rgba(0,128,0,0.1) 51px);
    z-index: 1;
}

.theme-questra .q-scan {
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px);
    z-index: 4000;
    animation: scanlines 10s linear infinite;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

@keyframes qblink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes qpulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes dangerPulse {
    0%, 100% { box-shadow: 0 0 5px var(--danger-glow), 0 0 10px var(--danger-glow), inset 0 0 5px rgba(255,0,0,0.3); transform: scale(1); }
    50% { box-shadow: 0 0 10px var(--danger-glow), 0 0 20px var(--danger-glow), 0 0 30px var(--danger-glow), inset 0 0 10px rgba(255,0,0,0.5); transform: scale(1.02); }
}

@keyframes warningFlash {
    0%, 100% { color: var(--contra-red); text-shadow: 0 0 5px var(--contra-red), 2px 2px 0 var(--contra-yellow); }
    25%, 75% { color: var(--contra-yellow); text-shadow: 0 0 10px var(--contra-yellow), 2px 2px 0 var(--contra-red); }
    50% { color: var(--contra-orange); text-shadow: 0 0 15px var(--contra-orange), 2px 2px 0 var(--contra-yellow); }
}

@keyframes dangerSweep {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.theme-questra .game-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    z-index: 2;
}

.theme-questra .rh {
    font-family: 'Press Start 2P', monospace;
    color: var(--contra-white);
    font-size: 9px;
}

.theme-questra .rh .lives-tag { color: var(--contra-red); }
.theme-questra .rh .score-tag { color: var(--contra-yellow); }

.theme-questra .game-start-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.theme-questra .game-start {
    text-align: center;
    padding: 30px 15px;
    background: linear-gradient(to bottom, #000080 0%, #000 100%);
    border: 4px solid var(--contra-blue);
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.theme-questra .hud {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
    pointer-events: none;
}

.theme-questra .lives,
.theme-questra .score {
    background: rgba(0,0,0,0.9);
    border: 2px solid var(--contra-cyan);
    padding: 8px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 2vw, 14px);
    color: var(--contra-white);
}

.theme-questra .lives::before { content: "LIVES: "; color: var(--contra-red); }
.theme-questra .lives::after { content: "♥♥♥♥♥"; color: var(--contra-red); margin-left: 5px; }
.theme-questra .score::before { content: "SCORE: "; color: var(--contra-yellow); }
.theme-questra .score::after { content: "15000"; color: var(--contra-yellow); margin-left: 5px; }

.theme-questra .game-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(20px, 5vw, 40px);
    color: var(--contra-yellow);
    text-shadow: 3px 3px 0 var(--contra-red), 6px 6px 0 var(--contra-black);
    margin-bottom: 20px;
    margin-top: 50px;
    animation: qpulse 2s infinite;
}

.theme-questra .game-subtitle {
    font-size: clamp(16px, 3vw, 24px);
    color: var(--contra-cyan);
    margin-top: 10px;
    animation: qblink 2s infinite;
}

.theme-questra .player-select {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.theme-questra .player {
    font-size: 16px;
    color: var(--contra-white);
}

.theme-questra .level-card {
    background: rgba(0,0,0,0.95);
    border: 3px solid var(--contra-green);
    margin: 30px 0;
    position: relative;
    overflow: hidden;
}

.theme-questra .level-header {
    background: linear-gradient(90deg, var(--contra-dark-blue) 0%, var(--contra-black) 50%, var(--contra-dark-blue) 100%);
    padding: 15px;
    border-bottom: 3px solid var(--contra-green);
    display: flex;
    justify-content: center;
    align-items: center;
}

.theme-questra .level-name {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(12px, 3vw, 18px);
    color: var(--contra-yellow);
    text-shadow: 2px 2px 0 var(--contra-black);
    text-align: center;
    line-height: 1.6;
}

.theme-questra .level-content {
    padding: 20px 15px;
}

.theme-questra .level-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.theme-questra .level-content li {
    font-size: clamp(16px, 3vw, 20px);
    padding: 12px 0 12px 40px;
    position: relative;
    border-bottom: 1px dashed rgba(0,255,0,0.2);
    color: var(--contra-white);
    line-height: 1.5;
}

.theme-questra .level-content li::before {
    content: "▶";
    position: absolute;
    left: 15px;
    top: 12px;
    color: var(--contra-cyan);
    animation: qblink 3s infinite;
}

.theme-questra .boss-warning {
    background: linear-gradient(135deg, rgba(32,0,0,0.95) 0%, rgba(0,0,0,0.95) 100%);
    border: 4px solid var(--contra-red);
    margin: 20px 0 40px;
    padding: 30px 10px 20px;
    position: relative;
    overflow: hidden;
}

.theme-questra .boss-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(16px, 4vw, 28px);
    color: var(--contra-red);
    text-align: center;
    margin-bottom: 30px;
    animation: warningFlash 2s infinite;
}

.theme-questra .danger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 10px;
}

.theme-questra .danger-item {
    background: linear-gradient(135deg, rgba(64,0,0,0.9) 0%, rgba(128,0,0,0.6) 50%, rgba(64,0,0,0.9) 100%);
    border: 2px solid var(--contra-orange);
    padding: 12px 8px;
    text-align: center;
    font-size: clamp(14px, 2.5vw, 16px);
    color: var(--contra-yellow);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    animation: dangerPulse 1.5s infinite;
    animation-delay: calc(var(--item-index) * 0.1s);
}

.theme-questra .danger-item:nth-child(1) { --item-index: 0; }
.theme-questra .danger-item:nth-child(2) { --item-index: 1; }
.theme-questra .danger-item:nth-child(3) { --item-index: 2; }
.theme-questra .danger-item:nth-child(4) { --item-index: 3; }
.theme-questra .danger-item:nth-child(5) { --item-index: 4; }
.theme-questra .danger-item:nth-child(6) { --item-index: 5; }
.theme-questra .danger-item:nth-child(7) { --item-index: 6; }
.theme-questra .danger-item:nth-child(8) { --item-index: 7; }
.theme-questra .danger-item:nth-child(9) { --item-index: 8; }
.theme-questra .danger-item:nth-child(10) { --item-index: 9; }
.theme-questra .danger-item:nth-child(11) { --item-index: 10; }
.theme-questra .danger-item:nth-child(12) { --item-index: 11; }
.theme-questra .danger-item:nth-child(13) { --item-index: 12; }
.theme-questra .danger-item:nth-child(14) { --item-index: 13; }
.theme-questra .danger-item:nth-child(15) { --item-index: 14; }
.theme-questra .danger-item:nth-child(16) { --item-index: 15; }
.theme-questra .danger-item:nth-child(17) { --item-index: 16; }
.theme-questra .danger-item:nth-child(18) { --item-index: 17; }

.theme-questra .danger-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,102,0,0.4), transparent);
    animation: dangerSweep 3s infinite;
    animation-delay: calc(var(--item-index) * 0.2s);
    pointer-events: none;
}

.theme-questra .danger-item .ember {
    position: absolute;
    top: 3px;
    right: 8px;
    margin: 0;
    transform: scale(0.7);
    transform-origin: top right;
    z-index: 2;
}

.theme-questra .mission-briefing {
    background: rgba(0,0,80,0.3);
    border: 3px solid var(--contra-blue);
    margin: 20px 0 40px;
    padding: 10px;
}

.theme-questra .mission-header {
    background: var(--contra-dark-blue);
    padding: 15px;
    text-align: center;
    margin: -10px -10px 20px -10px;
}

.theme-questra .mission-header h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(14px, 3vw, 20px);
    color: var(--contra-cyan);
    text-shadow: 2px 2px 0 var(--contra-black);
    line-height: 1.6;
}

.theme-questra .mission-item {
    background: rgba(0,0,0,0.7);
    border-left: 5px solid var(--contra-cyan);
    padding: 15px;
    margin: 15px 0;
}

.theme-questra .mission-item h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(14px, 3vw, 18px);
    color: var(--contra-yellow);
    margin-bottom: 15px;
    line-height: 1.5;
}

.theme-questra .mission-item p {
    font-size: clamp(16px, 3vw, 20px);
    color: var(--contra-white);
    margin: 10px 0;
    line-height: 1.5;
}

.theme-questra .mission-item ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.theme-questra .mission-item li {
    font-size: clamp(16px, 3vw, 20px);
    padding: 8px 0;
    margin-left: 25px;
    position: relative;
    color: var(--contra-white);
    line-height: 1.5;
}

.theme-questra .mission-item li::before {
    content: "•";
    position: absolute;
    left: -20px;
    top: 8px;
    color: var(--contra-cyan);
}

.theme-questra .power-up-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0 40px;
}

@media (min-width: 768px) {
    .theme-questra .power-up-section { grid-template-columns: 1fr 1fr; }
}

.theme-questra .power-up-box {
    background: rgba(0,0,0,0.9);
    border: 3px solid;
    padding: 15px;
    position: relative;
}

.theme-questra .power-up-box.spread-gun { border-color: var(--contra-green); box-shadow: 0 0 20px rgba(0,255,0,0.3); }
.theme-questra .power-up-box.laser { border-color: var(--contra-red); box-shadow: 0 0 20px rgba(255,0,0,0.3); }

.theme-questra .power-up-header {
    background: rgba(0,0,0,0.8);
    margin: -15px -15px 15px -15px;
    padding: 15px;
    text-align: center;
    border-bottom: 2px solid;
}

.theme-questra .power-up-box.spread-gun .power-up-header { border-color: var(--contra-green); }
.theme-questra .power-up-box.laser .power-up-header { border-color: var(--contra-red); }

.theme-questra .power-up-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(12px, 3vw, 18px);
    text-shadow: 2px 2px 0 var(--contra-black);
}

.theme-questra .power-up-box.spread-gun .power-up-title { color: var(--contra-green); }
.theme-questra .power-up-box.laser .power-up-title { color: var(--contra-red); }

.theme-questra .power-up-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.theme-questra .power-up-box li {
    font-size: clamp(16px, 3vw, 20px);
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    line-height: 1.5;
    color: var(--contra-white);
}

.theme-questra .power-up-box.spread-gun li::before { content: "[✓] "; color: var(--contra-green); font-weight: bold; }
.theme-questra .power-up-box.laser li::before { content: "[✗] "; color: var(--contra-red); font-weight: bold; }

.theme-questra .victory-screen {
    background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(0,0,0,0.95) 100%);
    border: 4px solid var(--contra-yellow);
    padding: 40px 20px;
    margin: 20px 0 40px;
    text-align: center;
    position: relative;
}

.theme-questra .victory-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(14px, 3vw, 20px);
    color: var(--contra-yellow);
    margin-bottom: 25px;
    text-shadow: 2px 2px 0 var(--contra-red);
    line-height: 1.6;
}

.theme-questra .victory-screen p {
    font-size: clamp(16px, 3vw, 20px);
    color: var(--contra-white);
    line-height: 1.6;
    margin: 15px 0;
}

.theme-questra .final-message {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(24px, 6vw, 48px);
    color: var(--contra-yellow);
    margin: 30px 0;
    text-shadow: 3px 3px 0 var(--contra-red), 6px 6px 0 var(--contra-blue), 9px 9px 0 var(--contra-black);
    animation: qpulse 0.8s infinite;
}

.theme-questra .continue-prompt {
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(12px, 3vw, 18px);
    color: var(--contra-cyan);
    margin: 30px 0;
    animation: qblink 1s infinite;
}

.theme-questra .game-over {
    text-align: center;
    padding: 20px;
    background: rgba(0,0,0,0.9);
    border: 3px solid var(--contra-red);
    margin: 20px 0;
}

.theme-questra .game-over-text {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(14px, 3vw, 20px);
    color: var(--contra-red);
    text-shadow: 2px 2px 0 var(--contra-black);
}

@media (max-width: 768px) {
    .theme-questra { font-size: 16px; }
    .theme-questra .game-container { padding: 5px; }
    .theme-questra .hud { top: 5px; left: 5px; right: 5px; }
    .theme-questra .lives, .theme-questra .score { font-size: 10px; padding: 6px 8px; }
    .theme-questra .level-content li { padding-left: 45px; font-size: 18px; padding-top: 10px; padding-bottom: 10px; }
    .theme-questra .level-content li::before { left: 20px; }
    .theme-questra .mission-item li { font-size: 18px; padding: 10px 0; margin-left: 30px; }
    .theme-questra .mission-item li::before { left: -25px; top: 10px; }
    .theme-questra .mission-item p { font-size: 18px; }
    .theme-questra .power-up-box li, .theme-questra .victory-screen p { font-size: 18px; padding: 10px 0; }
    .theme-questra .danger-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

.theme-legend {
    font-family: 'Press Start 2P', monospace;
}

.theme-legend .l-bg {
    background: linear-gradient(135deg, #1a4d2e 0%, #0f2818 50%, #1a4d2e 100%);
}

.theme-legend .l-stripes {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 215, 0, 0.03) 35px, rgba(255, 215, 0, 0.03) 70px);
    z-index: 1;
}

.theme-legend .triforce-pattern {
    opacity: 0.05;
    background-image: repeating-linear-gradient(60deg, #ffd700 0px, transparent 1px, transparent 29px, #ffd700 30px);
    z-index: 0;
}

.theme-legend .main-container {
    position: relative;
    z-index: 2;
    padding: 20px 10px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.theme-legend .rh {
    color: #ffd700;
    text-shadow: 2px 2px 0 #000;
}

.theme-legend .title-banner {
    background: linear-gradient(135deg, #2d5016, #4a7c2e);
    border: 4px solid #ffd700;
    border-radius: 15px;
    padding: 20px 10px;
    margin-bottom: 25px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.theme-legend .title-banner::before {
    content: '▲';
    position: absolute;
    font-size: 80px;
    color: rgba(255, 215, 0, 0.1);
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.theme-legend h1 {
    color: #ffd700;
    font-size: clamp(18px, 5vw, 42px);
    text-shadow: 3px 3px 0 #8b4513, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    margin-bottom: 10px;
    line-height: 1.3;
    position: relative;
}

.theme-legend .subtitle {
    color: #90ee90;
    font-size: clamp(10px, 2.5vw, 20px);
    text-shadow: 2px 2px 0 #000;
    margin-top: 10px;
    position: relative;
}

.theme-legend .scroll-container {
    background: linear-gradient(to bottom, #3d2817, #2a1810);
    border: 3px solid #8b4513;
    border-radius: 10px;
    padding: 15px 10px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(139, 69, 19, 0.2);
}

.theme-legend .scroll-container::before,
.theme-legend .scroll-container::after {
    content: '❈';
    position: absolute;
    color: #ffd700;
    font-size: 16px;
}

.theme-legend .scroll-container::before { top: 8px; left: 8px; }
.theme-legend .scroll-container::after { bottom: 8px; right: 8px; }

.theme-legend .section-title {
    color: #ffd700;
    font-size: clamp(14px, 3.5vw, 24px);
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    position: relative;
    padding: 8px 0;
    line-height: 1.5;
}

.theme-legend .treasure-amount {
    background: linear-gradient(135deg, #ffd700, #ffed4b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(16px, 4vw, 32px);
    text-align: center;
    margin: 15px 0;
    animation: lglow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    padding: 0 5px;
    word-wrap: break-word;
    line-height: 1.5;
}

.theme-legend .info-text {
    color: #e0e0e0;
    font-size: clamp(11px, 2.8vw, 18px);
    line-height: 1.8;
    text-align: center;
    margin: 8px 0;
    text-shadow: 1px 1px 0 #000;
    padding: 0 5px;
}

.theme-legend .warning-text {
    color: #ff6b6b;
    font-size: clamp(11px, 2.8vw, 18px);
    text-align: center;
    margin: 12px 0;
    animation: lpulse 2s infinite;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5), 1px 1px 0 #000;
    padding: 0 5px;
    line-height: 1.8;
}

.theme-legend .highlight {
    color: #90ee90;
    text-shadow: 0 0 5px rgba(144, 238, 144, 0.5), 1px 1px 0 #000;
    text-align: center;
}

.theme-legend div.highlight {
    font-size: clamp(11px, 2.8vw, 18px);
    line-height: 1.8;
}

.theme-legend .state-list {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #4a7c2e;
    border-radius: 8px;
    padding: 12px;
    margin: 15px auto;
    max-width: 280px;
    width: 90%;
}

.theme-legend .state-item {
    color: #90ee90;
    font-size: clamp(12px, 3vw, 18px);
    margin: 10px 0;
    text-align: center;
    position: relative;
    padding-left: 20px;
}

.theme-legend .state-item::before {
    content: '➤';
    position: absolute;
    left: 0;
    color: #ffd700;
    animation: lfloat 3s ease-in-out infinite;
}

.theme-legend .location-info {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid #ffd700;
    border-radius: 5px;
    padding: 12px;
    margin: 15px auto;
    text-align: center;
    width: 90%;
    max-width: 400px;
}

.theme-legend .location-info p {
    color: #ffd700;
    font-size: clamp(11px, 2.8vw, 16px);
    margin: 6px 0;
    text-shadow: 1px 1px 0 #000;
    line-height: 1.7;
}

.theme-legend .date-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin: 15px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.theme-legend .date-item {
    background: linear-gradient(135deg, #1a1a1a, #333);
    border: 2px solid #ffd700;
    border-radius: 5px;
    padding: 10px 5px;
    text-align: center;
    color: #ffd700;
    font-size: clamp(10px, 2.5vw, 16px);
    text-shadow: 2px 2px 3px #000;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.theme-legend .date-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    background: linear-gradient(135deg, #2d2d2d, #4d4d4d);
}

.theme-legend .date-item .key-state {
    display: block;
    font-size: 8px;
    margin-top: 8px;
    letter-spacing: 1px;
    color: #90ee90;
    opacity: 0.85;
}

.theme-legend .date-item.released {
    border-color: #90ee90;
    background: linear-gradient(135deg, #14361f, #1f5a2e);
    box-shadow: 0 0 18px rgba(144, 238, 144, 0.6);
    animation: lglow 2s ease-in-out infinite;
}

.theme-legend .date-item.released .key-state {
    color: #ffd700;
    opacity: 1;
}

.theme-legend .key-release {
    margin: 18px auto 0;
    max-width: 720px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.theme-legend .key-release-title {
    color: #ffd700;
    font-size: clamp(10px, 2.6vw, 14px);
    margin-bottom: 12px;
    text-shadow: 2px 2px 0 #000;
    line-height: 1.8;
}

.theme-legend .key-string {
    font-family: 'VT323', monospace;
    font-size: clamp(16px, 2.6vw, 22px);
    color: #e8ffe8;
    background: #0b1a10;
    border: 1px dashed #4a7c2e;
    padding: 12px;
    overflow-wrap: anywhere;
    line-height: 1.5;
    text-align: left;
    letter-spacing: 0.5px;
    -webkit-user-select: all;
    user-select: all;
}

.theme-legend .key-copy {
    margin: 12px auto 4px;
    display: block;
    background: #000;
    color: #ffd700;
    border: 2px solid #ffd700;
    padding: 10px 16px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000;
}

.theme-legend .key-copy:hover {
    background: #ffd700;
    color: #000;
}

.theme-legend .rupee-section {
    text-align: center;
    margin: 20px 0;
    font-size: clamp(16px, 3.5vw, 28px);
}

.theme-legend .rupee {
    display: inline-block;
    animation: lspin 3s linear infinite;
    margin: 0 2px;
}

.theme-legend .rupee-section .ember {
    animation: lspin 3s linear infinite;
    opacity: 0.8;
}

.theme-legend .final-message {
    background: linear-gradient(135deg, #1a4d2e, #2d5016);
    border: 3px solid #ffd700;
    border-radius: 15px;
    padding: 20px 10px;
    margin-top: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.theme-legend .final-message::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: lshine 3s infinite;
}

.theme-legend .final-text {
    color: #fff;
    font-size: clamp(12px, 3vw, 22px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 2px 2px 0 #000;
    position: relative;
    z-index: 1;
    line-height: 1.5;
}

.theme-legend .decoration {
    color: #ffd700;
    font-size: clamp(18px, 3.5vw, 30px);
    margin: 0 5px;
}

@keyframes lglow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
}

@keyframes lpulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes lfloat {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@keyframes lspin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes lshine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .theme-legend .main-container { padding: 15px 8px; }
    .theme-legend .title-banner { padding: 15px 8px; margin-bottom: 20px; }
    .theme-legend .scroll-container { padding: 12px 8px; margin-bottom: 15px; }
    .theme-legend h1 { font-size: clamp(16px, 4.5vw, 32px); }
    .theme-legend .section-title { font-size: clamp(12px, 3vw, 20px); }
    .theme-legend .treasure-amount { font-size: clamp(14px, 3.5vw, 28px); }
    .theme-legend .info-text, .theme-legend .warning-text { font-size: clamp(10px, 2.5vw, 16px); }
    .theme-legend .state-item { font-size: clamp(11px, 2.8vw, 16px); }
    .theme-legend .date-item { font-size: clamp(9px, 2.3vw, 14px); padding: 8px 4px; }
}

@media (max-width: 480px) {
    .theme-legend .main-container { padding: 10px 5px; }
    .theme-legend .title-banner { padding: 12px 5px; border-width: 3px; }
    .theme-legend .title-banner::before { font-size: 60px; }
    .theme-legend .scroll-container { padding: 10px 5px; border-width: 2px; }
    .theme-legend .scroll-container::before, .theme-legend .scroll-container::after { font-size: 12px; }
    .theme-legend h1 { font-size: clamp(14px, 4vw, 24px); }
    .theme-legend .subtitle { font-size: clamp(8px, 2.2vw, 14px); }
    .theme-legend .section-title { font-size: clamp(11px, 2.8vw, 18px); margin-bottom: 10px; }
    .theme-legend .treasure-amount { font-size: clamp(12px, 3.2vw, 24px); margin: 10px 0; }
    .theme-legend .info-text, .theme-legend .warning-text { font-size: clamp(9px, 2.3vw, 14px); line-height: 1.6; }
    .theme-legend .state-list { padding: 10px; max-width: 95%; }
    .theme-legend .state-item { font-size: clamp(10px, 2.5vw, 14px); margin: 8px 0; }
    .theme-legend .location-info p { font-size: clamp(9px, 2.3vw, 14px); }
    .theme-legend .date-grid { grid-template-columns: 1fr; gap: 6px; padding: 10px; }
    .theme-legend .date-item { font-size: clamp(9px, 2.2vw, 13px); padding: 8px; }
    .theme-legend .rupee-section { font-size: clamp(14px, 3vw, 20px); margin: 15px 0; }
    .theme-legend .final-text { font-size: clamp(10px, 2.5vw, 18px); }
    .theme-legend .decoration { font-size: clamp(14px, 3vw, 22px); }
}

.theme-key {
    font-family: 'Press Start 2P', monospace;
    color: #fff;
}

.theme-key .starfield {
    background: linear-gradient(180deg, #000 0%, #0a0a2e 50%, #16213e 100%);
}

.theme-key .k-stars {
    z-index: 0;
}

.theme-key .k-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    animation: ktwinkle 3s infinite;
}

.theme-key .k-star:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.theme-key .k-star:nth-child(2) { left: 20%; top: 80%; animation-delay: 0.5s; }
.theme-key .k-star:nth-child(3) { left: 60%; top: 30%; animation-delay: 1s; }
.theme-key .k-star:nth-child(4) { left: 80%; top: 70%; animation-delay: 1.5s; }
.theme-key .k-star:nth-child(5) { left: 25%; top: 10%; animation-delay: 2s; }
.theme-key .k-star:nth-child(6) { left: 90%; top: 40%; animation-delay: 2.5s; }
.theme-key .k-star:nth-child(7) { left: 45%; top: 60%; animation-delay: 0.3s; }
.theme-key .k-star:nth-child(8) { left: 70%; top: 90%; animation-delay: 0.8s; }
.theme-key .k-star:nth-child(9) { left: 15%; top: 50%; animation-delay: 1.3s; }
.theme-key .k-star:nth-child(10) { left: 55%; top: 15%; animation-delay: 1.8s; }
.theme-key .k-star:nth-child(11) { left: 35%; top: 85%; animation-delay: 2.3s; }
.theme-key .k-star:nth-child(12) { left: 75%; top: 25%; animation-delay: 0.2s; }
.theme-key .k-star:nth-child(13) { left: 5%; top: 65%; animation-delay: 0.7s; }
.theme-key .k-star:nth-child(14) { left: 40%; top: 35%; animation-delay: 1.2s; }
.theme-key .k-star:nth-child(15) { left: 85%; top: 55%; animation-delay: 1.7s; }
.theme-key .k-star:nth-child(16) { left: 30%; top: 45%; animation-delay: 2.2s; }
.theme-key .k-star:nth-child(17) { left: 65%; top: 75%; animation-delay: 0.4s; }
.theme-key .k-star:nth-child(18) { left: 50%; top: 5%; animation-delay: 0.9s; }
.theme-key .k-star:nth-child(19) { left: 95%; top: 85%; animation-delay: 1.4s; }
.theme-key .k-star:nth-child(20) { left: 22%; top: 95%; animation-delay: 1.9s; }

.theme-key .k-scan {
    z-index: 1000;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 2px);
    animation: scanlines 8s linear infinite;
    opacity: 0.3;
}

.theme-key .game-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.theme-key .rh {
    color: #00ffff;
    text-shadow: 1px 1px 0 #000;
}

.theme-key .title-section {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding: 40px 20px;
}

.theme-key .main-title {
    font-size: clamp(36px, 7vw, 64px);
    background: linear-gradient(180deg, #ffeb3b 0%, #ff9800 50%, #ff6b00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px;
    letter-spacing: 4px;
    line-height: 1.2;
    font-weight: bold;
    animation: kglow 2s ease-in-out infinite alternate;
}

@keyframes kglow {
    from { filter: drop-shadow(0 0 20px rgba(255,235,59,0.5)); }
    to { filter: drop-shadow(0 0 30px rgba(255,152,0,0.8)); }
}

.theme-key .key-decoration {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    position: relative;
    animation: spinKey 4s linear infinite;
}

.theme-key .key-decoration::before {
    content: '🗝️';
    font-size: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 20px rgba(255,235,59,0.8));
}

.theme-key .lightning {
    position: absolute;
    font-size: 40px;
    color: #00ffff;
    animation: kflash 2s infinite;
}

.theme-key .lightning.left { left: 0.5%; top: 20%; transform: rotate(-15deg); }
.theme-key .lightning.right { right: 0.5%; top: 20%; transform: rotate(15deg); }

.theme-key .riddle-box {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 4px solid #00ffff;
    border-radius: 0;
    padding: clamp(30px, 5vw, 50px);
    margin-bottom: 40px;
    position: relative;
    box-shadow: 0 0 20px rgba(0,255,255,0.6), inset 0 0 20px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}

.theme-key .riddle-box:hover {
    transform: scale(1.02);
}

.theme-key .corner-decoration {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #ffeb3b;
}

.theme-key .corner-decoration.top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.theme-key .corner-decoration.top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.theme-key .corner-decoration.bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.theme-key .corner-decoration.bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.theme-key .riddle-title {
    font-size: clamp(20px, 3.5vw, 28px);
    background: linear-gradient(90deg, #ffeb3b, #ff9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    line-height: 1.4;
}

.theme-key .riddle-title::before {
    content: '★';
    color: #ff00ff;
    animation: kspin 2s linear infinite;
    font-size: clamp(20px, 3.5vw, 28px);
    -webkit-text-fill-color: #ff00ff;
}

.theme-key .riddle-text {
    font-size: clamp(12px, 2vw, 14px);
    line-height: 2.2;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    white-space: pre-line;
    background: rgba(0,0,0,0.6);
    padding: clamp(20px, 4vw, 35px);
    border: 2px solid #4444ff;
    letter-spacing: 1px;
}

.theme-key .location-riddle .riddle-text {
    cursor: pointer;
    position: relative;
    text-align: center;
}

.theme-key .word {
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding: 0 2px;
}

.theme-key .word:hover {
    transform: scale(1.3) translateY(-2px);
    color: #ffeb3b;
    text-shadow: 1px 1px 0 #000, 0 0 15px rgba(255,235,59,0.9);
    z-index: 10;
}

.theme-key .word.special {
    color: #00ffff;
    animation: subtle-glow 3s infinite;
}

@keyframes subtle-glow {
    0%, 100% { text-shadow: 1px 1px 0 #000, 0 0 5px rgba(0,255,255,0.3); }
    50% { text-shadow: 1px 1px 0 #000, 0 0 10px rgba(0,255,255,0.6); }
}

.theme-key .word.special:hover {
    transform: scale(1.4) translateY(-3px);
    color: #ff00ff;
    text-shadow: 1px 1px 0 #000, 0 0 20px rgba(255,0,255,1);
    animation: none;
}

.theme-key .footer {
    text-align: center;
    margin-top: 60px;
    padding: 30px 20px;
    font-size: clamp(10px, 1.8vw, 14px);
    color: #00ffff;
    text-shadow: 1px 1px 0 #000;
}

.theme-key .footer p {
    margin: 15px 0;
    animation: kblink 1s infinite;
    line-height: 1.6;
}

.theme-key .end-of-level {
    text-align: center;
    margin: 60px auto 0;
    max-width: 640px;
    padding: 30px 20px;
    border: 3px solid #4444ff;
    background: rgba(0,0,0,0.6);
    box-shadow: 0 0 20px rgba(68,68,255,0.4);
}

.theme-key .end-of-level .eol-title {
    font-size: clamp(14px, 3.5vw, 24px);
    color: #ffeb3b;
    text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255,235,59,0.6);
    margin-bottom: 18px;
    line-height: 1.6;
}

.theme-key .end-of-level p {
    font-size: clamp(10px, 2vw, 12px);
    color: #ccc;
    line-height: 2;
    animation: none;
}

@keyframes ktwinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes spinKey {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes kflash {
    0%, 100% { opacity: 0; }
    25%, 75% { opacity: 1; }
}

@keyframes kspin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes kblink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@media (max-width: 768px) {
    .theme-key .game-container { padding: 15px; }
    .theme-key .title-section { padding: 30px 15px; margin-bottom: 30px; }
    .theme-key .main-title { margin-bottom: 20px; letter-spacing: 2px; }
    .theme-key .key-decoration { width: 80px; height: 80px; margin: 15px auto; }
    .theme-key .key-decoration::before { font-size: 50px; }
    .theme-key .lightning { font-size: 30px; }
    .theme-key .riddle-box { margin-bottom: 30px; border-width: 3px; }
    .theme-key .riddle-title { letter-spacing: 2px; margin-bottom: 20px; gap: 15px; }
    .theme-key .riddle-text { line-height: 2; letter-spacing: 0.5px; }
    .theme-key .footer { margin-top: 40px; padding: 20px 15px; }
}

@media (max-width: 480px) {
    .theme-key .title-section { padding: 25px 10px; }
    .theme-key .riddle-title { letter-spacing: 1px; gap: 10px; }
    .theme-key .riddle-text { letter-spacing: 0; padding: 15px; font-size: 11px; }
    .theme-key .word:hover { transform: scale(1.2) translateY(-1px); }
    .theme-key .word.special:hover { transform: scale(1.25) translateY(-2px); }
}

.theme-veil {
    font-family: 'VT323', monospace;
    color: #9a9a9a;
    background: #000;
}

.theme-veil .v-fog {
    background:
        radial-gradient(ellipse 60% 40% at 20% 30%, rgba(60,60,70,0.18), transparent 70%),
        radial-gradient(ellipse 50% 50% at 80% 70%, rgba(40,40,55,0.18), transparent 70%),
        radial-gradient(ellipse 70% 30% at 50% 100%, rgba(30,30,40,0.25), transparent 70%);
    animation: fogDrift 40s ease-in-out infinite alternate;
}

@keyframes fogDrift {
    from { transform: translate(-3%, 0) scale(1.05); }
    to { transform: translate(3%, -2%) scale(1.1); }
}

.theme-veil .v-scan {
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 3px);
    z-index: 3000;
    opacity: 0.6;
}

.theme-veil .v-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 12px;
    position: relative;
    z-index: 2;
}

.theme-veil .rh {
    font-family: 'Press Start 2P', monospace;
    color: #444;
}

.theme-veil .v-title {
    font-family: 'Press Start 2P', monospace;
    text-align: center;
    color: #2b2b2b;
    font-size: clamp(14px, 4vw, 28px);
    letter-spacing: 3px;
    margin: 10px 0 8px;
    text-shadow: 0 0 18px rgba(80,80,100,0.5);
    line-height: 1.5;
    animation: veilBreathe 6s ease-in-out infinite;
}

@keyframes veilBreathe {
    0%, 100% { color: #2b2b2b; }
    50% { color: #4a4a58; }
}

.theme-veil .v-subtitle {
    text-align: center;
    color: #3d3d46;
    font-size: clamp(14px, 3vw, 20px);
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.theme-veil .terminal {
    background: #050505;
    border: 3px solid #1f1f1f;
    box-shadow: 0 0 0 1px #000, 0 0 40px rgba(0,0,0,0.9), inset 0 0 40px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

.theme-veil .term-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: #0b0b0b;
    border-bottom: 2px solid #1f1f1f;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #4a4a4a;
    letter-spacing: 1px;
}

.theme-veil .term-header .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #2a2a2a;
    margin-right: 4px;
}

.theme-veil .term-header .dot.live {
    background: #5a1010;
    animation: qblink 2s infinite;
}

.theme-veil .term-out {
    flex: 1;
    padding: 16px 14px 8px;
    font-size: clamp(17px, 2.6vw, 22px);
    line-height: 1.35;
    color: #a8a8a8;
    overflow-y: auto;
    max-height: 62vh;
    scrollbar-width: thin;
    scrollbar-color: #222 #050505;
}

.theme-veil .term-out .ln {
    white-space: pre-wrap;
    word-break: break-word;
    animation: lnIn 0.12s steps(2);
}

@keyframes lnIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.theme-veil .term-out .ln:empty { height: 0.7em; }
.theme-veil .term-out .ln.echo { color: #6f6f6f; }
.theme-veil .term-out .ln.dim { color: #4d4d4d; }
.theme-veil .term-out .ln.sys { color: #7a7a8a; }
.theme-veil .term-out .ln.warn { color: #8a3a3a; }
.theme-veil .term-out .ln.glow { color: #ff9a2a; text-shadow: 0 0 8px rgba(255,120,0,0.6); }
.theme-veil .term-out .ln.bright { color: #e8e8e8; text-shadow: 0 0 8px rgba(255,255,255,0.35); }

.theme-veil .term-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 14px;
    border-top: 1px dashed #1a1a1a;
}

.theme-veil .term-prompt {
    color: #8a8a9a;
    font-size: clamp(17px, 2.6vw, 22px);
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(120,120,160,0.4);
}

.theme-veil .term-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: #d0d0d0;
    font-family: 'VT323', monospace;
    font-size: clamp(17px, 2.6vw, 22px);
    caret-color: #d0d0d0;
    text-transform: uppercase;
    min-width: 0;
}

.theme-veil .term-send {
    background: #0b0b0b;
    color: #7a7a7a;
    border: 2px solid #2a2a2a;
    padding: 6px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    cursor: pointer;
}

.theme-veil .term-send:hover {
    color: #e0e0e0;
    border-color: #555;
}

.theme-veil .v-reveal {
    display: none;
    margin-top: 26px;
    text-align: center;
    padding: 30px 16px;
    border: 3px solid #ffb000;
    background: radial-gradient(ellipse at center, rgba(60,30,0,0.6), rgba(0,0,0,0.9) 70%);
    box-shadow: 0 0 40px rgba(255,150,0,0.35), inset 0 0 40px rgba(255,120,0,0.15);
    animation: revealIn 0.8s steps(6);
}

.theme-veil .v-reveal.open {
    display: block;
}

@keyframes revealIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.theme-veil .lantern {
    position: relative;
    width: 60px;
    height: 84px;
    margin: 0 auto 22px;
}

.theme-veil .lantern::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    background: transparent;
    box-shadow:
        24px 0 0 #ffe066,
        24px 12px 0 #ffe066, 36px 12px 0 #ffe066,
        12px 24px 0 #ff8c00, 24px 24px 0 #ffe066, 36px 24px 0 #ff8c00,
        12px 36px 0 #ff3300, 24px 36px 0 #ff8c00, 36px 36px 0 #ff8c00,
        0 48px 0 #ff3300, 12px 48px 0 #ff8c00, 24px 48px 0 #fff2a8, 36px 48px 0 #ff8c00, 48px 48px 0 #ff3300,
        0 60px 0 #ff3300, 12px 60px 0 #ff8c00, 24px 60px 0 #fff2a8, 36px 60px 0 #ff8c00, 48px 60px 0 #ff3300,
        12px 72px 0 #ff3300, 24px 72px 0 #ff8c00, 36px 72px 0 #ff3300;
    filter: drop-shadow(0 0 12px #ff9a00);
    animation: lanternFlicker 0.9s steps(2) infinite;
}

@keyframes lanternFlicker {
    0%, 100% { filter: drop-shadow(0 0 12px #ff9a00); }
    50% { filter: drop-shadow(0 0 20px #ffc040); }
}

.theme-veil .v-reveal .reveal-text {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 2.4vw, 14px);
    color: #ffd27a;
    line-height: 2;
    text-shadow: 2px 2px 0 #000;
    margin-bottom: 22px;
}

.theme-veil .veil-link {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 2.6vw, 14px);
    color: #000;
    background: #ffb000;
    text-decoration: none;
    padding: 18px 22px;
    border: 4px solid #000;
    box-shadow: 0 6px 0 #a06000, 0 0 30px rgba(255,176,0,0.6);
    line-height: 1.8;
    text-transform: uppercase;
    transition: transform 0.08s;
}

.theme-veil .veil-link:hover {
    background: #ffd000;
    transform: translateY(-2px);
}

.theme-veil .veil-link:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #a06000, 0 0 30px rgba(255,176,0,0.6);
}

.theme-veil .v-foot {
    text-align: center;
    color: #2e2e2e;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    margin-top: 26px;
    letter-spacing: 2px;
    line-height: 2;
}

@media (max-width: 480px) {
    .theme-veil .terminal { min-height: 55vh; }
    .theme-veil .term-header { font-size: 6px; }
}

.theme-back {
    background: #000;
    color: #FFFFFF;
    font-family: 'Press Start 2P', monospace;
    line-height: 1.8;
    padding: 20px;
}

.theme-back .back-bg {
    background: #000;
}

.theme-back .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px 40px;
    position: relative;
    z-index: 2;
}

.theme-back .rh {
    color: #bbb;
    padding: 12px 0;
}

.theme-back .header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
    border: 4px solid #FFFFFF;
    background-color: #1a1a1a;
    box-shadow: 8px 8px 0 #333333;
}

.theme-back .header h1 {
    font-size: 20px;
    margin-bottom: 20px;
    text-shadow: 3px 3px 0 #666666;
    animation: backPulse 2s infinite;
    line-height: 1.6;
}

.theme-back .header.small {
    padding: 14px;
    margin-bottom: 30px;
}

.theme-back .header.small h1 {
    font-size: 12px;
    margin-bottom: 10px;
    animation: none;
}

.theme-back .header .cont {
    font-size: 8px;
    color: #aaa;
    letter-spacing: 2px;
}

@keyframes backPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.theme-back .section {
    margin-bottom: 30px;
    padding: 20px;
    border: 2px solid #FFFFFF;
    background-color: #0a0a0a;
}

.theme-back .section-title {
    font-size: 14px;
    margin-bottom: 15px;
    color: #FFFFFF;
    text-decoration: underline;
    line-height: 1.7;
}

.theme-back .quest-briefing {
    border: 4px solid #FFFFFF;
    background-color: #1a0000;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 8px 8px 0 #330000;
}

.theme-back .quest-briefing h2 {
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 2px 2px 0 #660000;
    line-height: 1.7;
}

.theme-back .rule-item {
    margin-bottom: 20px;
    padding-left: 10px;
}

.theme-back .rule-header {
    font-size: 12px;
    margin-bottom: 10px;
    color: #FFFFFF;
    line-height: 1.7;
}

.theme-back .rule-content {
    font-size: 9px;
    line-height: 1.6;
    padding-left: 15px;
}

.theme-back .unauthorized {
    background-color: #1a0000;
    padding: 20px;
    border: 3px solid #FFFFFF;
    margin-top: 20px;
}

.theme-back .unauthorized h3 {
    font-size: 12px;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.7;
}

.theme-back ul {
    list-style: none;
    padding-left: 15px;
}

.theme-back ul li {
    font-size: 9px;
    line-height: 1.8;
    margin-bottom: 4px;
}

.theme-back ul li::before {
    content: "▸ ";
    color: #FFFFFF;
    font-weight: bold;
}

.theme-back .warning {
    color: #FF0000;
    text-shadow: 2px 2px 0 #660000;
}

.theme-back .emoji {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.theme-back p {
    font-size: 9px;
    margin-bottom: 12px;
    line-height: 1.9;
}

.theme-back strong {
    color: #fff;
}

.theme-back .eligibility-notice {
    border: 3px solid #FFFFFF;
    background-color: #1a1a00;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 5px 5px 0 #333300;
}

.theme-back .eligibility-notice h3 {
    font-size: 12px;
    margin-bottom: 15px;
    text-align: center;
    color: #FFFF66;
    text-shadow: 2px 2px 0 #666600;
    line-height: 1.7;
}

.theme-back .eligibility-notice h4 {
    font-size: 10px;
    margin-top: 15px;
    margin-bottom: 8px;
    color: #FFFFFF;
    text-decoration: underline;
    line-height: 1.7;
}

.theme-back .eligibility-notice p {
    font-size: 9px;
    margin-bottom: 10px;
}

.theme-back .eligibility-notice ul {
    margin: 10px 0;
    padding-left: 20px;
}

.theme-back .eligibility-notice ul li {
    font-size: 9px;
    margin-bottom: 5px;
}

.theme-back .signature {
    font-size: 9px;
    text-align: right;
    margin-top: 15px;
    font-style: italic;
    color: #CCCCCC;
}

.theme-back .divider {
    height: 2px;
    background-color: #FFFFFF;
    margin: 30px 0;
}

.theme-back .home-button-container {
    text-align: center;
    margin: 40px 0;
    padding: 20px;
}

.theme-back .home-btn {
    background-color: #000000;
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
    padding: 15px 40px;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    box-shadow: 5px 5px 0 #666666;
}

.theme-back .home-btn:hover {
    background-color: #FFFFFF;
    color: #000000;
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #666666;
}

.theme-back .home-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #666666;
}

@media (max-width: 768px) {
    .theme-back { padding: 10px; }
    .theme-back .container { padding: 10px 6px 30px; }
    .theme-back .header h1 { font-size: 14px; }
    .theme-back .section-title { font-size: 11px; }
    .theme-back .rule-header { font-size: 10px; }
    .theme-back p, .theme-back .rule-content, .theme-back ul li { font-size: 8px; }
    .theme-back .home-btn { font-size: 10px; padding: 12px 30px; }
    .theme-back .eligibility-notice h3 { font-size: 10px; }
    .theme-back .eligibility-notice h4 { font-size: 9px; }
    .theme-back .eligibility-notice p, .theme-back .eligibility-notice ul li { font-size: 8px; }
    .theme-back .section, .theme-back .quest-briefing, .theme-back .eligibility-notice { padding: 14px 12px; }
}

.egg-overlay {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
    padding: 16px;
}

.egg-overlay[hidden] {
    display: none;
}

.egg-overlay img {
    max-width: min(92vw, 1002px);
    max-height: 90vh;
    image-rendering: pixelated;
    border: 4px solid #000;
    box-shadow: 0 0 0 4px #FCBF2C, 0 0 40px rgba(0,0,0,0.8);
    animation: eggPop 0.25s steps(5);
}

.egg-close {
    margin-top: 26px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
    animation: flash 1s infinite;
}

.road-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: eggPop 0.3s steps(6);
    image-rendering: pixelated;
}

.sign-face {
    width: 190px;
    height: 190px;
    background: #FFD500;
    border: 8px solid #000;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px #FFD500, 8px 8px 0 4px rgba(0,0,0,0.45);
    margin-top: 30px;
}

.sign-face span {
    transform: rotate(-45deg);
    font-family: 'Press Start 2P', monospace;
    font-size: 22px;
    color: #000;
    letter-spacing: 2px;
}

.sign-post {
    width: 22px;
    height: 170px;
    margin-top: 44px;
    background: repeating-linear-gradient(180deg, #8a8a8a 0px, #8a8a8a 8px, #5f5f5f 8px, #5f5f5f 16px);
    border: 4px solid #000;
    box-shadow: 6px 0 0 rgba(0,0,0,0.35);
}

@keyframes eggPop {
    from { transform: scale(0.2); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (max-width: 480px) {
    .sign-face { width: 140px; height: 140px; border-width: 6px; }
    .sign-face span { font-size: 15px; }
    .sign-post { height: 120px; margin-top: 34px; }
}

.theme-estrada {
    background: #020202;
    color: #00ff41;
    font-family: 'Share Tech Mono', monospace;
}

.theme-estrada .e-bg {
    background: #020202;
}

.theme-estrada .e-scan {
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.13) 2px, rgba(0,0,0,0.13) 4px);
    z-index: 100;
}

.theme-estrada .wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 24px 60px;
    position: relative;
    z-index: 10;
}

.theme-estrada .rh {
    font-family: 'Press Start 2P', monospace;
    color: #00ff4166;
    padding: 12px 0 28px;
}

.theme-estrada .boot {
    font-size: 9px;
    color: #00ff4155;
    line-height: 2.3;
    margin-bottom: 56px;
    font-family: 'Press Start 2P', monospace;
}

.theme-estrada .boot div { opacity: 0; animation: eAppear 0.1s forwards; }
.theme-estrada .boot div:nth-child(1) { animation-delay: 0.2s; }
.theme-estrada .boot div:nth-child(2) { animation-delay: 0.6s; }
.theme-estrada .boot div:nth-child(3) { animation-delay: 1.0s; }
.theme-estrada .boot div:nth-child(4) { animation-delay: 1.5s; }
.theme-estrada .boot div:nth-child(5) { animation-delay: 1.9s; }
.theme-estrada .boot div:nth-child(6) { animation-delay: 2.4s; }

.theme-estrada .ok { color: #00ff41bb; }
.theme-estrada .err { color: #ff220077; }
.theme-estrada .dim { color: #00ff4133; }

@keyframes eAppear { to { opacity: 1; } }

.theme-estrada .title-wrap {
    text-align: center;
    margin-bottom: 10px;
    opacity: 0;
    animation: eAppear 0.3s 2.7s forwards;
}

.theme-estrada .glitch {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(20px, 5vw, 40px);
    color: #ff2200;
    display: inline-block;
    position: relative;
    letter-spacing: 6px;
    animation: eJolt 5s infinite;
}

.theme-estrada .glitch::before {
    content: attr(data-t);
    position: absolute;
    left: 3px;
    top: 0;
    color: #0044ff;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    animation: eGA 3s infinite;
    opacity: 0.85;
}

.theme-estrada .glitch::after {
    content: attr(data-t);
    position: absolute;
    left: -3px;
    top: 0;
    color: #ffd700;
    clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
    animation: eGB 3.8s infinite;
    opacity: 0.85;
}

@keyframes eJolt {
    0%, 90%, 100% { transform: none; }
    91% { transform: translate(-2px, 1px); }
    93% { transform: translate(2px, -1px); }
    94% { transform: none; }
}

@keyframes eGA {
    0%, 87%, 100% { transform: none; }
    88% { transform: translate(5px, -2px); }
    90% { transform: none; }
}

@keyframes eGB {
    0%, 85%, 100% { transform: none; }
    86% { transform: translate(-5px, 2px); }
    88% { transform: none; }
}

.theme-estrada .slash {
    display: block;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(8px, 1.8vw, 13px);
    color: #ffffff;
    letter-spacing: 4px;
    margin-top: 8px;
}

.theme-estrada .sub {
    text-align: center;
    font-size: 8px;
    color: #00ff41aa;
    letter-spacing: 7px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0;
    animation: eAppear 0.3s 3.0s forwards;
    font-family: 'Press Start 2P', monospace;
}

.theme-estrada .intro-block {
    border: 1px solid #00ff4118;
    background: #050905;
    padding: 22px 24px;
    margin: 38px 0 52px;
    font-size: 13px;
    color: #00ff4199;
    line-height: 1.9;
    opacity: 0;
    animation: eAppear 0.4s 3.3s forwards;
}

.theme-estrada .intro-block .label {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ffd700;
    display: block;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.theme-estrada .intro-block strong { color: #00ff41cc; }

.theme-estrada .section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #ffd700;
    margin: 0 0 18px;
    opacity: 0;
    animation: eAppear 0.3s 3.7s forwards;
}

.theme-estrada .section-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #ffd70066, transparent);
}

.theme-estrada .card {
    background: #060606;
    border-left: 3px solid #1c1c1c;
    padding: 20px 22px;
    margin-bottom: 14px;
    opacity: 0;
    animation: eSlidein 0.4s forwards;
    transition: border-left-color 0.3s;
}

.theme-estrada .card:hover { border-left-color: #ff2200; }
.theme-estrada .card:nth-child(1) { animation-delay: 4.0s; }
.theme-estrada .card:nth-child(2) { animation-delay: 4.5s; }
.theme-estrada .card:nth-child(3) { animation-delay: 5.0s; }
.theme-estrada .card:nth-child(4) { animation-delay: 5.5s; }
.theme-estrada .card:nth-child(5) { animation-delay: 6.0s; }
.theme-estrada .card:nth-child(6) { animation-delay: 6.5s; }
.theme-estrada .card:nth-child(7) { animation-delay: 7.0s; }
.theme-estrada .card:nth-child(8) { animation-delay: 7.5s; }

@keyframes eSlidein {
    from { transform: translateX(-10px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.theme-estrada .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.theme-estrada .card-id {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ff2200;
}

.theme-estrada .card-stamp {
    font-size: 10px;
    color: #00ff4166;
}

.theme-estrada .card-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #ffd700;
    margin-bottom: 12px;
    line-height: 1.8;
}

.theme-estrada .card-body {
    font-size: 13px;
    color: #a0d8a0;
    line-height: 1.85;
}

.theme-estrada .card-body .loc { color: #ffd700; }
.theme-estrada .card-body .note { color: #00ff4188; font-size: 12px; }
.theme-estrada .card-body a { color: #ffd700; text-decoration: none; }
.theme-estrada .card-body a:hover { text-decoration: underline; }

.theme-estrada .status {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    padding: 4px 10px;
    margin-top: 14px;
    border-radius: 2px;
}

.theme-estrada .status-fixed { background: #001800; color: #00ff41; border: 1px solid #00ff4144; }
.theme-estrada .status-logged { background: #1a0e00; color: #ffd700; border: 1px solid #ffd70044; }

.theme-estrada .footer-note {
    margin-top: 64px;
    font-size: 11px;
    color: #00ff41;
    text-align: center;
    line-height: 2.2;
    opacity: 0;
    animation: eAppear 0.4s 5.2s forwards;
}

.theme-estrada .footer-note .label {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ffd700;
}

.theme-estrada .cursor {
    display: inline-block;
    width: 8px;
    height: 13px;
    background: #00ff41;
    vertical-align: middle;
    margin-left: 3px;
    animation: eBlink 1.1s step-end infinite;
}

@keyframes eBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.theme-estrada .home-btn {
    display: block;
    width: fit-content;
    margin: 40px auto 0;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #00ff4188;
    text-decoration: none;
    letter-spacing: 4px;
    padding: 10px 18px;
    border: 1px solid #00ff4122;
    transition: color 0.3s, border-color 0.3s;
    opacity: 0;
    animation: eAppear 0.4s 5.6s forwards;
}

.theme-estrada .home-btn:hover {
    color: #ffd700;
    border-color: #ffd70066;
}

@media (max-width: 480px) {
    .theme-estrada .wrap { padding: 14px 12px 50px; }
    .theme-estrada .boot { font-size: 7px; }
    .theme-estrada .card { padding: 16px 14px; }
    .theme-estrada .intro-block { padding: 16px 14px; }
}

.theme-origin .qb {
    position: absolute;
    top: -5px;
    right: 30px;
    background: #FFF;
    color: #FFB037;
    width: 30px;
    height: 30px;
    border: 3px solid #000;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 3px 0 #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.theme-origin .qb.bump {
    animation: qBump 0.25s steps(3);
}

@keyframes qBump {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

.dh-overlay {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    padding: 12px;
}

.dh-overlay[hidden] {
    display: none;
}

.dh-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(94vw, 768px);
}

.dh-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(11px, 3vw, 16px);
    color: #FCBF2C;
    text-shadow: 3px 3px 0 #000;
    letter-spacing: 2px;
}

#dh-canvas {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    border: 4px solid #000;
    box-shadow: 0 0 0 4px #FCBF2C, 0 0 40px rgba(0,0,0,0.8);
    cursor: crosshair;
    touch-action: none;
    background: #5C94FC;
}

.dh-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ccc;
    letter-spacing: 1px;
}

.dh-buttons {
    display: flex;
    gap: 8px;
}

.dh-bar button {
    background: #000;
    color: #FCBF2C;
    border: 3px solid #FCBF2C;
    padding: 10px 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    cursor: pointer;
}

.dh-bar button:hover {
    background: #FCBF2C;
    color: #000;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
    }
}