quiz/app/static/css/style.css

:root {
    --bg-dark: #0b0b16;
    --bg-card: rgba(20, 22, 40, 0.9);
    --bg-card-hover: rgba(28, 31, 56, 0.95);
    --gold: #c9a86a;
    --gold-bright: #ffd700;
    --gold-soft: #e6c98f;
    --text-main: #f5f5f7;
    --text-muted: #b8b8cc;
    --parchment: #f6eedb;
    --wax-red: #8b0000;
    --success: #2ecc71;
    --danger: #e74c3c;
    --warning: #f39c12;
    --border-gold: rgba(201, 168, 106, 0.35);
    --header-height: 56px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(201, 168, 106, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(116, 0, 1, 0.08) 0%, transparent 50%);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Georgia", "Times New Roman", serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    line-height: 1.5;
}

/* =========================================
   HEADER & NAVIGATION (Mobile-First)
   ========================================= */
.site-header {
    background: rgba(11, 11, 22, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-gold);
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
}

.header-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--gold);
    font-weight: bold;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

.brand-sparkle {
    font-size: 1.25rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-switch-group {
    display: inline-flex;
    background: rgba(20, 22, 40, 0.85);
    border: 1px solid var(--border-gold);
    border-radius: 20px;
    padding: 2px;
    overflow: hidden;
}

.lang-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lang-btn:hover {
    color: var(--gold);
}

.lang-btn.active {
    background: var(--gold);
    color: #0b0b16;
    box-shadow: 0 0 8px rgba(201, 168, 106, 0.4);
}

.audio-btn {
    background: rgba(201, 168, 106, 0.15);
    border: 1px solid var(--gold);
    color: var(--gold-soft);
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    min-height: 36px;
}

.audio-btn:hover {
    background: var(--gold);
    color: #000;
}

.menu-toggle-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--border-gold);
    color: var(--gold);
    font-size: 1.3rem;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.nav-links {
    display: flex;
    gap: 18px;
    align-items: center;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--gold-bright);
    background: rgba(201, 168, 106, 0.1);
}

/* =========================================
   CONTAINER & LAYOUT
   ========================================= */
.container {
    flex: 1;
    max-width: 760px;
    width: 100%;
    margin: 20px auto;
    padding: 0 16px;
}

.admin-wrapper {
    max-width: 900px;
    width: 100%;
    margin: 20px auto;
    padding: 0 16px;
}

.quiz-wrapper {
    width: 100%;
}

.quiz-header {
    text-align: center;
    margin-bottom: 20px;
}

.glow-title {
    color: var(--gold);
    font-size: clamp(1.35rem, 5vw, 2.1rem);
    letter-spacing: 0.5px;
    text-shadow: 0 0 14px rgba(201, 168, 106, 0.4);
    margin-bottom: 6px;
    word-break: break-word;
}

.subtitle {
    color: var(--text-muted);
    font-size: clamp(0.85rem, 3vw, 1rem);
    font-style: italic;
    margin-bottom: 15px;
}

/* =========================================
   CARD COMPONENT
   ========================================= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: 14px;
    padding: clamp(16px, 4vw, 28px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 20px;
    width: 100%;
}

/* =========================================
   ANTIQUE HOGWARTS CLOSED ENVELOPE & LETTER REVEAL
   ========================================= */
.intro-parchment-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 600px;
    margin: 0 auto;
}

.antique-envelope-scene {
    position: relative;
    width: min(480px, 94vw);
    height: min(280px, 60vw);
    margin: 25px auto 35px;
    perspective: 1200px;
    perspective-origin: center top;
    transition: margin-top 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.antique-envelope-scene.envelope-opened {
    margin-top: 155px;
    margin-bottom: 25px;
}

.envelope-base {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    box-shadow: 
        0 20px 45px rgba(0, 0, 0, 0.75),
        0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.6s ease;
}

/* Interior of envelope (visible when flap opens and letter rises) */
.envelope-interior {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background-color: #d1be9b;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%),
        url('/static/img/parchment_texture.jpg');
    background-size: cover;
    border: 2px solid #7a5c36;
    z-index: 1;
}

/* The Letter inside the envelope (slides up when opened) */
.letter-sheet {
    position: absolute;
    top: 15px;
    left: 4%;
    width: 92%;
    height: 440px;
    max-height: 75vh;
    background-color: #f7f0df;
    background-image: 
        radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(140, 100, 50, 0.15) 100%),
        url('/static/img/parchment_texture.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    border: 1.5px solid #8e6c43;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    z-index: 2;
    /* In closed state: 100% completely hidden, invisible, non-rendered */
    visibility: hidden;
    opacity: 0;
    transform: translateY(50px) scale(0.92);
    pointer-events: none;
    transition: transform 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) 0.35s, 
                opacity 0.6s ease 0.35s, 
                visibility 0.6s ease 0.35s,
                box-shadow 0.8s ease;
    overflow-y: auto;
    text-align: center;
    outline: 1px dashed rgba(130, 95, 55, 0.45);
    outline-offset: -5px;
    scrollbar-width: thin;
    scrollbar-color: #8c6838 transparent;
}

.letter-sheet::-webkit-scrollbar {
    width: 6px;
}

.letter-sheet::-webkit-scrollbar-thumb {
    background-color: #8c6838;
    border-radius: 4px;
}

/* =========================================
   FOUR-FLAP REALISTIC CLOSED ENVELOPE SYSTEM
   Flaps: Left, Right, Bottom, and Top Flap
   ========================================= */
.envelope-flap {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Left Triangular Flap */
.envelope-flap.flap-left {
    background-color: #ebdcb9;
    background-image: 
        radial-gradient(ellipse at 0% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(130, 95, 45, 0.22) 100%),
        url('/static/img/parchment_texture.jpg');
    background-size: cover;
    clip-path: polygon(0 0, 50% 50%, 0 100%);
    z-index: 3;
    filter: drop-shadow(2px 0 4px rgba(60, 40, 15, 0.25));
}

/* Right Triangular Flap */
.envelope-flap.flap-right {
    background-color: #ebdcb9;
    background-image: 
        radial-gradient(ellipse at 100% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(130, 95, 45, 0.22) 100%),
        url('/static/img/parchment_texture.jpg');
    background-size: cover;
    clip-path: polygon(100% 0, 50% 50%, 100% 100%);
    z-index: 3;
    filter: drop-shadow(-2px 0 4px rgba(60, 40, 15, 0.25));
}

/* Bottom Flap (Folds up from bottom, overlaps left/right flaps, holds the address) */
.envelope-flap.flap-bottom {
    background-color: #dfcd9f;
    background-image: 
        radial-gradient(ellipse at 50% 80%, rgba(255, 255, 255, 0.28) 0%, rgba(130, 95, 45, 0.25) 100%),
        url('/static/img/parchment_texture.jpg');
    background-size: cover;
    clip-path: polygon(0 100%, 50% 48%, 100% 100%);
    z-index: 4;
    filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.35));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
}

.envelope-sketch-border {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    height: 48%;
    border: 1px dashed rgba(120, 85, 45, 0.4);
    border-radius: 3px;
    pointer-events: none;
}

/* Handwritten Address in Emerald Ink on Envelope Bottom Flap */
.envelope-address-block {
    position: relative;
    z-index: 5;
    text-align: center;
    font-family: 'Marck Script', 'Caveat', cursive;
    color: #0d3820; /* Authentic Hogwarts Emerald Ink */
    padding: 0 15px;
    text-shadow: 0 0 1px rgba(13, 56, 32, 0.35);
    margin-bottom: 2px;
}

.addr-school {
    font-size: clamp(0.85rem, 2.9vw, 1.08rem);
    font-weight: 700;
    color: #082816;
    margin-bottom: 1px;
}

.addr-recipient {
    font-size: clamp(1.05rem, 3.4vw, 1.28rem);
    font-weight: 700;
    color: #0b3a20;
    margin-bottom: 1px;
}

.addr-location {
    font-size: clamp(0.8rem, 2.5vw, 0.96rem);
    font-style: italic;
    color: #1e4530;
}

/* Top Closing Flap (Folds down from top, overlaps all flaps, sealed by wax seal) */
.envelope-closing-flap.flap-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e5d4a6;
    background-image: 
        radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.35) 0%, rgba(130, 95, 45, 0.25) 100%),
        url('/static/img/parchment_texture.jpg');
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 50% 54%);
    transform-origin: top center;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 6;
    border-top: 2px solid #8e6c43;
    filter: drop-shadow(0 6px 9px rgba(45, 30, 10, 0.55));
}

.flap-sketch-line {
    position: absolute;
    inset: 4px;
    clip-path: polygon(2% 2%, 98% 2%, 50% 52%);
    border-top: 1px dashed rgba(120, 85, 45, 0.4);
    pointer-events: none;
}

/* Sketched Wax Seal placed right over the flap intersection in the center */
.sketched-wax-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 7;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.4s ease;
    box-shadow: 
        0 8px 22px rgba(0, 0, 0, 0.75),
        0 2px 6px rgba(0, 0, 0, 0.45);
}

.sketched-wax-seal:hover {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
    box-shadow: 
        0 12px 28px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(218, 165, 32, 0.45);
}

.seal-crest-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid #4a0d0d;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7);
}

.seal-emboss-ring {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 215, 0, 0.25);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.seal-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sketched-wax-seal:hover .seal-glow {
    opacity: 1;
}

/* Open state: Flap opens, seal dissolves, letter slides out */
.envelope-opened .sketched-wax-seal {
    animation: breakSealAnim 0.7s forwards;
    pointer-events: none;
}

.envelope-opened .envelope-closing-flap.flap-top {
    transform: rotateX(180deg);
    z-index: 1;
    filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
}

.envelope-opened .letter-sheet {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-145px) scale(1.02);
    z-index: 25;
    box-shadow: 
        0 24px 60px rgba(0, 0, 0, 0.85),
        0 0 35px rgba(201, 168, 106, 0.4);
}

@keyframes breakSealAnim {
    0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); opacity: 1; filter: none; }
    50% { transform: translate(-50%, -50%) rotate(10deg) scale(1.2); opacity: 0.8; filter: drop-shadow(0 0 25px #ffd700); }
    100% { transform: translate(-50%, -50%) rotate(25deg) scale(0.3); opacity: 0; filter: drop-shadow(0 0 40px #ffd700); }
}

/* Letter Content Styles */
.letter-header {
    margin-bottom: 8px;
}

.letter-crest-box {
    width: 48px;
    height: 48px;
    margin: 0 auto 4px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(90, 60, 20, 0.25);
    border: 1px solid rgba(139, 105, 60, 0.3);
}

.letter-crest-sketch {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.65) contrast(1.15) brightness(0.92);
}

.letter-school-name {
    font-family: 'MedievalSharp', Georgia, serif;
    font-size: clamp(0.95rem, 2.8vw, 1.25rem);
    color: #2c1a0c;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    margin-bottom: 2px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.letter-headmaster {
    font-family: 'Caveat', 'Georgia', cursive;
    font-size: 0.95rem;
    color: #4a331c;
    font-style: italic;
    line-height: 1.25;
    margin-bottom: 6px;
}

.letter-headmaster span {
    font-size: 0.82rem;
    color: #6a4c28;
}

.letter-ornament-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8c6838;
    margin: 4px auto 8px;
    max-width: 260px;
}

.ornament-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #8c6838, transparent);
}

.ornament-leaf, .ornament-shield {
    font-size: 0.85rem;
}

/* Handwritten Body in Emerald Ink */
.letter-body-handwritten {
    font-family: 'Marck Script', 'Caveat', cursive;
    color: #0f3d24; /* Authentic Hogwarts Emerald Ink */
    text-align: left;
    padding: 0 4px;
    line-height: 1.5;
    text-shadow: 0 0 1px rgba(15, 61, 36, 0.25);
}

.letter-salutation {
    font-size: clamp(1.15rem, 3.5vw, 1.4rem);
    font-weight: 700;
    margin-bottom: 6px;
    color: #0a301c;
}

.letter-paragraph {
    font-size: clamp(1.0rem, 2.9vw, 1.16rem);
    margin-bottom: 8px;
    text-indent: 1.2em;
    line-height: 1.48;
}

.letter-paragraph strong {
    color: #052414;
    font-weight: 700;
}

/* Signature Block */
.letter-signature-block {
    margin-top: 10px;
    text-align: right;
    padding-right: 8px;
    font-family: 'Marck Script', 'Caveat', cursive;
    color: #0f3d24;
}

.letter-closing {
    font-size: 1.1rem;
    font-style: italic;
    color: #2b4533;
    margin-bottom: 2px;
}

.letter-signature-ink {
    font-size: clamp(1.4rem, 4.2vw, 1.8rem);
    font-weight: 700;
    color: #082816;
    letter-spacing: 0.5px;
    transform: rotate(-2deg);
    display: inline-block;
    margin-bottom: 1px;
    text-shadow: 0 0 1px rgba(8, 40, 22, 0.35);
}

.letter-sign-title {
    font-size: 0.88rem;
    color: #4a6352;
    font-style: italic;
}

/* Controls Below Parchment */
.intro-controls-panel {
    margin-top: 20px;
    text-align: center;
}

.intro-subnote {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
    transition: all 0.3s ease;
}

.intro-action-container {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.letter-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.fade-in-action {
    animation: fadeInActionAnim 0.5s ease forwards;
}

@keyframes fadeInActionAnim {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

.btn-break-seal {
    font-size: 1.12rem;
    padding: 14px 28px;
    box-shadow: 0 6px 20px rgba(201, 168, 106, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-break-seal:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 28px rgba(201, 168, 106, 0.6);
}

.btn-launch-quiz {
    font-size: clamp(1.05rem, 3.4vw, 1.22rem);
    padding: 14px 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, #e6c564 0%, #c9a86a 50%, #8c6838 100%);
    color: #1a0f05;
    border: 1px solid #ffd700;
    box-shadow: 0 6px 25px rgba(201, 168, 106, 0.5), 0 0 15px rgba(255, 215, 0, 0.35);
    transition: all 0.3s ease;
}

.btn-launch-quiz:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 32px rgba(201, 168, 106, 0.75), 0 0 25px rgba(255, 215, 0, 0.6);
}

.glow-pulse {
    animation: glowPulseAnim 2.6s infinite alternate ease-in-out;
}

@keyframes glowPulseAnim {
    0% { box-shadow: 0 6px 20px rgba(201, 168, 106, 0.45); }
    100% { box-shadow: 0 10px 32px rgba(201, 168, 106, 0.8), 0 0 25px rgba(255, 215, 0, 0.6); }
}

.btn-close-letter {
    font-size: 0.92rem;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid rgba(201, 168, 106, 0.25);
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-letter:hover {
    color: var(--gold-bright);
    border-color: var(--gold);
    background: rgba(201, 168, 106, 0.1);
}

@media (max-width: 480px) {
    .antique-envelope-scene {
        width: min(340px, 94vw);
        height: min(215px, 60vw);
        margin: 15px auto 25px;
    }
    .antique-envelope-scene.envelope-opened {
        margin-top: 135px;
        margin-bottom: 20px;
    }
    .sketched-wax-seal {
        width: 62px;
        height: 62px;
        top: 50%;
    }
    .letter-sheet {
        top: 10px;
        left: 2%;
        width: 96%;
        height: 400px;
        max-height: 72vh;
        padding: 12px 14px;
    }
    .envelope-opened .letter-sheet {
        transform: translateY(-120px) scale(1.01);
    }
    .letter-paragraph {
        font-size: 0.96rem;
        line-height: 1.42;
        margin-bottom: 6px;
    }
    .envelope-flap.flap-bottom {
        padding-bottom: 12px;
    }
    .btn-launch-quiz {
        padding: 12px 20px;
        font-size: 1.0rem;
    }
}

.difficulty-selection {
    margin: 18px 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.difficulty-label {
    font-size: 0.95rem;
    color: var(--gold-soft);
    font-weight: 600;
}

.difficulty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.diff-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-gold);
    color: var(--text-muted);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.diff-chip:hover {
    border-color: var(--gold);
    color: var(--text-main);
    transform: translateY(-1px);
    background: rgba(201, 168, 106, 0.12);
}

.diff-chip.active {
    background: rgba(201, 168, 106, 0.25);
    border-color: var(--gold);
    color: var(--gold-bright);
    box-shadow: 0 0 10px rgba(201, 168, 106, 0.35);
    font-weight: bold;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
    min-height: 46px;
    touch-action: manipulation;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%);
    color: #0c0d14;
    box-shadow: 0 4px 15px rgba(201, 168, 106, 0.3);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffd700 0%, var(--gold) 100%);
    box-shadow: 0 6px 20px rgba(201, 168, 106, 0.5);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold-soft);
    border: 1px solid var(--gold);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(201, 168, 106, 0.2);
}

.btn-danger {
    background: rgba(231, 76, 60, 0.2);
    color: #ff7675;
    border: 1px solid var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger);
    color: #fff;
}

.btn-success {
    background: rgba(46, 204, 113, 0.2);
    color: #55efc4;
    border: 1px solid var(--success);
}

.btn-success:hover:not(:disabled) {
    background: var(--success);
    color: #000;
}

.btn-large {
    font-size: 1.05rem;
    padding: 14px 28px;
    min-height: 50px;
}

.btn-sm {
    font-size: 0.85rem;
    padding: 8px 14px;
    min-height: 38px;
}

.btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
    width: 100%;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* =========================================
   STATUS & PROGRESS
   ========================================= */
.status-panel {
    margin-bottom: 16px;
    width: 100%;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: clamp(0.8rem, 3vw, 0.95rem);
}

.points-badge {
    color: var(--gold-bright);
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.progress-container {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold) 0%, #ffd700 100%);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    transition: width 0.35s ease;
}

/* =========================================
   QUESTION CARD & ANSWERS
   ========================================= */
.question-card {
    text-align: center;
}

.question-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 8px;
}

.meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    background: rgba(201, 168, 106, 0.15);
    border: 1px solid var(--gold);
    color: var(--gold-soft);
    white-space: nowrap;
}

.badge-diff {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-main);
}

.badge-diff-easy {
    background: rgba(46, 204, 113, 0.15);
    border-color: #2ecc71;
    color: #2ecc71;
}

.badge-diff-medium {
    background: rgba(243, 156, 18, 0.15);
    border-color: #f39c12;
    color: #f39c12;
}

.badge-diff-hard {
    background: rgba(231, 76, 60, 0.15);
    border-color: #e74c3c;
    color: #e74c3c;
}

.badge-warning {
    background: rgba(243, 156, 18, 0.2);
    border-color: var(--warning);
    color: #f39c12;
}

.badge-success {
    background: rgba(46, 204, 113, 0.2);
    border-color: var(--success);
    color: #2ecc71;
}

.badge-danger {
    background: rgba(231, 76, 60, 0.2);
    border-color: var(--danger);
    color: #e74c3c;
}

.badge-muted {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
}

.attempt-badge {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.timer-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: rgba(243, 156, 18, 0.15);
    border: 1px solid #f39c12;
    color: #ffd700;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.question-text {
    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    line-height: 1.4;
    text-align: center;
    margin: 15px 0 20px;
    color: var(--text-main);
    word-break: break-word;
}

/* Freitext Input */
.answer-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.input-answer {
    width: 100%;
    max-width: 450px;
    padding: 14px;
    font-size: 16px; /* Prevents iOS auto-zoom */
    text-align: center;
    border-radius: 8px;
    border: 2px solid var(--border-gold);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-main);
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
    min-height: 48px;
}

.input-answer:focus {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(201, 168, 106, 0.4);
}

/* Multiple Choice Grid */
.choice-group {
    width: 100%;
    margin-top: 5px;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}

.choice-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-gold);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-main);
    font-size: clamp(0.9rem, 3.5vw, 1.05rem);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    min-height: 52px;
    width: 100%;
    word-break: break-word;
    touch-action: manipulation;
}

.choice-btn:hover:not(:disabled) {
    background: rgba(201, 168, 106, 0.2);
    border-color: var(--gold);
    transform: translateY(-2px);
}

.choice-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.choice-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(201, 168, 106, 0.2);
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-bright);
    font-weight: bold;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.choice-text {
    flex: 1;
}

.choice-selected {
    border-color: var(--gold-bright);
    background: rgba(201, 168, 106, 0.3);
}

.choice-correct {
    background: rgba(46, 204, 113, 0.25) !important;
    border-color: #2ecc71 !important;
    color: #55efc4 !important;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.6) !important;
}

.choice-wrong {
    background: rgba(231, 76, 60, 0.25) !important;
    border-color: #e74c3c !important;
    color: #ff7675 !important;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.5) !important;
}

.hint-box {
    margin-top: 15px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(201, 168, 106, 0.1);
    border-left: 4px solid var(--gold);
    font-size: 0.9rem;
    color: var(--gold-soft);
    text-align: left;
    word-break: break-word;
}

.feedback-box {
    margin-top: 15px;
    font-size: clamp(0.95rem, 3.5vw, 1.1rem);
    text-align: center;
    min-height: 28px;
    font-weight: bold;
    word-break: break-word;
}

.feedback-correct {
    color: var(--success);
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.feedback-wrong {
    color: var(--danger);
}

.feedback-revealed {
    color: var(--warning);
    font-size: 0.9rem;
    margin-top: 4px;
}

/* =========================================
   ANIMATIONS
   ========================================= */
.sparkle-effect {
    animation: sparkle-glow 0.8s ease forwards;
}

@keyframes sparkle-glow {
    0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), inset 0 0 15px rgba(255, 215, 0, 0.4); border-color: #ffd700; }
    100% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45); }
}

.shake-effect {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* =========================================
   FINALE PAGE
   ========================================= */
.finale-card {
    text-align: center;
}

.finale-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.sparkle-icon {
    font-size: 1.5rem;
}

.score-banner {
    background: rgba(201, 168, 106, 0.1);
    border: 1px dashed var(--gold);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 20px;
}

.score-highlight {
    font-size: clamp(1rem, 4vw, 1.25rem);
}

.gold-text {
    color: var(--gold-bright);
    font-weight: bold;
    font-size: 1.35rem;
}

.reward-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 18px 14px;
    margin-bottom: 20px;
    border-left: 4px solid var(--gold);
    text-align: left;
}

.reward-box h2 {
    color: var(--gold-soft);
    font-size: clamp(1.1rem, 4vw, 1.35rem);
    margin-bottom: 12px;
}

.reward-description {
    font-size: clamp(0.95rem, 3.5vw, 1.05rem);
    line-height: 1.6;
    margin-bottom: 12px;
    color: var(--text-main);
}

.love-note {
    font-style: italic;
    color: var(--gold);
    font-size: 1rem;
}

.time-highlight {
    margin-top: 8px;
    font-size: clamp(0.9rem, 3.2vw, 1.05rem);
    color: var(--text-muted);
}

/* Tiered evaluation styling */
.tier-box {
    position: relative;
    border-radius: 14px;
    padding: 24px 18px;
    margin: 20px 0;
    border: 2px solid var(--border-gold);
    background: radial-gradient(circle at top, rgba(201, 168, 106, 0.12) 0%, rgba(15, 17, 30, 0.85) 100%);
    text-align: center;
}

.tier-badge-container {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.tier-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    border: 3px solid;
}

.tier-outstanding {
    background: radial-gradient(circle, #ffd700, #b8860b);
    color: #0b0b16;
    border-color: #fff275;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.tier-exceeds {
    background: radial-gradient(circle, #2ecc71, #27ae60);
    color: #0b0b16;
    border-color: #a8f5cc;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
}

.tier-acceptable {
    background: radial-gradient(circle, #3498db, #2980b9);
    color: #ffffff;
    border-color: #a0d3f8;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
}

.tier-poor {
    background: radial-gradient(circle, #e67e22, #d35400);
    color: #ffffff;
    border-color: #f7b278;
    box-shadow: 0 0 20px rgba(230, 126, 34, 0.5);
}

.tier-troll {
    background: radial-gradient(circle, #7f8c8d, #34495e);
    color: #ff7675;
    border-color: #e74c3c;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
}

.tier-subtitle {
    font-style: italic;
    color: var(--gold-soft);
    margin-bottom: 12px;
    font-size: 1rem;
}

/* Leaderboard entry card & form on finale */
.leaderboard-entry-card {
    background: rgba(14, 16, 32, 0.85);
    border: 1px dashed var(--gold);
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.input-with-btn {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

.input-with-btn .input-text {
    flex: 1;
    text-align: left;
}

.btn-dice {
    background: rgba(201, 168, 106, 0.18);
    border: 1px solid var(--gold);
    color: var(--gold-bright);
    padding: 0 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    transition: all 0.2s ease;
    min-height: 46px;
    white-space: nowrap;
}

.btn-dice:hover {
    background: var(--gold);
    color: #0b0b16;
    box-shadow: 0 0 12px rgba(201, 168, 106, 0.5);
    transform: translateY(-1px);
}

/* Leaderboard tables & filters */
.diff-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 15px 0;
}

.diff-filter-tabs .tab-btn {
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-gold);
    color: var(--text-muted);
}

.diff-filter-tabs .tab-btn.active {
    background: rgba(201, 168, 106, 0.25);
    border-color: var(--gold);
    color: var(--gold-bright);
    box-shadow: 0 0 10px rgba(201, 168, 106, 0.35);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.lb-table th {
    background: rgba(201, 168, 106, 0.12);
    color: var(--gold-soft);
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-gold);
    white-space: nowrap;
}

.lb-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(201, 168, 106, 0.15);
    color: var(--text-main);
}

.lb-table tr:hover td {
    background: rgba(201, 168, 106, 0.05);
}

.lb-rank {
    font-weight: bold;
    color: var(--gold);
}

.lb-rank-1 { color: #ffd700; font-size: 1.1rem; }
.lb-rank-2 { color: #c0c0c0; font-size: 1.05rem; }
.lb-rank-3 { color: #cd7f32; font-size: 1.05rem; }

/* =========================================
   FORMS & INPUTS
   ========================================= */
.magic-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--gold-soft);
}

.input-text, .textarea, select.input-text {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-gold);
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-main);
    font-size: 16px; /* Prevents auto zoom */
    font-family: inherit;
    outline: none;
    width: 100%;
    min-height: 46px;
}

.input-text:focus, .textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(201, 168, 106, 0.3);
}

.input-text-sm {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-gold);
    background: rgba(0,0,0,0.3);
    color: var(--text-main);
    font-size: 15px;
    min-height: 38px;
    width: 100%;
}

.field-help {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.info-alert {
    background: rgba(41, 128, 185, 0.15);
    border-left: 4px solid #3498db;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.alert-danger {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid var(--danger);
    color: #ff7675;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    text-align: center;
    font-size: 0.9rem;
}

/* =========================================
   ADMIN COCKPIT (Mobile Responsive)
   ========================================= */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-top-actions {
    display: flex;
    gap: 8px;
}

/* Horizontal Scrollable Tabs on Mobile */
.tabs-nav {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border-gold);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 2px;
}

.tabs-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-muted);
    padding: 10px 14px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 42px;
    touch-action: manipulation;
}

.tab-btn.active {
    background: var(--bg-card);
    color: var(--gold);
    border: 1px solid var(--border-gold);
    border-bottom: 1px solid transparent;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.question-admin-card {
    margin-bottom: 14px;
    padding: 16px;
}

.q-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 0.8rem;
    flex-wrap: wrap;
    gap: 8px;
}

.highlight-answer {
    color: var(--gold-bright);
    font-weight: bold;
    background: rgba(255, 215, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-word;
}

.test-matcher-box {
    margin-top: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.test-input-group {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.test-result-feedback {
    margin-top: 8px;
    font-size: 0.85rem;
    word-break: break-word;
}

.q-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.inline-edit-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.empty-state {
    text-align: center;
    padding: 30px 10px;
    color: var(--text-muted);
}

/* =========================================
   FOOTER
   ========================================= */
.footer {
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: auto;
}

.footer-links {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--gold-soft);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
    background: rgba(201, 168, 106, 0.12);
    border: 1px solid rgba(201, 168, 106, 0.35);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer-link:hover {
    color: #0b0b16;
    background: var(--gold);
    border-color: var(--gold-bright);
    box-shadow: 0 0 12px rgba(201, 168, 106, 0.5);
    text-decoration: none;
    transform: translateY(-1px);
}

.footer-sep {
    display: none;
}

.legal-card {
    text-align: left;
    max-width: 760px;
    margin: 0 auto;
}

.legal-content {
    margin-top: 20px;
    line-height: 1.65;
    color: var(--text-main);
}

.legal-content h3 {
    color: var(--gold-soft);
    margin-top: 22px;
    margin-bottom: 8px;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(201, 168, 106, 0.2);
    padding-bottom: 4px;
}

.legal-content p, .legal-content ul {
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.legal-content ul {
    padding-left: 20px;
}

.legal-content code {
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--gold-bright);
    font-size: 0.88em;
}

.hidden {
    display: none !important;
}

/* =========================================
   MOBILE RESPONSIVENESS (max-width: 640px)
   ========================================= */
@media (max-width: 640px) {
    .container {
        margin: 10px auto 25px;
        padding: 0 10px;
    }

    .admin-wrapper {
        margin: 10px auto 25px;
        padding: 0 10px;
    }

    .card {
        padding: 16px 12px;
        border-radius: 12px;
    }

    /* Mobile Hamburger Menu */
    .menu-toggle-btn {
        display: inline-flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: rgba(11, 11, 22, 0.98);
        border-bottom: 2px solid var(--gold);
        flex-direction: column;
        padding: 14px 16px;
        gap: 8px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.8);
    }

    .nav-links.nav-open {
        display: flex;
    }

    .nav-link {
        width: 100%;
        padding: 12px 14px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(201, 168, 106, 0.2);
    }

    .audio-label {
        display: none; /* Show only 🔇/🔊 on small phones */
    }

    .audio-btn {
        padding: 6px 10px;
    }

    /* Quiz Question layout */
    .choice-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 10px;
    }

    .choice-btn {
        min-height: 48px;
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        width: 100%;
    }

    .test-input-group {
        flex-direction: column;
    }

    .test-input-group .btn {
        width: 100%;
    }

    .q-actions .btn {
        flex: 1 1 100%;
    }

    .admin-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .admin-top-actions {
        justify-content: center;
    }

    .lang-btn {
        padding: 4px 6px;
        font-size: 0.75rem;
    }

    .diff-chip {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
}