/* ==========================================================================
   Spiele: Keks-Klicker, Crossy, Runner
   ========================================================================== */

/* ==========================  KEKS-KLICKER  ============================== */
.cookie-view {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 350px;
    height: 100%;
    min-height: 0;
}

.cookie-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    gap: 16px;
}

.cookie-col--left { border-right: 1px solid var(--line); background: rgba(13, 15, 20, .5); }
.cookie-col--right { border-left: 1px solid var(--line); background: rgba(13, 15, 20, .5); }

/* Bühne ------------------------------------------------------------------- */
.cookie-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    background: var(--stage-bg, radial-gradient(120% 120% at 50% 10%, #1d2029, #0a0b0e 70%));
    transition: background .6s var(--ease);
}

.cookie-stage__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 160px 40px rgba(0, 0, 0, .65);
}

/* Zähler über dem Keks */
.tally { position: relative; z-index: 4; text-align: center; margin-bottom: 6px; pointer-events: none; }

.tally__score {
    font-family: var(--font-display);
    font-size: clamp(34px, 5.2vw, 58px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}

.tally__score.is-bumped { animation: tally-bump .28s var(--ease-spring); }

@keyframes tally-bump {
    50% { transform: scale(1.09); color: var(--gold); }
}

.tally__rate { font-size: 13.5px; color: var(--text-dim); letter-spacing: .03em; }

/* Kombo-Meter */
.combo {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s, transform .25s var(--ease-spring);
    pointer-events: none;
}

.combo.is-on { opacity: 1; transform: translateY(0); }

.combo__x {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(255, 201, 60, .7);
}

.combo__track {
    width: 130px;
    height: 5px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.combo__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--ember));
    transition: width .1s linear;
}

/* Der Keks --------------------------------------------------------------- */
/* Flach gezeichnet: eine SVG-Illustration ohne Perspektive, ohne
   Rotationen und ohne gestapelte Schatten. Die frühere Fassung kippte den
   Keks perspektivisch und stapelte Dutzende Schlagschatten übereinander —
   je nach Browser blieb davon nur eine platte Scheibe übrig. */
.cookie-wrap {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
}

.cookie {
    --cookie-lite: #f0b972;
    --cookie-col: #d4924a;
    --cookie-mid: #a86f31;
    --cookie-dark: #77491d;
    position: relative;
    --size: clamp(180px, 27vh, 268px);
    width: var(--size);
    /* Schriftgröße nur als Bezugsmaß für das Skin-Emoji — Prozentangaben in
       .cookie__glyph beziehen sich auf die Schriftgröße, nicht auf die Breite. */
    font-size: var(--size);
    aspect-ratio: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(var(--dip, 0px)) scale(var(--press, 1));
    transition: transform .18s var(--ease-spring);
}

.cookie:focus-visible { outline: 3px solid var(--gold); outline-offset: 12px; border-radius: 50%; }

.cookie.is-pressed {
    --press: .945;
    --dip: 5px;
    transition-duration: .06s;
}

.cookie__art { position: absolute; inset: 0; }
.cookie__svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Farben laufen über CSS statt über Präsentationsattribute — nur so lassen
   sich die Skin-Variablen in Verlaufsstopps auswerten. */
.ck-stop-lite { stop-color: var(--cookie-lite); }
.ck-stop-col  { stop-color: var(--cookie-col); }
.ck-stop-mid  { stop-color: var(--cookie-mid); }

.ck-rim { fill: var(--cookie-dark); }
.ck-dough { fill: url(#ck-dough); transform: scale(.955); transform-origin: 100px 100px; }
.ck-disc { fill: url(#ck-round); }

/* Angebackener Innenrand — die hellere Fläche, die beim Backen aufreißt. */
.ck-bake {
    fill: none;
    stroke: var(--cookie-lite);
    stroke-width: 2.5;
    opacity: .28;
}

.ck-crumb { fill: var(--cookie-dark); opacity: .3; }
.ck-crumb--lite { fill: #fff; opacity: .22; }

.ck-chip__bed { fill: var(--cookie-dark); opacity: .35; }
.ck-chip__body { fill: #48281a; }
.ck-chip__hi { fill: #7b4a2c; }

.ck-shine { fill: #fff; opacity: .14; pointer-events: none; }

/* Standard-Skin: gebackener Umriss mit Stücken. Alle anderen Skins sind eine
   saubere Scheibe mit Emoji darauf. */
.cookie:not(.is-plain) .ck-baked { display: none; }
.cookie.is-plain .ck-round { display: none; }

.cookie__glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: .52em;
    line-height: 1;
    text-shadow: 0 6px 14px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.cookie-glow {
    position: absolute;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--aura, rgba(255, 170, 60, .45)), transparent 62%);
    filter: blur(26px);
    animation: aura-breathe 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes aura-breathe {
    50% { transform: scale(1.14); opacity: .72; }
}

.cookie-shadow {
    position: absolute;
    bottom: -12%;
    width: 66%;
    height: 7%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 68%);
    filter: blur(8px);
    pointer-events: none;
    z-index: -1;
}

/* Klick-Effekte */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }

.ripple {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 201, 60, .85);
    animation: ripple-out .62s var(--ease-out) forwards;
}

@keyframes ripple-out {
    to { transform: scale(6.5); opacity: 0; border-width: .5px; }
}

.crumb {
    position: absolute;
    width: var(--sz, 7px);
    height: var(--sz, 7px);
    border-radius: 40% 60% 55% 45%;
    background: var(--col, #b5762f);
    animation: crumb-fly var(--dur-c, .8s) cubic-bezier(.25, .6, .3, 1) forwards;
}

@keyframes crumb-fly {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot, 320deg)) scale(.35); opacity: 0; }
}

.pop-num {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
    animation: pop-rise 1s var(--ease-out) forwards;
}

.pop-num--crit { font-size: 30px; color: var(--gold); }

@keyframes pop-rise {
    0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
    22% { transform: translate(-50%, -70%) scale(1.14); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx, 0px)), -190%) scale(.9); opacity: 0; }
}

.crit-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 201, 60, .3), transparent 62%);
    animation: crit-flash .4s ease-out forwards;
    pointer-events: none;
}

@keyframes crit-flash { to { opacity: 0; } }

/* Goldener Keks */
.golden {
    position: absolute;
    z-index: 30;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    font-size: 42px;
    cursor: pointer;
    filter: drop-shadow(0 0 22px rgba(255, 201, 60, .95));
    animation: golden-in .5s var(--ease-spring) both, golden-bob 2.4s ease-in-out infinite .5s;
    pointer-events: auto;
}

.golden:hover { transform: scale(1.16); }

@keyframes golden-in { from { opacity: 0; transform: scale(0) rotate(-140deg); } }
@keyframes golden-bob {
    50% { transform: translateY(-13px) rotate(9deg); }
}

/* Booster-Leiste ---------------------------------------------------------- */
.boosters {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 92%;
    pointer-events: none;
}

.booster {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 8px;
    border-radius: var(--r-pill);
    background: rgba(18, 20, 26, .9);
    border: 1px solid var(--bcol, var(--gold));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 10px 26px -10px var(--bcol, var(--gold));
    backdrop-filter: blur(10px);
    animation: booster-in .45s var(--ease-spring) both;
}

.booster.is-ending { animation: booster-blink .55s steps(2, end) infinite; }

@keyframes booster-in { from { opacity: 0; transform: translateY(-14px) scale(.85); } }
@keyframes booster-blink { 50% { opacity: .45; } }

.booster__dial {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: conic-gradient(var(--bcol, var(--gold)) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, .1) 0);
    display: grid;
    place-items: center;
}

.booster__dial::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #14171e;
}

.booster__icon { position: relative; z-index: 1; font-size: 15px; }
.booster__name { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; line-height: 1.2; }
.booster__time { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Panels links / rechts --------------------------------------------------- */
.mini-panel {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .028);
    overflow: hidden;
}

.mini-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.mini-panel__body { padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; }

.metric { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.metric__k { color: var(--text-faint); }
.metric__v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Arbeiter-Parade */
.crew {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 34px;
    align-content: flex-start;
}

.crew__unit {
    font-size: 19px;
    line-height: 1;
    animation: crew-work 1.1s ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

@keyframes crew-work {
    from { transform: translateY(0) rotate(-7deg); }
    to { transform: translateY(-4px) rotate(7deg); }
}

/* Shop -------------------------------------------------------------------- */
.shop-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(10px);
}

.shop-tab {
    flex: 1;
    padding: 8px 4px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    transition: all .2s var(--ease);
}

.shop-tab.is-active { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm); }

.shop-list { display: flex; flex-direction: column; gap: 8px; }

.shop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .028);
    text-align: left;
    transition: transform .18s var(--ease-spring), border-color .2s, background .2s, opacity .2s;
}

.shop-item:hover:not(.is-locked) {
    transform: translateX(3px);
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, .06);
}

.shop-item.is-locked { opacity: .42; cursor: not-allowed; }
.shop-item.is-affordable { border-color: rgba(34, 224, 161, .3); }
.shop-item.just-bought { animation: bought .5s var(--ease-spring); }

@keyframes bought {
    40% { transform: scale(1.04); border-color: var(--mint); background: rgba(34, 224, 161, .16); }
}

.shop-item__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    font-size: 20px;
}

.shop-item__main { min-width: 0; flex: 1; }
.shop-item__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.shop-item__desc { font-size: 11.5px; color: var(--text-faint); }

.shop-item__right { text-align: right; flex: none; }
.shop-item__cost {
    display: block;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.shop-item__owned { font-size: 11px; color: var(--text-faint); }

.shop-item__count {
    flex: none;
    min-width: 28px;
    padding: 3px 7px;
    border-radius: var(--r-xs);
    background: rgba(255, 255, 255, .07);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Skins-Raster */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }

.skin {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--sk-bg, rgba(255, 255, 255, .035));
    background-size: cover;
    background-position: center;
    transition: transform .2s var(--ease-spring), border-color .2s, box-shadow .2s;
    overflow: hidden;
}

.skin:hover { transform: translateY(-3px) scale(1.03); border-color: var(--line-strong); }
.skin.is-owned { border-color: rgba(34, 224, 161, .4); }
.skin.is-active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 8px 22px -8px var(--gold); }
.skin.is-locked { opacity: .55; }

.skin__glyph { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.skin__name { font-size: 10px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.skin__cost { font-size: 10px; color: var(--ice); font-weight: 700; text-shadow: 0 1px 3px #000; }
.skin__check { position: absolute; top: 4px; right: 5px; font-size: 11px; }

/* Prestige */
.prestige-box {
    padding: 16px;
    border-radius: var(--r-md);
    border: 1px solid rgba(167, 106, 255, .3);
    background: linear-gradient(150deg, rgba(167, 106, 255, .13), rgba(255, 90, 31, .07));
    text-align: center;
}

.prestige-box__gain {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: #c79bff;
    text-shadow: 0 0 26px rgba(167, 106, 255, .6);
}

/* Achievements */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 7px; }

.ach {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    font-size: 19px;
    filter: grayscale(1);
    opacity: .3;
    transition: all .3s var(--ease-spring);
    cursor: help;
}

.ach.is-earned {
    filter: none;
    opacity: 1;
    border-color: rgba(255, 201, 60, .45);
    background: rgba(255, 201, 60, .1);
}

.ach.just-earned { animation: ach-pop .7s var(--ease-spring); }

@keyframes ach-pop {
    35% { transform: scale(1.4) rotate(-12deg); }
}

@media (max-width: 1180px) {
    .cookie-view { grid-template-columns: 1fr 330px; }
    .cookie-col--left { display: none; }
}

@media (max-width: 860px) {
    .cookie-view { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) auto; }
    .cookie-col--right { border-left: 0; border-top: 1px solid var(--line); max-height: 46vh; }
}

/* ==============================  CROSSY  ================================ */
.crossy-view { position: relative; height: 100%; overflow: hidden; background: #0b1220; }

#crossy-canvas-host { position: absolute; inset: 0; }
#crossy-canvas-host canvas { display: block; width: 100%; height: 100%; }

.crossy-hud {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.crossy-hud__top { display: flex; align-items: flex-start; gap: 12px; }

.hud-score {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
    text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .6);
    font-variant-numeric: tabular-nums;
}

.hud-score.is-bumped { animation: tally-bump .26s var(--ease-spring); }
.hud-score__lbl {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .7;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

.hud-pills { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    background: rgba(8, 9, 12, .55);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.hud-pill--gold { color: var(--gold); }
.hud-pill.is-bumped { animation: tally-bump .26s var(--ease-spring); }

.hud-powers { position: absolute; left: 18px; top: 86px; display: flex; flex-direction: column; gap: 8px; }

.power-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 13px 6px 7px;
    border-radius: var(--r-pill);
    background: rgba(8, 9, 12, .6);
    border: 1px solid var(--pcol, var(--ice));
    box-shadow: 0 6px 22px -8px var(--pcol, var(--ice));
    backdrop-filter: blur(8px);
    animation: booster-in .35s var(--ease-spring) both;
}

.power-pill__dial {
    position: relative;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--pcol, var(--ice)) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, .12) 0);
}
.power-pill__dial::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #0d1017; }
.power-pill__ico { position: relative; z-index: 1; font-size: 13px; }
.power-pill__txt { font-family: var(--font-display); font-weight: 700; font-size: 12px; }

.crossy-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    text-align: center;
    background: radial-gradient(circle at 50% 40%, rgba(11, 18, 32, .75), rgba(4, 6, 11, .93));
    backdrop-filter: blur(5px);
    animation: fade-in .3s var(--ease) both;
}

.crossy-overlay.is-hidden { display: none; }

.crossy-title {
    font-family: var(--font-display);
    font-size: clamp(52px, 11vw, 108px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .85;
    background: linear-gradient(160deg, #9df7c4, #4ade80 35%, #22d3ee 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 12px 34px rgba(34, 211, 238, .35));
}

.crossy-title--over {
    background: linear-gradient(160deg, #ffd0a8, var(--ember) 45%, #ff2d55 90%);
    -webkit-background-clip: text;
    background-clip: text;
}

.crossy-panel {
    width: min(430px, 100%);
    padding: 22px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-strong);
    background: rgba(14, 17, 24, .82);
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
}

.seg button {
    flex: 1;
    padding: 8px 6px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    transition: all .2s var(--ease);
}

.seg button.is-active { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm); }

.keycaps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

.keycap {
    min-width: 34px;
    padding: 6px 9px;
    border-radius: var(--r-xs);
    border: 1px solid var(--line-strong);
    border-bottom-width: 3px;
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
}

.crossy-toast {
    position: absolute;
    left: 50%;
    top: 26%;
    transform: translateX(-50%);
    z-index: 7;
    padding: 9px 20px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    white-space: nowrap;
    background: rgba(8, 9, 12, .6);
    border: 1px solid currentColor;
    backdrop-filter: blur(8px);
    animation: crossy-toast 1.5s var(--ease-out) forwards;
    pointer-events: none;
}

@keyframes crossy-toast {
    0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.8); }
    18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06); }
    28% { transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-34px) scale(.95); }
}

/* ==============================  RUNNER  ================================ */
.runner-view { position: relative; height: 100%; overflow: hidden; background: linear-gradient(180deg, #10131b, #070810); }
#run-canvas { display: block; width: 100%; height: 100%; }

.runner-hud {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    padding: 0 20px;
    pointer-events: none;
}

.runner-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    background: rgba(6, 8, 13, .8);
    backdrop-filter: blur(5px);
    animation: fade-in .3s var(--ease) both;
}

.runner-overlay.is-hidden { display: none; }

/* --- Platz für das mobile Dock ------------------------------------------- */
@media (max-width: 900px) {
    .cookie-col--right { padding-bottom: calc(var(--dock-h) + 18px); }
    .crossy-overlay,
    .runner-overlay { padding-bottom: calc(var(--dock-h) + 24px); }
    .crossy-hud { padding-bottom: calc(var(--dock-h) + 12px); }
    .hud-powers { top: auto; bottom: calc(var(--dock-h) + 20px); }
    .boosters { max-width: calc(100% - 24px); }
}