.penalty-game {
    --bg: #07150f;
    --card: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.16);
    --text: #f4fff8;
    --muted: #b9d7c4;
    --accent: #e4b642;
    --accent-dark: #7a5a10;
    --danger: #d93f3f;
    --success: #23b26d;
    --grass-1: #146b39;
    --grass-2: #0f5a30;
    --line: rgba(255, 255, 255, 0.85);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.penalty-game * {
    box-sizing: border-box;
}

.penalty-game {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top, rgba(228, 182, 66, 0.18), transparent 34rem),
        linear-gradient(135deg, #07150f, #0d2718 58%, #07150f);
}

.penalty-game button {
    font: inherit;
}


.penalty-game input ,
.penalty-game button {
    touch-action: manipulation;
}

.penalty-game {
    -webkit-text-size-adjust: 100%;
}

.penalty-game .game-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0;
}

.penalty-game .hero-card ,
.penalty-game .player-card ,
.penalty-game .notice-card ,
.penalty-game .control-card ,
.penalty-game .history-card ,
.penalty-game .highscore-card {
    border: 1px solid var(--card-border);
    border-radius: 24px;
    background: var(--card);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.penalty-game .hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px;
    margin-bottom: 22px;
}

.penalty-game .notice-card {
    padding: 16px 20px;
    margin-bottom: 22px;
    color: #ffe9a8;
}

.penalty-game .player-card {
    display: grid;
    grid-template-columns: auto minmax(180px, 320px) 1fr;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    margin-bottom: 22px;
}

.penalty-game .player-card label {
    color: var(--muted);
    font-weight: 800;
}

.penalty-game .player-card input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: var(--text);
    font: inherit;
    background: rgba(0, 0, 0, 0.22);
    outline: none;
}

.penalty-game .player-card input:focus {
    border-color: rgba(228, 182, 66, 0.82);
    box-shadow: 0 0 0 3px rgba(228, 182, 66, 0.14);
}

.penalty-game .save-status {
    color: var(--muted);
    font-size: 0.92rem;
}

.penalty-game .save-status.success {
    color: #c9ffd9;
}

.penalty-game .save-status.error {
    color: #ffd3d3;
}

.penalty-game .eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.penalty-game h1 ,
.penalty-game h2 ,
.penalty-game p {
    margin-top: 0;
}

.penalty-game h1 {
    margin-bottom: 10px;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
}

.penalty-game .intro {
    max-width: 640px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 1.03rem;
}

.penalty-game .score-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 12px;
    min-width: 250px;
}

.penalty-game .score-board > div {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}

.penalty-game .score-label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.penalty-game .score-board strong {
    color: var(--accent);
    font-size: 2.1rem;
}

.penalty-game .field-card {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(6, 10, 18, 0.1) 0%, rgba(7, 16, 10, 0.2) 35%, rgba(6, 12, 8, 0.4) 100%),
        url('img/stadium-bg.webp') center center / cover no-repeat;
    box-shadow: var(--shadow);
}

.penalty-game .field-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%, transparent 70%, rgba(0, 0, 0, 0.26));
    pointer-events: none;
}

.penalty-game .stadium-lights {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.22), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%);
    pointer-events: none;
}

.penalty-game .goal {
    position: absolute;
    top: 70px;
    left: 50%;
    width: min(720px, 82%);
    height: 255px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.penalty-game .net-lines {
    display: none;
}

.penalty-game .keeper {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 180px;
    height: 148px;
    transform: translateX(-50%);
    transition: transform 420ms ease, filter 240ms ease;
    z-index: 3;
    background: url('img/keeper-center.webp') center bottom / contain no-repeat;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.34));
}

.penalty-game .keeper.jump-left {
    transform: translateX(calc(-50% - 192px)) translateY(2px) scale(1.08);
    background-image: url('img/keeper-left.webp');
}

.penalty-game .keeper.jump-center {
    transform: translateX(-50%) translateY(-10px) scale(1.04);
    background-image: url('img/keeper-center.webp');
}

.penalty-game .keeper.jump-right {
    transform: translateX(calc(-50% + 192px)) translateY(2px) scale(1.08);
    background-image: url('img/keeper-right.webp');
}

.penalty-game .penalty-area {
    position: absolute;
    left: 50%;
    bottom: 34px;
    width: min(520px, 74%);
    height: 210px;
    transform: translateX(-50%);
    border: 0;
    border-bottom: 0;
    border-radius: 260px 260px 0 0;
}

.penalty-game .penalty-mark {
    position: absolute;
    left: 50%;
    bottom: 58px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

.penalty-game .ball {
    --ball-x: 0px;
    --ball-y: 0px;
    position: absolute;
    left: 50%;
    bottom: 35px;
    width: 42px;
    height: 42px;
    border: 3px solid #111;
    border-radius: 50%;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.18) 24%, transparent 25%),
        radial-gradient(circle at 50% 50%, #111 0 14%, transparent 15%),
        radial-gradient(circle at 26% 28%, #111 0 10%, transparent 11%),
        radial-gradient(circle at 74% 28%, #111 0 10%, transparent 11%),
        radial-gradient(circle at 29% 75%, #111 0 10%, transparent 11%),
        radial-gradient(circle at 73% 75%, #111 0 10%, transparent 11%),
        #fff;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.32);
    z-index: 5;
}

.penalty-game .ball.shoot {
    animation: ball_shoot var(--ball-time, 620ms) cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.penalty-game .ball.returning {
    transition: transform 260ms ease;
}

@keyframes ball_shoot {
    0% {
        transform: translateX(-50%) translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) translate(var(--ball-x), var(--ball-y)) scale(0.58) rotate(540deg);
    }
}

.penalty-game .control-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
    margin-top: 22px;
}

.penalty-game .message-box {
    display: grid;
    gap: 4px;
}

.penalty-game .message-box strong {
    font-size: 1.35rem;
}

.penalty-game .message-box span {
    color: var(--muted);
}

.penalty-game .aim-selector {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.penalty-game .aim-selector-label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.penalty-game .mini-goal-selector {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 74px);
    grid-template-rows: repeat(3, 52px);
    gap: 6px;
    padding: 10px;
    border: 4px solid rgba(255, 255, 255, 0.92);
    border-bottom-width: 6px;
    border-radius: 10px 10px 4px 4px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
        rgba(0, 0, 0, 0.18);
    background-size: calc((100% - 20px) / 3) calc((100% - 20px) / 3), calc((100% - 20px) / 3) calc((100% - 20px) / 3), auto;
    box-shadow: inset 0 -12px 24px rgba(0, 0, 0, 0.18), 0 12px 24px rgba(0, 0, 0, 0.24);
}

.penalty-game .power-panel {
    display: grid;
    gap: 7px;
    width: 100%;
    max-width: 260px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
}

.penalty-game .power-panel label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 0.9rem;
}

.penalty-game .power-panel strong {
    color: var(--accent);
}

.penalty-game .power-panel input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    cursor: pointer;
}

.penalty-game .power-panel input[type="range"]:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.penalty-game .power-scale {
    display: flex;
    justify-content: space-between;
    color: rgba(244, 255, 248, 0.64);
    font-size: 0.72rem;
}


.penalty-game .aim-cell ,
.penalty-game .restart-button {
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    color: #1b1402;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 216, 108, 0.94), rgba(228, 182, 66, 0.86));
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
}

.penalty-game .aim-cell {
    position: relative;
}

.penalty-game .aim-cell::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(27, 20, 2, 0.48);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

.penalty-game .aim-cell:hover ,
.penalty-game .restart-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.penalty-game .aim-cell:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.penalty-game .restart-button {
    justify-self: end;
    border-radius: 999px;
}

.penalty-game .history-card {
    padding: 22px;
    margin-top: 22px;
}

.penalty-game .history-card h2 {
    margin-bottom: 14px;
    font-size: 1.25rem;
}

.penalty-game .shot-history {
    display: grid;
    gap: 9px;
    min-height: 38px;
    margin: 0;
    padding-left: 22px;
    color: var(--muted);
}

.penalty-game .shot-history li::marker {
    color: var(--accent);
    font-weight: 800;
}

.penalty-game .history-goal {
    color: #c9ffd9;
}

.penalty-game .history-save ,
.penalty-game .history-miss {
    color: #ffd3d3;
}


.penalty-game .highscore-card {
    padding: 22px;
    margin-top: 22px;
}

.penalty-game .highscore-card h2 {
    margin-bottom: 14px;
    font-size: 1.25rem;
}

.penalty-game .highscore-list ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.penalty-game .highscore-list li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
}

.penalty-game .highscore-list strong {
    color: var(--accent);
}

.penalty-game .highscore-list span ,
.penalty-game .empty-highscore {
    color: var(--muted);
}

.penalty-game .empty-highscore {
    margin: 0;
}

@media (max-width: 900px) {
.penalty-game .player-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

.penalty-game .save-status {
        display: block;
    }

.penalty-game .highscore-list li {
        display: grid;
    }
}

@media (max-width: 780px) {
.penalty-game {
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }

.penalty-game .game-shell {
        width: min(100% - 14px, 1120px);
        padding: 12px 0;
    }

.penalty-game .hero-card ,
.penalty-game .player-card ,
.penalty-game .control-card ,
.penalty-game .history-card ,
.penalty-game .highscore-card ,
.penalty-game .notice-card {
        border-radius: 20px;
    }

.penalty-game .hero-card ,
.penalty-game .player-card ,
.penalty-game .control-card {
        grid-template-columns: 1fr;
        display: grid;
    }

.penalty-game .hero-card ,
.penalty-game .player-card ,
.penalty-game .history-card ,
.penalty-game .highscore-card ,
.penalty-game .notice-card {
        padding: 16px;
    }

.penalty-game .hero-card {
        gap: 18px;
    }

.penalty-game .intro {
        font-size: 0.95rem;
    }

.penalty-game .score-board {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.penalty-game .score-board > div {
        padding: 14px;
    }

.penalty-game .score-board strong {
        font-size: 1.8rem;
    }

.penalty-game .player-card {
        gap: 10px;
    }

.penalty-game .player-card input {
        min-height: 50px;
        font-size: 16px;
    }

.penalty-game .save-status {
        font-size: 0.86rem;
    }

.penalty-game .field-card {
        min-height: 55vh;
        max-height: 580px;
        border-radius: 24px;
    }

.penalty-game .goal {
        top: 64px;
        height: 188px;
        width: 94%;
    }

.penalty-game .keeper {
        width: 130px;
        height: 112px;
        bottom: 16px;
    }

.penalty-game .keeper.jump-left {
        transform: translateX(calc(-50% - 98px)) translateY(2px) scale(1.04);
    }

.penalty-game .keeper.jump-center {
        transform: translateX(-50%) translateY(-7px) scale(1.03);
    }

.penalty-game .keeper.jump-right {
        transform: translateX(calc(-50% + 98px)) translateY(2px) scale(1.04);
    }

.penalty-game .penalty-area {
        width: min(84vw, 420px);
        height: 160px;
        bottom: 22px;
    }

.penalty-game .penalty-mark {
        bottom: 44px;
        width: 12px;
        height: 12px;
    }

.penalty-game .ball {
        bottom: 20px;
        width: 34px;
        height: 34px;
    }

.penalty-game .control-card {
        position: sticky;
        bottom: 8px;
        z-index: 10;
        padding: 14px;
        margin-top: 14px;
        gap: 14px;
        background: rgba(12, 24, 17, 0.88);
        backdrop-filter: blur(18px);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
    }

.penalty-game .message-box strong {
        font-size: 1.15rem;
    }

.penalty-game .message-box span {
        font-size: 0.9rem;
    }

.penalty-game .aim-selector ,
.penalty-game .restart-button {
        width: 100%;
        justify-items: stretch;
    }

.penalty-game .mini-goal-selector {
        justify-self: stretch;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, 56px);
        width: 100%;
        gap: 7px;
        padding: 8px;
    }

.penalty-game .aim-cell ,
.penalty-game .restart-button {
        min-height: 52px;
    }

.penalty-game .power-panel {
        max-width: none;
        padding: 10px;
    }

.penalty-game .power-panel input[type="range"] {
        min-height: 32px;
    }

.penalty-game .shot-history {
        gap: 8px;
        padding-left: 18px;
        font-size: 0.92rem;
    }

.penalty-game .highscore-list li {
        gap: 6px;
        padding: 11px 12px;
    }

.penalty-game .highscore-list span {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
.penalty-game .game-shell {
        width: calc(100% - 10px);
    }

.penalty-game h1 {
        font-size: clamp(1.7rem, 8vw, 2.3rem);
    }

.penalty-game .hero-card ,
.penalty-game .player-card ,
.penalty-game .history-card ,
.penalty-game .highscore-card ,
.penalty-game .notice-card ,
.penalty-game .control-card {
        padding: 14px;
    }

.penalty-game .field-card {
        min-height: 50vh;
        max-height: 470px;
    }

.penalty-game .goal {
        top: 58px;
        height: 168px;
    }

.penalty-game .keeper {
        width: 112px;
        height: 96px;
        bottom: 12px;
    }

.penalty-game .keeper.jump-left {
        transform: translateX(calc(-50% - 78px)) translateY(2px) scale(1.03);
    }

.penalty-game .keeper.jump-right {
        transform: translateX(calc(-50% + 78px)) translateY(2px) scale(1.03);
    }

.penalty-game .penalty-area {
        width: min(86vw, 330px);
        height: 132px;
        bottom: 16px;
    }

.penalty-game .penalty-mark {
        bottom: 34px;
    }

.penalty-game .ball {
        bottom: 14px;
        width: 28px;
        height: 28px;
        border-width: 2px;
    }

.penalty-game .mini-goal-selector {
        grid-template-rows: repeat(3, 50px);
    }

.penalty-game .aim-cell::after {
        width: 8px;
        height: 8px;
    }

.penalty-game .score-board strong {
        font-size: 1.6rem;
    }

.penalty-game .power-panel label {
        font-size: 0.84rem;
    }

.penalty-game .power-scale {
        font-size: 0.68rem;
    }
}

.penalty-game{--card:#fff;--card-border:#e2e8f0;--text:#1e293b;--muted:#64748b;--accent:#fbbf24;--shadow:0 10px 30px #0001;background:none;color:var(--text);font-family:inherit;min-height:0;padding:0}
.penalty-game [hidden]{display:none!important}.penalty-game .game-shell{width:100%;padding:0}
.penalty-game .hero-card,.penalty-game .control-card,.penalty-game .history-card,.penalty-game .highscore-card{background:#fff;border:0;border-radius:16px;backdrop-filter:none}
.penalty-game h1{font-size:clamp(1.8rem,4vw,2.5rem);color:#0f172a}.penalty-game h2{color:#0f172a}
.penalty-game .eyebrow{display:inline-block;background:#fbbf24;color:#0f172a;padding:6px 14px;border-radius:99px}
.penalty-game .hero-card>.penalty-info{flex:0 0 225px;max-width:225px;text-align:right;font-size:.76rem;color:#64748b;margin:0;line-height:1.6}
.penalty-game .save-status{display:block;margin-top:6px;font-size:.8rem}.penalty-game .save-status:empty{display:none}.penalty-game .save-status.success,.penalty-game .history-goal{color:#047857}.penalty-game .save-status.error,.penalty-game .history-save,.penalty-game .history-miss{color:#b91c1c}
.penalty-game .restart-button{background:linear-gradient(135deg,#fbbf24,#e08000);color:white;border:0;border-radius:10px;min-height:44px;font-size:.75rem;font-weight:700;text-transform:uppercase;padding:10px}.penalty-game .restart-button:disabled{opacity:.55}
.penalty-game .field-card{min-height:480px;max-height:none;background:#0d2718;border-radius:16px}
.penalty-game .penalty-arena{position:absolute;inset:0 0 0 256px;background:url('img/stadium-bg.webp') center/cover no-repeat}
.penalty-game .field-card .control-card{position:absolute;z-index:3;left:16px;top:20px;width:224px;margin:0;padding:14px;display:flex;flex-direction:column;gap:12px}
.penalty-game .field-card .aim-selector{width:100%;justify-items:stretch;gap:8px}.penalty-game .field-card .mini-goal-selector{width:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,44px);gap:4px;padding:6px;border-width:2px;background-color:#146b39;box-shadow:none}
.penalty-game .power-panel{background:#f8fafc;border:1px solid #e2e8f0;max-width:none;padding:8px}.penalty-game .power-panel label{font-size:.75rem;flex-wrap:wrap}.penalty-game .power-panel strong{color:#0f172a}.penalty-game .power-scale{font-size:.65rem;color:#64748b}.penalty-game .field-card .restart-button{width:100%}
.penalty-game .penalty-arena .goal{width:48%;height:27%;top:22%}.penalty-game .penalty-arena .keeper{bottom:-18px}.penalty-game .keeper.jump-left{transform:translateX(calc(-50% - var(--keeper-offset,100px)))}.penalty-game .keeper.jump-right{transform:translateX(calc(-50% + var(--keeper-offset,100px)))}
.penalty-game .message-box{position:absolute;z-index:2;bottom:16px;left:16px;right:16px;padding:10px 14px;background:#fffffff0;border-radius:10px;text-align:center;pointer-events:none}.penalty-game .message-box strong{font-size:1rem}.penalty-game .message-box span{font-size:.78rem}
.penalty-game .penalty-arena .score-board{position:absolute;z-index:3;top:12px;right:12px;min-width:0;grid-template-columns:repeat(2,78px);gap:6px;pointer-events:none}.penalty-game .score-board>div{padding:8px 6px;background:#ffffffdb;border:1px solid #ffffff66;border-radius:9px}.penalty-game .score-label{font-size:.58rem;margin-bottom:3px}.penalty-game .score-board strong{font-size:1.3rem;color:#0f172a}
.penalty-game .highscore-list li{background:#f8fafc;border:1px solid #e2e8f0}.penalty-game .highscore-list strong{color:#0f172a;overflow-wrap:anywhere}
@media(max-width:780px){.penalty-game .hero-card>.penalty-info{flex:none;max-width:none;text-align:left}.penalty-game .field-card{display:flex;flex-direction:column;min-height:0}.penalty-game .penalty-arena{position:relative;inset:auto;order:0;height:340px;width:100%}.penalty-game .field-card .control-card{position:relative;left:auto;top:auto;order:1;width:calc(100% - 24px);margin:12px;padding:12px}.penalty-game .field-card .aim-selector{grid-template-columns:minmax(132px,1fr) minmax(110px,1fr);gap:8px}.penalty-game .aim-selector-label{grid-column:1/-1}.penalty-game .penalty-arena .goal{width:90%;top:29%;height:36%}.penalty-game .penalty-arena .keeper{bottom:-10px}.penalty-game .penalty-arena .penalty-area{bottom:60px}}
@media(prefers-reduced-motion:reduce){.penalty-game *{animation-duration:1ms!important;transition-duration:1ms!important}}
/* Spielstand und Schussverlauf gemeinsam rechts neben dem Tor. */
.penalty-game .penalty-match-panel{position:absolute;z-index:3;top:12px;right:12px;width:178px;max-height:calc(100% - 106px);overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 3px 14px rgba(0,0,0,.12)}
.penalty-game .penalty-arena .penalty-match-panel .score-board{position:static;display:grid;grid-template-columns:1fr;gap:6px;min-width:0;width:100%}
.penalty-game .penalty-match-panel .score-board>div{padding:8px;border-color:#e2e8f0;background:#f8fafc}
.penalty-game .penalty-match-panel .history-card{margin:0;padding:4px 0 0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.penalty-game .penalty-match-panel .history-card h2{font-size:1rem;margin-bottom:8px}
.penalty-game .penalty-match-panel .shot-history{font-size:.68rem;line-height:1.5;padding-left:17px;min-height:0;gap:6px;overflow-wrap:anywhere}
.penalty-game .penalty-match-panel .shot-history:empty::after{content:'Noch kein Schuss';color:#64748b}
@media(min-width:781px) and (max-width:1100px){.penalty-game .penalty-match-panel{width:146px;padding:8px}.penalty-game .penalty-arena .goal{width:42%;left:46%}}
@media(max-width:780px){.penalty-game .penalty-arena{height:auto;min-height:340px;padding-top:340px}.penalty-game .penalty-match-panel{position:relative;top:auto;right:auto;max-height:none;width:calc(100% - 24px);margin:0 12px 12px}.penalty-game .penalty-arena .penalty-match-panel .score-board{grid-template-columns:repeat(2,minmax(0,1fr))}.penalty-game .penalty-arena .goal{top:98px;height:122px}.penalty-game .penalty-arena .penalty-area{top:150px;bottom:auto}.penalty-game .penalty-arena .message-box{top:270px;bottom:auto}.penalty-game .penalty-arena{background-size:auto 340px;background-position:center top;background-repeat:no-repeat;background-color:#0d2718}}
/* Ergebnisabhängige Torwartbewegung: Kontakt bei Parade, freie Flugbahn beim Tor. */
.penalty-game #league_summary{padding:14px 16px;margin-bottom:16px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;line-height:1.8;overflow-wrap:anywhere}
.penalty-game #weekly_winners{margin:16px 0 0;font-weight:700;color:#92400e;overflow-wrap:anywhere}
.penalty-game .league-card>.small{margin-top:14px;line-height:1.6}
.penalty-game .penalty-arena .keeper{transition:transform var(--keeper-flight-time,400ms) ease-out;}
.penalty-game .penalty-arena .keeper.jump-left,.penalty-game .penalty-arena .keeper.jump-center,.penalty-game .penalty-arena .keeper.jump-right{transform:translateX(calc(-50% + var(--keeper-flight-x,0px))) translateY(var(--keeper-flight-y,0px));}
.penalty-game .ball.in-net{opacity:.55;transition:opacity 250ms ease;}
.penalty-game .ball.parried{animation:penalty_parry 380ms ease-out forwards;}
@keyframes penalty_parry{from{transform:translateX(-50%) translate(var(--ball-x),var(--ball-y)) scale(.58) rotate(540deg);}to{transform:translateX(-50%) translate(calc(var(--ball-x) + var(--parry-x)),calc(var(--ball-y) + 55px)) scale(.65) rotate(690deg);}}
@media(prefers-reduced-motion:reduce){.penalty-game .penalty-arena .keeper{transition-duration:1ms!important;}.penalty-game .ball.parried{animation-duration:1ms!important;}}