/* Kanal König 4.1.8 – reine Browser-/PC-Anpassungen.
   Die mobile App-Darstellung bleibt unter 960 px unverändert. */

html.kk-browser,
html.kk-browser body {
    min-height: 100%;
    background: #063d69;
}

.kk-browser .splash__track i {
    animation-duration: 3.2s;
}

.kk-browser .splash__art {
    object-position: center;
}

.kk-browser button:focus-visible,
.kk-browser input:focus-visible,
.kk-browser select:focus-visible,
.kk-browser textarea:focus-visible {
    outline: 3px solid #ffd33f;
    outline-offset: 2px;
}

@media (min-width: 960px) {
    .kk-browser {
        --desktop-rail: 96px;
    }

    .kk-browser .home-screen,
    .kk-browser .section-screen {
        padding-left: var(--desktop-rail);
    }

    .kk-browser .home-screen {
        padding-bottom: 28px;
        background:
            linear-gradient(180deg, rgba(23, 161, 231, .96), rgba(145, 233, 245, .94) 42%, #e9fcff 80%);
    }

    .kk-browser .home-sky {
        left: var(--desktop-rail);
        height: 350px;
        background-position: center 44%;
    }

    .kk-browser .home-header {
        width: min(calc(100% - 56px), 1180px);
        grid-template-columns: 280px minmax(0, 520px);
        justify-content: space-between;
        gap: 22px;
        padding-top: 18px;
    }

    .kk-browser .level-chip,
    .kk-browser .resource-chips button {
        min-height: 54px;
    }

    .kk-browser .level-chip .avatar {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .kk-browser .level-chip b {
        font-size: 12px;
    }

    .kk-browser .level-chip small {
        font-size: 8px;
    }

    .kk-browser .resource-chips button > span {
        font-size: 21px;
    }

    .kk-browser .resource-chips button > b {
        font-size: 15px;
    }

    .kk-browser .brand-hero {
        height: 220px;
        padding-top: 12px;
    }

    .kk-browser .brand-hero img {
        width: min(420px, 36vw);
        max-height: 205px;
        border-radius: 24px;
        filter: drop-shadow(0 14px 12px rgba(0, 58, 112, .32));
    }

    .kk-browser .brand-hero > button {
        right: max(42px, calc((100% - 1180px) / 2));
        bottom: 38px;
        width: 46px;
        height: 46px;
    }

    .kk-browser .home-content {
        width: min(calc(100% - 56px), 1180px);
        display: grid;
        grid-template-columns: minmax(340px, .84fr) minmax(500px, 1.16fr);
        align-items: start;
        gap: 14px 22px;
        padding-bottom: 36px;
    }

    .kk-browser .current-mission-card,
    .kk-browser .workshop-card,
    .kk-browser .spuel-home-card,
    .kk-browser .progression-quick {
        grid-column: 1;
    }

    .kk-browser .network-section {
        grid-column: 2;
        grid-row: 1 / span 8;
        padding: 18px;
    }

    .kk-browser .home-version {
        grid-column: 1 / -1;
    }

    .kk-browser .area-grid,
    .kk-browser .area-grid.expanded {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .kk-browser .area-card {
        padding: 10px 7px 9px;
    }

    .kk-browser .area-art {
        height: 122px;
    }

    .kk-browser .bottom-nav {
        inset: 50% auto auto 12px;
        width: 72px;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, minmax(62px, auto));
        gap: 4px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 24px;
        transform: translateY(-50%);
        box-shadow: 0 16px 34px rgba(0, 36, 65, .32);
    }

    .kk-browser .bottom-nav button {
        min-height: 62px;
        border-radius: 15px;
    }

    .kk-browser .bottom-nav button:hover,
    .kk-browser .bottom-nav button.active {
        background: rgba(61, 215, 237, .16);
    }

    .kk-browser .bottom-nav button span {
        font-size: 23px;
    }

    .kk-browser .bottom-nav button small {
        font-size: 9px;
    }

    .kk-browser .section-header,
    .kk-browser .section-content,
    .kk-browser .page-card {
        width: min(calc(100% - 56px), 1080px);
    }

    .kk-browser .section-content {
        padding: 20px 24px 40px;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 18px 40px rgba(3, 75, 119, .16);
    }

    .kk-browser .page-overlay {
        padding-left: var(--desktop-rail);
    }

    .kk-browser .page-card {
        max-height: calc(100dvh - 34px);
        margin-block: 17px;
        border-radius: 26px;
    }

    .kk-browser .page-card-body {
        padding: 20px 24px 28px;
    }

    .kk-browser .game-header {
        padding-left: calc(var(--desktop-rail) + max(24px, (100% - 1180px) / 2));
        padding-right: max(24px, (100% - 1180px) / 2);
    }

    .kk-browser .game-main {
        width: min(calc(100% - var(--desktop-rail) - 52px), 1120px);
        display: grid;
        grid-template-columns: minmax(520px, 1.1fr) minmax(330px, .72fr);
        align-items: start;
        gap: 12px 20px;
        margin-left: calc(var(--desktop-rail) + max(26px, (100% - var(--desktop-rail) - 1120px) / 2));
        margin-right: auto;
        padding: 16px 0 30px;
    }

    .kk-browser .mission-strip {
        grid-column: 1 / -1;
    }

    .kk-browser .pipe-board-wrap,
    .kk-browser .workshop-board {
        grid-column: 1;
        grid-row: 2 / span 5;
        width: 100%;
        max-width: 650px;
        margin-inline: auto;
    }

    .kk-browser .pipe-tray-wrap,
    .kk-browser .game-tools,
    .kk-browser .water-button,
    .kk-browser .game-resource-line,
    .kk-browser .workshop-rule {
        grid-column: 2;
    }

    .kk-browser .workshop-main {
        grid-template-columns: minmax(490px, 1fr) minmax(310px, .7fr);
    }

    .kk-browser .workshop-board {
        max-height: calc(100dvh - 130px);
    }

    .kk-browser .boss-main {
        width: min(calc(100% - var(--desktop-rail) - 52px), 1000px);
        display: grid;
        grid-template-columns: minmax(330px, .7fr) minmax(500px, 1.1fr);
        align-items: center;
        gap: 8px 30px;
        margin-left: calc(var(--desktop-rail) + max(26px, (100% - var(--desktop-rail) - 1000px) / 2));
        margin-right: auto;
        padding-top: 20px;
    }

    .kk-browser .boss-intro,
    .kk-browser .boss-warning,
    .kk-browser .boss-status,
    .kk-browser .boss-fire-button,
    .kk-browser .boss-help {
        grid-column: 1;
    }

    .kk-browser .boss-arena {
        grid-column: 2;
        grid-row: 1 / span 6;
        width: 100%;
        height: min(62dvh, 520px);
        min-height: 400px;
        margin: 0;
    }

    .kk-browser .boss-wheel-anchor {
        left: 50%;
        top: 50%;
        width: 238px;
        height: 238px;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    .kk-browser .boss-glow {
        width: 345px;
        height: 345px;
    }

    .kk-browser .boss-projectile {
        bottom: 18px;
    }

    .kk-browser .spuel-game-main {
        max-width: 1000px;
        padding-left: calc(var(--desktop-rail) + 18px);
    }

    .kk-browser .spuel-aboveground {
        height: 255px;
    }
}

@media (min-width: 1400px) {
    .kk-browser .brand-hero {
        height: 235px;
    }

    .kk-browser .home-content {
        grid-template-columns: 470px minmax(600px, 1fr);
    }

    .kk-browser .area-art {
        height: 145px;
    }
}