:root {
    color-scheme: light;
    --blue-950: #07345d;
    --blue-900: #08456f;
    --blue-800: #0869ad;
    --blue-700: #078fe9;
    --blue-600: #12a9ed;
    --blue-500: #27c3ed;
    --cyan-300: #77e7f4;
    --cyan-100: #dffbff;
    --surface: #f9fdff;
    --surface-blue: #edfaff;
    --ink: #123b5d;
    --muted: #68889e;
    --gold: #ffb400;
    --orange: #ff7200;
    --red: #ec3152;
    --green: #1bbf83;
    --shadow: 0 10px 22px rgba(3, 78, 132, .22);
    --soft-shadow: 0 5px 13px rgba(4, 75, 123, .16);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    font-family: Inter, "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow-x: hidden; background: var(--blue-700); color: var(--ink); }
body { min-height: 100dvh; overscroll-behavior: none; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .52; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.app { width: 100%; min-height: 100dvh; }
.app.home-active, .app.section-active { height: 100dvh; min-height: 0; overflow: hidden; }
.has-overlay { overflow: hidden; }

/* Startbild */
.splash {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, #078fe9 0%, #5fd6f2 72%, #0f8edf 100%);
    transition: opacity .65s ease, visibility .65s ease;
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash__art { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.splash__footer {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: calc(22px + var(--safe-bottom));
    display: grid;
    gap: clamp(24px, 3.8dvh, 32px);
    color: white;
    text-align: center;
    text-shadow: 0 2px 5px rgba(1, 44, 91, .7);
}
.splash__footer strong { font-size: 12px; letter-spacing: .08em; }
.splash__footer small { font-weight: 800; opacity: .88; }
.splash__track { height: 6px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .32); box-shadow: inset 0 1px 2px rgba(0, 34, 65, .25); }
.splash__track i { display: block; height: 100%; width: 0; border-radius: inherit; background: white; animation: splash-progress 10s linear forwards; }
@keyframes splash-progress { to { width: 100%; } }

/* Startseite */
.home-screen { position: relative; width: 100%; height: 100dvh; min-height: 0; padding-bottom: calc(72px + var(--safe-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, #1ca7ed 0, #91e9f5 36%, #e9fcff 72%, #dff8fb 100%); }
.home-sky { position: absolute; z-index: 0; inset: 0 0 auto; height: 290px; overflow: hidden; background-color: #31b9f2; background-image: linear-gradient(180deg, rgba(35, 153, 235, .05), rgba(92, 218, 246, .12)), url("../art/areas/kk_bg_main.webp"), url("../art/home-background.svg"); background-size: cover; background-position: center top; }
.home-sky::after { content: ""; position: absolute; inset: auto -5% -2px; height: 78px; background: radial-gradient(70% 65px at 20% 100%, #e9fcff 69%, transparent 71%), radial-gradient(70% 65px at 78% 100%, #e9fcff 69%, transparent 71%); }
.home-sky > i, .home-sky > b { position: absolute; display: block; border-radius: 50%; background: rgba(255, 255, 255, .63); filter: blur(1px); }
.home-sky > i { width: 100px; height: 26px; left: -20px; top: 110px; }
.home-sky > b { width: 135px; height: 31px; right: -38px; top: 89px; }
.home-header { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(102px, 1.05fr) minmax(0, 1.95fr); gap: 4px; padding: calc(2px + var(--safe-top)) 6px 2px; }
.level-chip, .resource-chips button { min-width: 0; border: 2px solid rgba(255, 255, 255, .9); background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(232, 248, 255, .96)); box-shadow: var(--soft-shadow); }
.level-chip { display: flex; align-items: center; gap: 4px; min-height: 42px; padding: 3px 4px; border-radius: 14px; text-align: left; }
.level-chip .avatar { position: relative; flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border: 2px solid #ffc524; border-radius: 50%; background: #daf7ff; box-shadow: inset 0 0 0 2px white; }
.level-chip .avatar img { width: 100%; height: 100%; object-fit: cover; }
.level-chip .avatar i { position: absolute; font-style: normal; font-size: 16px; }
.level-chip .avatar img + i { display: none; }
.level-chip > span:last-child { min-width: 0; flex: 1; display: grid; gap: 1px; }
.level-chip small { color: var(--blue-800); font-size: 6px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.level-chip b { overflow: hidden; color: var(--ink); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.level-chip em { height: 4px; overflow: hidden; border-radius: 9px; background: #c5dce8; }
.level-chip em i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd22e, #ff9400); }
.resource-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.resource-chips button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px; min-height: 42px; padding: 2px 3px; border-radius: 13px; }
.resource-chips button > span { font-size: 15px; line-height: 1; }
.resource-chips button > b { min-width: 0; overflow: hidden; font-size: clamp(9px, 2.8vw, 12px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-align: center; text-overflow: ellipsis; }
.resource-chips button > i { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: white; background: #29bd63; box-shadow: 0 2px 4px rgba(5, 94, 47, .27); font-style: normal; font-size: 11px; font-weight: 900; }
.brand-hero { position: relative; z-index: 2; height: 166px; display: grid; place-items: center; padding: 4px 50px 13px; }
.brand-hero img { width: min(305px, 82vw); max-height: 146px; filter: drop-shadow(0 7px 4px rgba(0, 78, 137, .26)); }
.brand-hero > button { position: absolute; right: 12px; bottom: 22px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 2px solid white; border-radius: 50%; background: rgba(8, 112, 184, .86); color: white; box-shadow: var(--soft-shadow); font-size: 19px; line-height: 1; }
.home-content { position: relative; z-index: 2; width: min(100%, 620px); margin: 0 auto; padding: 0 12px 18px; }
.current-mission-card { padding: 13px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 25px; background: rgba(251, 254, 255, .96); box-shadow: var(--shadow); }
.current-mission-card > header { display: flex; align-items: center; gap: 12px; padding: 1px 8px 10px; }
.current-mission-card > header > span { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; color: white; background: linear-gradient(145deg, #54d7ed, #1b83ec); box-shadow: 0 5px 10px rgba(3, 98, 169, .28), inset 0 0 0 2px white; font-size: 27px; }
.current-mission-card header div { min-width: 0; }
.current-mission-card small { color: #178cc4; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.current-mission-card h1 { margin: 1px 0 0; color: var(--ink); font-size: clamp(23px, 6.5vw, 30px); line-height: 1.02; }
.current-mission-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.continue-button { width: 100%; min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 25px; border: 0; border-radius: 21px; color: white; background: linear-gradient(150deg, #39d4e6, #137bea); box-shadow: inset 0 -5px 0 rgba(4, 82, 185, .27), 0 5px 9px rgba(6, 100, 179, .28); text-shadow: 0 1px 2px rgba(0, 58, 123, .38); }
.continue-button > span { display: grid; }
.continue-button small { color: white; font-size: 10px; }
.continue-button b { font-size: 20px; letter-spacing: .025em; }
.continue-button > i { position: absolute; right: 33px; color: white; font-style: normal; font-size: 40px; font-weight: 300; line-height: 1; }
.workshop-card { position: relative; width: 100%; display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 13px; border: 1px solid white; border-radius: 18px; background: linear-gradient(110deg, #fff8e8, #effcff); box-shadow: var(--soft-shadow); text-align: left; }
.workshop-card > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #ffcf54, #ee7e16); font-size: 24px; }
.workshop-card > div { min-width: 0; display: grid; }
.workshop-card small { color: #b76711; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.workshop-card b { font-size: 14px; }
.workshop-card em { height: 5px; margin-top: 4px; overflow: hidden; border-radius: 7px; background: #d9e5e9; }
.workshop-card em i { display: block; height: 100%; background: linear-gradient(90deg, #ffb915, #ff7900); }
.workshop-card strong { color: var(--blue-800); font-size: 12px; }
.workshop-card > i { color: var(--blue-700); font-style: normal; font-size: 30px; }
.workshop-card.maintenance { cursor: not-allowed; border-color: #ffdf8c; color: #6f5634; background: linear-gradient(110deg, #fff8dc, #f3f5f5); box-shadow: inset 0 0 0 1px rgba(255, 181, 28, .22), var(--soft-shadow); }
.workshop-card.maintenance > span { background: linear-gradient(145deg, #ffc94d, #db7b22); filter: saturate(.78); }
.workshop-card.maintenance em { background: repeating-linear-gradient(135deg, #e7c06a 0 8px, #fff0b6 8px 16px); }
.workshop-card.maintenance em i { width: 100%; background: transparent; }
.workshop-card.maintenance strong { padding: 6px 8px; border-radius: 10px; color: #8b570a; background: #ffe8a6; font-size: 9px; letter-spacing: .07em; }
.workshop-card.maintenance > i { color: #9a7129; font-size: 17px; }
.network-section { padding: 14px 10px 12px; border: 1px solid rgba(255, 255, 255, .94); border-radius: 22px; background: rgba(249, 253, 255, .95); box-shadow: var(--soft-shadow); }
.network-section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.network-section h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.network-section > header button { padding: 8px 11px; border: 0; border-radius: 16px; color: white; background: linear-gradient(145deg, #4dd0e5, #198bdf); font-size: 9px; box-shadow: 0 3px 7px rgba(0, 95, 161, .22); }
.network-section > header button span { font-size: 15px; }
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.area-grid.expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.area-card { min-width: 0; padding: 8px 5px 7px; overflow: hidden; border: 1px solid #d3e9ee; border-radius: 14px; background: linear-gradient(180deg, #eafaf1, #fff); text-align: center; box-shadow: 0 3px 7px rgba(12, 78, 109, .1); }
.area-card.city { background: linear-gradient(180deg, #e7f8ff, #fff); }
.area-card.station { background: linear-gradient(180deg, #fff2dc, #fff); }
.area-card.industry { background: linear-gradient(180deg, #eaf1f5, #fff); }
.area-card.pump { background: linear-gradient(180deg, #e4f9fb, #fff); }
.area-card.pressure, .area-card.dual { background: linear-gradient(180deg, #e5f7ff, #fff); }
.area-card.rust { background: linear-gradient(180deg, #f6e5d3, #fff); }
.area-card.fog { background: linear-gradient(180deg, #e3e8f0, #fff); }
.area-card.collector, .area-card.control { background: linear-gradient(180deg, #e9e5ff, #fff); }
.area-card.surge { background: linear-gradient(180deg, #fff4bd, #fff); }
.area-card.sludge { background: linear-gradient(180deg, #e0f0d1, #fff); }
.area-card.throne { background: linear-gradient(180deg, #fff0bf, #fff); }
.area-card.locked { filter: saturate(.55); }
.area-card > small { display: block; overflow: hidden; color: #43855a; font-size: 7px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.area-card.city > small { color: #277caf; }
.area-card.station > small { color: #b55c17; }
.area-card > b { display: block; height: 28px; overflow: hidden; padding-top: 2px; font-size: 11px; line-height: 13px; }
.area-art { position: relative; height: 94px; display: grid; place-items: end center; overflow: hidden; border-radius: 10px; background: linear-gradient(#8eddf5, #d9f5ef 58%, #48a659 59%, #77c969); }
.area-card.city .area-art { background: linear-gradient(#82d7f6, #dbf4ff 60%, #708ea6 61%, #5f7488); }
.area-card.station .area-art { background: linear-gradient(#8de1f8, #eef7ef 63%, #b98b62 64%, #78614f); }
.area-card.industry .area-art { background: linear-gradient(#90d7eb, #d3e8ed 58%, #6d828c 59%, #55646a); }
.area-card.pump .area-art { background: linear-gradient(#76d9eb, #d9f3f3 58%, #3aa7b5 59%, #18717f); }
.area-card.pressure .area-art, .area-card.dual .area-art { background: linear-gradient(#72d6fa, #d8f5ff 58%, #357fb2 59%, #225b86); }
.area-card.rust .area-art { background: linear-gradient(#eebf83, #f8e5ca 58%, #9b5f32 59%, #69391f); }
.area-card.fog .area-art { background: linear-gradient(#8298b2, #dce4ed 58%, #52687c 59%, #334557); }
.area-card.collector .area-art, .area-card.control .area-art { background: linear-gradient(#b99ff2, #e9e1ff 58%, #6d55ad 59%, #43317b); }
.area-card.surge .area-art { background: linear-gradient(#8bdcf5, #fff2a4 58%, #e5aa24 59%, #966616); }
.area-card.sludge .area-art { background: linear-gradient(#9bd8a2, #e0f2ce 58%, #5d913c 59%, #345b28); }
.area-card.throne .area-art { background: linear-gradient(#6bc8f2, #fff0aa 58%, #c38b16 59%, #76520b); }
.area-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area-art > span { position: relative; z-index: 0; padding-bottom: 17px; font-size: 42px; filter: drop-shadow(0 5px 3px rgba(0, 52, 70, .25)); }
.area-art > i { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: rgba(14, 54, 79, .45); color: white; font-style: normal; font-size: 25px; }
.area-progress { height: 5px; margin: 7px 1px 5px; overflow: hidden; border-radius: 5px; background: #19394e; }
.area-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1fd3d7, #168fed); }
.area-card footer { display: flex; justify-content: space-between; gap: 2px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.home-version { margin: 11px 0 0; color: #4d8fa6; text-align: center; font-size: 9px; font-weight: 700; }
.bottom-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: calc(60px + var(--safe-bottom)); padding: 4px 5px var(--safe-bottom); border-top: 1px solid rgba(255, 255, 255, .18); background: rgba(4, 58, 96, .98); box-shadow: 0 -5px 16px rgba(0, 52, 91, .24); }
.bottom-nav button { min-width: 0; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; background: transparent; color: #e7f8ff; }
.bottom-nav button span { font-size: 19px; line-height: 1; filter: grayscale(.5); }
.bottom-nav button small { overflow: hidden; width: 100%; font-size: 8px; font-weight: 700; text-overflow: ellipsis; }
.bottom-nav button.active { color: #49e3f0; }
.bottom-nav button.active span { filter: none; }

/* Overlays und Seiten */
#overlayRoot { position: relative; z-index: 200; }
.overlay { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: calc(12px + var(--safe-top)) 10px calc(12px + var(--safe-bottom)); background: rgba(0, 38, 68, .58); backdrop-filter: blur(4px); animation: overlay-in .2s ease both; }
@keyframes overlay-in { from { opacity: 0; } }
.page-overlay { align-items: stretch; padding: 0; background: linear-gradient(180deg, #139fe9, #79e0ed); }
.page-card { width: min(100%, 620px); max-height: 100%; display: flex; flex-direction: column; margin: 0 auto; overflow: hidden; border-radius: 0; background: #f1fbfd; box-shadow: var(--shadow); }
.page-card-header { flex: 0 0 auto; min-height: calc(72px + var(--safe-top)); display: grid; grid-template-columns: 42px 1fr auto; align-items: end; gap: 9px; padding: calc(9px + var(--safe-top)) 13px 10px; color: white; background: linear-gradient(130deg, #0e82dc, #22c1e6); box-shadow: 0 5px 13px rgba(1, 68, 116, .24); }
.page-card-header .icon-button { align-self: center; }
.page-card-header small { display: block; font-size: 8px; font-weight: 900; letter-spacing: .1em; opacity: .86; }
.page-card-header h2 { margin: 1px 0 0; font-size: 23px; line-height: 1; }
.page-card-header > em, .header-balance { align-self: center; padding: 8px 10px; border-radius: 15px; color: var(--ink); background: white; box-shadow: var(--soft-shadow); font-style: normal; font-size: 12px; font-weight: 900; }
.page-card-header select { align-self: center; min-width: 92px; padding: 8px; border: 0; border-radius: 13px; color: var(--ink); background: white; font-size: 11px; font-weight: 800; }
.page-card-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 13px 12px calc(18px + var(--safe-bottom)); }
.section-screen { position: relative; width: 100%; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, #139fe9, #79e0ed 28%, #effbfc 28%); }
.section-header { width: min(100%, 620px); margin: 0 auto; align-items: end; }
.section-content { width: min(100%, 620px); flex: 1; min-height: 0; margin: 0 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 13px 12px calc(76px + var(--safe-bottom)); background: #f1fbfd; }
.icon-button { width: 39px; height: 39px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .75); border-radius: 13px; color: white; background: rgba(4, 76, 130, .26); font-size: 25px; font-weight: 800; }
.page-hero { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 11px; margin-bottom: 13px; padding: 12px; border: 1px solid white; border-radius: 18px; background: linear-gradient(120deg, #e1faff, #fff); box-shadow: var(--soft-shadow); }
.page-hero > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg, #47d8e7, #1687df); font-size: 29px; box-shadow: inset 0 0 0 2px white; }
.page-hero b { display: block; font-size: 14px; }
.page-hero p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.page-hero > em { color: var(--blue-800); font-style: normal; font-size: 13px; font-weight: 900; }
.section-title { margin: 16px 4px 8px; color: var(--ink); font-size: 14px; }
.primary-button, .secondary-button, .quiet-button { min-height: 44px; padding: 10px 15px; border-radius: 14px; font-weight: 900; }
.primary-button { border: 0; color: white; background: linear-gradient(145deg, #25cae3, #1479e4); box-shadow: inset 0 -3px 0 rgba(1, 62, 155, .22), var(--soft-shadow); }
.secondary-button { border: 1px solid #a9d5e7; color: var(--blue-800); background: #effaff; }
.quiet-button { border: 0; color: var(--muted); background: transparent; }
.quiet-button.danger { color: #bd2743; }
.wide-button { width: 100%; }
.legal-note { color: var(--muted); font-size: 9px; line-height: 1.45; }
.sub-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 13px; padding: 4px; border-radius: 15px; background: #dceff5; }
.sub-tabs button { min-height: 38px; border: 0; border-radius: 12px; color: #658398; background: transparent; font-size: 11px; font-weight: 900; }
.sub-tabs button.active { color: white; background: linear-gradient(145deg, #28bfdf, #167edc); box-shadow: var(--soft-shadow); }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 28px 20px; border: 1px solid white; border-radius: 18px; background: #f9fdff; text-align: center; box-shadow: var(--soft-shadow); }
.empty-state.compact { padding: 17px; box-shadow: none; }
.empty-state > span { font-size: 40px; }
.empty-state h3, .empty-state p { margin: 0; }
.empty-state p, .empty-line { color: var(--muted); font-size: 11px; line-height: 1.45; }
.loading-state { padding: 32px 15px; color: var(--muted); text-align: center; font-size: 12px; font-weight: 800; }

/* Shop und Belohnungen */
.shop-list { display: grid; gap: 7px; }
.shop-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 9px; min-height: 66px; padding: 8px; border: 1px solid #d7eaf1; border-radius: 16px; background: white; box-shadow: 0 3px 7px rgba(5, 71, 106, .09); }
.shop-item.premium { background: linear-gradient(120deg, #fff9e9, #fff); border-color: #f3d894; }
.shop-item-art { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #e2f8fc; font-size: 25px; }
.shop-item.premium .shop-item-art { background: #fff1c9; }
.shop-item > div { min-width: 0; }
.shop-item b, .shop-item small { display: block; }
.shop-item b { font-size: 13px; }
.shop-item small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.shop-item > button { min-width: 71px; padding: 9px 8px; border: 0; border-radius: 12px; color: white; background: linear-gradient(145deg, #22c8d9, #1786dc); font-size: 10px; font-weight: 900; box-shadow: inset 0 -2px 0 rgba(0, 66, 145, .24); }
.shop-item.premium > button { color: #704500; background: linear-gradient(145deg, #ffe45b, #ffae1a); }
.shop-item.premium.owned { border-color: #48c695; background: linear-gradient(120deg, #e8fff5, #fff); }
.shop-item.premium.owned .shop-item-art { color: #087b55; background: #d6f9e9; }
.shop-item.premium.owned > button { color: white; background: linear-gradient(145deg, #29c38e, #0a8f68); }
.shop-item > button:disabled { opacity: .78; cursor: default; }
.daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.daily-grid article { min-width: 0; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 104px; padding: 7px 3px; border: 1px solid #cfe4ec; border-radius: 14px; background: white; box-shadow: 0 3px 6px rgba(5, 71, 106, .08); text-align: center; }
.daily-grid article:last-child { grid-column: span 2; }
.daily-grid article.today { border: 2px solid #ffb51f; background: #fff9df; box-shadow: 0 4px 10px rgba(205, 123, 0, .18); }
.daily-grid article.claimed { filter: saturate(.5); }
.daily-grid small { color: var(--blue-800); font-size: 7px; font-weight: 900; }
.daily-grid span { font-size: 25px; }
.daily-grid b { font-size: 8px; line-height: 1.2; }
.reward-chest { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 9px; margin-top: 10px; padding: 11px; border: 1px solid #f0d587; border-radius: 17px; background: linear-gradient(120deg, #fff7d9, #fff); box-shadow: var(--soft-shadow); }
.reward-chest > span { font-size: 34px; }
.reward-chest small, .reward-chest b, .reward-chest p { display: block; margin: 0; }
.reward-chest small { color: #a46b08; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.reward-chest b { font-size: 12px; }
.reward-chest p { color: var(--muted); font-size: 8px; }
.reward-chest button, .weekly-mission > button { padding: 9px; border: 0; border-radius: 11px; color: white; background: linear-gradient(145deg, #f4bd28, #ee7e12); font-size: 8px; font-weight: 900; }
.ad-free-status { grid-template-columns: 48px 1fr; border-color: #57cca0; background: linear-gradient(120deg, #e5fff4, #fff); }
.ad-free-status > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: white; background: #14a979; font-size: 23px; font-weight: 900; }
.ad-free-offer { grid-template-columns: 48px 1fr; border-color: #f1ba43; }
.restore-purchases { width: 100%; margin-top: 4px; text-align: center; }
.weekly-list { display: grid; gap: 7px; }
.weekly-mission { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid #d4e7ed; border-radius: 15px; background: white; }
.weekly-mission.ready { border-color: #3fc897; box-shadow: 0 0 0 2px rgba(63, 200, 151, .12); }
.weekly-mission > span { font-size: 26px; }
.weekly-mission b, .weekly-mission small { display: block; }
.weekly-mission b { font-size: 10px; }
.weekly-mission small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.weekly-mission em { display: block; height: 5px; margin-top: 4px; overflow: hidden; border-radius: 6px; background: #d7e8ed; }
.weekly-mission em i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2acaa0, #16a5e4); }
.weekly-mission > .mission-check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #31738c; background: #e5f3f7; font-size: 14px; font-style: normal; font-weight: 900; }
.weekly-mission.ready > .mission-check { color: white; background: #20b887; }
.daily-order-list, .comeback-list { margin-bottom: 9px; }
.comeback-dialog { border-color: #84d9bd; background: linear-gradient(160deg, #f8fffc, #e7fff5); }
.gift-compose { padding: 13px; border: 1px solid white; border-radius: 18px; background: white; box-shadow: var(--soft-shadow); }
.gift-compose > span { float: left; margin: 0 10px 7px 0; font-size: 34px; }
.gift-compose > div b, .gift-compose > div small { display: block; }
.gift-compose > div b { font-size: 14px; }
.gift-compose > div small { color: var(--muted); font-size: 9px; }
.gift-compose form { clear: both; display: grid; grid-template-columns: 1fr auto; gap: 7px; padding-top: 10px; }
.gift-compose label span, .account-form label span { display: block; margin: 0 0 4px 3px; color: var(--muted); font-size: 9px; font-weight: 800; }
.gift-compose input, .account-form input, .chat-compose input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #b9d7e3; border-radius: 13px; outline: none; color: var(--ink); background: #f9fdff; }
.gift-compose input:focus, .account-form input:focus, .chat-compose input:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(18, 169, 237, .14); }
.gift-list { display: grid; gap: 7px; }
.gift-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid #d6e9ef; border-radius: 15px; background: white; }
.gift-row > span { font-size: 28px; }
.gift-row b, .gift-row small { display: block; }
.gift-row b { font-size: 12px; }
.gift-row small { color: var(--muted); font-size: 8px; }
.gift-row button { padding: 8px; border: 0; border-radius: 10px; color: white; background: var(--blue-700); font-size: 9px; font-weight: 900; }
.gift-row em { color: var(--muted); font-style: normal; font-size: 9px; }

/* Rangliste, Chat und Profile */
.ranking-list { display: grid; gap: 6px; }
.ranking-list article { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #d4e8ef; border-radius: 14px; background: white; }
.ranking-list article > em { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--blue-700); font-style: normal; font-size: 11px; font-weight: 900; }
.ranking-list article:nth-child(1) > em { color: #724800; background: #ffd84c; }
.ranking-list article:nth-child(2) > em { color: #465964; background: #dbe8ee; }
.ranking-list article:nth-child(3) > em { color: #6b3210; background: #eaa473; }
.ranking-list button { min-width: 0; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; text-overflow: ellipsis; font-size: 12px; font-weight: 900; }
.ranking-list article > span { font-size: 11px; font-weight: 900; }
.ranking-list article > small { grid-column: 2 / 4; color: var(--muted); font-size: 8px; }
.chat-page-content { overflow: hidden; padding: 10px 10px calc(70px + var(--safe-bottom)); background: linear-gradient(180deg, #eafaff, #f7fdff); }
.chat-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, .95); border-radius: 22px; background: rgba(242, 251, 253, .96); box-shadow: 0 8px 24px rgba(4, 73, 112, .14); }
.chat-shell.guest { grid-template-rows: auto minmax(0, 1fr); }
.chat-room-header { min-height: 64px; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid #d4e9ef; background: linear-gradient(120deg, #fff, #e5faff); }
.chat-room-header > span { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 14px; color: white; background: linear-gradient(145deg, #2bd0e1, #147adc); box-shadow: inset 0 0 0 2px white, var(--soft-shadow); font-size: 23px; }
.chat-room-header small, .chat-room-header b { display: block; }
.chat-room-header small { color: var(--blue-800); font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.chat-room-header b { margin-top: 1px; font-size: 14px; }
.chat-room-header em { display: flex; align-items: center; gap: 4px; color: #159465; font-style: normal; font-size: 7px; font-weight: 900; }
.chat-room-header em i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #22c987; box-shadow: 0 0 0 3px rgba(34, 201, 135, .13); }
.chat-messages { min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior-y: contain; padding: 12px 10px; background: radial-gradient(circle at 18px 18px, rgba(22, 161, 213, .055) 2px, transparent 2.5px) 0 0 / 34px 34px, linear-gradient(180deg, #f7fdff, #edf8fb); }
.chat-message { align-self: flex-start; max-width: 92%; display: flex; align-items: flex-end; gap: 7px; }
.chat-message.own { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 2px solid white; border-radius: 50%; color: white; background: linear-gradient(145deg, #25c5dc, #1679d2); box-shadow: 0 3px 8px rgba(5, 70, 111, .18); font-size: 12px; font-weight: 900; }
.chat-message.own .chat-avatar { background: linear-gradient(145deg, #ffcf35, #ef8b13); }
.chat-bubble { min-width: 94px; padding: 8px 10px; border: 1px solid #d7e9ef; border-radius: 5px 16px 16px; background: white; box-shadow: 0 3px 9px rgba(5, 73, 109, .09); }
.chat-message.own .chat-bubble { border-color: transparent; border-radius: 16px 5px 16px 16px; color: white; background: linear-gradient(145deg, #20bce0, #1479d9); box-shadow: 0 4px 12px rgba(13, 112, 191, .2); }
.chat-bubble header { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.chat-bubble header button { min-width: 0; overflow: hidden; padding: 0; border: 0; color: var(--blue-800); background: transparent; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 900; }
.chat-message.own .chat-bubble header button { color: white; }
.chat-bubble time { flex: 0 0 auto; color: var(--muted); font-size: 6px; }
.chat-message.own .chat-bubble time { color: rgba(255, 255, 255, .7); }
.chat-bubble p { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.38; }
.chat-compose { display: grid; grid-template-columns: 1fr 46px; gap: 7px; padding: 9px; border-top: 1px solid #d3e7ee; background: white; box-shadow: 0 -4px 12px rgba(6, 76, 111, .06); }
.chat-compose input { height: 46px; border-radius: 15px; background: #f4fafc; font-size: 12px; }
.chat-compose button { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 15px; color: white; background: linear-gradient(145deg, #28cde0, #1477dc); box-shadow: inset 0 -3px 0 rgba(2, 65, 153, .2), var(--soft-shadow); font-size: 21px; }
.chat-compose button span { transform: translateX(1px); }
.chat-guest { align-self: center; display: grid; justify-items: center; gap: 9px; padding: 26px 22px; text-align: center; }
.chat-guest > span { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 24px; background: linear-gradient(145deg, #fff1a8, #ffbf25); box-shadow: inset 0 0 0 3px white, var(--soft-shadow); font-size: 38px; }
.chat-guest h3, .chat-guest p { margin: 0; }
.chat-guest h3 { font-size: 19px; }
.chat-guest p { max-width: 340px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.chat-guest .primary-button { min-width: 190px; margin-top: 4px; }
.profile-hero { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid white; border-radius: 20px; background: linear-gradient(120deg, #dff9ff, white); box-shadow: var(--soft-shadow); }
.profile-avatar { position: relative; flex: 0 0 76px; width: 76px; height: 76px; display: grid; place-items: center; overflow: hidden; border: 4px solid #ffc42b; border-radius: 50%; background: #bceef7; box-shadow: inset 0 0 0 3px white; }
.profile-avatar img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar span { font-size: 35px; }
.profile-hero small { color: var(--blue-800); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.profile-hero h3 { margin: 2px 0; font-size: 21px; }
.profile-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.profile-stats > span { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 11px 3px; border: 1px solid #d3e8ef; border-radius: 14px; background: white; }
.profile-stats small { color: var(--muted); font-size: 7px; font-weight: 900; }
.profile-stats b { max-width: 100%; overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.settings-list { overflow: hidden; border: 1px solid #d4e8ef; border-radius: 16px; background: white; }
.settings-list label { min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-bottom: 1px solid #e1edf1; font-size: 12px; font-weight: 800; }
.settings-list label:last-child { border: 0; }
.settings-list input { width: 42px; height: 23px; accent-color: var(--blue-700); }
.profile-actions { display: grid; gap: 6px; margin-top: 11px; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 11px; }
.achievement-grid article { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 9px; border: 1px solid #d4e8ef; border-radius: 14px; background: white; }
.achievement-grid article.locked { opacity: .52; filter: saturate(.4); }
.achievement-grid article > span { flex: 0 0 28px; font-size: 22px; }
.achievement-grid article div { min-width: 0; }
.achievement-grid b, .achievement-grid small { display: block; }
.achievement-grid b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.achievement-grid small { color: var(--muted); font-size: 7px; line-height: 1.25; }
.account-form { display: grid; gap: 10px; padding: 13px; border: 1px solid white; border-radius: 18px; background: white; box-shadow: var(--soft-shadow); }
.form-error { min-height: 15px; margin: 0; color: #c32143; font-size: 10px; text-align: center; }
.form-error.good { color: #12835b; }
.account-security { margin-top: 11px; }
.account-security > .section-title { margin-top: 0; }
.account-setting-card { overflow: hidden; margin-bottom: 8px; border: 1px solid #d4e8ef; border-radius: 16px; background: white; box-shadow: 0 3px 7px rgba(5, 71, 106, .07); }
.account-setting-card summary { min-height: 62px; display: grid; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; list-style: none; }
.account-setting-card summary::-webkit-details-marker { display: none; }
.account-setting-card summary > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #e4f8fc; font-size: 21px; }
.account-setting-card summary b, .account-setting-card summary small { display: block; }
.account-setting-card summary b { font-size: 12px; }
.account-setting-card summary small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.account-setting-card summary > i { color: var(--blue-700); font-style: normal; font-size: 24px; transition: transform .18s ease; }
.account-setting-card[open] summary > i { transform: rotate(90deg); }
.account-setting-card .account-form { border: 0; border-top: 1px solid #e1edf1; border-radius: 0; box-shadow: none; }
.account-form.compact .primary-button { width: 100%; }

/* Einstellungen, Hilfe und Kontoverwaltung */
.settings-hero > span, .legal-account-hero > span { color: white; background: linear-gradient(145deg, #2ac9df, #126fd8); }
.settings-panel { overflow: hidden; margin-bottom: 11px; border: 1px solid #d3e8ef; border-radius: 18px; background: white; box-shadow: 0 4px 10px rgba(5, 72, 108, .09); }
.settings-panel > h3 { margin: 0; padding: 11px 13px 8px; color: var(--blue-800); background: linear-gradient(120deg, #f1fbfd, #fff); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.preference-row { min-height: 67px; display: grid; grid-template-columns: 43px minmax(0, 1fr) 48px; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid #e1eef2; cursor: pointer; }
.preference-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #e3f9fc, #e8f2ff); font-size: 21px; }
.preference-copy { min-width: 0; }
.preference-copy b, .preference-copy small { display: block; }
.preference-copy b { font-size: 12px; }
.preference-copy small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.switch-control { position: relative; width: 46px; height: 27px; display: block; }
.switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-control i { position: absolute; inset: 0; display: block; border-radius: 20px; background: #c5d8e0; box-shadow: inset 0 2px 4px rgba(8, 52, 78, .16); transition: background .2s ease; }
.switch-control i::after { position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(5, 54, 83, .28); content: ""; transition: transform .2s ease; }
.switch-control input:checked + i { background: linear-gradient(145deg, #25c8dc, #137ee2); }
.switch-control input:checked + i::after { transform: translateX(19px); }
.switch-control input:focus-visible + i { outline: 3px solid rgba(7, 143, 233, .25); outline-offset: 2px; }
.settings-link-row { width: 100%; min-height: 68px; display: grid; grid-template-columns: 43px minmax(0, 1fr) 24px; align-items: center; gap: 9px; padding: 9px 12px; border: 0; border-top: 1px solid #e1eef2; background: white; text-align: left; }
.settings-link-row > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: #e8f8fb; font-size: 21px; }
.settings-link-row > span:nth-child(2) { min-width: 0; }
.settings-link-row b, .settings-link-row small { display: block; }
.settings-link-row b { font-size: 12px; }
.settings-link-row small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.settings-link-row > i { color: var(--blue-700); font-style: normal; font-size: 22px; text-align: center; }
.settings-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; }
.settings-meta-grid article { min-width: 0; display: grid; gap: 2px; padding: 13px; border: 1px solid white; border-radius: 17px; background: linear-gradient(145deg, #e8faff, #fff); box-shadow: var(--soft-shadow); }
.settings-meta-grid small { color: var(--blue-800); font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.settings-meta-grid b { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.settings-meta-grid span { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.account-danger-panel, .account-guest-panel { padding-bottom: 12px; }
.account-danger-panel { border-color: #f3bcc7; background: linear-gradient(145deg, #fff7f8, #fff); }
.account-danger-panel > h3 { color: #b52743; background: #fff2f5; }
.account-danger-panel > p, .account-guest-panel > p { margin: 2px 13px 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.account-danger-panel > button, .account-guest-panel > button { width: calc(100% - 26px); margin: 0 13px; }
.danger-button { min-height: 44px; padding: 10px 13px; border: 0; border-radius: 13px; color: white; background: linear-gradient(145deg, #f04b65, #bd213f); box-shadow: inset 0 -3px 0 rgba(105, 7, 28, .22), 0 4px 9px rgba(155, 22, 52, .2); font-weight: 900; }
.text-link-button { min-height: 35px; border: 0; color: var(--blue-800); background: transparent; font-size: 9px; font-weight: 800; }
.account-danger-panel > .text-link-button, .account-guest-panel > .text-link-button { margin-top: 5px; }
.delete-account-dialog { width: min(100%, 450px); }
.delete-account-dialog .account-form { margin-top: 10px; padding: 12px; text-align: left; }
.delete-account-dialog .dialog-actions { margin-top: 0; }
.delete-account-dialog .dialog-actions > button { min-width: 0; font-size: 9px; }
.danger-art { background: linear-gradient(145deg, #ff8b75, #d32d4a); }

/* Dialoge und Meldungen */
.dialog-card, .result-card { width: min(100%, 430px); max-height: calc(100dvh - 30px); overflow-y: auto; padding: 23px 17px 17px; border: 2px solid white; border-radius: 25px; background: linear-gradient(180deg, #f8fdff, #e9f8fc); box-shadow: 0 20px 45px rgba(0, 30, 55, .36); text-align: center; }
.dialog-art, .result-crown { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 8px; border-radius: 22px; background: linear-gradient(145deg, #5ce0ea, #178be4); box-shadow: inset 0 0 0 3px white, var(--soft-shadow); font-size: 38px; }
.dialog-card > small, .result-card > small { color: var(--blue-800); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.dialog-card h2, .result-card h2 { margin: 4px 0 7px; font-size: 23px; line-height: 1.05; }
.dialog-card p { margin: 0 0 13px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.dialog-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 15px; }
.result-crown { color: #744600; background: linear-gradient(145deg, #ffe45b, #ff9d0c); }
.result-stars { margin: 8px 0; font-size: 35px; letter-spacing: 4px; }
.result-stars span { color: #b7cdd4; text-shadow: 0 2px 2px white; }
.result-stars span.on { color: #ffba12; text-shadow: 0 2px 0 #c87b00; }
.result-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.result-summary span { display: grid; gap: 2px; padding: 10px 3px; border-radius: 13px; background: white; }
.result-summary small { color: var(--muted); font-size: 7px; font-weight: 900; }
.result-summary b { font-size: 12px; }
.toast-root { position: fixed; z-index: 10000; left: 10px; right: 10px; bottom: calc(76px + var(--safe-bottom)); display: grid; justify-items: center; gap: 7px; pointer-events: none; }
.toast { max-width: 420px; padding: 10px 14px; border-radius: 14px; color: white; background: rgba(5, 53, 87, .96); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); transition: .22s ease; font-size: 11px; font-weight: 800; text-align: center; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.good { background: rgba(10, 137, 91, .97); }
.toast.bad { background: rgba(190, 38, 65, .97); }

/* Gemeinsame Spielflächen */
.game-screen { min-height: 100dvh; overflow: hidden; background: linear-gradient(180deg, #098ee1 0, #38bee8 23%, #dff8fb 23%, #eefbfc 100%); }
.game-header { min-height: calc(70px + var(--safe-top)); display: grid; grid-template-columns: 44px 1fr auto; align-items: end; gap: 9px; padding: calc(9px + var(--safe-top)) 11px 10px; color: white; background: linear-gradient(125deg, #0877cd, #16b7e1); box-shadow: 0 5px 12px rgba(0, 71, 122, .28); }
.game-heading { align-self: center; min-width: 0; }
.game-heading small { display: block; overflow: hidden; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.game-heading h1 { margin: 1px 0 0; overflow: hidden; font-size: clamp(18px, 5vw, 24px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.game-clock { min-width: 60px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 4px; padding: 6px 9px; border-radius: 14px; color: var(--ink); background: white; text-align: center; }
.game-clock span { grid-row: span 2; }
.game-clock b { font-size: 17px; line-height: 1; }
.game-clock small { font-size: 6px; font-weight: 900; }
.game-main { width: min(100%, 620px); margin: 0 auto; padding: 10px 10px calc(15px + var(--safe-bottom)); }
.mission-strip { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 8px; min-height: 57px; padding: 7px 10px; border: 1px solid white; border-radius: 17px; background: rgba(255, 255, 255, .95); box-shadow: var(--soft-shadow); }
.mission-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #56d9e5, #1687df); font-size: 22px; }
.mission-strip div { min-width: 0; }
.mission-strip small, .mission-strip b { display: block; }
.mission-strip small { color: var(--blue-800); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.mission-strip b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mission-strip em { color: var(--muted); font-style: normal; font-size: 9px; font-weight: 800; }
.game-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.game-tools button { min-width: 0; min-height: 58px; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 4px 2px; border: 1px solid #cae4ec; border-radius: 14px; background: white; box-shadow: 0 3px 7px rgba(0, 71, 106, .09); }
.game-tools button > span { font-size: 20px; }
.game-tools button > b { font-size: 9px; }
.game-tools button > small { color: var(--muted); font-size: 7px; }
.game-resource-line { display: flex; justify-content: center; gap: 15px; margin-top: 8px; color: var(--blue-900); font-size: 11px; }

/* Rohrspiel */
.pipe-board-wrap { margin-top: 8px; padding: 7px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 19px; background: linear-gradient(145deg, #8adfe7, #3999bf); box-shadow: var(--shadow); }
.pipe-board { aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--columns), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 3px; padding: 4px; overflow: hidden; border: 2px solid #155d7b; border-radius: 14px; background: #164f68; box-shadow: inset 0 0 14px rgba(0, 28, 46, .45); }
.pipe-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 0; border-radius: 7px; background: linear-gradient(145deg, #d4f1e7, #83cdb4); }
.pipe-tile:nth-child(3n) { background: linear-gradient(145deg, #d3eddf, #79c1aa); }
.pipe-tile.manual-slot { box-shadow: inset 0 0 0 3px #48d2f0; }
.pipe-tile.locked { box-shadow: inset 0 0 0 2px rgba(255, 217, 61, .75); }
.pipe-tile.role-source { background: linear-gradient(145deg, #d9f8df, #63c98a); box-shadow: inset 0 0 0 3px #1eb968, 0 0 8px rgba(24, 171, 91, .55); }
.pipe-tile.role-sink { background: linear-gradient(145deg, #fff0cb, #f2b14e); box-shadow: inset 0 0 0 3px #ed8e19, 0 0 8px rgba(226, 125, 14, .52); }
.tile-ground { position: absolute; inset: 0; background: repeating-linear-gradient(35deg, transparent 0 12px, rgba(41, 114, 84, .08) 13px 15px); }
.pipe-rotor { position: absolute; z-index: 2; inset: 4%; display: block; transform: rotate(var(--pipe-rotation)); transition: transform .22s ease; }
.pipe-rotor svg { width: 100%; height: 100%; overflow: visible; }
.pipe-rotor path { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.pipe-shadow { stroke: rgba(7, 50, 71, .38); stroke-width: 35; }
.pipe-metal { stroke: #7698a7; stroke-width: 29; }
.pipe-shine { stroke: #d9eff5; stroke-width: 10; }
.pipe-slot-plus { position: absolute; z-index: 1; inset: 15%; display: grid; place-items: center; border: 2px dashed rgba(15, 122, 171, .75); border-radius: 10px; color: #1287bc; font-size: 25px; font-weight: 300; }
.pipe-role { position: absolute; z-index: 7; top: 50%; width: clamp(28px, 8.5vw, 36px); height: clamp(28px, 8.5vw, 36px); display: grid; place-items: center; overflow: hidden; border: 2px solid white; border-radius: 50%; color: white; box-shadow: 0 3px 8px rgba(4, 55, 74, .34), inset 0 -3px 0 rgba(0, 0, 0, .12); transform: translateY(-50%); pointer-events: none; }
.pipe-role b { margin-top: -4px; font-size: clamp(16px, 5vw, 22px); line-height: 1; text-shadow: 0 1px 2px rgba(0, 50, 35, .32); }
.pipe-role small { position: absolute; right: 2px; bottom: 2px; left: 2px; overflow: hidden; color: white; font-size: clamp(5px, 1.45vw, 7px); font-weight: 1000; letter-spacing: .02em; line-height: 1; text-align: center; text-overflow: clip; }
.pipe-role.source { left: 2px; background: linear-gradient(145deg, #35da80, #087f49); }
.pipe-role.sink { right: 2px; background: linear-gradient(145deg, #ffbd3e, #d9680b); }
.pipe-obstacle { position: absolute; z-index: 6; inset: 4%; display: grid; place-items: center; align-content: center; border-radius: 8px; background: rgba(45, 46, 49, .92); color: white; }
.pipe-obstacle b { font-size: clamp(16px, 5vw, 27px); }
.pipe-obstacle small { font-size: clamp(5px, 1.4vw, 7px); font-weight: 900; }
.pipe-obstacle.stone { background: rgba(103, 79, 61, .94); }
.pipe-tile.has-valve { box-shadow: inset 0 0 0 3px rgba(40, 191, 228, .8); }
.pipe-tile.rusty { background: linear-gradient(145deg, #edddc7, #bb8a5f); }
.pipe-tile.surge { box-shadow: inset 0 0 0 3px #ffd52f, 0 0 8px rgba(255, 194, 20, .7); }
.pipe-valve { position: absolute; z-index: 4; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: #0e91cf; box-shadow: 0 2px 5px rgba(0, 54, 89, .38); transform: rotate(var(--pipe-rotation)); transition: transform .22s ease; font-size: 14px; font-weight: 900; pointer-events: none; }
.pipe-rust, .pipe-surge { position: absolute; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pipe-rust { left: 2px; top: 2px; min-width: 24px; height: 20px; gap: 1px; padding: 1px 3px; border-radius: 8px; color: #fff; background: rgba(129, 68, 24, .9); font-size: 11px; }
.pipe-rust small { font-size: 7px; font-weight: 900; }
.pipe-surge { right: 2px; bottom: 2px; width: 21px; height: 21px; border-radius: 50%; background: #ffdb32; box-shadow: 0 0 7px #ffb800; font-size: 12px; }
.pipe-sludge, .pipe-fog { position: absolute; z-index: 8; inset: 3%; display: grid; place-items: center; align-content: center; border-radius: 8px; color: white; pointer-events: none; }
.pipe-sludge { background: linear-gradient(145deg, rgba(64, 112, 34, .95), rgba(24, 72, 39, .97)); box-shadow: inset 0 0 12px rgba(7, 43, 17, .6); }
.pipe-fog { background: radial-gradient(circle, rgba(104, 128, 147, .96), rgba(34, 54, 74, .98)); box-shadow: inset 0 0 13px rgba(224, 246, 255, .25); }
.pipe-sludge b, .pipe-fog b { font-size: clamp(16px, 5vw, 24px); }
.pipe-sludge small, .pipe-fog small { font-size: clamp(5px, 1.35vw, 7px); font-weight: 900; }
.pipe-tile.fogged .pipe-rotor, .pipe-tile.fogged .pipe-valve, .pipe-tile.fogged .pipe-rust, .pipe-tile.fogged .pipe-surge { visibility: hidden; }
.pipe-tile.water-flow::after { content: ""; position: absolute; z-index: 5; inset: 10%; border-radius: 50%; background: rgba(25, 211, 244, .54); box-shadow: 0 0 12px 6px #60edff; animation: water-pulse .55s ease infinite alternate; }
@keyframes water-pulse { to { transform: scale(.76); opacity: .55; } }
.hint-pulse { animation: hint-pulse .65s ease 3; }
@keyframes hint-pulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 5px rgba(255, 210, 41, .65); } }
.pipe-tray-wrap { margin-top: 8px; padding: 8px; border: 1px solid #c9e4ed; border-radius: 16px; background: white; box-shadow: var(--soft-shadow); }
.pipe-tray-wrap > header { display: flex; justify-content: space-between; gap: 8px; padding: 0 3px 6px; }
.pipe-tray-wrap header small, .pipe-tray-wrap header b { display: block; }
.pipe-tray-wrap header small { color: var(--blue-800); font-size: 7px; font-weight: 900; }
.pipe-tray-wrap header b { font-size: 9px; }
.pipe-tray-wrap header > span { color: var(--muted); font-size: 9px; }
.pipe-tray { display: flex; gap: 6px; overflow-x: auto; }
.tray-piece { position: relative; flex: 0 0 65px; width: 65px; height: 72px; overflow: hidden; border: 2px solid #c8e2ea; border-radius: 12px; background: #dff4ed; }
.tray-piece.selected { border-color: #ffae12; box-shadow: 0 0 0 3px rgba(255, 177, 24, .22); }
.tray-piece .pipe-rotor { inset: 2px 4px 14px; }
.tray-piece small { position: absolute; z-index: 7; left: 2px; right: 2px; bottom: 4px; font-size: 6px; font-weight: 900; }
.water-button { width: 100%; min-height: 61px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 18px; color: white; background: linear-gradient(145deg, #2dd5e3, #1475e7); box-shadow: inset 0 -4px 0 rgba(3, 66, 161, .25), var(--soft-shadow); }
.water-button > span { font-size: 27px; }
.water-button > b, .water-button > small { display: block; }
.water-button > b { font-size: 14px; }
.water-button > small { font-size: 8px; opacity: .86; }

/* Bossrad */
.boss-game { background: radial-gradient(circle at 50% 33%, #334b91, #131e4a 50%, #081530 100%); color: white; }
.boss-header { background: linear-gradient(125deg, #4d226f, #1c58ad); }
.boss-lives { align-self: center; padding: 8px; border-radius: 13px; background: rgba(5, 16, 54, .36); }
.boss-lives i { color: #5c6986; font-style: normal; font-size: 15px; }
.boss-lives i.on { color: #ff3d65; text-shadow: 0 0 7px #ff6c8b; }
.boss-main { width: min(100%, 560px); margin: 0 auto; padding: 10px 12px calc(16px + var(--safe-bottom)); }
.boss-intro { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 7px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 16px; background: rgba(7, 20, 66, .55); }
.boss-intro > span { font-size: 31px; }
.boss-intro small, .boss-intro b { display: block; }
.boss-intro small { color: #8eddf4; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.boss-intro b { font-size: 11px; }
.boss-arena { position: relative; height: min(60vw, 300px); min-height: 250px; margin: 8px auto 0; overflow: hidden; }
.boss-glow { position: absolute; left: 50%; top: 50%; width: 245px; height: 245px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(43, 206, 255, .32), rgba(88, 65, 215, .08) 58%, transparent 70%); filter: blur(5px); }
.boss-wheel-anchor { position: absolute; z-index: 2; left: 50%; top: 50%; width: 238px; height: 238px; transform: translate(-50%, -50%); transform-origin: center center; }
.boss-wheel { position: relative; width: 100%; height: 100%; margin: 0; border: 9px solid #e3b52e; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #1d7dc1 0 15deg, #12538e 15deg 30deg); box-shadow: 0 0 0 5px #754800, inset 0 0 0 5px #fbe27a, 0 0 25px rgba(40, 202, 255, .48); transform-origin: center center; will-change: transform; }
.wheel-rim { position: absolute; inset: 9px; border: 3px dashed rgba(255, 238, 147, .65); border-radius: 50%; }
.wheel-spokes { position: absolute; inset: 31px; border-radius: 50%; background: repeating-conic-gradient(transparent 0 27deg, rgba(255, 255, 255, .2) 28deg 30deg); }
.wheel-hub { position: absolute; z-index: 3; inset: 67px; display: grid; place-items: center; border: 7px solid #f1c63d; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #933dbe, #35146d); box-shadow: 0 5px 11px rgba(0, 0, 0, .4), inset 0 0 0 3px #8b6313; }
.wheel-hub span { font-size: 45px; transform: rotate(calc(-1 * var(--wheel-rotation, 0deg))); }
.wheel-marker, .wheel-blocker, .wheel-pin { position: absolute; z-index: 5; left: calc(50% - 12px); top: -23px; width: 24px; height: 42px; transform-origin: 12px 142px; transform: rotate(var(--marker-angle)); font-style: normal; }
.wheel-blocker span { width: 24px; height: 30px; display: grid; place-items: center; border: 3px solid #ff8194; border-radius: 6px; color: white; background: #c7193e; box-shadow: 0 0 8px #ff4968; font-size: 17px; font-weight: 900; }
.wheel-pin { top: -34px; height: 58px; transform-origin: 12px 153px; }
.wheel-pin span { display: block; transform: rotate(180deg); font-size: 23px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.boss-projectile { position: absolute; z-index: 5; left: 50%; bottom: -8px; width: 42px; height: 72px; margin-left: -21px; display: grid; justify-items: center; transition: transform .33s cubic-bezier(.2, .86, .3, 1), opacity .16s; }
.boss-projectile i { width: 3px; height: 36px; background: linear-gradient(#c4e4ed, #5a7482); }
.boss-projectile span { margin-top: -4px; font-size: 27px; transform: rotate(-42deg); }
.boss-projectile.firing { transform: translateY(-205px); opacity: .2; }
.boss-impact-line { position: absolute; z-index: 1; left: 50%; top: calc(50% + 118px); width: 2px; height: 26px; background: linear-gradient(#ffda4b, transparent); }
.boss-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 8px; }
.boss-status > div { display: grid; justify-items: center; gap: 2px; padding: 8px 3px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(5, 20, 58, .58); }
.boss-status small { color: #80d8ef; font-size: 6px; font-weight: 900; }
.boss-status b { font-size: 10px; }
.boss-fire-button { width: 100%; min-height: 62px; display: flex; justify-content: center; align-items: center; gap: 9px; border: 2px solid #ffe89b; border-radius: 19px; color: #4c2c00; background: linear-gradient(145deg, #ffe85c, #ff9c14); box-shadow: inset 0 -4px 0 rgba(166, 79, 0, .3), 0 7px 16px rgba(0, 0, 0, .3); }
.boss-fire-button span { font-size: 28px; }
.boss-fire-button b, .boss-fire-button small { display: block; }
.boss-fire-button b { font-size: 14px; }
.boss-fire-button small { font-size: 8px; }
.boss-help { margin: 7px 4px 0; color: #a9cce3; text-align: center; font-size: 8px; line-height: 1.35; }
.boss-collision .boss-wheel { box-shadow: 0 0 0 5px #8d0924, inset 0 0 0 5px #ff758d, 0 0 28px #f23a5c; }
.boss-phase-two .boss-wheel { border-color: #ff644e; box-shadow: 0 0 0 5px #741c16, inset 0 0 0 5px #ffd477, 0 0 32px rgba(255, 61, 73, .72); }

/* Schrauben-Werkstatt */
.workshop-game { background: linear-gradient(180deg, #88592f 0, #c78b4e 22%, #eef9fa 22%); }
.workshop-header { background: linear-gradient(125deg, #80502a, #d28b3f); }
.workshop-board { position: relative; aspect-ratio: 4 / 5; max-height: 54dvh; margin: 8px auto; overflow: hidden; border: 7px solid #744421; border-radius: 18px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), transparent 45%, rgba(0, 0, 0, .06)), repeating-linear-gradient(0deg, #c98c4e 0 27px, #b9783d 28px 30px); box-shadow: inset 0 0 22px rgba(75, 34, 9, .45), var(--shadow); }
.workshop-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(75, 45, 21, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 45, 21, .07) 1px, transparent 1px); background-size: 25% 20%; }
.workshop-hole { position: absolute; z-index: 6; left: var(--hole-x); top: var(--hole-y); width: 28px; height: 28px; margin: -14px; display: grid; place-items: center; border: 4px solid rgba(85, 46, 21, .58); border-radius: 50%; background: #76431f; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); }
.workshop-screw { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 2px solid #53636a; border-radius: 50%; color: #4a5d64; background: radial-gradient(circle at 35% 28%, #f2f7f7, #8da2a8 68%, #55666b); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.workshop-screw span { font-size: 19px; font-weight: 900; transform: rotate(45deg); }
.workshop-screw.unscrewing { animation: unscrew .26s ease forwards; }
@keyframes unscrew { to { transform: rotate(250deg) scale(.2); opacity: 0; } }
.workshop-plate { position: absolute; z-index: 3; left: var(--plate-x); top: var(--plate-y); width: var(--plate-length); height: 13%; transform: translate(-50%, -50%) rotate(var(--plate-angle)); transform-origin: center; border: 3px solid #566a72; border-radius: 11px; background: linear-gradient(180deg, #eaf1f2 0 15%, #9dafb5 18% 78%, #61757d 82%); box-shadow: 0 7px 9px rgba(57, 30, 11, .32), inset 0 0 0 2px rgba(255, 255, 255, .35); transition: transform .55s cubic-bezier(.2, .78, .26, 1); }
.workshop-plate.copper { border-color: #8a461d; background: linear-gradient(#fac392, #b96532 75%, #763817); }
.workshop-plate.blue { border-color: #165a8e; background: linear-gradient(#6fd6ed, #2580bb 75%, #174f79); }
.workshop-plate.gold { border-color: #9b6211; background: linear-gradient(#ffe778, #d89b22 75%, #8e5a0e); }
.workshop-plate.green { border-color: #27704d; background: linear-gradient(#84dfad, #309a68 75%, #1a6543); }
.workshop-plate.violet { border-color: #683d85; background: linear-gradient(#d2a0e8, #8b51b1 75%, #542d72); }
.workshop-plate > i { position: absolute; inset: 5px 8px auto; height: 4px; border-radius: 5px; background: rgba(255, 255, 255, .44); }
.workshop-plate.pivot-now { transform: translate(-50%, -50%) rotate(calc(var(--plate-angle) + 18deg)); }
.workshop-plate.dropping { animation: plate-drop .8s cubic-bezier(.35, .15, .7, .95) forwards; }
@keyframes plate-drop { 25% { transform: translate(-50%, calc(-50% + 15px)) rotate(calc(var(--plate-angle) + 9deg)); } to { transform: translate(30%, 620px) rotate(calc(var(--plate-angle) + 95deg)); opacity: 0; } }
.workshop-rule { margin: 5px 3px; color: var(--muted); text-align: center; font-size: 8px; }
.workshop-tools { grid-template-columns: repeat(5, 1fr); }
.workshop-tools button { min-height: 57px; }
.workshop-page-hero > span { background: linear-gradient(145deg, #ffd15e, #df7a2a); }
.level-section { margin: 12px 0; }
.level-section > header { padding: 0 5px 6px; }
.level-section header b, .level-section header small { display: block; }
.level-section header b { font-size: 13px; }
.level-section header small { color: var(--muted); font-size: 8px; }
.level-grid, .map-level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.level-grid button, .map-level-grid button { min-width: 0; min-height: 57px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 3px; border: 1px solid #bcdde8; border-radius: 13px; background: white; box-shadow: 0 3px 6px rgba(5, 72, 108, .09); }
.level-grid button b, .map-level-grid button b { font-size: 15px; }
.level-grid button small, .map-level-grid button small { width: 100%; overflow: hidden; color: var(--muted); font-size: 6px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.level-grid button.locked, .map-level-grid button.locked { background: #dfe9ed; }
.map-level-grid button.boss { border-color: #e8ac1e; color: #724300; background: #fff4c9; }
.map-level-grid button.completed { box-shadow: inset 0 0 0 2px #48c894; }

@media (min-width: 620px) {
    .page-card { margin-top: var(--safe-top); max-height: calc(100dvh - var(--safe-top)); border-radius: 24px 24px 0 0; }
    .page-card-header { min-height: 70px; padding-top: 10px; }
    .home-header { width: min(100%, 720px); margin: 0 auto; }
    .brand-hero { height: 180px; }
    .area-art { height: 130px; }
}

@media (max-width: 370px) {
    .home-header { grid-template-columns: 99px minmax(0, 1fr); padding-left: 4px; padding-right: 4px; }
    .level-chip { gap: 3px; padding: 3px; }
    .level-chip .avatar { flex-basis: 30px; width: 30px; height: 30px; }
    .resource-chips { gap: 2px; }
    .resource-chips button { padding: 2px; }
    .resource-chips button > span { font-size: 14px; }
    .resource-chips button > i { width: 15px; height: 15px; font-size: 10px; }
    .home-content { padding-left: 7px; padding-right: 7px; }
    .area-art { height: 80px; }
    .game-main { padding-left: 6px; padding-right: 6px; }
    .mission-strip b { font-size: 9px; }
    .boss-wheel-anchor { width: 214px; height: 214px; }
    .wheel-hub { inset: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }


/* Kanal König 4.1.5 – Gebietsbilder und Einsatzbesprechung */
.area-page-hero { overflow: hidden; }
.area-page-hero > img { width: 112px; height: 76px; flex: 0 0 112px; object-fit: cover; border: 2px solid rgba(255,255,255,.92); border-radius: 15px; box-shadow: 0 5px 13px rgba(0,66,105,.2); }
.level-briefing-overlay { background: rgba(2,45,78,.78); }
.level-briefing-dialog { width: min(100%, 470px); max-height: calc(100dvh - 32px); overflow-y: auto; border: 2px solid rgba(255,255,255,.96); }
.level-briefing-mission { margin: 8px 0 10px; padding: 10px 12px; border-radius: 14px; color: var(--ink); background: #e9f9ff; line-height: 1.45; }
.level-briefing-mission b { color: var(--blue-700); }
.level-briefing-event { display: grid; grid-template-columns: 43px 1fr; align-items: center; gap: 9px; margin: 9px 0; padding: 10px; border-radius: 15px; color: white; background: linear-gradient(135deg,#7749d9,#155fc4); text-align: left; }
.level-briefing-event > span { font-size: 30px; }
.level-briefing-event small { display: block; color: #d9f6ff; font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.level-briefing-event b { display: block; margin-top: 2px; font-size: 10px; line-height: 1.4; }
.level-briefing-dialog ol { display: grid; gap: 6px; margin: 9px 0 13px; padding-left: 23px; color: var(--muted); text-align: left; }
.level-briefing-dialog li { padding-left: 3px; font-size: 10px; line-height: 1.4; }
@media (max-width:365px) { .area-page-hero > img { width: 92px; height: 68px; flex-basis: 92px; } .level-briefing-dialog { max-height: calc(100dvh - 16px); } }