/* Chickens! — cozy magical garden UI. All art is inline SVG; this sheet only
   handles layout, sizing, motion and the wooden/glassy chrome. */

:root {
    color-scheme: dark;
    --ink: #271f36;
    --panel: rgba(58, 37, 29, 0.96);
    --wood: #b9763a;
    --wood-dark: #7d4a22;
    --wood-deep: #4a2c17;
    --cream: #fff4d8;
    --muted: #e7cda4;
    --green: #2f9e57;
    --green-dark: #1f7a42;
    --blue: #2585c4;
    --blue-dark: #1c6699;
    --red: #d24a4a;
    --red-dark: #a93030;
    --gold: #ffcf45;
    --violet: #8b3fd4;
    --violet-dark: #6a23ab;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    background: #122a24;
    color: var(--cream);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    overscroll-behavior: none; /* zero "gumowania" odslaniajacego tlo na telefonie */
    background:
        radial-gradient(circle at 50% 6%, rgba(119, 220, 255, 0.22), transparent 22rem),
        radial-gradient(circle at 78% 22%, rgba(178, 95, 255, 0.2), transparent 24rem),
        linear-gradient(180deg, #3a4f8e 0%, #2d2453 38%, #102721 100%);
    overflow: hidden;
}

button, input { font: inherit; }

button {
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    padding: 0.7rem 1rem;
    color: #fff;
    font-weight: 800;
    background: var(--blue);
    box-shadow: inset 0 -3px rgba(0, 0, 0, 0.24);
    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}
button:hover:not(:disabled) { filter: brightness(1.08) saturate(1.06); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: 0.5; filter: grayscale(0.4); }

.spr { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ shell */
.app-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }

.panel {
    width: min(46rem, 100%);
    border: 3px solid rgba(255, 226, 128, 0.35);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
    padding: 1.4rem;
}

/* --------------------------------------------------------------- auth */
.auth-panel { position: relative; overflow: hidden; text-align: center; }
.auth-panel::before {
    content: "";
    position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
    background:
        radial-gradient(circle at 50% 22%, rgba(123, 220, 255, 0.22), transparent 16rem),
        linear-gradient(135deg, rgba(47, 158, 87, 0.3), rgba(139, 63, 212, 0.24));
}
.auth-panel > * { position: relative; }
.auth-panel h1 {
    margin: 0 0 0.3rem;
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    color: #fff4bd;
    text-shadow: 0 0.22rem #5a233d, 0 0 1.4rem rgba(121, 222, 255, 0.55);
}
.auth-panel p { color: var(--muted); font-weight: 800; margin-top: 0; }
.mode-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 0.6rem; }
.mode-row button { background: linear-gradient(180deg, #34c46f, var(--green-dark)); }
.mode-row button:nth-child(2) { background: linear-gradient(180deg, #a455e0, var(--violet-dark)); }
.mode-row button:nth-child(3) { background: linear-gradient(180deg, #34a9e8, var(--blue-dark)); }
.auth-form { display: grid; gap: 0.75rem; margin-top: 1rem; text-align: left; }
.auth-form label { display: grid; gap: 0.3rem; font-weight: 700; }
.auth-form input {
    width: 100%; border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 10px;
    padding: 0.7rem; color: #fff; background: rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------- game shell */
.app-shell { padding: 0; }
.game-panel {
    position: relative;
    width: 100vw; height: 100vh;
    /* telefony: najpierw dvh, a docelowo ZMIERZONA wysokosc widocznego
       ekranu (--app-height z JS) — zero przerw nad paskiem przegladarki */
    height: 100dvh;
    height: var(--app-height, 100dvh);
    border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none;
}
.garden-preview {
    position: relative; overflow: hidden; width: 100%; height: 100%;
    background:
        radial-gradient(circle at 50% 16%, rgba(128, 222, 255, 0.16), transparent 26rem),
        linear-gradient(180deg, #6fae3e, #4f8f2b);
}

/* WYDAJNOŚĆ: kamera przesuwa/skaluje te warstwy CO KLATKĘ. Bez promocji na
   własną warstwę GPU przeglądarka PRZEMALOWUJE całą (dużą) warstwę procesorem
   przy każdym kroku => „muli jak na słabym laptopie" nawet na mocnym sprzęcie.
   will-change + translateZ wypycha je na GPU => przesuw/skala to tani transform. */
.map-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
.entity-layer { pointer-events: none; }
.map-tile {
    /* kafle NACHODZĄ na siebie o ~1.5px — przy skalowaniu (zoom/DPR) znika
       hairline między nimi i nie widać zielonych pasków tła. */
    position: absolute; width: 49.5px; height: 49.5px;
    background-size: 49.5px 49.5px; background-repeat: no-repeat;
}
/* cała ziemia w JEDNYM canvasie (krok 1 przejścia na canvas) — 1 warstwa zamiast ~1300 */
.map-ground { position: absolute; left: 0; top: 0; display: block; image-rendering: auto; }

/* ---------------------------------------------------------- world entities */
.building-sprite { position: absolute; left: 0; top: 0; pointer-events: none; }
.building-sprite .spr { filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.28)); }

.player-sprite, .remote-player, .crop-sprite, .decor-sprite, .pet-companion {
    position: absolute; left: 0; top: 0; width: 48px; height: 48px;
    transition: transform 110ms ease-out;
}
.crop-sprite, .decor-sprite, .player-sprite { transition: none; }

.player-art { animation: bob 1.6s ease-in-out infinite; transform-origin: 50% 90%; overflow: visible; }
.remote-art { overflow: visible; } /* wysokie czapki nie ucinane u góry (G6) */
.player-sprite.is-walking .player-art { animation: walk-hop 0.24s ease-in-out infinite; }
@keyframes walk-hop {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    50% { transform: translateY(-4.5px) scale(0.98, 1.04); }
}
.pet-companion .spr { animation: bob 1.3s ease-in-out infinite; }
/* Wiatr: każda roślina ma własną fazę (--sway-delay/--sway-dur z renderera),
   a globalny podmuch (--wind z silnika cząsteczek) dogina je wszystkie razem. */
.crop-art {
    transform-origin: 50% 95%;
    animation: sway var(--sway-dur, 3.2s) ease-in-out infinite;
    animation-delay: var(--sway-delay, 0s);
}
.crop-sprite.is-ready { filter: drop-shadow(0 0 0.34rem var(--gold)); }
.crop-sprite.is-ready .crop-art {
    animation:
        sway var(--sway-dur, 3.2s) ease-in-out infinite,
        ready-pulse 1.3s ease-in-out infinite;
    animation-delay: var(--sway-delay, 0s), 0s;
}
/* nowo zasadzona roślinka wyskakuje z ziemi */
.crop-pop .crop-art { animation: crop-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, sway var(--sway-dur, 3.2s) ease-in-out 0.55s infinite; }
@keyframes crop-pop {
    0% { transform: scale(0.1) translateY(10px); }
    70% { transform: scale(1.12) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}
/* skok stadium wzrostu */
.crop-grew .crop-art { animation: crop-grew 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), sway var(--sway-dur, 3.2s) ease-in-out 0.45s infinite; }
@keyframes crop-grew {
    0% { transform: scale(0.82); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes ready-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.14); }
}

/* bez CSS-transition na transformie — płynny chód robi interpolacja w rendererze
   (co klatkę), a transition tylko by z nią walczył i opóźniał ruch. */
.remote-player { opacity: 0.95; }
.remote-player.is-walking .remote-art { animation: walk-hop 0.24s ease-in-out infinite; }
.remote-player.is-walking .ch-leg-l { animation: leg-kick 0.24s ease-in-out infinite; }
.remote-player.is-walking .ch-leg-r { animation: leg-kick 0.24s ease-in-out infinite; animation-delay: -0.12s; }
.remote-player span {
    position: absolute; left: 50%; bottom: -1.2rem; transform: translateX(-50%);
    max-width: 7rem; border-radius: 999px; padding: 0.1rem 0.45rem;
    font-size: 0.66rem; font-weight: 900; white-space: nowrap;
    background: rgba(43, 26, 64, 0.86); color: #fff;
}
.pet-companion { width: 40px; height: 40px; }
.pet-companion .pet-name {
    position: absolute; left: 50%; bottom: -1rem; transform: translateX(-50%);
    border-radius: 999px; padding: 0.06rem 0.4rem; font-size: 0.6rem; font-weight: 900;
    white-space: nowrap; background: rgba(43, 26, 64, 0.82); color: #ffe9ad;
}
/* pomocnik 🐤: plakietka bieżącego obowiązku nad główką + lekki błękitny akcent w imieniu */
.helper-companion .helper-badge {
    position: absolute; top: -0.45rem; right: -0.25rem; font-size: 0.92rem; line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); pointer-events: none;
}
.helper-companion .pet-name { background: rgba(30, 40, 66, 0.86); color: #bfe3ff; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* --wind (deg) jest żywym polem z silnika cząsteczek — rośliny wyginają się
   razem z lecącym pyłkiem, bo custom property w keyframes czyta się na bieżąco */
@keyframes sway {
    0%, 100% { transform: rotate(-1.9deg); }
    50% { transform: rotate(1.9deg); }
}
@media (prefers-reduced-motion: reduce) {
    .player-art, .pet-companion .spr, .crop-art, .crop-sprite.is-ready .crop-art,
    .crop-pop .crop-art, .crop-grew .crop-art { animation: none; }
}

/* ---------------------------------------------------------- gotujący się gar */
/* Para i bąbelki animowane CZYSTO lokalnie (CSS) — stan „gotuje się" jest
   wspólny (przez state.soup.potKey), sama animacja niczego nie wysyła. */
.decor-cooking .soup-steam path {
    animation: soup-steam 2.4s ease-in-out infinite;
    transform-origin: 24px 12px;
}
.decor-cooking .soup-bubble { animation: soup-bubble 1.5s ease-in-out infinite; }
.decor-cooking .soup-bubble-b { animation-duration: 1.9s; animation-delay: .4s; }
.decor-cooking .soup-bubble-c { animation-duration: 1.2s; animation-delay: .8s; }
@keyframes soup-steam {
    0%   { opacity: 0; transform: translateY(2px) scaleY(0.7); }
    40%  { opacity: .8; }
    100% { opacity: 0; transform: translateY(-5px) scaleY(1.15); }
}
@keyframes soup-bubble {
    0%, 100% { transform: translateY(0) scale(0.8); opacity: .55; }
    50%      { transform: translateY(-1.5px) scale(1.1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .decor-cooking .soup-steam path, .decor-cooking .soup-bubble { animation: none; }
}

/* ---------------------------------------------------------------- weather */
.garden-preview::after {
    content: ""; position: absolute; inset: 0; z-index: 46; pointer-events: none;
    transition: background 600ms ease;
}
.garden-preview[data-weather="clear"]::after {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 224, 106, 0.85) 0 2rem, rgba(255, 224, 106, 0.18) 2.1rem 4.2rem, transparent 4.3rem),
        linear-gradient(180deg, rgba(255, 247, 200, 0.06), transparent 30%);
}
.garden-preview[data-weather="rain"]::after {
    /* tylko delikatny odcien — krople rysuje canvas czasteczek (pojedyncze,
       nie ulewa na caly ekran; pelnoekranowa animacja tla zabijala FPS) */
    background: linear-gradient(180deg, rgba(40, 60, 96, 0.3), rgba(30, 44, 74, 0.2));
}
.garden-preview[data-weather="lunar"]::after {
    background:
        radial-gradient(circle at 86% 14%, rgba(234, 225, 255, 0.85) 0 1.5rem, rgba(181, 116, 255, 0.2) 1.6rem 3.4rem, transparent 3.5rem),
        linear-gradient(180deg, rgba(57, 42, 124, 0.34), rgba(122, 57, 155, 0.2));
}

/* ----------------------------------------------------------------- HUD top */
.hud-top {
    /* belka jest przezroczysta na calej szerokosci — kliki przechodza,
       lapia je tylko realne przyciski/pigulki */
    pointer-events: none;
    position: absolute; left: 0; right: 0; top: 0; z-index: 80;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
    gap: 0.75rem; padding: clamp(0.6rem, 1.6vw, 1.1rem);
    /* notch/wyspa: HUD schodzi ponizej wyciecia */
    padding-top: calc(clamp(0.6rem, 1.6vw, 1.1rem) + env(safe-area-inset-top, 0px));
}
.hud-left { display: flex; gap: 0.5rem; }
.hud-center { display: flex; gap: 0.6rem; justify-content: center; }
.hud-right { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

.hud-btn.round {
    width: 3rem; height: 3rem; padding: 0; border-radius: 14px;
    display: grid; place-items: center;
    background: rgba(30, 20, 34, 0.92); border: 2px solid rgba(255, 239, 162, 0.3);
    
}
.hud-btn.round .btn-icon { width: 1.7rem; height: 1.7rem; }
.hud-btn[data-music="off"] { opacity: 0.55; }

.big-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 3rem; padding: 0 1.1rem; border-radius: 14px;
    font-weight: 950; font-size: 1.02rem; letter-spacing: 0.3px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    text-shadow: 0 2px rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 -4px rgba(0, 0, 0, 0.25), 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.big-btn .btn-icon { width: 1.5rem; height: 1.5rem; }
.big-btn.shop { background: linear-gradient(180deg, #3bbd6e, var(--green-dark)); }
.big-btn.garden { background: linear-gradient(180deg, #34a9e8, var(--blue-dark)); }
.big-btn.sell { background: linear-gradient(180deg, #e85c5c, var(--red-dark)); }

.hud-top button, .hud-top .stat-pill { pointer-events: auto; }

.stat-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 2.5rem; padding: 0 0.8rem; border-radius: 999px;
    font-weight: 950; font-size: 1rem;
    background: rgba(30, 20, 34, 0.92); border: 2px solid rgba(255, 239, 162, 0.32);
     box-shadow: 0 0.45rem 0.9rem rgba(0, 0, 0, 0.25);
}
.stat-pill .hud-icon { width: 1.4rem; height: 1.4rem; }
.stat-pill.timer { color: #ffe9ad; }
.stat-pill.timer::before {
    content: ""; width: 0.9rem; height: 0.9rem; border-radius: 50%;
    border: 2px solid #ffe9ad; border-top-color: transparent;
}
.stat-pill.coins { color: var(--gold); }
.stat-pill.gems { color: var(--cyan, #7fe6ff); }

/* --------------------------------------------------------------- pet panel */
.pet-panel {
    position: absolute; left: clamp(0.6rem, 1.6vw, 1.1rem); top: 4.4rem; z-index: 86;
    cursor: default;
    display: grid; gap: 0.4rem; width: 14.5rem; padding: 0.6rem;
    border-radius: 14px; background: rgba(30, 20, 34, 0.92);
    border: 2px solid rgba(255, 239, 162, 0.28);
}
.pet-panel .pet-head { display: flex; align-items: center; gap: 0.5rem; }
.pet-panel .pet-avatar { width: 2.4rem; height: 2.4rem; flex: none; }
.pet-panel strong { font-size: 0.9rem; }
.pet-panel .bar { height: 0.55rem; border-radius: 999px; background: rgba(0, 0, 0, 0.3); overflow: hidden; }
.pet-panel .bar > i { display: block; height: 100%; border-radius: 999px; }
.pet-panel .bar.hunger > i { background: linear-gradient(90deg, #ff8b4a, #ffcf45); }
.pet-panel .bar.xp > i { background: linear-gradient(90deg, #9c69ff, #41d6ff); }
.pet-panel .bar-label { font-size: 0.66rem; color: var(--muted); font-weight: 800; }

/* -------------------------------------------------------- interaction prompt */
.interaction-prompt {
    position: absolute; z-index: 60; display: grid; gap: 0.35rem; justify-items: center;
    transform: translate(-50%, 0.35rem); pointer-events: none;
}
.interaction-prompt[data-anchored="screen"] {
    left: 50% !important; bottom: 7.4rem; top: auto !important;
    transform: translate(-50%, 0);
}
/* Otwarty ekwipunek ZASŁANIA wszystkie panele interakcji (Zbierz, Zasadź, siadanie,
   kusiki) — mają być POD nim, nie na wierzchu (drawer=63, toast=62). */
body.inv-open .interaction-prompt { z-index: 40 !important; }
body.inv-open .toast { z-index: 40 !important; }
.prompt-card {
    display: grid; justify-items: center; gap: 0.15rem;
    padding: 0.5rem 0.95rem; border-radius: 14px; text-align: center;
    background: rgba(24, 16, 28, 0.92); border: 2px solid rgba(255, 239, 162, 0.32);
    box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.4);
}
.prompt-buttons { display: flex; gap: 0.35rem; justify-content: center; }
.prompt-alt { background: linear-gradient(180deg, #34a9e8, var(--blue-dark)); }
.prompt-card strong { font-size: 1rem; color: #fff; }
.prompt-meta {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; font-weight: 800; color: var(--muted);
}
.prompt-meta .tag {
    border-radius: 999px; padding: 0.05rem 0.4rem; font-size: 0.68rem; color: #fff;
}
.prompt-meta .tag.coin { background: rgba(0, 0, 0, 0.3); color: var(--gold); }
.prompt-meta .tag.mut { background: linear-gradient(90deg, #9c69ff, #41d6ff); }
.prompt-meta .tag.time { background: rgba(0, 0, 0, 0.35); color: #cfe8ff; }
/* NAZWA rzadkości w karcie interakcji (widać ją i w trakcie rośnięcia, i gdy gotowa) */
.prompt-meta .tag.rar { color: #2a1830; font-weight: 900; }
.prompt-meta .tag.rar.rar-rare { background: #4f9bff; color: #fff; }
.prompt-meta .tag.rar.rar-epic { background: #b06bff; color: #fff; }
.prompt-meta .tag.rar.rar-legendary { background: linear-gradient(90deg, #ffb347, #ffd24a); }
.prompt-meta .tag.rar.rar-rainbow { background: linear-gradient(90deg, #ff6b8a, #ffe14d, #6fe08a, #6fb0ff, #c07aff); }
.prompt-meta .grow-bar { width: 5rem; height: 0.5rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.prompt-meta .grow-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7de06c, #2f9e57); transition: width 240ms ease; }
.prompt-action {
    pointer-events: auto; min-height: 2.2rem; padding: 0 1.1rem; border-radius: 12px;
    font-weight: 950; background: linear-gradient(180deg, #a455e0, var(--violet-dark));
    border: 2px solid rgba(255, 255, 255, 0.25);
}
.interaction-prompt:not(.is-actionable) .prompt-action {
    background: rgba(24, 16, 28, 0.82); color: #ffe9ad; cursor: default;
    border-color: rgba(255, 239, 162, 0.28);
}

/* ------------------------------------------------------------------ hotbar */
.hotbar-shell {
    position: absolute; left: 50%; z-index: 64;
    /* pasek gestow telefonu nie zaslania hotbara */
    bottom: calc(clamp(0.6rem, 1.6vw, 1.1rem) + env(safe-area-inset-bottom, 0px));
    display: flex; gap: 0.45rem; align-items: stretch;
    width: min(46rem, calc(100% - 1.2rem)); transform: translateX(-50%);
    border: 3px solid var(--wood); border-radius: 16px; padding: 0.45rem;
    background: linear-gradient(180deg, rgba(120, 74, 38, 0.95), rgba(74, 44, 23, 0.96));
    box-shadow: 0 0.85rem 1.6rem rgba(0, 0, 0, 0.4);
}
.level-badge {
    position: relative; display: grid; place-items: center; gap: 0.15rem;
    width: 5rem; padding: 0.3rem 0.4rem; border-radius: 12px; flex: none;
    background: rgba(35, 22, 40, 0.8); border: 2px solid rgba(255, 220, 110, 0.4);
}
.level-badge .hud-icon { width: 2.7rem; height: 2.7rem; }
.level-badge .lvl-num {
    position: absolute; top: 0.86rem; left: 0; right: 0; text-align: center;
    font-size: 0.84rem; font-weight: 950; color: var(--ink); letter-spacing: -0.4px;
    text-shadow: 0 1px rgba(255, 255, 255, 0.45);
}
.level-badge .xp-bar { width: 100%; height: 0.4rem; border-radius: 999px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.level-badge .xp-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #9c69ff, #41d6ff); }

.hotbar { display: grid; grid-template-columns: repeat(5, minmax(4.4rem, 1fr)); gap: 0.45rem; flex: 1 1 0; }
.hotbar-slot, .hotbar-nav, .drawer-item {
    position: relative; display: grid; place-items: center; min-height: 4.4rem; padding: 0.35rem;
    color: #ffe9ad; background: rgba(46, 27, 20, 0.95); border: 2px solid rgba(255, 218, 103, 0.14);
    border-radius: 12px;
}
.hotbar-slot.has-item { cursor: grab; }
.hotbar-slot.is-selected, .drawer-item.is-selected {
    border-color: var(--gold);
    box-shadow: 0 0 0.75rem rgba(255, 220, 82, 0.6), inset 0 -3px rgba(0, 0, 0, 0.2);
}
.hotbar-slot .item-icon { width: 2.7rem; height: 2.7rem; }
.item-qty {
    position: absolute; right: 0.22rem; bottom: 0.18rem; min-width: 1.4rem; text-align: center;
    border-radius: 999px; padding: 0.02rem 0.32rem; color: #fff; font-size: 0.74rem; font-weight: 900;
    background: #1f1620; border: 1px solid rgba(255, 229, 127, 0.45);
}
.item-kind {
    position: absolute; left: 0.22rem; top: 0.18rem; color: rgba(255, 243, 194, 0.78);
    font-size: 0.56rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px;
}
/* Nazwa przedmiotu na kafelku (np. „Truskawka") — pasek u góry, jedna linia z
   wielokropkiem. Dzięki temu nasiona nie wyglądają tak samo. Nie zmienia
   wysokości kafelka (position: absolute), tło u góry dla czytelności. */
.item-name {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2;
    padding: 0.08rem 0.22rem; color: #fff6d8;
    font-size: 0.6rem; font-weight: 900; line-height: 1.15; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: linear-gradient(180deg, rgba(28, 18, 30, 0.92) 55%, rgba(28, 18, 30, 0));
    border-top-left-radius: 10px; border-top-right-radius: 10px;
    pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.hotbar-nav { min-width: 2.5rem; font-size: 1.4rem; font-weight: 900; background: rgba(38, 21, 20, 0.96); }
.hotbar-expand { background: linear-gradient(180deg, #7a4dcc, #4d2f9c); font-size: 1.2rem; }

/* Kontener slotów: relatywny, żeby numer strony mógł być wyśrodkowany DO PÓL
   (a nie do całego paska). NIE jest kolumną — etykieta jest absolutna, więc
   nie zabiera slotom wysokości. */
.hotbar-slots-wrap { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.hotbar-slots-wrap .hotbar { flex: 1 1 auto; width: 100%; }
/* numer strony paska — na DOLE, wyśrodkowany do 5 slotów (czyli lekko w lewo
   względem całego paska, bo po lewej jest odznaka poziomu). */
.hotbar-page {
    position: absolute; bottom: -0.55rem; left: 50%; transform: translateX(-50%);
    z-index: 66; padding: 0.02rem 0.7rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 900; letter-spacing: 0.3px; color: #ffe9ad;
    background: rgba(31, 22, 32, 0.95); border: 1px solid rgba(255, 220, 110, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); line-height: 1.5; pointer-events: none;
}

.inventory-drawer {
    position: absolute; left: 50%; bottom: 6.2rem; z-index: 63;
    width: min(46rem, calc(100% - 1.2rem)); transform: translateX(-50%);
    border: 3px solid var(--wood); border-radius: 16px; padding: 0.6rem;
    background: linear-gradient(180deg, rgba(82, 48, 28, 0.96), rgba(49, 28, 23, 0.97));
    box-shadow: 0 0.85rem 1.8rem rgba(0, 0, 0, 0.4);
}
.drawer-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; color: #ffe9ad; }
.drawer-head span, .drawer-empty { color: var(--muted); }
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.45rem; }
.drawer-item { grid-template-columns: auto 1fr; justify-items: start; gap: 0.45rem; min-height: 4rem; text-align: left; }
.drawer-item .item-icon { width: 2.3rem; height: 2.3rem; grid-row: span 2; }
.drawer-item strong { font-size: 0.8rem; line-height: 1.05; }
.drawer-item .item-qty { position: static; }

.game-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------- toast */
.toast {
    /* z-index 62: nad światem/HUD, ale POD paskiem (64) i otwartym plecakiem
       (drawer 63) oraz oknami (120) — powiadomienia nie zasłaniają ekwipunku. */
    position: absolute; left: 50%; bottom: 7.6rem; z-index: 62; transform: translateX(-50%);
    max-width: min(30rem, calc(100vw - 2rem)); border-radius: 11px; padding: 0.55rem 0.95rem;
    font-weight: 800; font-size: 0.92rem; border: 2px solid rgba(255, 239, 162, 0.3);
    background: rgba(169, 31, 54, 0.94); box-shadow: 0 0.55rem 1.4rem rgba(0, 0, 0, 0.38);
}
.toast[data-type="notice"] { background: rgba(34, 128, 73, 0.94); }

/* ------------------------------------------------------------------ modals */
.modal-backdrop {
    position: absolute; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem;
    background: rgba(10, 12, 18, 0.6);
}
.modal-panel {
    position: relative; width: min(48rem, calc(100% - 2rem)); max-height: min(42rem, calc(100% - 2rem));
    display: flex; flex-direction: column; overflow: hidden;
    border: 3px solid rgba(255, 226, 128, 0.45); border-radius: 18px;
    background: linear-gradient(180deg, rgba(120, 72, 40, 0.98), rgba(58, 37, 29, 0.99));
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
}
.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 1rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent);
    border-bottom: 2px solid rgba(0, 0, 0, 0.25);
}
.modal-head h2 { margin: 0; flex: 1 1 auto; font-size: 1.3rem; color: #fff4bd; text-shadow: 0 2px rgba(0, 0, 0, 0.3); }
.modal-back {
    width: 2.6rem; height: 2.6rem; padding: 0; flex: none; border-radius: 50%;
    font-size: 2rem; line-height: 1; background: rgba(0, 0, 0, 0.32); color: #ffe9ad;
    border: 2px solid rgba(255, 239, 162, 0.3);
}
.modal-back[hidden] { display: none; }
.modal-panel[data-modal-style="seeds"] .modal-head { background: linear-gradient(180deg, var(--green), var(--green-dark)); }
.modal-panel[data-modal-style="eggs"] .modal-head { background: linear-gradient(180deg, var(--violet), var(--violet-dark)); }
.modal-panel[data-modal-style="tools"] .modal-head { background: linear-gradient(180deg, var(--blue), var(--blue-dark)); }
.modal-panel[data-modal-style="decor"] .modal-head { background: linear-gradient(180deg, #e0a531, #b97f1f); }
.modal-panel[data-modal-style="sell"] .modal-head { background: linear-gradient(180deg, var(--red), var(--red-dark)); }
.modal-panel[data-modal-style="weather"] .modal-head { background: linear-gradient(180deg, #3a7bd5, #2a5a9e); }
.modal-close {
    width: 2.6rem; height: 2.6rem; padding: 0; flex: none; border-radius: 50%;
    font-size: 1.6rem; line-height: 1; background: var(--red); color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.modal-tabs {
    display: flex; align-items: stretch; gap: 0.35rem;
    min-height: 3.3rem; flex: 0 0 auto; /* pasek nigdy nie zapada sie w pasek-szczelinke */
    padding: 0.55rem 0.8rem 0.35rem;
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar { display: none; }
.modal-tabs button {
    flex: 0 0 auto; min-height: 2.35rem; line-height: 1;
    padding: 0.5rem 0.85rem; border-radius: 10px;
    background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(255, 239, 162, 0.22);
    color: #ffe9ad; font-weight: 900; font-size: 0.95rem; white-space: nowrap;
}
.modal-tabs button.active {
    background: rgba(255, 224, 122, 0.22);
    border-color: var(--gold); color: #fff;
}
.modal-content { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem 1.1rem; overflow: auto; }
.modal-content > * { flex: 0 0 auto; }

.modal-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.22); border-radius: 12px; padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.08);
}
.modal-row button { min-width: 6.5rem; }
.item-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 4.6rem; }
.item-details { display: grid; gap: 0.1rem; }
.item-details strong { font-size: 1.05rem; }
.item-details span { color: var(--muted); font-size: 0.85rem; }
.item-seed { border-left: 7px solid var(--green); }
.item-egg { border-left: 7px solid var(--violet); }
.item-tool { border-left: 7px solid var(--blue); }
.item-decor { border-left: 7px solid var(--gold); }
.item-crop { border-left: 7px solid #b25ce5; }
.item-weather { border-left: 7px solid #3a7bd5; }
.price-pill {
    display: inline-flex; align-items: center; gap: 0.28rem; border-radius: 999px;
    padding: 0.34rem 0.56rem; color: var(--gold); font-weight: 900; background: rgba(0, 0, 0, 0.28);
}
.price-pill .mini-icon { width: 1.05rem; height: 1.05rem; }
/* PRZECENA: oficjalna cena przekreślona + nowa + procent (jednakowo w sklepach) */
.price-pill.has-deal { background: rgba(60, 30, 10, 0.42); flex-wrap: wrap; }
.price-pill .price-was { color: rgba(255, 245, 210, 0.55); font-weight: 700; text-decoration: line-through; font-size: 0.86em; }
.price-pill .price-pct { font-style: normal; font-weight: 900; font-size: 0.82em; padding: 0 0.3rem; border-radius: 999px; }
.price-pill .price-pct.deal-down { color: #063; background: #7cf0a8; }
.price-pill .price-pct.deal-up { color: #601; background: #ffb37a; }
.sell-total { display: flex; }
.inventory-row { width: 100%; color: var(--cream); text-align: left; }
.modal-empty { border: 2px dashed rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 1rem; color: var(--muted); text-align: center; }
/* Skrzynia 🧰 — dwie kolumny: plecak po lewej, magazyn po prawej */
.chest-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 0.6rem; }
.chest-col { background: rgba(0, 0, 0, 0.18); border-radius: 12px; padding: 0.6rem; min-width: 0; }
.chest-col .drawer-grid { grid-template-columns: repeat(auto-fill, 4.4rem); }
@media (max-width: 620px) { .chest-cols { grid-template-columns: 1fr; } }
.chest-col .drawer-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pasek narzędzi skrzyni: tryb przenoszenia + sortowanie */
.chest-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.chip-btn {
    flex: 0 0 auto; padding: 0.28rem 0.7rem; border-radius: 999px; cursor: pointer;
    font-size: 0.82rem; font-weight: 800; color: #ffe9ad; white-space: nowrap;
    background: rgba(46, 27, 20, 0.9); border: 2px solid rgba(255, 218, 103, 0.28);
}
.chip-btn:hover { border-color: var(--gold, #ffca5e); }
.chip-btn.is-on { background: linear-gradient(180deg, #7a4dcc, #4d2f9c); border-color: rgba(255, 220, 110, 0.6); color: #fff; }
/* przycisk Sortuj w nagłówku rozwiniętego ekwipunku */
.drawer-head { align-items: center; }
.drawer-head .chip-btn { padding: 0.18rem 0.6rem; font-size: 0.78rem; }
/* Pola 1–5 w ekwipunku = pasek szybki (hotbar) — wyraźnie oznaczone numerkiem */
.drawer-cell.qb-slot { position: relative; box-shadow: inset 0 0 0 2px rgba(255, 220, 82, 0.5); }
.drawer-cell.qb-slot .qb-num { position: absolute; top: 2px; left: 4px; z-index: 2; font-size: 0.7rem; font-weight: 900; color: var(--gold, #ffca5e); pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
/* Osobista wiadomość w Gazetce ❤️ */
.gazette .entry.love-note { background: linear-gradient(180deg, rgba(255,120,160,0.18), rgba(255,200,90,0.08));
  border: 2px solid rgba(255,120,160,0.45); border-radius: 14px; padding: 0.7rem 0.85rem; }
.gazette .entry.love-note .date { color: #ffb0c8; }
/* Wątek fabularny 📖 — okienko dialogowe z portretem i dymkami */
.story-dlg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.55rem; padding: 0.2rem 0.2rem 0.4rem; }
.story-portrait { width: 8.4rem; height: 8.4rem; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); animation: story-pop 0.35s ease-out; }
.story-portrait.sm { width: 4.6rem; height: 4.6rem; }
.story-portrait svg { width: 100%; height: 100%; }
@keyframes story-pop { 0% { transform: scale(0.7) translateY(6px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.story-name { font-weight: 900; color: #ffe9ad; font-size: 1.05rem; }
.story-bubble {
  position: relative; background: rgba(255, 255, 255, 0.96); color: #2a2340; border-radius: 16px;
  padding: 0.9rem 1.1rem; font-size: 1.02rem; line-height: 1.45; font-weight: 600; max-width: 30rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28); animation: story-bubble-in 0.25s ease-out;
}
.story-bubble::before {
  content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  border: 9px solid transparent; border-top: 0; border-bottom-color: rgba(255,255,255,0.96);
}
@keyframes story-bubble-in { 0% { transform: translateY(4px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.story-dots { display: flex; gap: 0.35rem; }
.story-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.28); transition: background 0.2s; }
.story-dots i.on { background: var(--gold, #ffca5e); }
.story-nav { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.story-nav .story-go { min-width: 12rem; font-size: 1.05rem; font-weight: 900; padding: 0.6rem 1.2rem;
  background: linear-gradient(180deg, #7a4dcc, #4d2f9c); border-radius: 12px; }
.story-nav .story-back { min-width: 2.6rem; padding: 0.55rem 0; font-size: 1.2rem; font-weight: 900; }
/* karta CELU */
.story-dlg-goal { align-items: stretch; text-align: left; }
.story-goal-head { display: flex; align-items: center; gap: 0.8rem; }
.story-goal-title { display: block; font-size: 1.15rem; color: #fff; margin-top: 0.1rem; }
.story-goal-hint { margin: 0.2rem 0.2rem 0.5rem; color: var(--muted); }
.wx-desc { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.78rem; line-height: 1.3; }
.story-goal-how { margin: 0 0.2rem 0.5rem; padding: 0.5rem 0.65rem; border-radius: 10px; font-size: 0.85rem; line-height: 1.35;
  color: #ffeec2; background: rgba(255, 214, 120, 0.12); border: 1px solid rgba(255, 214, 120, 0.28); }
.story-goal-bar { position: relative; height: 1.5rem; border-radius: 999px; background: rgba(0,0,0,0.3); overflow: hidden; margin-bottom: 0.5rem; }
.story-goal-bar i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #ffca5e, #ff9a3c); border-radius: 999px; }
.story-goal-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 0.85rem; color: #2a2340; text-shadow: 0 1px 2px rgba(255,255,255,0.4); }
.story-goal-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.story-reward { font-weight: 800; color: #ffe9ad; }
.story-count { font-weight: 800; color: var(--muted); font-size: 0.85rem; }
.story-map-btn, .story-replay { width: 100%; margin-bottom: 0.5rem; }
.story-replay { background: rgba(255,255,255,0.1); }
.story-dlg-locked, .story-dlg-end { align-items: center; text-align: center; gap: 0.5rem; }
.story-dlg-big { font-size: 3rem; }
.story-cta { border-color: rgba(181,139,255,0.5); background: linear-gradient(180deg, rgba(181,139,255,0.18), rgba(0,0,0,0.12)); }
.story-cta-ready { border-color: rgba(122,222,140,0.6); background: linear-gradient(180deg, rgba(94,210,120,0.22), rgba(0,0,0,0.12)); }
/* nowe zadanie do PRZYJĘCIA u NPC — złoty akcent z wykrzyknikiem */
.story-cta-new { border-color: rgba(255,210,74,0.65); background: linear-gradient(180deg, rgba(255,210,74,0.2), rgba(0,0,0,0.12)); }
.story-dlg-accept { align-items: stretch; text-align: left; }
.story-dlg-accept .story-go { background: linear-gradient(180deg, #ffcf4a, #e0a531) !important; color: #3a2513 !important; }
.story-dlg-coop { align-items: center; text-align: center; gap: 0.6rem; }
/* ekran ODBIORU nagrody u mieszkańca — podziękowanie + zapowiedź */
.story-dlg-ready { align-items: center; text-align: center; }
.story-claim-badge { font-weight: 900; color: #9be6b0; }
.story-reward.big { font-size: 1.15rem; font-weight: 900; color: #ffe9ad; }
.story-teaser { color: var(--muted); font-style: italic; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 0.5rem 0.7rem; }
.story-dlg-claim { align-items: center; text-align: center; gap: 0.55rem; }
.story-claim-btn { background: linear-gradient(180deg, #5ed27a, #2f9e57) !important; }
.story-tell { background: linear-gradient(180deg, rgba(181,139,255,0.16), rgba(0,0,0,0.12)); border-radius: 12px; }
.story-marker { position: absolute; width: 48px; height: 48px; pointer-events: none; text-align: center; animation: story-bob 1.6s ease-in-out infinite; }
.story-marker .story-spark { position: absolute; inset: 0; font-size: 1.5rem; opacity: 0.9; animation: story-twinkle 1.2s ease-in-out infinite; }
.story-marker .story-pin { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-size: 1.15rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
@keyframes story-bob { 0%,100% { margin-top: 0; } 50% { margin-top: -6px; } }
@keyframes story-twinkle { 0%,100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
/* Podział utargu — „Do mnie idzie: [%] pieniędzy z targu" */
.split-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.split-pick .split-lbl { color: var(--muted); font-weight: 700; }
.split-pick .ai-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
/* Karta statystyk (stragan) — zamiast ściany osobnych paneli */
.stat-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
.stat-cell { background: rgba(0, 0, 0, 0.22); border-radius: 12px; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; }
.stat-cell span { color: var(--muted); font-size: 0.78rem; }
.stat-cell strong { font-size: 1.05rem; color: #ffe9ad; }
/* Zwięzła notka informacyjna — zamiast pełnego panelu z samym tekstem */
.info-note { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0.6rem; margin-bottom: 0.4rem;
  background: rgba(255, 255, 255, 0.05); border-radius: 10px; font-size: 0.88rem; color: var(--muted); }
.info-note span { flex: 1; }
.info-note strong { color: #ffe9ad; }
.shop-intro { padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 202, 94, 0.14), rgba(0, 0, 0, 0.1)); }
/* Menu straganu — przełączniki „sprzedaję / wykluczone" */
.menu-toggles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; margin-bottom: 0.6rem; }
.menu-toggle { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-start; min-height: 3rem;
  background: rgba(90, 200, 120, 0.16); border-color: rgba(90, 200, 120, 0.4); }
.menu-toggle b { margin-left: auto; font-size: 0.8rem; white-space: nowrap; }
.menu-toggle.is-off { background: rgba(220, 80, 80, 0.16); border-color: rgba(220, 80, 80, 0.45); opacity: 0.9; }
.menu-toggle .item-icon { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; }
.menu-toggle[disabled] { opacity: 0.4; }
/* Menu wykluczeń — listy per kategoria z ikonkami */
.excl-cat { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.5rem 0.1rem 0.3rem; font-weight: 900; color: #ffe9ad; }
.menu-toggle-sm { min-width: 6.5rem; padding: 0.35rem 0.5rem; font-size: 0.8rem; font-weight: 800; background: rgba(90,200,120,0.18); border-color: rgba(90,200,120,0.4); }
.menu-toggle-sm.is-off { background: rgba(220,80,80,0.18); border-color: rgba(220,80,80,0.45); }
.excl-grid { display: grid; grid-template-columns: repeat(auto-fill, 3rem); gap: 0.35rem; margin-bottom: 0.5rem; }
.excl-cell { position: relative; width: 3rem; height: 3rem; min-height: 3rem; padding: 0.25rem; }
.excl-cell .item-icon { width: 2.1rem; height: 2.1rem; }
.excl-cell.is-off { opacity: 0.55; filter: grayscale(0.7); }
.excl-cell .excl-x { position: absolute; right: 0; bottom: 0; font-size: 0.85rem; }
.excl-cell[disabled] { opacity: 0.3; }
/* Pomocnicy 🐤 */
.helper-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; }
.helper-row .pet-avatar { width: 3.4rem; height: 3.4rem; }
.helper-row .ai-picks { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
.helper-row .ai-pick { min-width: 2.6rem; font-size: 1.1rem; padding: 0.3rem 0; }
.helper-side { display: flex; flex-direction: column; gap: 0.35rem; }
.helper-side button { min-width: 2.8rem; padding: 0.35rem 0; }
/* Ranking serwera 🏆 — medal/miejsce + imię do LEWEJ, nic po prawej */
.rank-row { align-items: center; gap: 0.7rem; justify-content: flex-start; }
.rank-row .rank-pos { font-size: 1.25rem; font-weight: 900; min-width: 2.4rem; text-align: center; color: #ffe9ad; flex: 0 0 auto; }
.rank-row .item-details { flex: 1 1 auto; min-width: 0; text-align: left; }
.rank-row.is-me { outline: 2px solid var(--gold, #ffca5e); outline-offset: -2px; border-radius: 12px; }
/* Zabezpieczenie przed wychodzeniem tekstu poza ramki */
.modal-row .item-details strong, .modal-row .item-details span { overflow-wrap: anywhere; }
.restock-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.restock-row .timer-pill { color: #ffe9ad; font-weight: 900; }

/* weather cards */
.weather-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.weather-card {
    display: grid; gap: 0.35rem; justify-items: center; text-align: center;
    border-radius: 14px; padding: 0.9rem 0.6rem; border: 2px solid rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.08);
}
.weather-card.now { border-color: var(--gold); box-shadow: 0 0 0.8rem rgba(255, 207, 69, 0.4); }
.weather-card .wx-icon { width: 3.4rem; height: 3.4rem; }
.weather-card strong { font-size: 1rem; }
.weather-card .when { font-size: 0.75rem; color: var(--muted); font-weight: 800; }
.weather-card .badge { border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.72rem; font-weight: 900; background: rgba(0, 0, 0, 0.3); }
.weather-card.now .badge { background: var(--gold); color: var(--ink); }

/* egg cards */
.egg-card {
    border: 2px solid rgba(0, 0, 0, 0.22); border-left: 7px solid var(--violet);
    border-radius: 12px; padding: 0.7rem 0.8rem; background: rgba(255, 255, 255, 0.08);
}
.egg-head { display: flex; align-items: center; gap: 0.8rem; }
.egg-head .item-icon { flex: none; }
.egg-head .item-details { flex: 1 1 auto; min-width: 0; }
.egg-head button { min-width: 6rem; }

/* hatch rates */
.hatch-rates { display: grid; gap: 0.3rem; margin-top: 0.5rem; }
.hatch-rate { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.hatch-rate .bar { flex: 1; height: 0.45rem; border-radius: 999px; background: rgba(0, 0, 0, 0.3); overflow: hidden; }
.hatch-rate .bar > i { display: block; height: 100%; background: linear-gradient(90deg, #9c69ff, #41d6ff); }

/* gazette */
.gazette { background: #f4e6c8; color: #4a3418; border-radius: 12px; padding: 1rem 1.2rem; border: 2px solid #c9a86a; }
.gazette h3 { margin: 0 0 0.15rem; font-size: 1.4rem; text-align: center; letter-spacing: 1px; }
/* dzień + okazja tuż pod tytułem, mniejszą czcionką */
.gazette .gazette-day { margin: 0 0 0.55rem; text-align: center; font-size: 0.82rem; font-weight: 800; color: #7a5a2e; }
.gazette .entry { border-top: 2px dotted #c9a86a; padding: 0.55rem 0; }
.gazette .date { font-weight: 900; color: #8a6a2e; font-size: 0.85rem; }
.gazette .entry p { margin: 0.2rem 0 0; font-size: 0.9rem; }

.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; margin-bottom: 0.7rem; }
.menu-grid button {
    display: flex; align-items: center; gap: 0.55rem; justify-content: flex-start;
    background: rgba(255, 255, 255, 0.1); min-height: 3.2rem;
}
.menu-grid .btn-icon { width: 1.6rem; height: 1.6rem; }
.menu-section {
    font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
    color: #ffe9ad; opacity: 0.85; margin: 0.2rem 0.2rem 0.45rem;
}
.menu-section:not(:first-child) { margin-top: 0.3rem; }

/* icons: sizing + transparent base (SVG paints the visuals) */
.item-icon, .hud-icon, .mini-icon, .btn-icon, .wx-icon, .pet-avatar {
    display: inline-block; flex: none; background: transparent;
}
.item-icon { width: 2.4rem; height: 2.4rem; }
.hud-icon { width: 1.45rem; height: 1.45rem; }
.mini-icon { width: 1.1rem; height: 1.1rem; vertical-align: -0.2rem; }
.item-icon .spr, .hud-icon .spr, .mini-icon .spr, .btn-icon .spr, .wx-icon .spr, .pet-avatar .spr { width: 100%; height: 100%; }
/* SVG pupila (petSprite) w dowolnej ikonce — skaluje się do pola, więc karta
   pupila w oknie zwierząt pokazuje AKTUALNĄ formę ewolucji wg poziomu. */
.item-icon > svg, .pet-avatar > svg, .pet-portrait > svg { width: 100%; height: 100%; display: block; }

/* Catalog icon classes — referenced by tests and used as paint targets. */
.icon-moon-seed, .icon-blue-seed, .icon-cactus-seed, .icon-lemon-seed, .icon-dragon-seed,
.icon-moonberry, .icon-blueberry, .icon-cactus, .icon-lemon, .icon-dragonfruit,
.icon-common-egg, .icon-rare-egg,
.icon-sproutling, .icon-glowmoth, .icon-cluckster, .icon-starlamb,
.icon-tool-shovel, .icon-tool-water, .icon-tool-pot,
.icon-decor-lights, .icon-decor-bench, .icon-decor-fence,
.icon-coin, .icon-gem, .icon-level, .icon-xp, .icon-empty, .icon-pet-empty, .icon-profile,
.weather-clear, .weather-rain, .weather-lunar, .weather-snow { background: transparent; }

/* ------------------------------------------------------------- responsive */
/* ---------------------------------------------------- twilight lighting #8 */
/* Persistent magical ambient grade; intensifies at night, softens by day. */
.garden-preview::before {
    content: ""; position: absolute; inset: 0; z-index: 45; pointer-events: none;
    transition: opacity 800ms ease; opacity: 0.35;
    background: linear-gradient(180deg, rgba(70, 60, 150, 0.5), rgba(40, 30, 90, 0.2) 45%, rgba(20, 50, 40, 0.3));
}
.garden-preview[data-weather="clear"]::before {
    opacity: 0.5;
    background: linear-gradient(180deg, rgba(255, 226, 160, 0.35), rgba(120, 150, 120, 0.1) 50%, rgba(60, 90, 70, 0.2));
}
.garden-preview[data-weather="lunar"]::before {
    opacity: 1;
    background: linear-gradient(180deg, rgba(90, 70, 200, 0.62), rgba(60, 40, 130, 0.32) 45%, rgba(30, 30, 90, 0.4));
}
.garden-preview[data-weather="rain"]::before {
    background: linear-gradient(180deg, rgba(50, 70, 120, 0.55), rgba(40, 55, 95, 0.28) 50%, rgba(30, 50, 60, 0.35));
}
.garden-preview[data-weather="snow"]::before {
    background: linear-gradient(180deg, rgba(150, 175, 215, 0.5), rgba(120, 150, 195, 0.22) 50%, rgba(110, 140, 175, 0.3));
}
.garden-preview[data-weather="bloom"]::before {
    opacity: 0.55;
    background: linear-gradient(180deg, rgba(255, 190, 230, 0.35), rgba(255, 220, 170, 0.14) 50%, rgba(150, 120, 170, 0.2));
}

/* snieg: tylko odcien — platki rysuje canvas (animowane tlo = lagi) */
.garden-preview[data-weather="snow"]::after {
    background: linear-gradient(180deg, rgba(150, 175, 215, 0.22), rgba(120, 150, 195, 0.12));
}

/* magic-look post grade: vignette + soft bloom, tinted per weather */
.fx-grade { position: absolute; inset: 0; z-index: 48; pointer-events: none; }
.fx-grade::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(12, 8, 28, 0.34) 86%, rgba(8, 5, 20, 0.5) 100%);
}
/* WYDAJNOŚĆ: bez mix-blend-mode — pełnoekranowy blend zmuszał GPU do
   rekompozycji CAŁEGO kadru w każdej klatce przy ruchu kamery/cząstkach
   (główna przyczyna spadków FPS przy pogodzie). Zwykłe przenikanie alfa
   wygląda niemal identycznie i jest wielokrotnie tańsze. */
.fx-grade::after {
    content: ""; position: absolute; inset: 0; transition: background 800ms ease;
    background: radial-gradient(circle at 50% -10%, rgba(150, 190, 255, 0.1), transparent 60%);
}
.garden-preview[data-weather="clear"] .fx-grade::after {
    background: radial-gradient(circle at 50% -10%, rgba(255, 224, 150, 0.14), transparent 58%),
        radial-gradient(circle at 86% 8%, rgba(255, 236, 170, 0.16), transparent 36%);
}
.garden-preview[data-weather="lunar"] .fx-grade::after {
    background: radial-gradient(circle at 50% -8%, rgba(160, 130, 255, 0.22), transparent 60%),
        radial-gradient(circle at 85% 10%, rgba(130, 180, 255, 0.2), transparent 40%);
}
.garden-preview[data-weather="rain"] .fx-grade::after {
    background: radial-gradient(circle at 50% -10%, rgba(120, 160, 220, 0.16), transparent 58%);
}
.garden-preview[data-weather="snow"] .fx-grade::after {
    background: radial-gradient(circle at 50% -10%, rgba(205, 228, 255, 0.2), transparent 60%);
}
.garden-preview[data-weather="bloom"] .fx-grade::after {
    background: radial-gradient(circle at 50% -10%, rgba(255, 170, 220, 0.2), transparent 58%),
        radial-gradient(circle at 84% 10%, rgba(255, 220, 150, 0.18), transparent 38%);
}
.garden-preview[data-weather="heart"] .fx-grade::after {
    background: radial-gradient(circle at 50% -8%, rgba(255, 150, 200, 0.22), transparent 60%),
        radial-gradient(circle at 84% 10%, rgba(255, 120, 180, 0.18), transparent 38%);
}

/* --------------------------------------- panel WSPOLNYCH zwierzatek 🐾 */
/* zwiniety = JEDNA ikonka z licznikiem (na telefonie nic sie nie rozjezdza) */
.pets-mini { position: relative; display: grid; place-items: center; }
.pets-mini .pet-avatar { width: 2rem; height: 2rem; }
.pets-mini .pet-avatar svg { width: 100%; height: 100%; }
.pets-count {
    position: absolute; right: -0.3rem; top: -0.3rem;
    min-width: 1.05rem; height: 1.05rem; padding: 0 0.2rem;
    display: grid; place-items: center; border-radius: 999px;
    font-size: 0.62rem; font-weight: 950; font-style: normal;
    color: #3a2410; background: var(--gold); border: 1px solid rgba(0, 0, 0, 0.25);
}
.pet-mini-row {
    display: flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.15rem;
    border-radius: 0.6rem; cursor: pointer;
}
.pet-mini-row:hover { background: rgba(255, 255, 255, 0.08); }
.pet-mini-row .pet-avatar { width: 2.1rem; height: 2.1rem; flex: none; }
.pet-mini-row .pet-avatar svg { width: 100%; height: 100%; }
.pet-mini-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.pet-mini-info strong { font-size: 0.76rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.bar.hunger.mini { height: 0.4rem; }
.pet-mini-feed { font-size: 1rem; padding: 0.15rem 0.25rem; border-radius: 0.5rem; }
.pet-mini-feed:hover { background: rgba(255, 210, 74, 0.25); transform: scale(1.15); }

/* ------------------------------------------------ zupa: uciekinierzy 🥕 */
.runaway-sprite {
    position: absolute; width: 36px; height: 36px; pointer-events: none;
    transition: transform 650ms cubic-bezier(0.4, 0, 0.3, 1);
}
.runaway-sprite svg { width: 36px; height: 36px; animation: runaway-hop 0.55s ease-in-out infinite; }
@keyframes runaway-hop {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-7px) rotate(6deg); }
}

/* ------------------------------------------------ minigry za gemy 🎪 */
.mg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
.mg-card {
    aspect-ratio: 1; border-radius: 0.8rem; font-size: 1.5rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.mg-card:hover { transform: scale(1.05); }
.mg-card.is-up { background: rgba(255, 255, 255, 0.12); }
.mg-card.is-matched { border-color: var(--gold); box-shadow: 0 0 0.5rem rgba(255, 207, 69, 0.6); opacity: 0.85; }
.mg-card .item-icon { width: 2rem; height: 2rem; }

.sr-arena {
    position: relative; height: 15rem; border-radius: 1rem; overflow: hidden;
    background: radial-gradient(circle at 50% 0%, #3a2c6b, #201640 70%);
    margin-bottom: 0.6rem;
}
.sr-hud {
    position: absolute; top: 0.4rem; left: 0.6rem; right: 0.6rem; z-index: 2;
    display: flex; justify-content: space-between; font-weight: 900; color: #ffd24a;
    pointer-events: none;
}
.sr-star {
    position: absolute; z-index: 1; font-size: 1.7rem; background: none; border: none;
    cursor: pointer; padding: 0.3rem; line-height: 1;
    animation: sr-pop 1.4s ease forwards;
}
@keyframes sr-pop {
    0% { transform: scale(0.2); opacity: 0; }
    18% { transform: scale(1.15); opacity: 1; }
    80% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.3); opacity: 0; }
}
/* zręcznościówki na myszkę: Skoczek + Zwinny Kurczak */
.mg-stage {
    position: relative; width: 100%; height: 12.5rem; border-radius: 1rem; overflow: hidden;
    margin-bottom: 0.6rem; border: 2px solid rgba(255, 255, 255, 0.22);
    touch-action: none; user-select: none;
}
.mg-jump { background: linear-gradient(180deg, #bfe6ff 0%, #dff3ff 62%, #cdeeae 62%, #b6e08c 100%); }
.mg-dodge { background: linear-gradient(180deg, #ffe6c2, #ffd0d8); }
.mg-hud {
    position: absolute; top: 0.35rem; left: 0.6rem; right: 0.6rem; z-index: 3;
    display: flex; justify-content: space-between; font-weight: 900; color: #3a2410;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); pointer-events: none;
}
.mg-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 1rem; background: #8fce5f; border-top: 2px solid #6fae43; }
.mg-actor { position: absolute; z-index: 2; }
.mg-actor svg { width: 100%; height: 100%; display: block; }
.mg-obstacle { position: absolute; z-index: 2; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; }
/* gotowanie: przepisy + oktagon odkrywania */
.recipe-row.recipe-unknown { opacity: 0.9; }
.recipe-row.recipe-unknown > .icon-emoji { filter: grayscale(1); opacity: 0.7; }
.recipe-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.ing-row { display: inline-flex; gap: 0.22rem; vertical-align: middle; }
.ing-row .item-icon.ing-obscured { width: 1.35rem; height: 1.35rem; }
/* przyciemnione, rozmyte sylwetki — kolor PRZEŚWITUJE (blur chowa detal), więc da się TROSZKĘ zgadnąć */
.recipe-row.recipe-unknown .ing-obscured { filter: brightness(0.62) saturate(0.9) contrast(0.85) blur(1px); opacity: 0.82; }
.ing-hint { font-size: 0.72rem; opacity: 0.8; }
.mg-octagon { position: relative; width: 100%; max-width: 15rem; aspect-ratio: 1 / 1; margin: 0.4rem auto; }
.mg-octagon .oct-slot { position: absolute; width: 2.7rem; height: 2.7rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 0.7rem; border: 2px dashed rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.22); padding: 0; }
.mg-octagon .oct-slot.filled { border-style: solid; border-color: #ffd24a; background: rgba(255, 210, 74, 0.16); cursor: pointer; }
.mg-octagon .oct-slot.filled::after { content: '×'; position: absolute; top: -0.4rem; right: -0.4rem;
    width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #c23227; color: #fff; font-weight: 900;
    font-size: 0.8rem; line-height: 1.05rem; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.mg-octagon .oct-slot .item-icon { width: 1.9rem; height: 1.9rem; }
.mg-octagon .oct-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2.2rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.disc-palette { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.2rem 0 0.5rem; }
.disc-chip { position: relative; width: 3rem; height: 3rem; border-radius: 0.7rem; border: 2px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28); display: grid; place-items: center; padding: 0; cursor: pointer; }
.disc-chip .item-icon { width: 2rem; height: 2rem; }
.disc-chip .disc-q { position: absolute; right: -0.2rem; bottom: -0.2rem; background: #2b2140; color: #fff;
  font-size: 0.62rem; font-weight: 900; padding: 0 0.28rem; border-radius: 999px; }
.disc-chip.in-use, .disc-chip:disabled { opacity: 0.4; cursor: not-allowed; }
/* nowe minigry: budowanie / wieża lodowa / platformówka */
.mg-build { background: linear-gradient(180deg, #cfe9ff 0%, #e8f6ff 60%, #cdeeae 60%, #b6e08c 100%); }
/* „Ułóż Wioskę": większy canvas + większe kształty (dłuższy rząd na całą szerokość) */
.mg-build-big { height: 15.5rem; }
.mg-build-big .mg-ghost, .mg-build-big .mg-piece { font-size: 1.8rem; }
.mg-build-big .mg-ghost.is-next { animation: mg-target-pulse 0.9s ease-in-out infinite; }
@keyframes mg-target-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(255, 210, 74, 0.7); } 50% { box-shadow: 0 0 16px rgba(255, 210, 74, 0.95); } }
.mg-build-big .mg-piece { background: rgba(255, 255, 255, 0.28); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.mg-climb { background: linear-gradient(180deg, #dff1ff 0%, #bfe6ff 70%, #a9d8f5 100%); }
.mg-platform { background: linear-gradient(180deg, #bfe6ff 0%, #dff3ff 100%); }
.mg-piece { position: absolute; z-index: 3; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; background: rgba(255, 255, 255, 0.16); border-radius: 5px; }
.mg-targets { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mg-ghost {
    position: absolute; z-index: 1; display: grid; place-items: center; font-size: 1.35rem; line-height: 1;
    border-radius: 5px; border: 2px dashed rgba(90, 60, 30, 0.45); background: rgba(255, 255, 255, 0.14);
    opacity: 0.45; filter: grayscale(0.5);
}
.mg-ghost.is-next { border-color: #ffd24a; box-shadow: 0 0 8px rgba(255, 210, 74, 0.7); opacity: 0.7; }
.mg-ghost.filled { opacity: 1; filter: none; border-style: solid; border-color: rgba(90, 60, 30, 0.5); background: rgba(255, 235, 200, 0.5); }
.mg-plat { position: absolute; z-index: 1; height: 10px; border-radius: 6px; background: linear-gradient(180deg, #eaf7ff, #bfe6ff); border: 1px solid #8fc4e8; box-shadow: 0 2px 0 rgba(120, 170, 210, 0.5); }
.mg-ground-seg { position: absolute; bottom: 0; z-index: 1; background: linear-gradient(180deg, #9a6a3a, #7a4a24); border-top: 3px solid #8fce5f; }
.mg-over-actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.6rem; }

/* ------------------------------------------------ eventy 10-sekundowe ⚡ */
.flash-banner {
    position: absolute; left: 50%; top: 3.4rem; transform: translateX(-50%);
    z-index: 88; padding: 0.35rem 1.05rem; border-radius: 999px;
    background: linear-gradient(90deg, #ffb347, #ffd24a);
    color: #3a2410; font-weight: 900; letter-spacing: 0.4px; white-space: nowrap;
    box-shadow: 0 4px 18px rgba(255, 200, 60, 0.5);
    animation: flash-pulse 0.9s ease-in-out infinite;
    pointer-events: none;
}
@keyframes flash-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.07); }
}
/* pasek aktywnej MOCY ZUPY (buff) — lewy górny róg pod menu, żeby nie zasłaniać przycisków akcji */
.buff-banner {
    position: absolute; left: 0.6rem; z-index: 87;
    top: calc(7rem + env(safe-area-inset-top, 0px));
    padding: 0.26rem 0.8rem; border-radius: 999px;
    background: linear-gradient(90deg, #8f6bff, #b58bff);
    color: #fff; font-weight: 900; letter-spacing: 0.3px; white-space: nowrap; font-size: 0.78rem;
    box-shadow: 0 4px 16px rgba(140, 100, 255, 0.45); pointer-events: none;
}
/* licznik FPS (Ustawienia -> Grafika) */
.fps-pill {
    position: absolute; right: 0.6rem; z-index: 89;
    top: calc(4.2rem + env(safe-area-inset-top, 0px));
    padding: 0.15rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 950; letter-spacing: 0.4px;
    background: rgba(30, 20, 34, 0.88); border: 1px solid rgba(255, 255, 255, 0.25);
    pointer-events: none;
}
.fps-pill[data-grade="good"] { color: #7de06c; }
.fps-pill[data-grade="ok"] { color: #ffd24a; }
.fps-pill[data-grade="low"] { color: #ff6b6b; }

/* chowanego: baner w fioletach, pod banerem flash gdyby oba naraz */
.hide-banner {
    top: 5.6rem;
    background: linear-gradient(90deg, #8b3fd4, #b06bff);
    color: #fff;
    box-shadow: 0 4px 18px rgba(139, 63, 212, 0.5);
    max-width: calc(100vw - 1.2rem);
}
.hide-banner .hb-sep { opacity: 0.55; margin: 0 0.1rem; }
/* Telefon: banner mniejszy i zawija się zamiast wychodzić poza ekran */
@media (max-width: 560px) {
    .hide-banner {
        white-space: normal; text-align: center; font-size: 0.78rem;
        padding: 0.3rem 0.7rem; line-height: 1.3; letter-spacing: 0;
    }
    .hide-banner .hb-sep { margin: 0 0.05rem; }
}

/* --------------------------------------------------- particle canvas (JS) */
.fx-particles {
    position: absolute; inset: 0; z-index: 47; pointer-events: none;
    width: 100%; height: 100%;
}

/* kamera przesuwa cale warstwy co klatke — trzymaj je na GPU */
[data-game-layer="tiles"], [data-game-layer="entities"] { will-change: transform; }

/* ---------------- Tryb płynności: mniej efektów = dużo więcej FPS -------- */
/* .fx-grade ZOSTAJE (jedno tanie gradientowe tło pogody) — nawet w trybie płynności
   widać różne aury; drogie warstwy (cząsteczki, promień słońca, tint ::before/::after)
   są wyłączone. */
.garden-preview.perf-lite .fx-particles { display: none; }
.garden-preview.perf-lite::before,
.garden-preview.perf-lite::after { display: none; }
.garden-preview.perf-lite .decor-light,
.garden-preview.perf-lite .crop-sprite { filter: none !important; }
.garden-preview.perf-lite .crop-art,
.garden-preview.perf-lite .glow-core,
.garden-preview.perf-lite .crop-sprite .crop-art { animation: none !important; filter: none !important; }
.garden-preview.perf-lite .crop-sprite.is-ready::before,
.garden-preview.perf-lite .crop-sprite.is-ready::after,
.garden-preview.perf-lite .pet-companion::before,
.garden-preview.perf-lite .pet-companion::after { display: none; }

/* świecące ozdoby — TYLKO delikatny, TANI blask samej lampki (bez mix-blend-mode,
   bez animowanych filtrów i wielkiego halo — to zabijało FPS i było za ostre).
   Nocą/deszczem odrobinę mocniejszy. Blask = przezroczystość rdzenia w sprite. */
.decor-light .glow-core { opacity: 0.4; transition: opacity 600ms ease; }
.garden-preview:not([data-weather="clear"]) .decor-light .glow-core { opacity: 0.85; }
.garden-preview[data-weather="lunar"] .decor-light .glow-core { opacity: 1; }

/* glowing crops at night */
.crop-art { transition: filter 600ms ease; }
/* WYDAJNOŚĆ: nocny blask NIE jest już nakładany na KAŻDĄ roślinę osobnym
   drop-shadow (przy pełnej farmie to dziesiątki filtrów = lagi). Nastrój nocy
   dają: niebieski tint fx-grade, gradient tła i świetliki. Rzadkie plony i tak
   mają własną, tańszą poświatę (poniżej). */

/* pets glide like flight */
.pet-companion { transition: transform 700ms cubic-bezier(0.4, 0, 0.3, 1); }

/* crop rarity — size handled in JS (scale); glow/border here.
   Przy słońcu subtelnie; przy innych aurach im lepsze rarity, tym jaśniej —
   ale tylko legendarny (złoty) robi prawdziwe WOW. */
.crop-sprite { transition: filter 800ms ease; }
/* WYDAJNOŚĆ: pojedyncze drop-shadow zamiast podwójnych (dwa filtry na roślinę =
   podwójny rastrowany blask; jeden wygląda praktycznie tak samo, o połowę taniej). */
.crop-sprite.rar-rare { filter: drop-shadow(0 0 2px #4f9bff); }
.crop-sprite.rar-epic { filter: drop-shadow(0 0 2.5px #b06bff); }
.crop-sprite.rar-legendary { filter: drop-shadow(0 0 7px rgba(255, 207, 69, 0.9)); }
.garden-preview:not([data-weather="clear"]) .crop-sprite.rar-rare {
    filter: drop-shadow(0 0 6px rgba(79, 155, 255, 0.7));
}
.garden-preview:not([data-weather="clear"]) .crop-sprite.rar-epic {
    filter: drop-shadow(0 0 8px rgba(176, 107, 255, 0.7));
}
.garden-preview:not([data-weather="clear"]) .crop-sprite.rar-legendary {
    filter: drop-shadow(0 0 13px rgba(255, 207, 69, 0.8));
}
/* Legendarny „oddech": pulsujemy OPACITY nakładki (kompozytor, tanie), a NIE
   filter: brightness (przerastrowywał roślinę co klatkę bez końca). */
.crop-sprite.rar-legendary .crop-art { animation: legendary-glow 2s ease-in-out infinite; }
@keyframes legendary-glow { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; } }

/* TRYB SPOKOJNY (auto przy dużej farmie): zdejmujemy NAJDROŻSZE efekty per-roślina —
   kołysanie, pulsowanie + drop-shadow gotowych, „oddech" legendarnych, poświatę
   rzadkich/epickich. Zostają KOLORY, rozmiar rzadkości i tint pogody, więc wygląda
   prawie tak samo, a pełna farma chodzi płynnie (jak tryb płynności, ale z efektami). */
.perf-calm .crop-art { animation: none !important; }
.perf-calm .crop-sprite.is-ready { filter: none !important; }
.perf-calm .crop-sprite.is-ready .crop-art { animation: none !important; }
.perf-calm .crop-sprite.is-ready::before,
.perf-calm .crop-sprite.is-ready::after { display: none !important; }
.perf-calm .crop-sprite.rar-rare,
.perf-calm .crop-sprite.rar-epic { filter: none !important; }
.perf-calm .crop-sprite.rar-legendary .crop-art,
.perf-calm .crop-sprite.rar-rainbow .crop-art { animation: none !important; }
.perf-calm .decor-light .glow-core { animation: none !important; }

/* mała kropka rzadkości w rogu pola (skrzynia/plecak) — od razu widać rzadkość plonu */
.drawer-cell { position: relative; }
.cell-rar { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); z-index: 3; pointer-events: none; }
.cell-rar.rar-uncommon { background: #57d98a; }
.cell-rar.rar-rare { background: #4f9bff; }
.cell-rar.rar-epic { background: #b06bff; }
.cell-rar.rar-legendary { background: #ffcf45; box-shadow: 0 0 5px rgba(255, 207, 69, 0.9); }
.cell-rar.rar-rainbow { background: linear-gradient(90deg, #ff6b8a, #ffe14d, #6fe08a, #6fb0ff, #c07aff); }
/* (usunięto kropki/plamy rzadkości na mapie — rzadkość pokazuje poświata grafiki
   i NAPIS przy zbiorze; żadnych dodatkowych warstw na roślinach = lepszy FPS) */
.rar-badge { display: inline-block; border-radius: 999px; padding: 0.02rem 0.45rem; font-size: 0.6rem; font-weight: 900; vertical-align: middle; }
.rar-badge.rar-common { background: rgba(90, 74, 58, 0.55); color: #f3e7d6; }
.rar-badge.rar-rare { background: #2585c4; color: #fff; }
.rar-badge.rar-epic { background: var(--violet); color: #fff; }
.rar-badge.rar-legendary { background: linear-gradient(90deg, #ffb347, #ffd24a); color: #3a2410; }
.item-crop.rar-rare { border-left-color: #4f9bff; }
.item-crop.rar-epic { border-left-color: var(--violet); }
.item-crop.rar-legendary { border-left-color: #ffcf45; box-shadow: inset 0 0 0.7rem rgba(255, 207, 69, 0.25); }
.item-row.is-locked { opacity: 0.72; }
.rar-badge.rar-uncommon { background: #3a8f57; color: #fff; }

/* poświata ikony wg rzadkości — spójna z crop-sprite, ale na .item-icon */
.item-icon.rar-glow.rar-uncommon { filter: drop-shadow(0 0 1.5px #57d98a); }
.item-icon.rar-glow.rar-rare { filter: drop-shadow(0 0 2px #4f9bff) drop-shadow(0 0 3px #4f9bff); }
.item-icon.rar-glow.rar-epic { filter: drop-shadow(0 0 2px #b06bff) drop-shadow(0 0 4px #8b3fd4); }
.item-icon.rar-glow.rar-legendary { filter: drop-shadow(0 0 3px #ffcf45) drop-shadow(0 0 8px rgba(255, 207, 69, 0.85)); }
/* obwódka slotu straganu wg rzadkości */
.stall-slot.rar-rare { border-color: #4f9bff; }
.stall-slot.rar-epic { border-color: var(--violet); }
.stall-slot.rar-legendary { border-color: #ffcf45; box-shadow: 0 0 0.8rem rgba(255, 207, 69, 0.4); }

/* ---- popup „Dodaj towar" nad straganem (stragan widoczny pod spodem) ---- */
.stall-pop-wrap {
    position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
    padding: 0.8rem; background: rgba(12, 10, 18, 0.55);
}
.stall-pop {
    display: flex; flex-direction: column; width: min(30rem, 100%);
    max-height: 100%; border: 3px solid rgba(255, 226, 128, 0.5); border-radius: 16px;
    background: linear-gradient(180deg, rgba(78, 46, 27, 0.98), rgba(46, 27, 21, 0.99));
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.55); overflow: hidden;
}
.stall-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.8rem; color: #ffe9ad; border-bottom: 2px solid rgba(255, 220, 110, 0.22); }
.stall-pop-x { min-width: 2rem; min-height: 2rem; border-radius: 10px; background: rgba(38, 21, 20, 0.96); color: #ffd9d0; font-weight: 900; }
.stall-pop-hint { padding: 0.4rem 0.8rem 0; color: var(--muted); font-size: 0.78rem; }
.stall-pop-body { overflow: auto; padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
/* wiersz pickera ma 4 elementy (ikona, opis, +1, Max) — własny grid, żeby tekst
   NIE nachodził na przyciski (dawniej „rozjeżdżało się"). */
.stall-pop-body .item-row {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center; gap: 0.45rem;
}
.stall-pop-body .item-row .item-details { min-width: 0; }
.stall-pop-body .item-row .item-details strong { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.stall-pop-body .item-row button { white-space: nowrap; min-width: 3rem; }
.stall-pop-foot { padding: 0.55rem 0.8rem; border-top: 2px solid rgba(255, 220, 110, 0.22); }
.stall-pop-foot button { width: 100%; }

/* ambient life particles rising from ready crops + pets.
   WYDAJNOŚĆ: roślinki mają teraz JEDEN iskierkowy pseudo-element (było 2) — przy
   pełnej farmie to ~2× mniej wiecznie animowanych warstw do kompozycji = wyższy FPS,
   a „życie" zostaje. Pupile (max 5) trzymają obie iskry. */
.crop-sprite.is-ready::before,
.pet-companion::before, .pet-companion::after {
    content: ""; position: absolute; left: 50%; top: 34%;
    width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fff7c2 0 35%, rgba(255, 224, 130, 0.6) 55%, transparent 72%);
    animation: spark-rise 1.7s ease-out infinite;
}
.pet-companion::before { background: radial-gradient(circle, #d9eaff 0 35%, rgba(150, 200, 255, 0.6) 55%, transparent 72%); }
.pet-companion::after { left: 40%; animation-delay: 0.9s; animation-duration: 2.2s; background: radial-gradient(circle, #ffd6f2 0 35%, rgba(255, 150, 220, 0.5) 55%, transparent 72%); }
.crop-sprite.rar-legendary::before { background: radial-gradient(circle, #fff 0 35%, rgba(255, 207, 69, 0.7) 55%, transparent 72%); }
/* Tęczowa Ultra 🌈 — najmocniejsza poświata, tęczowa aura */
.crop-sprite.rar-rainbow { filter: drop-shadow(0 0 5px rgba(255, 120, 200, 0.85)) drop-shadow(0 0 9px rgba(120, 180, 255, 0.7)); }
.garden-preview:not([data-weather="clear"]) .crop-sprite.rar-rainbow { filter: drop-shadow(0 0 6px rgba(255, 120, 200, 0.9)) drop-shadow(0 0 11px rgba(120, 180, 255, 0.8)); }
.crop-sprite.rar-rainbow .crop-art { animation: legendary-glow 2s ease-in-out infinite; }
.crop-sprite.rar-rainbow::before { background: radial-gradient(circle, #fff 0 35%, rgba(200, 140, 255, 0.7) 55%, transparent 72%); }
.rar-badge.rar-rainbow { background: linear-gradient(90deg, #ff6b8a, #ffe14d, #6fe08a, #6fb0ff, #c07aff); color: #2a1830; }
.item-crop.rar-rainbow { border-left-color: #c07aff; box-shadow: inset 0 0 0.7rem rgba(200, 140, 255, 0.28); }
.item-icon.rar-glow.rar-rainbow { filter: drop-shadow(0 0 3px #ff8ac0) drop-shadow(0 0 8px rgba(140, 180, 255, 0.85)); }
.stall-slot.rar-rainbow { border-color: #c07aff; box-shadow: 0 0 0.8rem rgba(200, 140, 255, 0.45); }
@keyframes spark-rise {
    0% { transform: translate(-50%, 4px) scale(0.4); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translate(-50%, -20px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .crop-sprite.is-ready::before, .crop-sprite.is-ready::after,
    .pet-companion::before, .pet-companion::after { animation: none; opacity: 0; }
}

/* pet detail popup */
.pet-detail { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center;
    border-radius: 14px; padding: 0.8rem; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(0, 0, 0, 0.2); }
.pet-portrait { width: 5rem; height: 5rem; flex: none; }
.pet-info p { margin: 0.3rem 0 0.5rem; color: var(--cream); }
.rarity { display: inline-block; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; }
.rarity-common { background: #5c6b7a; } .rarity-rare { background: #2585c4; }
.rarity-epic { background: var(--violet); } .rarity-legendary { background: linear-gradient(90deg, #ffb347, #ff7ad0); color: #2a1430; }

/* profile + chicken color picker */
.profile-preview { display: grid; place-items: center; padding: 0.6rem; }
.profile-chicken { width: 6rem; height: 6rem; }
.profile-name { display: grid; gap: 0.35rem; font-weight: 800; }
.profile-name input { border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 10px; padding: 0.6rem; color: #fff; background: rgba(0, 0, 0, 0.3); }
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch { width: 2.6rem; height: 2.6rem; border-radius: 50%; padding: 0; border: 3px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15); }
.swatch.is-selected { border-color: var(--gold); box-shadow: 0 0 0.6rem rgba(255, 207, 69, 0.7); }

/* akcesoria kurki — nagrody z minigier */
/* Szafa: kafelki z podglądem kurczaczka w danym akcesorium (wizualnie). */
.acc-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.5rem; margin-bottom: 0.6rem; }
.acc-pick {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.35rem 0.25rem 0.3rem; border-radius: 0.7rem; font-weight: 800; font-size: 0.7rem;
    border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); cursor: pointer;
}
.acc-pick .acc-vis { position: relative; width: 3.3rem; height: 3.3rem; display: grid; place-items: center; }
.acc-pick .acc-vis svg { width: 100%; height: 100%; }
.acc-pick .acc-name { line-height: 1.05; text-align: center; }
.acc-pick .acc-lock { position: absolute; right: 0; bottom: 0; font-size: 0.9rem; }
.acc-pick.is-locked { opacity: 0.5; filter: grayscale(0.85); cursor: not-allowed; }
.acc-pick[disabled] { opacity: 0.5; }
.acc-pick.is-selected { border-color: var(--gold); background: rgba(255, 207, 69, 0.14); box-shadow: 0 0 0.6rem rgba(255, 207, 69, 0.7); }
/* Kafelek akcesorium = pick + przycisk palety (🎨) w rogu; zaznaczenie na komórce */
.acc-cell { position: relative; display: flex; }
.acc-cell .acc-pick { flex: 1 1 auto; width: 100%; }
.acc-cell.is-selected .acc-pick { border-color: var(--gold); background: rgba(255, 207, 69, 0.14); box-shadow: 0 0 0.6rem rgba(255, 207, 69, 0.7); }
.acc-cell.is-locked .acc-pick { opacity: 0.5; filter: grayscale(0.85); cursor: not-allowed; }
.acc-palette-btn {
    position: absolute; top: 0.12rem; right: 0.12rem; width: 1.5rem; height: 1.5rem; z-index: 2;
    border: none; border-radius: 50%; background: rgba(30, 20, 40, 0.82); font-size: 0.85rem; line-height: 1; padding: 0; cursor: pointer;
}
.acc-palette-btn:hover { background: rgba(70, 45, 95, 0.95); transform: scale(1.1); }
.acc-swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; margin: 0.4rem 0 0.8rem; }
.acc-swatch {
    width: 2.7rem; height: 2.7rem; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1rem;
    border: 3px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.3);
}
.acc-swatch.is-selected { border-color: var(--gold); box-shadow: 0 0 0.7rem var(--gold); transform: scale(1.1); }
.acc-swatch.is-locked { opacity: 0.5; cursor: not-allowed; }
.finale-art { display: inline-block; width: 6rem; height: 6rem; }
.finale-art svg { width: 100%; height: 100%; }
.reward-pop .finale-art { animation: reward-bounce 900ms ease infinite alternate; }

/* ----------------------------------------------- premium UI polish pass #6 */
/* Glossy buttons */
.big-btn, .modal-row button, .menu-grid button, .prompt-action,
.hud-btn.round, .stat-pill, .modal-close, .swatch {
    position: relative;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.12));
}
.big-btn { box-shadow: inset 0 2px rgba(255, 255, 255, 0.3), inset 0 -4px rgba(0, 0, 0, 0.28), 0 0.5rem 1rem rgba(0, 0, 0, 0.28); }

/* Wooden, framed modal with inner glow */
.modal-panel {
    border: 3px solid #ffe07a;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(120, 72, 40, 0.6), inset 0 0 2.5rem rgba(0, 0, 0, 0.3);
    background:
        repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, rgba(126, 78, 44, 0.99), rgba(58, 37, 29, 0.99));
}
.modal-head { box-shadow: inset 0 2px rgba(255, 255, 255, 0.22); }
.modal-content { background: radial-gradient(circle at 50% 0%, rgba(255, 224, 150, 0.06), transparent 40%); }

/* Item rows: soft depth + hover lift */
.modal-row {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 0.2rem 0.5rem rgba(0, 0, 0, 0.18);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.item-row:hover { transform: translateY(-1px); box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 0.5rem 0.9rem rgba(0, 0, 0, 0.26); }


/* Wooden hotbar with grain + deeper slots */
.hotbar-shell {
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 8px),
        linear-gradient(180deg, #8a5128, #4a2c17);
    box-shadow: 0 0.85rem 1.6rem rgba(0, 0, 0, 0.5), inset 0 2px rgba(255, 210, 140, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.hotbar-slot {
    background: linear-gradient(180deg, rgba(70, 42, 30, 0.98), rgba(38, 22, 16, 0.98));
    box-shadow: inset 0 2px rgba(0, 0, 0, 0.45), inset 0 -2px rgba(255, 255, 255, 0.05);
}
.hotbar-slot.is-selected { box-shadow: 0 0 0.9rem rgba(255, 220, 82, 0.7), inset 0 0 0 2px var(--gold); }


/* Glassy top HUD */
.stat-pill, .hud-btn.round {
    box-shadow: 0 0.45rem 0.9rem rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 239, 162, 0.4);
}
.level-badge { box-shadow: inset 0 2px rgba(255, 255, 255, 0.12), 0 0.3rem 0.6rem rgba(0, 0, 0, 0.3); }

/* Price pills + tags shine */
.price-pill { box-shadow: inset 0 1px rgba(255, 255, 255, 0.14); }

@media (max-width: 760px) {
    /* HUD scisniety: jeden rzad pigulek + jeden rzad przyciskow */
    .hud-top { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.35rem; padding: 0.5rem; }
    .hud-left { grid-row: 1; }
    .hud-right { grid-row: 1; justify-content: flex-end; flex-wrap: nowrap; overflow: hidden; }
    .hud-center { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 0.4rem; }
    .stat-pill { min-height: 2.1rem; padding: 0 0.55rem; font-size: 0.85rem; }
    .stat-pill .hud-icon { width: 1.15rem; height: 1.15rem; }
    .stat-pill.event span { display: none; }
    .hud-btn.round { width: 2.5rem; height: 2.5rem; }
    .big-btn { min-height: 2.5rem; font-size: 0.9rem; padding: 0 0.75rem; }
    .pet-panel { top: auto; bottom: 16.6rem; left: 0.6rem; }
    .quest-tracker { bottom: 16.6rem; left: auto; right: 0.6rem; }
    .side-icons { display: none; }
    /* HOTBAR NA TELEFON: 5 pól MUSI się zmieścić. Kluczowe: minmax(0,1fr)
       zamiast wymuszonego 4.4rem (inaczej 5×70px=350px wypycha pola za ekran).
       Pomniejszamy też badge i strzałki, żeby zostało miejsce na pola. */
    /* KAFELKI DUZE: sloty dostaja WLASNY rzad pelnej szerokosci (5 pol ~64px
       zamiast scisnietych 35px), a odznaka poziomu i strzalki schodza do rzedu
       PONIZEJ. To jedyny sposob, by na 375px kafle byly naprawde duze. */
    .hotbar-shell { width: calc(100% - 0.4rem); gap: 0.26rem; padding: 0.32rem; flex-wrap: wrap; justify-content: center; }
    .hotbar-slots-wrap { order: -1; flex: 1 1 100%; width: 100%; margin-bottom: 0.32rem; }
    .hotbar-stack { min-width: 0; gap: 0.14rem; }
    .hotbar { min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.34rem; }
    .hotbar-slot { min-height: 4.6rem; padding: 0.26rem; }
    .hotbar-slot .item-icon { width: 2.9rem; height: 2.9rem; }
    .item-kind { display: none; } /* kategoria nie mieści się na małym polu */
    .level-badge { width: auto; min-width: 3.2rem; padding: 0.2rem 0.55rem; }
    .level-badge .hud-icon { width: 1.7rem; height: 1.7rem; }
    .level-badge .lvl-num { top: 0.5rem; font-size: 0.68rem; }
    .hotbar-nav { min-width: 2.7rem; min-height: 2.5rem; font-size: 1.2rem; padding: 0; }
    .interaction-prompt[data-anchored="screen"] { bottom: 16rem; }
    .toast { bottom: 16rem; z-index: 62; } /* pod plecakiem, jak na desktopie */
    /* OTWARTY EKWIPUNEK na telefonie: kompaktowe pola + ograniczona wysokość ze
       scrollem, żeby (1) nie był „za duży na ekranie", (2) nie sięgał górnych
       przycisków Sklep/Ogród/Sprzedaj. */
    .inventory-drawer { bottom: 6rem; padding: 0.45rem; max-height: 44vh; overflow-y: auto; }
    .inventory-drawer .drawer-grid { grid-template-columns: repeat(auto-fill, 3.6rem); gap: 0.3rem; }
    .inventory-drawer .drawer-cell { width: 3.6rem; height: 3.6rem; min-height: 3.6rem; }
    .inventory-drawer .drawer-cell .item-icon { width: 2rem; height: 2rem; }
    .item-name { font-size: 0.5rem; padding: 0.05rem 0.14rem; }
}

/* minigra lowienia */
.fish-scene { display: grid; gap: 0.5rem; justify-items: center; padding: 0.4rem 0; }
.fish-emoji { font-size: 2.4rem; animation: bob 1.8s ease-in-out infinite; }
.fish-scene p { margin: 0; color: var(--cream); font-weight: 700; text-align: center; }
.fish-bar {
    position: relative; width: min(24rem, 90%); height: 1.4rem;
    border-radius: 999px; background: linear-gradient(180deg, #16324a, #0e2233);
    border: 2px solid rgba(127, 230, 255, 0.4); overflow: hidden;
}
.fish-zone {
    position: absolute; left: 32%; width: 36%; top: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(90, 220, 130, 0.85), rgba(40, 160, 90, 0.85));
}
.fish-zone::after {
    content: ""; position: absolute; left: 44%; width: 12%; top: 0; bottom: 0;
    background: rgba(255, 224, 120, 0.9);
}
.fish-marker {
    position: absolute; top: -2px; bottom: -2px; width: 5px; left: 0;
    margin-left: -2.5px; border-radius: 3px; background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------- title screen */
.app-shell:has(.auth-panel:not([hidden])) { padding: 1rem; }

.auth-panel {
    width: min(34rem, 100%);
    padding: 2.6rem 1.8rem 1.6rem;
    border-color: rgba(203, 168, 255, 0.5);
    background: linear-gradient(180deg, rgba(52, 38, 96, 0.94), rgba(38, 26, 66, 0.97));
    box-shadow:
        0 1.5rem 4rem rgba(0, 0, 0, 0.5),
        0 0 6rem rgba(150, 110, 255, 0.28),
        inset 0 0 3rem rgba(120, 90, 220, 0.2);
}
.auth-panel::before {
    opacity: 0.65;
    background:
        radial-gradient(circle at 50% 12%, rgba(180, 140, 255, 0.3), transparent 15rem),
        radial-gradient(circle at 14% 82%, rgba(110, 220, 255, 0.16), transparent 11rem),
        radial-gradient(circle at 86% 78%, rgba(255, 140, 210, 0.16), transparent 11rem);
}
.auth-panel h1 {
    line-height: 0.98;
    background: linear-gradient(180deg, #fff7d6 25%, #ffd98a 55%, #ff9ad2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0.22rem rgba(60, 22, 82, 0.9)) drop-shadow(0 0 1.6rem rgba(180, 140, 255, 0.55));
}
.title-chick {
    display: inline-block;
    font-size: 3.2rem;
    line-height: 1;
    animation: chick-hop 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0.4rem 0.8rem rgba(0, 0, 0, 0.4));
}
@keyframes chick-hop {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    30% { transform: translateY(-0.55rem) rotate(4deg); }
    50% { transform: translateY(0) rotate(-2deg); }
}
.title-dedication {
    margin: 0.5rem 0 0.15rem;
    font-size: 1.2rem;
    color: #ffd6f2 !important;
    text-shadow: 0 0 1rem rgba(255, 140, 210, 0.6);
}
.title-dedication strong { color: #fff; }
.title-sub {
    margin: 0 0 0.4rem;
    font-weight: 700 !important;
    font-size: 0.92rem;
    color: #cdb8f2 !important;
    line-height: 1.45;
}
.mode-row { margin-top: 1rem; }
.mode-row .play-btn {
    flex-basis: 100%;
    padding: 0.95rem 1rem;
    font-size: 1.2rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #4fd680, #1f8a4c) !important;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 2px rgba(255, 255, 255, 0.35), inset 0 -5px rgba(0, 0, 0, 0.3), 0 0.7rem 1.6rem rgba(28, 130, 80, 0.45);
    animation: play-glow 2.4s ease-in-out infinite;
}
@keyframes play-glow {
    0%, 100% { box-shadow: inset 0 2px rgba(255, 255, 255, 0.35), inset 0 -5px rgba(0, 0, 0, 0.3), 0 0.7rem 1.6rem rgba(28, 130, 80, 0.45); }
    50% { box-shadow: inset 0 2px rgba(255, 255, 255, 0.35), inset 0 -5px rgba(0, 0, 0, 0.3), 0 0.7rem 2.2rem rgba(70, 220, 130, 0.65); }
}
.mode-row button:nth-child(2) { background: linear-gradient(180deg, #a455e0, var(--violet-dark)); }
.mode-row button:nth-child(3) { background: linear-gradient(180deg, #34a9e8, var(--blue-dark)); }
.title-footer {
    margin: 1.3rem 0 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: #b7a3e0 !important;
    letter-spacing: 0.4px;
}

/* twinkling stars over the title panel */
.title-stars { position: absolute; inset: 0; pointer-events: none; }
.title-stars i {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(255, 244, 200, 0.75);
    animation: star-twinkle 3.4s ease-in-out infinite;
    opacity: 0;
}
@keyframes star-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.95; transform: scale(1.15); }
}
.title-stars i:nth-child(1) { left: 8%; top: 12%; animation-delay: 0s; }
.title-stars i:nth-child(2) { left: 22%; top: 30%; animation-delay: 0.9s; }
.title-stars i:nth-child(3) { left: 15%; top: 62%; animation-delay: 1.7s; }
.title-stars i:nth-child(4) { left: 34%; top: 8%; animation-delay: 2.4s; }
.title-stars i:nth-child(5) { left: 48%; top: 20%; animation-delay: 0.5s; width: 5px; height: 5px; }
.title-stars i:nth-child(6) { left: 62%; top: 9%; animation-delay: 1.2s; }
.title-stars i:nth-child(7) { left: 76%; top: 24%; animation-delay: 2s; }
.title-stars i:nth-child(8) { left: 90%; top: 14%; animation-delay: 2.9s; }
.title-stars i:nth-child(9) { left: 84%; top: 55%; animation-delay: 0.7s; }
.title-stars i:nth-child(10) { left: 93%; top: 78%; animation-delay: 1.5s; }
.title-stars i:nth-child(11) { left: 6%; top: 84%; animation-delay: 2.2s; }
.title-stars i:nth-child(12) { left: 55%; top: 88%; animation-delay: 3.1s; }
@media (prefers-reduced-motion: reduce) {
    .title-chick, .mode-row .play-btn { animation: none; }
    .title-stars i { animation: none; opacity: 0.6; }
}

/* ------------------------------------------------ title scene: moon + hills */
body:has(.auth-panel:not([hidden]))::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(circle at 82% 16%, rgba(255, 248, 220, 0.95) 0 3.2rem, rgba(220, 200, 255, 0.35) 3.4rem 7rem, transparent 7.5rem),
        radial-gradient(circle at 82% 16%, rgba(180, 150, 255, 0.2), transparent 16rem);
}
body:has(.auth-panel:not([hidden]))::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 34vh;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(90rem 16rem at 18% 118%, rgba(46, 36, 92, 0.9), transparent 70%),
        radial-gradient(80rem 14rem at 85% 122%, rgba(38, 30, 78, 0.95), transparent 70%),
        linear-gradient(180deg, transparent, rgba(16, 12, 38, 0.75));
}
.auth-panel { z-index: 1; }

/* ------------------------------------------------------------ quest tracker */
.quest-tracker {
    position: absolute; right: clamp(0.6rem, 1.6vw, 1.1rem); top: 4.4rem; z-index: 70;
    display: grid; gap: 0.3rem; width: 15rem; padding: 0.65rem 0.75rem;
    border-radius: 14px; background: rgba(30, 20, 34, 0.94);
    border: 2px solid rgba(255, 239, 162, 0.3); 
    cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease;
    box-shadow: 0 0.45rem 0.9rem rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.14);
}
.quest-tracker:hover { transform: translateY(-2px); box-shadow: 0 0.7rem 1.3rem rgba(0, 0, 0, 0.4); }
.quest-tracker .qt-head { display: flex; align-items: center; gap: 0.4rem; }
.quest-tracker .qt-head strong { flex: 1; font-size: 0.88rem; color: #ffe9ad; line-height: 1.15; }
.quest-tracker .qt-badge { font-size: 1.1rem; }
.quest-tracker .qt-count {
    font-size: 0.66rem; font-weight: 900; color: var(--muted);
    background: rgba(0, 0, 0, 0.35); border-radius: 999px; padding: 0.1rem 0.4rem;
}
.quest-tracker .qt-desc { font-size: 0.74rem; color: var(--muted); font-weight: 700; line-height: 1.3; }
.qt-bar { height: 0.5rem; border-radius: 999px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.qt-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7de06c, #ffd24a); transition: width 300ms ease; }
.qt-bar.small { display: block; width: 100%; max-width: 14rem; margin-top: 0.25rem; height: 0.4rem; }
.quest-tracker .qt-foot { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 900; color: #fff; }
.quest-tracker .qt-reward { color: var(--gold); }

/* quest rows in modal */
.quest-row { grid-template-columns: auto minmax(0, 1fr) auto; display: grid; align-items: center; }
.quest-row .quest-mark { font-size: 1.5rem; }
.quest-row.is-done { opacity: 0.75; border-left: 7px solid var(--green); }
.quest-row:not(.is-done) { border-left: 7px solid var(--gold); }
.quest-side { display: grid; gap: 0.2rem; justify-items: end; }
.quest-progress { font-weight: 900; color: #ffe9ad; font-size: 0.85rem; }
.quest-reward { font-size: 0.72rem; font-weight: 800; color: var(--gold); white-space: nowrap; }

/* czerwony przycisk „niebezpieczny" (Wyczyść farmę) + jego wiersz */
.btn-danger { background: linear-gradient(180deg, #f0685f, #c23227) !important; color: #fff !important; }
.btn-danger:disabled { background: linear-gradient(180deg, #7a5150, #6a3f3c) !important; opacity: 0.6; cursor: not-allowed; }
.danger-row { border-left: 7px solid #c23227; }

/* lista misji w Wątku fabularnym (najnowsze u góry) */
.qt-hint { display: block; font-size: 0.72rem; opacity: 0.85; margin-top: 0.15rem; }
.story-list-row { border-left: 7px solid rgba(255, 255, 255, 0.18); }
.story-list-row.is-claimed { opacity: 0.72; border-left-color: var(--green); }
.story-list-row.is-ready { border-left-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.35); }
.story-list-row .story-claim-btn { white-space: nowrap; }

/* achievements grid */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.55rem; }
.ach-card {
    display: grid; gap: 0.25rem; justify-items: center; text-align: center;
    border-radius: 14px; padding: 0.8rem 0.55rem;
    background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(0, 0, 0, 0.25);
}
.ach-card.is-done {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(255, 207, 69, 0.16), rgba(255, 255, 255, 0.06));
    box-shadow: 0 0 0.7rem rgba(255, 207, 69, 0.3);
}
.ach-card:not(.is-done) { opacity: 0.75; }
.ach-icon { font-size: 1.9rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.ach-card strong { font-size: 0.85rem; line-height: 1.1; }
.ach-desc { font-size: 0.7rem; color: var(--muted); font-weight: 700; line-height: 1.25; }
.ach-progress { font-size: 0.7rem; font-weight: 900; color: #ffe9ad; }

/* journal */
.journal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.journal-stats > div {
    display: grid; justify-items: center; gap: 0.1rem; padding: 0.6rem 0.3rem;
    border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 2px solid rgba(255, 239, 162, 0.2);
}
.journal-stats strong { font-size: 1.15rem; color: #ffe9ad; }
.journal-stats span { font-size: 0.66rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.journal-h { margin: 0.4rem 0 0; font-size: 1rem; color: #fff4bd; }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: 0.45rem; }
.journal-cell {
    display: grid; gap: 0.15rem; justify-items: center; text-align: center;
    border-radius: 12px; padding: 0.55rem 0.3rem;
    background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(0, 0, 0, 0.22);
}
.journal-cell .item-icon { width: 2.2rem; height: 2.2rem; }
.journal-cell strong { font-size: 0.72rem; line-height: 1.1; }
.journal-cell span:last-child { font-size: 0.62rem; color: var(--muted); font-weight: 800; }
.journal-cell.is-unknown { opacity: 0.5; filter: grayscale(0.7); }

/* daily reward */
.daily-intro { margin: 0; text-align: center; color: var(--cream); font-weight: 700; }
.daily-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; }
.daily-cell {
    display: grid; gap: 0.15rem; justify-items: center; padding: 0.55rem 0.15rem;
    border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(0, 0, 0, 0.25);
}
.daily-cell .daily-day { font-size: 0.6rem; font-weight: 900; color: var(--muted); text-transform: uppercase; }
.daily-cell .daily-gift { font-size: 1.4rem; }
.daily-cell .daily-amount { font-size: 0.66rem; font-weight: 900; color: var(--gold); }
.daily-cell.done { opacity: 0.55; border-color: var(--green); }
.daily-cell.next { border-color: var(--gold); box-shadow: 0 0 0.7rem rgba(255, 207, 69, 0.45); animation: daily-pulse 1.6s ease-in-out infinite; }
@keyframes daily-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* finale */
.finale { display: grid; gap: 0.5rem; justify-items: center; text-align: center; padding: 0.6rem 0.4rem; }
.finale-emoji { font-size: 2.6rem; letter-spacing: 0.4rem; }
.finale h3 { margin: 0; font-size: 1.4rem; color: #ffd6f2; text-shadow: 0 0 1rem rgba(255, 140, 210, 0.5); }
.finale p { margin: 0; color: var(--cream); line-height: 1.5; max-width: 30rem; }
.finale-note { font-weight: 800; color: #ffe9ad !important; }

/* level-up flash */
.garden-preview.level-up .fx-grade::after {
    background: radial-gradient(circle at 50% 55%, rgba(255, 224, 120, 0.55), transparent 65%) !important;
    animation: levelflash 1.5s ease-out;
}
@keyframes levelflash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* harvest burst particles */
.fx-burst { position: absolute; width: 48px; height: 48px; pointer-events: none; }
.fx-burst i {
    position: absolute; left: 22px; top: 22px; width: 7px; height: 7px; border-radius: 50%;
    background: radial-gradient(circle, #fff7c2 0 40%, rgba(255, 210, 74, 0.8) 60%, transparent 75%);
    animation: burst 0.85s ease-out forwards;
}
.fx-burst i:nth-child(1) { --bx: -22px; --by: -26px; }
.fx-burst i:nth-child(2) { --bx: 20px; --by: -30px; animation-delay: 0.04s; }
.fx-burst i:nth-child(3) { --bx: -30px; --by: 2px; animation-delay: 0.08s; }
.fx-burst i:nth-child(4) { --bx: 28px; --by: -4px; animation-delay: 0.02s; }
.fx-burst i:nth-child(5) { --bx: -10px; --by: -38px; animation-delay: 0.1s; }
.fx-burst i:nth-child(6) { --bx: 8px; --by: -18px; animation-delay: 0.06s; }
.fx-burst-rare i { background: radial-gradient(circle, #d9f2ff 0 40%, rgba(79, 155, 255, 0.85) 60%, transparent 75%); }
.fx-burst-epic i { background: radial-gradient(circle, #efe0ff 0 40%, rgba(176, 107, 255, 0.85) 60%, transparent 75%); }
.fx-burst-legendary i { width: 9px; height: 9px; background: radial-gradient(circle, #fff 0 40%, rgba(255, 207, 69, 0.95) 60%, transparent 75%); }
@keyframes burst {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(var(--bx), var(--by)) scale(1.1); opacity: 0; }
}
/* Kusik 💗 — małe serduszka unoszą się w górę */
/* serduszka z kusika renderowane na SAMYM WIERZCHU — nad HUD, panelami, wszystkim */
.fx-top { z-index: 9999 !important; }
.fx-hearts { position: absolute; width: 48px; height: 48px; pointer-events: none; }
.fx-hearts i {
    position: absolute; left: 24px; top: 20px; font-size: 1.05rem; line-height: 1;
    opacity: 0; transform: translate(-50%, 0);
    animation: heart-float 1.4s ease-out forwards;
}
@keyframes heart-float {
    0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--kx, 0px)), -66px) scale(1); opacity: 0; }
}
/* …a nad zakochanymi jedno WIELKIE serce rośnie i leci w górę */
/* 💕 Serduszkowy Szał: serduszka lądują W ŚWIECIE (na grządkach) i trzeba PODBIEC,
   żeby wejść na kafel i złapać. Węzeł .world-heart nosi pozycję (transform=kafel),
   a wewnętrzny .wh-inner robi wpadanie z góry, drganie i zanik pod koniec życia. */
/* Chwilowy licznik Serduszkowego Szału (u góry, pod HUD-em) */
.heart-counter {
    position: absolute; top: 4.6rem; left: 50%; transform: translateX(-50%); z-index: 40;
    padding: 0.28rem 0.85rem; border-radius: 999px; pointer-events: none; white-space: nowrap;
    background: linear-gradient(180deg, rgba(255, 120, 170, 0.95), rgba(214, 70, 130, 0.95));
    color: #fff; font-weight: 900; font-size: 0.9rem;
    box-shadow: 0 3px 10px rgba(214, 70, 130, 0.45); border: 2px solid rgba(255, 255, 255, 0.4);
}
.heart-counter .hc-h { animation: hc-beat 0.9s ease-in-out infinite; display: inline-block; }
.heart-counter.is-done { background: linear-gradient(180deg, #ffd24a, #e0a531); color: #3a2410; }
@keyframes hc-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.world-heart { position: absolute; left: 0; top: 0; pointer-events: none; width: 32px; height: 32px; }
.world-heart .wh-inner {
    display: block; font-size: 1.7rem; line-height: 1; text-align: center;
    filter: drop-shadow(0 2px 3px rgba(255, 90, 150, 0.55));
    animation: world-heart-life 5.2s ease-out forwards;
}
@keyframes world-heart-life {
    0%   { transform: translateY(-34px) scale(0.5) rotate(-8deg); opacity: 0; }
    10%  { transform: translateY(0) scale(1.15) rotate(4deg); opacity: 1; }
    18%  { transform: translateY(0) scale(1) rotate(0deg); }
    50%  { transform: translateY(-3px) scale(1.04); }
    82%  { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-4px) scale(0.9); opacity: 0; }
}
.garden-preview.perf-lite .world-heart .wh-inner { animation-timing-function: linear; }
/* 🥚 posadzone jajko (gniazdo) — węzeł na kafelku z emoji i etykietką postępu */
.egg-nest { position: absolute; left: 0; top: 0; pointer-events: none; width: 36px; height: 36px; display: grid; place-items: center; }
.egg-nest .egg-emoji { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); animation: egg-wobble 2.6s ease-in-out infinite; }
.egg-nest .egg-tag {
    position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%);
    font-size: 0.6rem; font-weight: 900; color: #fff4d6; white-space: nowrap;
    background: rgba(30, 20, 34, 0.85); border-radius: 999px; padding: 0.02rem 0.36rem;
    border: 1px solid rgba(255, 220, 110, 0.4);
}
.egg-nest.is-ready .egg-emoji { animation: egg-ready 0.8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 220, 90, 0.9)); }
.egg-nest.is-ready .egg-tag { background: linear-gradient(180deg, #ffd24a, #e0a531); color: #3a2410; border-color: #fff0b0; }
@keyframes egg-wobble { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes egg-ready { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.12); } }
/* 🍽️ brudny stół restauracji — do posprzątania (E) */
.dirty-table { position: absolute; left: 0; top: 0; pointer-events: none; width: 32px; height: 32px; display: grid; place-items: center; }
.dirty-table .dt-emoji { font-size: 1.3rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); animation: egg-wobble 3s ease-in-out infinite; }
.garden-preview[data-weather="heart"]::after {
    background: radial-gradient(circle at 50% -8%, rgba(255, 150, 200, 0.22), transparent 60%),
        linear-gradient(180deg, rgba(255, 190, 220, 0.12), transparent 32%);
}
.fx-bigheart { position: absolute; width: 48px; height: 48px; pointer-events: none; }
.fx-bigheart b {
    position: absolute; left: 24px; top: 12px; font-size: 1.7rem; line-height: 1;
    transform: translate(-50%, 0); transform-origin: center bottom; opacity: 0;
    filter: drop-shadow(0 2px 6px rgba(255, 90, 150, 0.5));
    animation: bigheart 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes bigheart {
    0% { transform: translate(-50%, 0) scale(0.2); opacity: 0; }
    18% { opacity: 1; }
    55% { transform: translate(-50%, -54px) scale(2.1); opacity: 1; }
    100% { transform: translate(-50%, -140px) scale(2.6); opacity: 0; }
}

/* menu additions */
.menu-emoji { font-size: 1.3rem; width: 1.6rem; text-align: center; }
.menu-count { margin-left: auto; font-size: 0.7rem; font-weight: 900; color: var(--muted); background: rgba(0, 0, 0, 0.3); border-radius: 999px; padding: 0.1rem 0.45rem; }


@media (max-width: 700px) { .daily-grid { grid-template-columns: repeat(4, 1fr); } .journal-stats { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------ UI polish v2 ------ */
/* modal wjeżdża miękko */
.modal-backdrop:not([hidden]) { animation: backdrop-in 180ms ease; }
.modal-backdrop:not([hidden]) .modal-panel { animation: modal-in 240ms cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* plakietka pod ikoną przedmiotu — koniec „gołych" ikon w sklepach */
.item-row .item-icon, .egg-head .item-icon, .inventory-row .item-icon {
    width: 3rem; height: 3rem; padding: 0.3rem; border-radius: 12px;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.22), transparent 62%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.4));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), inset 0 -2px rgba(0, 0, 0, 0.3);
}
.item-seed .item-icon { background-color: rgba(47, 158, 87, 0.25); }
.item-egg .item-icon, .egg-head .item-icon { background-color: rgba(139, 63, 212, 0.25); }
.item-tool .item-icon { background-color: rgba(37, 133, 196, 0.25); }
.item-decor .item-icon { background-color: rgba(224, 165, 49, 0.22); }
.item-crop .item-icon { background-color: rgba(178, 92, 229, 0.22); }

/* wiersze wchodzą kaskadą TYLKO przy świeżym otwarciu (nie przy auto-refreshu) */
.modal-fresh .modal-content > .modal-row, .modal-fresh .modal-content .egg-card,
.modal-fresh .modal-content .ach-card, .modal-fresh .modal-content .journal-cell {
    animation: row-in 260ms ease backwards;
}
.modal-fresh .modal-content > *:nth-child(1) { animation-delay: 0ms; }
.modal-fresh .modal-content > *:nth-child(2) { animation-delay: 25ms; }
.modal-fresh .modal-content > *:nth-child(3) { animation-delay: 50ms; }
.modal-fresh .modal-content > *:nth-child(4) { animation-delay: 75ms; }
.modal-fresh .modal-content > *:nth-child(5) { animation-delay: 100ms; }
.modal-fresh .modal-content > *:nth-child(6) { animation-delay: 125ms; }
.modal-fresh .modal-content > *:nth-child(7) { animation-delay: 150ms; }
.modal-fresh .modal-content > *:nth-child(8) { animation-delay: 175ms; }
@keyframes row-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* hotbar: hover-lift, chwytanie i cel upuszczenia */
.hotbar-slot.has-item:hover { filter: brightness(1.12); }
.hotbar-slot.is-dragging { opacity: 0.4; }
.hotbar-slot.drag-over {
    border-color: var(--cyan, #7fe6ff);
    box-shadow: 0 0 0.8rem rgba(127, 230, 255, 0.65), inset 0 0 0 2px var(--cyan, #7fe6ff);
    transform: scale(1.05);
}
.hotbar-slot { transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
/* dotyk: pola nie łapią gestu przewijania — przeciąganie palcem działa płynnie */
/* touch-action:none = brak scrolla przy dotyku; user-select/user-drag none =
   na KOMPIE mysz nie zaznacza tekstu i nie odpala natywnego przeciągania, które
   kradło gest (dlatego DnD działał na telefonie, a na kompie nie). */
.hotbar-slot, .drawer-cell {
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    -webkit-user-drag: none;
}
.hotbar-slot .item-icon, .drawer-cell .item-icon, .drag-ghost { -webkit-user-drag: none; user-select: none; }
/* „duszek" chwyconego przedmiotu podążający za wskaźnikiem/palcem */
.drag-ghost {
    position: fixed; z-index: 9999; pointer-events: none; opacity: 0.9;
    transform: translate(-50%, -50%); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.drag-ghost .item-icon { width: 3.2rem; height: 3.2rem; display: block; }
/* podświetlenie kolumny skrzyni jako celu upuszczenia */
.chest-col { border-radius: 12px; transition: box-shadow 120ms ease; }
.chest-col.drag-over { box-shadow: 0 0 0 2px var(--cyan, #7fe6ff), 0 0 0.9rem rgba(127, 230, 255, 0.5); }

/* przyciski „squash" przy kliknięciu */
button:active:not(:disabled) { transform: translateY(1px) scale(0.98); }

/* ----------------------------------------------------- event dnia w HUD */
.stat-pill.event {
    color: #ffd6f2; cursor: pointer; border-color: rgba(255, 140, 210, 0.5);
    background: linear-gradient(180deg, rgba(90, 40, 110, 0.85), rgba(50, 24, 70, 0.85));
    animation: event-glow 3s ease-in-out infinite;
}
.stat-pill.event span { font-size: 0.82rem; }
@keyframes event-glow {
    0%, 100% { box-shadow: 0 0.45rem 0.9rem rgba(0, 0, 0, 0.3), 0 0 0.6rem rgba(255, 140, 210, 0.25); }
    50% { box-shadow: 0 0.45rem 0.9rem rgba(0, 0, 0, 0.3), 0 0 1.1rem rgba(255, 140, 210, 0.55); }
}

/* ------------------------------------------------- sterowanie dotykowe */
.touch-controls { display: none; }
@media (pointer: coarse) {
    /* Kontrolki dotyku: polprzezroczyste i PONAD dymkami/toastami. */
    .touch-controls { display: block; position: absolute; inset: 0; z-index: 118; pointer-events: none; }
    .dpad {
        position: absolute; left: 0.8rem;
        bottom: calc(7.4rem + env(safe-area-inset-bottom, 0px));
        width: 9.4rem; height: 9.4rem; border-radius: 50%;
        background: radial-gradient(circle, rgba(30, 20, 34, 0.34) 58%, rgba(30, 20, 34, 0.12) 74%, transparent 75%);
        display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
        pointer-events: none;
    }
    .dpad-btn {
        pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
        display: grid; place-items: center; padding: 0; font-size: 1.15rem;
        color: rgba(255, 233, 173, 0.85);
        background: rgba(30, 20, 34, 0.30); border: 1px solid rgba(255, 239, 162, 0.25);
        border-radius: 50%; margin: 0.15rem; box-shadow: none;
    }
    .dpad-btn:active { background: rgba(139, 63, 212, 0.65); color: #fff; transform: scale(0.94); }
    .dpad-up { grid-column: 2; grid-row: 1; }
    .dpad-left { grid-column: 1; grid-row: 2; }
    .dpad-right { grid-column: 3; grid-row: 2; }
    .dpad-down { grid-column: 2; grid-row: 3; }
    .touch-action {
        pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
        position: absolute; right: 0.9rem;
        bottom: calc(8.8rem + env(safe-area-inset-bottom, 0px));
        width: 4.4rem; height: 4.4rem; border-radius: 50%;
        font-size: 1.5rem; font-weight: 950; color: rgba(255, 255, 255, 0.95);
        background: rgba(139, 63, 212, 0.55);
        border: 2px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.3);
    }
    .touch-action:active { transform: scale(0.92); background: rgba(139, 63, 212, 0.9); }

    /* male, plaskie powiadomienia NAD hotbarem, miedzy joystickiem a "E" */
    .toast {
        bottom: calc(7.9rem + env(safe-area-inset-bottom, 0px));
        max-width: min(46vw, 13rem);
        font-size: 0.72rem; line-height: 1.25;
        padding: 0.3rem 0.55rem; border-radius: 8px; border-width: 1px;
        box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.35);
    }
    /* prompt akcji nie wchodzi pod toast */
    .interaction-prompt[data-anchored="screen"] { bottom: calc(11rem + env(safe-area-inset-bottom, 0px)); }
}


/* --------------------------------------------- aurora w Księżycową Noc */
.garden-preview[data-weather="lunar"] .fx-grade::after {
    background:
        linear-gradient(115deg, transparent 30%, rgba(150, 110, 255, 0.16) 42%, rgba(110, 220, 255, 0.14) 50%, rgba(255, 130, 220, 0.12) 58%, transparent 70%),
        radial-gradient(circle at 50% -8%, rgba(160, 130, 255, 0.22), transparent 60%),
        radial-gradient(circle at 85% 10%, rgba(130, 180, 255, 0.2), transparent 40%);
    background-size: 260% 100%, 100% 100%, 100% 100%;
    animation: aurora-drift 14s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
    from { background-position: 0% 0, 0 0, 0 0; }
    to { background-position: 100% 0, 0 0, 0 0; }
}

/* puste pola MUSZĄ być trafialne (pointer-events:auto) — inaczej elementFromPoint
   je pomija i nie da się upuścić przedmiotu na pusty slot (np. przeciągnąć 3→9). */
.drawer-item-empty { opacity: 0.4; border-style: dashed; pointer-events: auto; }
.hotbar-pets { background: linear-gradient(180deg, #e07aae, #b03a78); font-size: 1.2rem; }
.pet-active { border-left: 7px solid var(--gold); }

.npc-sprite {
    position: absolute; left: 0; top: 0; width: 48px; height: 48px;
    transition: transform 560ms linear;
}
.npc-name {
    position: absolute; left: 50%; bottom: -1rem; transform: translateX(-50%);
    border-radius: 999px; padding: 0.06rem 0.45rem; font-size: 0.62rem; font-weight: 900;
    white-space: nowrap; background: rgba(43, 26, 64, 0.85); color: #ffe9ad;
}
.npc-marker {
    position: absolute; left: 50%; top: -1.15rem; transform: translateX(-50%);
    font-size: 1rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
    animation: marker-bounce 1.2s ease-in-out infinite;
}
@keyframes marker-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
/* Złoty wykrzyknik = główna misja fabularna u tego mieszkańca */
.npc-marker .quest-mark {
    display: inline-block; font-weight: 900; font-size: 1.5rem; line-height: 1;
    color: #ffd24a; -webkit-text-stroke: 1.5px #7a4a00; text-stroke: 1.5px #7a4a00;
    text-shadow: 0 0 8px rgba(255, 200, 74, 0.9), 0 2px 3px rgba(0, 0, 0, 0.6);
}
.npc-dialog {
    display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: center;
    border-radius: 14px; padding: 0.8rem; background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.2);
}
.npc-portrait { width: 4.6rem; height: 4.6rem; flex: none; }
.npc-speech { font-style: italic; color: var(--cream); line-height: 1.45; }
.weed-sprite .weed-art { animation: sway var(--sway-dur, 2.6s) ease-in-out infinite; transform-origin: 50% 92%; }

/* ---- feedback monet ---- */
.hud-right { position: relative; }
.coin-float {
    position: absolute; right: 0.4rem; top: 100%; margin-top: 0.3rem;
    font-weight: 950; font-size: 0.95rem; pointer-events: none;
    animation: coin-float 1.25s ease-out forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.coin-float.gain { color: #9fe87a; }
.coin-float.loss { color: #ff9a8a; }
@keyframes coin-float {
    0% { opacity: 0; transform: translateY(4px); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-16px); }
}
.coin-pop { animation: coin-pop 0.4s ease; }
@keyframes coin-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---- kolumna miniaturek paneli ---- */
.side-icons {
    position: absolute; right: clamp(0.6rem, 1.6vw, 1.1rem); top: 4.6rem; z-index: 71;
    display: grid; gap: 0.35rem;
}
.side-icons button {
    width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1.15rem; border-radius: 12px;
    background: rgba(30, 20, 34, 0.92); border: 2px solid rgba(255, 239, 162, 0.3);
    
}
.side-icons button:hover { border-color: var(--gold); }

/* ---- zwijane panele ---- */
.quest-tracker {
    top: auto; bottom: 7.6rem;
    right: auto; left: clamp(0.6rem, 1.6vw, 1.1rem);
}
.side-icons { top: 50%; transform: translateY(-50%); }
.panel-feed { right: 2.1rem !important; width: auto !important; padding: 0 0.35rem !important; font-size: 0.9rem !important; }
.panel-feed b { font-size: 0.62rem; margin-left: 1px; color: #ffd24a; }
.panel-fold {
    position: absolute; right: 0.3rem; top: 0.3rem; width: 1.5rem; height: 1.5rem;
    padding: 0; font-size: 0.8rem; line-height: 1; border-radius: 8px;
    background: rgba(0, 0, 0, 0.3); color: var(--muted);
}
.pet-panel, .quest-tracker { padding-right: 2rem; }
.pet-panel.is-collapsed, .quest-tracker.is-collapsed {
    width: auto; padding: 0.25rem; cursor: pointer;
}
.panel-mini {
    display: grid; place-items: center; gap: 0.15rem;
    width: 2.6rem; height: 2.6rem; padding: 0.15rem; border-radius: 10px;
    background: transparent; font-size: 1.05rem;
}
.panel-mini .pet-avatar { width: 2rem; height: 2rem; }
.panel-mini .mini-bar { display: block; width: 1.8rem; height: 0.3rem; border-radius: 999px; background: rgba(0,0,0,.4); overflow: hidden; }
.panel-mini .mini-bar b { display: block; height: 100%; background: linear-gradient(90deg, #7de06c, #ffd24a); }

/* ---- hotbar/ekwipunek: stany hover/selected bez skakania ---- */
.hotbar-slot.has-item:hover { filter: none; border-color: rgba(255, 239, 162, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 239, 162, 0.35); }
.hotbar-slot.is-selected { border-color: var(--gold); }
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, 4.4rem); gap: 0.45rem; justify-content: center; }
.drawer-cell { width: 4.4rem; height: 4.4rem; min-height: 4.4rem; }
.drawer-cell .item-icon { width: 2.5rem; height: 2.5rem; }

/* ---- ping celu (Targ) ---- */
.guide-ping { position: absolute; width: 48px; height: 48px; pointer-events: none; }
.guide-ping i {
    position: absolute; inset: 4px; border-radius: 50%;
    border: 3px solid var(--gold); animation: ping-ring 1.4s ease-out infinite;
}
.guide-ping i:nth-child(2) { animation-delay: 0.7s; }
.guide-ping span {
    position: absolute; left: 50%; top: -1.4rem; transform: translateX(-50%);
    font-size: 0.7rem; font-weight: 950; color: #ffe9ad; white-space: nowrap;
    background: rgba(30, 20, 34, 0.85); border-radius: 999px; padding: 0.1rem 0.5rem;
}
@keyframes ping-ring { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---- animacje kurki: nozki drepcza, skrzydelko macha ---- */
.ch-leg, .ch-wing { transform-box: fill-box; }
.ch-leg { transform-origin: 50% 0%; }
.ch-wing { transform-origin: 50% 30%; }
.player-sprite.is-walking .ch-leg-l { animation: leg-kick 0.24s ease-in-out infinite; }
.player-sprite.is-walking .ch-leg-r { animation: leg-kick 0.24s ease-in-out infinite; animation-delay: -0.12s; }
.player-sprite.is-walking .ch-wing { animation: wing-flap 0.3s ease-in-out infinite; }
@keyframes leg-kick { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes wing-flap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
.npc-sprite .spr { animation: bob 2.1s ease-in-out infinite; }

/* siedzenie na laweczce: lekkie przysiadniecie, bez dreptania */
.garden-preview[data-sitting] .player-sprite .player-art { animation: none; transform: translateY(-6px) scale(1, 0.94); }
.garden-preview[data-sitting] .player-sprite .ch-leg { opacity: 0; }
/* druga kurka tez widzi, ze siedzimy 💜 */
.remote-player.is-sitting .remote-art { animation: none; transform: translateY(-6px) scale(1, 0.94); }
.remote-player.is-sitting .ch-leg { opacity: 0; }

/* ---- level badge: klikalny profil, numer w srodku gwiazdy ---- */
.level-badge { cursor: pointer; }
.level-badge .lvl-num { top: 1.02rem; font-size: 0.8rem; }
.level-badge:hover { border-color: var(--gold); }

/* -------------------------------------------- mobile: sklepy bez rozjazdow */
@media (max-width: 560px) {
    .modal-panel { width: calc(100% - 0.8rem); max-height: calc(100% - 0.8rem); }
    .modal-tabs { padding: 0.5rem 0.6rem 0.2rem; gap: 0.3rem; }
    .modal-tabs button { font-size: 0.82rem; padding: 0.38rem 0.55rem; }
    .modal-head h2 { font-size: 1.05rem; }
    .modal-content { padding: 0.6rem 0.55rem 0.9rem; }
    /* wiersz przedmiotu: ikona+nazwa u gory, cena+przycisk pod spodem */
    .item-row {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: 'icon details price' 'icon details buy';
        row-gap: 0.3rem;
    }
    .item-row .item-icon { grid-area: icon; }
    .item-row .item-details { grid-area: details; }
    .item-row .price-pill { grid-area: price; justify-self: end; }
    .item-row > button { grid-area: buy; justify-self: end; min-width: 5.4rem; padding: 0.5rem 0.6rem; }
    .item-details strong { font-size: 0.92rem; }
    .item-details span { font-size: 0.74rem; }
    .egg-head { flex-wrap: wrap; }
    .egg-head button { min-width: 5.4rem; }
    .quest-row { grid-template-columns: auto minmax(0, 1fr) !important; }
    .quest-side { grid-column: 2; justify-items: start; }
}

/* welcome / help modal note */
.welcome-note {
    border-left: 7px solid #ff7ad0;
    background: linear-gradient(180deg, rgba(255, 122, 208, 0.16), rgba(139, 63, 212, 0.12));
}
.welcome-note strong { font-size: 1.05rem; color: #ffd6f2; }
.welcome-note span { display: block; margin-top: 0.3rem; color: var(--cream); font-size: 0.9rem; line-height: 1.45; }

/* ============================== MOBILE FINAL ==============================
   Ten blok jest OSTATNI w pliku, wiec wygrywa z sekcja "zwijane panele",
   ktora wczesniej nadpisywala mobilne pozycje (ikonki na joysticku,
   widoczne side-icons). Panele siedza NAD kontrolkami dotyku. */
@media (max-width: 760px) {
    /* mobilny HUD dostawal shorthand "padding: 0.5rem", ktory KASOWAL
       odstep od notcha z reguly bazowej — dlatego ikonki systemu zaslanialy
       gore gry. Tutaj (ostatni blok w pliku) przywracamy safe-area.
       max(...,2.6rem): niektore telefony (Android bez notcha, tryb PWA) zglaszaja
       safe-area-inset-top = 0, a i tak maja pasek baterii/zasiegu na gorze —
       dlatego wymuszamy PODLOGE ~2.6rem, zeby belka gry nigdy nie wchodzila pod nie. */
    .hud-top { padding-top: max(calc(0.5rem + env(safe-area-inset-top, 0px)), 2.6rem); }
    .side-icons { display: none !important; }
    .pet-panel {
        top: auto; right: auto; left: 0.6rem;
        bottom: calc(17.2rem + env(safe-area-inset-bottom, 0px));
        max-width: min(11rem, 46vw);
    }
    .quest-tracker {
        top: auto; left: auto; right: 0.6rem;
        bottom: calc(17.2rem + env(safe-area-inset-bottom, 0px));
        width: min(12rem, 48vw);
    }
}

/* ------------------------------------------------- v0.35: stragan & spółka */
/* Ikona-emoji (np. zupka 🍲) — wypełnia kafelek zamiast malutkiego znaczka */
.item-icon.icon-emoji {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.85rem; line-height: 1;
}
.hotbar-slot .item-icon.icon-emoji { font-size: 2.1rem; }
.mini-icon.icon-emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }

/* Szukająca kurka: zaciemniony ekran na czas chowania — bez podglądania! 🙈 */
[data-game-root].seeker-blind::after {
    content: ''; position: absolute; inset: 0; z-index: 115; pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(8, 5, 20, 0.9) 0%, rgba(5, 3, 14, 0.985) 55%, #040209 100%);
    animation: backdrop-in 300ms ease;
}

/* Potwierdzenia w grze — zero systemowych okienek przeglądarki */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem;
    background: rgba(10, 12, 18, 0.65); animation: backdrop-in 160ms ease;
}
.confirm-panel {
    width: min(26rem, calc(100% - 2rem)); padding: 1.1rem 1.2rem; text-align: center;
    border: 3px solid rgba(255, 226, 128, 0.45); border-radius: 18px;
    background: linear-gradient(180deg, rgba(120, 72, 40, 0.98), rgba(58, 37, 29, 0.99));
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
    animation: modal-in 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.confirm-emoji { font-size: 2rem; display: block; margin-bottom: 0.3rem; }
.confirm-panel p { margin: 0 0 0.9rem; color: #ffeccb; font-weight: 800; line-height: 1.45; }
.confirm-buttons { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.confirm-buttons button {
    min-height: 2.4rem; padding: 0 1.1rem; border-radius: 12px; font-weight: 950;
    border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(24, 16, 28, 0.8); color: #ffe9ad;
}
.confirm-buttons .confirm-yes { background: linear-gradient(180deg, #a455e0, var(--violet-dark)); color: #fff; }

/* Fanfarowe okienko nagrody + pulsujący przycisk "do zamknięcia" */
.reward-pop .finale-emoji { animation: reward-bounce 900ms ease infinite alternate; display: inline-block; }
@keyframes reward-bounce { from { transform: scale(1); } to { transform: scale(1.15) rotate(-4deg); } }
.btn-pulse { animation: btn-pulse 1.1s ease-in-out infinite; }
@keyframes btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 226, 128, 0.55); }
    50% { box-shadow: 0 0 0 7px rgba(255, 226, 128, 0); }
}

/* Wystawka straganu 2.0: szyld nad markizą + towary leżące NA blacie */
.stall-display {
    position: absolute; width: 96px; display: grid; gap: 2px; justify-items: center;
    pointer-events: none;
}
.stall-board {
    /* blat mieści się w straganie (sprite 48px), RÓŚNIE W DÓŁ i pokazuje WSZYSTKIE towary,
       po DOKŁADNIE 4 w rzędzie (jak lada straganu). */
    margin-top: 34px; width: 46px; border-radius: 4px 4px 3px 3px;
    background: linear-gradient(180deg, #b9843f, #8a5a28);
    border: 1px solid rgba(60, 36, 14, 0.7); border-top: 2px solid #d0a05a;
    box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.25); padding: 1px; box-sizing: border-box;
}
.stall-goods {
    display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; align-content: flex-start;
}
.stall-display .mini-icon {
    width: 9px; height: 9px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
}
.stall-display .mini-icon.is-sold-out { opacity: 0.32; filter: grayscale(0.85); }
/* wyższe tiery = ta sama szerokość (dopasowana do budki), tylko blat rośnie niżej */
.stall-tier-3 .stall-board { background: linear-gradient(180deg, #cfa050, #9a6a2a); border-top-color: #f0d089; }
.stall-sign {
    font-size: 7.5px; font-weight: 950; letter-spacing: 0.04em; white-space: nowrap;
    border-radius: 5px; padding: 1px 4px; color: #fff; transform: rotate(-3deg);
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.stall-sign.on { background: rgba(34, 128, 73, 0.95); }
.stall-sign.off { background: rgba(169, 31, 54, 0.95); }

/* Stragan jest DUŻY (wizualnie 2×2 kratki) — sprite wystaje nad kafel */
/* Wysokie dekoracje 🌳 — element jest wyższy niż kafel; svg wypełnia go w pionie,
   korona wystaje nad kafel wyżej (renderer ustawia height + przesunięcie w górę). */
.decor-sprite.decor-tall { overflow: visible; }
/* svg wypełnia CAŁY element (renderer ustawia jego szerokość/wysokość wg skali `big`),
   więc duże drzewa/krzewy skalują się równo i wystają w bok/górę poza kafel. */
.decor-sprite.decor-tall svg { width: 100% !important; height: 100% !important; }
.decor-sprite.decor-player_stall { overflow: visible; }
.decor-sprite.decor-player_stall svg {
    width: 100px !important; height: 100px !important;
    margin-left: -26px; margin-top: -52px;
}

/* Targowanie: kontrolki ceny + baner obsługi */
.haggle-row { flex-wrap: wrap; gap: 0.5rem; }
.haggle-ctl { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.haggle-ctl button {
    min-width: 2.4rem; min-height: 2.2rem; padding: 0 0.3rem; border-radius: 10px; font-weight: 950;
    border: 2px solid rgba(255, 255, 255, 0.22); background: rgba(24, 16, 28, 0.78); color: #ffe9ad;
}
.haggle-ctl input {
    width: 5rem; min-height: 2.2rem; text-align: center; border-radius: 10px; font-weight: 900;
    border: 2px solid rgba(255, 226, 128, 0.45); background: rgba(24, 16, 28, 0.8); color: #ffe9ad; font-size: 1rem;
}
.serve-banner {
    background: linear-gradient(180deg, rgba(226, 165, 49, 0.28), rgba(226, 165, 49, 0.14));
    border: 2px solid rgba(255, 206, 74, 0.5);
}

/* Kropka statusu przy zakładce Stragan */
.shop-dot {
    display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.7); vertical-align: middle; margin-left: 0.15rem;
}
.shop-dot.on { background: #3ddc73; box-shadow: 0 0 6px #3ddc73; }
.shop-dot.off { background: #ff4d5e; }

/* Siatka wystawy: kafelki 8-16 miejsc */
/* pasek trybu jakości straganu (łatwy/trudny) */
.mode-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.mode-btn {
    padding: 0.3rem 0.75rem; border-radius: 999px; font-weight: 800; font-size: 0.82rem;
    border: 2px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); cursor: pointer;
}
.mode-btn.is-active { border-color: var(--gold); background: rgba(255, 207, 69, 0.18); }
.mode-hint { flex: 1 1 100%; font-size: 0.72rem; opacity: 0.85; }
.stall-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; padding: 0.2rem 0 0.5rem;
}
.stall-slot {
    position: relative; display: grid; gap: 0.22rem; justify-items: center; text-align: center;
    padding: 0.55rem 0.35rem 0.5rem; border-radius: 14px;
    background: rgba(0, 0, 0, 0.22); border: 2px solid rgba(255, 226, 128, 0.28);
}
.stall-slot .item-icon { width: 2.2rem; height: 2.2rem; }
.stall-slot strong {
    font-size: 0.68rem; line-height: 1.15; color: #ffeccb; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stall-slot .slot-qty { font-size: 0.64rem; font-weight: 900; color: var(--muted); }
.stall-slot.is-out { opacity: 0.55; border-style: dashed; }
.stall-slot.is-out .item-icon { filter: grayscale(0.7); }
.stall-slot.is-out .slot-qty { color: #ff8a96; }
.stall-slot .price-edit input { width: 3.9rem; min-height: 1.7rem; font-size: 0.8rem; padding: 0 0.25rem; }
.slot-btns { display: flex; gap: 0.3rem; }
.slot-btns button {
    min-width: 1.9rem; min-height: 1.7rem; padding: 0; border-radius: 9px; font-weight: 950;
    border: 2px solid rgba(255, 255, 255, 0.22); background: rgba(24, 16, 28, 0.75); color: #ffe9ad;
}
.slot-btns button:first-child { background: rgba(169, 31, 54, 0.6); color: #fff; }
.slot-btns button:last-child { background: linear-gradient(180deg, #3fae5a, #2a7a3e); color: #fff; }
.slot-x {
    position: absolute; top: 0.2rem; right: 0.2rem; width: 1.4rem; height: 1.4rem; padding: 0;
    border-radius: 8px; font-size: 0.7rem; font-weight: 950; line-height: 1;
    background: rgba(24, 16, 28, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffb3bd;
}
.stall-slot-add {
    min-height: 7.2rem; cursor: pointer; color: #ffe9ad; opacity: 0.85;
    border-style: dashed; background: rgba(0, 0, 0, 0.14); align-content: center;
}
.stall-slot-add b { font-size: 1.6rem; line-height: 1; }
.stall-slot-add span { font-size: 0.66rem; font-weight: 900; color: var(--muted); }

/* Dymek zachcianki nad klientką */
.want-bubble {
    display: inline-grid; place-items: center; width: 2.1rem; height: 2rem;
    background: #fff; border-radius: 12px 12px 12px 3px; border: 2px solid #a455e0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
    position: relative;
}
/* wskaźnik „chcę to" nad dymkiem, żeby było jasne o co chodzi */
.want-bubble::before {
    content: '💭'; position: absolute; top: -0.95rem; left: -0.35rem; font-size: 0.8rem;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
.want-bubble .mini-icon { width: 1.6rem; height: 1.6rem; font-size: 1.3rem; }

/* Opinie sklepu */
.review-row.rv-good { border-left: 4px solid #3ddc73; }
.review-row.rv-bad { border-left: 4px solid #ff4d5e; }
.review-row.rv-neutral { border-left: 4px solid #9aa3ad; }

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

/* Edycja ceny na wystawie straganu */
.price-edit { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 900; color: var(--gold); }
.price-edit input {
    width: 5.2rem; min-height: 2.1rem; padding: 0 0.4rem; border-radius: 10px; text-align: right;
    border: 2px solid rgba(255, 226, 128, 0.4); background: rgba(24, 16, 28, 0.75);
    color: #ffe9ad; font-weight: 900; font-size: 0.95rem;
}

/* Zakładki kategorii akcesoriów + próbki koloru */
.acc-cat-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.5rem; }
.acc-cat-tab {
    padding: 0.35rem 0.6rem; border-radius: 999px; font-weight: 900; font-size: 0.78rem;
    border: 2px solid rgba(255, 226, 128, 0.3); background: rgba(24, 16, 28, 0.6); color: #ffe9ad;
    position: relative;
}
.acc-cat-tab.active { background: linear-gradient(180deg, #a455e0, var(--violet-dark)); color: #fff; }
.acc-cat-tab.has-on::after {
    content: ''; position: absolute; top: -2px; right: -2px; width: 0.55rem; height: 0.55rem;
    border-radius: 50%; background: #3ddc73; border: 1.5px solid #1a1020;
}
.acc-swatch {
    display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.6); vertical-align: middle; margin-right: 0.3rem;
}

/* ---- v0.4 szlif UI: responsywność okien i przycisków ---- */
/* Wiersze z przyciskami zawijają się, gdy brakuje miejsca (telefon) */
.sell-total { flex-wrap: wrap; }
.modal-row.sell-total > div { flex: 1 1 12rem; min-width: 0; }
.modal-row.sell-total button { flex: 0 1 auto; }

/* Akcje targowania: trzy przyciski, równo, zawijają na wąskim ekranie */
.haggle-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.haggle-actions button {
    flex: 1 1 7rem; min-width: 0; min-height: 2.6rem; padding: 0 0.6rem; border-radius: 12px;
    font-weight: 950; border: 2px solid rgba(255, 255, 255, 0.22); background: rgba(24, 16, 28, 0.8); color: #ffe9ad;
}
.haggle-actions button[data-action="customer-accept"] { background: linear-gradient(180deg, #3fae5a, #2a7a3e); color: #fff; }
.haggle-actions button[data-action="haggle-counter"] { background: linear-gradient(180deg, #a455e0, var(--violet-dark)); color: #fff; }

/* Na telefonie przyciski mogą być węższe niż 6.5rem */
@media (max-width: 560px) {
    .modal-row button { min-width: 4.4rem; }
    .modal-row { gap: 0.55rem; padding: 0.6rem 0.6rem; }
    .item-details strong { font-size: 0.95rem; }
    .item-details span { font-size: 0.78rem; }
    .haggle-ctl input { width: 4rem; }
    .haggle-ctl button { min-width: 2.1rem; }
    /* wystawa: 2 kolumny na wąskim, kafelki nie wychodzą poza okno */
    .stall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
    .stall-slot strong { font-size: 0.62rem; }
    .npc-speech { font-size: 0.9rem; }
}
/* Bardzo wąsko (małe telefony) — nazwy się nie rozjeżdżają */
@media (max-width: 380px) {
    .acc-cat-tab { font-size: 0.7rem; padding: 0.3rem 0.45rem; }
    .modal-head h2 { font-size: 1.05rem; }
    .stall-slot .price-edit input { width: 3.4rem; }
}

/* ---- v0.5: pupile, stragan, kalendarz ---- */
/* Panel pupili — nic nie wychodzi poza teksturę */
.pet-panel { overflow: hidden; max-width: min(15rem, 62vw); box-sizing: border-box; }
.pet-panel > * { min-width: 0; }
.pet-panel .pet-head strong { white-space: normal; overflow-wrap: anywhere; }
.pet-mini-info .bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-mini-info .bar { width: 100%; }
.pet-mini-feed { flex: none; }

/* Pupile chodzą płynnie między kaflami (jeden krok, spokojnie) */
.pet-companion { transition: transform 0.8s ease-in-out; }

/* Pasek XP w karcie pupila */
.bar.xp { height: 0.55rem; border-radius: 999px; background: rgba(0,0,0,0.3); overflow: hidden; }
.bar.xp > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #9c69ff, #41d6ff); }

/* Kafelek wystawy 2.0: cena rynkowa + osobne +/- na cenę i ilość */
.slot-fair { font-size: 0.6rem; font-weight: 800; color: #ffd88a; opacity: 0.9; }
.slot-line { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; width: 100%; }
.slot-line-lbl { font-size: 0.62rem; font-weight: 900; color: var(--muted); }
.slot-qty.is-out { color: #ff8a96; }
.slot-price-ctl, .slot-qty-ctl { display: flex; align-items: center; gap: 0.2rem; }
.slot-price-ctl input {
    width: 3.4rem; min-height: 1.6rem; text-align: center; border-radius: 8px; font-size: 0.78rem; font-weight: 900;
    border: 2px solid rgba(255, 226, 128, 0.4); background: rgba(24, 16, 28, 0.8); color: #ffe9ad;
    -moz-appearance: textfield;
}
.slot-price-ctl input::-webkit-outer-spin-button,
.slot-price-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.slot-price-ctl button, .slot-qty-ctl button {
    min-width: 1.7rem; min-height: 1.6rem; padding: 0; border-radius: 8px; font-weight: 950; font-size: 0.9rem;
    border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(24, 16, 28, 0.78); color: #ffe9ad;
}
.slot-price-ctl button:first-child { background: rgba(169, 31, 54, 0.55); color: #fff; }
.slot-price-ctl button:last-child { background: linear-gradient(180deg, #d0a531, #a87f1f); color: #fff; }
.slot-qty-ctl button:first-child { background: rgba(169, 31, 54, 0.55); color: #fff; }
.slot-qty-ctl button:last-child { background: linear-gradient(180deg, #3fae5a, #2a7a3e); color: #fff; }
/* schowaj systemowe strzałki też w polu targowania */
.haggle-ctl input::-webkit-outer-spin-button,
.haggle-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.haggle-ctl input { -moz-appearance: textfield; }

/* Popup przegranego targu */
.loss-pop .finale-emoji { animation: none; }

/* Kalendarz farmy */
.cal-wxrow { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cal-wx { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 800; font-size: 0.78rem; }
.cal-wx .wx-icon { width: 1.3rem; height: 1.3rem; }
.cal-grid { display: grid; gap: 0.35rem; }
.cal-day {
    display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.6rem; border-radius: 10px; background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(0, 0, 0, 0.2);
}
.cal-day.is-today { border-color: var(--gold); background: rgba(255, 207, 69, 0.14); }
.cal-when { font-weight: 950; font-size: 0.78rem; color: #ffe9ad; text-transform: capitalize; }
.cal-ev { font-size: 0.82rem; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bld { font-size: 0.74rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
@media (max-width: 480px) {
    .cal-day { grid-template-columns: 4rem 1fr; }
    .cal-bld { grid-column: 2; }
}

/* Wybór liczby AI w Chowanego */
.ai-picks, .acc-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ai-pick {
    min-width: 3rem; min-height: 2.4rem; padding: 0 0.7rem; border-radius: 12px; font-weight: 950;
    border: 2px solid rgba(255, 226, 128, 0.3); background: rgba(24, 16, 28, 0.7); color: #ffe9ad;
}
.ai-pick.is-selected { background: linear-gradient(180deg, #a455e0, var(--violet-dark)); color: #fff; }

/* Pasek 5 statystyk pod HUD (kasa, gemy, obiekty, plony, poziom) — wyśrodkowany
   POD nawigacją, żeby nic nie nachodziło. */
.hud-stats {
    position: absolute; top: 4rem; left: 50%; transform: translateX(-50%); z-index: 79;
    display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center;
    pointer-events: auto; max-width: 94vw;
}
.hud-stat {
    display: inline-flex; align-items: center; gap: 0.22rem;
    padding: 0.12rem 0.5rem; border-radius: 999px; font-weight: 900; font-size: 0.76rem;
    background: rgba(30, 20, 34, 0.86); border: 1.5px solid rgba(255, 239, 162, 0.28); color: #ffe9ad;
    cursor: help;
}
.hud-stat-emoji { font-size: 0.88rem; line-height: 1; }
/* HUD łamie się na 2 rzędy poniżej 760px — pasek schodzi pod niższą nawigację */
@media (max-width: 760px) {
    .hud-stats { top: 6.4rem; }
}
@media (max-width: 560px) {
    .hud-stats { gap: 0.2rem; }
    .hud-stat { font-size: 0.66rem; padding: 0.1rem 0.4rem; }
}

/* Dziennik powiadomień w Gazetce */
.notif-row { padding: 0.5rem 0.7rem; border-left: 4px solid rgba(255,255,255,0.2); }
.notif-row strong { font-weight: 800; font-size: 0.86rem; }
.notif-row.notif-error { border-left-color: #ff4d5e; }
.notif-row.notif-notice { border-left-color: #3ddc73; }