:root {
    --grass: #6dbe45;
    --grass-dark: #3f7d32;
    --soil: #8b5a2b;
    --soil-dark: #6f421b;
    --beige: #f5e6c8;
    --beige-strong: #edd6ab;
    --sky: #87ceeb;
    --sky-soft: #dff4ff;
    --sun: #ffd54a;
    --reward: #ff9f1c;
    --white-soft: #fffdf7;
    --panel-gray: #e9ecef;
    --slate: #4f5d5f;
    --ink: #264223;
    --muted: #61716b;
    --danger: #d44f42;
    --success: #2f8a50;
    --warning: #d68a1e;
    --shadow-soft: 0 16px 38px rgba(38, 66, 35, 0.13);
    --shadow-card: 0 22px 48px rgba(43, 67, 31, 0.16);
    --shadow-lift: 0 18px 34px rgba(63, 125, 50, 0.2);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --radius-pill: 999px;
    --line: rgba(63, 125, 50, 0.14);
    --font-body: "Trebuchet MS", "Segoe UI", sans-serif;
    --font-display: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--font-body);
    background:
        radial-gradient(circle at top left, rgba(255, 213, 74, 0.28), transparent 26%),
        linear-gradient(180deg, #fdf8e8 0%, #f9f0dc 52%, #f2ead8 100%);
    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(255, 159, 28, 0.35);
    outline-offset: 2px;
}

.page-shell {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100% - 28px));
    margin: 0 auto;
    padding: 26px 0 42px;
}

.game-body {
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 213, 74, 0.52), transparent 10%),
        linear-gradient(180deg, #87ceeb 0%, #bdeaff 31%, #def5ff 32%, #def5ff 40%, #cfeab5 40%, #98d769 66%, #6dbe45 100%);
}

.game-body::before,
.game-body::after {
    content: "";
    position: fixed;
    inset: auto;
    pointer-events: none;
    z-index: 0;
}

.game-body::before {
    top: 66px;
    right: 8vw;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 253, 220, 0.96) 0%, rgba(255, 213, 74, 0.92) 55%, rgba(255, 213, 74, 0) 72%);
    filter: blur(2px);
    opacity: 0.75;
}

.game-body::after {
    left: 50%;
    bottom: -160px;
    width: 140vw;
    height: 380px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.18), transparent 28%),
        linear-gradient(180deg, #76c853 0%, #5bac41 100%);
    box-shadow:
        inset 0 18px 44px rgba(255, 255, 255, 0.18),
        0 -26px 60px rgba(63, 125, 50, 0.18);
}

.landing-body::before,
.landing-body::after,
.auth-body::before,
.auth-body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

.landing-body::before,
.auth-body::before {
    width: 280px;
    height: 280px;
    left: -90px;
    bottom: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(109, 190, 69, 0.18), transparent 68%);
}

.landing-body::after,
.auth-body::after {
    width: 260px;
    height: 260px;
    right: -80px;
    top: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 213, 74, 0.2), transparent 65%);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 1.38rem;
    color: var(--grass-dark);
    letter-spacing: 0.01em;
}

.brand img {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 10px 14px rgba(255, 159, 28, 0.14));
}

.brand-tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.55);
    color: var(--grass-dark);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--grass-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-copy {
    margin: 0;
    max-width: 62ch;
    color: var(--muted);
    font-size: 1.03rem;
    line-height: 1.68;
}

.topbar,
.game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 28px;
}

.topbar--landing,
.game-topbar {
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    background: rgba(255, 253, 247, 0.72);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
}

.game-topbar {
    position: sticky;
    top: 14px;
    z-index: 5;
    margin-bottom: 24px;
}

.topbar-actions,
.game-topbar__actions,
.hero-actions,
.preview-stats,
.game-topbar__stats,
.hero-chip-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.game-topbar__brand {
    display: grid;
    gap: 8px;
}

.game-topbar__stats {
    flex: 1 1 auto;
    justify-content: center;
}

.game-topbar__actions {
    justify-content: flex-end;
}

.primary-button,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-pill);
    font-weight: 800;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.primary-button:hover,
.ghost-button:hover,
.seed-card:not(.seed-card--disabled):hover,
.shop-card button:not(:disabled):hover,
.plot:not(:disabled):hover {
    transform: translateY(-2px);
}

.primary-button {
    color: #fffef8;
    background: linear-gradient(180deg, #ffb640 0%, #ff9f1c 100%);
    box-shadow:
        0 12px 24px rgba(255, 159, 28, 0.28),
        inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.primary-button--harvest {
    background: linear-gradient(180deg, #7cd64d 0%, #4da93e 100%);
    box-shadow:
        0 12px 24px rgba(63, 125, 50, 0.28),
        inset 0 2px 0 rgba(255, 255, 255, 0.24);
}

.ghost-button {
    color: var(--grass-dark);
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(63, 125, 50, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ghost-button--danger {
    color: #7b4039;
}

.primary-button--full {
    width: 100%;
}

.game-card,
.hero-card,
.preview-card,
.auth-card,
.auth-side,
.farm-main-card,
.side-card,
.shop-hero,
.shop-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--radius-xl);
    background: rgba(255, 253, 247, 0.78);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(14px);
}

.game-card::before,
.hero-card::before,
.preview-card::before,
.auth-card::before,
.auth-side::before,
.farm-main-card::before,
.side-card::before,
.shop-hero::before,
.shop-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 96px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
    pointer-events: none;
}

.hero-grid,
.auth-layout,
.shop-stage {
    display: grid;
    gap: 24px;
}

.hero-grid {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    min-height: calc(100vh - 160px);
}

.hero-card,
.preview-card,
.auth-card,
.auth-side,
.farm-main-card,
.shop-hero,
.shop-panel {
    padding: 30px;
}

.hero-card h1,
.auth-side h1,
.farm-hero h1,
.shop-hero h1 {
    margin: 12px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.45rem);
    line-height: 1.06;
}

.feature-list,
.tip-list {
    margin: 22px 0 0;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.72;
}

.preview-card {
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.95), rgba(245, 230, 200, 0.86)),
        linear-gradient(135deg, rgba(109, 190, 69, 0.12), transparent 55%);
}

.preview-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.preview-card__top span,
.stat-chip span,
.topbar-card__label,
.stat-pill__label {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.preview-pill,
.mini-badge,
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(63, 125, 50, 0.12);
    background: rgba(255, 255, 255, 0.72);
    color: var(--grass-dark);
    font-size: 0.86rem;
    font-weight: 800;
}

.hero-chip {
    background: rgba(255, 255, 255, 0.65);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0;
}

.preview-plot {
    min-height: 108px;
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: 22px;
    color: #fffef9;
    font-weight: 800;
    text-align: center;
    box-shadow: inset 0 -12px 22px rgba(0, 0, 0, 0.08);
}

.preview-plot--empty {
    background: linear-gradient(180deg, #a8703f 0%, #8b5a2b 100%);
}

.preview-plot--planting {
    background: linear-gradient(180deg, #7bcf55 0%, #4fa83f 100%);
}

.preview-plot--ready {
    background: linear-gradient(180deg, #ffe469 0%, #ffb729 100%);
}

.preview-plot--locked {
    background: linear-gradient(180deg, #5b6169 0%, #3b4045 100%);
}

.stat-chip,
.stat-pill {
    display: flex;
    align-items: center;
    flex: 1 1 150px;
    gap: 12px;
    min-width: 0;
    min-height: 70px;
    padding: 12px 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.stat-chip strong,
.stat-pill strong {
    display: block;
    margin-top: 3px;
    font-size: 1.08rem;
}

.stat-pill__icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 230, 200, 0.8));
    box-shadow: inset 0 -4px 10px rgba(255, 159, 28, 0.15);
    font-size: 1.25rem;
}

.auth-layout {
    grid-template-columns: 1fr 0.9fr;
    min-height: calc(100vh - 130px);
    align-items: stretch;
}

.auth-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.86), rgba(245, 230, 200, 0.88)),
        radial-gradient(circle at top right, rgba(109, 190, 69, 0.16), transparent 26%);
}

.auth-card {
    width: 100%;
    max-width: 540px;
    justify-self: end;
}

.auth-card h2,
.farm-board__header h2,
.side-card h2,
.shop-panel h2 {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: 2rem;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-form label {
    display: grid;
    gap: 8px;
}

.auth-form span {
    font-weight: 800;
}

.auth-form input,
.shop-card input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(63, 125, 50, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 2px 8px rgba(63, 125, 50, 0.05);
}

.auth-footer {
    margin: 18px 0 0;
    color: var(--muted);
}

.auth-footer a {
    color: var(--grass-dark);
    font-weight: 800;
}

.form-alert,
.status-box {
    padding: 14px 16px;
    border-radius: 18px;
    line-height: 1.55;
    border: 1px solid transparent;
}

.form-alert--error,
.status-box--error {
    color: var(--danger);
    border-color: rgba(212, 79, 66, 0.18);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 0 0 1px rgba(212, 79, 66, 0.08);
}

.status-box--success {
    color: var(--success);
    border-color: rgba(47, 138, 80, 0.18);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 0 0 1px rgba(47, 138, 80, 0.08);
}

.status-box--warning {
    color: var(--warning);
    border-color: rgba(214, 138, 30, 0.18);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 0 0 1px rgba(214, 138, 30, 0.08);
}

.status-box--info,
.form-alert {
    color: var(--grass-dark);
    border-color: rgba(63, 125, 50, 0.14);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(63, 125, 50, 0.05);
}

.farm-main-card {
    padding: 30px;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.88), rgba(245, 230, 200, 0.84)),
        linear-gradient(135deg, rgba(135, 206, 235, 0.18), transparent 55%);
}

.farm-hero,
.farm-board__header,
.side-card__head,
.shop-panel__header,
.shop-card__top,
.seed-card__head,
.seed-card__footer,
.level-card__meta,
.level-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.farm-hero {
    margin-bottom: 24px;
}

.farm-hero__copy {
    max-width: 680px;
}

.level-card {
    min-width: 280px;
    padding: 22px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 230, 200, 0.92)),
        radial-gradient(circle at top right, rgba(255, 213, 74, 0.24), transparent 30%);
    border: 1px solid rgba(255, 255, 255, 0.46);
    box-shadow: var(--shadow-soft);
}

.level-card__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffe57a 0%, #ffb82d 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
    font-size: 1.5rem;
}

.level-card__row strong {
    font-size: 2rem;
    font-family: var(--font-display);
}

.level-card__row span,
.level-card__meta span {
    color: var(--muted);
    font-size: 0.92rem;
}

.xp-track {
    position: relative;
    height: 16px;
    margin: 16px 0 12px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: rgba(63, 125, 50, 0.12);
}

.xp-track__bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffe46a 0%, #ff9f1c 42%, #6dbe45 100%);
    box-shadow: 0 0 22px rgba(255, 159, 28, 0.26);
    transition: width 0.45s ease;
}

.farm-board-shell {
    padding: 22px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(232, 244, 223, 0.9)),
        linear-gradient(180deg, rgba(109, 190, 69, 0.06), transparent);
    border: 1px solid rgba(63, 125, 50, 0.12);
}

.farm-board__copy {
    margin: 6px 0 0;
    color: var(--muted);
}

.board-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
}

.legend-chip i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.legend-chip--bloqueado i {
    background: #4b5159;
}

.legend-chip--vazio i {
    background: #8b5a2b;
}

.legend-chip--plantado i {
    background: #6dbe45;
}

.legend-chip--pronto i {
    background: #ffd54a;
    box-shadow: 0 0 10px rgba(255, 213, 74, 0.65);
}

.farm-grid {
    --grid-columns: 6;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px;
}

.plot {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 146px;
    padding: 16px;
    border: 0;
    border-radius: 24px;
    color: #fffef9;
    text-align: left;
    overflow: hidden;
    box-shadow:
        inset 0 -14px 20px rgba(0, 0, 0, 0.12),
        0 14px 26px rgba(63, 125, 50, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.plot::before,
.plot::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.plot::before {
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%);
}

.plot::after {
    width: 52px;
    height: 52px;
    right: -8px;
    bottom: -10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}

.plot:not(:disabled):hover {
    box-shadow:
        inset 0 -14px 20px rgba(0, 0, 0, 0.12),
        0 18px 28px rgba(63, 125, 50, 0.2);
}

.plot:disabled {
    opacity: 0.86;
    cursor: progress;
}

.plot--bloqueado {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 35%),
        linear-gradient(180deg, #5a6169 0%, #394047 100%);
}

.plot--vazio {
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.07) 0,
            rgba(255, 255, 255, 0.07) 6px,
            transparent 6px,
            transparent 12px
        ),
        linear-gradient(180deg, #a76e3c 0%, #8b5a2b 100%);
}

.plot--selecionavel,
.plot--selectable {
    box-shadow:
        inset 0 -14px 20px rgba(0, 0, 0, 0.12),
        0 0 0 4px rgba(255, 213, 74, 0.2),
        0 18px 28px rgba(255, 159, 28, 0.22);
}

.plot--selecionavel .plot__footer strong,
.plot--selectable .plot__footer strong {
    background: rgba(255, 213, 74, 0.22);
}

.plot--plantado {
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.22), transparent 36%),
        linear-gradient(180deg, #88d65f 0%, #5cad40 68%, #4a9638 100%);
}

.plot--pronto {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.34), transparent 34%),
        linear-gradient(180deg, #ffe670 0%, #c6e95e 42%, #79c84e 100%);
    color: #385019;
    animation: readyGlow 2s ease-in-out infinite;
}

.plot--feedback-plant {
    animation: plotPop 0.8s ease;
}

.plot--feedback-harvest {
    animation: harvestBurst 0.95s ease;
}

.plot__icon,
.plot__title,
.plot__subtitle,
.plot__footer {
    position: relative;
    z-index: 1;
}

.plot__icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 1.2rem;
}

.plot__title {
    margin-top: 8px;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
}

.plot__subtitle {
    margin-top: 8px;
    color: inherit;
    font-size: 0.86rem;
    line-height: 1.45;
    opacity: 0.96;
}

.plot__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    font-size: 0.8rem;
}

.plot__hint {
    flex: 1 1 auto;
}

.plot__footer strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    white-space: nowrap;
}

.farm-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 104px;
}

.side-card {
    padding: 24px;
}

.selected-seed-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin: 18px 0;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(245, 230, 200, 0.82)),
        radial-gradient(circle at top right, rgba(109, 190, 69, 0.12), transparent 34%);
    border: 1px solid rgba(63, 125, 50, 0.12);
}

.selected-seed-card.is-empty {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(233, 236, 239, 0.84));
}

.selected-seed-card__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffaf0 0%, #f5e6c8 100%);
    box-shadow: inset 0 -4px 10px rgba(255, 159, 28, 0.12);
    font-size: 1.6rem;
}

.selected-seed-card__content {
    display: grid;
    gap: 4px;
}

.selected-seed-card__label,
.seed-card__caption,
.shop-card__caption {
    color: var(--muted);
    font-size: 0.8rem;
}

.selected-seed-card__content strong {
    font-family: var(--font-display);
    font-size: 1.04rem;
}

.selected-seed-card__content p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.mini-stat-grid,
.seed-list,
.shop-grid {
    display: grid;
    gap: 14px;
}

.mini-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin-top: 16px;
}

.mini-stat {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(63, 125, 50, 0.12);
}

.mini-stat span {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
}

.mini-stat strong {
    display: block;
    margin-top: 6px;
    font-size: 1.3rem;
    font-family: var(--font-display);
}

.seed-card,
.shop-card {
    width: 100%;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(63, 125, 50, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 230, 200, 0.8)),
        radial-gradient(circle at top right, rgba(109, 190, 69, 0.1), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.seed-card {
    text-align: left;
}

.seed-card__icon,
.shop-card__icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffdf7 0%, #f5e6c8 100%);
    box-shadow: inset 0 -4px 10px rgba(255, 159, 28, 0.1);
    font-size: 1.4rem;
}

.seed-card__title-wrap {
    display: grid;
    gap: 4px;
}

.shop-card__crop {
    display: flex;
    align-items: center;
    gap: 12px;
}

.seed-card__name,
.shop-card__name {
    margin: 0;
    font-size: 1.08rem;
    font-family: var(--font-display);
}

.seed-card__info,
.shop-card__info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.seed-card__chip,
.shop-card__chip,
.modal-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: rgba(109, 190, 69, 0.12);
    color: var(--grass-dark);
    font-size: 0.84rem;
    font-weight: 700;
}

.seed-card__footer,
.shop-card__stock {
    margin-top: 14px;
}

.seed-card__footer strong,
.shop-card__stock strong {
    font-size: 0.98rem;
}

.seed-card--selected {
    border-color: rgba(255, 159, 28, 0.38);
    box-shadow:
        var(--shadow-lift),
        inset 0 0 0 1px rgba(255, 159, 28, 0.16);
}

.seed-card--disabled {
    opacity: 0.62;
}

.shop-stage {
    display: grid;
    gap: 24px;
}

.shop-hero {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 0.44fr);
    gap: 20px;
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.9), rgba(245, 230, 200, 0.82)),
        radial-gradient(circle at top right, rgba(135, 206, 235, 0.22), transparent 32%);
}

.shop-hero__highlight {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 22px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 235, 191, 0.88)),
        radial-gradient(circle at top right, rgba(255, 213, 74, 0.26), transparent 28%);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.shop-hero__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffe57d 0%, #ffb82f 100%);
    font-size: 1.8rem;
}

.shop-panel {
    padding: 28px;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.9), rgba(233, 236, 239, 0.82)),
        radial-gradient(circle at top left, rgba(109, 190, 69, 0.14), transparent 28%);
}

.shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
}

.shop-card__flavor {
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.shop-card__controls {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 10px;
    margin-top: 16px;
}

.shop-card button {
    min-height: 48px;
    border: 0;
    border-radius: var(--radius-pill);
    color: #fffef8;
    font-weight: 800;
    background: linear-gradient(180deg, #6dbe45 0%, #3f7d32 100%);
    box-shadow:
        0 12px 22px rgba(63, 125, 50, 0.24),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.shop-card button:disabled,
.shop-card input:disabled,
.seed-card:disabled {
    opacity: 0.66;
    cursor: not-allowed;
}

.shop-card--reward {
    animation: plotPop 0.85s ease;
    border-color: rgba(255, 159, 28, 0.34);
}

.game-modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
}

.game-modal[hidden] {
    display: none;
}

.game-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(33, 48, 27, 0.42);
    backdrop-filter: blur(8px);
}

.game-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100% - 24px));
    padding: 28px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.4);
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(245, 230, 200, 0.92)),
        radial-gradient(circle at top right, rgba(255, 213, 74, 0.18), transparent 30%);
    box-shadow: 0 26px 60px rgba(34, 52, 22, 0.28);
    transform: translateY(14px) scale(0.96);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.game-modal.is-open .game-modal__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.game-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: var(--grass-dark);
    background: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
}

.game-modal__badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(109, 190, 69, 0.12);
    color: var(--grass-dark);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-modal__dialog h2 {
    margin: 16px 0 10px;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.08;
}

.game-modal__copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.68;
}

.game-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.game-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100% - 24px));
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 253, 247, 0.9);
    box-shadow: var(--shadow-soft);
    animation: toastIn 0.24s ease;
}

.toast.is-leaving {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.toast__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(109, 190, 69, 0.1);
    font-size: 1.1rem;
}

.toast__text {
    line-height: 1.5;
}

.toast--success .toast__icon {
    background: rgba(47, 138, 80, 0.12);
}

.toast--warning .toast__icon {
    background: rgba(214, 138, 30, 0.12);
}

.toast--error .toast__icon {
    background: rgba(212, 79, 66, 0.12);
}

.is-bump {
    animation: bump 0.42s ease;
}

@keyframes readyGlow {
    0%,
    100% {
        box-shadow:
            inset 0 -14px 20px rgba(0, 0, 0, 0.08),
            0 12px 22px rgba(255, 213, 74, 0.18);
    }

    50% {
        box-shadow:
            inset 0 -14px 20px rgba(0, 0, 0, 0.1),
            0 0 0 4px rgba(255, 213, 74, 0.16),
            0 18px 30px rgba(255, 213, 74, 0.28);
    }
}

@keyframes plotPop {
    0% {
        transform: scale(0.96);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes harvestBurst {
    0% {
        transform: scale(0.96);
        filter: saturate(1);
    }

    45% {
        transform: scale(1.06);
        filter: saturate(1.2);
    }

    100% {
        transform: scale(1);
        filter: saturate(1);
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bump {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 1140px) {
    .hero-grid,
    .auth-layout,
    .shop-hero {
        grid-template-columns: 1fr;
    }

    .shop-grid {
        grid-template-columns: 1fr;
    }

    .auth-card {
        max-width: none;
        justify-self: stretch;
    }

    .farm-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 900px) {
    .game-topbar,
    .topbar--landing {
        flex-direction: column;
        align-items: stretch;
    }

    .farm-hero,
    .farm-board__header,
    .side-card__head,
    .shop-panel__header,
    .preview-card__top {
        flex-direction: column;
    }

    .board-legend {
        justify-content: flex-start;
    }

    .game-topbar__actions {
        justify-content: stretch;
    }

    .game-topbar__actions > a {
        flex: 1 1 220px;
    }

    .farm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mini-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .page-shell {
        width: min(100% - 20px, 1200px);
    }

    .hero-card,
    .preview-card,
    .auth-card,
    .auth-side,
    .farm-main-card,
    .side-card,
    .shop-hero,
    .shop-panel {
        padding: 22px;
        border-radius: 26px;
    }

    .farm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plot {
        min-height: 124px;
    }

    .game-modal__actions {
        flex-direction: column;
    }

    .shop-card__controls {
        grid-template-columns: 1fr;
    }

    .game-modal__actions .ghost-button,
    .game-modal__actions .primary-button {
        width: 100%;
    }

    .plot__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .plot__footer strong {
        width: 100%;
    }

    .preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .game-topbar__stats {
        width: 100%;
    }

    .stat-pill {
        flex: 1 1 100%;
    }

    .mini-stat-grid {
        grid-template-columns: 1fr;
    }

    .farm-grid {
        gap: 10px;
    }
}

/* Farm: verde campo (#45702d) — mesma família de cor no mapa, sem “segunda tela” neon */
.game-body.game-body--farm {
    min-height: 100dvh;
    overflow: hidden;
    color: #1a3014;
    font-family: Verdana, "Trebuchet MS", Tahoma, Geneva, sans-serif;
    background: linear-gradient(180deg, #4a752f 0%, #45702d 38%, #3d6228 100%);
}

.game-body.game-body--farm .game-shell {
    font-family: inherit;
}

.game-body.game-body--farm::before,
.game-body.game-body--farm::after {
    display: none;
    content: none;
}

.game-shell {
    --game-rail-w: 48px;
    --game-gap: 8px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    padding: var(--game-gap) clamp(10px, 2vw, 16px) var(--game-gap) var(--game-gap);
    display: grid;
    grid-template-columns: var(--game-rail-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "rail hud"
        "rail stage"
        "rail toolbar";
    gap: var(--game-gap) 12px;
}

.farm-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(22, 40, 18, 0.4);
    cursor: pointer;
}

.farm-panel-backdrop:not([hidden]) {
    display: block;
}

@media (min-width: 1100px) {
    .game-shell.panel-open {
        grid-template-columns: var(--game-rail-w) minmax(0, 1fr) minmax(240px, 300px);
        grid-template-areas:
            "rail hud panel"
            "rail stage panel"
            "rail toolbar panel";
    }

    .game-shell.panel-open .farm-side-panel {
        display: flex;
    }

    .game-shell.panel-open .farm-panel-backdrop {
        display: none !important;
    }
}

.farm-side-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
    grid-area: panel;
    max-height: 100%;
    overflow: auto;
    padding: 12px 14px 16px;
    border-radius: 14px;
    border: 2px solid #8bc34a;
    background: linear-gradient(180deg, #fffef8 0%, #f3ecd8 100%);
    box-shadow:
        0 2px 0 rgba(76, 125, 40, 0.3),
        0 10px 28px rgba(31, 55, 26, 0.12);
}

.farm-side-panel:not([hidden]) {
    display: flex;
}

@media (max-width: 1099px) {
    .farm-side-panel:not([hidden]) {
        position: fixed;
        top: 0;
        right: 0;
        width: min(100vw - 48px, 300px);
        height: 100dvh;
        max-height: none;
        z-index: 90;
        border-radius: 14px 0 0 14px;
    }
}

.farm-side-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(76, 125, 40, 0.2);
}

.farm-side-panel__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #2d4a28;
}

.farm-side-panel__close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    font-size: 1.4rem;
    line-height: 1;
    color: #355731;
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

.farm-side-panel__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.farm-side-panel__h3 {
    margin: 0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5a7a55;
}

.farm-side-panel__lead {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #4a5c48;
}

.farm-neighbor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.farm-neighbor-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    color: #4a5c48;
}

.farm-neighbor-list__item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.86rem;
    color: #2d4a28;
}

.farm-neighbor-list__avatar {
    font-size: 1.5rem;
    line-height: 1;
}

.farm-side-panel__toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #4a5c48;
    cursor: pointer;
}

.farm-side-panel__toggle input {
    margin-top: 3px;
    flex-shrink: 0;
}

.farm-side-panel__tips {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.76rem;
    line-height: 1.5;
    color: #4a5c48;
}

.farm-side-panel__tips li {
    margin-bottom: 6px;
}

.farm-side-panel__btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.78rem;
    color: #fffef7;
    background: linear-gradient(180deg, #ffb640 0%, #ff9f1c 100%);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(255, 159, 28, 0.22);
}

.shortcut-rail,
.top-hud,
.farm-play,
.bottom-toolbar,
.toast-stack--game {
    position: relative;
    z-index: 2;
}

.top-hud {
    grid-area: hud;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 12px;
    align-content: start;
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 252, 245, 0.96);
    box-shadow: 0 4px 20px rgba(31, 55, 26, 0.1);
}

.game-body--farm .top-hud {
    border: 2px solid #8bc34a;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffef8 0%, #f7f2dc 100%);
    box-shadow:
        0 2px 0 rgba(76, 125, 40, 0.35),
        0 10px 28px rgba(31, 55, 26, 0.12);
}

@media (min-width: 1100px) {
    .top-hud {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        align-content: center;
    }
}

.farm-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.farm-logo img {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 10px 14px rgba(156, 107, 62, 0.18));
}

.farm-logo strong,
.farm-dock__place {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.farm-logo span {
    display: block;
    color: #547252;
    font-size: 0.78rem;
    line-height: 1.25;
}

.farm-logo__tagline {
    display: block;
    margin-top: 2px;
    color: #6d8f4a;
    font-size: 0.68rem;
    line-height: 1.3;
    font-weight: 600;
    font-style: italic;
    max-width: 240px;
}

@media (max-width: 520px) {
    .farm-logo__tagline {
        display: none;
    }
}

.top-hud__resources {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.top-hud__resources::-webkit-scrollbar {
    height: 4px;
}

.top-hud__resources::-webkit-scrollbar-thumb {
    background: rgba(63, 125, 50, 0.25);
    border-radius: 999px;
}

.hud-pill {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 8px;
    min-height: 0;
    min-width: 0;
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.56);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 236, 216, 0.75)),
        linear-gradient(180deg, rgba(109, 190, 69, 0.1), transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.hud-pill__icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 230, 200, 0.84));
    box-shadow: inset 0 -3px 8px rgba(255, 159, 28, 0.1);
    font-size: 1rem;
}

.hud-pill span,
.hud-pill em {
    color: #607667;
    font-size: 0.65rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hud-pill strong {
    display: block;
    margin-top: 1px;
    font-size: 0.92rem;
    font-family: var(--font-display);
    line-height: 1.15;
}

.hud-pill--xp {
    grid-template-columns: auto minmax(96px, 1fr);
}

.hud-pill__track {
    grid-column: 2;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(63, 125, 50, 0.12);
}

.hud-pill__track-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffe36a 0%, #ffb82d 44%, #6dbe45 100%);
    box-shadow: 0 0 18px rgba(255, 159, 28, 0.26);
    transition: width 0.36s ease;
}

.top-hud__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}

@media (min-width: 1100px) {
    .top-hud__actions {
        justify-content: flex-end;
    }
}

.hud-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.8rem;
    border: 0;
    border-radius: 999px;
    color: #355731;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 18px rgba(63, 125, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.hud-button:hover,
.shortcut-rail__button:hover,
.farm-tool:hover {
    transform: translateY(-2px);
}

.hud-button--primary {
    color: #fffef7;
    background: linear-gradient(180deg, #ffb640 0%, #ff9f1c 100%);
    box-shadow: 0 14px 28px rgba(255, 159, 28, 0.24), inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

.hud-button--ghost {
    background: rgba(255, 255, 255, 0.68);
}

.shortcut-rail {
    grid-area: rail;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: start;
    padding-top: 2px;
}

.shortcut-rail__button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 16px;
    color: #fffef7;
    font-size: 1.1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
        linear-gradient(180deg, #7fc856 0%, #4e9a36 100%);
    box-shadow: 0 10px 18px rgba(63, 125, 50, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.farm-play {
    grid-area: stage;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    width: 100%;
    gap: 8px;
}

.farm-map-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0;
    padding: 3px;
    box-sizing: border-box;
}

.farm-dock {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 252, 245, 0.88);
    box-shadow: 0 2px 10px rgba(31, 55, 26, 0.06);
}

.game-body--farm .farm-dock {
    border: 2px solid #aed581;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffef8 0%, #f3edd4 100%);
    box-shadow: 0 2px 0 rgba(104, 142, 62, 0.25), 0 6px 18px rgba(31, 55, 26, 0.08);
}

.farm-dock__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
}

.farm-dock__head .farm-dock__place {
    font-size: 0.88rem;
    color: #2d4a28;
    flex: 0 0 auto;
}

.farm-status-strip--dock {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 0;
}

.farm-dock__details {
    border: 0;
    margin: 0;
    padding: 0;
}

.farm-dock__summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    color: #5a7a55;
    padding: 2px 0;
    user-select: none;
}

.farm-dock__summary::-webkit-details-marker {
    display: none;
}

.farm-dock__summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s ease;
}

.farm-dock__details[open] .farm-dock__summary::before {
    transform: rotate(90deg);
}

.farm-mini-panel--compact {
    margin-top: 6px;
    gap: 4px;
}

.farm-mini-panel--compact .farm-mini-panel__item {
    padding: 4px 6px;
}

.farm-mini-panel--compact .farm-mini-panel__item span {
    font-size: 0.58rem;
}

.farm-mini-panel--compact .farm-mini-panel__item strong {
    font-size: 0.78rem;
}

/* Botao flutuante + lotes (sempre visivel no mapa) */
.farm-fab-add-lotes {
    position: absolute;
    z-index: 14;
    left: 10px;
    bottom: 62px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 52px;
    min-height: 52px;
    padding: 6px 4px;
    border: 0;
    border-radius: 16px;
    color: #fffef8;
    font-family: var(--font-display);
    background: linear-gradient(180deg, #5ccf4a 0%, #3a9e32 100%);
    box-shadow:
        0 4px 0 rgba(30, 80, 28, 0.35),
        0 12px 24px rgba(31, 55, 26, 0.28);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.farm-fab-add-lotes:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.farm-fab-add-lotes__icon {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
}

.farm-fab-add-lotes__label {
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.95;
}

.farm-status-strip {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.farm-status-strip::-webkit-scrollbar {
    height: 4px;
}

.farm-status-strip::-webkit-scrollbar-thumb {
    background: rgba(63, 125, 50, 0.22);
    border-radius: 999px;
}

.farm-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.72);
    color: #36552f;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(42, 76, 33, 0.06);
    flex: 0 0 auto;
    white-space: nowrap;
}

.farm-mini-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 6px;
    width: 100%;
}

.farm-mini-panel__item {
    padding: 5px 8px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
}

.farm-mini-panel__item span {
    display: block;
    color: #6a7f67;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.farm-mini-panel__item strong {
    display: block;
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 0.86rem;
}

.farm-map-floating {
    position: absolute;
    z-index: 11;
    pointer-events: none;
}

.farm-map-floating--status {
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    max-width: calc(100% - 56px);
    margin: 0 auto;
}

.farm-status-float {
    margin: 0;
    pointer-events: none;
    max-width: 100%;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 252, 245, 0.94);
    box-shadow: 0 6px 18px rgba(31, 55, 26, 0.12);
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: center;
}

.farm-status-text {
    margin-top: 2px;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.3;
}

.farm-status-text--info {
    color: #4d6f4a;
}

.farm-status-text--success {
    color: #2f8a50;
}

.farm-status-text--warning {
    color: #b56f15;
}

.farm-status-text--error {
    color: #c34b3f;
}

.farm-map-viewport {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: min(52dvh, 620px);
    overflow: hidden;
    display: block;
    border-radius: 16px;
    background: radial-gradient(ellipse 88% 78% at 50% 46%, #84dc5f 0%, #6fbe44 50%, #4fa032 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 12px 32px rgba(31, 55, 26, 0.18);
    cursor: grab;
    touch-action: none;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.game-body--farm .farm-map-viewport {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: radial-gradient(ellipse 100% 88% at 50% 42%, #5a8f3d 0%, #45702d 52%, #355522 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 -24px 48px rgba(0, 0, 0, 0.12);
}

.game-body--farm .farm-map-viewport::before {
    display: block;
    opacity: 0.85;
    background:
        radial-gradient(ellipse 95% 48% at 50% -8%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 92% 88%, rgba(255, 255, 255, 0.05) 0%, transparent 55%);
    animation: farmViewportAmbient 14s ease-in-out infinite alternate;
}

.game-body--farm .farm-map-world {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 38%);
}

/* Luz ambiente suave no campo (por cima do fundo, abaixo do mapa) */
.farm-map-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(ellipse 95% 55% at 50% -5%, rgba(255, 255, 255, 0.28) 0%, transparent 52%),
        radial-gradient(ellipse 45% 40% at 92% 88%, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse 35% 30% at 8% 75%, rgba(255, 255, 255, 0.07) 0%, transparent 50%);
    animation: farmViewportAmbient 12s ease-in-out infinite alternate;
}

.farm-map-viewport > .farm-camera {
    z-index: 1;
}

.farm-map-viewport::-webkit-scrollbar {
    display: none;
}

.farm-map-viewport.is-dragging,
.farm-map-viewport.is-pointer-down {
    cursor: grabbing;
}

.farm-map-world {
    position: relative;
    flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(118, 201, 79, 0.35) 0%, transparent 42%);
    contain: layout;
}

.farm-scenery,
.farm-iso-grid,
.farm-effects {
    position: absolute;
    inset: 0;
}

.farm-scenery {
    z-index: 1;
    overflow: visible;
    pointer-events: auto;
}

.farm-boundary-layer {
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    overflow: visible;
}

.farm-boundary-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.farm-boundary-polygon {
    fill: none;
    stroke: rgba(46, 125, 50, 0.9);
    stroke-width: 3.5;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.55));
}

.farm-tile--swap-pick .farm-tile__surface {
    box-shadow:
        inset 0 0 0 3px rgba(255, 214, 102, 0.95),
        inset 0 -14px 22px rgba(0, 0, 0, 0.12);
    filter: brightness(1.08);
}

.farm-expand-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    overflow: visible;
}

.farm-expand-overlay .farm-expand-plot {
    pointer-events: auto;
}

/* Modo gradear/fertilizar: lotes acima dos objetos decorativos para o clique funcionar */
.farm-map-world--tiles-priority .farm-object-layer {
    z-index: 5;
}

.farm-map-world--tiles-priority .farm-iso-grid {
    z-index: 10;
}

.farm-map-world--tiles-priority .farm-expand-overlay {
    z-index: 12;
}

.farm-iso-grid {
    z-index: 2;
}

.farm-effects {
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}

.scene-asset,
.scene-tree-sprite {
    position: absolute;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.decor-movel {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    z-index: 3;
}

.decor-movel.is-decor-pegando {
    cursor: grabbing;
    z-index: 30;
}

.farm-scenery img {
    -webkit-user-drag: none;
    user-drag: none;
}

.farm-scenery--hide-barn .scene-asset--barn {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.farm-scenery--hide-trees .scene-tree-sprite {
    opacity: 0;
    pointer-events: none;
}

.farm-scenery--barn-reveal .scene-asset--barn {
    visibility: visible;
    animation: barnCenarioEntra 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes barnCenarioEntra {
    0% {
        opacity: 0;
        transform: scale(0.15) translateY(24px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.farm-scene-extras {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.farm-scene-extras.is-hidden {
    display: none;
}

.farm-scene-extras__sprite {
    position: absolute;
    font-size: clamp(1.6rem, 4vmin, 2.4rem);
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(42, 76, 33, 0.2));
}

.farm-scene-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.55);
    flex: 0 1 auto;
}

.farm-scene-controls__label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a6d56;
    margin-right: 2px;
}

.farm-scene-controls__hint {
    flex-basis: 100%;
    font-size: 0.62rem;
    color: #6a7f67;
    line-height: 1.25;
    margin: -2px 0 0;
}

.farm-scene-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #36552f;
    cursor: pointer;
    user-select: none;
}

.farm-scene-toggle input {
    accent-color: #4e9a36;
}

.scene-asset--barn {
    width: clamp(120px, 20vmin, 220px);
    max-width: 28%;
    filter: drop-shadow(0 10px 18px rgba(42, 76, 33, 0.18));
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.scene-tree-sprite {
    width: clamp(72px, 12vmin, 118px);
    aspect-ratio: 161 / 193;
    background-image: url("../img/arvores/arvores.png");
    background-repeat: no-repeat;
    background-size: 400% 200%;
    filter: drop-shadow(0 10px 18px rgba(42, 76, 33, 0.16));
    transform-origin: center center;
    transition: opacity 0.45s ease;
}

.scene-tree-sprite--1 {
    background-position: 0% 0%;
}

.scene-tree-sprite--2 {
    background-position: 33.333% 0%;
}

.scene-tree-sprite--3 {
    background-position: 66.666% 0%;
}

.scene-tree-sprite--4 {
    background-position: 100% 0%;
}

.scene-tree-sprite--5 {
    background-position: 0% 100%;
}

.scene-tree-sprite--6 {
    background-position: 66.666% 100%;
}

.scene-tree-sprite.is-cut-tree {
    opacity: 0;
    transform: scale(0.65) rotate(-8deg);
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.farm-tile {
    position: absolute;
    width: 132px;
    height: 82px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    overflow: visible;
    transform: translate(-50%, 0);
    transition: transform 0.18s ease, filter 0.18s ease;
    will-change: transform;
}

.farm-tile:hover {
    transform: translate(-50%, -4px) scale(1.02);
}

.farm-tile:disabled {
    cursor: progress;
}

.farm-tile:disabled:hover {
    transform: translate(-50%, 0);
}

.farm-tile__shadow,
.farm-tile__surface {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.farm-tile__shadow {
    top: 14px;
    opacity: 0.3;
    background: rgba(27, 52, 24, 0.36);
    filter: blur(10px);
}

.farm-tile__surface {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 40%),
        linear-gradient(180deg, #a97142 0%, #8b5a2b 100%);
    box-shadow: inset 0 -14px 22px rgba(0, 0, 0, 0.12);
}

.farm-tile__crop {
    position: absolute;
    left: 50%;
    top: 8px;
    display: grid;
    place-items: center;
    width: 70px;
    height: 52px;
    transform: translateX(-50%);
}

.farm-tile__crop.is-empty {
    opacity: 0;
}

.farm-tile__crop-icon {
    font-size: 1.95rem;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12));
}

.farm-tile__badge {
    position: absolute;
    left: 50%;
    top: 52%;
    bottom: auto;
    transform: translate(-50%, -50%);
    min-height: 0;
    padding: 1px 6px;
    max-width: 86%;
    border-radius: 999px;
    color: #2a4524;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    background: rgba(255, 252, 240, 0.95);
    border: 1px solid rgba(90, 120, 80, 0.35);
    box-shadow: 0 2px 8px rgba(42, 76, 33, 0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 4;
    pointer-events: none;
}

.farm-tile__badge--timer {
    top: 56%;
    padding: 0 4px 1px;
    max-width: 78%;
    font-size: 0.48rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #1a3014;
    background: linear-gradient(180deg, #fffef5 0%, #ffe9a8 55%, #ffc85c 100%);
    border: 1px solid rgba(140, 95, 25, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 2px 6px rgba(42, 76, 33, 0.2);
}

.farm-tile::after {
    content: attr(data-acao-label);
    position: absolute;
    left: 50%;
    top: -20px;
    padding: 4px 10px;
    transform: translate(-50%, 8px);
    border-radius: 999px;
    color: #fffef7;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(49, 79, 44, 0.88);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.farm-tile:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.farm-tile--empty .farm-tile__surface {
    background:
        repeating-linear-gradient(-36deg, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 16px),
        linear-gradient(180deg, #a97142 0%, #8b5a2b 100%);
}

/* Solo apos colheita: precisa gradear antes de plantar */
.farm-tile--fallow .farm-tile__surface {
    background:
        repeating-linear-gradient(52deg, rgba(0, 0, 0, 0.06) 0 5px, transparent 5px 10px),
        linear-gradient(180deg, #6d4c32 0%, #4a3424 100%);
    box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.18);
}

.farm-tile--blocked .farm-tile__surface {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 44%),
        linear-gradient(180deg, #5d6167 0%, #383d43 100%);
}

.farm-tile--blocked .farm-tile__crop-icon {
    font-size: 1.45rem;
    opacity: 0.92;
}

.farm-tile--planted .farm-tile__surface {
    background:
        radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.24), transparent 28%),
        linear-gradient(180deg, #7bca56 0%, #58a83e 100%);
}

.farm-tile--growing .farm-tile__surface {
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.26), transparent 26%),
        linear-gradient(180deg, #b8df55 0%, #76be47 46%, #58a83e 100%);
}

.farm-tile--ready .farm-tile__surface {
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.34), transparent 28%),
        linear-gradient(180deg, #ffe875 0%, #cde95d 42%, #6fbe45 100%);
}

.farm-tile--plantable .farm-tile__surface {
    box-shadow:
        inset 0 -14px 22px rgba(0, 0, 0, 0.1),
        0 0 0 4px rgba(255, 213, 74, 0.18);
}

/* --- Efeitos visuais: plantacoes e colheita pronta --- */
.farm-tile--planted .farm-tile__surface::before,
.farm-tile--growing .farm-tile__surface::before {
    content: "";
    position: absolute;
    left: -60%;
    top: -40%;
    width: 90%;
    height: 180%;
    background: linear-gradient(
        78deg,
        transparent 38%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 62%
    );
    transform: rotate(14deg);
    animation: farmTileShineSweep 5s ease-in-out infinite;
    pointer-events: none;
}

.farm-tile--growing .farm-tile__surface::before {
    animation-duration: 3.4s;
    opacity: 0.95;
}

.farm-tile--planted .farm-tile__surface::before {
    opacity: 0.55;
}

.farm-tile--planted:not(:disabled) .farm-tile__crop-icon {
    animation: farmCropSprout 2.8s ease-in-out infinite;
}

.farm-tile--growing:not(:disabled) .farm-tile__crop-icon {
    animation: farmCropSway 2.4s ease-in-out infinite;
}

.farm-tile--ready:not(:disabled) .farm-tile__crop-icon {
    animation: farmCropReadyPulse 1.9s ease-in-out infinite;
}

.farm-tile--ready .farm-tile__surface {
    animation: farmTileGlow 2.2s ease-in-out infinite;
}

.farm-tile--ready .farm-tile__crop {
    overflow: visible;
}

.farm-tile--ready .farm-tile__crop::before,
.farm-tile--ready .farm-tile__crop::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255, 248, 180, 0.85) 45%, transparent 72%);
    box-shadow: 0 0 10px rgba(255, 230, 120, 0.9);
    pointer-events: none;
    animation: farmSparkleTwinkle 2.1s ease-in-out infinite;
}

.farm-tile--ready .farm-tile__crop::before {
    left: 4px;
    top: 2px;
    animation-delay: 0s;
}

.farm-tile--ready .farm-tile__crop::after {
    right: 6px;
    top: 14px;
    animation-delay: 0.55s;
}

.farm-tile__badge--timer {
    animation: farmBadgeBreathe 2.5s ease-in-out infinite;
}

.farm-fx-pollen {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.2) 55%, transparent 70%);
    filter: blur(0.5px);
    opacity: 0.55;
    pointer-events: none;
    animation: farmPollenDrift var(--fx-dur, 4s) ease-in-out infinite;
}

@keyframes farmViewportAmbient {
    0% {
        opacity: 0.75;
        filter: saturate(1);
    }

    100% {
        opacity: 1;
        filter: saturate(1.12);
    }
}

@keyframes farmTileShineSweep {
    0% {
        transform: translateX(-20%) rotate(14deg);
    }

    100% {
        transform: translateX(220%) rotate(14deg);
    }
}

@keyframes farmCropSprout {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
    }

    50% {
        transform: scale(1.07);
        filter: drop-shadow(0 4px 14px rgba(60, 140, 50, 0.45));
    }
}

@keyframes farmCropSway {
    0%,
    100% {
        transform: rotate(-3deg) scale(1.02);
    }

    50% {
        transform: rotate(3deg) scale(1.08);
    }
}

@keyframes farmCropReadyPulse {
    0%,
    100% {
        transform: scale(1.04);
        filter: drop-shadow(0 4px 10px rgba(255, 190, 60, 0.5));
    }

    45% {
        transform: scale(1.14);
        filter: drop-shadow(0 8px 20px rgba(255, 230, 120, 0.75));
    }
}

@keyframes farmSparkleTwinkle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.35);
    }

    35%,
    65% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes farmBadgeBreathe {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes farmPollenDrift {
    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.35;
    }

    50% {
        transform: translate(12px, -32px);
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .farm-map-viewport::before {
        animation: none;
    }

    .farm-tile--planted .farm-tile__surface::before,
    .farm-tile--growing .farm-tile__surface::before {
        animation: none;
        opacity: 0;
    }

    .farm-tile--planted:not(:disabled) .farm-tile__crop-icon,
    .farm-tile--growing:not(:disabled) .farm-tile__crop-icon,
    .farm-tile--ready:not(:disabled) .farm-tile__crop-icon {
        animation: none;
    }

    .farm-tile--ready .farm-tile__surface {
        animation: none;
    }

    .farm-tile--ready .farm-tile__crop::before,
    .farm-tile--ready .farm-tile__crop::after {
        animation: none;
        opacity: 0;
    }

    .farm-tile__badge--timer {
        animation: none;
    }

    .farm-fx-pollen {
        animation: none !important;
        opacity: 0.25;
    }

    .toast-stack--game .toast {
        animation: toastIn 0.2s ease;
    }
}

.bottom-toolbar {
    grid-area: toolbar;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    background: rgba(255, 252, 245, 0.96);
    box-shadow: 0 2px 14px rgba(42, 76, 33, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bottom-toolbar.is-highlighted {
    box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.16), 0 14px 28px rgba(42, 76, 33, 0.16);
}

.game-body--farm .bottom-toolbar {
    border: 2px solid #8bc34a;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffef8 0%, #f2ecd6 100%);
    box-shadow:
        0 2px 0 rgba(76, 125, 40, 0.3),
        0 8px 22px rgba(31, 55, 26, 0.1);
}

.bottom-toolbar__row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.bottom-toolbar__seed-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: min(100%, 240px);
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.5);
    min-width: 0;
}

.bottom-toolbar__seed-strip.is-empty {
    opacity: 0.85;
}

.bottom-toolbar__seed-emoji {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffdf7 0%, #f5e6c8 100%);
    font-size: 1.15rem;
}

.bottom-toolbar__seed-text {
    flex: 1 1 auto;
    min-width: 0;
}

.bottom-toolbar__seed-text strong {
    display: block;
    margin-top: 1px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    line-height: 1.2;
}

.bottom-toolbar__seed-text small {
    display: block;
    margin-top: 2px;
    color: #62735b;
    line-height: 1.3;
    font-size: 0.65rem;
}

.bottom-toolbar__seed-qty {
    flex: 0 0 auto;
    text-align: right;
    padding-left: 4px;
    border-left: 1px solid rgba(63, 125, 50, 0.12);
}

.bottom-toolbar__seed-qty strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.86rem;
}

.bottom-toolbar__label {
    color: #6b7f6b;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bottom-toolbar__track {
    display: flex;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 720px) {
    .bottom-toolbar__row {
        flex-direction: column;
    }

    .bottom-toolbar__seed-strip {
        max-width: none;
    }
}

.bottom-toolbar__track::-webkit-scrollbar {
    display: none;
}

.farm-tool {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
    flex-shrink: 0;
    min-width: 96px;
    max-width: 200px;
    min-height: 48px;
    padding: 6px 10px;
    border: 0;
    border-radius: 14px;
    color: #35552f;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 230, 200, 0.78)),
        radial-gradient(circle at top right, rgba(109, 190, 69, 0.12), transparent 32%);
    box-shadow: 0 10px 18px rgba(42, 76, 33, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.farm-tool__icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    grid-row: 1 / -1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
}

.farm-tool strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.82rem;
    font-family: var(--font-display);
    line-height: 1.15;
    align-self: end;
}

.farm-tool span:last-child {
    grid-column: 2;
    grid-row: 2;
    color: #62735b;
    font-size: 0.68rem;
    line-height: 1.2;
    align-self: start;
}

.farm-tool.is-selected {
    color: #fffef7;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
        linear-gradient(180deg, #ffb640 0%, #ff9f1c 100%);
    box-shadow: 0 22px 34px rgba(255, 159, 28, 0.24), inset 0 2px 0 rgba(255, 255, 255, 0.24);
}

.farm-tool.is-selected .farm-tool__icon {
    background: rgba(255, 255, 255, 0.22);
}

.farm-tool.is-selected span:last-child {
    color: rgba(255, 254, 247, 0.86);
}

.farm-tool.is-empty {
    opacity: 0.58;
    filter: grayscale(0.18);
}

.farm-tool--add-lotes {
    min-width: 88px;
    max-width: 110px;
    color: #fffef8;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
        linear-gradient(180deg, #ffb640 0%, #e8890c 100%);
    box-shadow: 0 10px 20px rgba(255, 159, 28, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.farm-tool--add-lotes .farm-tool__icon {
    background: rgba(255, 255, 255, 0.22);
    font-size: 1.25rem;
    font-weight: 900;
}

.farm-tool--add-lotes strong,
.farm-tool--add-lotes span:last-child {
    color: rgba(255, 254, 248, 0.92);
}

.game-modal--plots {
    z-index: 32;
}

.game-modal__dialog--plots {
    width: min(440px, calc(100% - 20px));
    padding: 22px 22px 18px;
}

.game-modal__dialog--plots h2 {
    font-size: 1.4rem;
    margin-top: 8px;
}

.plots-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.plots-modal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(63, 125, 50, 0.2);
    text-align: left;
    color: #2a3f28;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 240, 0.92));
    box-shadow: 0 6px 16px rgba(31, 55, 26, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.plots-modal-card:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(31, 55, 26, 0.12);
}

.plots-modal-card:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.plots-modal-card--secondary {
    border-color: rgba(255, 159, 28, 0.35);
    background: linear-gradient(180deg, rgba(255, 252, 240, 0.98), rgba(255, 236, 200, 0.75));
}

.plots-modal-card--compact {
    padding: 12px 14px;
}

.plots-modal-card--compact .plots-modal-card__title {
    font-size: 0.98rem;
}

.farm-status-chip--time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.plots-modal-card__icon {
    font-size: 1.35rem;
    line-height: 1;
}

.plots-modal-card__title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
}

.plots-modal-card__meta {
    font-size: 0.82rem;
    color: #5c7260;
    font-weight: 700;
}

.plots-modal-card__hint {
    font-size: 0.76rem;
    color: #607667;
    line-height: 1.35;
}

.plots-modal-footnote {
    margin: 14px 0 0;
    font-size: 0.74rem;
    color: #6a7f67;
    line-height: 1.45;
}

.floating-reward {
    position: absolute;
    z-index: 5;
    padding: 6px 12px;
    border-radius: 999px;
    color: #fffef7;
    font-size: 0.8rem;
    font-weight: 900;
    background: linear-gradient(180deg, #ffb640 0%, #ff9f1c 100%);
    box-shadow: 0 16px 28px rgba(255, 159, 28, 0.22);
    animation: rewardFloat 1.3s ease forwards;
    white-space: nowrap;
}

.toast-stack--game {
    right: 18px;
    bottom: 18px;
}

.toast-stack--game .toast {
    animation: toastInFarm 0.38s cubic-bezier(0.22, 1.32, 0.36, 1);
}

@keyframes toastInFarm {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes farmTileGlow {
    0%,
    100% {
        box-shadow: inset 0 -14px 22px rgba(0, 0, 0, 0.1), 0 12px 20px rgba(255, 213, 74, 0.14);
    }

    50% {
        box-shadow: inset 0 -14px 22px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(255, 213, 74, 0.18), 0 20px 28px rgba(255, 213, 74, 0.24);
    }
}

@keyframes rewardFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, 10px) scale(0.92);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -46px) scale(1.04);
    }
}

@media (max-width: 1099px) {
    .top-hud__actions,
    .top-hud__resources {
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    .game-body--farm {
        overflow-y: auto;
    }

    .game-shell {
        height: auto;
        min-height: 100dvh;
        max-height: none;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(280px, 1fr) auto;
        grid-template-areas:
            "hud"
            "rail"
            "stage"
            "toolbar";
        padding: 8px 10px 12px;
        gap: 8px;
    }

    .shortcut-rail {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 4px 0;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .shortcut-rail__button {
        flex-shrink: 0;
    }

    .farm-map-viewport {
        min-height: min(46dvh, 420px);
    }
}

@media (max-width: 780px) {
    .farm-map-viewport {
        min-height: min(42dvh, 380px);
    }

    .bottom-toolbar {
        padding: 8px;
    }

    .farm-tool {
        min-width: 88px;
        max-width: 160px;
    }
}

@media (max-width: 640px) {
    .game-shell {
        padding: 6px 8px 10px;
    }

    .farm-status-strip {
        gap: 6px;
    }

    .farm-status-chip {
        font-size: 0.68rem;
        min-height: 28px;
        padding: 0 8px;
    }

    .toast-stack--game {
        right: 10px;
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .top-hud__resources {
        gap: 4px;
    }

    .hud-pill {
        padding: 4px 8px;
    }

    .hud-pill--xp {
        grid-column: 1 / -1;
        width: 100%;
    }

    .farm-map-viewport {
        min-height: 36dvh;
    }

    .hud-button span:last-child {
        display: none;
    }

    .hud-button {
        min-width: 36px;
        padding: 0 8px;
        justify-content: center;
    }
}

/* Global Game Presentation */
.brand-tag--soft {
    background: rgba(109, 190, 69, 0.14);
    border-color: rgba(63, 125, 50, 0.16);
}

.page-shell--landing,
.page-shell--auth,
.page-shell--market {
    position: relative;
    z-index: 1;
}

.landing-body--game {
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 249, 201, 0.78), transparent 14%),
        linear-gradient(180deg, #87ceeb 0%, #c4eeff 30%, #f6f6e6 30%, #f6f6e6 35%, #b5e082 35%, #7ac751 60%, #65b546 100%);
}

.landing-topbar {
    position: sticky;
    top: 14px;
    z-index: 3;
}

.hero-grid--landing {
    align-items: stretch;
    min-height: auto;
    padding-top: 26px;
}

.hero-card--landing,
.preview-card--world {
    min-height: 620px;
}

.hero-card--landing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(245, 230, 200, 0.84)),
        radial-gradient(circle at top right, rgba(255, 213, 74, 0.18), transparent 30%),
        radial-gradient(circle at bottom left, rgba(109, 190, 69, 0.12), transparent 26%);
}

.landing-badge-row,
.auth-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.landing-feature-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.landing-feature,
.auth-mini-card {
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.landing-feature span,
.auth-mini-card span:first-child {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: rgba(255, 249, 240, 0.86);
    font-size: 1.18rem;
}

.landing-feature strong,
.auth-mini-card strong {
    display: block;
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 1rem;
}

.landing-feature p,
.auth-mini-card p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.preview-card--world {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.93), rgba(245, 230, 200, 0.82)),
        radial-gradient(circle at top right, rgba(135, 206, 235, 0.2), transparent 28%);
}

.landing-world {
    position: relative;
    min-height: 430px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 34px;
    background:
        linear-gradient(180deg, #9adfff 0%, #dff4ff 35%, #a9dd76 35%, #74c24d 100%);
    box-shadow: inset 0 -18px 32px rgba(63, 125, 50, 0.18);
}

.landing-world__cloud,
.landing-world__sun,
.landing-world__barn,
.landing-world__tree,
.landing-world__pond,
.landing-world__path,
.landing-world__field {
    position: absolute;
}

.landing-world__cloud {
    height: 48px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 20% 52%, rgba(255, 255, 255, 0.94) 0 18px, transparent 19px),
        radial-gradient(circle at 52% 44%, rgba(255, 255, 255, 0.98) 0 22px, transparent 23px),
        radial-gradient(circle at 78% 50%, rgba(255, 255, 255, 0.92) 0 16px, transparent 17px);
}

.landing-world__cloud--1 {
    left: 30px;
    top: 42px;
    width: 150px;
}

.landing-world__cloud--2 {
    right: 42px;
    top: 66px;
    width: 126px;
}

.landing-world__sun {
    right: 90px;
    top: 36px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 250, 216, 0.98) 0%, rgba(255, 213, 74, 0.96) 56%, rgba(255, 213, 74, 0.06) 74%);
}

.landing-world__barn {
    left: 74px;
    bottom: 112px;
    width: 150px;
    height: 130px;
}

.landing-world__barn-roof,
.landing-world__barn-body,
.landing-world__barn-door {
    position: absolute;
    display: block;
}

.landing-world__barn-roof {
    inset: 0 0 auto;
    height: 62px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(180deg, #df5b3f 0%, #bf402a 100%);
}

.landing-world__barn-body {
    left: 20px;
    right: 20px;
    top: 46px;
    bottom: 0;
    border-radius: 18px 18px 22px 22px;
    background: linear-gradient(180deg, #fff8ee 0%, #e7c79b 100%);
}

.landing-world__barn-door {
    left: calc(50% - 18px);
    bottom: 0;
    width: 36px;
    height: 48px;
    border-radius: 14px 14px 8px 8px;
    background: linear-gradient(180deg, #a46b37 0%, #73481f 100%);
}

.landing-world__tree {
    width: 72px;
    height: 108px;
}

.landing-world__tree::before,
.landing-world__tree::after {
    content: "";
    position: absolute;
}

.landing-world__tree::before {
    left: 28px;
    bottom: 6px;
    width: 14px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(180deg, #9c6b3e 0%, #73481f 100%);
}

.landing-world__tree::after {
    inset: 0;
    border-radius: 46% 54% 44% 56% / 48% 42% 58% 52%;
    background:
        radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.26), transparent 24%),
        linear-gradient(180deg, #7fd459 0%, #4e9a36 100%);
}

.landing-world__tree--1 {
    left: 280px;
    bottom: 118px;
}

.landing-world__tree--2 {
    right: 62px;
    bottom: 124px;
    transform: scale(1.08);
}

.landing-world__pond {
    right: 92px;
    bottom: 42px;
    width: 164px;
    height: 94px;
    border-radius: 54% 46% 48% 52% / 52% 44% 56% 48%;
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.6), transparent 24%),
        linear-gradient(180deg, #7cd0ff 0%, #69b7ff 100%);
}

.landing-world__path {
    left: 164px;
    bottom: 64px;
    width: 260px;
    height: 86px;
    transform: rotate(-16deg);
    border-radius: 999px;
    background: linear-gradient(180deg, #c99867 0%, #9d6838 100%);
    opacity: 0.95;
}

.landing-world__field {
    right: 72px;
    bottom: 122px;
    display: grid;
    grid-template-columns: repeat(3, 82px);
    gap: 14px;
    transform: skewY(-10deg);
}

.landing-world__tile {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 24px;
    color: #fffef7;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.1);
}

.landing-world__tile--soil {
    background: linear-gradient(180deg, #a97142 0%, #8b5a2b 100%);
}

.landing-world__tile--sprout {
    background: linear-gradient(180deg, #88d65f 0%, #4fa83f 100%);
}

.landing-world__tile--ready {
    color: #455b1e;
    background: linear-gradient(180deg, #ffe670 0%, #b8df55 100%);
}

.landing-world__tile--locked {
    background: linear-gradient(180deg, #5d6167 0%, #383d43 100%);
}

.preview-stats--landing {
    margin-top: 20px;
}

.landing-ribbon {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.landing-ribbon__card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    background: rgba(255, 253, 247, 0.72);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
}

.landing-ribbon__card > span {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    font-size: 1.2rem;
}

.landing-ribbon__card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
}

.landing-ribbon__card p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.52;
}

.auth-body--game {
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 249, 201, 0.72), transparent 14%),
        linear-gradient(180deg, #87ceeb 0%, #c9eeff 30%, #f8f1df 30%, #f8f1df 36%, #b6df80 36%, #7cc651 62%, #68b94a 100%);
}

.auth-layout--game {
    align-items: stretch;
}

.auth-side--game,
.auth-card--game {
    min-height: 640px;
}

.auth-side--game {
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.88), rgba(245, 230, 200, 0.84)),
        radial-gradient(circle at top right, rgba(255, 213, 74, 0.14), transparent 28%);
}

.auth-scene {
    position: relative;
    min-height: 260px;
    margin: 24px 0;
    overflow: hidden;
    border-radius: 32px;
    background:
        linear-gradient(180deg, #9fdfff 0%, #dff4ff 40%, #89cf5f 40%, #6dbd47 100%);
}

.auth-scene__hill,
.auth-scene__barn,
.auth-scene__field,
.auth-scene__tree {
    position: absolute;
}

.auth-scene__hill {
    inset: auto -20px -26px -20px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(180deg, #7ccd55 0%, #59ad3f 100%);
}

.auth-scene__barn {
    left: 46px;
    bottom: 46px;
    width: 132px;
    height: 112px;
}

.auth-scene__barn-roof,
.auth-scene__barn-body,
.auth-scene__barn-door {
    position: absolute;
    display: block;
}

.auth-scene__barn-roof {
    inset: 0 0 auto;
    height: 56px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(180deg, #df5b3f 0%, #bf402a 100%);
}

.auth-scene__barn-body {
    left: 18px;
    right: 18px;
    top: 42px;
    bottom: 0;
    border-radius: 16px 16px 20px 20px;
    background: linear-gradient(180deg, #fff8ee 0%, #e7c79b 100%);
}

.auth-scene__barn-door {
    left: calc(50% - 16px);
    bottom: 0;
    width: 32px;
    height: 44px;
    border-radius: 12px 12px 8px 8px;
    background: linear-gradient(180deg, #a46b37 0%, #73481f 100%);
}

.auth-scene__field {
    right: 46px;
    bottom: 54px;
    display: flex;
    gap: 12px;
}

.auth-scene__plot {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.1);
}

.auth-scene__plot--soil {
    background: linear-gradient(180deg, #a97142 0%, #8b5a2b 100%);
}

.auth-scene__plot--sprout {
    background: linear-gradient(180deg, #88d65f 0%, #4fa83f 100%);
}

.auth-scene__plot--ready {
    background: linear-gradient(180deg, #ffe670 0%, #b8df55 100%);
}

.auth-scene__tree {
    width: 64px;
    height: 92px;
}

.auth-scene__tree::before,
.auth-scene__tree::after {
    content: "";
    position: absolute;
}

.auth-scene__tree::before {
    left: 24px;
    bottom: 4px;
    width: 12px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, #9c6b3e 0%, #73481f 100%);
}

.auth-scene__tree::after {
    inset: 0;
    border-radius: 46% 54% 44% 56% / 48% 42% 58% 52%;
    background: linear-gradient(180deg, #7fd459 0%, #4e9a36 100%);
}

.auth-scene__tree--1 {
    left: 208px;
    bottom: 60px;
}

.auth-scene__tree--2 {
    right: 18px;
    bottom: 86px;
}

.auth-scene--signup .auth-scene__field {
    right: 34px;
}

.auth-scene--signup .auth-scene__tree--1 {
    left: 224px;
}

.auth-mini-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.auth-card--game {
    align-self: stretch;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(245, 230, 200, 0.86)),
        radial-gradient(circle at top right, rgba(109, 190, 69, 0.12), transparent 28%);
}

.auth-card__header p {
    margin: -8px 0 20px;
    color: var(--muted);
    line-height: 1.58;
}

.auth-card__tips {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(63, 125, 50, 0.18);
    color: #5e7260;
    font-size: 0.92rem;
    font-weight: 700;
}

.game-body--store {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 249, 201, 0.76), transparent 14%),
        linear-gradient(180deg, #87ceeb 0%, #c8eeff 28%, #f8f0dd 28%, #f8f0dd 34%, #b7df82 34%, #7cc651 60%, #68b84a 100%);
}

.game-topbar--market {
    background: rgba(255, 250, 241, 0.8);
}

.shop-stage--market {
    gap: 22px;
}

.shop-hero--market {
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(245, 230, 200, 0.82)),
        radial-gradient(circle at top right, rgba(255, 213, 74, 0.18), transparent 26%);
}

.shop-hero__highlight--market {
    display: grid;
    gap: 18px;
}

.shop-hero__highlight-copy {
    display: grid;
    gap: 10px;
}

.shop-hero__highlight-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.market-scene {
    position: relative;
    min-height: 180px;
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(180deg, #9fdfff 0%, #e4f6ff 42%, #b5dc7a 42%, #7dc451 100%);
}

.market-scene__stall,
.market-scene__crate,
.market-scene__tree {
    position: absolute;
}

.market-scene__stall {
    left: 48px;
    bottom: 28px;
    width: 170px;
    height: 120px;
}

.market-scene__stall-roof,
.market-scene__stall-body,
.market-scene__basket {
    position: absolute;
    display: block;
}

.market-scene__stall-roof {
    left: 0;
    right: 0;
    top: 0;
    height: 42px;
    border-radius: 18px 18px 12px 12px;
    background:
        linear-gradient(90deg, #df5b3f 0 20%, #fff9f0 20% 40%, #df5b3f 40% 60%, #fff9f0 60% 80%, #df5b3f 80% 100%);
}

.market-scene__stall-body {
    left: 14px;
    right: 14px;
    bottom: 0;
    top: 30px;
    border-radius: 14px 14px 20px 20px;
    background: linear-gradient(180deg, #fff8ee 0%, #e7c79b 100%);
}

.market-scene__basket {
    bottom: 18px;
    width: 42px;
    height: 28px;
    border-radius: 10px 10px 16px 16px;
    background: linear-gradient(180deg, #b07c4c 0%, #85552b 100%);
}

.market-scene__basket--1 {
    left: 34px;
}

.market-scene__basket--2 {
    left: 90px;
}

.market-scene__crate {
    right: 48px;
    bottom: 34px;
    width: 58px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, #b07c4c 0%, #85552b 100%);
}

.market-scene__tree {
    right: 102px;
    bottom: 46px;
    width: 72px;
    height: 98px;
}

.market-scene__tree::before,
.market-scene__tree::after {
    content: "";
    position: absolute;
}

.market-scene__tree::before {
    left: 30px;
    bottom: 0;
    width: 12px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, #9c6b3e 0%, #73481f 100%);
}

.market-scene__tree::after {
    inset: 0;
    border-radius: 46% 54% 44% 56% / 48% 42% 58% 52%;
    background: linear-gradient(180deg, #7fd459 0%, #4e9a36 100%);
}

.shop-panel--market {
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(233, 236, 239, 0.82)),
        radial-gradient(circle at top left, rgba(109, 190, 69, 0.14), transparent 28%);
}

.market-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.market-strip__item {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #41613a;
    font-size: 0.86rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.game-body--store .shop-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 230, 200, 0.84)),
        radial-gradient(circle at top right, rgba(255, 213, 74, 0.14), transparent 26%);
    box-shadow: 0 20px 36px rgba(42, 76, 33, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.game-body--store .shop-card::after {
    content: "";
    position: absolute;
    right: -24px;
    top: -24px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 213, 74, 0.26), transparent 64%);
    pointer-events: none;
}

.game-body--store .shop-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    font-size: 1.6rem;
}

.game-body--store .shop-card__name {
    font-size: 1.16rem;
}

.game-body--store .shop-card__controls {
    margin-top: 18px;
}

.game-body--store .shop-card button {
    background: linear-gradient(180deg, #ffb640 0%, #ff9f1c 100%);
    box-shadow: 0 12px 22px rgba(255, 159, 28, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

@media (max-width: 1140px) {
    .landing-feature-row,
    .landing-ribbon {
        grid-template-columns: 1fr;
    }

    .hero-card--landing,
    .preview-card--world,
    .auth-side--game,
    .auth-card--game {
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .landing-world__field {
        right: 28px;
        grid-template-columns: repeat(2, 82px);
    }

    .auth-mini-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .landing-world {
        min-height: 360px;
    }

    .landing-world__field {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 184px 0 0 24px;
        transform: none;
    }

    .landing-world__barn {
        left: 24px;
        bottom: 110px;
        transform: scale(0.9);
        transform-origin: left bottom;
    }

    .landing-world__tree--2,
    .landing-world__pond {
        display: none;
    }

    .auth-scene__field {
        right: 24px;
        gap: 8px;
    }

    .auth-scene__plot {
        width: 56px;
        height: 56px;
    }
}

/* Farm Camera Revamp */
.farm-viewport {
    overflow: hidden;
    position: relative;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.farm-camera {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.farm-world {
    position: relative;
}

.farm-map-viewport.farm-viewport {
    cursor: grab;
}

.farm-map-viewport.farm-viewport.is-pointer-down,
.farm-map-viewport.farm-viewport.is-dragging {
    cursor: grabbing;
}

.farm-auto-bar {
    position: absolute;
    z-index: 13;
    top: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    max-width: min(100%, 400px);
    padding: 6px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 252, 245, 0.94);
    box-shadow: 0 8px 20px rgba(31, 55, 26, 0.12);
    pointer-events: auto;
}

.farm-auto-bar__title {
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a7a55;
    margin-right: 2px;
}

.farm-auto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #355731;
    cursor: pointer;
    user-select: none;
}

.farm-auto-toggle input {
    width: 15px;
    height: 15px;
    accent-color: #4e9a36;
    cursor: pointer;
}

@media (max-width: 520px) {
    .farm-auto-bar {
        top: 44px;
        left: 8px;
        max-width: calc(100% - 76px);
    }
}

.farm-controls {
    position: absolute;
    z-index: 12;
    display: flex;
    gap: 8px;
}

.floating-zoom-controls {
    right: 12px;
    top: 12px;
    flex-direction: column;
}

.edit-mode-toolbar {
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.44);
    background: rgba(255, 249, 240, 0.9);
    box-shadow: 0 10px 22px rgba(42, 76, 33, 0.14);
    max-width: min(100%, 940px);
    overflow-x: auto;
    scrollbar-width: thin;
}

.floating-control {
    border: 0;
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
    font-weight: 800;
    color: #2f4f2a;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 16px rgba(42, 76, 33, 0.16);
    backdrop-filter: blur(6px);
}

.floating-control:hover {
    transform: translateY(-1px);
}

.floating-control--mode {
    min-width: 94px;
    min-height: 38px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.floating-control--mode.is-active {
    color: #fffef7;
    background: linear-gradient(180deg, #ffb640 0%, #ff9f1c 100%);
    box-shadow: 0 14px 26px rgba(255, 159, 28, 0.28);
}

.farm-map-viewport.is-edit-mode .farm-tile {
    filter: saturate(0.7);
}

.farm-map-viewport.is-edit-mode .farm-tile--ready .farm-tile__surface {
    animation: none;
}

.farm-map-viewport.is-edit-mode .farm-tile--planted .farm-tile__surface::before,
.farm-map-viewport.is-edit-mode .farm-tile--growing .farm-tile__surface::before {
    animation: none;
    opacity: 0;
}

.farm-map-viewport.is-edit-mode .farm-tile--planted .farm-tile__crop-icon,
.farm-map-viewport.is-edit-mode .farm-tile--growing .farm-tile__crop-icon,
.farm-map-viewport.is-edit-mode .farm-tile--ready .farm-tile__crop-icon {
    animation: none;
}

.farm-map-viewport.is-edit-mode .farm-tile--ready .farm-tile__crop::before,
.farm-map-viewport.is-edit-mode .farm-tile--ready .farm-tile__crop::after {
    animation: none;
    opacity: 0;
}

.farm-map-viewport.is-edit-mode .farm-tile__badge--timer {
    animation: none;
}

.farm-object-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.farm-object {
    position: absolute;
    transform: translate(-50%, -90%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 12px;
    color: #fefef8;
    background: linear-gradient(180deg, rgba(56, 95, 47, 0.92), rgba(34, 67, 28, 0.92));
    box-shadow: 0 8px 18px rgba(31, 55, 26, 0.34);
    pointer-events: auto;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.farm-object:hover {
    transform: translate(-50%, -94%);
}

.farm-object__icon {
    font-size: 1rem;
}

.farm-object__name {
    font-size: 0.72rem;
    font-weight: 800;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.farm-object__price {
    padding: 1px 6px;
    border-radius: 999px;
    color: #2e4d24;
    font-size: 0.64rem;
    font-weight: 900;
    background: #ffd96d;
}

.farm-object.is-edit-highlight {
    box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.35), 0 10px 20px rgba(31, 55, 26, 0.38);
}

.farm-object.is-moving {
    cursor: grabbing;
    box-shadow: 0 0 0 2px rgba(111, 230, 130, 0.44), 0 12px 24px rgba(31, 55, 26, 0.4);
}

.farm-object.is-invalid-drop {
    box-shadow: 0 0 0 2px rgba(244, 104, 90, 0.52), 0 12px 24px rgba(31, 55, 26, 0.4);
    filter: saturate(0.8);
}

.farm-object.is-sell-selected {
    box-shadow: 0 0 0 2px rgba(255, 178, 58, 0.55), 0 14px 24px rgba(255, 159, 28, 0.34);
}

.farm-object.is-obj-tree {
    background: linear-gradient(180deg, rgba(43, 95, 53, 0.94), rgba(27, 65, 34, 0.94));
}

.farm-object.is-obj-barn {
    background: linear-gradient(180deg, rgba(146, 84, 54, 0.94), rgba(102, 55, 33, 0.94));
}

.farm-object.is-obj-animal {
    background: linear-gradient(180deg, rgba(83, 95, 129, 0.94), rgba(49, 58, 84, 0.94));
}

.farm-expand-plot {
    position: absolute;
    transform: translate(-50%, -44%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    color: #fffef8;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #ffb640 0%, #ff9f1c 100%);
    box-shadow:
        0 10px 22px rgba(255, 159, 28, 0.36),
        0 0 0 2px rgba(255, 213, 74, 0.22);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.farm-expand-plot:hover {
    transform: translate(-50%, -48%);
    box-shadow:
        0 14px 26px rgba(255, 159, 28, 0.4),
        0 0 0 3px rgba(255, 213, 74, 0.24);
}

.farm-expand-plot:disabled {
    opacity: 0.62;
    cursor: progress;
}

.farm-expand-plot__icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    color: #2d4d26;
    background: rgba(255, 248, 214, 0.95);
    font-size: 0.82rem;
    font-weight: 900;
}

.farm-expand-plot__text {
    white-space: nowrap;
}

.farm-expand-plot--farm {
    background: linear-gradient(180deg, #7ccf54 0%, #57ae3f 100%);
    box-shadow:
        0 10px 22px rgba(63, 125, 50, 0.34),
        0 0 0 2px rgba(170, 233, 129, 0.2);
}

.farm-expand-plot--farm .farm-expand-plot__icon {
    color: #2b5a21;
    background: rgba(231, 255, 208, 0.95);
}

@media (max-width: 980px) {
    .floating-zoom-controls {
        right: 10px;
        top: 10px;
    }

    .edit-mode-toolbar {
        left: 8px;
        right: 8px;
        bottom: 8px;
        transform: none;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .edit-mode-toolbar::-webkit-scrollbar {
        display: none;
    }

    .floating-control--mode {
        min-width: 102px;
        min-height: 44px;
        font-size: 0.86rem;
    }

    .farm-expand-plot {
        min-height: 40px;
        padding: 0 14px;
        font-size: 0.8rem;
    }
}

@media (max-width: 640px) {
    .floating-control {
        min-width: 44px;
        min-height: 44px;
    }

    .farm-object {
        min-height: 32px;
        padding: 5px 8px;
    }

    .farm-object__name {
        max-width: 70px;
        font-size: 0.68rem;
    }
}

/* In-game Missions and Barn Panels */
.game-modal__dialog--wide {
    width: min(980px, calc(100% - 20px));
    max-height: min(84vh, 920px);
    overflow: auto;
}

.mission-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.mission-card {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(63, 125, 50, 0.16);
    background: rgba(255, 255, 255, 0.72);
}

.mission-card--empty {
    text-align: center;
    color: #607667;
    font-weight: 700;
}

.mission-card.is-done {
    opacity: 0.84;
}

.mission-card__head,
.mission-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mission-card__head strong {
    font-family: var(--font-display);
    font-size: 1rem;
}

.mission-card__head span {
    color: #5c7260;
    font-size: 0.82rem;
    font-weight: 700;
}

.mission-card p {
    margin: 8px 0 10px;
    color: #607667;
    font-size: 0.9rem;
}

.mission-card__progress {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(63, 125, 50, 0.12);
    margin-bottom: 10px;
}

.mission-card__progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffe36a 0%, #ffb82d 42%, #6dbe45 100%);
}

.mission-card__footer span {
    color: #526953;
    font-size: 0.82rem;
}

.barn-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}

.barn-column {
    min-height: 240px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(63, 125, 50, 0.14);
    background: rgba(255, 255, 255, 0.72);
}

.barn-column h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 1rem;
}

.barn-list {
    display: grid;
    gap: 10px;
}

.barn-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(63, 125, 50, 0.12);
    background: rgba(255, 255, 255, 0.86);
}

.barn-row--empty {
    text-align: center;
    color: #607667;
    font-weight: 700;
}

.barn-row__info strong {
    display: block;
    font-size: 0.94rem;
}

.barn-row__info span {
    color: #607667;
    font-size: 0.8rem;
}

.barn-row__actions {
    display: inline-flex;
    gap: 8px;
}

.barn-row__actions .ghost-button,
.barn-row__actions .primary-button {
    min-height: 36px;
    padding: 0 12px;
}

@media (max-width: 900px) {
    .barn-columns {
        grid-template-columns: 1fr;
    }

    .mission-card__head,
    .mission-card__footer,
    .barn-row {
        grid-template-columns: 1fr;
        display: grid;
    }

    .barn-row__actions {
        width: 100%;
    }

    .barn-row__actions .ghost-button,
    .barn-row__actions .primary-button {
        flex: 1 1 auto;
    }
}

.game-modal--barn-qty {
    z-index: 30;
}

.game-modal__dialog--qty {
    width: min(420px, calc(100% - 24px));
    padding: 22px 24px 18px;
}

.game-modal__dialog--qty h2 {
    font-size: 1.35rem;
    margin-top: 10px;
}

.barn-qty-item {
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--grass-dark);
}

.barn-qty-field {
    margin-top: 14px;
}

.barn-qty-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #607667;
    margin-bottom: 6px;
}

.barn-qty-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(63, 125, 50, 0.22);
    background: rgba(255, 255, 255, 0.95);
    font-weight: 800;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.barn-qty-input:focus {
    outline: none;
    border-color: rgba(255, 159, 28, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.22);
}

.barn-qty-hint {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: #607667;
    font-weight: 700;
}