* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #77d6ff;
    color: #213047;
}

html.home-root,
html.home-root body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}


.game-shell {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 50% 25%, #fff7cc 0, #9ee8ff 28%, #79cfff 62%, #5fb4ed 100%);
}

#gameCanvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

.overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(85,145,230,.25));
    backdrop-filter: blur(2px);
    z-index: 5;
}

.overlay.hidden {
    display: none;
}

.panel {
    width: min(640px, 94vw);
    padding: 34px;
    border-radius: 34px;
    text-align: center;
    background: rgba(255, 255, 255, .88);
    border: 4px solid rgba(255,255,255,.75);
    box-shadow: 0 24px 70px rgba(58, 86, 135, .30);
}

.logo-mark {
    font-size: 40px;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
}

h1,
h2 {
    margin: 8px 0 12px;
    font-size: clamp(40px, 8vw, 62px);
    line-height: .95;
    color: #ff5f9f;
    text-shadow: 0 4px 0 #fff0a6;
}

h2 {
    font-size: clamp(34px, 6vw, 58px);
}

p {
    margin: 0 auto 22px;
    max-width: 440px;
    font-size: 18px;
    line-height: 1.5;
}

.start-status {
    margin: 0 auto 18px;
    max-width: 560px;
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1.25;
    font-weight: 900;
    color: #3854cc;
    text-shadow: 0 2px 0 rgba(255,255,255,.9);
}

.start-status.is-waiting {
    color: #ff5f9f;
}

.start-status.is-audio-ready {
    color: #167500;
}

.primary-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 16px 30px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, #ff6aae, #8b6fff 55%, #38c9ff);
    box-shadow: 0 12px 26px rgba(111, 89, 255, .35), inset 0 -4px 0 rgba(0,0,0,.14);
    transition: filter .14s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.primary-btn:hover {
    transform: none;
    filter: brightness(1.04);
}

.primary-btn:active {
    transform: none;
}

.finish-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}

.finish-actions .primary-btn,
.finish-actions .secondary-btn {
    min-width: 180px;
}


.controls-hint {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px 12px;
    align-items: center;
    max-width: 360px;
    margin: 26px auto 0;
    text-align: left;
    color: #52637f;
    font-size: 15px;
}

.controls-hint span {
    justify-self: end;
    padding: 5px 9px;
    border-radius: 10px;
    font-weight: 800;
    color: #213047;
    background: #fff4bd;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}


.start-runner-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: min(520px, 100%);
    margin: 0 auto 18px;
}

.start-runner-card {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 6px;
    border-radius: 20px;
    background: rgba(255,255,255,.62);
    border: 2px solid rgba(255,255,255,.82);
    box-shadow: inset 0 -2px 0 rgba(80,120,180,.08);
}

.start-runner-image {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,249,255,.78));
}

.start-runner-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.start-runner-card strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 950;
    color: #213047;
}

.start-runner-card small {
    font-size: 10px;
    font-weight: 900;
    color: #6e7792;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.character-portrait-preview {
    object-fit: contain;
}

.intro-control-hint {
    position: absolute;
    left: 50%;
    top: clamp(74px, 18vh, 150px);
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
    padding: 10px 16px;
    border-radius: 999px;
    color: #3854cc;
    background: rgba(255,255,255,.86);
    border: 2px solid rgba(255,255,255,.88);
    box-shadow: 0 12px 26px rgba(42, 69, 118, .18);
    font-weight: 950;
    text-align: center;
    white-space: nowrap;
}


.hud {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 3;
    pointer-events: none;
}

.hud-card {
    min-width: 110px;
    padding: 11px 16px;
    border-radius: 18px;
    text-align: center;
    background: rgba(255,255,255,.78);
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 10px 28px rgba(42, 69, 118, .18);
}

.hud-card strong {
    display: block;
    font-size: 22px;
    line-height: 1;
    color: #3854cc;
}

.hud-card span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #6e7792;
    text-transform: uppercase;
    letter-spacing: .07em;
}

@media (max-width: 720px) {
    .hud {
        width: calc(100vw - 20px);
        gap: 8px;
    }

    .hud-card {
        min-width: 0;
        flex: 1;
        padding: 9px 8px;
    }

    .hud-card strong {
        font-size: 18px;
    }

    .panel {
        padding: 24px;
        border-radius: 24px;
    }
}


.countdown {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 4;
    pointer-events: none;
    font-size: clamp(82px, 16vw, 190px);
    font-weight: 1000;
    color: #fff;
    text-shadow: 0 10px 0 rgba(255,95,159,.45), 0 24px 45px rgba(48,61,120,.35);
    animation: countdownPop .55s ease both;
}

.countdown.hidden {
    display: none;
}

.action-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 72%, rgba(255,255,255,.42), rgba(255,255,255,0) 42%);
    transition: opacity .22s ease;
}

.action-flash.active {
    opacity: 1;
}

.hud-card {
    position: relative;
    overflow: hidden;
}

.hud-card::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -80%;
    width: 70%;
    height: 180%;
    transform: rotate(22deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation: hudShine 3.8s ease-in-out infinite;
}

@keyframes countdownPop {
    0% { transform: scale(.65); opacity: 0; }
    65% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes hudShine {
    0%, 62% { left: -85%; }
    100% { left: 120%; }
}

.debug-info-panel {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 6;
    width: min(230px, calc(100vw - 28px));
    padding: 12px 14px;
    border-radius: 18px;
    color: #20304a;
    background: rgba(255,255,255,.86);
    border: 2px solid rgba(255,255,255,.92);
    box-shadow: 0 14px 34px rgba(42, 69, 118, .22);
    backdrop-filter: blur(4px);
    pointer-events: none;
    font-size: 13px;
}

.debug-info-panel.hidden {
    display: none;
}

.debug-info-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 1000;
    color: #3854cc;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.debug-info-title span {
    padding: 3px 7px;
    border-radius: 999px;
    color: #6e7792;
    background: rgba(255,255,255,.72);
    font-size: 10px;
    letter-spacing: .04em;
}

.debug-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-top: 1px solid rgba(56,84,204,.10);
}

.debug-info-row span {
    color: #6e7792;
    font-weight: 850;
}

.debug-info-row strong {
    color: #20304a;
    font-variant-numeric: tabular-nums;
    font-weight: 1000;
    text-align: right;
}


.debug-info-panel #debugPerfText {
    color: #2f8f43;
}

body.is-performance-mode .debug-info-panel {
    border-color: rgba(47, 143, 67, .42);
}

.debug-info-panel.is-warn .debug-fps-value,
.debug-info-panel.is-warn #debugFpsText {
    color: #ff8a00;
}

.debug-info-panel.is-bad .debug-fps-value,
.debug-info-panel.is-bad #debugFpsText {
    color: #e64747;
}

@media (max-width: 720px) {
    .debug-info-panel {
        top: 76px;
        right: 10px;
        width: min(210px, calc(100vw - 20px));
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* Startseite / Vorschaltseite */
body.home-page {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100%;
    background: radial-gradient(circle at 50% 12%, #fff7bd 0, #aeeeff 32%, #79cfff 66%, #65c96b 100%);
}

.home-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 32px 18px max(32px, env(safe-area-inset-bottom));
    overflow: visible;
}

.home-skyline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.home-rainbow {
    position: absolute;
    left: 50%;
    bottom: -18vw;
    width: min(940px, 120vw);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    background: conic-gradient(from 180deg at 50% 100%, #ff5a7d 0 10deg, #ff9f45 10deg 20deg, #ffe15a 20deg 30deg, #54df75 30deg 40deg, #4bb8ff 40deg 50deg, #9c74ff 50deg 60deg, transparent 60deg 180deg);
    opacity: .78;
    filter: drop-shadow(0 -12px 24px rgba(255,255,255,.35));
}

.home-cloud {
    position: absolute;
    width: 180px;
    height: 62px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    box-shadow: 44px -22px 0 rgba(255,255,255,.72), 88px 0 0 rgba(255,255,255,.72), 38px 22px 0 rgba(255,255,255,.72);
    animation: homeCloudDrift 18s linear infinite;
}

.home-cloud-1 { top: 13%; left: 7%; transform: scale(.72); }
.home-cloud-2 { top: 24%; right: 16%; transform: scale(1.05); animation-duration: 24s; }
.home-cloud-3 { top: 67%; left: 18%; transform: scale(.54); animation-duration: 20s; }

/* Lobby-Ruhefix: keine schwebenden Hintergründe oder Layout-Bewegungen auf der Startseite. */
html.home-root .home-cloud {
    animation: none !important;
    translate: 0 0 !important;
}

html.home-root .home-card,
html.home-root .lobby-card,
html.home-root .lobby-panel {
    transform: none !important;
    will-change: auto;
}

html.home-root .primary-btn,
html.home-root .secondary-btn,
html.home-root .character-card {
    transform: none !important;
}

html.home-root .primary-btn:hover,
html.home-root .primary-btn:active,
html.home-root .secondary-btn:hover,
html.home-root .secondary-btn:active,
html.home-root .character-card:hover:not(:disabled),
html.home-root .character-card:active {
    transform: none !important;
}

.home-card {
    position: relative;
    z-index: 1;
    width: min(860px, 94vw);
    padding: clamp(28px, 5vw, 52px);
    border-radius: 38px;
    text-align: center;
    background: rgba(255,255,255,.96);
    border: 4px solid rgba(255,255,255,.88);
    box-shadow: 0 30px 90px rgba(44, 82, 135, .28);
    backdrop-filter: none;
}

.home-logo {
    font-size: 82px;
    line-height: 1;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
}

.home-kicker {
    margin: 10px 0 0;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #5793d8;
    font-size: 13px;
}

.home-card h1 {
    margin-top: 8px;
}

.home-lead {
    max-width: 620px;
    font-size: 20px;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 28px 0 26px;
}

.home-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.secondary-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 16px;
    color: #3854cc;
    background: #fff4bd;
    box-shadow: 0 10px 22px rgba(55, 76, 126, .16), inset 0 -3px 0 rgba(0,0,0,.09);
    transition: filter .14s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
}

.secondary-btn:hover {
    transform: none;
    filter: brightness(1.03);
}

.danger-btn {
    background: linear-gradient(135deg, #ff5f7a, #ff8b5f 55%, #ffd85a);
}

.abort-dialog {
    z-index: 8;
    background: linear-gradient(180deg, rgba(50, 63, 110, .32), rgba(80, 125, 210, .30));
}

.abort-panel {
    max-width: 500px;
}

.home-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 26px;
}

.home-info-grid article {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    border: 2px solid rgba(255,255,255,.78);
    box-shadow: inset 0 -3px 0 rgba(80, 120, 180, .08);
}

.home-info-grid strong,
.home-info-grid span {
    display: block;
}

.home-info-grid strong {
    color: #ff5f9f;
    font-size: 18px;
    margin-bottom: 5px;
}

.home-info-grid span {
    color: #52637f;
    line-height: 1.35;
}

.home-modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 20px;
}

.home-modal.hidden {
    display: none;
}

.home-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 48, 80, .40);
    backdrop-filter: blur(4px);
}

.home-modal-panel {
    position: relative;
    width: min(620px, 94vw);
    max-height: min(86vh, 720px);
    overflow: auto;
    padding: 30px;
    border-radius: 30px;
    background: rgba(255,255,255,.95);
    border: 4px solid rgba(255,255,255,.80);
    box-shadow: 0 30px 90px rgba(23, 39, 86, .35);
}

.home-modal-panel h2 {
    margin-right: 48px;
    text-align: left;
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 28px;
    font-weight: 900;
    color: #3854cc;
    background: #fff4bd;
}

.modal-content {
    text-align: left;
    color: #33435f;
    font-size: 17px;
    line-height: 1.55;
}

.modal-content p {
    max-width: none;
    margin: 0 0 16px;
}

.modal-content li {
    margin: 8px 0;
}

.modal-content h3 {
    margin: 22px 0 10px;
    color: #3854cc;
    font-size: 20px;
}

.item-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    margin: 12px 0 18px;
    border-radius: 18px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
}

.item-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 18px;
    background: #f7fbff;
    font-size: 15px;
}

.item-table th,
.item-table td {
    padding: 11px 13px;
    border-bottom: 1px solid rgba(72, 92, 150, .12);
    vertical-align: top;
}

.item-table th {
    color: #213047;
    background: linear-gradient(135deg, #fff4bd, #d8f7ff);
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.item-table td:first-child {
    min-width: 150px;
    font-weight: 900;
    color: #3854cc;
}

.item-table td:last-child {
    white-space: nowrap;
    font-weight: 900;
    color: #ff5f9f;
}

.item-table tr:last-child td {
    border-bottom: 0;
}

.score-list {
    padding: 0;
    margin: 0 0 18px;
    list-style: none;
}

.score-list li {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 16px;
    margin: 8px 0;
    border-radius: 16px;
    background: #f4f9ff;
}

.small-note {
    color: #65738d;
    font-size: 15px;
}

@keyframes homeCloudDrift {
    0% { translate: 0 0; }
    50% { translate: 0 0; }
    100% { translate: 0 0; }
}

@media (max-width: 760px) {
    .home-info-grid {
        grid-template-columns: 1fr;
    }

    .home-card {
        border-radius: 28px;
    }

    .home-actions {
        flex-direction: column;
    }
}

/* Phase 5: Lobby / Multiplayer */
.lobby-shell {
    align-items: start;
    padding-top: 28px;
    padding-bottom: 44px;
}

.lobby-card {
    width: min(1120px, 96vw);
}

.lobby-top-actions,
.ready-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
}

.join-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.70);
    border: 2px solid rgba(255,255,255,.82);
    box-shadow: inset 0 -2px 0 rgba(80, 120, 180, .08);
}

.join-form input {
    width: 104px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    text-align: center;
    font-weight: 1000;
    font-size: 20px;
    color: #3854cc;
    background: #f4f9ff;
    text-transform: uppercase;
    outline: none;
}

.lobby-panel {
    margin-top: 22px;
    padding: 20px;
    border-radius: 30px;
    background: rgba(244,249,255,.72);
    border: 3px solid rgba(255,255,255,.78);
    box-shadow: inset 0 -4px 0 rgba(80, 120, 180, .08);
}

.lobby-panel.hidden,
.hidden {
    display: none !important;
}

.lobby-code-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 22px rgba(55,76,126,.12);
}

.lobby-code-box span {
    font-weight: 900;
    color: #6e7792;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .08em;
}

.lobby-code-box strong {
    color: #ff5f9f;
    font-size: 26px;
    letter-spacing: .16em;
}

.tiny-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 900;
    color: #3854cc;
    background: #fff4bd;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}

.lobby-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr);
    gap: 20px;
    margin-top: 20px;
    text-align: left;
}

.lobby-subtitle {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1;
    text-align: left;
    color: #3854cc;
    text-shadow: none;
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.character-grid .character-card {
    min-width: 0;
}

.character-card {
    position: relative;
    min-height: 136px;
    padding: 10px 8px;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 24px;
    cursor: pointer;
    text-align: center;
    color: #213047;
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 24px rgba(55,76,126,.13), inset 0 -3px 0 rgba(80,120,180,.08);
    transition: filter .14s ease, border-color .14s ease;
}

.character-card:hover:not(:disabled) {
    transform: none;
    filter: brightness(1.03);
}

.character-card.selected {
    border-color: #ff5f9f;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,234,248,.86));
}

.character-card.disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.35);
}

.character-card strong,
.character-card small {
    display: block;
}

.character-card strong {
    margin-top: 8px;
    font-size: 17px;
    color: #3854cc;
}

.character-card small {
    color: #6e7792;
    font-weight: 800;
}

.mini-runner {
    --shirt: #ff5f9f;
    --pants: #6d4cff;
    --hair: #6b3f22;
    --skin: #ffd7b0;
    --accent: #ffffff;
    position: relative;
    display: inline-block;
    width: 48px;
    height: 70px;
}

.mini-runner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 32px;
    height: 32px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 70%, var(--skin) 0 48%, var(--hair) 49% 100%);
    box-shadow: 0 6px 0 -2px var(--hair);
}

.mini-runner::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 36px;
    height: 38px;
    transform: translateX(-50%);
    border-radius: 14px 14px 10px 10px;
    background: linear-gradient(90deg, var(--pants) 0 18%, var(--shirt) 19% 81%, var(--pants) 82% 100%);
    box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--accent), transparent 60%);
}

.player-list {
    display: grid;
    gap: 9px;
}

.player-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    border: 2px solid rgba(255,255,255,.72);
}

.player-row.mine {
    border-color: rgba(255,95,159,.55);
    background: rgba(255,244,251,.85);
}

.player-dot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 1000;
    color: #fff;
    background: linear-gradient(135deg, #ff6aae, #8b6fff);
}

.player-row strong,
.player-row small {
    display: block;
}

.player-row small {
    color: #6e7792;
    font-weight: 750;
}

.player-row em {
    font-style: normal;
    font-weight: 1000;
    color: #3854cc;
    font-size: 13px;
}

.lobby-options {
    display: grid;
    gap: 10px;
    margin: 18px 0 6px;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    font-weight: 900;
    color: #33435f;
    background: rgba(255,255,255,.72);
    border: 2px solid rgba(255,255,255,.70);
}

.check-option.is-disabled {
    opacity: .72;
}

.check-option input {
    width: 20px;
    height: 20px;
    accent-color: #ff5f9f;
}

.lobby-hint {
    margin: 8px 0 0;
    max-width: none;
    text-align: center;
}

.compact-actions {
    margin-bottom: 0;
}

@media (max-width: 920px) {
    .lobby-columns {
        grid-template-columns: 1fr;
    }

    .character-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .join-form {
        width: 100%;
        justify-content: center;
        border-radius: 24px;
        flex-wrap: wrap;
    }
}

/* Ergebnisliste auf der Zieltafel. Ergänzt Phase 5, ohne das bestehende Zielbanner-Layout zu ersetzen. */

.result-duo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.result-duo .result-winner {
    margin: 0;
    font-size: 16px;
}
.result-winner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 14px;
    padding: 10px 18px;
    border-radius: 999px;
    color: #3854cc;
    background: linear-gradient(135deg, #fff4bd, #ffffff);
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), 0 10px 22px rgba(55, 76, 126, .14);
    font-size: 18px;
}

.result-table {
    display: grid;
    gap: 8px;
    margin: 0 auto 12px;
    max-width: 520px;
    text-align: left;
}

.result-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
}

.result-row.is-player {
    background: linear-gradient(135deg, rgba(255,95,159,.20), rgba(139,111,255,.16), rgba(56,201,255,.16));
}

.result-rank {
    font-weight: 950;
    color: #ff5f9f;
    text-align: center;
}

.result-name {
    font-weight: 950;
    color: #213047;
}

.result-points {
    font-weight: 950;
    color: #3854cc;
    white-space: nowrap;
}

.result-row small {
    grid-column: 2 / 4;
    color: #6e7792;
    font-weight: 750;
}

.result-note {
    display: block;
    max-width: 500px;
    margin: 0 auto;
    color: #6e7792;
    font-size: 14px;
    line-height: 1.35;
}

.home-quick-options {
    display: flex;
    justify-content: center;
    margin: 18px auto 12px;
}

.home-quick-options .check-option {
    width: fit-content;
    box-shadow: 0 12px 26px rgba(54, 86, 167, .10);
}

.highscore-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.highscore-columns h3 {
    margin: 0 0 10px;
    color: #3854cc;
}

.score-list li span {
    display: grid;
    gap: 3px;
    text-align: left;
}

.score-list li small {
    color: #6e7792;
    font-weight: 750;
}

@media (max-width: 720px) {
    .highscore-columns {
        grid-template-columns: 1fr;
    }
}



/* Mobile: Start-/Dialog-Overlays dürfen scrollen. Das Spiel selbst bleibt später gesperrt. */
.overlay-start,
.overlay-finish,
.abort-dialog {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.overlay-start .panel,
.overlay-finish .panel,
.abort-dialog .panel {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

/* Mobile Touch-Steuerung für Regenbogenflitzer. Wird nur bei Touch-Geräten/kleinen Displays aktiv. */
.touch-controls {
    position: absolute;
    inset: auto 0 calc(max(18px, env(safe-area-inset-bottom)) + 48px) 0;
    z-index: 4;
    display: none;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 clamp(14px, 4vw, 42px);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.touch-controls:not(.hidden) {
    display: flex;
}

.touch-btn {
    pointer-events: auto;
    appearance: none;
    width: clamp(64px, 15vw, 92px);
    height: clamp(64px, 15vw, 92px);
    border: 3px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    color: #ffffff;
    font-size: clamp(24px, 6vw, 38px);
    font-weight: 1000;
    line-height: 1;
    background: linear-gradient(135deg, rgba(255, 95, 159, .62), rgba(139, 111, 255, .52), rgba(56, 201, 255, .58));
    box-shadow: 0 14px 32px rgba(41, 68, 130, .22), inset 0 -5px 0 rgba(0,0,0,.12), inset 0 4px 0 rgba(255,255,255,.28);
    text-shadow: 0 3px 8px rgba(0,0,0,.18);
    backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, filter .08s ease, opacity .12s ease;
    opacity: .74;
    touch-action: none;
}

.touch-btn.is-pressed,
.touch-btn:active {
    transform: translateY(3px) scale(.96);
    filter: brightness(1.12);
    opacity: .92;
}

.touch-left,
.touch-right {
    align-self: flex-end;
}

.touch-jump {
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-12px);
    background: linear-gradient(135deg, rgba(255, 225, 90, .70), rgba(255, 106, 174, .58), rgba(255, 255, 255, .55));
}

.touch-jump.is-pressed,
.touch-jump:active {
    transform: translateY(-9px) scale(.96);
}

.touch-sprint {
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + clamp(128px, 22vw, 168px));
    width: clamp(52px, 12vw, 74px);
    height: clamp(52px, 12vw, 74px);
    font-size: clamp(20px, 5vw, 30px);
    background: linear-gradient(135deg, rgba(255, 225, 90, .72), rgba(255, 159, 69, .62));
}

.touch-surrender {
    position: absolute;
    left: max(16px, env(safe-area-inset-left));
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + clamp(128px, 22vw, 168px));
    width: clamp(48px, 11vw, 68px);
    height: clamp(48px, 11vw, 68px);
    font-size: clamp(18px, 4.5vw, 26px);
    background: linear-gradient(135deg, rgba(87, 104, 139, .60), rgba(41, 55, 88, .58));
}

.touch-quit {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    top: calc(max(10px, env(safe-area-inset-top)) + 64px);
    z-index: 7;
    width: clamp(44px, 10vw, 62px);
    height: clamp(44px, 10vw, 62px);
    font-size: clamp(16px, 4vw, 24px);
    background: linear-gradient(135deg, rgba(255, 95, 159, .62), rgba(87, 104, 139, .58));
}

.touch-quit.is-pressed,
.touch-quit:active {
    transform: translateY(3px) scale(.96);
}

@media (pointer: coarse), (max-width: 900px) {
    html.game-root body:not(.is-playing),
    html.game-root body:not(.is-playing) .overlay,
    html.game-root body:not(.is-playing) .panel {
        touch-action: pan-y;
    }

    html.game-root body.is-playing,
    html.game-root body.is-playing #gameCanvas,
    html.game-root body.is-playing .game-shell {
        touch-action: none;
    }

    html.home-root,
    html.home-root body {
        touch-action: auto;
        overflow-y: auto;
    }

    html.game-root body:not(.is-playing) .overlay-start {
        align-items: flex-start;
        justify-items: center;
        place-items: start center;
        padding: calc(max(10px, env(safe-area-inset-top))) 12px calc(90px + env(safe-area-inset-bottom));
    }

    html.game-root body:not(.is-playing) .overlay-start .panel {
        margin: 0 auto;
    }

    body.has-touch-controls .controls-hint::after {
        content: "Auf Touch-Geräten erscheinen im Lauf halbtransparente Steuerknöpfe.";
        display: block;
        grid-column: 1 / -1;
        margin-top: 6px;
        padding: 8px 10px;
        border-radius: 14px;
        color: #3854cc;
        background: rgba(255,255,255,.70);
        font-weight: 850;
        text-align: center;
    }
}


@media (pointer: coarse), (max-width: 900px) {
    .hud {
        top: calc(6px + env(safe-area-inset-top));
        width: calc(100vw - 10px);
        max-width: 760px;
        gap: 4px;
    }

    .hud-card {
        min-width: 0;
        flex: 1;
        padding: 6px 5px;
        border-radius: 12px;
        border-width: 1px;
    }

    .hud-card strong {
        font-size: clamp(12px, 3.6vw, 16px);
    }

    .hud-card span {
        margin-top: 2px;
        font-size: clamp(7px, 2.2vw, 9px);
        letter-spacing: .04em;
    }

    .hud-card::after {
        display: none;
    }

    .overlay-start .panel {
        width: min(520px, 96vw);
    }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
    .overlay-start .panel {
        padding: 14px 16px;
        border-radius: 22px;
    }

    .overlay-start .logo-mark {
        font-size: 34px;
    }

    .overlay-start h1 {
        margin: 4px 0 8px;
        font-size: clamp(30px, 7vh, 42px);
    }

    .overlay-start p {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.35;
    }

    .overlay-start .primary-btn {
        padding: 12px 22px;
        font-size: 16px;
    }

    .start-runner-preview {
        gap: 6px;
        margin-bottom: 10px;
    }

    .start-runner-card {
        padding: 5px 4px;
        border-radius: 14px;
    }

    .start-runner-image {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .start-runner-card strong {
        font-size: 11px;
    }

    .start-runner-card small {
        display: none;
    }

    .overlay-start .controls-hint {
        grid-template-columns: repeat(2, auto 1fr);
        gap: 5px 8px;
        max-width: 520px;
        margin-top: 12px;
        font-size: 11px;
    }

    .overlay-start .controls-hint span {
        padding: 3px 6px;
        border-radius: 8px;
    }
}

@media (min-width: 901px) and (pointer: fine) {
    .touch-controls {
        display: none !important;
    }
}

@media (max-width: 720px) {
    .touch-controls {
        padding: 0 12px;
    }

    .touch-controls {
        inset: auto 0 calc(max(18px, env(safe-area-inset-bottom)) + 54px) 0;
    }

    .touch-sprint {
        bottom: calc(max(18px, env(safe-area-inset-bottom)) + 124px);
    }

    .touch-surrender {
        bottom: calc(max(18px, env(safe-area-inset-bottom)) + 124px);
    }

    .touch-quit {
        top: calc(max(8px, env(safe-area-inset-top)) + 58px);
        right: max(10px, env(safe-area-inset-right));
    }
}


@media (pointer: coarse) and (orientation: landscape) {
    .home-shell {
        min-height: auto;
        display: block;
        padding: 14px 14px calc(30px + env(safe-area-inset-bottom));
    }

    .home-card,
    .lobby-card {
        margin: 0 auto;
    }

    .touch-controls {
        inset: auto 0 calc(max(22px, env(safe-area-inset-bottom)) + 42px) 0;
        padding: 0 clamp(20px, 5vw, 64px);
    }

    .touch-btn {
        width: clamp(54px, 10vw, 76px);
        height: clamp(54px, 10vw, 76px);
        font-size: clamp(20px, 4vw, 30px);
    }

    .touch-jump {
        transform: translateY(-8px);
    }

    .touch-jump.is-pressed,
    .touch-jump:active {
        transform: translateY(-5px) scale(.96);
    }

    .touch-sprint {
        bottom: calc(max(22px, env(safe-area-inset-bottom)) + 106px);
    }

    .touch-surrender {
        bottom: calc(max(22px, env(safe-area-inset-bottom)) + 106px);
    }

    .touch-quit {
        top: calc(max(8px, env(safe-area-inset-top)) + 52px);
        right: max(10px, env(safe-area-inset-right));
    }
}



@media (pointer: coarse), (max-width: 900px) {
    .overlay-finish {
        align-items: flex-start;
        justify-items: center;
        place-items: start center;
        padding: calc(max(10px, env(safe-area-inset-top)) + 8px) 10px calc(96px + env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .overlay-finish .panel {
        width: min(560px, 96vw);
        max-height: calc(100dvh - 26px);
        overflow-y: auto;
        padding: 20px 16px;
        border-radius: 26px;
    }

    .overlay-finish .logo-mark {
        font-size: 42px;
    }

    .overlay-finish h2 {
        margin: 4px 0 8px;
        font-size: clamp(28px, 8vw, 44px);
    }

    .overlay-finish p {
        margin-bottom: 10px;
    }

    .overlay-finish .result-duo {
        gap: 6px;
        margin-bottom: 8px;
    }

    .overlay-finish .result-winner {
        padding: 8px 12px;
        font-size: 13px;
    }

    .overlay-finish .result-table {
        gap: 6px;
        margin-bottom: 8px;
    }

    .overlay-finish .result-row {
        grid-template-columns: 34px 1fr auto;
        gap: 5px 8px;
        padding: 8px 9px;
        border-radius: 14px;
    }

    .overlay-finish .result-row small,
    .overlay-finish .result-note {
        font-size: 12px;
    }

    .overlay-finish .finish-actions {
        gap: 8px;
        margin-top: 12px;
        padding-bottom: 4px;
    }

    .overlay-finish .finish-actions .primary-btn,
    .overlay-finish .finish-actions .secondary-btn {
        min-width: 145px;
        padding: 12px 16px;
        font-size: 15px;
        min-height: 48px;
    }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
    .overlay-finish {
        padding-top: calc(max(6px, env(safe-area-inset-top)) + 4px);
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .overlay-finish .panel {
        max-height: calc(100dvh - 18px);
        padding: 14px 14px;
        border-radius: 22px;
    }

    .overlay-finish .logo-mark {
        font-size: 32px;
    }

    .overlay-finish h2 {
        font-size: clamp(24px, 7vh, 34px);
    }

    .overlay-finish .result-row {
        padding: 6px 8px;
    }

    .overlay-finish .finish-actions {
        margin-top: 8px;
    }
}

@media (pointer: coarse), (max-width: 900px) {
    .abort-dialog {
        align-items: flex-start;
        justify-items: center;
        place-items: start center;
        padding: calc(max(12px, env(safe-area-inset-top)) + 22px) 12px calc(76px + env(safe-area-inset-bottom));
    }

    .abort-panel {
        padding: 22px;
        border-radius: 24px;
    }

    .abort-panel .logo-mark {
        font-size: 42px;
    }
}

/* Figurenwahl: klare Frontansicht der kompletten Spielfigur. */
.character-preview {
    display: block;
    width: 74px;
    height: 92px;
    margin: 0 auto 4px;
    filter: drop-shadow(0 10px 10px rgba(40,60,100,.16));
}

@media (max-width: 720px) {
    .character-preview {
        width: 62px;
        height: 78px;
    }
}


.character-sprite-preview {
    width: 92px;
    height: 92px;
    background-image: var(--sprite-url);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left top;
}

img.character-preview,
.character-preview img {
    object-fit: contain;
}

@media (max-width: 720px) {
    .character-sprite-preview {
        width: 78px;
        height: 78px;
    }
}

/* Multiplayer-Wartebildschirm: Startbutton bei Mitspielern wirklich ausblenden und Status gut lesbar halten. */
button.hidden,
.primary-btn.hidden,
[hidden] {
    display: none !important;
}

.overlay-start .start-status {
    margin: 0 auto 18px;
    max-width: 620px;
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1.25;
    font-weight: 900;
    color: #3854cc;
    text-shadow: 0 2px 0 rgba(255,255,255,.9);
}

.overlay-start .start-status.is-waiting {
    color: #ff5f9f;
}

.overlay-start .start-status.is-audio-ready {
    color: #167500;
}