.world-shell {
    /* Seit der Einbettung in die Website: eigene Farben nur innerhalb der Welt,
       damit Kopfzeile und Fußzeile der Seite ihre Variablen behalten. */
    color-scheme: light;
    --ink: #173b34;
    --ink-soft: #557068;
    --green-950: #0c2c28;
    --green-900: #123e36;
    --green-800: #175548;
    --green-700: #1d7059;
    --green-500: #3ca977;
    --banana: #ffd84d;
    --banana-deep: #f2b51d;
    --sand: #fff4d8;
    --cream: #fffdf7;
    --coral: #ef765f;
    --sky: #68cdea;
    --panel: rgba(255, 253, 247, 0.96);
    --line: rgba(22, 77, 65, 0.13);
    --shadow: 0 24px 70px rgba(8, 43, 36, 0.22);
    font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Höhe der klebenden Seitenkopfzeile, setzt src/main.js (0 ohne Kopfzeile). */
.world-shell {
    --bw-site-offset: 0px;
    background: var(--green-950);
    color: var(--ink);
    line-height: normal;
}
/* Die Website setzt Überschriften auf Pangolin/Dunkelgrün und Bilder auf
   max-width:100%; innerhalb der Welt gelten die eigenen Regeln. */
.world-shell :is(h1, h2, h3) { font-family: inherit; color: inherit; line-height: 1.15; }
.world-shell img { max-width: none; }
.world-shell a { color: inherit; }

.world-shell :is(button, input, select) { font: inherit; }
.world-shell button { cursor: pointer; }
.world-shell button:focus-visible { outline: 3px solid #3ba9ff; outline-offset: 3px; }

[hidden] { display: none !important; }

.world-shell { min-height: calc(100dvh - var(--bw-site-offset)); }


.world-hero {
    position: relative;
    display: grid;
    min-height: calc(100dvh - var(--bw-site-offset));
    place-items: center start;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(6, 38, 32, 0.92) 0%, rgba(7, 45, 37, 0.62) 38%, rgba(7, 45, 37, 0.04) 74%),
        url("../assets/game/bananario-welt-hero.webp") center / cover no-repeat;
}

.hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(5, 28, 24, 0.5), transparent 40%);
}

.hero__content {
    width: min(650px, calc(100% - 40px));
    margin-left: clamp(20px, 8vw, 150px);
    padding: 42px 0;
    color: #fff;
    text-shadow: 0 2px 20px rgba(4, 26, 22, 0.3);
}

.eyebrow {
    margin: 0 0 8px;
    color: #d2a315;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.world-hero .eyebrow { color: #ffe37e; }

.world-hero h1 {
    margin: 0;
    font: 900 clamp(4rem, 9vw, 7.4rem)/0.9 "Trebuchet MS", system-ui, sans-serif;
    letter-spacing: -0.055em;
}

.hero__lead {
    max-width: 590px;
    margin: 24px 0 30px;
    font-size: clamp(1.12rem, 2vw, 1.48rem);
    font-weight: 700;
    line-height: 1.55;
}

.primary-button, .secondary-button {
    border: 0;
    border-radius: 16px;
    font-weight: 900;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: #253d21;
    background: linear-gradient(145deg, #ffe875, var(--banana));
    box-shadow: 0 13px 30px rgba(230, 166, 6, 0.35), inset 0 1px rgba(255,255,255,0.7);
}

.primary-button:hover { transform: translateY(-2px); filter: saturate(1.08); }
.primary-button--large { padding: 17px 24px; font-size: 1.02rem; }
.primary-button--large span { font-size: 1.35rem; }

.hero__note { margin-top: 18px; color: rgba(255,255,255,0.72); font-size: 0.78rem; }

.game {
    min-height: calc(100dvh - var(--bw-site-offset));
    padding: 16px;
    background:
        radial-gradient(circle at 15% 0%, rgba(64, 168, 125, 0.24), transparent 36%),
        var(--green-950);
}

.world-topbar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 72px;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px 20px 0 0;
    color: #fff;
    background: rgba(14, 54, 47, 0.97);
    box-shadow: 0 10px 35px rgba(1, 20, 17, 0.22);
}

.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-lockup > div { display: grid; }
.brand-lockup strong { font-size: 1rem; }
.brand-lockup small, .brand-lockup span { color: rgba(255,255,255,0.68); font-size: 0.72rem; }

.brand-mark {
    display: grid;
    width: 42px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 14px 14px 17px 17px;
    color: #2e4b22 !important;
    background: linear-gradient(145deg, #ffe986, #ffca2f);
    box-shadow: inset 0 -4px rgba(201, 136, 0, 0.18);
    font: 900 1.55rem "Trebuchet MS", system-ui, sans-serif;
}

.view-tabs {
    display: flex;
    gap: 4px;
    max-width: min(54vw, 660px);
    overflow-x: auto;
    padding: 4px;
    border-radius: 14px;
    background: rgba(0,0,0,0.2);
}

.view-tab {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    color: rgba(255,255,255,0.72);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 900;
}

.view-tab.is-active { color: var(--green-950); background: var(--banana); }

.player-stats { display: flex; justify-content: flex-end; gap: 8px; }
.stat-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 116px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
}
.stat-pill > span:first-child { font-size: 1.25rem; color: #ffe879; }
.stat-pill > span:last-child { display: grid; }
.stat-pill strong { font-size: 0.84rem; }
.stat-pill small { color: rgba(255,255,255,0.62); font-size: 0.62rem; }
.stat-pill--banana { background: rgba(255, 211, 61, 0.12); }

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    height: calc(100dvh - 104px - var(--bw-site-offset));
    min-height: calc(100dvh - 104px - var(--bw-site-offset));
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    background: #d4ecdf;
    box-shadow: var(--shadow);
}

.stage { position: relative; height: 100%; min-height: 0; overflow: hidden; background: #75cdda; }
#world-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#world-canvas.is-dragging { cursor: grabbing; }
#world-canvas:focus-visible { outline: 3px solid #ffd84d; outline-offset: -4px; }
.plot-editor { display: grid; gap: 9px; padding: 12px; margin-bottom: 14px; border: 1px solid #adc7b7; border-radius: 12px; background: #f7fbee; }
.plot-editor[hidden] { display: none; }
.plot-editor label { display: grid; gap: 6px; font-size: .85rem; font-weight: 800; }
.plot-editor select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #adc7b7; border-radius: 8px; background: #fff; }
.plot-editor > div { display: flex; gap: 6px; }
.plot-editor .life-action { min-width: 44px; min-height: 44px; font-size: 1rem; }
.plot-editor p { margin: 0; font-size: .8rem; line-height: 1.45; }
.plot-editor :is(select,button):focus-visible { outline: 3px solid #d8a619; outline-offset: 2px; }
@media (max-width: 600px) {
    .stage:has(#plot-camera-controls:not([hidden])) .map-chips { max-width: calc(100% - 175px); flex-wrap: wrap; }
    .stage:has(#plot-camera-controls:not([hidden])) .map-chips > .map-chip { flex-shrink: 0; white-space: nowrap; }
}
#world-canvas.is-placing { cursor: crosshair; }
#world-canvas.is-resident-hover:not(.is-dragging) { cursor: pointer; }
.plot-avatar { position: absolute; z-index: 14; inset: 0; overflow: hidden; pointer-events: none; }
.character-figure { --character-facing: 1; position: relative; width: 100%; height: 100%; pointer-events: none; isolation: isolate; }
.character-figure[data-character-direction="left"] { --character-facing: -1; }
.character-figure--plot { position: absolute; top: var(--plot-avatar-top); left: var(--plot-avatar-left); width: var(--plot-avatar-width); height: calc(var(--plot-avatar-width) * 1.5); cursor: pointer; transform: translate(-50%, -94%); transition: top 205ms linear, left 205ms linear; pointer-events: auto; }
.character-figure__appearance { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 8px rgba(20,26,18,0.36)); transform: scaleX(var(--character-facing)); transform-origin: 50% 92%; will-change: transform; }
.character-figure__shadow { position: absolute; z-index: 0; right: 23%; bottom: 2%; left: 23%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(21,49,37,.43), rgba(21,49,37,0) 72%); filter: blur(2px); transform: scaleX(1); transform-origin: center; }
.character-figure__motion-fx { position: absolute; z-index: 5; inset: -12%; background: center / contain no-repeat; opacity: 0; pointer-events: none; }
.character-figure.is-walking .character-figure__appearance { animation: character-walk-body 225ms ease-in-out infinite alternate; }
.character-figure.is-walking .character-figure__shadow { animation: character-walk-shadow 225ms ease-in-out infinite alternate; }
.character-figure.is-walking .character-figure__motion-fx { inset: auto -12% -3%; height: 42%; background-image: url("../assets/game/fx-walk-dust.webp"); animation: character-walk-dust 450ms ease-out infinite; }
.character-figure.is-greeting .character-figure__appearance { animation: character-greeting-body 1250ms cubic-bezier(.2,.75,.2,1); }
.character-figure.is-greeting .character-figure__motion-fx { background-image: url("../assets/game/fx-greeting-leaves.webp"); animation: character-greeting-fx 1250ms ease-out; }
.character-figure.is-interacting .character-figure__appearance { animation: character-interact-body 950ms cubic-bezier(.2,.9,.25,1); }
.character-figure.is-interacting .character-figure__motion-fx { inset: 22% -7% 5%; background-image: url("../assets/game/fx-interaction-glow.webp"); animation: character-interact-fx 950ms ease-out; }
.character-figure.is-strolling .character-figure__appearance { animation: character-stroll-body 1250ms ease-in-out; }
.character-figure.is-resting .character-figure__appearance, .character-figure.is-relaxing .character-figure__appearance { animation: character-rest-body 1450ms ease-in-out; }
.character-figure.is-lighting .character-figure__appearance, .character-figure.is-tending .character-figure__appearance { animation: character-tend-body 1250ms ease-in-out; }
.character-figure.is-reading .character-figure__appearance { animation: character-read-body 1450ms ease-in-out; }
.character-figure.is-strolling .character-figure__motion-fx, .character-figure.is-lighting .character-figure__motion-fx, .character-figure.is-tending .character-figure__motion-fx, .character-figure.is-reading .character-figure__motion-fx, .character-figure.is-resting .character-figure__motion-fx, .character-figure.is-relaxing .character-figure__motion-fx { inset: 18% -9% 3%; background-image: url("../assets/game/fx-interaction-glow.webp"); animation: character-interact-fx 1250ms ease-out; }
@keyframes character-walk-body {
    from { transform: scaleX(var(--character-facing)) rotate(-1.4deg) translateY(0) scaleY(1); }
    to { transform: scaleX(var(--character-facing)) rotate(1.4deg) translateY(-3.5%) scaleY(.985); }
}
@keyframes character-walk-shadow { from { opacity: .88; transform: scaleX(1); } to { opacity: .55; transform: scaleX(.82); } }
@keyframes character-walk-dust { 0% { opacity: 0; transform: scale(.55); } 28% { opacity: .72; } 100% { opacity: 0; transform: scale(1.05) translateY(-4%); } }
@keyframes character-greeting-body {
    0%, 100% { transform: scaleX(var(--character-facing)) rotate(0) translateY(0); }
    22% { transform: scaleX(var(--character-facing)) rotate(-2.5deg) translateY(-2%); }
    48% { transform: scaleX(var(--character-facing)) rotate(2.2deg) translateY(-3.5%); }
    72% { transform: scaleX(var(--character-facing)) rotate(-1.2deg) translateY(-1.5%); }
}
@keyframes character-greeting-fx { 0% { opacity: 0; transform: scale(.72) rotate(-4deg); } 28%, 72% { opacity: .92; } 100% { opacity: 0; transform: scale(1.12) rotate(4deg); } }
@keyframes character-interact-body {
    0%, 100% { transform: scaleX(var(--character-facing)) translateY(0) rotate(0); }
    38% { transform: scaleX(var(--character-facing)) translateY(-5%) rotate(-2deg) scale(1.035); }
    62% { transform: scaleX(var(--character-facing)) translateY(-3%) rotate(1deg) scale(1.02); }
}
@keyframes character-interact-fx { 0% { opacity: 0; transform: scale(.55) rotate(-8deg); } 42% { opacity: .9; } 100% { opacity: 0; transform: scale(1.2) rotate(8deg); } }
@keyframes character-stroll-body { 0%, 100% { transform: scaleX(var(--character-facing)) translateX(0); } 35% { transform: scaleX(var(--character-facing)) translateX(7%) translateY(-2%); } 70% { transform: scaleX(var(--character-facing)) translateX(-4%) translateY(-1%); } }
@keyframes character-rest-body { 0%, 100% { transform: scaleX(var(--character-facing)) translateY(0) rotate(0); } 35%, 72% { transform: scaleX(var(--character-facing)) translateY(3%) rotate(-2deg) scaleY(.965); } 55% { transform: scaleX(var(--character-facing)) translateY(4%) rotate(1deg) scaleY(.95); } }
@keyframes character-tend-body { 0%, 100% { transform: scaleX(var(--character-facing)) rotate(0); } 32% { transform: scaleX(var(--character-facing)) rotate(-4deg) translateY(1%); } 58% { transform: scaleX(var(--character-facing)) rotate(3deg) translateY(-2%); } 78% { transform: scaleX(var(--character-facing)) rotate(-1.5deg); } }
@keyframes character-read-body { 0%, 100% { transform: scaleX(var(--character-facing)) translateY(0); } 24%, 78% { transform: scaleX(var(--character-facing)) translateY(1%) rotate(-1deg); } 48% { transform: scaleX(var(--character-facing)) translateY(-1%) rotate(1deg); } }
.character-figure > i { position: absolute; z-index: 8; right: 50%; bottom: 1%; padding: 3px 6px; border: 2px solid #fff; border-radius: 999px; color: #173b34; background: var(--banana); font-size: 0.43rem; font-style: normal; font-weight: 1000; transform: translateX(50%); }
.character-clothing { position: absolute; display: grid; place-items: center; pointer-events: none; }
.character-clothing img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(31,33,20,0.24)); transform: scaleX(var(--character-facing)); }
.character-clothing--bottom { z-index: 2; top: 40%; left: 20%; width: 60%; height: 45%; }
.character-clothing--shoes { z-index: 3; right: 22%; bottom: -1%; left: 22%; height: 14%; }
.character-clothing--top { z-index: 3; top: 25%; left: 12%; width: 76%; height: 34%; }
.character-clothing--head { z-index: 7; top: -11%; left: 7%; width: 86%; height: 18%; }
.character-clothing--stadtjacke { top: 23%; left: 8%; width: 84%; height: 38%; }
.character-clothing--korallenhemd { top: 24%; left: 10%; width: 80%; height: 34%; }
.character-clothing--lagunenhose { top: 41%; left: 22%; width: 56%; height: 44%; }
.character-clothing--blattkrone { top: -10%; left: 8%; width: 84%; height: 18%; }
.plot-interaction-card { position: absolute; z-index: 30; top: var(--interaction-top); left: var(--interaction-left); display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; width: min(260px, calc(100% - 24px)); padding: 11px 12px; border: 2px solid rgba(255,255,255,0.92); border-radius: 17px; color: #173b34; background: rgba(255,251,228,0.97); box-shadow: 0 13px 30px rgba(10,48,38,0.28); transform: translate(-50%, -100%); pointer-events: auto; animation: plot-interaction-in 180ms ease-out; }
.plot-interaction-card > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #e7f2d0; font-size: 1.3rem; }
.plot-interaction-card strong, .plot-interaction-card small { display: block; }
.plot-interaction-card strong { font-size: 0.78rem; }
.plot-interaction-card small { margin-top: 2px; color: #62756d; font-size: 0.58rem; line-height: 1.25; }
.plot-interaction-card [data-plot-interaction-action] { grid-column: 1 / -1; padding: 8px 10px; border: 0; border-radius: 11px; color: #fff; background: #1d806a; font: inherit; font-size: 0.68rem; font-weight: 900; cursor: pointer; }
.plot-interaction-card__close { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #173e36; font: inherit; font-weight: 900; cursor: pointer; }
.visitor-object-card { position: absolute; z-index: 32; top: var(--visitor-card-top, 50%); left: var(--visitor-card-left, 50%); display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px 10px; width: min(285px, calc(100% - 24px)); padding: 11px; border: 2px solid rgba(255,255,255,.94); border-radius: 17px; color: var(--green-900); background: rgba(255,252,233,.97); box-shadow: 0 15px 34px rgba(7,47,38,.3); transform: translate(-50%, -105%); pointer-events: auto; }
.visitor-object-card[hidden] { display: none; }
.visitor-object-card.is-playing { animation: visitor-object-moment 780ms ease-out; }
.visitor-object-card img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(25,58,43,.2)); }
.visitor-object-card strong, .visitor-object-card small { display: block; }
.visitor-object-card strong { font-size: .72rem; }
.visitor-object-card small { margin-top: 3px; color: var(--ink-soft); font-size: .56rem; line-height: 1.35; }
.visitor-object-card em { display: block; margin-top: 4px; color: #a45d72; font-size: .52rem; font-style: normal; font-weight: 900; }
.visitor-object-card__close { position: absolute; top: -8px; right: -8px; width: 25px; height: 25px; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--green-900); font: inherit; font-weight: 900; cursor: pointer; }
.visitor-object-card__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.visitor-object-card__actions button { min-height: 32px; padding: 7px; border: 0; border-radius: 10px; color: #fff; background: var(--green-700); font: inherit; font-size: .57rem; font-weight: 900; cursor: pointer; }
.visitor-object-card__actions [data-visitor-object-like] { color: #744451; background: #ffdbe2; }
.visitor-object-card__actions button:disabled { cursor: default; filter: saturate(.35); opacity: .62; }
.region-preview-banner { position: absolute; z-index: 35; right: 16px; bottom: 16px; left: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,255,255,.46); border-radius: 18px; color: #fff; background: rgba(8,47,39,.91); box-shadow: 0 15px 34px rgba(7,37,31,.3); backdrop-filter: blur(12px); }
.region-preview-banner[hidden] { display: none; }
.region-preview-banner > div { display: grid; min-width: 0; }
.region-preview-banner small { color: #f1d477; font-size: .5rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.region-preview-banner strong { margin-top: 1px; font-size: .8rem; }
.region-preview-banner span { overflow: hidden; color: rgba(255,255,255,.72); font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.region-preview-banner em { color: #f2da88; font-size: .56rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.region-preview-banner button { min-height: 34px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.26); border-radius: 10px; color: #fff; background: rgba(255,255,255,.12); font: inherit; font-size: .58rem; font-weight: 900; cursor: pointer; }
.region-preview-banner button.is-confirm { border-color: #f5d765; color: #22473d; background: var(--banana); }
.region-preview-banner button:disabled { cursor: default; opacity: .5; }
@keyframes visitor-object-moment { 0%, 100% { transform: translate(-50%, -105%) scale(1); } 40% { transform: translate(-50%, -110%) scale(1.035); box-shadow: 0 18px 42px rgba(230,179,44,.38); } }
@keyframes plot-interaction-in {
    from { opacity: 0; transform: translate(-50%, -92%) scale(.94); }
    to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

.map-chips { position: absolute; top: 16px; left: 16px; display: flex; gap: 7px; pointer-events: none; }
.map-chip {
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 99px;
    color: #fff;
    background: rgba(16, 57, 49, 0.84);
    box-shadow: 0 5px 18px rgba(5, 35, 29, 0.18);
    backdrop-filter: blur(8px);
    font-size: 0.72rem;
    font-weight: 900;
}
.map-chip--muted { background: rgba(255,255,255,0.83); color: var(--ink); }

.camera-help {
    position: absolute;
    left: 50%;
    bottom: 14px;
    display: flex;
    gap: 13px;
    padding: 8px 14px;
    border-radius: 99px;
    color: rgba(255,255,255,0.82);
    background: rgba(8, 41, 35, 0.72);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
    font-size: 0.67rem;
    font-weight: 800;
    pointer-events: none;
}

.placement-assistant { display: none; }
.plot-camera-controls { position: absolute; z-index: 26; top: 15px; right: 15px; display: flex; overflow: hidden; border: 1px solid rgba(255,255,255,.5); border-radius: 12px; background: rgba(14,58,49,.88); box-shadow: 0 7px 20px rgba(4,34,28,.2); backdrop-filter: blur(8px); }
.plot-camera-controls[hidden] { display: none; }
.plot-camera-controls button { min-width: 36px; height: 34px; padding: 0 9px; border: 0; border-right: 1px solid rgba(255,255,255,.15); color: #fff; background: transparent; font: 900 .72rem/1 system-ui,sans-serif; }
.plot-camera-controls button:last-child { border-right: 0; }
.plot-camera-controls button:hover { background: rgba(255,255,255,.12); }
#plot-zoom-value { min-width: 58px; color: #ffe36a; font-size: .56rem; }

.edit-toolbar {
    position: absolute;
    left: 50%;
    bottom: 18px;
    display: flex;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 16px;
    background: rgba(255,255,255,0.93);
    box-shadow: 0 14px 35px rgba(8, 46, 37, 0.24);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}
.edit-toolbar button {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 9px 12px;
    border: 0;
    border-radius: 11px;
    color: var(--ink);
    background: transparent;
    font-size: 0.76rem;
    font-weight: 900;
}
.edit-toolbar button:hover { background: #f1f5ec; }
.edit-toolbar .toolbar-save { color: #fff; background: var(--green-700); }
.edit-toolbar .toolbar-save:hover { background: var(--green-800); }

/* Am Bildschirm fixiert und nicht am Spielfeld: Dort lag die Meldung hinter den
   Bühnen (Haus, Garage ...) und scrollte auf dem Handy aus dem Bild. */
.toast {
    position: fixed;
    z-index: 200;
    top: calc(var(--bw-site-offset) + 12px);
    left: 50%;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 24px);
    text-align: center;
    padding: 10px 15px;
    border-radius: 12px;
    color: #fff;
    background: rgba(12, 57, 48, 0.94);
    box-shadow: 0 12px 28px rgba(3, 34, 28, 0.24);
    transform: translate(-50%, -18px);
    opacity: 0;
    pointer-events: none;
    transition: 180ms ease;
    font-size: 0.78rem;
    font-weight: 800;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast.is-error { background: #a83d32; }

.side-panel {
    position: relative;
    z-index: 2;
    min-height: 0;
    overflow: auto;
    padding: 26px;
    border-left: 1px solid rgba(22, 77, 65, 0.12);
    background: var(--panel);
}

.panel-view h2 { margin: 0 0 10px; font-size: 1.6rem; line-height: 1.15; }
.panel-copy { margin: 0 0 22px; color: var(--ink-soft); font-size: 0.87rem; line-height: 1.58; }

.feature-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(23, 112, 89, 0.16);
    border-radius: 16px;
    text-align: left;
    color: var(--ink);
    background: linear-gradient(145deg, #eef8df, #fff8dd);
}
.feature-card:hover { transform: translateY(-1px); border-color: rgba(23,112,89,0.34); }
.feature-card__icon { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 13px; color: #fff; background: var(--green-700); font-size: 1.4rem; }
.feature-card > span:nth-child(2) { display: grid; }
.feature-card small { color: var(--ink-soft); font-size: 0.68rem; }

.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; margin: 24px 0 10px; }
.section-heading h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.92rem; }
.section-heading > span { flex: 0 1 58%; color: #759088; font-size: 0.66rem; font-weight: 800; line-height: 1.25; text-align: right; }

.places-list { display: grid; gap: 7px; }
.place-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--ink);
    text-align: left;
    background: transparent;
}
.place-row:hover { border-color: var(--line); background: #f4f8ef; }
.place-row__icon { display: grid; width: 36px; aspect-ratio: 1; place-items: center; border-radius: 11px; background: #edf4e6; font-size: 1.05rem; }
.place-row > span:nth-child(2) { display: grid; }
.place-row strong { font-size: 0.77rem; }
.place-row small { color: var(--ink-soft); font-size: 0.64rem; }
.place-row > span:last-child { color: #90a39d; }

.city-stories-summary { margin-top: 18px; padding: 13px; border: 1px solid rgba(26,106,82,.14); border-radius: 15px; background: linear-gradient(145deg, #f5f8e9, #fff8dc); }
.city-stories-summary[hidden] { display: none; }
.city-stories-summary__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.city-stories-summary__head div { display: grid; }
.city-stories-summary__head small { color: #916a17; font-size: .55rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.city-stories-summary__head strong { color: var(--green-900); font-size: .78rem; }
.city-stories-summary__head > span { padding: 3px 6px; border-radius: 999px; color: #1d765f; background: rgba(255,255,255,.78); font-size: .53rem; font-weight: 900; white-space: nowrap; }
.city-story-list { display: grid; gap: 7px; margin-top: 10px; }
.city-story-row { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; padding: 8px; border-radius: 11px; background: rgba(255,255,255,.72); }
.city-story-row__icon { display: grid; width: 32px; aspect-ratio: 1; place-items: center; border-radius: 10px; background: #e9f3df; }
.city-story-row > div { display: grid; min-width: 0; }
.city-story-row strong { color: var(--green-900); font-size: .66rem; }
.city-story-row small { overflow: hidden; color: var(--ink-soft); font-size: .56rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.city-story-row__dots { display: flex; gap: 4px; margin-top: 5px; }
.city-story-row__dots i { width: 18px; height: 4px; border-radius: 99px; background: #dfe5d7; }
.city-story-row__dots i.is-current { background: #d7a52d; }
.city-story-row__dots i.is-complete { background: #24856a; }
.city-story-row.is-complete { opacity: .72; }
.city-story-archive-link { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid rgba(31,121,94,.16); border-radius: 11px; color: var(--green-900); text-align: left; background: rgba(255,255,255,.86); }
.city-story-archive-link > span:first-child { grid-row: span 2; font-size: 1.1rem; }
.city-story-archive-link strong { font-size: .65rem; }
.city-story-archive-link small { grid-column: 2; color: var(--ink-soft); font-size: .53rem; }
.city-story-archive-link > span:last-child { grid-column: 3; grid-row: 1 / span 2; color: #7c928a; }
.city-story-archive-link:hover { border-color: #2c8c70; background: #fff; transform: translateY(-1px); }
.city-stories-summary > p { margin: 9px 0 0; color: #77765f; font-size: .53rem; line-height: 1.4; }

.story-archive-grid { display: grid; gap: 14px; margin: 16px 0 22px; }
.story-archive-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(150deg, #fff, #f6faef); box-shadow: 0 8px 24px rgba(32,76,61,.07); }
.story-archive-card > header { display: grid; grid-template-columns: 42px 1fr; gap: 11px; padding: 14px; }
.story-archive-card > header > span { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 13px; background: #e9f3df; font-size: 1.35rem; }
.story-archive-card > header div { min-width: 0; }
.story-archive-card > header small { color: #98701b; font-size: .57rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.story-archive-card h3 { margin: 2px 0 3px; color: var(--green-900); font-size: .86rem; }
.story-archive-card > header p { margin: 0; color: var(--ink-soft); font-size: .62rem; line-height: 1.45; }
.story-archive-card.is-complete > header > span { background: #def1e8; }
.story-archive-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 14px 12px; }
.story-archive-progress i { height: 5px; border-radius: 99px; background: #dfe6dc; }
.story-archive-progress i.is-current { background: #e0ae32; }
.story-archive-progress i.is-complete { background: #24856a; }
.story-chapter-list { display: grid; border-top: 1px solid var(--line); }
.story-chapter { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid rgba(31,80,64,.08); }
.story-chapter:last-child { border-bottom: 0; }
.story-chapter__portrait { width: 48px; height: 52px; overflow: hidden; border-radius: 12px; background: linear-gradient(#eaf5dd,#d5ead3); }
.story-chapter__portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.story-chapter__portrait span { display: grid; height: 100%; place-items: center; font-size: 1.2rem; }
.story-chapter > div:nth-child(2) { display: grid; min-width: 0; }
.story-chapter small { color: #7c8d86; font-size: .53rem; font-weight: 800; }
.story-chapter strong { color: var(--green-900); font-size: .67rem; }
.story-chapter p { margin: 3px 0 0; color: var(--ink-soft); font-size: .57rem; line-height: 1.45; }
.story-chapter button { padding: 7px 9px; border: 0; border-radius: 9px; color: #fff; background: #217b62; font-size: .56rem; font-weight: 900; white-space: nowrap; }
.story-chapter__status { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #1f765f; background: #e4f1e9; font-weight: 900; }
.story-chapter.is-locked { opacity: .58; }
.story-chapter.is-locked .story-chapter__portrait { filter: saturate(.45); }
.story-history { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.story-history li { display: grid; grid-template-columns: 32px 1fr; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.story-history li > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #f2f5e7; }
.story-history li div { display: grid; }
.story-history strong { color: var(--green-900); font-size: .62rem; }
.story-history small, .story-history-empty { color: var(--ink-soft); font-size: .56rem; line-height: 1.4; }
.story-history-empty { padding: 12px; border: 1px dashed var(--line); border-radius: 11px; background: #f8faf5; }

.city-scene-summary { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid rgba(41,118,94,.16); border-radius: 15px; background: linear-gradient(145deg, #eaf5ea, #fff9e8); }
.city-scene-summary[hidden] { display: none; }
.city-scene-summary__portraits { position: relative; width: 54px; height: 58px; }
.city-scene-summary__portraits img { position: absolute; bottom: 0; width: 39px; height: 55px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 4px 5px rgba(19,60,47,.18)); }
.city-scene-summary__portraits img:first-child { left: 0; }
.city-scene-summary__portraits img:last-child { right: 0; }
.city-scene-summary > div:nth-child(2) { display: grid; min-width: 0; }
.city-scene-summary small { color: #876919; font-size: .52rem; font-weight: 900; line-height: 1.35; }
.city-scene-summary strong { color: var(--green-900); font-size: .68rem; }
.city-scene-summary p { margin: 2px 0 0; color: var(--ink-soft); font-size: .55rem; line-height: 1.4; }
.city-scene-summary > button { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 0; border-radius: 10px; color: #fff; background: #247b62; font-size: .57rem; font-weight: 900; }

.city-weather-summary { display: grid; gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid rgba(69,142,168,.2); border-radius: 15px; background: linear-gradient(145deg, #e9f8fb, #fff8d9); }
.city-weather-summary[hidden] { display: none; }
.city-weather-summary__current { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 9px; align-items: center; }
.city-weather-summary__current > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: rgba(255,255,255,.8); box-shadow: 0 5px 13px rgba(29,91,105,.1); font-size: 1.35rem; }
.city-weather-summary__current > div { display: grid; min-width: 0; }
.city-weather-summary__current small { color: #397b8c; font-size: .52rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.city-weather-summary__current strong { color: var(--green-900); font-size: .7rem; }
.city-weather-summary__current p { margin: 2px 0 0; color: var(--ink-soft); font-size: .55rem; line-height: 1.4; }
.city-weather-forecast { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.city-weather-forecast > span { display: grid; justify-items: center; gap: 1px; padding: 6px 3px; border: 1px solid rgba(51,121,137,.1); border-radius: 9px; background: rgba(255,255,255,.62); }
.city-weather-forecast > span.is-current { border-color: #d5a52c; background: #fff6cf; box-shadow: inset 0 0 0 1px rgba(213,165,44,.18); }
.city-weather-forecast i { font-style: normal; font-size: .9rem; }
.city-weather-forecast small { color: #577771; font-size: .48rem; font-weight: 900; }
.city-season-chip { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid rgba(190,139,31,.17); border-radius: 11px; background: rgba(255,250,225,.8); }
.city-season-chip > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #fff; box-shadow: 0 4px 11px rgba(100,75,20,.08); font-size: 1.18rem; }
.city-season-chip > div { display: grid; min-width: 0; }
.city-season-chip small { color: #9a711b; font-size: .48rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.city-season-chip strong { color: var(--green-900); font-size: .66rem; }
.city-season-chip p { margin: 2px 0 0; color: var(--ink-soft); font-size: .53rem; line-height: 1.35; }
.city-season-action { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#277b62,#3b9072); font-size: .56rem; font-weight: 900; }
.city-season-action:hover { filter: brightness(1.05); transform: translateY(-1px); }
.city-weather-summary > p { margin: 0; color: #6f7d78; font-size: .51rem; line-height: 1.35; }

.season-activity-art { display: grid; min-height: 210px; margin: 14px 0; padding: 12px; place-items: center; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 35%, rgba(255,247,182,.92), transparent 44%), linear-gradient(#bce4cf 0 67%, #dfcd93 67%); }
.season-activity-art img { width: min(100%,430px); height: 220px; object-fit: contain; filter: drop-shadow(0 11px 10px rgba(22,66,52,.2)); }
.season-activity-steps { display: grid; gap: 8px; }
.season-activity-step { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 9px; align-items: center; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--green-900); text-align: left; background: #fff; }
.season-activity-step > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #fff; background: #278267; font-size: .58rem; font-weight: 900; }
.season-activity-step strong { font-size: .62rem; line-height: 1.35; }
.season-activity-step:hover:not(:disabled) { border-color: #2d8c70; background: #f2faf5; transform: translateX(2px); }
.season-activity-step.is-complete { opacity: .68; background: #edf6ef; }
.season-activity-step.is-complete > span { background: #d1a12d; }
.season-activity-progress { margin: 10px 0 0; color: var(--ink-soft); font-size: .56rem; font-weight: 800; }
.season-activity-closing { margin: 11px 0 0; padding: 11px 13px; border-left: 4px solid #d3a12d; border-radius: 0 11px 11px 0; color: var(--green-900); background: #fff6d5; font-size: .61rem; font-weight: 800; line-height: 1.45; }

.shared-scene-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 245px; margin: 15px 0 12px; padding: 18px 18px 0; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 15%, rgba(255,244,172,.82), transparent 34%), linear-gradient(#a9dfcf 0 62%, #e8d39f 62%); }
.shared-scene-stage::after { position: absolute; right: -6%; bottom: -32px; left: -6%; height: 70px; border-radius: 50%; background: rgba(71,137,80,.3); content: ""; }
.shared-scene-person { position: relative; z-index: 1; display: grid; align-content: end; justify-items: center; min-width: 0; }
.shared-scene-person img { width: min(145px,100%); height: 190px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 10px rgba(20,61,47,.24)); }
.shared-scene-person div { display: grid; width: 100%; padding: 7px; border-radius: 10px 10px 0 0; text-align: center; background: rgba(255,255,255,.88); backdrop-filter: blur(4px); }
.shared-scene-person small { overflow: hidden; color: var(--ink-soft); font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.shared-scene-person strong { color: var(--green-900); font-size: .64rem; }
.shared-scene-dialogue { display: grid; gap: 8px; }
.shared-scene-line { display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.shared-scene-line > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #278267; font-size: .58rem; font-weight: 900; }
.shared-scene-line div { display: grid; }
.shared-scene-line small { color: #8a6818; font-size: .53rem; font-weight: 900; }
.shared-scene-line p { margin: 1px 0 0; color: var(--ink); font-size: .62rem; line-height: 1.45; }
.shared-scene-dialogue blockquote { margin: 2px 0 0; padding: 11px 13px; border-left: 4px solid #d9aa32; border-radius: 0 11px 11px 0; color: var(--green-900); background: #fff7db; font-size: .61rem; font-weight: 800; line-height: 1.45; }
.shared-scene-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0; }
.shared-scene-actions button { padding: 9px; border: 1px solid #267d65; border-radius: 10px; color: #246f5b; background: #edf7f1; font-size: .56rem; font-weight: 900; }

@media (max-width: 520px) {
    .story-chapter { grid-template-columns: 40px minmax(0,1fr); }
    .story-chapter__portrait { width: 40px; height: 46px; }
    .story-chapter button, .story-chapter__status { grid-column: 2; justify-self: start; }
    .shared-scene-stage { min-height: 215px; padding-inline: 9px; }
    .shared-scene-person img { height: 160px; }
    .shared-scene-actions { grid-template-columns: 1fr; }
}

.milestone-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    margin-top: 20px;
    padding: 14px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(140deg, var(--green-800), var(--green-900));
}
.milestone-card__badge { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: var(--green-900); background: var(--banana); font-weight: 900; }
.milestone-card strong { font-size: 0.77rem; }
.milestone-card p { margin: 3px 0 9px; color: rgba(255,255,255,0.67); font-size: 0.65rem; }
.progress { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,0.15); }
.progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--banana); transition: width 250ms ease; }

.owner-plot-likes { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid rgba(24,85,64,.12); border-radius: 15px; background: linear-gradient(145deg,#f8fff7,#fff9df); }
.owner-plot-likes[hidden] { display: none; }
.owner-plot-likes .section-heading { margin: 0 0 2px; }
.owner-plot-like-row { display: grid; grid-template-columns: 22px 42px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px; border-radius: 11px; background: rgba(255,255,255,.88); box-shadow: 0 4px 14px rgba(20,76,59,.07); }
.owner-plot-like-row img { width: 42px; height: 42px; object-fit: contain; }
.owner-plot-like-row div { display: grid; min-width: 0; }
.owner-plot-like-row strong { overflow: hidden; color: var(--green-800); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.owner-plot-like-row small { color: var(--ink-soft); font-size: .48rem; }
.owner-plot-like-row > span:last-child { color: #c6495f; font-size: .55rem; font-weight: 900; }
.owner-plot-like-rank { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #76510c; background: #ffe68b; font-size: .52rem; font-weight: 900; }
.owner-plot-like-empty { display: grid; gap: 3px; margin: 0; padding: 10px; border-radius: 11px; color: var(--ink-soft); background: rgba(255,255,255,.82); font-size: .52rem; line-height: 1.45; }
.owner-plot-like-empty strong { color: var(--green-800); }
.region-shop { display: grid; gap: 9px; margin-top: 14px; padding: 12px; border: 1px solid rgba(185,126,24,.18); border-radius: 15px; background: linear-gradient(145deg,#fff9df,#f1fbeb); }
.region-shop[hidden] { display: none; }
.region-shop__head { display: flex; gap: 8px; align-items: end; justify-content: space-between; }
.region-shop__head div { display: grid; gap: 1px; }
.region-shop__head small { color: #98702c; font-size: .47rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.region-shop__head strong { color: var(--green-800); font-size: .73rem; }
.region-shop__head > span { color: var(--ink-soft); font-size: .48rem; font-weight: 800; }
.region-shop__items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.region-shop__item { position: relative; display: grid; min-width: 0; gap: 2px; padding: 6px; overflow: hidden; border: 1px solid rgba(24,85,64,.1); border-radius: 11px; color: var(--ink); background: rgba(255,255,255,.88); text-align: left; }
.region-shop__item.is-featured { border-color: #e2ae35; box-shadow: 0 0 0 2px rgba(255,211,83,.25); }
.region-shop__item img { width: 100%; height: 54px; object-fit: contain; }
.region-shop__item span { overflow: hidden; color: #9a6d18; font-size: .42rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.region-shop__item strong { overflow: hidden; font-size: .49rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.region-shop__item small { color: var(--ink-soft); font-size: .43rem; }
.region-shop > p { margin: 0; color: var(--ink-soft); font-size: .48rem; line-height: 1.4; }
.seasonal-catalog { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid rgba(46,124,104,.18); border-radius: 16px; background: linear-gradient(145deg,#e8f7ee,#fff8d4); }
.seasonal-catalog[hidden] { display: none; }
.seasonal-catalog__head { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 8px; align-items: center; }
.seasonal-catalog__head > span { display: grid; width: 36px; aspect-ratio: 1; place-items: center; border-radius: 11px; background: #fff; font-size: 1.1rem; }
.seasonal-catalog__head div { display: grid; min-width: 0; }
.seasonal-catalog__head small { color: #8c6a24; font-size: .44rem; font-weight: 900; text-transform: uppercase; }
.seasonal-catalog__head strong { overflow: hidden; color: var(--green-900); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.seasonal-catalog__head em { color: var(--green-700); font-size: .45rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.seasonal-catalog > p,.seasonal-catalog > footer { margin: 0; color: var(--ink-soft); font-size: .48rem; line-height: 1.4; }
.seasonal-catalog__items { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.seasonal-catalog__items button { display: grid; min-width: 0; gap: 2px; padding: 5px; overflow: hidden; border: 1px solid rgba(25,91,68,.1); border-radius: 10px; color: var(--ink); background: rgba(255,255,255,.88); text-align: left; }
.seasonal-catalog__items img { width: 100%; height: 45px; object-fit: contain; }
.seasonal-catalog__items strong { overflow: hidden; font-size: .43rem; text-overflow: ellipsis; white-space: nowrap; }
.seasonal-catalog__items small { color: var(--ink-soft); font-size: .39rem; white-space: nowrap; }

.catalog-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; align-items: end; margin: 10px 0 8px; }
.catalog-tools label { display: grid; gap: 4px; color: var(--ink-soft); font-size: .52rem; font-weight: 900; }
.catalog-tools input, .catalog-tools select { width: 100%; min-width: 0; height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: .62rem; outline: none; }
.catalog-tools input:focus, .catalog-tools select:focus { border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(60,169,119,.14); }
.catalog-tools > small { grid-column: 1 / -1; color: var(--green-700); font-size: .54rem; font-weight: 900; }
.catalog-empty { grid-column: 1 / -1; padding: 18px 12px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-soft); background: rgba(255,255,255,.74); text-align: center; font-size: .66rem; }
.catalog-filters { display: flex; gap: 6px; overflow-x: auto; margin: -3px 0 10px; padding: 3px 1px 7px; scrollbar-width: thin; }
.catalog-filter { display: inline-flex; flex: 0 0 auto; gap: 5px; align-items: center; min-height: 31px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: rgba(255,255,255,.88); font: inherit; font-size: .58rem; font-weight: 900; cursor: pointer; }
.catalog-filter small { display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 99px; color: var(--green-800); background: #e6f2d8; font-size: .5rem; }
.catalog-filter.is-active { border-color: var(--green-700); color: #fff; background: var(--green-700); box-shadow: 0 5px 13px rgba(24,98,76,.18); }
.catalog-filter.is-active small { color: var(--green-900); background: var(--banana); }
.catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.catalog-more { grid-column: 1 / -1; padding: 9px 10px; border: 1px solid rgba(27, 102, 78, .22); border-radius: 10px; color: var(--green-800); background: #eef6ee; font-size: .68rem; font-weight: 900; cursor: pointer; }
.catalog-more small { display: block; color: var(--ink-soft); font-size: .56rem; font-weight: 700; }
.catalog-more:hover { background: #e3f0e4; }
.plot-stock-list { display: grid; gap: 5px; }
.plot-stock-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 7px 5px 5px; border: 1px solid rgba(22, 76, 56, .12); border-radius: 11px; background: #fff; }
.plot-stock-row.is-selected { border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(60, 169, 119, .16); }
.plot-stock-row__thumb { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border-radius: 9px; background: #eef6ee; }
.plot-stock-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.plot-stock-row strong { display: block; overflow: hidden; color: var(--green-900); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.plot-stock-row small { color: var(--ink-soft); font-size: .58rem; }
.plot-stock-row .life-action { width: auto; min-height: 30px; margin: 0; padding: 4px 9px; font-size: .6rem; }
.milestone-card[hidden] { display: none; }
#place-detail .place-detail__art { height: 120px; margin: 4px -4px 10px; border-radius: 14px; }
#place-detail .panel-copy { margin: 0 0 10px; font-size: .72rem; line-height: 1.45; }
#place-detail .place-primary-action { padding: 10px; margin-bottom: 10px; font-size: .74rem; }
#place-detail .place-primary-action[hidden] { display: none; }
#place-detail .place-offers { margin: 0; padding: 0; border: 0; background: none; }
#place-detail .place-offers > strong { font-size: .72rem; }
#place-detail .place-offers ul { gap: 4px; margin-top: 6px; }
#place-detail .city-host-card { grid-template-columns: 70px minmax(0, 1fr); align-items: start; gap: 9px; margin: 0; padding: 9px; }
#place-detail .city-host-card > img { width: 70px; height: 96px; }
#place-detail .city-host-card strong { font-size: .78rem; }
#place-detail .city-host-card p { margin-top: 4px; font-size: .64rem; line-height: 1.38; }
#place-detail .city-host-card .city-host-card__rhythm { font-size: .58rem; }
#place-detail .city-host-card__limit { font-size: .56rem; }
#world-panel .section-heading { margin: 12px 0 6px; }
#world-panel .section-heading h3 { white-space: nowrap; }
#world-panel .feature-card { padding: 8px 10px; margin: 0; }
#world-panel .places-list { gap: 4px; }
#world-panel .place-row { padding: 5px 8px; }
#world-panel .place-row__icon { width: 34px; height: 34px; }
#world-panel .place-row strong { font-size: .7rem; }
#world-panel .place-row small { font-size: .58rem; }
#world-panel .milestone-card { margin-top: 10px; padding: 9px; }
#world-panel .city-stories-summary, #world-panel .city-scene-summary, #world-panel .city-weather-summary { margin-top: 6px; }
#plot-panel .section-heading { margin: 12px 0 6px; }
#plot-panel .section-heading h3 { white-space: nowrap; }
#plot-panel .plot-editor { gap: 6px; padding: 9px; margin: 2px 0 0; }
#plot-panel .plot-editor label { gap: 4px; font-size: .68rem; }
#plot-panel .plot-editor select { min-height: 36px; font-size: .72rem; }
#plot-panel .plot-editor .life-action { min-width: 40px; min-height: 38px; }
#plot-panel .plot-editor p { font-size: .62rem; line-height: 1.35; }
#plot-panel .catalog-tools { margin: 0 0 6px; }
#plot-panel .catalog-tools label { font-size: .6rem; }
#plot-panel .catalog-tools > small { font-size: .6rem; }
#plot-panel .catalog-filters { margin: 0 0 8px; }
#plot-panel .catalog-filter { font-size: .64rem; }
#plot-panel .catalog-card { padding: 8px; }
#plot-panel .catalog-card__preview { height: 62px; margin: -2px -2px 6px; }
#plot-panel .catalog-card strong { font-size: .68rem; }
#plot-panel .catalog-card__meta { margin: 2px 0 6px; font-size: .58rem; }
#plot-panel .region-shop, #plot-panel .seasonal-catalog, #plot-panel .owner-plot-likes { margin-top: 6px; padding: 9px; }
#plot-panel .region-shop__head small { font-size: .56rem; }
#plot-panel .region-shop__head strong { font-size: .74rem; }
#plot-panel .region-shop__head > span { font-size: .56rem; }
#plot-panel .region-shop > p { margin: 0; font-size: .58rem; }
#plot-panel .region-shop__item span { font-size: .5rem; }
#plot-panel .region-shop__item strong { font-size: .58rem; }
#plot-panel .region-shop__item small { font-size: .52rem; }
#plot-panel .seasonal-catalog__head small { font-size: .56rem; }
#plot-panel .seasonal-catalog__head em { font-size: .56rem; }
#plot-panel .seasonal-catalog > p, #plot-panel .seasonal-catalog footer { margin: 0; font-size: .6rem; }
#plot-panel .seasonal-catalog__items strong { font-size: .56rem; }
#plot-panel .seasonal-catalog__items small { font-size: .52rem; }
.catalog-card {
    position: relative;
    overflow: hidden;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.catalog-card.is-selected { border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(60,169,119,0.16); }
.catalog-card__preview { display: grid; height: 76px; min-height: 0; place-items: center; overflow: hidden; margin: -3px -3px 10px; border-radius: 10px; background: linear-gradient(145deg, #eef8df, #fff5d1); font-size: 2rem; }
.catalog-card__preview img {
    display: block;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(31, 78, 52, 0.16));
}
.catalog-card strong { display: block; font-size: 0.73rem; }
.catalog-card__meta { display: flex; justify-content: space-between; margin: 3px 0 8px; color: var(--ink-soft); font-size: 0.58rem; font-weight: 800; }
.catalog-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.catalog-card button { padding: 7px 5px; border: 0; border-radius: 8px; font-size: 0.61rem; font-weight: 900; }
.catalog-card [data-buy] { color: #5a4200; background: #fff0a8; }
.catalog-card [data-place] { color: #fff; background: var(--green-700); }
.catalog-card button:disabled { cursor: not-allowed; opacity: 0.42; }
.visitor-plot-summary { display: grid; gap: 9px; margin-top: 14px; }
.visitor-plot-summary[hidden] { display: none; }
.visitor-plot-summary__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.visitor-plot-summary__stats span { display: grid; padding: 10px 7px; border: 1px solid var(--line); border-radius: 12px; text-align: center; background: #fff; }
.visitor-plot-summary__stats strong { font-size: .88rem; }
.visitor-plot-summary__stats small { color: var(--ink-soft); font-size: .5rem; }
.visitor-plot-like-summary { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid #f0cbd4; border-radius: 12px; background: linear-gradient(135deg, #fff2f5, #fffdf3); }
.visitor-plot-like-summary > span { display: grid; width: 34px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #bd526e; background: #ffdbe3; font-size: 1rem; }
.visitor-plot-like-summary strong, .visitor-plot-like-summary small { display: block; }
.visitor-plot-like-summary strong { color: #71404d; font-size: .62rem; }
.visitor-plot-like-summary small { margin-top: 2px; color: #8a6972; font-size: .49rem; }
.game.is-region-preview .owner-plot-control { display: none; }
.region-preview-summary { display: grid; gap: 10px; margin-top: 14px; }
.region-preview-summary[hidden] { display: none; }
.region-preview-summary__scene { position: relative; height: 116px; overflow: hidden; border: 1px solid rgba(24,85,64,.12); border-radius: 15px; background: linear-gradient(180deg,#8fd5e6 0 54%,#a7d774 55%); }
.region-preview-summary__scene > img { position: absolute; z-index: 2; right: -3%; bottom: -10%; width: 106%; height: 96%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 7px rgba(19,70,55,.16)); }
.region-preview-summary__scene::before { position: absolute; right: -6%; bottom: -24px; left: -6%; height: 58px; border-radius: 50%; background: #ead49b; box-shadow: inset 0 8px rgba(255,255,255,.25); content: ""; }
.region-preview-summary__scene::after { position: absolute; right: 17%; bottom: 13px; left: 17%; height: 18px; border: 5px solid #aa7b38; border-top: 0; border-radius: 0 0 14px 14px; content: ""; }
.region-preview-summary__scene[data-region-theme="sonnenkueste"] { background: linear-gradient(180deg,#99dded 0 55%,#c8dc7a 56%); }
.region-preview-summary__scene[data-region-theme="sonnenkueste"]::before { border-radius: 16px 16px 0 0; background: #e1bd67; box-shadow: inset 0 8px #f5dc97; }
.region-preview-summary__scene[data-region-theme="regenwald"] { background: linear-gradient(180deg,#65b8a9 0 48%,#4f8c58 49%); }
.region-preview-summary__scene[data-region-theme="regenwald"]::before { background: #50794a; box-shadow: inset 0 9px #71955f; }
.region-preview-summary__scene[data-region-theme="kronenriff"] { background: linear-gradient(180deg,#75cada 0 51%,#5f9d86 52%); }
.region-preview-summary__scene[data-region-theme="kronenriff"]::before { border-radius: 18px 18px 0 0; background: #eadcb4; box-shadow: inset 0 8px #faf0d1; }
.region-preview-summary__scene > span { position: absolute; z-index: 4; top: 10px; left: 10px; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(13,65,53,.78); font-size: .52rem; font-weight: 900; }
.region-preview-summary__facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.region-preview-summary__facts span { display: grid; gap: 2px; padding: 9px 5px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: center; }
.region-preview-summary__facts strong { color: var(--green-800); font-size: .65rem; }
.region-preview-summary__facts small { color: var(--ink-soft); font-size: .46rem; }
.region-preview-summary ul { display: grid; gap: 6px; margin: 0; padding: 10px 10px 10px 25px; border-radius: 12px; color: var(--ink-soft); background: #f3f8ef; font-size: .57rem; line-height: 1.4; }
.visitor-plot-tip { margin: 0; padding: 10px; border: 1px solid rgba(42,125,97,.18); border-radius: 12px; color: var(--green-800); background: #edf7df; font-size: .59rem; line-height: 1.45; }

.text-button { margin: -4px 0 20px; padding: 0; border: 0; color: var(--green-700); background: none; font-size: 0.75rem; font-weight: 900; }
.place-detail__art { height: 190px; margin: 0 -8px 20px; border-radius: 18px; background: linear-gradient(160deg, #b9e9f0, #e9f6cd); background-size: contain; background-position: center; background-repeat: no-repeat; }
.city-host-card { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 13px; align-items: center; margin: 17px 0; padding: 12px; overflow: hidden; border: 1px solid rgba(25,91,70,.16); border-radius: 18px; background: linear-gradient(145deg, #f5f8e9, #fff8dc); box-shadow: 0 10px 24px rgba(28,66,48,.09); }
.city-host-card[hidden] { display: none; }
.city-host-card > img { display: block; width: 106px; height: 142px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 7px rgba(25,45,32,.22)); }
.city-host-card > div { min-width: 0; }
.city-host-card small, .city-host-card strong { display: block; }
.city-host-card small { color: #8b6819; font-size: .56rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.city-host-card strong { margin-top: 3px; color: var(--green-900); font-size: .94rem; }
.city-host-card p { margin: 7px 0 0; color: var(--ink-soft); font-size: .69rem; line-height: 1.45; }
.city-host-card__meta { display: grid; justify-items: start; gap: 5px; }
.city-host-card__meta small { min-width: 0; }
.city-host-card__meta span { flex: 0 0 auto; padding: 3px 7px; border: 1px solid rgba(26,106,82,.14); border-radius: 999px; color: #1d765f; background: rgba(255,255,255,.72); font-size: .54rem; font-weight: 900; white-space: nowrap; }
.city-host-card .city-host-card__dialogue { color: var(--ink-soft); }
.city-host-card .city-host-card__rhythm { color: #84641f; font-size: .61rem; font-weight: 800; }
.city-host-story { margin-top: 10px; padding: 9px; border: 1px solid rgba(215,165,45,.32); border-radius: 11px; background: linear-gradient(145deg, rgba(255,246,196,.92), rgba(255,255,255,.82)); }
.city-host-card .city-host-story small { color: #8a6413; font-size: .51rem; }
.city-host-card .city-host-story strong { margin-top: 3px; font-size: .68rem; }
.city-host-card .city-host-story p { margin-top: 5px; font-size: .61rem; }
.city-host-story button { width: 100%; margin-top: 7px; padding: 7px 8px; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #d09a25, #9a6c12); font: inherit; font-size: .6rem; font-weight: 900; cursor: pointer; }
.city-host-story button:disabled { color: #77705d; background: #e3dfd0; cursor: default; }
.city-host-card .city-host-card__encounter { margin-top: 9px; padding: 8px 9px; border: 1px solid rgba(26,106,82,.12); border-radius: 10px; color: #245d4e; background: rgba(255,255,255,.72); }
.city-host-card .city-host-card__encounter--pending { color: #6d735d; background: rgba(247,244,217,.72); }
.city-encounter-action { width: 100%; margin-top: 9px; padding: 8px 10px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #24856a, #176850); box-shadow: 0 5px 12px rgba(24,104,80,.18); font: inherit; font-size: .65rem; font-weight: 900; cursor: pointer; }
.city-encounter-action:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
.city-encounter-action:disabled { color: #727b6d; background: #dce2d6; box-shadow: none; cursor: default; }
.city-host-card .city-host-card__limit { margin-top: 5px; color: #77765f; font-size: .53rem; letter-spacing: 0; text-transform: none; }

@media (max-width: 560px) {
    .city-host-card { grid-template-columns: 82px minmax(0, 1fr); }
    .city-host-card > img { width: 82px; height: 124px; align-self: start; }
    .city-host-card__meta span { display: inline-block; }
}
.place-offers { margin: 20px 0; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #f7f8ef; }
.place-offers strong { font-size: 0.78rem; }
.place-offers ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.place-offers button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font-size: 0.75rem; font-weight: 750; text-align: left; }
.place-offers button:hover { border-color: #49a873; background: #effaf1; }
.place-offers button span { color: #2f8a57; }
.place-offers__closed { color: var(--ink-soft); font-size: 0.75rem; line-height: 1.6; }
.place-primary-action { width: 100%; padding: 12px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--green-700), var(--green-900)); box-shadow: 0 8px 18px rgba(17,74,55,.2); font-weight: 950; }

.life-panel { padding-bottom: 30px; }
.life-hero {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 13px;
    align-items: center;
    margin-bottom: 18px;
    padding: 15px;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(140deg, var(--green-700), var(--green-900));
}
.life-hero__icon {
    display: grid;
    width: 54px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 17px;
    color: var(--green-900);
    background: var(--banana);
    font-size: 1.7rem;
}
.life-hero strong { display: block; font-size: 0.88rem; }
.life-hero small { display: block; color: rgba(255,255,255,0.68); font-size: 0.66rem; line-height: 1.4; }

.life-grid { display: grid; gap: 9px; }
.prestige-panel {
    padding: 14px;
    border: 1px solid rgba(215, 171, 34, 0.35);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff8d7, #ffffff 58%, #edf7e8);
    box-shadow: 0 10px 24px rgba(36, 88, 61, 0.08);
}
.prestige-hero {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.prestige-hero__icon {
    display: grid;
    width: 48px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, #ffe87f, #ffc947);
    box-shadow: inset 0 0 0 1px rgba(146, 103, 0, 0.12);
    font-size: 1.45rem;
}
.prestige-hero small, .prestige-hero strong, .prestige-hero span { display: block; }
.prestige-hero small { color: var(--ink-soft); font-size: 0.56rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; }
.prestige-hero strong { margin: 1px 0; color: var(--green-900); font-size: 0.9rem; }
.prestige-hero span { color: var(--green-700); font-size: 0.68rem; font-weight: 900; }
.prestige-hero > b { max-width: 105px; color: #7d661d; font-size: 0.58rem; line-height: 1.35; text-align: right; }
.prestige-meter { height: 9px; margin: 12px 0; background: rgba(29, 85, 57, 0.1); }
.prestige-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.prestige-source {
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
    padding: 7px 8px;
    border: 1px solid rgba(22, 76, 58, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--ink-soft);
    font-size: 0.58rem;
    font-weight: 800;
}
.prestige-source > span:first-child { color: var(--green-700); font-size: 0.82rem; text-align: center; }
.prestige-source strong { color: var(--green-800); font-size: 0.64rem; }
.prestige-details { margin-top: 10px; }
.prestige-details summary { color: var(--green-700); cursor: pointer; font-size: 0.64rem; font-weight: 900; }
.prestige-ladder { display: grid; gap: 5px; margin-top: 9px; }
.prestige-tier {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(22, 76, 58, 0.09);
    border-radius: 11px;
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.68);
}
.prestige-tier.is-reached { opacity: 1; }
.prestige-tier.is-current { border-color: #e0ae1c; background: #fff7d3; box-shadow: inset 3px 0 0 #efbd2e; }
.prestige-tier__icon { display: grid; width: 34px; aspect-ratio: 1; place-items: center; border-radius: 10px; background: #eef4e9; font-size: 1rem; }
.prestige-tier strong, .prestige-tier small { display: block; }
.prestige-tier strong { color: var(--green-900); font-size: 0.66rem; }
.prestige-tier small { margin-top: 2px; color: var(--ink-soft); font-size: 0.54rem; }
.prestige-tier b { color: var(--green-700); font-size: 0.57rem; white-space: nowrap; }
.region-card { overflow: hidden; border-left: 4px solid transparent; }
.region-card.is-current {
    border-left-color: var(--yellow-500);
    background: linear-gradient(135deg, #fffdf6, #fff7d9);
}
.region-card__scene { position: relative; height: 76px; margin: -12px -12px 10px; overflow: hidden; background: linear-gradient(180deg, #87d4e7 0 56%, #91c86c 57%); isolation: isolate; }
.region-card__scene::before, .region-card__scene::after { position: absolute; z-index: 2; bottom: -14px; width: 52%; height: 42px; border-radius: 50%; background: #e7d29a; content: ""; }
.region-card__scene::before { left: -8%; transform: rotate(4deg); }
.region-card__scene::after { right: -8%; transform: rotate(-4deg); }
.region-card__scene i { position: absolute; z-index: 4; bottom: 4px; width: 15px; height: 34px; border: 4px solid #865d2e; border-top: 0; border-radius: 4px; }
.region-card__scene i:first-of-type { left: 16%; }
.region-card__scene i:nth-of-type(2) { right: 16%; }
.region-card__scene i::after { position: absolute; top: -8px; left: 50%; width: 24px; height: 13px; border-radius: 70% 20% 70% 20%; background: #3b995e; content: ""; transform: translateX(-50%) rotate(-8deg); }
.region-card__scene b { position: absolute; z-index: 6; right: 8px; top: 8px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; color: #fff; background: rgba(13,66,53,.72); font-size: .47rem; }
.region-card__sun { position: absolute; top: 9px; left: 11%; width: 18px; aspect-ratio: 1; border-radius: 50%; background: #ffe17a; box-shadow: 0 0 20px rgba(255,225,122,.7); }
.region-card[data-region-theme="sonnenkueste"] .region-card__scene { background: linear-gradient(180deg,#9bdded 0 54%,#c8dc7a 55%); }
.region-card[data-region-theme="sonnenkueste"] .region-card__scene::before, .region-card[data-region-theme="sonnenkueste"] .region-card__scene::after { border-radius: 14px 14px 0 0; background: #e2bd68; box-shadow: inset 0 5px #f4d98a; }
.region-card[data-region-theme="sonnenkueste"] .region-card__scene i { width: 9px; height: 28px; border-color: #c69739; background: #5cc7c5; }
.region-card[data-region-theme="regenwald"] .region-card__scene { background: linear-gradient(180deg,#68bcae 0 48%,#579b60 49%); }
.region-card[data-region-theme="regenwald"] .region-card__scene::before, .region-card[data-region-theme="regenwald"] .region-card__scene::after { bottom: -7px; height: 54px; background: #527c48; box-shadow: inset 0 7px #70975c; }
.region-card[data-region-theme="regenwald"] .region-card__scene i { width: 22px; height: 46px; border: 0; border-radius: 65% 15% 65% 20%; background: #216347; transform: rotate(-17deg); }
.region-card[data-region-theme="regenwald"] .region-card__scene i:nth-of-type(2) { transform: rotate(17deg); }
.region-card[data-region-theme="regenwald"] .region-card__scene i::after { width: 30px; height: 18px; background: #48a45c; }
.region-card[data-region-theme="kronenriff"] .region-card__scene { background: linear-gradient(180deg,#78ccdd 0 51%,#6aa98c 52%); }
.region-card[data-region-theme="kronenriff"] .region-card__scene::before, .region-card[data-region-theme="kronenriff"] .region-card__scene::after { bottom: -9px; height: 48px; border-radius: 20px 20px 0 0; background: #e8d8aa; box-shadow: inset 0 7px #f7edca; }
.region-card[data-region-theme="kronenriff"] .region-card__scene i { width: 10px; height: 32px; border-color: #d5b96e; border-radius: 8px; background: #75d1cf; box-shadow: 0 0 10px rgba(117,209,207,.8); }
.care-panel {
    overflow: hidden;
    border: 1px solid rgba(43, 118, 77, 0.24);
    border-radius: 18px;
    background: linear-gradient(145deg, #f3fbe8, #ffffff 58%, #e8f7ee);
    box-shadow: 0 11px 26px rgba(24, 81, 54, 0.09);
}
.care-section-heading { align-items: flex-start; gap: 10px; }
.care-section-heading h3 { flex: 1 1 auto; }
.care-section-heading > span { max-width: 48%; line-height: 1.25; text-align: right; }
.care-panel__visual {
    position: relative;
    height: 142px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,247,166,0.9) 0 8%, transparent 9%),
        linear-gradient(180deg, #aee8ed 0 57%, #79bd55 58% 100%);
}
.care-panel__visual::after { position: absolute; right: -8%; bottom: -32px; left: -8%; height: 66px; border-radius: 50%; background: #5da345; content: ""; }
.care-panel__visual img { position: absolute; z-index: 2; bottom: -9px; width: 46%; height: 135px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(29, 74, 42, 0.22)); }
.care-panel__visual img:first-child { left: 7%; }
.care-panel__visual img:nth-child(2) { right: 8%; width: 42%; height: 112px; }
.care-panel__visual > span { position: absolute; z-index: 4; top: 10px; right: 10px; padding: 6px 9px; border: 1px solid rgba(255,255,255,0.65); border-radius: 999px; color: #234d3d; background: rgba(255,255,255,0.84); box-shadow: 0 4px 12px rgba(32,76,52,0.13); font-size: 0.58rem; font-weight: 900; backdrop-filter: blur(5px); }
.care-panel__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: -1px 0 0; background: #dcebdd; }
.care-panel__summary > div { padding: 10px 8px; background: rgba(255,255,255,0.92); text-align: center; }
.care-panel__summary small, .care-panel__summary strong { display: block; }
.care-panel__summary small { color: #789087; font-size: 0.5rem; font-weight: 800; }
.care-panel__summary strong { margin-top: 2px; color: var(--green-800); font-size: 0.72rem; }
.care-panel > p { margin: 8px 13px 10px; color: var(--ink-soft); font-size: 0.59rem; line-height: 1.45; }
.care-meter { height: 8px; margin: 11px 13px 0; }
.care-action-list { display: grid; gap: 6px; padding: 0 12px 11px; }
.care-action { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid rgba(31, 106, 68, 0.12); border-radius: 11px; background: rgba(255,255,255,0.86); }
.care-action > span { display: grid; width: 34px; aspect-ratio: 1; place-items: center; border-radius: 10px; background: #eaf5df; font-size: 1rem; }
.care-action strong, .care-action small { display: block; }
.care-action strong { color: var(--green-900); font-size: 0.64rem; }
.care-action small { margin-top: 2px; color: var(--ink-soft); font-size: 0.52rem; line-height: 1.35; }
.care-action .life-action { min-width: 65px; padding-inline: 7px; }
.care-action.is-complete { border-color: rgba(224,174,28,0.35); background: #fff9df; }
.care-round-progress { display: flex; justify-content: space-between; gap: 9px; padding: 10px 12px; color: #fff; background: linear-gradient(135deg, var(--green-700), var(--green-900)); font-size: 0.54rem; }
.care-round-progress strong { max-width: 55%; color: #ffe070; text-align: right; }
.city-board { overflow: hidden; border: 1px solid rgba(30, 96, 68, 0.2); border-radius: 17px; background: linear-gradient(145deg, #f8f4df, #fff 52%, #edf7ed); box-shadow: 0 10px 24px rgba(28, 77, 52, 0.08); }
.city-board__header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 11px 12px; color: #fff; background: linear-gradient(135deg, #1d7058, #103e34); }
.city-board__header > span { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,0.18); border-radius: 13px; background: rgba(255,255,255,0.1); font-size: 1.25rem; }
.city-board__header strong, .city-board__header small { display: block; }
.city-board__header strong { font-size: 0.72rem; }
.city-board__header small { margin-top: 2px; color: rgba(255,255,255,0.65); font-size: 0.53rem; }
.city-board__header em { color: #ffe06c; font-size: 0.54rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.city-job-list { display: grid; gap: 6px; padding: 10px; }
.city-job { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid rgba(34, 93, 65, 0.12); border-radius: 12px; background: rgba(255,255,255,0.88); }
.city-job__icon { display: grid; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #fff3b4, #f2d66e); font-size: 1.1rem; }
.city-job h3 { font-size: 0.66rem; }
.city-job p { margin: 2px 0; color: var(--ink-soft); font-size: 0.52rem; line-height: 1.35; }
.city-job > div > small { color: var(--green-700); font-size: 0.5rem; font-weight: 800; }
.city-job > .life-action { min-width: 68px; padding-inline: 7px; }
.city-job.is-locked { opacity: 0.62; background: #f3f5ef; }
.city-history { margin: 0; padding: 0 10px 10px; }
.economy-guard {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(35, 105, 73, 0.2);
    border-radius: 15px;
    background: linear-gradient(135deg, #edf8e7, #fffdf0);
}
.economy-guard > span { display: grid; width: 40px; aspect-ratio: 1; place-items: center; border-radius: 12px; background: #fff3b5; font-size: 1.2rem; }
.economy-guard strong, .economy-guard p { display: block; }
.economy-guard strong { color: var(--green-900); font-size: 0.68rem; }
.economy-guard p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.53rem; line-height: 1.4; }
.economy-guard em { padding: 6px 8px; border-radius: 999px; color: #fff; background: var(--green-700); font-size: 0.53rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.career-list, .business-list, .business-order-list { display: grid; gap: 8px; }
.career-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}
.career-card.is-active { border-color: rgba(224,174,28,0.52); background: linear-gradient(135deg, #fff8d7, #fff); box-shadow: inset 3px 0 0 #efbd2e; }
.career-card__icon { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #e8f5df, #fff4bd); font-size: 1.25rem; }
.career-card__body { min-width: 0; }
.career-card h3 { margin: 0; color: var(--green-900); font-size: 0.71rem; }
.career-card p { margin: 2px 0 5px; color: var(--ink-soft); font-size: 0.53rem; line-height: 1.35; }
.career-level { color: var(--green-700); font-size: 0.55rem; font-weight: 900; white-space: nowrap; }
.career-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.career-progress .life-meter { height: 6px; margin: 0; }
.career-progress small, .career-perk { color: #678078; font-size: 0.48rem; }
.career-perk { display: block; margin-top: 4px; color: #8c6d11; font-weight: 900; }
.career-card > .life-action { max-width: 92px; padding-inline: 7px; }
.prepared-order {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 11px;
    border: 1px solid rgba(224,174,28,0.5);
    border-radius: 15px;
    background: linear-gradient(135deg, #fff4af, #fffbed);
    box-shadow: 0 8px 20px rgba(118,89,14,0.1);
}
.prepared-order > span { display: grid; width: 44px; aspect-ratio: 1; place-items: center; border-radius: 13px; background: #fff; font-size: 1.3rem; }
.prepared-order small, .prepared-order strong { display: block; }
.prepared-order small { color: #8b721d; font-size: 0.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; }
.prepared-order strong { color: var(--green-900); font-size: 0.72rem; }
.prepared-order p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.52rem; }
.business-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(27,74,51,0.08); }
.business-card.is-locked { background: #fbfcf8; }
.business-card__visual { position: relative; height: 154px; overflow: hidden; background: radial-gradient(circle at 50% 22%, #fff9d5, #dcefd8 68%, #bad79f); }
.business-card__visual::after { position: absolute; right: -8%; bottom: -34px; left: -8%; height: 62px; border-radius: 50%; background: #78b85c; content: ""; }
.business-card__visual img { position: relative; z-index: 2; width: 100%; height: 154px; object-fit: contain; filter: drop-shadow(0 9px 7px rgba(29,64,43,0.23)); }
.business-card__visual > span { position: absolute; z-index: 4; right: 10px; bottom: 9px; padding: 5px 8px; border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; color: var(--green-900); background: rgba(255,255,255,0.86); font-size: 0.53rem; font-weight: 900; backdrop-filter: blur(5px); }
.business-card__body { padding: 12px; }
.business-card__body h3 { margin: 0; font-size: 0.82rem; }
.business-card__body > p { margin: 4px 0 9px; color: var(--ink-soft); font-size: 0.6rem; line-height: 1.45; }
.business-card__body > .life-action { margin-top: 9px; }
.business-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 9px 0; }
.business-stats > span { padding: 7px 4px; border-radius: 10px; background: #f0f6ec; text-align: center; }
.business-stats strong, .business-stats small { display: block; }
.business-stats strong { color: var(--green-800); font-size: 0.7rem; }
.business-stats small { color: var(--ink-soft); font-size: 0.46rem; }
.business-subheading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 13px 0 7px; }
.business-subheading strong { color: var(--green-900); font-size: 0.66rem; }
.business-subheading span { color: var(--ink-soft); font-size: 0.48rem; font-weight: 800; text-align: right; }
.business-equipment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.business-equipment { overflow: hidden; border: 1px solid rgba(28,90,62,0.12); border-radius: 13px; background: #fbfdf8; }
.business-equipment.is-owned { border-color: rgba(224,174,28,0.5); background: linear-gradient(145deg, #fff9dd, #fff); box-shadow: inset 0 3px 0 #efbd2e; }
.business-equipment__visual { position: relative; height: 98px; overflow: hidden; background: radial-gradient(circle at 50% 24%, #fff9db, #e7f3df); }
.business-equipment__visual img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(26,62,40,0.18)); }
.business-equipment__visual > span { position: absolute; top: 7px; right: 7px; display: grid; width: 23px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: var(--green-700); font-size: 0.62rem; font-weight: 900; }
.business-equipment > div:last-child { padding: 8px; }
.business-equipment h4 { margin: 0; color: var(--green-900); font-size: 0.6rem; }
.business-equipment .life-card__top > strong { color: var(--green-700); font-size: 0.49rem; white-space: nowrap; }
.business-equipment p { min-height: 39px; margin: 3px 0; color: var(--ink-soft); font-size: 0.48rem; line-height: 1.35; }
.business-equipment small { display: block; color: #806b24; font-size: 0.46rem; font-weight: 800; }
.business-equipment .life-action { width: 100%; margin-top: 7px; }
.business-order { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid rgba(27,91,62,0.11); border-radius: 12px; background: #fafdF8; }
.business-order > span { display: grid; width: 36px; aspect-ratio: 1; place-items: center; border-radius: 10px; background: #fff1b0; font-size: 1rem; }
.business-order h4 { margin: 0; color: var(--green-900); font-size: 0.62rem; }
.business-order .life-card__top > strong { color: var(--green-700); font-size: 0.52rem; white-space: nowrap; }
.business-order p { margin: 2px 0; color: var(--ink-soft); font-size: 0.49rem; line-height: 1.3; }
.business-order small { color: #7d6c2b; font-size: 0.47rem; font-weight: 800; }
.business-order > .life-action { min-width: 70px; padding-inline: 6px; }
.business-upgrade { display: grid; justify-items: start; width: 100%; margin-top: 9px; text-align: left; }
.business-upgrade small { margin-top: 2px; font-size: 0.47rem; opacity: 0.72; }
.business-maxed { display: block; margin-top: 9px; padding: 8px; border-radius: 10px; color: var(--green-700); background: #eaf5e5; font-size: 0.58rem; font-weight: 900; text-align: center; }
.life-action--yard { width: 100%; margin: 8px 0 3px; color: #fff; background: linear-gradient(145deg, #21856a, #12604e); box-shadow: 0 6px 14px rgba(18,96,78,0.18); }

.business-yard-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; color: #fff; background: #286d54; isolation: isolate; }
.business-yard-toolbar { position: absolute; z-index: 20; top: 16px; right: 16px; left: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 13px; border: 1px solid rgba(255,255,255,0.36); border-radius: 16px; background: rgba(9,52,43,0.84); box-shadow: 0 10px 30px rgba(7,34,28,0.22); backdrop-filter: blur(10px); }
.business-yard-toolbar.is-visitor { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.business-yard-toolbar button { padding: 8px 11px; border: 0; border-radius: 10px; color: #173b34; background: var(--banana); font-size: 0.7rem; font-weight: 900; }
.business-yard-toolbar div { display: grid; min-width: 0; }
.business-yard-toolbar strong { overflow: hidden; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
.business-yard-toolbar span, .business-yard-toolbar em { color: rgba(255,255,255,0.78); font-size: 0.58rem; font-style: normal; }
.business-yard-toolbar em { font-weight: 800; white-space: nowrap; }
.business-yard-viewport { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #28513e; }
.business-yard-viewport::before { position: absolute; inset: -20px; content: ""; background: var(--yard-backdrop) center / cover; filter: blur(16px) brightness(.62); }
.business-yard-scene { position: relative; overflow: hidden; isolation: isolate; border-radius: 12px; box-shadow: 0 12px 35px #14302270; cursor: crosshair; }
.yard-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; animation: yard-breathe 18s ease-in-out infinite alternate; }
.yard-building, .yard-equipment { position: absolute; z-index: 6; padding: 0; border: 0; background: transparent; filter: drop-shadow(0 12px 9px rgba(24,52,32,0.25)); transition: transform 180ms ease, filter 180ms ease; }
.yard-building:hover, .yard-equipment:hover { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 16px 11px rgba(24,52,32,0.3)) brightness(1.04); }
.yard-building { top: 1%; left: 50%; width: 40%; transform: translateX(-50%); }
.yard-building:hover { transform: translateX(-50%) translateY(-3px) scale(1.025); }
.yard-building img, .yard-equipment img { display: block; width: 100%; max-height: 100%; object-fit: contain; }
.yard-building img { animation: yard-building-breathe 5.5s ease-in-out infinite; }
.yard-door-light { position: absolute; z-index: 2; bottom: 20%; left: 48%; width: 9%; height: 16%; border-radius: 50% 50% 12% 12%; background: rgba(255,220,91,0.42); box-shadow: 0 0 22px 8px rgba(255,214,60,0.24); opacity: 0.58; pointer-events: none; animation: yard-door-glow 3.2s ease-in-out infinite; }
.yard-building span { position: absolute; right: 0; bottom: 7%; padding: 6px 9px; border: 2px solid rgba(255,255,255,0.78); border-radius: 999px; color: #173b34; background: rgba(255,247,198,0.94); font-size: 0.6rem; font-weight: 900; }
.yard-equipment { width: 22%; }
.yard-equipment--1 { z-index: 9; bottom: 14%; left: 9%; }
.yard-equipment--2 { z-index: 8; right: 8%; bottom: 19%; }
.yard-equipment--1 img { animation: yard-equipment-idle 4.3s ease-in-out infinite; }
.yard-equipment--2 img { animation: yard-equipment-idle 4.8s 0.7s ease-in-out infinite reverse; }
.yard-equipment span { position: absolute; bottom: -3px; left: 50%; max-width: 90%; overflow: hidden; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(12,63,52,0.88); font-size: 0.52rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); }
.yard-reward { position: absolute; z-index: 11; bottom: 44%; left: 54%; width: 10%; padding: 0; border: 0; background: transparent; filter: drop-shadow(0 12px 9px rgba(22,48,31,0.3)); transition: transform 180ms ease, filter 180ms ease; }
.business-yard-scene[data-yard-type="sonnenbistro"] .yard-reward { left: 24%; bottom: 44%; width: 10%; }
.yard-reward:hover { filter: drop-shadow(0 17px 12px rgba(22,48,31,0.38)) brightness(1.05); transform: translateY(-4px) scale(1.035); }
.yard-reward img { display: block; width: 100%; max-height: 190px; object-fit: contain; animation: yard-reward-glow 4s ease-in-out infinite; }
.yard-reward span { position: absolute; bottom: -3px; left: 50%; padding: 5px 8px; border: 1px solid rgba(255,255,255,0.48); border-radius: 999px; color: #fff; background: rgba(80,60,12,0.88); font-size: 0.47rem; font-weight: 900; white-space: nowrap; transform: translateX(-50%); }
.yard-upgrade { position: absolute; z-index: 4; pointer-events: none; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(25,55,34,0.2)); }
.yard-upgrade--2 { top: 29%; left: 11%; width: 25%; }
.yard-upgrade--3 { top: 26%; right: 9%; width: 26%; }
.yard-upgrade--4 { z-index: 5; right: 6%; bottom: 5%; left: 6%; width: 88%; height: 57%; }
.yard-upgrade--5 { z-index: 7; bottom: -3%; left: 32%; width: 28%; }
.yard-upgrade--2, .yard-upgrade--3, .yard-upgrade--5 { animation: yard-upgrade-arrive 620ms cubic-bezier(.18,.82,.3,1) both; }
.yard-upgrade--3 { animation-delay: 90ms; }
.yard-upgrade--4 { animation: yard-lantern-glow 3.4s ease-in-out infinite; }
.yard-upgrade--5 { animation-delay: 160ms; }
.yard-order-station { position: absolute; z-index: 13; right: 16px; bottom: 16px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 1px 8px; align-items: center; max-width: 225px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.58); border-radius: 14px; color: #173b34; background: rgba(255,253,242,0.92); box-shadow: 0 10px 24px rgba(12,53,41,0.2); text-align: left; backdrop-filter: blur(8px); }
.yard-order-station.has-order { background: rgba(255,225,102,0.95); animation: yard-pulse 1.8s ease-in-out infinite; }
.yard-order-station > span { grid-row: 1 / 3; display: grid; width: 36px; aspect-ratio: 1; place-items: center; border-radius: 10px; color: #fff; background: var(--green-700); font-weight: 900; }
.yard-order-station strong { font-size: 0.66rem; }
.yard-order-station small { color: var(--ink-soft); font-size: 0.5rem; }
.yard-like-button { display: grid; grid-template-columns: 24px auto; grid-template-rows: auto auto; gap: 0 6px; align-items: center; min-width: 92px; padding: 6px 9px; border: 1px solid rgba(255,255,255,0.38); border-radius: 12px; color: #fff; background: rgba(255,255,255,0.12); text-align: left; }
.yard-like-button > span { grid-row: 1 / 3; color: #ffcfda; font-size: 1.1rem; }
.yard-like-button strong { font-size: 0.67rem; }
.yard-like-button small { color: rgba(255,255,255,0.68); font-size: 0.43rem; }
.yard-like-button:not(:disabled):hover { border-color: #ffd4de; background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.yard-like-button.is-liked { color: #24483e; background: #ffd7df; }
.yard-like-button.is-liked > span { color: #c44562; }
.yard-like-button.is-liked small { color: #865260; }
.yard-visitor-plaque { position: absolute; z-index: 13; right: 16px; bottom: 16px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: center; max-width: 260px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.55); border-radius: 14px; color: #173b34; background: rgba(255,253,242,0.92); box-shadow: 0 10px 24px rgba(12,53,41,0.2); backdrop-filter: blur(8px); }
.yard-visitor-plaque > span { display: grid; width: 36px; aspect-ratio: 1; place-items: center; border-radius: 10px; color: #fff; background: var(--green-700); }
.yard-visitor-plaque strong, .yard-visitor-plaque small { display: block; }
.yard-visitor-plaque strong { font-size: 0.62rem; }
.yard-visitor-plaque small { margin-top: 2px; color: var(--ink-soft); font-size: 0.46rem; line-height: 1.35; }
.yard-avatar { position: absolute; z-index: 12; top: var(--yard-y); left: var(--yard-x); width: var(--yard-actor-width); height: var(--yard-actor-height); pointer-events: none; transform: translate(-50%, -100%); transition: top 550ms linear, left 550ms linear, width 550ms linear, height 550ms linear; }
.character-figure--yard { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .yard-avatar { transition: none; } }
.yard-walk-hint { position: absolute; z-index: 10; bottom: 17px; left: 18px; max-width: 250px; margin: 0; padding: 7px 10px; border-radius: 10px; color: rgba(255,255,255,0.85); background: rgba(8,48,40,0.72); font-size: 0.54rem; font-weight: 750; backdrop-filter: blur(6px); }
@keyframes yard-pulse { 50% { box-shadow: 0 10px 28px rgba(240,181,29,0.48); transform: translateY(-2px); } }
@keyframes yard-breathe { to { filter: brightness(1.025) saturate(1.025); } }
@keyframes yard-building-breathe { 50% { filter: brightness(1.035) saturate(1.025); transform: translateY(-2px); } }
@keyframes yard-equipment-idle { 50% { filter: brightness(1.045); transform: translateY(-3px) rotate(-0.35deg); } }
@keyframes yard-door-glow { 50% { opacity: 0.92; box-shadow: 0 0 28px 12px rgba(255,214,60,0.34); } }
@keyframes yard-upgrade-arrive { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes yard-lantern-glow { 50% { filter: drop-shadow(0 10px 8px rgba(25,55,34,0.2)) brightness(1.1) drop-shadow(0 0 8px rgba(255,211,77,0.36)); } }
@keyframes yard-reward-glow { 50% { filter: brightness(1.08) drop-shadow(0 0 8px rgba(255,210,61,0.48)); transform: translateY(-2px); } }

.garage-stage { position: absolute; inset: 0; z-index: 2; overflow: hidden; color: #fff; background: #735127; isolation: isolate; }
.garage-toolbar { position: absolute; z-index: 30; top: 16px; right: 16px; left: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 13px; border: 1px solid rgba(255,255,255,0.4); border-radius: 16px; background: rgba(25,50,39,0.86); box-shadow: 0 10px 30px rgba(20,30,20,0.28); backdrop-filter: blur(10px); }
.garage-toolbar button { padding: 8px 11px; border: 0; border-radius: 10px; color: #173b34; background: var(--banana); font-size: 0.7rem; font-weight: 900; }
.garage-toolbar div { display: grid; min-width: 0; }
.garage-toolbar strong { overflow: hidden; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
.garage-toolbar span, .garage-toolbar em { color: rgba(255,255,255,0.75); font-size: 0.57rem; font-style: normal; }
.garage-toolbar em { font-weight: 900; white-space: nowrap; }
.garage-viewport { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #493b29; }
.garage-viewport::before { position: absolute; inset: -20px; content: ""; background: url("../assets/game/garage-interior.webp") center / cover; filter: blur(16px) brightness(.62); }
.garage-scene { position: relative; flex: none; overflow: hidden; isolation: isolate; border-radius: 12px; box-shadow: 0 12px 35px #211b2370; cursor: crosshair; }
.garage-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; animation: garage-light 14s ease-in-out infinite alternate; }
.garage-vehicle, .garage-equipment, .garage-display { position: absolute; z-index: 8; padding: 0; border: 0; background: transparent; filter: drop-shadow(0 12px 9px rgba(37,35,24,0.34)); transition: transform 180ms ease, filter 180ms ease; }
.garage-equipment:hover, .garage-display:hover { filter: drop-shadow(0 16px 11px rgba(37,35,24,0.4)) brightness(1.05); transform: translateY(-4px) scale(1.025); }
.garage-vehicle:hover { filter: drop-shadow(0 12px 9px rgba(37,35,24,.34)) brightness(1.05); }
.garage-vehicle img, .garage-equipment img, .garage-display img { display: block; width: 100%; height: 100%; object-fit: contain; }
.garage-vehicle { top: var(--vehicle-y); left: var(--vehicle-x); width: var(--vehicle-width); height: var(--vehicle-height); transform: translate(var(--vehicle-offset-x),var(--vehicle-offset-y)); }
.garage-vehicle img { transform: scaleX(var(--vehicle-flip)); }
.garage-vehicle span, .garage-display span { position: absolute; bottom: 2px; left: 50%; padding: 5px 8px; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; color: #fff; background: rgba(13,60,49,0.86); font-size: 0.5rem; font-weight: 900; white-space: nowrap; transform: translateX(-50%); }
.garage-vehicle span { top: calc(var(--vehicle-anchor-y) + 4px); bottom: auto; width: max-content; max-width: 160px; padding: 4px 7px; font-size: .7rem; white-space: normal; text-align: center; }
.garage-equipment { z-index: 6; bottom: 4%; width: min(22%, 235px); height: 30%; opacity: 0.92; }
.garage-equipment--service { left: -1%; }
.garage-equipment--wash { right: -1%; }
.garage-display { z-index: 7; top: 14%; left: 50%; width: min(18%, 205px); height: 29%; transform: translateX(-50%); }
.garage-display:hover { transform: translateX(-50%) translateY(-4px) scale(1.025); }
.garage-avatar { position: absolute; z-index: 15; top: var(--garage-y); left: var(--garage-x); width: var(--garage-actor-width); height: var(--garage-actor-height); pointer-events: none; transform: translate(-50%, -100%); transition: top 550ms cubic-bezier(.2,.8,.2,1), left 550ms cubic-bezier(.2,.8,.2,1), width 550ms ease, height 550ms ease; }
.character-figure--garage { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .garage-avatar { transition: none; } }
.garage-walk-hint { position: absolute; z-index: 12; bottom: 17px; left: 50%; margin: 0; padding: 7px 10px; border-radius: 10px; color: rgba(255,255,255,0.88); background: rgba(35,47,34,0.75); font-size: 0.54rem; font-weight: 800; white-space: nowrap; transform: translateX(-50%); backdrop-filter: blur(6px); }
@keyframes garage-light { to { filter: brightness(1.035) saturate(1.03); } }

.wardrobe-stage { position: absolute; inset: 0; z-index: 2; overflow: hidden; color: #fff; background: #203e35; isolation: isolate; }
.wardrobe-toolbar { position: absolute; z-index: 30; top: 16px; right: 16px; left: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 13px; border: 1px solid rgba(255,255,255,0.4); border-radius: 16px; background: rgba(18,53,44,0.88); box-shadow: 0 10px 30px rgba(20,30,20,0.28); backdrop-filter: blur(10px); }
.wardrobe-toolbar button { padding: 8px 11px; border: 0; border-radius: 10px; color: #173b34; background: var(--banana); font-size: 0.7rem; font-weight: 900; }
.wardrobe-toolbar div { display: grid; min-width: 0; }
.wardrobe-toolbar__identity { grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; }
.wardrobe-toolbar__identity > span:last-child { display: grid; min-width: 0; }
.wardrobe-toolbar strong { overflow: hidden; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
.wardrobe-toolbar small, .wardrobe-toolbar em { color: rgba(255,255,255,0.75); font-size: 0.57rem; font-style: normal; }
.wardrobe-toolbar em { font-weight: 900; white-space: nowrap; }
.wardrobe-profile-portrait { display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; color: #173b34; background: var(--banana); box-shadow: 0 5px 13px rgba(8,31,24,.28); font-size: .75rem; font-weight: 1000; }
.wardrobe-profile-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wardrobe-profile-portrait--standard { background: linear-gradient(145deg, #ffe984, #f2bd38); }
.wardrobe-viewport { position: absolute; inset: 0; overflow: hidden; cursor: crosshair; }
.wardrobe-backdrop { position: absolute; inset: -1%; width: 102%; height: 102%; object-fit: cover; animation: wardrobe-light 14s ease-in-out infinite alternate; }
.wardrobe-avatar { position: absolute; z-index: 15; top: var(--wardrobe-y); left: var(--wardrobe-x); width: clamp(110px, 17%, 190px); height: clamp(180px, 42%, 290px); pointer-events: none; transform: translate(-50%, -92%); transition: top 550ms cubic-bezier(.2,.8,.2,1), left 550ms cubic-bezier(.2,.8,.2,1); }
.character-figure--wardrobe { width: 100%; height: 100%; cursor: pointer; pointer-events: auto; }
.wardrobe-avatar__body { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 10px rgba(20,26,18,0.38)); }
.wardrobe-avatar__face { position: absolute; z-index: 5; top: -1.5%; left: 50%; display: grid; place-items: center; width: 58%; aspect-ratio: 1; transform: translateX(-50%); }
.wardrobe-avatar__face img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(34,24,16,0.26)); }
.wardrobe-avatar > i { position: absolute; z-index: 4; right: 50%; bottom: 1%; padding: 4px 7px; border: 2px solid #fff; border-radius: 999px; color: #173b34; background: var(--banana); font-size: 0.48rem; font-style: normal; font-weight: 1000; transform: translateX(50%); }
.wardrobe-piece { position: absolute; z-index: 5; width: 48px; height: 48px; padding: 4px; overflow: hidden; border: 2px solid rgba(255,255,255,0.9); border-radius: 14px; color: #24443a; background: rgba(255,250,222,0.94); box-shadow: 0 7px 15px rgba(20,43,32,0.3); }
.wardrobe-piece img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
.wardrobe-piece span { font-size: 0.43rem; font-weight: 900; }
.wardrobe-piece--head { top: 9%; right: -14%; }
.wardrobe-piece--top { top: 34%; left: -18%; }
.wardrobe-piece--bottom { top: 58%; right: -16%; }
.wardrobe-piece--shoes { bottom: 2%; left: -12%; }
.wardrobe-piece--outerwear { top: 31%; right: -20%; }
.wardrobe-piece--neckwear { top: 11%; left: -18%; }
.wardrobe-piece--bag { top: 56%; left: -20%; }
.wardrobe-display { position: absolute; z-index: 7; top: 25%; display: grid; place-items: center; width: 95px; min-height: 88px; padding: 9px; border: 1px solid rgba(255,255,255,0.5); border-radius: 20px; color: #fff; background: rgba(18,66,54,0.82); box-shadow: 0 12px 22px rgba(24,42,31,0.28); backdrop-filter: blur(6px); }
.wardrobe-display span { font-size: 2rem; }
.wardrobe-display strong { font-size: 0.55rem; }
.wardrobe-displays { position: absolute; z-index: 7; top: 25%; left: 5%; right: 5%; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.wardrobe-displays .wardrobe-display { position: static; pointer-events: auto; }
.home-stage { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 16px; overflow: auto; padding: 20px; background: linear-gradient(145deg, #eef4df, #fff3d6); }
.home-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 12px; border-radius: 16px; color: #fff; background: var(--green-800); }
.home-toolbar > div { display: grid; gap: 4px; }
.home-stage > .home-toolbar, .home-stage > .room-tabs, .home-stage > .home-room-heading, .home-stage > .home-room-note, .home-stage > .home-layout-controls { flex-shrink: 0; }
.home-toolbar span { font-size: 0.78rem; }
.home-room-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.home-room-heading h2, .home-room-heading p { margin: 0 0 6px; }
.home-room-heading p, .home-room-note { font-size: 0.85rem; color: var(--ink-soft); }
.home-room-heading > span { white-space: nowrap; font-size: 0.8rem; }
.home-stage .home-room-scene { position: relative; flex: 1; min-height: clamp(280px, 50vh, 480px); overflow: hidden; border: 1px solid #b7995b; border-radius: 18px; background: #d8b577; }
.home-room-backdrop { position: absolute; inset: 0; display: block; }
.home-room-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-room-furniture { position: absolute; inset: 42% 5% 6%; }
.home-room-furniture figure { position: absolute; left: var(--room-x); top: var(--room-y); transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; justify-content: end; width: 44%; height: 100%; min-height: 0; min-width: 0; margin: 0; text-align: center; pointer-events: none; }
.home-room-furniture[data-count="3"] figure { width: 30%; }
.home-room-furniture[data-count="4"] figure { width: 36%; height: 60%; }
.home-room-furniture figure img { display: block; width: 100%; min-height: 0; max-height: calc(100% - 24px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 9px 5px rgba(55,31,12,0.28)); }
.home-furniture-handle { display: flex; align-items: end; justify-content: center; width: 100%; min-height: 0; max-height: 100%; padding: 0; border: 0; background: transparent; touch-action: none; cursor: grab; pointer-events: auto; }
.home-room-furniture .home-furniture-handle img { max-height: 100%; pointer-events: none; user-select: none; }
.home-furniture-handle:focus-visible, .home-room-furniture .is-selected .home-furniture-handle { outline: 3px solid #f1bc32; outline-offset: 3px; border-radius: 10px; }
.home-room-furniture .is-dragging .home-furniture-handle { cursor: grabbing; }
.home-layout-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--green-800); }
.home-layout-controls > div { display: flex; flex-wrap: wrap; gap: 5px; }
.home-editor { display: grid; flex-shrink: 0; gap: 12px; min-width: 0; }
.home-editor .home-piece-picker { margin: 0; }
.home-editor-details { min-width: 0; }
.home-editor-details > summary { min-height: 44px; padding: 10px 12px; box-sizing: border-box; border: 1px solid #adc7b7; border-radius: 10px; color: #164c3b; background: #f7fbee; font-weight: 800; cursor: pointer; }
.home-editor-details > summary:focus-visible { outline: 3px solid #d8a619; outline-offset: 2px; }
.home-editor-details[open] > summary { margin-bottom: 8px; }
@media (min-width: 601px) { .home-editor-details > summary { display: none; } }
@media (max-width: 600px) {
    .home-stage > .home-toolbar { order: 1; padding: 8px 10px; gap: 6px 10px; }
    .home-stage > .room-tabs { order: 2; padding: 5px; }
    .home-stage > .home-preview-strip { order: 3; }
    .home-stage > .home-purchase-preview { order: 6; }
    .home-stage > .home-room-heading { order: 4; }
    .home-stage > .home-room-scene { order: 5; }
    .home-stage > .home-editor { order: 6; gap: 7px; }
    .home-stage > .home-room-note { order: 7; }
    .home-editor .home-piece-picker { display: grid; gap: 4px; font-size: .75rem; }
    .home-editor .home-piece-picker select { width: 100%; min-height: 44px; }
    .home-editor[data-selected="false"][data-undo="false"] .home-layout-controls { display: none; }
    .home-editor[data-saving="false"] .home-layout-controls > span { display: none; }
    .home-editor .home-layout-controls .life-action { min-width: 44px; min-height: 44px; padding: 8px; }
    .home-editor .home-layout-controls > div { gap: 4px; }
    .home-editor .home-wall-controls { padding: 10px; }
}
.home-layout-controls .life-action { min-width: 36px; min-height: 36px; padding: 7px 10px; font-size: .75rem; }
.home-room-wall { inset: 10% 5% 45%; }
.home-room-scene[data-placement-plane="wall"] .home-room-wall { z-index: 2000; }
.home-room-scene[data-placement-plane="floor"] [data-home-floor] { z-index: 2000; }
.home-wall-controls { flex-shrink: 0; display: grid; gap: 10px; padding: 14px; border: 1px solid #a8c7b5; border-radius: 14px; background: #f7fbee; }
.home-wall-controls p { margin: 5px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.home-wall-controls form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.home-wall-controls form label { display: grid; gap: 5px; min-width: 0; font-size: .8rem; }
.home-wall-controls input[type="number"] { width: 100px; max-width: 100%; min-height: 44px; padding: 8px; box-sizing: border-box; border: 1px solid #adc7b7; border-radius: 8px; background: #fff; }
.home-wall-controls input[aria-invalid="true"] { border: 2px solid #a43b27; }
.home-wall-controls .life-action { min-height: 44px; }
.home-wall-guide-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .85rem; cursor: pointer; }
.home-wall-guide-toggle input { width: 20px; height: 20px; accent-color: #176b52; }
.home-wall-controls :is(input,button):focus-visible { outline: 3px solid #d8a619; outline-offset: 3px; }
.home-wall-guide { position: absolute; left: 8%; top: 15%; width: 84%; height: 85%; box-sizing: border-box; border: 2px dashed #176b52; border-radius: 8px; background: repeating-linear-gradient(90deg, #f8ffed22 0, #f8ffed22 calc(10% - 1px), #176b5244 calc(10% - 1px), #176b5244 10%), repeating-linear-gradient(0deg, transparent 0, transparent calc(20% - 1px), #176b5244 calc(20% - 1px), #176b5244 20%); pointer-events: none; }
.home-wall-guide span { position: absolute; bottom: 0; left: 0; padding: 3px 6px; border-radius: 5px; background: #f7fbee; color: #164c3b; font-size: .65rem; }
.home-wall-anchor { position: absolute; z-index: 1100; width: 12px; height: 12px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #176b52; box-shadow: 0 0 0 2px #176b52; pointer-events: none; }
.home-room-furniture figure[data-room-slot="wall"] { width: 17%; height: 65%; }
.home-room-furniture figure[data-room-slot="plant"] { width: 24%; height: 75%; }
.home-room-furniture figure[data-room-slot="rug"] { width: 76%; height: 90%; }
.home-room-furniture figure:not([data-room-slot="furniture"]) img,
.home-room-furniture figure:not([data-room-slot="furniture"]) .home-furniture-handle { max-height: 100%; }
.home-room-furniture figure[data-room-slot="rug"] img { filter: none; }
.home-room-furniture figure:is([data-furniture-type="sonnensalon_teppich"], [data-furniture-type="palmenkrone_teppich"], [data-furniture-type="kuestenstube_teppich"], [data-furniture-type="kuestenkueche_laeufer"], [data-furniture-type="kuestentraum_teppich"]) { transform: translate(-50%, -100%) scaleY(.65); transform-origin: 50% 100%; }
.home-room-furniture figure[data-furniture-type="kuestentraum_bett"] { width: 44%; height: 125%; }
.home-room-furniture figure[data-furniture-type="kuestentraum_kommode"] { width: 30%; height: 85%; }
.home-room-furniture figure[data-furniture-type="kuestentraum_friedenslilie"] { width: 18%; height: 65%; }
.home-room-furniture figure[data-furniture-type="kuestenkueche_block"] { width: 42%; height: 105%; }
.home-room-furniture figure[data-furniture-type="kuestenkueche_essplatz"] { width: 42%; height: 95%; }
.home-room-furniture figure[data-furniture-type="kuestenkueche_wandregal"] { width: 24%; height: 70%; }
.home-room-furniture figure[data-furniture-type="kuestenkueche_basilikum"] { width: 20%; height: 60%; }
.home-room-furniture figure[data-furniture-type="kuestenstube_sofa"] { width: 46%; }
.home-room-furniture figure[data-furniture-type="kuestenstube_truhe"] { width: 30%; height: 78%; }
.home-room-furniture figure[data-furniture-type="kuestenstube_gruenlilie"] { width: 20%; height: 60%; }
.home-piece-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; font-size: .85rem; }
.home-piece-picker select { max-width: 100%; min-width: 0; padding: 8px; border: 1px solid #c7d8cb; border-radius: 8px; background: #fffdf4; }
.home-shop-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.home-series-overview { margin: 8px 0 10px; }
.home-series-overview > summary, .home-fold > summary { padding: 9px 11px; border-radius: 10px; color: var(--green-800); background: #eaf3e7; font-size: .72rem; font-weight: 900; cursor: pointer; }
.home-series-overview[open] > summary { margin-bottom: 6px; }
.home-fold { margin-top: 8px; }
.home-fold[open] > summary { margin-bottom: 8px; }
.home-panel-meta { margin: -4px 0 10px; color: var(--ink-soft); font-size: .66rem; }
.home-tabs { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; padding: 4px; border-radius: 12px; background: #eaf3e7; }
.home-tabs button { display: grid; justify-items: center; gap: 1px; min-height: 46px; padding: 4px 2px; border: 0; border-radius: 9px; color: var(--green-800); background: transparent; font-size: .58rem; font-weight: 800; line-height: 1.15; cursor: pointer; }
.home-tabs button span { font-size: .95rem; line-height: 1.1; }
.home-tabs button:hover { background: #fff; }
.home-tabs button.is-active { background: #ffe477; color: #574100; }
.home-tabs button:focus-visible { outline: 2px solid #176b52; outline-offset: 1px; }
.home-tabs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-tabs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-tabs[hidden] { display: none; }
.home-tabs button { position: relative; }
.home-tab-badge { position: absolute; top: 2px; right: 4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; color: #fff; background: #d0562f; font-size: .56rem; font-weight: 900; line-height: 15px; }
.home-tab-page[hidden] { display: none; }
.home-tab-page > .section-heading:first-child, .home-tab-page > .puzzle-gallery:first-child .section-heading { margin-top: 2px; }
.home-empty { display: grid; justify-items: start; gap: 8px; margin: 0; padding: 12px; border-radius: 12px; color: var(--ink-soft); background: #f6faef; font-size: .72rem; }
.home-build-cards .life-card p { margin-bottom: 8px; }
.home-series-card { min-width: 0; margin-top: 4px; border: 1px solid #d7e2d6; border-radius: 10px; background: #f6faef; }
.home-series-card > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; padding: 8px 10px; }
.home-series-card > summary strong { overflow-wrap: anywhere; font-size: .7rem; }
.home-series-card > summary span { color: var(--green-700); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.home-series-card > summary progress { grid-column: 1 / -1; width: 100%; height: 5px; margin: 0; }
.home-series-card.is-complete > summary span { color: #176b52; }
.home-series-card > ul, .home-series-card > p, .home-series-card > button { margin: 0 10px 8px; }
.home-series-card > button { width: calc(100% - 20px); }
.home-series-missing li.is-owned small { color: #176b52; font-weight: 800; }
.home-series-card progress { display: block; accent-color: #176b52; }
.home-series-card p { font-size: .68rem; line-height: 1.4; }
.home-series-card summary { box-sizing: border-box; cursor: pointer; }
.home-series-card summary:focus-visible { outline: 2px solid #176b52; outline-offset: 2px; border-radius: 6px; }
.home-series-missing { display: grid; gap: 6px; padding: 0; margin: 0 0 12px; list-style: none; }
.home-series-missing li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px; }
.home-series-missing img { display: block; width: 36px; height: 36px; object-fit: contain; }
.home-series-missing strong, .home-series-missing small { display: block; overflow-wrap: anywhere; line-height: 1.4; }
.home-series-missing strong { font-size: .66rem; }
.home-series-missing small { font-size: .6rem; color: var(--ink-soft); }
.furniture-room-hint { font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.fleet-help { margin: 10px 0 0; padding: 9px 11px; border: 1px solid #b7cfbd; border-radius: 14px; background: #f4faee; }
.fleet-help summary { cursor: pointer; font-size: .68rem; font-weight: 800; }
.fleet-help p { font-size: .64rem; line-height: 1.45; }
.vehicle-actions .life-card__actions > small { flex: 0 0 100%; font-size: .56rem; line-height: 1.35; margin-bottom: 5px; }
.vehicle-actions .life-action { min-height: 30px; padding: 4px 8px; font-size: .6rem; }
.vehicle-card--detailed > div { min-width: 0; }
.home-shop-filter { display: grid; min-width: 0; gap: 2px; margin: 0; color: var(--ink-soft); font-size: .6rem; font-weight: 800; }
.home-shop-owned-filter { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: .66rem; font-weight: 800; cursor: pointer; }
.home-shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-top: 4px; color: var(--ink-soft); font-size: .62rem; font-weight: 800; }
.home-shop-reset { padding: 3px 0; border: 0; color: var(--green-700); background: none; font-size: .62rem; font-weight: 900; text-decoration: underline; cursor: pointer; }
.home-shop-owned-filter input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #176b52; }
.home-shop-owned-filter input:focus-visible { outline: 2px solid #176b52; outline-offset: 3px; }
.home-shop-empty { grid-column: 1 / -1; margin: 0; padding: 16px; border-radius: 12px; background: #fff8df; line-height: 1.5; }
.home-shop-filter select { width: 100%; min-width: 0; min-height: 34px; padding: 5px 6px; font-size: .68rem; border: 1px solid #c7d8cb; border-radius: 10px; background: #fffdf4; color: #24443a; }
.home-shop-filter-note { margin: 6px 0 14px; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.home-room-furniture figure[data-furniture-type="blattbogen_leuchte"] { width: 28%; height: 130%; }
.home-room-furniture figure[data-furniture-type="sonnenlaterne"] { width: 17%; height: 48%; }
.home-purchase-preview { padding: 14px; margin: 12px 0; border: 2px solid #e2b94c; border-radius: 14px; background: #fff4c8; color: #28473b; }
.home-stage > .home-purchase-preview, .home-stage > .home-piece-picker { flex-shrink: 0; }
.home-purchase-preview p { margin: 6px 0; font-size: .85rem; line-height: 1.5; }
.home-purchase-preview label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.home-purchase-preview select { max-width: 100%; padding: 8px; border: 1px solid #bbaa74; border-radius: 8px; background: #fffdf4; }
.home-preview-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; }
.home-preview-heading strong { min-width: 0; overflow-wrap: anywhere; }
.home-preview-heading > span { font-size: .75rem; font-weight: 700; }
.home-preview-status, .home-preview-displaced { font-weight: 700; }
.home-preview-error { padding: 8px; border: 1px solid #aa4630; border-radius: 8px; color: #7e2d1c; background: #fff5ee; }
.home-preview-details > summary { min-height: 44px; box-sizing: border-box; padding: 10px; border-radius: 8px; background: #fff9e4; cursor: pointer; font-weight: 700; }
.home-purchase-preview :is(button,select,summary):focus-visible { outline: 3px solid #176b52; outline-offset: 2px; }
@media (min-width: 601px) { .home-preview-details > summary, .home-preview-strip { display: none; } }
@media (max-width: 600px) {
    .home-preview-strip { position: sticky; top: 0; z-index: 3000; display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid #d2ad40; border-radius: 10px; background: #fff4c8; }
    .home-preview-strip > div { min-width: 0; }
    .home-preview-strip strong, .home-preview-strip span { display: block; overflow-wrap: anywhere; font-size: .73rem; line-height: 1.35; }
    .home-preview-strip span { margin-top: 3px; font-size: .7rem; }
    .home-preview-strip button { min-height: 44px; flex-shrink: 0; }
    .home-preview-strip button:focus-visible { outline: 3px solid #176b52; outline-offset: 2px; }
    .home-stage:has(.home-preview-strip) .home-room-scene { scroll-margin-top: 76px; }
    .home-purchase-preview { display: grid; gap: 6px; padding: 10px; margin: 0; min-width: 0; }
    .home-preview-heading { gap: 3px; }
    .home-preview-heading strong { font-size: .85rem; }
    .home-preview-heading > span { font-size: .72rem; }
    .home-purchase-preview p { margin: 0; font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; }
    .home-purchase-preview label { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; margin: 0; font-size: .75rem; }
    .home-purchase-preview select { width: 100%; min-width: 0; min-height: 44px; }
    .home-purchase-preview .life-card__actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
    .home-purchase-preview .life-card__actions button { min-width: 0; min-height: 44px; font-size: .72rem; overflow-wrap: anywhere; }
    .home-preview-details > summary { font-size: .75rem; }
    .home-preview-details[open] > p { margin-top: 7px; }
}
.home-room-furniture figure.is-preview img { filter: drop-shadow(0 0 5px #f2c233) drop-shadow(0 8px 5px #45331255); }
.home-room-furniture figure.is-preview:focus-visible { outline: 3px solid #176b52; outline-offset: 3px; border-radius: 12px; }
.home-room-furniture figure[data-furniture-type="bambusbett"] { width: 56%; height: 115%; }
.home-room-furniture figure[data-furniture-type="muschelkommode"] { width: 26%; height: 70%; }
.home-room-furniture figure[data-furniture-type="sonnenfaecher_sessel"] { width: 29%; }
.home-room-furniture figure[data-furniture-type="lagunen_anrichte"] { width: 37%; }
.home-room-furniture figure[data-furniture-type="bananenblueten_thron"] { width: 28%; }
.home-room-furniture figure[data-furniture-type="palmen_intarsientisch"] { width: 40%; }
.interior-shop-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px; }
.interior-shop-card .interior-item-visual { height: 58px; border-radius: 9px; }
.interior-shop-card p { margin: 1px 0 0; font-size: .6rem; line-height: 1.35; }
.interior-shop-card h3 { font-size: .72rem; }
.interior-shop-card .life-card__value { font-size: .66rem; }
.interior-shop-card .life-card__actions { margin-top: 6px; }
.interior-shop-card .life-action { flex: 1 1 auto; min-height: 30px; padding: 4px 7px; font-size: .6rem; }
.interior-shop-card .life-action + .life-action { margin-top: 0; }
.interior-shop-card.is-owned { background: #f6faef; }
.interior-shop-owned { display: block; margin-top: 5px; color: #176b52; font-size: .62rem; font-weight: 900; }
.interior-shop-card .interior-series { color: #246b57; font-weight: 700; }
.interior-shop-card .life-card__top { flex-wrap: wrap; gap: 4px 8px; }
.interior-shop-card .life-card__top h3 { flex: 1 1 5rem; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.interior-shop-card .life-card__value { flex-shrink: 0; }
.home-room-empty { position: absolute; bottom: 8%; left: 10%; right: 10%; margin: 0; padding: 12px; border-radius: 12px; color: #24443a; background: rgba(255,247,222,0.92); font-size: 0.8rem; text-align: center; }
.home-room-note { margin: 0; }
@media (max-width: 600px) { .home-stage { padding: 12px; gap: 10px; } .home-stage .home-room-scene { min-height: 240px; flex-shrink: 0; } .home-room-heading h2 { font-size: 1.15rem; } .home-room-heading p, .home-room-note { font-size: 0.72rem; } .home-room-empty { font-size: 0.7rem; } }
.garage-exhibition { display: grid; gap: 10px; min-width: 0; margin: 18px 0; padding: 16px; border: 1px solid #d8e5d6; border-radius: 18px; background: #f4f8e9; }
.garage-exhibition h3, .garage-exhibition p { margin: 0; }
.garage-exhibition p { font-size: 0.78rem; line-height: 1.5; }
.garage-exhibition label { font-size: 0.8rem; font-weight: 800; }
.garage-exhibition select { width: 100%; min-width: 0; min-height: 44px; }
.wardrobe-walk-hint { position: absolute; z-index: 12; bottom: 17px; left: 50%; margin: 0; padding: 7px 10px; border-radius: 10px; color: rgba(255,255,255,0.9); background: rgba(28,46,35,0.77); font-size: 0.54rem; font-weight: 800; white-space: nowrap; transform: translateX(-50%); backdrop-filter: blur(6px); }
@keyframes wardrobe-light { to { filter: brightness(1.045) saturate(1.025); transform: scale(1.01); } }

@media (prefers-reduced-motion: reduce) {
    .character-figure.is-walking .character-figure__appearance,
    .character-figure.is-walking .character-figure__shadow,
    .character-figure.is-walking .character-figure__motion-fx,
    .character-figure.is-greeting .character-figure__appearance,
    .character-figure.is-greeting .character-figure__motion-fx,
    .character-figure.is-interacting .character-figure__appearance,
    .character-figure.is-interacting .character-figure__motion-fx { animation-duration: 1ms; animation-iteration-count: 1; }
}

.saved-looks, .wardrobe-collections { display: grid; gap: 9px; }
.saved-look, .wardrobe-collection { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: rgba(242,248,238,0.9); }
.saved-look > span, .wardrobe-collection > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: #5b7b6f; font-size: 1rem; font-weight: 1000; }
.saved-look div, .wardrobe-collection div { display: grid; min-width: 0; }
.saved-look strong, .wardrobe-collection strong { color: var(--ink); font-size: 0.73rem; }
.saved-look small, .wardrobe-collection small { color: var(--muted); font-size: 0.57rem; line-height: 1.35; }
.saved-look.is-saved, .wardrobe-collection.is-earned { border-color: rgba(218,167,38,0.52); background: linear-gradient(135deg, #fff7cf, #ecf8ec); }
.wardrobe-collection { grid-template-columns: auto minmax(0, 1fr); }
.wardrobe-collection.is-earned > span { background: #c19320; }
.character-library-note { margin: -2px 0 10px; color: var(--muted); font-size: .68rem; line-height: 1.48; }
.character-library { display: grid; grid-template-columns: 1fr; gap: 9px; }
.character-choice { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; padding: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,247,233,.94)); box-shadow: 0 5px 16px rgba(18,61,49,.07); }
.character-choice.is-active { border-color: rgba(218,167,38,.72); box-shadow: 0 0 0 2px rgba(246,203,66,.2), 0 7px 18px rgba(18,61,49,.1); background: linear-gradient(145deg, #fff8d7, #e8f6e8); }
.character-choice__art { display: grid; place-items: end center; width: 70px; height: 108px; overflow: hidden; border-radius: 13px; background: radial-gradient(circle at 50% 38%, #ffe59e 0 18%, #cee5cd 55%, #a7cbbd 100%); }
.character-choice__art img { display: block; width: 94%; height: 104%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 5px rgba(25,58,45,.18)); }
.character-choice > div:nth-child(2) { display: grid; align-self: stretch; align-content: center; min-width: 0; }
.character-choice small { color: #a17716; font-size: .51rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.character-choice strong { color: var(--ink); font-size: .75rem; }
.character-choice p { margin: 3px 0 0; color: var(--muted); font-size: .56rem; line-height: 1.35; }
.character-choice .life-action { grid-column: 1 / -1; margin: 0; padding: 7px 9px; }
.character-choice.is-active .life-action { color: #fff; background: #5b7b6f; opacity: .72; }

.vehicle-card--detailed { grid-template-columns: 72px minmax(0, 1fr); }
.vehicle-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.life-meter--clean i { background: linear-gradient(90deg, #3ec9d6, #82dfdc); }
.vehicle-actions { margin-top: 7px; border: 1px solid rgba(34,102,76,0.12); border-radius: 9px; background: #f6faf4; }
.vehicle-actions summary { padding: 7px 9px; color: var(--green-800); cursor: pointer; font-size: 0.55rem; font-weight: 900; }
.vehicle-actions .life-card__actions { padding: 0 7px 7px; }
.garage-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.garage-reward { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; padding: 8px; border: 1px solid rgba(102,119,104,0.14); border-radius: 11px; background: #f1f4ef; filter: grayscale(0.8); opacity: 0.6; }
.garage-reward.is-earned { border-color: rgba(221,174,29,0.42); background: linear-gradient(135deg, #fff4b9, #f2f8e9); filter: none; opacity: 1; box-shadow: inset 3px 0 #e0ae1d; }
.garage-reward > span { display: grid; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 10px; background: #fff; font-size: 1.1rem; }
.garage-reward strong, .garage-reward small { display: block; }
.garage-reward strong { color: var(--green-900); font-size: 0.59rem; }
.garage-reward small { margin-top: 2px; color: var(--ink-soft); font-size: 0.47rem; line-height: 1.35; }
.garage-history { display: grid; gap: 5px; }
.garage-history > span { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 2px 7px; padding: 7px 9px; border-radius: 9px; color: var(--ink-soft); background: #f2f6ef; font-size: 0.52rem; }
.garage-history > span strong { grid-row: 1 / 3; color: var(--green-700); font-size: 0.5rem; }
.garage-history > span small { grid-column: 2; color: #8b6c1d; font-size: 0.45rem; }
.garage-history > p { margin: 0; padding: 9px; border-radius: 9px; color: var(--ink-soft); background: #f2f6ef; font-size: 0.56rem; }

.business-long-term { margin-top: 11px; padding: 10px; border: 1px solid rgba(32,119,88,0.18); border-radius: 15px; background: linear-gradient(145deg, #eff8e9, #fffdf5); }
.business-long-term .business-subheading:first-child { margin-top: 0; }
.regular-customer-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid rgba(32,119,88,0.14); border-radius: 12px; background: #fff; }
.regular-customer-card > span { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 12px; background: #fff2ad; font-size: 1.22rem; }
.regular-customer-card small, .regular-customer-card strong { display: block; }
.regular-customer-card small { color: #8d791f; font-size: 0.45rem; font-weight: 900; text-transform: uppercase; }
.regular-customer-card strong { color: var(--green-900); font-size: 0.65rem; }
.regular-customer-card p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.5rem; }
.regular-customer-card > em { color: #986f11; font-size: 0.53rem; font-style: normal; font-weight: 900; text-align: right; white-space: nowrap; }
.regular-customer-card > em strong { margin-top: 2px; color: var(--ink-soft); font-size: 0.43rem; }
.weekly-project, .prestige-project { padding: 10px; border: 1px solid rgba(26,102,74,0.14); border-radius: 13px; background: rgba(255,255,255,0.9); }
.weekly-project.is-ready { border-color: rgba(224,174,28,0.52); box-shadow: inset 3px 0 0 #efbd2e; }
.weekly-project h4, .prestige-project h4 { color: var(--green-900); font-size: 0.65rem; }
.weekly-project p, .prestige-project p { margin: 3px 0 8px; color: var(--ink-soft); font-size: 0.5rem; line-height: 1.4; }
.project-stage-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 8px 0; }
.project-stage { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 6px 2px; border-radius: 9px; color: #7a8b80; background: #edf2ea; text-align: center; }
.project-stage i { display: grid; width: 19px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #d8e2d5; font-size: 0.46rem; font-style: normal; font-weight: 900; }
.project-stage small { max-width: 100%; overflow: hidden; font-size: 0.41rem; text-overflow: ellipsis; white-space: nowrap; }
.project-stage.is-done { color: #1b6d50; background: #dbf0d8; }
.project-stage.is-done i { color: #fff; background: #25805d; }
.project-stage.is-current { color: #7b6110; background: #fff0ac; box-shadow: inset 0 0 0 1px rgba(222,174,30,0.35); }
.project-stage.is-current i { color: #fff; background: #d8a91a; }
.project-lock { display: block; padding: 6px 8px; border-radius: 9px; color: var(--ink-soft); background: #eef2eb; font-size: 0.47rem; font-weight: 800; text-align: center; }
.prestige-project > div:first-child { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.prestige-project > div:first-child > span { display: grid; width: 34px; aspect-ratio: 1; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #d8a91a, #8a6510); }
.prestige-project.is-locked { opacity: 0.66; filter: saturate(0.72); }
.prestige-project.is-unlocked { border-color: rgba(220,171,24,0.42); background: linear-gradient(145deg, #fff7c8, #fff); }
.prestige-project .life-meter { margin: 8px 0; }
.business-collectibles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.business-collectible { min-width: 0; overflow: hidden; border: 1px solid rgba(218,171,28,0.25); border-radius: 11px; background: #fff; }
.business-collectible img { display: block; width: 100%; height: 92px; object-fit: contain; background: radial-gradient(circle, #fff3b8, #e9f4df); }
.business-collectible div { padding: 6px; }
.business-collectible small, .business-collectible strong, .business-collectible span { display: block; }
.business-collectible small { color: #967817; font-size: 0.4rem; font-weight: 900; text-transform: uppercase; }
.business-collectible strong { overflow: hidden; color: var(--green-900); font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; }
.business-collectible span { margin-top: 2px; color: var(--green-700); font-size: 0.43rem; font-weight: 800; }
.customer-book { display: grid; gap: 4px; }
.customer-book-entry { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 6px; align-items: center; padding: 6px 7px; border-radius: 9px; background: rgba(255,255,255,0.86); }
.customer-book-entry i { grid-row: 1 / 3; font-size: 0.9rem; font-style: normal; }
.customer-book-entry strong { color: var(--green-900); font-size: 0.51rem; }
.customer-book-entry small { color: var(--ink-soft); font-size: 0.43rem; }
.customer-book-entry em { grid-column: 3; grid-row: 1 / 3; color: #d3a116; font-size: 0.46rem; font-style: normal; white-space: nowrap; }
.visitor-rewards { display: flex; gap: 5px; margin: 7px 0; }
.visitor-reward { width: 46px; height: 58px; padding: 3px; border: 1px solid rgba(217,171,28,0.28); border-radius: 9px; background: #fff8d6; object-fit: contain; }

.visitor-like-summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; margin: 12px 0; padding: 10px; border: 1px solid rgba(204,82,109,0.2); border-radius: 14px; background: linear-gradient(135deg, #fff0f3, #fffdf6); }
.visitor-like-summary > span { display: grid; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 12px; color: #fff; background: #c94e69; font-size: 1.15rem; }
.visitor-like-summary strong, .visitor-like-summary small { display: block; }
.visitor-like-summary strong { color: var(--green-900); font-size: 0.65rem; }
.visitor-like-summary small { margin-top: 2px; color: var(--ink-soft); font-size: 0.48rem; }
.visitor-business-list { display: grid; gap: 10px; }
.visitor-business-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.visitor-business-card.is-active { border-color: rgba(224,174,28,0.55); box-shadow: inset 3px 0 0 #efbd2e, 0 8px 18px rgba(40,84,64,0.08); }
.visitor-business-card > img { align-self: center; width: 100%; max-height: 118px; object-fit: contain; filter: drop-shadow(0 8px 7px rgba(40,66,48,0.16)); }
.visitor-business-card h3 { font-size: 0.69rem; }
.visitor-business-card > div > strong { color: var(--green-700); font-size: 0.55rem; }
.visitor-business-card p { margin: 4px 0 7px; color: var(--ink-soft); font-size: 0.53rem; line-height: 1.45; }
.visitor-business-card .business-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visitor-home-link { display: block; margin-top: 12px; text-align: center; text-decoration: none; }
.game.is-visitor-mode .view-tab:not([data-view="plot"]):not([data-service="home"]):not([data-service="business"]):not([data-service="vehicles"]):not([data-service="wardrobe"]):not([data-service="trophies"]) { display: none; }
.game.is-visitor-mode .player-stats { display: none; }
.game.is-visitor-mode .owner-plot-control { display: none; }

.business-mini-game { margin-top: 12px; padding: 13px; border: 1px solid rgba(224,174,28,0.55); border-radius: 17px; background: linear-gradient(145deg, #fff6bf, #fffdf4 56%, #e8f5e4); box-shadow: 0 10px 25px rgba(99,75,13,0.12); }
.business-mini-game__head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.business-mini-game__head > span { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 12px; background: #fff; font-size: 1.25rem; }
.business-mini-game__head small { color: #8a7117; font-size: 0.48rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.business-mini-game__head h3 { margin: 1px 0 0; color: var(--green-900); font-size: 0.75rem; }
.business-mini-game__head em { color: var(--green-700); font-size: 0.57rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.business-mini-game > p { margin: 9px 0 5px; color: var(--ink-soft); font-size: 0.58rem; }
.order-prompt { display: block; padding: 8px 10px; border-radius: 10px; color: #614d0c; background: rgba(255,255,255,0.72); font-size: 0.6rem; }
.order-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 7px; }
.order-option { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 9px 4px; border: 1px solid rgba(27,91,62,0.14); border-radius: 11px; color: var(--green-900); background: #fff; }
.order-option:hover { border-color: rgba(29,112,89,0.48); transform: translateY(-1px); }
.order-option.is-selected { border-color: #dcad1d; background: #fff1a9; box-shadow: inset 0 0 0 2px rgba(220,173,29,0.16); }
.order-option > span { font-size: 1.12rem; }
.order-option strong { max-width: 100%; overflow: hidden; font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.order-option em { position: absolute; top: 4px; right: 5px; display: grid; width: 18px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: var(--green-700); font-size: 0.48rem; font-style: normal; font-weight: 900; }
.order-answer { display: flex; min-height: 31px; flex-wrap: wrap; gap: 5px; align-items: center; padding: 6px 8px; border: 1px dashed rgba(27,91,62,0.24); border-radius: 10px; background: rgba(255,255,255,0.55); }
.order-answer span { padding: 4px 6px; border-radius: 8px; color: var(--green-800); background: #e8f4e4; font-size: 0.49rem; font-weight: 800; }
.business-mini-game .life-card__actions { margin-top: 8px; }
.business-mini-game .life-action { flex: 1; }
.order-attempts { display: block; margin-top: 7px; color: #786921; font-size: 0.48rem; text-align: center; }
.prepared-order.is-ready { background: linear-gradient(135deg, #e5f5da, #fffdf2); }
.season-card { background: linear-gradient(145deg, #fff8d7, #ffffff 62%); }
.season-main-meter { height: 10px; margin: 12px 0 14px; }
.season-reward-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.season-reward { display: grid; align-content: start; justify-items: center; min-width: 0; padding: 8px 4px; border: 1px solid rgba(119, 133, 120, 0.16); border-radius: 11px; opacity: 0.56; background: rgba(255,255,255,0.72); text-align: center; }
.season-reward.is-reached { border-color: rgba(224, 174, 28, 0.48); opacity: 1; background: #fff9dd; }
.season-reward.is-claimed { border-color: rgba(37, 129, 79, 0.3); background: #eaf6e6; }
.season-reward > span { font-size: 1rem; }
.season-reward > strong { margin: 2px 0; color: var(--green-800); font-size: 0.64rem; }
.season-reward > small { min-height: 31px; color: var(--ink-soft); font-size: 0.46rem; line-height: 1.35; }
.season-reward .life-action { width: 100%; min-height: 27px; margin-top: 6px; padding: 5px 2px; font-size: 0.48rem; }
#tasks-panel .life-card { padding: 9px; }
#tasks-panel .life-card h3, #tasks-panel .challenge-card h3, #tasks-panel .city-job h3 { font-size: .72rem; }
#tasks-panel .life-card p, #tasks-panel .challenge-card p, #tasks-panel .city-job p { margin: 1px 0 4px; font-size: .6rem; line-height: 1.35; }
#tasks-panel .life-card__value { font-size: .64rem; white-space: nowrap; }
#tasks-panel .life-action { min-height: 30px; margin-top: 5px; padding: 4px 9px; font-size: .6rem; }
#tasks-panel .challenge-card { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; }
#tasks-panel .challenge-icon { width: 30px; }
#tasks-panel .city-job-list { padding: 6px; }
#tasks-panel .city-job { grid-template-columns: 30px minmax(0, 1fr); align-items: start; padding: 8px; }
#tasks-panel .city-job__icon { width: 30px; }
#tasks-panel .city-job.is-locked { opacity: .7; }
.city-board__note { margin: 0; padding: 0 10px 8px; color: var(--ink-soft); font-size: .6rem; font-weight: 800; }
#tasks-panel .season-reward-track { grid-template-columns: minmax(0, 1fr); gap: 4px; }
#tasks-panel .season-reward { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 6px; padding: 6px 8px; }
#tasks-panel .season-reward > div { display: grid; min-width: 0; }
#tasks-panel .season-reward strong { color: var(--green-800); font-size: .62rem; }
#tasks-panel .season-reward small { min-height: 0; color: var(--ink-soft); font-size: .58rem; }
#tasks-panel .season-reward .life-action { width: auto; margin: 0; padding: 4px 9px; }
#tasks-panel .season-main-meter { margin: 6px 0 8px; }
.task-done { display: block; margin-top: 4px; color: #176b52; font-size: .62rem; font-weight: 900; }
.challenge-list { display: grid; gap: 7px; }
.challenge-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.challenge-card.is-ready { border-color: rgba(224, 174, 28, 0.52); background: linear-gradient(135deg, #fff9dc, #fff); box-shadow: inset 3px 0 0 #efbd2e; }
.challenge-card.is-claimed { opacity: 0.62; background: #f2f6ee; }
.challenge-icon { display: grid; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 11px; background: #edf5e8; font-size: 1.15rem; }
.challenge-card__body { min-width: 0; }
.challenge-card__body h3 { font-size: 0.7rem; }
.challenge-card__body p { margin: 3px 0 4px; color: var(--ink-soft); font-size: 0.57rem; }
.challenge-card__body .life-card__value { font-size: 0.52rem; }
.challenge-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.challenge-progress .life-meter { margin: 2px 0; }
.challenge-progress strong { color: var(--green-700); font-size: 0.54rem; }
.challenge-card > .life-action { min-width: 62px; padding-inline: 6px; }
.mini-progress-list { display: grid; gap: 7px; }
.mini-progress {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(22, 76, 58, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
}
.mini-progress > span { color: var(--green-700); font-size: 1.25rem; text-align: center; }
.mini-progress strong, .mini-progress small { display: block; }
.mini-progress small { margin-top: 2px; color: var(--text-soft); }
.mini-progress.is-complete { border-color: rgba(224, 174, 28, 0.35); background: #fffbeb; }
.life-card {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}
.life-card--accent { background: linear-gradient(145deg, #eef8df, #fff8dd); }
.life-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.life-card h3 { margin: 0; font-size: 0.82rem; }
.life-card p { margin: 4px 0 10px; color: var(--ink-soft); font-size: 0.68rem; line-height: 1.5; }
.life-card__value { white-space: nowrap; color: var(--green-700); font-size: 0.74rem; font-weight: 900; }
.life-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.life-action {
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--green-700);
    font-size: 0.64rem;
    font-weight: 900;
}
.life-action:hover { background: var(--green-800); }
.life-action--gold { color: #574100; background: #ffe477; }
.life-action--gold:hover { background: #ffd84d; }
.life-action--soft { color: var(--green-800); background: #eaf3e7; }
.interior-shop-card .life-action--soft:not(:disabled):hover,
.interior-owned-card .life-action--soft:not(:disabled):hover,
.home-stage .life-action--soft:not(:disabled):hover,
.home-purchase-preview .life-action--soft:not(:disabled):hover { color: #fff; }
.interior-shop-card .life-action--soft:disabled:hover { background: #eaf3e7; }
.life-action--danger { background: #b45447; }
.life-action:disabled { cursor: not-allowed; opacity: 0.42; }

.life-input-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 9px; }
.life-input {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    background: #fbfcf8;
    font-size: 0.69rem;
    font-weight: 800;
}
.life-meter { height: 7px; margin: 8px 0; overflow: hidden; border-radius: 99px; background: #e8eee6; }
.life-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--banana-deep), var(--green-500)); }
.life-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.life-badge { padding: 4px 7px; border-radius: 99px; color: var(--ink-soft); background: #edf3e9; font-size: 0.57rem; font-weight: 900; }
.life-badge--good { color: #12613e; background: #dff4de; }
.life-badge--warn { color: #7b4b00; background: #fff0bd; }

#bank-panel .life-card { padding: 9px; }
#bank-panel .life-card h3 { font-size: .74rem; }
#bank-panel .life-card p { margin: 2px 0 6px; font-size: .62rem; line-height: 1.35; }
#bank-panel .life-card__value { font-size: .66rem; }
#bank-panel .life-action { min-height: 32px; padding: 4px 9px; font-size: .62rem; }
#bank-panel .life-input { min-height: 32px; padding: 4px 8px; font-size: .72rem; }
#bank-panel .life-input-row { margin-top: 4px; }
#bank-panel .bank-transfer-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.bank-note { margin: 8px 2px 0; color: var(--ink-soft); font-size: .6rem; line-height: 1.4; }
.finance-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 12px; }
.finance-summary > div { padding: 11px; border-radius: 12px; color: #fff; background: var(--green-800); }
.finance-summary strong { display: block; font-size: 1rem; }
.finance-summary small { color: rgba(255,255,255,0.65); font-size: 0.6rem; }

.vehicle-card, .clothing-card { display: grid; grid-template-columns: 42px 1fr; gap: 10px; }
.life-item-icon { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 12px; background: #eff5e7; font-size: 1.35rem; }
.vehicle-card { grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px; }
.vehicle-card h3 { font-size: .72rem; }
.vehicle-card p { margin: 1px 0 5px; font-size: .6rem; line-height: 1.35; }
.vehicle-card .life-card__value { font-size: .64rem; }
.vehicle-card > div > .life-card__actions .life-action, .vehicle-card > div > .life-action { min-height: 30px; padding: 4px 8px; font-size: .6rem; }
.vehicle-card .condition-line { font-size: .56rem; }
.life-item-icon--vehicle { width: 72px; height: 54px; aspect-ratio: auto; overflow: hidden; background: linear-gradient(145deg, #f7f4df, #e3f2e6); }
.life-item-icon--vehicle img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(29, 66, 50, 0.16)); }
.clothing-card { grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px; }
.clothing-card h3 { font-size: .72rem; }
.clothing-card p { margin: 1px 0 0; font-size: .6rem; line-height: 1.35; }
.clothing-card .life-card__value { color: #176b52; font-size: .62rem; font-weight: 900; }
.clothing-card .life-card__actions { margin-top: 6px; }
.clothing-card .life-action { min-height: 30px; padding: 4px 8px; font-size: .6rem; }
.clothing-card .owned-count { color: #176b52; font-weight: 800; }
.clothing-card > div > .life-action { margin-top: 6px; }
.wardrobe-clean { width: 100%; margin-top: 8px; min-height: 32px; font-size: .62rem; }
#wardrobe-panel .character-library { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#wardrobe-panel .character-choice { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; padding: 6px; text-align: center; }
#wardrobe-panel .character-choice p { display: none; }
#wardrobe-panel .character-choice .life-action { width: 100%; min-height: 30px; padding: 4px 8px; font-size: .6rem; }

.interior-panel {
    overflow: hidden;
    border: 1px solid rgba(38, 111, 79, 0.2);
    border-radius: 18px;
    background: #f7f5e9;
    box-shadow: 0 10px 24px rgba(24, 76, 58, 0.08);
}
.room-tabs { display: grid; grid-template-columns: repeat(5, minmax(95px, 1fr)); gap: 5px; overflow-x: auto; padding: 8px; background: #e8efe1; }
.room-tab { display: grid; gap: 2px; min-width: 95px; padding: 8px; border: 1px solid transparent; border-radius: 10px; color: var(--green-800); background: rgba(255,255,255,0.72); text-align: left; }
.room-tab strong { font-size: 0.67rem; }
.room-tab small { color: var(--ink-soft); font-size: 0.55rem; }
.room-tab.is-active { border-color: #e6b92f; background: #fff3b9; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8); }
.room-tab:disabled { cursor: not-allowed; filter: grayscale(0.45); opacity: 0.55; }
.interior-room { padding: 11px; }
.interior-room__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.interior-room__heading div { display: grid; gap: 2px; }
.interior-room__heading small, .interior-room__heading span { color: var(--ink-soft); font-size: 0.58rem; }
.interior-room__heading strong { font-size: 0.86rem; }
.interior-room__heading b { color: var(--green-700); font-size: 0.65rem; white-space: nowrap; }
.interior-room__scene {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 155px;
    overflow: hidden;
    align-items: end;
    gap: 2px;
    padding: 18px 20px 10px;
    border: 1px solid rgba(140, 101, 45, 0.16);
    border-radius: 15px;
    background:
        linear-gradient(150deg, transparent 0 61%, rgba(121, 78, 35, 0.09) 61% 62%, transparent 62%) 0 0 / 45px 45px,
        linear-gradient(30deg, transparent 0 61%, rgba(121, 78, 35, 0.09) 61% 62%, transparent 62%) 0 0 / 45px 45px,
        linear-gradient(to bottom, #f4e6bd 0 66%, #d4aa67 66% 100%);
}
.interior-room__scene::before { content: ""; position: absolute; inset: 10px 12px auto; height: 65%; border-radius: 12px 12px 2px 2px; background: linear-gradient(160deg, rgba(255,255,255,0.42), transparent 55%), #dfeecb; box-shadow: inset 0 -4px 0 rgba(47,110,77,0.12); }
.interior-room__scene img { position: relative; z-index: 1; display: block; width: 100%; height: 125px; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(49, 63, 41, 0.2)); }
.interior-room__scene.is-empty { place-items: center; }
.interior-room__scene p { position: relative; z-index: 1; grid-column: 1 / -1; margin: 0; padding: 12px; color: var(--ink-soft); font-size: 0.68rem; text-align: center; }
.interior-owned-list { display: grid; gap: 7px; margin-top: 9px; }
.interior-owned-card .interior-item-visual { height: 52px; border-radius: 9px; }
.interior-owned-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px; border-radius: 12px; background: rgba(255,255,255,0.76); }
.interior-owned-card > div { display: grid; gap: 3px; }
.interior-owned-card > div > small { color: var(--ink-soft); font-size: 0.58rem; }
.interior-owned-card .life-card__actions { align-items: center; margin-top: 3px; }
.interior-owned-card .life-card__actions > span { color: var(--ink-soft); font-size: 0.54rem; font-weight: 800; }
.interior-owned-card .life-action { padding: 5px 7px; font-size: 0.55rem; }
.pet-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
.interior-item-visual { display: grid; height: 92px; min-width: 0; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg, #edf6dd, #fff3ce); }
.interior-item-visual img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(31,78,52,0.18)); }
.interior-item-visual--pet { height: 120px; background: radial-gradient(circle at 50% 30%, #fff7d7, #dceec8); }
.pet-card .life-meter { margin: 7px 0 9px; background: #dbe7d6; }
.pet-adoption { margin-top: 8px; }
.pet-adoption summary { cursor: pointer; color: var(--green-700); font-size: 0.67rem; font-weight: 900; }
.pet-adoption[open] summary { margin-bottom: 8px; }
.life-item-icon--clothing { width: 56px; height: 56px; aspect-ratio: auto; overflow: hidden; background: linear-gradient(145deg, #fff9df, #e8f4e8); }
.life-item-icon--clothing img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(29, 66, 50, 0.14)); }
.life-item-icon--studio { width: 72px; height: 96px; aspect-ratio: auto; overflow: hidden; background: radial-gradient(circle at 50% 28%, #fff8d8, #ddecda); }
.life-item-icon--studio svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 4px rgba(29,66,50,.14)); }
.condition-line { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 0.59rem; font-weight: 800; }
.outfit-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 5px; margin: 10px 0; }
.outfit-slot { display: grid; min-height: 55px; place-items: center; padding: 5px; border: 1px dashed #b9c8bd; border-radius: 10px; color: #6c837b; background: #f8faf5; text-align: center; font-size: 0.55rem; font-weight: 800; }
.outfit-slot.is-filled { border-style: solid; border-color: #93c69f; color: var(--green-800); background: #eaf7e5; }
.outfit-slot__image { display: block; width: 42px; height: 38px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(29, 66, 50, 0.13)); }
.outfit-slot__studio { display: block; width: 42px; height: 48px; overflow: hidden; }
.outfit-slot__studio svg { width: 100%; height: 100%; }

.quest-card { position: relative; padding-left: 48px; }
.quest-state { position: absolute; top: 13px; left: 13px; display: grid; width: 26px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: #a4b2aa; font-size: 0.72rem; font-weight: 900; }
.quest-card.is-ready .quest-state { color: var(--green-900); background: var(--banana); }
.quest-card.is-claimed { opacity: 0.62; }

.social-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.social-summary > div { padding: 10px 6px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, var(--green-700), var(--green-900)); text-align: center; }
.social-summary strong, .social-summary small { display: block; }
.social-summary strong { font-size: 0.8rem; }
.social-summary small { margin-top: 2px; color: rgba(255,255,255,0.68); font-size: 0.52rem; }
.world-directory-jumps a:focus-visible, .world-directory-regions button:focus-visible, .world-ranking-row:focus-visible { outline: 3px solid #f4c832; outline-offset: 2px; }
.world-directory-regions { display: flex; gap: 5px; overflow-x: auto; padding: 2px 2px 5px; scrollbar-width: thin; }
.world-directory-regions button { display: inline-flex; flex: none; gap: 5px; align-items: center; padding: 6px 8px; border: 1px solid rgba(31,118,91,.16); border-radius: 99px; color: #2d6353; background: rgba(255,255,255,.8); font-size: .47rem; font-weight: 900; cursor: pointer; }
.world-directory-regions button[aria-pressed="true"] { color: #fff; background: var(--green-700); }
.world-directory-regions button span { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 99px; color: inherit; background: rgba(255,255,255,.2); font-size: .42rem; }
.world-directory-regions button:not([aria-pressed="true"]) span { background: #e8f1ea; }
.world-directory-status { min-height: 1em; margin: -4px 2px 0; color: var(--ink-soft); font-size: .44rem; }
.world-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.world-gallery-card { min-width: 0; overflow: hidden; border: 1px solid rgba(24,87,65,.12); border-radius: 15px; background: #fff; }
.world-gallery-card__scene { position: relative; height: 106px; overflow: hidden; background: linear-gradient(180deg,color-mix(in srgb,var(--neighbor-color),white 76%),#8dc96a); }
.world-gallery-card__scene > img:first-child { position: absolute; right: -8%; bottom: -12px; width: 116%; height: 78px; object-fit: contain; object-position: center bottom; opacity: .82; }
.world-gallery-card__scene > img:nth-child(2) { position: absolute; z-index: 2; bottom: -2px; left: 50%; width: 62%; height: 94px; object-fit: contain; object-position: center bottom; transform: translateX(-50%); filter: drop-shadow(0 5px 5px rgba(20,50,37,.2)); }
.world-gallery-card__scene > span { position: absolute; z-index: 3; top: 8px; left: 8px; display: grid; width: 28px; aspect-ratio: 1; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--neighbor-color); font-size: .5rem; font-weight: 950; }
.world-gallery-card__scene > em { position: absolute; z-index: 3; top: 8px; right: 8px; padding: 4px 6px; border-radius: 99px; color: #5f4a0b; background: rgba(255,239,151,.94); font-size: .4rem; font-style: normal; font-weight: 900; }
.world-gallery-card__body { display: grid; padding: 8px; }
.world-gallery-card__body > small { color: #8e721d; font-size: .43rem; font-weight: 900; text-transform: uppercase; }
.world-gallery-card__body > strong { margin-top: 1px; color: var(--green-900); font-size: .65rem; }
.world-gallery-card__body p { margin: 3px 0 6px; color: var(--ink-soft); font-size: .48rem; }
.world-gallery-card__body > div { display: flex; flex-wrap: wrap; gap: 4px; }
.world-gallery-card__body > div span { padding: 3px 5px; border-radius: 99px; color: #23614f; background: #edf5e8; font-size: .43rem; font-weight: 900; }
.world-gallery-card__body > a { margin-top: 7px; padding: 6px 8px; border-radius: 8px; color: #fff; background: var(--green-700); font-size: .5rem; font-weight: 900; text-align: center; text-decoration: none; }
.world-ranking-list { display: grid; gap: 5px; }
.world-ranking-list > p { margin: 0; padding: 9px; color: var(--ink-soft); background: rgba(255,255,255,.72); font-size: .52rem; }
.world-ranking-row { display: grid; grid-template-columns: 20px 29px minmax(0,1fr) auto; gap: 6px; align-items: center; min-width: 0; padding: 6px; border: 1px solid rgba(24,84,63,.09); border-radius: 10px; color: inherit; background: rgba(255,255,255,.86); text-decoration: none; }
.world-ranking-row:hover { border-color: rgba(31,118,91,.38); transform: translateY(-1px); }
.world-ranking-row > b { color: #84978d; font-size: .55rem; text-align: center; }
.world-ranking-row > span:nth-child(3) { min-width: 0; }
.world-ranking-row strong, .world-ranking-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-ranking-row strong { color: var(--green-900); font-size: .56rem; }
.world-ranking-row small { color: var(--ink-soft); font-size: .42rem; }
.world-ranking-row em { color: var(--green-700); font-size: .5rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.world-ranking-pager { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; gap: 6px; align-items: center; margin-top: 7px; }
.world-ranking-pager span { color: var(--ink-soft); font-size: .47rem; font-weight: 850; text-align: center; }
.world-ranking-pager button { display: grid; width: 34px; height: 30px; place-items: center; border: 1px solid rgba(27,102,78,.18); border-radius: 9px; color: #fff; background: var(--green-700); font-weight: 950; cursor: pointer; }
.world-ranking-pager button:disabled { color: #789087; background: #dfe9e3; cursor: default; }

.trophy-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-top: 56px;
    overflow: hidden;
    color: #fff7d9;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 217, 105, 0.2), transparent 55%),
        linear-gradient(145deg, #102e27 0%, #174f41 54%, #0a261f 100%);
    container-type: size;
    isolation: isolate;
}
.trophy-stage[hidden] { display: none; }
.neighbors-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 76px 16px 16px;
    overflow-y: auto;
    color: #fff7d9;
    background: linear-gradient(160deg, #18604f 0%, #174f41 55%, #0f3a30 100%);
    isolation: isolate;
}
.neighbors-stage[hidden] { display: none; }
.neighbors-stage > * { flex: none; }
.neighbors-stage .world-directory-regions { margin: 0; }
.neighbors-stage .world-directory-regions button { padding: 6px 12px; font-size: .74rem; }
.neighbors-stage .world-directory-regions button span { font-size: .66rem; }
.neighbors-stage__sorts { display: flex; flex-wrap: wrap; gap: 6px; }
.neighbors-stage__sorts button { padding: 6px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; color: #fff7d9; background: transparent; font-size: .74rem; font-weight: 800; cursor: pointer; }
.neighbors-stage__sorts button[aria-pressed="true"] { border-color: var(--banana, #ffd84d); color: #173b34; background: var(--banana, #ffd84d); }
.neighbors-stage__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.neighbors-stage__grid[aria-busy="true"] { opacity: .6; }
.neighbors-stage__empty { grid-column: 1 / -1; padding: 32px 12px; text-align: center; font-size: .9rem; }
.neighbors-stage .world-gallery-card__scene { height: 160px; }
.neighbors-stage .world-gallery-card__scene > img:first-child { height: 110px; }
.neighbors-stage .world-gallery-card__scene > img:nth-child(2) { height: 140px; }
.neighbors-stage .world-gallery-card__scene > span { width: 36px; font-size: .78rem; }
.neighbors-stage .world-gallery-card__scene > em { font-size: .62rem; }
.neighbors-stage .world-gallery-card__body { padding: 12px; }
.neighbors-stage .world-gallery-card__body > small { font-size: .62rem; }
.neighbors-stage .world-gallery-card__body > strong { font-size: 1rem; }
.neighbors-stage .world-gallery-card__body p { font-size: .74rem; }
.neighbors-stage .world-gallery-card__body > div span { font-size: .68rem; }
.neighbors-stage .world-gallery-card__body > a { margin-top: 10px; padding: 9px 10px; font-size: .8rem; text-align: center; }
.neighbors-stage .world-ranking-pager { color: #fff7d9; }
.vitrine-stage {
    position: relative;
    flex: none;
    /* Passt in beide Richtungen: oben Werkzeugleiste, unten Beschreibung. */
    width: min(100cqw - 16px, (100cqh - 64px) * 1.5);
    aspect-ratio: 3 / 2;
    container-type: inline-size;
}
.vitrine-stage__schrank { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Ein Boden: die Pokale stehen unten auf dem Glas. */
.vitrine-shelf { position: absolute; display: flex; align-items: flex-end; justify-content: center; }
.vitrine-trophy {
    position: relative;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    box-shadow: none;
    cursor: pointer;
    transition: transform 150ms ease;
    transform-origin: 50% 100%;
}
.vitrine-trophy > img {
    display: block;
    /* Die Henkel dürfen in den Nachbarplatz ragen, sonst bleiben die Pokale klein. */
    width: 118%;
    max-width: none;
    height: 100%;
    margin-left: -9%;
    object-fit: contain;
    object-position: 50% 100%;
    filter: drop-shadow(0 0.4cqw 0.5cqw rgba(0, 0, 0, 0.45));
}
.vitrine-trophy > span {
    position: absolute;
    left: 50%;
    bottom: 1%;
    display: grid;
    width: 2.1cqw;
    height: 2.1cqw;
    place-items: center;
    border-radius: 50%;
    font-size: 1.25cqw;
    line-height: 1;
    background: rgba(255, 250, 230, 0.94);
    box-shadow: 0 0 0 0.15cqw #c79a2c;
    transform: translateX(-50%);
}
.vitrine-trophy:hover, .vitrine-trophy:focus-visible, .vitrine-trophy.is-selected { transform: scale(1.14); }
.vitrine-trophy:focus-visible { outline: 2px solid #ffe08a; outline-offset: 1px; }
.vitrine-trophy.is-selected > img { filter: drop-shadow(0 0 0.8cqw #ffe08a); }
.vitrine-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    min-height: 56px;
    margin: 0;
    padding: 6px 14px 10px;
    color: #fff7d9;
    text-align: center;
}
.vitrine-info > span { font-size: 1.3rem; line-height: 1; }
.vitrine-info > div { display: grid; gap: 1px; text-align: left; }
.vitrine-info strong { font-size: 0.9rem; }
.vitrine-info small { color: rgba(255,255,255,0.78); font-size: 0.72rem; line-height: 1.35; }

.readonly-note {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    padding: 9px 10px;
    border-radius: 12px;
    color: #306055;
    background: #e9f6ef;
    font-size: 0.61rem;
    line-height: 1.4;
}
.readonly-note strong { color: var(--green-800); white-space: nowrap; }
.public-awards-link {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 1px 8px;
    margin: 0 0 12px;
    padding: 9px 11px;
    border: 1px solid #e2cf85;
    border-radius: 12px;
    color: #38574f;
    background: linear-gradient(135deg, #fff9df, #f4e4a5);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(95, 75, 20, 0.09);
}
.public-awards-link > span { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #fff; }
.public-awards-link strong { color: #274e43; font-size: 0.66rem; }
.public-awards-link small { color: #776c45; font-size: 0.54rem; }
.public-awards-link:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(95, 75, 20, 0.14); }


.award-plaque-list { display: grid; gap: 7px; }
.award-plaque {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #e3d8ad;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffdf4, #f7efd5);
    box-shadow: inset 3px 0 #d9b84d;
}
.award-plaque > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #fff; font-size: 1.05rem; box-shadow: 0 3px 9px rgba(67, 53, 16, 0.13); }
.award-plaque > div { display: grid; gap: 2px; }
.award-plaque strong { color: #3d4d34; font-size: 0.66rem; }
.award-plaque small { color: #6a7865; font-size: 0.55rem; line-height: 1.35; }
.award-plaque time { color: #9b7929; font-size: 0.51rem; font-weight: 800; }
.award-plaque.is-preview { box-shadow: inset 3px 0 #93b7aa; filter: saturate(0.82); }
.empty-awards { margin: 0; padding: 12px; border-radius: 12px; color: #687b74; background: #f3f7f4; font-size: 0.65rem; text-align: center; }

.trophy-row-list { display: grid; gap: 5px; }
.trophy-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 6px 9px 6px 6px; border: 1px solid rgba(22, 76, 56, .12); border-radius: 11px; background: #fff; }
.trophy-row img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: #164a3c; }
.trophy-row strong { display: block; overflow: hidden; color: var(--green-900); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.trophy-row .life-meter { height: 6px; margin: 4px 0 0; }
.trophy-row em { color: var(--green-700); font-size: .66rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.trophy-row.is-locked img { filter: saturate(.25); opacity: .65; }
.trophies-public-link { display: block; margin-top: 10px; padding: 8px 10px; border: 1px solid #e3d8ad; border-radius: 10px; color: #274e43; background: #fff9e5; font-size: .64rem; font-weight: 800; text-align: center; text-decoration: none; }
.trophies-public-link:hover { background: #fff3c9; }
.medal-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 4px; }
.medal-tally > div { display: grid; justify-items: center; padding: 7px 4px; border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--green-700), var(--green-900)); }
.medal-tally span { font-size: .95rem; line-height: 1.1; }
.medal-tally strong { font-size: .82rem; }
.medal-tally small { color: rgba(255, 255, 255, .72); font-size: .56rem; }
#trophies-panel .section-heading h3 { white-space: nowrap; }
#trophies-panel .award-plaque { grid-template-columns: 30px minmax(0, 1fr); padding: 7px 9px; }
#trophies-panel .award-plaque strong { font-size: .68rem; }
#trophies-panel .award-plaque small { font-size: .6rem; }
#trophies-panel .award-plaque time { font-size: .56rem; }
#trophies-panel .medal-game-row { font-size: .64rem; }
#trophies-panel .medal-game-row strong { font-size: .6rem; }
#trophies-panel .empty-awards { font-size: .64rem; }
#trophies-panel .medal-game-list { margin-top: 0; }
.medal-game-list { display: grid; gap: 5px; margin-top: 8px; }
.medal-game-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f3f7f4; font-size: 0.61rem; }
.medal-game-row > span { overflow: hidden; color: #315a50; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.medal-game-row strong { display: flex; gap: 6px; color: #526861; font-size: 0.55rem; font-style: normal; white-space: nowrap; }
.medal-game-row i { font-style: normal; }

@media (max-width: 540px) {
    .pet-card { grid-template-columns: 88px minmax(0, 1fr); }
    .interior-item-visual { height: 82px; }
    .interior-item-visual--pet { height: 104px; }
    .readonly-note { grid-template-columns: auto 1fr; }
    .readonly-note strong { white-space: normal; }
    .readonly-note strong + * { grid-column: 2; }
    .economy-guard { grid-template-columns: 36px minmax(0, 1fr); }
    .economy-guard > em { grid-column: 2; justify-self: start; }
    .career-card { grid-template-columns: 38px minmax(0, 1fr); }
    .career-card > .life-action { grid-column: 2; max-width: none; justify-self: start; }
    .prepared-order { grid-template-columns: 40px minmax(0, 1fr); }
    .prepared-order > .life-action { grid-column: 2; justify-self: start; }
    .business-order { grid-template-columns: 34px minmax(0, 1fr); }
    .business-order > .life-action { grid-column: 2; justify-self: start; }
    .business-equipment-list { grid-template-columns: 1fr; }
    .business-equipment { display: grid; grid-template-columns: 94px minmax(0, 1fr); }
    .business-equipment__visual { height: 100%; min-height: 112px; }
    .business-stats { grid-template-columns: repeat(2, 1fr); }
    .order-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-mini-game__head { grid-template-columns: 38px minmax(0, 1fr); }
    .business-mini-game__head > em { grid-column: 2; }
}
.visit-history { margin-top: 0; }
#neighbors-panel .section-heading h3 { white-space: nowrap; }
#neighbors-panel .social-summary { gap: 5px; margin-bottom: 4px; }
#neighbors-panel .social-summary > div { padding: 7px 4px; border-radius: 10px; text-align: center; }
#neighbors-panel .social-summary strong { font-size: .78rem; }
#neighbors-panel .social-summary small { font-size: .56rem; line-height: 1.2; }
#neighbors-panel .world-ranking-row.is-player { border-color: rgba(224, 174, 28, .48); background: #fff8d9; }
#neighbors-panel .world-ranking-row strong { font-size: .68rem; }
#neighbors-panel .world-ranking-row small { font-size: .56rem; }
#neighbors-panel .world-ranking-row em { font-size: .62rem; }
#neighbors-panel .world-ranking-row > b { font-size: .62rem; }
#neighbors-panel .world-ranking-list > p { font-size: .62rem; }
#neighbors-panel .world-ranking-pager span { font-size: .58rem; }
.neighbor-rules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.neighbor-rules li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 9px; border: 1px solid rgba(22, 76, 56, .1); border-radius: 9px; color: var(--ink-soft); background: #fff; font-size: .62rem; line-height: 1.3; }
.neighbor-rules b { flex: none; color: var(--green-700); font-size: .64rem; white-space: nowrap; }
.ranking-list { display: grid; gap: 5px; }
.ranking-row { display: grid; grid-template-columns: 22px 32px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 8px; border: 1px solid rgba(22, 76, 58, 0.08); border-radius: 11px; background: rgba(255,255,255,0.8); }
.ranking-row.is-player { border-color: rgba(224, 174, 28, 0.48); background: #fff8d9; box-shadow: inset 3px 0 0 #efbd2e; }
.ranking-row > b { color: #8a9b91; font-size: 0.62rem; text-align: center; }
.ranking-avatar { display: grid; width: 32px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: var(--rank-color); font-size: 0.52rem; font-weight: 900; }
.ranking-row strong, .ranking-row small { display: block; }
.ranking-row strong { color: var(--green-900); font-size: 0.64rem; }
.ranking-row small { color: var(--ink-soft); font-size: 0.5rem; }
.ranking-row em { color: var(--green-700); font-size: 0.58rem; font-style: normal; font-weight: 900; white-space: nowrap; }

.ledger { display: grid; gap: 5px; margin-top: 8px; }
.ledger-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.61rem; }
.ledger-row span:first-child { color: var(--ink-soft); }
.ledger-row strong.is-plus { color: #167046; }
.ledger-row strong.is-minus { color: #a4483d; }

@media (max-width: 980px) {
    .game { padding: 0; }
    .world-topbar { grid-template-columns: 1fr auto; border-radius: 0; }
    .view-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 6px; }
    .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(340px, 58%) minmax(0, 42%); height: calc(100dvh - 120px - var(--bw-site-offset)); min-height: 650px; border-radius: 0; }
    .stage { min-height: 0; }
    .side-panel { max-height: 42vh; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 620px) {
    .world-hero { background-position: 61% center; }
    .hero__content { align-self: end; margin: 0 auto; padding: 35px 0 42px; }
    .world-hero h1 { font-size: clamp(3.2rem, 18vw, 5.2rem); }
    .hero__lead { font-size: 1rem; }
    .world-topbar { padding: 9px; }
    .brand-lockup strong { font-size: 0.83rem; }
    .brand-mark { width: 36px; }
    .stat-pill { min-width: auto; padding: 7px 9px; }
    .stat-pill small { display: none; }
    .player-stats .stat-pill:nth-child(2) { display: none; }
    .view-tab { padding: 8px 11px; }
    .workspace { grid-template-rows: minmax(320px, 56%) minmax(0, 44%); }
    .stage { min-height: 0; }
    .side-panel { max-height: 44vh; padding: 20px; }
    .camera-help { display: none; }
    .plot-camera-controls { top: 10px; right: 9px; }
    .plot-camera-controls button { min-width: 40px; height: 40px; }
    .placement-assistant:not([hidden]) {
        position: absolute;
        z-index: 31;
        right: 9px;
        bottom: 68px;
        left: 9px;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 40px 40px;
        gap: 8px;
        align-items: center;
        padding: 8px;
        border: 1px solid rgba(255,255,255,.6);
        border-radius: 15px;
        color: #fff;
        background: rgba(12,57,48,.94);
        box-shadow: 0 12px 28px rgba(4,35,29,.26);
        backdrop-filter: blur(10px);
    }
    .seasonal-catalog__head { grid-template-columns: 34px minmax(0,1fr); }
    .seasonal-catalog__head em { grid-column: 2; }
    .seasonal-catalog__items { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .placement-assistant img { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.86); }
    .placement-assistant > div { display: grid; min-width: 0; }
    .placement-assistant small { color: #ffe57c; font-size: .46rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
    .placement-assistant strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
    .placement-assistant span { overflow: hidden; color: rgba(255,255,255,.74); font-size: .46rem; text-overflow: ellipsis; white-space: nowrap; }
    .placement-assistant button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; color: #183f35; background: #ffe36a; font: 900 1.15rem/1 system-ui,sans-serif; }
    .placement-assistant #cancel-placement { color: #fff; background: rgba(255,255,255,.14); }
    .edit-toolbar { right: 9px; bottom: 9px; left: 9px; justify-content: space-between; overflow-x: auto; transform: none; }
    .edit-toolbar span { display: none; }
    .edit-toolbar button { min-width: 42px; min-height: 42px; justify-content: center; font-size: 1.05rem; }
    .business-yard-toolbar { top: 9px; right: 9px; left: 9px; grid-template-columns: auto minmax(0, 1fr); padding: 7px 9px; }
    .business-yard-toolbar.is-visitor { grid-template-columns: auto minmax(0, 1fr) auto; }
    .business-yard-toolbar em { display: none; }
    .business-yard-toolbar strong { font-size: 0.69rem; }
    .business-yard-toolbar span { font-size: 0.48rem; }
    .yard-like-button { grid-template-columns: 18px auto; min-width: 62px; padding: 5px 6px; }
    .yard-like-button > span { font-size: 0.86rem; }
    .yard-like-button small { display: none; }
    .yard-order-station { right: 9px; bottom: 9px; max-width: 190px; padding: 8px; }
    .yard-visitor-plaque { right: 9px; bottom: 9px; max-width: 205px; padding: 8px; }
    .yard-walk-hint { display: none; }
    .garage-toolbar { top: 9px; right: 9px; left: 9px; grid-template-columns: auto minmax(0, 1fr); padding: 7px 9px; }
    .garage-toolbar em { display: none; }
    .garage-toolbar strong { font-size: 0.69rem; }
    .garage-toolbar span { font-size: 0.46rem; }
    .garage-walk-hint { display: none; }
    .wardrobe-toolbar { top: 9px; right: 9px; left: 9px; grid-template-columns: auto minmax(0, 1fr); padding: 7px 9px; }
    .wardrobe-toolbar em { display: none; }
    .wardrobe-toolbar strong { font-size: 0.69rem; }
    .wardrobe-toolbar small { font-size: 0.46rem; }
    .wardrobe-profile-portrait { width: 31px; height: 31px; }
    .character-choice { grid-template-columns: 62px minmax(0, 1fr); }
    .character-choice__art { width: 62px; height: 96px; }
    .wardrobe-avatar { width: 105px; height: 176px; }
    .wardrobe-piece { width: 37px; height: 37px; border-radius: 11px; }
    .wardrobe-piece--head { right: -8%; }
    .wardrobe-piece--top { left: -10%; }
    .wardrobe-piece--bottom { right: -10%; }
    .wardrobe-piece--shoes { left: -7%; }
    .wardrobe-display { top: 27%; width: 68px; min-height: 63px; padding: 6px; border-radius: 14px; }
    .wardrobe-display span { font-size: 1.35rem; }
    .wardrobe-display strong { font-size: 0.43rem; }
    .wardrobe-walk-hint { display: none; }
    .saved-look { grid-template-columns: auto minmax(0, 1fr); }
    .saved-look .life-action { grid-column: auto; }
    .garage-rewards { grid-template-columns: 1fr; }
    .visitor-business-card { grid-template-columns: 92px minmax(0, 1fr); }
    .regular-customer-card { grid-template-columns: 36px minmax(0, 1fr); }
    .regular-customer-card > em { grid-column: 2; text-align: left; }
    .project-stage small { display: none; }
    .region-preview-banner { right: 9px; bottom: 9px; left: 9px; grid-template-columns: minmax(0, 1fr) auto; padding: 9px; }
    .region-preview-banner > em { display: none; }
    .region-preview-banner button { padding-inline: 8px; }
    .region-preview-banner .is-confirm { grid-column: 1 / -1; }
    .visitor-object-card__actions { grid-template-columns: 1fr; }
}

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

/* Focused business workbench: one courtyard and its orders, with touch-sized controls. */
.business-picker { display: grid; gap: 6px; margin: 0 0 12px; color: var(--green-900); font-size: .85rem; font-weight: 850; }
.business-picker select { width: 100%; min-width: 0; min-height: 46px; padding: 10px; border: 2px solid #b1cfc0; border-radius: 12px; color: var(--green-900); background: #fff; font: inherit; }
.business-picker select:focus-visible { outline: 3px solid #3ba9ff; outline-offset: 2px; }
.business-current { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 10px; align-items: center; margin-bottom: 12px; }
.business-current > img { width: 64px; height: 64px; object-fit: contain; }
.business-current h2 { margin: 0; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.business-current p { margin: 4px 0 0; font-size: .8rem; color: var(--ink-soft); }
.business-workspace { scroll-margin-block: 12px; border-radius: 12px; }
.business-workspace:focus { outline: 2px solid #3ba9ff; outline-offset: 4px; }
.business-workspace .business-subheading { flex-wrap: wrap; margin-top: 0; }
.business-workspace .business-subheading h3 { margin: 0; font-size: 1rem; }
.business-workspace .business-subheading span { font-size: .8rem; }
.business-order-help, .business-save-status, .business-pending-notice p { margin: 8px 0 12px; font-size: .85rem; line-height: 1.45; }
.business-save-status { padding: 10px; color: #175548; background: #e2f2e8; border-radius: 10px; }
.business-pending-notice { margin-bottom: 12px; padding: 10px; border: 1px solid #e8bd45; border-radius: 12px; background: #fff7d5; }
.business-workspace .business-order { grid-template-columns: 32px minmax(0,1fr); align-items: start; padding: 10px; }
.business-workspace .business-order .life-card__top { flex-wrap: wrap; }
.business-workspace .business-order h4 { font-size: .9rem; }
.business-workspace .business-order .life-card__top > strong { font-size: .8rem; white-space: normal; }
.business-workspace .business-order p { margin-block: 5px; font-size: .83rem; line-height: 1.4; }
.business-workspace .business-order small { font-size: .78rem; }
.business-workspace .life-action { min-height: 44px; font-size: .875rem; }
.business-workspace .business-order > .life-action, .business-workspace .prepared-order > .life-action { grid-column: 1 / -1; justify-self: stretch; width: 100%; margin-top: 4px; }
.business-workspace .prepared-order { grid-template-columns: 36px minmax(0,1fr); padding: 10px; }
.business-workspace .prepared-order strong { font-size: .95rem; }
.business-workspace .prepared-order small, .business-workspace .prepared-order p { font-size: .8rem; line-height: 1.4; }
.business-workspace .business-mini-game { padding: 10px; }
.business-workspace .business-mini-game__head { grid-template-columns: 32px minmax(0,1fr); }
.business-workspace .business-mini-game__head h3 { font-size: .95rem; }
.business-workspace .business-mini-game__head small { font-size: .72rem; }
.business-workspace .business-mini-game__head em { grid-column: 2; font-size: .8rem; }
.business-workspace .business-mini-game > p, .business-workspace .order-prompt { font-size: .85rem; line-height: 1.45; }
.business-workspace .order-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.business-workspace .order-option { min-height: 72px; padding: 8px; }
.business-workspace .order-option strong { font-size: .82rem; overflow-wrap: anywhere; }
.business-workspace .order-answer span, .business-workspace .order-attempts { font-size: .78rem; }
.business-workspace .life-card__actions { flex-wrap: wrap; }
.business-workspace .life-card__actions .life-action { min-width: 100px; }
.business-detail { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 0 10px; background: #fffdf7; }
.business-detail > summary { min-height: 46px; padding-block: 12px; color: var(--green-900); font-size: .85rem; font-weight: 850; cursor: pointer; }
.business-detail > summary:focus-visible { outline: 3px solid #3ba9ff; outline-offset: 1px; }
.business-detail[open] { padding-bottom: 10px; }
.business-detail .life-action { min-height: 44px; }
@media (max-width: 600px) {
    .business-detail .business-equipment h4 { font-size: .85rem; }
    .business-detail .business-equipment p { min-height: 0; font-size: .8rem; }
    .business-detail .business-equipment small { font-size: .75rem; }
    .business-detail .business-equipment .life-card__top { flex-wrap: wrap; }
    .business-detail .business-equipment .life-card__top > strong { font-size: .8rem; }
    .business-detail .business-equipment .life-action { font-size: .85rem; }
}


/* Courtyard stations and matching, reversible side-panel navigation. */
.yard-upgrade.is-interactive { display: block; pointer-events: auto; padding: 0; border: 0; background: transparent; cursor: pointer; }
.yard-upgrade.is-interactive > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.yard-upgrade.is-interactive:hover { filter: drop-shadow(0 10px 8px rgba(25,55,34,.2)) brightness(1.08); }
.yard-areas { position: absolute; z-index: 35; bottom: 17px; left: 18px; }
.yard-areas > summary { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #ffffff99; border-radius: 12px; color: #fff; background: #175548ed; box-shadow: 0 5px 16px #163d3455; font-size: 1.3rem; cursor: pointer; list-style: none; }
.yard-areas > summary::-webkit-details-marker { display: none; }
.yard-areas > summary:focus-visible { outline: 3px solid #3ba9ff; outline-offset: 3px; }
.yard-areas[open] > summary { color: #173b34; background: #ffd84d; }
.yard-areas > nav { position: absolute; bottom: 56px; left: 0; display: grid; gap: 5px; width: 250px; max-width: calc(100vw - 36px); padding: 8px; border: 1px solid #c3d8c9; border-radius: 14px; background: #fffdf7; box-shadow: 0 10px 30px #112e2860; }
.yard-areas nav > button { min-height: 46px; padding: 10px; border: 0; border-radius: 9px; color: #173b34; background: #e9f3e7; font-size: .875rem; font-weight: 800; text-align: left; }
.yard-areas nav > button:hover { background: #fff0a8; }
.business-yard-viewport .yard-walk-hint { left: 76px; max-width: 185px; }
.business-section-return { position: sticky; z-index: 5; top: 0; display: flex; justify-content: flex-end; margin: 0 0 10px; padding: 6px 0; border-bottom: 1px solid #d7e5d9; background: #fffdf7f5; }
.business-section-return > button { min-height: 44px; padding: 9px 12px; border: 1px solid #b0cdbb; border-radius: 10px; color: #175548; background: #edf5e8; font-size: .875rem; font-weight: 800; }
[data-business-equipment], [data-business-project], [data-business-reward] { scroll-margin-top: 68px; }
[data-business-equipment]:focus, [data-business-project]:focus, [data-business-reward]:focus, .business-detail:focus, .visitor-station-inspection:focus { outline: 3px solid #3ba9ff; outline-offset: 3px; }
.business-equipment[data-business-equipment] h4 { font-size: .85rem; overflow-wrap: anywhere; }
.business-equipment[data-business-equipment] p { min-height: 0; font-size: .8rem; }
.business-equipment[data-business-equipment] small { font-size: .75rem; }
.business-equipment[data-business-equipment] .life-card__top { flex-wrap: wrap; }
.business-equipment[data-business-equipment] .life-card__top > strong { font-size: .8rem; }
.business-detail[data-business-details="projects"] .business-subheading strong { font-size: .85rem; }
.business-detail[data-business-details="projects"] .business-subheading span { font-size: .75rem; }
.business-detail[data-business-details="projects"] p, .business-detail[data-business-details="projects"] .project-lock { font-size: .8rem; line-height: 1.4; }
.visitor-station-inspection { margin-bottom: 18px; padding: 12px; border: 1px solid #b2d2bf; border-radius: 14px; background: #fffdf7; scroll-margin-top: 12px; }
.visitor-station-inspection h2 { font-size: 1.1rem; }
.visitor-station-inspection p { font-size: .85rem; line-height: 1.45; }
.visitor-station-item { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 10px; align-items: start; margin-top: 12px; }
.visitor-station-item > img { width: 88px; height: 100px; object-fit: contain; }
.visitor-station-item h3 { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.visitor-station-item p { margin: 6px 0; }
@media (max-width: 600px) { .yard-areas { bottom: 9px; left: 9px; } }


.business-collectible[data-business-reward] strong { font-size: .85rem; overflow-wrap: anywhere; }
.business-collectible[data-business-reward] span { font-size: .8rem; }

.business-card.is-owned { overflow: visible; }

.business-detail[data-business-details="projects"] .business-collectibles { grid-template-columns: minmax(0,1fr); }
.business-collectible[data-business-reward] { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px; }
.business-collectible[data-business-reward] > img { width: 76px; height: 90px; object-fit: contain; }
.business-collectible[data-business-reward] strong { white-space: normal; overflow: visible; text-overflow: clip; }
.business-collectible[data-business-reward] small { font-size: .72rem; }
.business-detail[data-business-details="projects"] .regular-customer-card { grid-template-columns: 32px minmax(0,1fr); }
.business-detail[data-business-details="projects"] .regular-customer-card > em { grid-column: 2; justify-self: start; font-size: .8rem; text-align: left; }
.business-detail[data-business-details="projects"] .regular-customer-card strong { font-size: .85rem; }
.business-detail[data-business-details="projects"] .regular-customer-card small { font-size: .72rem; }
.business-detail[data-business-details="projects"] .regular-customer-card em strong { font-size: .75rem; }
.business-detail[data-business-details="projects"] .weekly-project h4,
.business-detail[data-business-details="projects"] .prestige-project h4 { font-size: .9rem; }
.business-detail[data-business-details="projects"] .project-stage small { font-size: .7rem; line-height: 1.25; overflow-wrap: anywhere; }


/* Consistent area selection and section navigation across the world. */
.world-topbar { grid-template-columns: minmax(160px,.85fr) minmax(0,2.15fr) auto; gap: 12px; }
.world-navigation { display: grid; grid-template-columns: minmax(140px,170px) minmax(0,1fr); gap: 8px; min-width: 0; }
.world-area-picker { display: block; min-width: 0; }
.world-area-picker > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.world-area-picker select { width: 100%; min-height: 44px; padding: 8px; border: 1px solid #a7c2b4; border-radius: 11px; color: #173b34; background: #fff4d8; font-size: .85rem; font-weight: 850; }
.world-navigation .view-tabs { grid-column: auto; grid-row: auto; justify-self: stretch; margin: 0; max-width: none; min-width: 0; align-items: center; }
.world-navigation .view-tab { min-height: 44px; }
.panel-sections { position: sticky; z-index: 15; top: 0; margin: 10px 0 14px; padding: 8px; border: 1px solid #bad1c1; border-radius: 12px; background: #fffdf7fa; box-shadow: 0 5px 12px #173b3410; }
.panel-sections label { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: center; color: #175548; font-size: .8rem; font-weight: 800; }
.panel-sections select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #bdd3c3; border-radius: 9px; color: #173b34; background: #fff; font: inherit; }
.panel-sections select:focus-visible, .world-area-picker select:focus-visible { outline: 3px solid #3ba9ff; outline-offset: 2px; }
.panel-section-target, .life-panel [tabindex="-1"], .life-panel .life-action, .life-panel input { scroll-margin-top: 88px; }
.panel-section-target:focus, [data-owned-clothing]:focus, [data-owned-vehicle]:focus { outline: 3px solid #3ba9ff; outline-offset: 3px; }
.life-panel:not(#home-panel, #vehicles-panel, #wardrobe-panel, #bank-panel, #tasks-panel) .life-card h3 { font-size: .92rem; overflow-wrap: anywhere; }
.life-panel:not(#home-panel, #vehicles-panel, #wardrobe-panel, #bank-panel, #tasks-panel) .life-card p { font-size: .82rem; }
.life-panel:not(#home-panel, #vehicles-panel, #wardrobe-panel, #bank-panel, #tasks-panel) .life-card__value { font-size: .8rem; white-space: normal; }
.life-panel:not(#home-panel) .life-card__top { flex-wrap: wrap; }
.life-panel:not(#home-panel, #vehicles-panel, #wardrobe-panel, #bank-panel, #tasks-panel) .life-action { min-height: 44px; font-size: .875rem; }
.life-action--soft:not(:disabled):hover { color: #fff; }
[data-owned-clothing].is-recent-purchase { border-color: #d5ad1c; box-shadow: inset 3px 0 #e7bd39; }
.owned-count { color: #175548 !important; font-weight: 800; }
.wardrobe-search { display: grid; gap: 6px; margin: 10px 0; font-size: .85rem; font-weight: 800; }
.wardrobe-search input { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #b9d0c1; border-radius: 10px; background: #fff; font: inherit; font-weight: 500; }
.wardrobe-inventory-results, .wardrobe-filter-empty { margin: 8px 0; font-size: .8rem; color: #557068; }
@media (max-width: 980px) {
    .world-topbar { grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; }
    .world-navigation { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(140px,42%) minmax(0,1fr); }
}


.brand-lockup > div { min-width: 0; }
.brand-lockup strong, #location-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life-panel .life-input { min-height: 44px; min-width: 0; font-size: 1rem; }
@media (max-width: 620px) {
    .world-area-picker select, .panel-sections select, .wardrobe-search input { font-size: 1rem; }
}

.life-action--soft:disabled:hover { color: var(--green-800); background: #eaf3e7; }

/* Clothing and body share the same facing and motion transform. */
.character-figure__body { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.character-figure__body--rain-boots {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1536'%3E%3Cpath fill='white' d='M0 0h1024v1390H0z'/%3E%3C/svg%3E");
    mask-size: contain; mask-position: center bottom; mask-repeat: no-repeat;
}
.character-figure__crown { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.character-figure__appearance .character-clothing img { transform: none; }
.wardrobe-piece { z-index: 20; pointer-events: auto; }
.character-wearables { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.plot-camera-controls { max-width:calc(100% - 24px); flex-wrap:wrap; }
[data-plot-mode][aria-pressed="true"] { background:#ffd84d; color:#173b34; }
/* Painted architecture is the scene itself; owned upgrades use its actual
   building/veranda/annex locations as interactive areas rather than cutouts. */
.yard-building img, .yard-upgrade img, img.yard-upgrade { opacity:0; animation:none; }
.yard-building { height:38%; filter:none; }
.yard-building:hover { transform:translateX(-50%); filter:brightness(1.06); }
.yard-upgrade--2, .yard-upgrade--3 { aspect-ratio:1; animation:none; filter:none; }
.yard-equipment { height:22%; filter:none; }
.yard-equipment img { opacity:0; animation:none; }
.yard-equipment:hover { transform:none; filter:none; }
.yard-equipment--1 { bottom:4%; left:3%; width:27%; }
.yard-equipment--2 { bottom:5%; right:3%; width:27%; }
.yard-equipment:hover, .yard-upgrade.is-interactive:hover { outline:2px solid #ffe18499; outline-offset:3px; border-radius:12px; }
.yard-reward { bottom:9%; left:32%; width:8%; }
.yard-reward img { animation:none; }
.challenge-card [data-task-action] { min-width:95px; }
.yard-building img, .yard-equipment img, .yard-upgrade.is-interactive img { display:none; }
.yard-equipment:focus-visible, .yard-building:focus-visible, .yard-upgrade.is-interactive:focus-visible { outline:3px solid #ffe184; outline-offset:3px; border-radius:12px; }
.business-yard-scene[data-yard-type] .yard-reward { left:38%; bottom:7%; width:8%; }
.business-yard-scene[data-yard-type="sonnenbistro"] .yard-reward { left:22%; }
.yard-reward:hover { transform:none; }
.business-yard-scene[data-yard-type="bluetenatelier"] .yard-building { top:0; left:0; width:25%; height:43%; transform:none; }
.business-yard-scene[data-yard-type="bluetenatelier"] .yard-building:hover { transform:none; }
.business-yard-scene[data-yard-type="bluetenatelier"] .yard-upgrade--2 { left:30%; top:17%; width:38%; height:20%; aspect-ratio:auto; }
.business-yard-scene[data-yard-type="bluetenatelier"] .yard-upgrade--3 { right:0; top:32%; width:18%; height:15%; aspect-ratio:auto; }
.business-yard-scene[data-yard-type="bluetenatelier"] .yard-equipment--2 { left:auto; right:0; top:0; bottom:auto; width:23%; height:30%; }
.business-yard-scene[data-yard-type="kurierdepot"] .yard-building { left:0; top:16%; width:28%; height:20%; transform:none; }
.business-yard-scene[data-yard-type="kurierdepot"] .yard-upgrade--2 { left:35%; top:28%; width:30%; height:20%; aspect-ratio:auto; }
.business-yard-scene[data-yard-type="kurierdepot"] .yard-upgrade--3 { right:0; top:16%; width:28%; height:16%; aspect-ratio:auto; }
.business-yard-scene[data-yard-type="kurierdepot"] .yard-equipment--1 { left:0; top:39%; bottom:auto; width:28%; height:28%; }
.business-yard-scene[data-yard-type="kurierdepot"] .yard-equipment--2 { right:0; top:35%; bottom:auto; width:26%; height:30%; }
.business-yard-scene[data-yard-type="sonnenbistro"] .yard-building { left:0; top:12%; width:24%; height:19%; transform:none; }
.business-yard-scene[data-yard-type="sonnenbistro"] .yard-upgrade--2 { left:30%; top:15%; width:45%; height:16%; aspect-ratio:auto; }
.business-yard-scene[data-yard-type="sonnenbistro"] .yard-upgrade--3 { right:0; top:12%; width:24%; height:19%; aspect-ratio:auto; }
.business-yard-scene[data-yard-type="sonnenbistro"] .yard-equipment--1 { left:0; top:42%; bottom:auto; width:18%; height:23%; }
.business-yard-scene[data-yard-type="sonnenbistro"] .yard-equipment--2 { right:0; top:35%; bottom:auto; width:25%; height:22%; }
@media(max-width:600px){
    .plot-camera-controls { top:12px; left:12px; right:12px; max-width:none; padding:4px; gap:3px; flex-wrap:nowrap; }
    .plot-camera-controls button { flex:1; min-width:0; min-height:44px; padding:6px 3px; font-size:.75rem; }
    #stage:has(#plot-camera-controls:not([hidden])) .map-chips { top:76px; left:12px; right:auto; }
}
.home-layout-controls .home-layout-heading { display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:8px; }
.home-layout-heading > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width: 601px) {
    /* Eine feste Zeile: Sonst ändert der Text beim Auswählen die Höhe und das Raumbild springt. */
    .home-layout-controls { flex-wrap: nowrap; }
    .home-layout-heading { flex: 1; min-width: 0; }
    .home-layout-controls > [role="group"] { flex: none; flex-wrap: nowrap; }
}
.home-layout-controls .home-layout-heading button { flex:0 0 44px; width:44px; height:44px; margin:0; padding:0; }
.home-scene-tools { position:absolute; z-index:1200; top:10px; left:50%; display:flex; align-items:center; gap:6px; max-width:calc(100% - 20px); padding:5px 6px 5px 12px; border-radius:12px; color:#fff; background:rgba(16,58,47,.92); box-shadow:0 6px 16px rgba(0,0,0,.28); transform:translateX(-50%); }
.home-scene-tools strong { overflow:hidden; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.home-scene-tools .life-action { flex:none; min-height:36px; margin:0; padding:0 11px; font-size:.68rem; }
.home-scene-tools [data-home-done] { color:#574100; background:#ffe477; }
.home-scene-tools [data-home-mirror][aria-pressed="true"] { color:#173b34; background:#bfe6c9; }
#catalog-search, #catalog { scroll-margin-top:88px; }
@media(max-width:600px){
    .home-stage > .home-editor { gap:4px; }
    .home-editor .home-layout-controls { row-gap:4px; }
}

/* Phase 4b (03.11.2026): Früchte, Fütterung, Puzzle-Galerie */
.catalog-fruits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 4px; padding: 10px 12px; border-radius: 14px; background: #fff4d8; color: var(--ink); font-weight: 700; }
.catalog-fruits small { flex-basis: 100%; font-weight: 600; color: var(--ink-soft); }
.pet-feed { margin-top: 10px; }
.pet-feed small { display: block; margin-bottom: 6px; color: var(--ink-soft); }
.pet-feed__buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-feed__buttons .life-action { min-width: 64px; padding-inline: 10px; }
.pet-feed__note { margin: 10px 0 0; font-weight: 700; }
.puzzle-gallery { margin: 18px 0; }
.puzzle-gallery__wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #f6ead2 0%, #ead7b4 100%); box-shadow: inset 0 2px 10px rgba(80, 50, 20, .12); }
.puzzle-frame { margin: 0; text-align: center; }
.puzzle-frame__bild { position: relative; aspect-ratio: 4 / 3; filter: drop-shadow(0 6px 6px rgba(60, 40, 20, .25)); }
.puzzle-frame__rahmen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Die Motive liegen knapp unter dem Rahmen; Öffnungen am Rahmenbild ausgemessen. */
.puzzle-frame__motiv { position: absolute; object-fit: cover; }
.puzzle-frame--treibholz .puzzle-frame__motiv { left: 17.8%; top: 20.4%; width: 64.1%; height: 55.6%; }
.puzzle-frame--bambus .puzzle-frame__motiv { left: 17.5%; top: 20.5%; width: 64.6%; height: 55%; }
.puzzle-frame--blattgold .puzzle-frame__motiv { left: 18.7%; top: 23.7%; width: 62.1%; height: 49.7%; }
.puzzle-frame figcaption { display: grid; gap: 2px; margin-top: 4px; font-size: .82rem; line-height: 1.25; }
.puzzle-frame figcaption small { color: var(--ink-soft); }

/* Rückfrage vor dem Verkauf (index.php #sell-confirm, src/main.js confirmSale()). */
.bw-confirm { width: min(380px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: #fffdf2; box-shadow: 0 24px 60px rgba(8,40,32,0.35); }
.bw-confirm::backdrop { background: rgba(8,40,32,0.55); }
.bw-confirm form { display: grid; gap: 12px; padding: 22px 22px 18px; }
.bw-confirm strong { color: var(--green-900); font-size: 1.05rem; }
.bw-confirm p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.bw-confirm__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.bw-confirm__actions button { padding: 10px 18px; font-size: 0.9rem; }
.bw-confirm .secondary-button { color: var(--green-900); background: #e9efe3; }