/* ═══════════════════════════════════════════════════════════════════════
   Das Spiel — die Keckex-Challenge.

   **Diese Datei ist ABSICHTLICH nicht modernisiert.** Phase 6 baut das
   Aussehen der oeffentlichen Seite neu; das Spiel ist aber keine
   Gestaltung, sondern eine Funktion mit 1.539 Zeilen JavaScript, das
   auf jede dieser Klassen zeigt — Ziele, Dampfteilchen, Bonus-Drops,
   Walzen, Bestenliste. Marcos Vorgabe lautet "selbe Funktionen"; eine
   neu gesetzte Spielflaeche waere ein neues Spiel.

   Herausgeloest aus landing.css (Zeilen 1448-1789 der Fassung vom
   27.08.2026), Zeichen fuer Zeichen unveraendert. Der Rest jener Datei
   ist in keckex.css aufgegangen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   KECKEX CHALLENGE GAME
   ══════════════════════════════════════════════════════════════ */
.lp-game-section {
    padding: 3rem 1.5rem;
    max-width: 900px;
    margin: 0 auto 3rem auto;
    text-align: center;
}
.lp-game-section .lp-section__title {
    margin-bottom: 0.5rem;
}
.lp-game-section .lp-section__subtitle {
    margin-bottom: 2rem;
    color: #64748b;
}

.keckex-game-container {
    position: relative;
    width: 100%;
    height: 460px;
    background-color: #cbd5e1;
    background-image: 
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, transparent 80%),
        url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%2394a3b8' fill-opacity='0.3'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    border-radius: 20px;
    border: 3px solid #94a3b8;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.1);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: inset 0 6px 15px rgba(0,0,0,0.3);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.keckex-game-container.is-playing {
    border-color: var(--kx-green);
    box-shadow: inset 0 0 30px rgba(var(--kx-green-rgb), 0.15); /* roughly match var(--kx-green) */
    cursor: crosshair !important;
}

.keckex-game-container.fever-mode-active {
    border-color: #f59e0b !important;
    box-shadow: inset 0 0 50px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.4) !important;
    animation: feverPulse 0.5s infinite alternate;
}
@keyframes feverPulse {
    from { box-shadow: inset 0 0 30px rgba(245, 158, 11, 0.3); }
    to { box-shadow: inset 0 0 80px rgba(245, 158, 11, 0.6), 0 0 30px rgba(245, 158, 11, 0.6); }
}

.keckex-game-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    z-index: 10;
    backdrop-filter: blur(6px);
    border-radius: 17px;
    transition: opacity 0.3s;
    padding: 1rem 0;
}

.kg-start-btn {
    background: linear-gradient(135deg, var(--kx-green), var(--kx-green-dark));
    /* Gross und fett (20,8 px / 800), also gilt hier die Ausnahme fuer
       grosse Schrift mit 3:1 - weiss schafft aber auch die nicht (1,74).
       Dieselbe Tinte wie ueberall sonst auf dem Gruen. */
    color: var(--kx-auf-gruen);
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.3rem;
    font-weight: 800;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--kx-green-rgb), 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.kg-start-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 25px rgba(var(--kx-green-rgb), 0.5);
}

.kg-hud {
    display: flex;
    justify-content: space-between;
    z-index: 5;
}
.kg-hud-box {
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-weight: 800;
    color: var(--kx-dark);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 100px;
    justify-content: center;
}

.keckex-target {
    position: absolute;
    font-size: 3rem;
    cursor: inherit;
    line-height: 1;
    transform-origin: bottom center;
    animation: targetPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35));
    user-select: none;
    touch-action: manipulation;
}
@keyframes targetPopIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.steam-lance {
    position: absolute;
    width: 14px;
    height: 45px;
    background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
    border-radius: 8px;
    border: 2px solid #334155;
    pointer-events: none;
    z-index: 1000;
    transform-origin: top center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.steam-lance::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -3px;
    width: 16px;
    height: 16px;
    background: #334155;
    border-radius: 4px;
}

.steam-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 999;
}
.steam-particle-light {
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(200,200,200,0) 70%);
    animation: steamIdle 0.4s ease-out forwards;
}
.steam-particle-heavy {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(200,200,200,0) 70%);
    animation: steamActive 0.6s ease-out forwards;
}
@keyframes steamIdle {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.6; }
    100% { transform: translate(-50%, -80%) scale(1.5); opacity: 0; }
}
@keyframes steamActive {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    50% { transform: translate(-50%, -100%) scale(1.5); opacity: 0.9; }
    100% { transform: translate(-50%, -150%) scale(2.5); opacity: 0; }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.keckex-game-container.shake {
    animation: shake 0.2s;
}

.boss-target {
    font-size: 4.5rem;
    filter: drop-shadow(0 12px 18px rgba(220, 38, 38, 0.5));
}

.dirt-target {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23381a07' d='M35 15 C45 5, 55 5, 65 15 C75 10, 85 20, 80 35 C95 45, 90 65, 75 70 C80 90, 60 95, 45 85 C30 95, 10 80, 15 65 C5 50, 10 30, 25 35 C20 20, 30 10, 35 15 Z' /%3E%3Ccircle cx='18' cy='22' r='4' fill='%23291104'/%3E%3Ccircle cx='82' cy='78' r='5' fill='%2352270b'/%3E%3Ccircle cx='85' cy='28' r='3' fill='%23381a07'/%3E%3C/svg%3E") !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.3));
    margin-top: -10px;
}

.ant-target {
    font-size: 2.2rem;
    animation: targetPopIn 0.3s forwards, antWiggle 0.15s infinite linear 0.3s;
}
@keyframes antWiggle {
    0% { transform: scale(1) rotate(-15deg) translate(-2px, -2px); }
    50% { transform: scale(1) rotate(15deg) translate(2px, 2px); }
    100% { transform: scale(1) rotate(-15deg) translate(-2px, -2px); }
}

/* Hall Of Fame */
.kg-hall-of-fame {
    margin-top: 1.5rem;
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    text-align: left;
}
.kg-hall-of-fame-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kx-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kg-leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}
.kg-leaderboard-item {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
}
.kg-leaderboard-item:last-child {
    border-bottom: none;
}
.kg-leaderboard-item:nth-child(even) {
    background-color: #f8fafc;
}
.kg-leaderboard-rank {
    font-weight: 700;
    color: #94a3b8;
    width: 25px;
    display: inline-block;
}
.kg-leaderboard-rank.top-1 { color: #f59e0b; }
.kg-leaderboard-rank.top-2 { color: #94a3b8; }
.kg-leaderboard-rank.top-3 { color: #b45309; }

.kg-leaderboard-name {
    font-weight: 600;
    color: var(--kx-dark);
    flex: 1;
}
/* **Am 02.09.2026 live gemessen: 16 Punktestaende zu 1,74.** Die
   Bestenliste (`.kg-hall-of-fame`) ist weiss; der volle Ton ist dort
   nicht zu lesen. Schriftton: 4,93. */
.kg-leaderboard-score {
    font-weight: 800;
    color: var(--kx-gruen-text);
}

.combo-indicator {
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%) scale(0);
    font-weight: 900;
    font-size: 1.4rem;
    color: #f59e0b;
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.6), 0 4px 10px rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 102;
    opacity: 0;
}
@keyframes comboPop {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    10% { transform: translateX(-50%) scale(1.5); opacity: 1; }
    85% { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: 0; }
}

/* Der Grund ist das Spielfeld (`.keckex-game-container`, #cbd5e1) — dort
   ist der volle Ton mit **1,18** noch schlechter als auf Weiss. Der
   Schriftton kommt auf 3,32, und die 1,2rem in 900 zaehlen als grosse
   Schrift (Grenze 3,0). **Wer diese Zahl kleiner oder leichter macht,
   faellt unter die Grenze** — dann braucht sie einen dunkleren Ton. */
.floating-score {
    position: absolute;
    color: var(--kx-gruen-text);
    font-weight: 900;
    font-size: 1.2rem;
    pointer-events: none;
    animation: floatUp 1.2s ease-out forwards;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 10px rgba(var(--kx-green-rgb), 0.4);
    z-index: 101;
}
.combo-score {
    color: #ef4444;
    font-size: 1.4rem;
    animation: floatUpCombo 1.8s ease-out forwards;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 15px rgba(239, 68, 68, 0.5);
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-50px) scale(1.2); opacity: 0; }
}
@keyframes floatUpCombo {
    0% { transform: translateY(0) scale(1.5); opacity: 1; }
    100% { transform: translateY(-70px) scale(2); opacity: 0; }
}

@keyframes kidBlink {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
    100% { transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.6); }
}
.kid-help-btn {
    animation: kidBlink 1.2s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    color: #f59e0b !important;
    border: 2px dashed #f59e0b;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kid-help-btn:hover {
    background: #fef3c7;
    transform: scale(1.08) !important;
}