/* Kanal König 4.1.0 – zusätzliche Fortschrittsansichten im bestehenden Stil */
.city-live-card {
    position: relative;
    width: 100%;
    min-height: 126px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .98);
    border-radius: 21px;
    background: linear-gradient(120deg, #e9fbff, #fff);
    box-shadow: var(--soft-shadow);
    text-align: left;
}
.city-live-art {
    position: relative;
    width: 132px;
    height: 105px;
    overflow: hidden;
    border-radius: 15px;
    background-color: #9ce6f7;
    background-image: linear-gradient(rgba(74, 203, 238, .08), rgba(18, 121, 167, .12)), var(--city-image, none), url("../art/home-background.svg");
    background-size: cover;
    background-position: center;
}
.city-live-art::after, .city-panorama-art::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    background: #657681;
    clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%);
}
.city-flood {
    position: absolute;
    z-index: 3;
    left: -8%;
    right: -8%;
    bottom: 0;
    height: 30%;
    background: rgba(40, 174, 229, .72);
    transition: transform .4s ease, opacity .4s ease;
}
.repair-1 .city-flood, .repair-2 .city-flood, .repair-3 .city-flood,
.repair-4 .city-flood, .repair-5 .city-flood, .repair-6 .city-flood { transform: translateY(100%); opacity: 0; }
.city-road { position: absolute; z-index: 4; left: 0; right: 0; bottom: 8%; height: 7%; background: repeating-linear-gradient(90deg, transparent 0 12px, #ffd85a 12px 20px, transparent 20px 32px); opacity: .18; }
.repair-1 .city-road, .repair-2 .city-road, .repair-3 .city-road, .repair-4 .city-road, .repair-5 .city-road, .repair-6 .city-road { opacity: 1; }
.city-building, .city-park, .city-shop, .city-fountain {
    position: absolute;
    z-index: 2;
    filter: grayscale(1) brightness(.72);
    opacity: .42;
    transform: scale(.86);
    transition: .35s ease;
}
.city-building { left: 8%; bottom: 22%; font-size: 38px; }
.city-park { right: 7%; bottom: 23%; font-size: 27px; }
.city-shop { right: 31%; bottom: 24%; font-size: 27px; }
.city-fountain { left: 43%; bottom: 17%; z-index: 5; font-size: 27px; }
.repair-2 .city-building, .repair-3 .city-building, .repair-4 .city-building, .repair-5 .city-building, .repair-6 .city-building,
.repair-4 .city-park, .repair-5 .city-park, .repair-6 .city-park,
.repair-5 .city-shop, .repair-6 .city-shop,
.repair-3 .city-fountain, .repair-4 .city-fountain, .repair-5 .city-fountain, .repair-6 .city-fountain { filter: none; opacity: 1; transform: scale(1); }
.city-live-art > em { position: absolute; z-index: 6; right: 4px; top: 4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: white; box-shadow: 0 3px 6px rgba(0, 71, 111, .22); font-style: normal; }
.city-live-copy { min-width: 0; display: grid; gap: 4px; }
.city-live-copy > small { color: var(--blue-700); font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.city-live-copy > b { font-size: 17px; line-height: 1.05; }
.city-live-copy > span { color: var(--muted); font-size: 9px; }
.city-live-copy > i { height: 7px; margin-top: 4px; overflow: hidden; border-radius: 8px; background: #d6e7eb; }
.city-live-copy > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #26c79b, #1aa1ea); }
.city-live-card > strong { color: var(--blue-700); font-size: 29px; }

.progression-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
.progression-quick-grid button { min-width: 0; min-height: 79px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; align-items: center; gap: 1px 7px; padding: 9px; border: 1px solid white; border-radius: 17px; background: linear-gradient(135deg, #fff, #edfaff); box-shadow: var(--soft-shadow); text-align: left; }
.progression-quick-grid button > span { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #6be4ef, #168be8); font-size: 20px; }
.progression-quick-grid button > b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.progression-quick-grid button > small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.progression-quick-grid button.urgent { color: white; border-color: #ffb3b8; background: linear-gradient(135deg, #ec3152, #a70e2f); animation: emergency-pulse 1.2s ease-in-out infinite; }
.progression-quick-grid button.urgent > span { background: rgba(255, 255, 255, .24); }
.progression-quick-grid button.urgent > small { color: #ffe8eb; }
@keyframes emergency-pulse { 50% { box-shadow: 0 0 0 5px rgba(236, 49, 82, .18), var(--soft-shadow); } }

.progression-overlay { align-items: stretch; padding: 0; background: rgba(3, 40, 71, .68); }
.progression-page { width: min(100%, 620px); height: 100dvh; margin: 0 auto; overflow: hidden; background: linear-gradient(180deg, #eafcff, #f8fdff); }
.progression-page > header { min-height: calc(67px + var(--safe-top)); display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 9px; padding: calc(9px + var(--safe-top)) 12px 9px; color: white; background: linear-gradient(145deg, var(--blue-700), var(--blue-900)); box-shadow: 0 4px 10px rgba(3, 64, 105, .22); }
.progression-page > header > button { width: 38px; height: 38px; border: 2px solid rgba(255, 255, 255, .72); border-radius: 50%; color: white; background: rgba(255, 255, 255, .13); font-size: 28px; line-height: 1; }
.progression-page > header small { display: block; color: #b8f1ff; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.progression-page > header h2 { margin: 1px 0 0; font-size: 19px; }
.progression-page > header > span { padding: 7px 9px; border-radius: 14px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 900; }
.progression-scroll { height: calc(100dvh - 67px - var(--safe-top)); padding: 12px 12px calc(26px + var(--safe-bottom)); overflow-y: auto; }
.progression-title { margin: 17px 4px 8px; font-size: 15px; }
.progression-intro { margin: 11px 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.city-panorama { overflow: hidden; border: 1px solid white; border-radius: 23px; background: white; box-shadow: var(--shadow); }
.city-panorama-art { position: relative; height: 210px; overflow: hidden; background: linear-gradient(#74d9f4 0 61%, #72bd6c 62%); }
.city-panorama-art .city-building { font-size: 76px; }
.city-panorama-art .city-park, .city-panorama-art .city-shop, .city-panorama-art .city-fountain { font-size: 52px; }
.city-panorama-art > em { position: absolute; z-index: 7; right: 12px; bottom: 12px; font-style: normal; font-size: 43px; filter: drop-shadow(0 5px 3px rgba(0, 54, 77, .3)); }
.city-panorama > div:last-child { padding: 13px 15px 15px; }
.city-panorama small, .event-brief > small { color: var(--blue-700); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.city-panorama h3, .event-brief h3 { margin: 2px 0 4px; font-size: 20px; }
.city-panorama p, .event-brief p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.restoration-list, .star-gate-list, .workshop-upgrade-list { display: grid; gap: 7px; }
.restoration-list article, .star-gate, .workshop-upgrade-list article { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid #d9eaf0; border-radius: 16px; background: white; box-shadow: 0 3px 8px rgba(4, 70, 112, .08); }
.restoration-list article > span, .star-gate > span, .workshop-upgrade-list article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #e5eff3; filter: grayscale(1); font-size: 22px; }
.restoration-list article.done > span, .star-gate.open > span, .workshop-upgrade-list article.built > span { background: linear-gradient(145deg, #bff5dc, #6bdeb0); filter: none; }
.restoration-list b, .star-gate b, .workshop-upgrade-list b { display: block; font-size: 12px; }
.restoration-list small, .star-gate small, .workshop-upgrade-list small { display: block; color: var(--muted); font-size: 8px; }
.restoration-list article > i { color: var(--blue-700); font-style: normal; font-size: 10px; font-weight: 900; }
.star-gate > div { min-width: 0; }
.star-gate em { height: 5px; display: block; margin-top: 5px; overflow: hidden; border-radius: 8px; background: #dce9ed; }
.star-gate em i { display: block; height: 100%; background: linear-gradient(90deg, #ffc629, #ff8f13); }
.star-gate > strong { font-size: 9px; }
.resident-message, .album-hero, .album-set-reward { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding: 13px; border-radius: 18px; color: white; background: linear-gradient(135deg, #1ca9e9, #0967b5); box-shadow: var(--soft-shadow); }
.resident-message > span, .album-hero > span, .album-set-reward > span { font-size: 34px; }
.resident-message b, .album-hero b, .album-set-reward b { font-size: 13px; }
.resident-message p, .album-hero p, .album-set-reward p { margin: 2px 0 0; font-size: 9px; opacity: .88; }

.workshop-room { min-height: 158px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 7px; padding: 16px; overflow: hidden; border: 5px solid #8c5d33; border-radius: 21px; background: linear-gradient(#cceef5 0 35%, #e5c99f 36% 77%, #92704e 78%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .48), var(--shadow); }
.workshop-room i { display: grid; place-items: center; min-height: 51px; border-radius: 12px; color: #8c6f52; background: rgba(255, 255, 255, .28); font-style: normal; font-size: 27px; opacity: .48; }
.workshop-room i.visible { color: inherit; background: rgba(255, 255, 255, .86); opacity: 1; filter: drop-shadow(0 5px 3px rgba(65, 40, 17, .18)); }
.workshop-upgrade-list article { grid-template-columns: 42px 1fr; }
.workshop-upgrade-list article > button { grid-column: 1 / -1; min-height: 37px; border: 0; border-radius: 12px; color: white; background: linear-gradient(145deg, #24c4a0, #138bc4); font-size: 9px; font-weight: 900; }
.workshop-upgrade-list article > button:disabled { color: #71818b; background: #d8e4e8; opacity: 1; }

.album-hero { margin-top: 0; background: linear-gradient(135deg, #7d54d9, #306cce); }
.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.album-grid article { min-width: 0; min-height: 116px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 8px 5px; border: 1px solid #d6e6eb; border-radius: 16px; background: white; box-shadow: 0 3px 8px rgba(4, 70, 112, .08); text-align: center; }
.album-grid article > span { font-size: 35px; }
.album-grid article > small { overflow: hidden; max-width: 100%; color: var(--blue-700); font-size: 7px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.album-grid article > b { font-size: 9px; line-height: 1.15; }
.album-grid article.missing { filter: grayscale(1); opacity: .56; }
.album-set-reward { color: var(--ink); background: linear-gradient(135deg, #fff3b0, #ffd151); }
.album-set-reward > div { flex: 1; }
.album-set-reward > strong { font-size: 13px; }

.event-live-art { position: relative; height: 218px; display: grid; place-items: center; overflow: hidden; border: 2px solid white; border-radius: 23px; background: radial-gradient(circle at 50% 45%, #b5f2ff, #1996d1 65%, #075085); box-shadow: var(--shadow); }
.event-live-art > span { position: relative; z-index: 2; font-size: 98px; filter: drop-shadow(0 12px 7px rgba(0, 37, 69, .34)); }
.event-live-art > b { position: absolute; z-index: 3; right: 15px; top: 15px; font-size: 37px; animation: emergency-pulse 1s infinite; }
.event-live-art > i { position: absolute; inset: 0; background: repeating-linear-gradient(125deg, transparent 0 26px, rgba(255, 255, 255, .08) 26px 31px); }
.event-live-art.event-frost { background: radial-gradient(circle, #efffff, #72cbe8 58%, #477ca8); }
.event-live-art.event-construction { background: radial-gradient(circle, #ffe69a, #e88d20 60%, #9f3b0d); }
.event-live-art.event-blackout { background: radial-gradient(circle at 53% 48%, #ffe7a8 0 12%, #1b3244 34%, #07131e 72%); }
.event-live-art.event-toxic { background: radial-gradient(circle, #c9ff9e, #58ab37 58%, #183e20); }
.event-brief { margin-top: 11px; padding: 15px; border: 1px solid #d8e8ec; border-radius: 20px; background: white; box-shadow: var(--soft-shadow); }
.event-brief ul { padding-left: 20px; color: var(--muted); font-size: 10px; line-height: 1.7; }

.weekly-game-banner { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; padding: 8px 11px; border-radius: 14px; color: white; background: linear-gradient(135deg, #7c4dde, #155fc4); box-shadow: var(--soft-shadow); }
.weekly-game-banner > span { font-size: 24px; }
.weekly-game-banner small { display: block; color: #d9f6ff; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.weekly-game-banner b { font-size: 12px; }
.pipe-tile { isolation: isolate; }
.event-tile-blocker { position: absolute; z-index: 20; inset: 2px; display: grid; place-items: center; align-content: center; padding: 0; border: 2px solid white; border-radius: 10px; color: white; background: rgba(70, 36, 27, .88); }
.event-tile-blocker span { font-size: 25px; }
.event-tile-blocker small { font-size: 6px; font-weight: 900; }
.event-toxic-tile .event-tile-blocker { background: rgba(54, 117, 39, .9); }
.event-frozen-tile::after { content: "❄️"; position: absolute; z-index: 19; inset: 2px; display: grid; place-items: center; border: 2px solid #d8fbff; border-radius: 10px; background: rgba(109, 207, 237, .76); font-size: 24px; }
.weekly-blackout .pipe-board-wrap { position: relative; background: radial-gradient(circle at 50% 50%, rgba(255, 244, 184, .2) 0 24%, rgba(2, 13, 24, .86) 57%); }
.weekly-blackout .pipe-board { filter: brightness(.48); }
.weekly-blackout .pipe-tile:nth-child(5), .weekly-blackout .pipe-tile:nth-child(6),
.weekly-blackout .pipe-tile:nth-child(9), .weekly-blackout .pipe-tile:nth-child(10) { filter: brightness(2); }
.emergency-game { animation: emergency-screen 1.1s ease-in-out infinite; }
.emergency-siren { font-size: 24px; animation: emergency-pulse .7s infinite; }
@keyframes emergency-screen { 50% { box-shadow: inset 0 0 34px rgba(236, 49, 82, .54); } }
.emergency-overlay { background: rgba(79, 0, 15, .82); }
.emergency-dialog { border: 3px solid #ff8a98; }
.emergency-dialog .dialog-art { animation: emergency-pulse .7s infinite; }
.story-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.story-choice-grid button { min-height: 116px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 10px; border: 1px solid #cfe5ed; border-radius: 17px; background: linear-gradient(145deg, #f4fdff, #dff5ff); }
.story-choice-grid span { font-size: 34px; }
.story-choice-grid b { font-size: 12px; }
.story-choice-grid small { color: var(--muted); font-size: 8px; }

.daily-rescue-card { display: grid; grid-template-columns: 45px 1fr; gap: 9px; margin: 9px 0 13px; padding: 11px; border: 1px solid #ffe398; border-radius: 17px; background: linear-gradient(135deg, #fff9d8, #ffedaa); box-shadow: var(--soft-shadow); }
.daily-rescue-card > span { grid-row: 1 / 3; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: white; font-size: 25px; }
.daily-rescue-card small { color: #bd7b00; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.daily-rescue-card b { display: block; font-size: 12px; }
.daily-rescue-card p { margin: 2px 0; color: #775b21; font-size: 8px; }
.daily-rescue-card > div:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.daily-rescue-card button { min-height: 36px; border: 0; border-radius: 11px; color: white; background: linear-gradient(145deg, #f2a500, #e26b00); font-size: 9px; font-weight: 900; }

@media (max-width: 365px) {
    .city-live-card { grid-template-columns: 106px minmax(0, 1fr) 14px; }
    .city-live-art { width: 106px; height: 96px; }
    .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
    .progression-page { margin-top: 18px; height: calc(100dvh - 36px); border-radius: 26px; box-shadow: 0 18px 55px rgba(0, 24, 45, .42); }
    .progression-scroll { height: calc(100dvh - 103px - var(--safe-top)); }
}