/* ================================
   RESET
================================= */
* {
    font-family: 'DM Sans', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ================================
   GRUNDLAYOUT
================================= */
body {
    overflow: hidden;
    color: #e8e0d0;
    background: radial-gradient(ellipse at center, 
        #0d1b2a 0%, 
        #050a0f 60%, 
        #000000 100%);
    min-height: 100vh;
}

.stern {
    position: fixed;
    border-radius: 50%;
    background: white;
    pointer-events: none;
    z-index: -1;
}

/* ================================
   STARTBILDSCHIRM
================================= */
#startbildschirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.menü-panel {
    background: rgba(18, 18, 26, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid #2a2a3e;
    border-radius: 16px;
    padding: 2rem;          /* weniger padding auf kleinen Screens */
    max-width: 460px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

h1 {
    color: #d4a94a;
    font-size: clamp(1.8rem, 8vw, 2.8rem);  /* ← passt sich an Bildschirmgröße an */
    font-weight: 700;
    font-family: 'Playfair Display', serif;  /* ← Titel auf Serif */
    font-style: italic;  
}

h2 {
    color: #e8e0d0;
    font-weight: 300;
    font-size: clamp(0.7rem, 3vw, 0.85rem);  /* ← auch responsiv */
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.menü-panel p {
    color: #7a7a9a;
    line-height: 1.7;
    font-size: clamp(0.75rem, 2.5vw, 0.85rem);
    font-weight: 300;
    text-align: center;
}

.buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 1rem;
}

.buttons button {
    background: transparent;
    color: #e8e0d0;
    border: 1px solid #2a2a3e;
    padding: 14px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btn-titel {
    font-size: 1rem;
    color: #e8e0d0;
    font-weight: 700;
}

.btn-desc {
    font-size: 0.75rem;
    color: #7a7a9a;
    font-weight: 300;
    line-height: 1.4;
}

.buttons button:hover .btn-titel {
    color: #d4a94a;
}

.buttons button:hover .btn-desc {
    color: #a0a0b8;
}

.buttons button:hover {
    border-color: #d4a94a;
    background: rgba(212, 169, 74, 0.05);
    transform: none;
}
/* ================================
   MENÜ HEADER & FOOTER
================================= */
.spiel-header {
    display: contents; /* verhält sich wie kein extra Element – kein Abstand */
}

/* Tastatur-Fokus im Hauptmenü und Filter */
.menü-fokus,
.menü-fokus:hover {
    border-color: #d4a94a !important;
    background: rgba(212,169,74,0.08) !important;
}

.menü-fokus .btn-titel { color: #d4a94a !important; }
.menü-fokus .btn-desc  { color: #a0a0b8 !important; }

.filter-fokus {
    border-color: #6c63ff !important;
    background: rgba(108,99,255,0.12) !important;
    color: #a09cff !important;
}

.menü-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.menü-footer p {
    font-size: 0.63rem;
    color: rgba(255,255,255,0.18);
    letter-spacing: 0.1em;
}

#btnFeedback,
#btnMusik {
    position: absolute;
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.25);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
    padding: 0;
    padding-bottom: 1px;
}

#btnFeedback { right: 0; }
#btnMusik    { left: 0; overflow: hidden; }

#btnFeedback:hover,
#btnMusik:hover {
    border-color: rgba(212,169,74,0.5);
    color: rgba(212,169,74,0.7);
}

/* Musik stumm: diagonaler Strich von links-unten nach rechts-oben */
#btnMusik.stumm {
    color: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.08);
}

#btnMusik.stumm::after {
    content: '';
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 26px;
    height: 1.5px;
    background: rgba(255,255,255,0.3);
    transform-origin: left bottom;
    transform: rotate(-45deg);
}

/* ── Feedback-Overlay ── */
#feedback-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#feedback-overlay.aktiv {
    display: flex;
}

#feedback-popup {
    background: rgba(14,14,22,0.98);
    border: 1px solid #2a2a3e;
    border-radius: 16px;
    padding: 1.8rem;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#feedback-popup h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: #d4a94a;
    font-style: italic;
    margin: 0;
}

#feedback-popup p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.55;
    margin: 0;
}

#feedback-text {
    background: rgba(255,255,255,0.04);
    border: 1px solid #2a2a3e;
    border-radius: 8px;
    color: #e8e0d0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    line-height: 1.55;
    padding: 10px 12px;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}

#feedback-text:focus {
    border-color: rgba(212,169,74,0.4);
}

#feedback-zaehler {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.2);
    text-align: right;
    margin-top: -4px;
}

.feedback-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

#btnFeedbackSenden {
    flex: 1;
    background: rgba(212,169,74,0.12);
    border: 1px solid rgba(212,169,74,0.4);
    color: #d4a94a;
    border-radius: 8px;
    padding: 11px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

#btnFeedbackSenden:hover {
    background: rgba(212,169,74,0.2);
    border-color: rgba(212,169,74,0.7);
}

#btnFeedbackAbbrechen {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.35);
    border-radius: 8px;
    padding: 11px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

#btnFeedbackAbbrechen:hover {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.6);
}

/* Vita-Bento: kompaktere Größen für gängige Handys */
@media (max-width: 480px) {
    #vita-swap,
    #vita-karte-bereich {
        height: 200px;
    }

    #vita-karte-bereich {
        gap: 12px;
    }

    #vita-karte-bereich #vita-person-karte { width: 100px; }

    #vita-karte-bereich #vita-person-foto,
    #vita-karte-bereich #vita-person-kein-foto { height: 136px; }

    #vita-karte-bereich .buttons { width: 130px; }
}

/* Noch kleinere Bildschirme */
@media (max-width: 380px) {
    .menü-panel {
        border-radius: 12px;
        padding: 1.5rem;
    }

    #vita-karte-bereich { gap: 10px; }
    #vita-karte-bereich .buttons { width: 114px; }
}


/* ================================
   SPIELFELD
================================= */
#spielfeld {
    position: fixed;
    inset: 0;
    overflow: hidden;
    cursor: grab;
    background: transparent;
    display: none;
    z-index: 0;
}

#spielfeld:active {
    cursor: grabbing;
}

#weltraum {
    position: absolute;
    width: 3000px;
    height: 3000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    transform-origin: center center;
    will-change: transform;
}

#timeline-bereich {
    display: flex;
    align-items: center;
    justify-content: center;
}

#timeline {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem;
}

#incoming-bereich {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 3rem;
}

#incoming-bereich > p {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #7a7a9a;
    font-weight: 500;
}

#incoming-karte .filmkarte {
    border-color: #d4a94a;
    box-shadow: 0 0 20px rgba(212, 169, 74, 0.2);
}

/* Gestapelte Karten gleichen Jahrgangs */
.filmkarte.gestapelt {
    cursor: pointer;
}

.filmkarte.gestapelt::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid #3a3a5e;
    border-radius: 8px;
    background: #22223a;
    transform: translate(4px, 5px);
    z-index: -1;
}

.filmkarte.gestapelt::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid #2e2e50;
    border-radius: 8px;
    background: #1a1a30;
    transform: translate(8px, 10px);
    z-index: -2;
}

.stack-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(8,8,18,0.85);
    border: 1px solid #d4a94a;
    border-radius: 4px;
    color: #d4a94a;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    letter-spacing: 0.04em;
    z-index: 5;
    line-height: 1.4;
}

/* ================================
   UI BUTTONS IM SPIEL
   – komplett andere Styles als Start-Buttons
================================= */
#btnZurück, #btnHowTo, #btnTipp, #btnZoomReset, #btnZentrieren {
    position: fixed;
    top: 1.5rem;
    z-index: 100;
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(8px);
    color: #7a7a9a;
    border: 1px solid #2a2a3e;
    padding: 8px 16px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 6px;
}

#btnZurück    { left: 1.5rem; }
#btnHowTo     { right: 1.5rem; }
#btnTipp      { left: 1.5rem;  bottom: 1.5rem; top: auto; }
#btnZoomReset { right: 1.5rem; bottom: 1.5rem; top: auto; }
#btnZentrieren{ right: 1.5rem; bottom: 3.8rem; top: auto; }

/* Wenn Zeit-Modus aktiv: Elemente oben nicht vom Balken (28px) überdecken */
body.zeit-aktiv #btnZurück,
body.zeit-aktiv #btnHowTo,
body.zeit-aktiv .streak-feuer { top: calc(1.5rem + 28px); }

#btnTipp:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

#tipp-anzeige {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10,10,20,0.95);
    border: 1px solid #d4a94a;
    border-radius: 12px;
    padding: 14px 28px;
    color: #d4a94a;
    font-size: 1.1rem;
    font-weight: 600;
    z-index: 150;
    display: none;
    text-align: center;
    letter-spacing: 0.05em;
    transition: opacity 0.4s;
    pointer-events: none;
}

/* Tastatur-Navigation: aktive Drop-Zone */
.dropzone.tastatur-aktiv {
    width: 80px;
    border-color: #d4a94a;
    background-color: rgba(212,169,74,0.12);
    animation: tastatur-puls 0.7s ease-in-out infinite;
}

@keyframes tastatur-puls {
    0%, 100% { background-color: rgba(212,169,74,0.06); }
    50%       { background-color: rgba(212,169,74,0.2);  }
}

/* Konfetti-Canvas */
#konfetti-canvas {
    position: fixed;
    inset: 0;
    z-index: 201;
    pointer-events: none;
    display: none;
}

#btnZurück:hover, #btnHowTo:hover, #btnTipp:hover, #btnZoomReset:hover {
    color: #e8e0d0;
    border-color: #7a7a9a;
    background: rgba(20, 20, 30, 0.9);
    transform: none;
}

/* ================================
   POPUP
================================= */
#popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.203);
    backdrop-filter: blur(.6px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
}

#popup {
    background: #12121a;
    border: 1px solid #3e3e2a;
    border-radius: 12px;
    padding: 2.5rem;
    max-width: 480px;
    width: 90%;
}

#popup h3 {
    color: #d4a94a;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}

.popup-section-label {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 12px 0 6px;
}

#popup ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

#popup ul li {
    font-size: 0.85rem;
    color: #a0a0b8;
    line-height: 1.5;
    font-weight: 400;
}

#popup #btnPopupClose {
    width: 100%;
    padding: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 0.0em;
    transition: 0.2s;
    background: #12121a;
    backdrop-filter: blur(8px);
    color: #7a7a9a;
    border: 1px solid #2a2a3e;
}

#popup #btnPopupClose:hover {
    border: 1px solid #d4a94a;
    color: #d4a94a;
    transform: none;
    background: rgba(212, 169, 74, 0.05);

}

/* ================================
   GAME OVER
================================= */

#gameover-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
}

#gameover-popup {
    background: #12121a;
    border: 1px solid #2a2a3e;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#gameover-icon {
    font-size: 3rem;
}

#gameover-popup h3 {
    color: #e8e0d0;
    font-size: 1.5rem;
    font-weight: 600;
}

#gameover-popup p {
    color: #7a7a9a;
    font-size: 0.9rem;
}

/* ================================
   GAME OVER – RICHTIGE POSITION
================================= */
#gameover-position {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 12px 14px;
    width: 100%;
    text-align: left;
}

.gameover-position-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.25);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.nachbar-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
}

.nachbar-jahr {
    color: #d4a94a;
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 34px;
}

.nachbar-hinweis {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.22);
    padding: 3px 0 3px 44px;
    font-style: italic;
}

.gameover-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0.5rem;
}

.gameover-buttons button {
    background: transparent;
    color: #e8e0d0;
    border: 1px solid #2a2a3e;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: 0.2s;
    width: 100%;
}

.gameover-buttons button:first-child {
    border-color: #d4a94a;
    color: #d4a94a;
}

.gameover-buttons button:hover {
    background: rgba(212, 169, 74, 0.05);
    transform: none;
}


#gameover-karte {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(192, 57, 43, 0.1);
    border: 1px solid rgba(192, 57, 43, 0.4);
    border-radius: 10px;
    padding: 1rem;
    margin: 0.5rem 0;
}

#gameover-poster {
    width: 70px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

#gameover-karte-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    text-align: left;
}

#gameover-film {
    color: #e8e0d0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

#gameover-jahr {
    color: #c0392b;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ================================
   GEWONNEN
================================= */


#gewonnen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
}

#gewonnen-popup {
    background: #12121a;
    border: 1px solid #d4a94a;
    box-shadow: 0 0 40px rgba(212, 169, 74, 0.15);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#gewonnen-icon { font-size: 3rem; }

#gewonnen-popup h3 {
    color: #d4a94a;
    font-size: 1.5rem;
    font-weight: 600;
}

#gewonnen-popup p {
    color: #7a7a9a;
    font-size: 0.9rem;
}

/* ================================
   LADESCREEN
================================= */

#ladescreen {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
}

#lade-inhalt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

#lade-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #2a2a3e;
    border-top-color: #d4a94a;
    border-radius: 50%;
    animation: drehen 0.8s linear infinite;
}

@keyframes drehen {
    to { transform: rotate(360deg); }
}

#lade-text {
    color: #7a7a9a;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}






/* Streak Anzeige */
.streak-feuer {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(18,18,26,0.85);
    backdrop-filter: blur(8px);
    border: 1px solid #d4a94a;
    border-radius: 10px;
    padding: 6px 16px;
    font-size: 0.75rem;
    color: #d4a94a;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.streak-feuer.sichtbar {
    opacity: 1;
}


/* ================================
   RICHTIG O FALSCH ANIMATION
================================= */


.karte-richtig {
    border-color: #27ae60 !important;
    box-shadow: 0 0 20px rgba(39, 174, 96, 0.4);
    animation: puls-grün 0.6s ease;
}

.karte-falsch {
    border-color: #c0392b !important;
    box-shadow: 0 0 20px rgba(192, 57, 43, 0.4);
    animation: schütteln 0.4s ease;
}

@keyframes puls-grün {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

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

/* ================================
   FILMKARTEN
================================= */
.filmkarte {
    width: 100px;
    background-color: #1a1a26;
    border: 1px solid #2a2a3e;
    color: #e8e0d0;
    padding: 6px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: 0.2s;
    position: relative;
    will-change: transform;
}

/* Wrapper für Poster + Unschärfe-Hintergrund – overflow:hidden hier, nicht auf .filmkarte
   damit .hover-info weiterhin nach oben rausgucken kann */
.poster-wrap {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
}

/* Unscharfes Hintergrundbild – füllt weiße Ränder bei ungewöhnlichem Seitenverhältnis */
.poster-blur {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.22);
    transform: scale(1.08); /* verhindert transparente Blur-Ränder */
    will-change: transform;
}

.filmkarte img {
    width: 100%;
    height: 140px;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}

#spielfeld.vita-modus .filmkarte img {
    object-fit: cover;
}

.filmkarte p {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    margin-top: 8px;
    color: #d4a94a;
    letter-spacing: 0.1em;
}

.filmkarte .hover-info {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid #2a2a3e;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    white-space: nowrap;
    color: #e8e0d0;
    margin-bottom: 8px;
    z-index: 100;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
}

.filmkarte:hover .hover-info {
    display: block;
}

@keyframes schwebt {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-4px); }  /* ← von 8px auf 4px */
}

#incoming-karte .filmkarte {
    animation: pulse-gold 3s ease infinite,     /* ← von 2s auf 3s */
               schwebt 4s ease-in-out infinite; /* ← von 3s auf 4s */
    cursor: grab;
}


/* ================================
   DROP ZONES
================================= */
.dropzone {
    width: 30px;
    height: 180px;
    border: 2px dashed transparent;
    border-radius: 4px;
    flex-shrink: 0;
    transition: 0.2s;
}

.dropzone.aktiv {
    width: 80px;
    border-color: #d4a94a;
    background-color: rgba(212, 169, 74, 0.1);
}

/* ================================
   COUNTER
================================= */

#counter {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(18, 18, 26, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid #2a2a3e;
    border-radius: 10px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.counter-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.counter-zahl {
    color: #d4a94a;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.counter-label {
    color: #7a7a9a;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.counter-trenner {
    width: 1px;
    height: 40px;
    background: #2a2a3e;
}

/* ================================
   VITA-KONTEXT-BANNER
================================= */
#vita-kontext {
    display: none;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.2s ease;
    background: rgba(8,8,18,0.88);
    border: 1px solid #2a2a4e;
    border-radius: 30px;
    padding: 6px 18px 6px 8px;
    align-items: center;
    gap: 10px;
    z-index: 10;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

#vita-foto {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #1a1a2e;
    flex-shrink: 0;
}

#vita-name-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e0e0f0;
}

#vita-typ-label {
    font-size: 0.72rem;
    color: #555;
    margin-left: 2px;
}

/* ================================
   SPIELFELD UI
================================= */
#drag-hint {
    font-size: 0.65rem;
    color: #7a7a9a;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* ================================
   FILTER-SCREEN
================================= */
#filter-lade-hint {
    display: none;
    color: #7a7a9a;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

#filter-screen h2 {
    margin-bottom: 16px;
}

/* ── Zweistufige Filter-Auswahl ── */
#filter-schritt-1,
#filter-schritt-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

#filter-schritt-2 {
    display: none;
}

#filter-optionen-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}

.filter-option-btn {
    background: transparent;
    color: #e8e0d0;
    border: 1px solid #2a2a3e;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    font-size: 0.9rem;
}

.filter-option-btn:hover {
    border-color: #6c63ff;
    background: rgba(108,99,255,0.08);
    color: #a09cff;
}

.filter-option-anzahl {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ── Vita-Auswahl-Screen ── */
#vita-auswahl-screen {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
}

#vita-person-kachel {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 18px 0 6px;
    transition: opacity 0.15s;
}

@keyframes vita-shuffeln {
    0%   { transform: rotate(0deg)    translateY(0);    }
    25%  { transform: rotate(-1.5deg) translateY(-1px); }
    55%  { transform: rotate(1.2deg)  translateY(-1px); }
    80%  { transform: rotate(-0.5deg) translateY(0);    }
    100% { transform: rotate(0deg)    translateY(0);    }
}

#vita-person-karte.shuffelt {
    animation: vita-shuffeln 0.4s ease-in-out;
    transform-origin: bottom center;
}

.vita-geschafft-badge {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    background: #d4a94a;
    color: #0b0b15;
    font-size: 0.65rem;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.vita-geschafft-badge.sichtbar {
    display: flex;
}

.vita-such-item-geschafft {
    color: #d4a94a;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 4px;
    flex-shrink: 0;
}

#vita-person-karte {
    width: 140px;
    background-color: #1a1a26;
    border: 1px solid #2a2a3e;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

#vita-person-foto {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

#vita-person-kein-foto {
    width: 100%;
    height: 210px;
    background: #12121e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255,255,255,0.08);
}

#vita-person-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e0e0f0;
    text-align: center;
    padding: 8px 8px 2px;
    line-height: 1.3;
}

#vita-person-anzahl {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    text-align: center;
    padding: 0 8px 10px;
    letter-spacing: 0.05em;
}

/* ── Vita Swap-Wrapper: fixe Höhe, Panel ändert sich nicht ── */
#vita-swap {
    width: 100%;
    height: 230px;
}

/* ── Vita Karte+Buttons Bento ── */
#vita-karte-bereich {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: center;
    height: 230px;
    width: 100%;
}

#vita-karte-bereich #vita-person-kachel {
    width: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

#vita-karte-bereich #vita-person-karte {
    width: 120px;
}

#vita-karte-bereich #vita-person-foto,
#vita-karte-bereich #vita-person-kein-foto {
    height: 160px;
}

#vita-karte-bereich .buttons {
    width: 150px;
    flex-shrink: 0;
    flex-direction: column;
    margin-top: 0;
    justify-content: center;
    gap: 10px;
}

#vita-karte-bereich .buttons button {
    padding: 13px 16px;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* ── Vita-Suche ── */
#vita-suche-wrap {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

#vita-suche {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid #2a2a3e;
    border-radius: 8px;
    color: #e8e0d0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    padding: 9px 36px 9px 12px;
    outline: none;
    transition: border-color 0.2s;
}

#vita-suche::placeholder {
    color: rgba(255,255,255,0.2);
}

#vita-suche:focus {
    border-color: rgba(212,169,74,0.5);
}

#vita-suche-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.25);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: none;
}

#vita-suche-clear:hover {
    color: rgba(255,255,255,0.6);
}

/* Ergebnisliste */
#vita-such-ergebnisse {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: rgba(14,14,22,0.98);
    border: 1px solid #2a2a3e;
    border-radius: 8px;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

#vita-such-ergebnisse::-webkit-scrollbar {
    width: 4px;
}

#vita-such-ergebnisse::-webkit-scrollbar-track {
    background: transparent;
}

#vita-such-ergebnisse::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
}

#vita-such-ergebnisse::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}

#vita-such-ergebnisse.aktiv {
    display: flex;
}

.vita-such-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}

.vita-such-item:last-child {
    border-bottom: none;
}

.vita-such-item:hover,
.vita-such-item.aktiv {
    background: rgba(212,169,74,0.08);
}

.vita-such-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #1a1a26;
}

.vita-such-item-kein-foto {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a1a26;
    border: 1px solid #2a2a3e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.vita-such-item-name {
    flex: 1;
    font-size: 0.82rem;
    color: #e8e0d0;
}

.vita-such-item-name em {
    font-style: normal;
    color: #d4a94a;
}

.vita-such-item-anzahl {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
}

.vita-such-leer {
    padding: 14px 12px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.25);
    text-align: center;
}

#btnTagesChallenge,
#btnVitaSpielen              { border-color: #d4a94a; }
#btnTagesChallenge .btn-titel,
#btnVitaSpielen .btn-titel   { color: #d4a94a; }
#btnTagesChallenge:hover,
#btnVitaSpielen:hover        { border-color: #d4a94a; background: rgba(212,169,74,0.08); }

/* ── Tagesrunde bereits gespielt ── */
#btnTagesChallenge.gespielt {
    opacity: 0.45;
}
#btnTagesChallenge.gespielt .btn-titel {
    color: rgba(212,169,74,0.5) !important;
}

/* ── Zeit-Modus Toggle ── */
.zeit-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 2px;
    margin-top: 18px;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
    color: rgba(255,255,255,0.3);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zeit-toggle:hover { color: rgba(255,255,255,0.55); }

.zeit-toggle-switch {
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
}

.zeit-toggle-switch::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: left 0.2s, background 0.2s;
}

.zeit-toggle.aktiv {
    color: #a09cff;
    border-top-color: rgba(108,99,255,0.3);
}

.zeit-toggle.aktiv .zeit-toggle-switch {
    background: #6c63ff;
}

.zeit-toggle.aktiv .zeit-toggle-switch::after {
    left: 19px;
    background: #fff;
}

body.zeit-aktiv #vita-kontext {
    top: 44px;
}

/* ── Timer-Balken im Spielfeld ── */
#zeit-anzeige {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    z-index: 200;
    background: rgba(255,255,255,0.08);
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
}

#zeit-balken {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #d4a94a;
    transform-origin: right center;
    transition: width 0.9s linear, background 0.5s;
}

#zeit-text {
    position: relative;
    z-index: 1;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.1em;
    font-family: 'DM Sans', sans-serif;
    pointer-events: none;
}

#zeit-anzeige.wenig   #zeit-balken { background: #e67e22; }
#zeit-anzeige.kritisch #zeit-balken {
    background: #c0392b;
    animation: balken-puls 0.4s ease-in-out infinite;
}

@keyframes balken-puls {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Schwierigkeitsgrad ── */
#schwierigkeit-wrap {
    display: flex;
    gap: 6px;
    width: 100%;
    margin: 4px 0 2px;
}

.schwierigkeit-chip {
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.4);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: 0.15s;
}

.schwierigkeit-chip:hover {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.7);
}

.schwierigkeit-chip.aktiv {
    border-color: #d4a94a;
    background: rgba(212,169,74,0.1);
    color: #d4a94a;
    font-weight: 600;
}

/* ── Filter, Stats & Aktivität Screens ── */
#filter-screen,
#aktivität-screen,
#stats-screen {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
}

#aktivität-screen .menü-panel {
    align-items: flex-start;
    width: min(480px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#aktivität-inhalt {
    width: 100%;
}

.akt-kalender-box {
    align-items: center;
}

.akt-kalender-box .streak-kalender,
.akt-kalender-box .sk-legende-detail {
    width: fit-content;
}

#filter-screen .menü-panel {
    align-items: flex-start;
    width: min(480px, 94vw);
    overflow-y: auto;
    max-height: 94vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#filter-screen .menü-panel::-webkit-scrollbar {
    width: 4px;
}

#filter-screen .menü-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

#filter-screen .menü-panel::-webkit-scrollbar-track {
    background: transparent;
}

#stats-screen .menü-panel {
    width: min(820px, 94vw);
    max-width: none;
    max-height: 90vh;
    overflow-y: auto;
    align-items: flex-start;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#stats-screen .menü-panel::-webkit-scrollbar       { width: 4px; }
#stats-screen .menü-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* ── Bento Stats Grid ── */
.stats-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

/* Ab 420px: 2 Spalten, Tagesrunde und Meistgespielt über volle Breite */
@media (min-width: 420px) {
    .stats-bento {
        grid-template-columns: 1fr 1fr;
    }

    .bento-tages,
    .bento-modi { grid-column: 1 / -1; }
}

.stats-bento-box {
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.bento-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.25);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.bento-tages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
}

/* Breite Screens: Tagesrunde-Kacheln untereinander */
@media (min-width: 640px) {
    .bento-tages-grid {
        grid-template-columns: 1fr;
    }
}

.bento-tages-item {
    background: rgba(0,0,0,0.18);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}

.bento-tages-item .stat-zahl  { font-size: 1.6rem; }

/* ── Bento wide layout ── */
@media (min-width: 640px) {
    /* Mit Tagesrunde: 3-Spalten-Bento */
    .stats-bento.hat-tages {
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-rows: 1fr 1fr auto;
    }

    .hat-tages .bento-gespielt { grid-column: 1; grid-row: 1; }
    .hat-tages .bento-serie    { grid-column: 2; grid-row: 1; }
    .hat-tages .bento-letzte   { grid-column: 1; grid-row: 2; }
    .hat-tages .bento-schnitt  { grid-column: 2; grid-row: 2; }
    .hat-tages .bento-tages    { grid-column: 3; grid-row: 1 / 3; }
    .hat-tages .bento-modi     { grid-column: 1 / 4; grid-row: 3; }

    /* Ohne Tagesrunde: 4 gleich breite Kacheln */
    .stats-bento.no-tages {
        grid-template-columns: repeat(4, 1fr);
    }

    .no-tages .bento-gespielt { grid-column: 1; }
    .no-tages .bento-serie    { grid-column: 2; }
    .no-tages .bento-letzte   { grid-column: 3; }
    .no-tages .bento-schnitt  { grid-column: 4; }
    .no-tages .bento-modi     { grid-column: 1 / 5; }
}

/* ── Kennermodus-Separator ── */
.kennermodus-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 6px;
}

.kenn-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.08);
}

.kennermodus-sep span {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    letter-spacing: .06em;
}

.kenn-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.28);
    margin-bottom: 16px;
    text-align: left;
}

/* ── Primär-Button gold, Filter-Button lila ── */
#btnAlleFilmeSpielen {
    border-color: #d4a94a;
}

#btnAlleFilmeSpielen .btn-titel {
    color: #d4a94a;
}

#btnAlleFilmeSpielen:hover {
    border-color: #d4a94a;
    background: rgba(212,169,74,0.08);
}


/* ── Back + Stats-Link Buttons ── */
.back-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    font-size: 0.82rem;
    align-self: flex-start;
    margin-bottom: 14px;
    font-family: inherit;
    padding: 0;
    transition: color .15s;
}

.back-btn:hover {
    color: rgba(255,255,255,0.7);
}

.menu-extra-links {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.menu-extra-sep {
    color: rgba(255,255,255,0.12);
    font-size: 0.7rem;
    pointer-events: none;
}

.btn-stats-link {
    background: none;
    border: none;
    color: rgba(255,255,255,0.28);
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    transition: color .2s;
}

.btn-stats-link:hover {
    color: rgba(255,255,255,0.65);
}

/* ── Stats-Screen ── */
#stats-screen h2 {
    margin-bottom: 20px;
}

#stats-inhalt {
    width: 100%;
}

#btnStatsZurück {
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* ── Statistiken ── */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0;
    width: 100%;
}

.stat-box {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.stat-zahl {
    font-size: 2rem;
    font-weight: 700;
    display: block;
    line-height: 1;
}

.stat-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.32);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 4px;
    display: block;
}

.stat-rekord {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.45);
    margin: 6px 0 18px;
}

.modus-chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
    width: 100%;
}

.modus-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}

.modus-chip-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
}

.modus-chip-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #d4a94a;
}

.stats-meistgespielt-label {
    font-size: .75rem;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 8px;
}

/* ================================
   FILM-DETAILS OVERLAY
================================= */
#film-details-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 180;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

#film-details-panel {
    background: #12121e;
    border: 1px solid #2a2a3e;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 75vh;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

#film-details-schliessen {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fd-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.fd-poster {
    width: 80px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #1a1a2e;
}

.fd-info { flex: 1; min-width: 0; }

.fd-titel {
    font-size: 1rem;
    font-weight: 700;
    color: #e0e0f0;
    margin-bottom: 4px;
    line-height: 1.3;
}

.fd-jahr {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 8px;
}

.fd-rating { color: #d4a94a; font-weight: 700; }

.fd-meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    margin-bottom: 4px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-genre {
    margin-top: 8px;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.06em;
}

@media (min-width: 640px) {
    #film-details-overlay { align-items: center; }

    #film-details-panel {
        border-radius: 16px;
        max-width: 300px;
    }

    .fd-header {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .fd-poster {
        width: 140px;
        height: 210px;
        align-self: center;
    }

    .fd-info {
        text-align: center;
        min-width: 0;
    }

    .fd-meta {
        white-space: normal;
    }
}

.stats-leer-text {
    color: rgba(255,255,255,.3);
    font-size: .85rem;
}

/* ================================
   MOBILE – Tap-to-Place & Touch
================================= */
.filmkarte.ausgewählt {
    border-color: #6c63ff !important;
    box-shadow: 0 0 24px rgba(108,99,255,0.55);
}

/* Drop-Zonen leuchten auf wenn eine Karte ausgewählt ist */
.karte-ausgewählt .dropzone {
    background: rgba(108,99,255,0.06);
    border-color: rgba(108,99,255,0.25);
    border-style: dashed;
}

/* ================================
   RESPONSIVE – Mobile ab 640px
================================= */
@media (max-width: 640px) {
    #btnZurück, #btnHowTo, #btnTipp, #btnZoomReset {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    #counter {
        padding: 8px 18px;
        gap: 1rem;
        bottom: 1rem;
    }

    .counter-zahl {
        font-size: 1.4rem;
    }

    .counter-label {
        font-size: 0.55rem;
    }

    #incoming-bereich > p {
        font-size: 0.6rem;
    }

    .filmkarte {
        width: 80px;
    }

    .filmkarte img {
        height: 112px;
    }

    .dropzone {
        width: 22px;
        height: 150px;
    }

    .dropzone.aktiv {
        width: 60px;
    }
}

/* ================================
   AKTIVITÄT – Bento-Statistiken
================================= */
.akt-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.akt-kalender-box {
    grid-column: 1 / -1;
}

/* ================================
   STREAK-KALENDER
================================= */
.streak-kalender {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* Kopfzeile: leere Ecke + Monats-Labels */
.sk-kopfzeile {
    display: flex;
    gap: 5px;
    align-items: flex-end;
}

.sk-ecke {
    width: 20px;
    flex-shrink: 0;
}

.sk-monate {
    display: grid;
    grid-template-columns: repeat(10, 14px);
    gap: 3px;
    flex-shrink: 0;
}

.sk-monat-label {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.28);
    white-space: nowrap;
    overflow: visible;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Hauptzeile: Tages-Labels + Grid */
.sk-hauptzeile {
    display: flex;
    gap: 5px;
    align-items: flex-start;
}

.sk-tag-labels {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    gap: 3px;
    flex-shrink: 0;
    width: 20px;
}

.sk-tag-label {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.2);
    line-height: 14px;
    text-align: right;
}

.sk-grid {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    grid-auto-flow: column;
    grid-auto-columns: 14px;
    gap: 3px;
    flex-shrink: 0;
}

.sk-zelle {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    position: relative;
    transition: opacity 0.12s;
}

.sk-zelle:hover { opacity: 0.75; }

.kl-leer     { background: rgba(255,255,255,0.06); }
.kl-gespielt { background: rgba(212,169,74,0.7); }
.kl-zukunft  { background: transparent; }
.kl-heute    { outline: 1.5px solid rgba(255,255,255,0.4); outline-offset: 1.5px; }

/* Tagesrunde: kleiner weißer Punkt */
.kl-tages::after {
    content: '';
    position: absolute;
    bottom: 2.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.75);
}

/* Legende */
.sk-legende-detail {
    margin-top: 10px;
    width: 100%;
}

.sk-lege-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.sk-lege-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sk-lege-item span {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.03em;
}

.sk-lege-zelle {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
}