/*
 * "Den Jürgen würgen" - das Spiel auf der Startseite.
 *
 * Lag vorher als <style>-Block mitten in der index.php. Inhaltlich
 * unverändert übernommen; einzige Ausnahme ist der footer-Selektor,
 * siehe Kommentar weiter unten.
 */
/*
 * Farben.
 *
 * Das Spiel kam in Neon daher - Gelb, Pink, Giftgrün. Neben den ruhigen
 * Kacheln der Startseite war das ein Fremdkörper. Jetzt holt es sich die
 * Hausfarben aus frontend.css: --spiel-akzent folgt dem Skin, --spiel-hell
 * und --spiel-dunkel bleiben fest, weil das Spielfeld in jedem Skin dunkel
 * ist und der Text darauf lesbar bleiben muss.
 *
 * Die alten Namen bleiben als Variablen bestehen, damit unten nichts
 * umgeschrieben werden musste.
 */
#app{
    --spiel-akzent: var(--accent-alt, #b91f27);
    --spiel-hell:   #efe9db;
    --spiel-dunkel: #17140f;

    --neon-yellow: var(--spiel-hell);
    --neon-pink:   var(--spiel-akzent);
    --neon-green:  #cfd6c4;
    --neon-cyan:   #9fb3b0;
    --skin:        #e8c3a0;
}

#app{ width:100%; max-width:1080px; padding:16px; }

#title{
text-align:center; margin:0 0 10px;
font-size:clamp(22px,4vw,34px); font-weight:900; letter-spacing:1px;
color:var(--spiel-hell);
-webkit-text-stroke:1.5px var(--spiel-dunkel);
text-shadow:2px 2px 0 var(--spiel-dunkel);
}

#hud{
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
gap:8px;
font-weight:800; font-size:clamp(13px,3.2vw,20px); margin-bottom:8px;
text-shadow:0 2px 0 #000;
}
#hud .pill{
background:var(--spiel-dunkel); border:2px solid var(--spiel-hell);
padding:5px 12px; border-radius:999px; color:var(--spiel-hell);
white-space:nowrap;
}
#hud .pill.pink{ border-color:var(--neon-pink); color:var(--neon-pink); }
#hud .pill.green{ border-color:var(--neon-green); color:var(--neon-green); }

#stage{
position:relative;
width:100%;
aspect-ratio:3/2;
margin:0 auto;
border:1px solid var(--border, #000);
border-radius:calc(var(--radius, 14px) - 8px);
overflow:hidden;
background-color:#7a4a37;
background-image:
linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
/* Der Pfad zählt ab dieser Datei, nicht ab der Seite. */
url("../../images/jurgen.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
cursor:none;
touch-action:none;
user-select:none;
box-shadow:none;
}

.ground{
    position:absolute; left:0; right:0; bottom:0; height:22%;
    background:linear-gradient(to bottom, transparent, rgba(0,0,0,.55));
}

.hide-spot{
    position:absolute;
    transform:translate(-50%,-100%);
    filter:drop-shadow(0 6px 6px rgba(0,0,0,.5));
    pointer-events:none;
}

#juergen{
position:absolute;
transform:translate(-50%,-100%);
transition:left .18s cubic-bezier(.34,1.56,.64,1), top .18s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
z-index:5;
}
#juergen.jump{ animation:jumpPulse .25s ease; }
@keyframes jumpPulse{
    0%{ transform:translate(-50%,-100%) scale(1); }
    40%{ transform:translate(-50%,-100%) scale(1.25,.75); }
    100%{ transform:translate(-50%,-100%) scale(1); }
}
#juergen.caught{
animation:caughtSpin .7s ease;
transition:none;
}
@keyframes caughtSpin{
    0%{ transform:translate(-50%,-100%) rotate(0deg) scale(1); }
    25%{ transform:translate(-50%,-100%) rotate(-18deg) scale(1.15,.85); }
    50%{ transform:translate(-50%,-100%) rotate(14deg) scale(.85,1.2); }
    75%{ transform:translate(-50%,-100%) rotate(-8deg) scale(1.1,.9); }
    100%{ transform:translate(-50%,-100%) rotate(0deg) scale(1); }
}
.stars{
    position:absolute; inset:0; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
    opacity:0;
}
#juergen.caught .stars{
animation:starsPop .7s ease;
}
@keyframes starsPop{
    0%{ opacity:0; transform:scale(.4) rotate(0deg); }
    30%{ opacity:1; transform:scale(1.3) rotate(30deg); }
    100%{ opacity:0; transform:scale(1.6) rotate(90deg); }
}

#hand{
position:absolute; top:0; left:0;
width:56px; height:80px;
transform:translate(-50%,-65%);
pointer-events:none;
z-index:10;
}
#hand svg{ width:100%; height:100%; overflow:visible; }
#hand .fist{ display:none; }
#hand.punch .open{ display:none; }
#hand.punch .fist{ display:block; }

.floatmsg{
    position:absolute; font-weight:900; font-size:22px;
    color:#fff; text-shadow:2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    pointer-events:none; z-index:20;
    animation:floatUp .8s ease forwards;
    white-space:nowrap;
}
@keyframes floatUp{
    0%{ transform:translate(-50%,0) scale(.6); opacity:0; }
    20%{ transform:translate(-50%,-10px) scale(1.1); opacity:1; }
    100%{ transform:translate(-50%,-70px) scale(1); opacity:0; }
}

#stage.shake{ animation:shake .25s; }
@keyframes shake{
    0%,100%{ transform:translate(0,0); }
    25%{ transform:translate(-6px,3px); }
    50%{ transform:translate(6px,-3px); }
    75%{ transform:translate(-4px,-2px); }
}

.overlay[hidden]{ display:none; }
.overlay{
    position:absolute; inset:0;
    background:rgba(0,0,0,.82);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:clamp(8px,2vh,16px); padding:clamp(10px,3vw,24px); z-index:50;
    cursor:default;
    overflow:auto;
}
.overlay h2{
    font-size:clamp(18px,4vw,28px); margin:0; color:var(--neon-yellow);
    text-shadow:2px 2px 0 #000;
}
.overlay p{ font-size:clamp(12px,2.6vw,17px); max-width:480px; line-height:1.4; margin:0; color:#eee; }
.btn{
    background:var(--spiel-akzent); color:#fff; border:3px solid var(--spiel-dunkel);
    font-weight:900; font-size:clamp(14px,3vw,18px); padding:clamp(8px,2vh,12px) clamp(18px,5vw,28px); border-radius:999px;
    cursor:pointer; box-shadow:0 4px 0 #0a2b12;
    transition:transform .08s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--spiel-dunkel); }

/* Eingegrenzt auf das Spiel: Als nacktes footer{} traf diese Regel
   auch die Fußzeile der Seite (13px, grau, zentriert). */
#app footer{
    margin-top:10px; font-size:13px; color:#888; text-align:center;
}