/* ===== Login Page ===== */

.login-container {

    min-height: 100vh;

    min-height: 100dvh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3b6 100%);

    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));

}



.login-card {

    background: white;

    border-radius: 20px;

    padding: 3rem 2.5rem;

    text-align: center;

    box-shadow: 0 10px 40px rgba(0,0,0,0.15);

    max-width: 420px;

    width: 100%;

    margin: 0 auto;

}



.login-logo {

    font-size: 5rem;

    margin-bottom: 0.5rem;

}



.login-card h1 {

    color: #2d6a4f;

    font-size: 1.8rem;

    margin-bottom: 0.3rem;

}



.login-subtitle {

    color: #74c69d;

    margin-bottom: 1.5rem;

}



.login-form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.login-input {

    width: 100%;

    padding: 0.75rem 1rem;

    border: 2px solid #b7e4c7;

    border-radius: 10px;

    font-size: 1rem;

    outline: none;

    transition: border-color 0.2s;

}



.login-input:focus {

    border-color: #52b788;

}



.login-error {

    background: #fff5f5;

    border: 1px solid #fc8181;

    border-radius: 8px;

    padding: 0.5rem;

    color: #c53030;

    font-size: 0.9rem;

}



.login-btn {

    width: 100%;

    background: linear-gradient(135deg, #52b788, #2d6a4f);

    color: white;

    border: none;

    border-radius: 10px;

    padding: 0.75rem;

    font-size: 1.1rem;

    cursor: pointer;

    transition: transform 0.1s, box-shadow 0.2s;

    box-shadow: 0 4px 15px rgba(82,183,136,0.4);

}



.login-btn:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(82,183,136,0.5);

}



.login-btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}



.login-hint {

    margin-top: 1rem;

    color: #95d5b2;

    font-size: 0.85rem;

}



/* ===== Global reset for farm game full-screen ===== */

html, body {

    margin: 0; padding: 0;

    height: 100%; overflow: hidden;

    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;

}



/* ===== Farm Game Root ===== */

.farm-game {

    position: fixed;

    inset: 0;

    height: 100vh;

    height: 100dvh;

    display: flex;

    flex-direction: column;

    /* Sky → horizon gradient */

    background: linear-gradient(180deg,

        #87ceeb 0%,

        #b0e0f7 35%,

        #c8eeaa 55%,

        #7ac74f 70%,

        #5da832 100%

    );

    overflow: hidden;

    user-select: none;

}



/* ===== Top HUD ===== */

.farm-hud-top {

    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.5rem 0.8rem;

    background: transparent;

    flex-shrink: 0;

    gap: 0.6rem;

    flex-wrap: wrap;

}



.player-badge {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    background: rgba(139,90,43,0.85);

    border: 2px solid #c8a45a;

    border-radius: 20px;

    padding: 0.25rem 0.75rem 0.25rem 0.4rem;

    box-shadow: 0 2px 8px rgba(0,0,0,0.3);

    min-width: 0;

}



.player-avatar {

    font-size: 1.6rem;

    line-height: 1;

}



.player-info {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

    min-width: 0;

}



.player-name {

    color: #fff8e7;

    font-size: 0.8rem;

    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.player-coins {

    color: #ffd700;

    font-size: 0.75rem;

    font-weight: 600;

}



.hud-actions {

    display: flex;

    gap: 0.4rem;

    flex-wrap: wrap;

    justify-content: flex-end;

}



.hud-btn {

    position: relative;

    background: rgba(139,90,43,0.85);

    border: 2px solid #c8a45a;

    border-radius: 50%;

    width: 44px;

    height: 44px;

    font-size: 1.3rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 8px rgba(0,0,0,0.3);

    text-decoration: none;

    color: inherit;

    transition: transform 0.15s;

}



.hud-btn:hover:not(:disabled) { transform: scale(1.1); }

.hud-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.hud-btn-active {

    background: rgba(34,197,94,0.75) !important;

    border-color: #86efac !important;

    box-shadow: 0 0 10px rgba(34,197,94,0.5);

}



.hud-badge {

    position: absolute;

    top: -4px; right: -4px;

    background: #ef4444;

    color: white;

    border-radius: 999px;

    font-size: 0.65rem;

    font-weight: 700;

    min-width: 16px;

    height: 16px;

    line-height: 16px;

    text-align: center;

    padding: 0 3px;

}



/* ===== Farm Scene (scrollable area) ===== */

.farm-scene {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: auto;

    position: relative;

    padding: 0 12px 8px;

    -webkit-overflow-scrolling: touch;

}



/* Fence shadow at the bottom of scene */

.farm-scene::after {

    content: "";

    position: absolute;

    bottom: 0; left: 0; right: 0;

    height: 40px;

    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.15));

    pointer-events: none;

}



/* ===== Farm Grid Wrapper (dirt area) ===== */

.farm-grid-wrapper {

    background: rgba(180,120,60,0.25);

    border: 3px solid rgba(139,90,43,0.4);

    border-radius: 12px;

    padding: 10px;

    box-shadow:

        0 4px 20px rgba(0,0,0,0.2),

        inset 0 0 30px rgba(0,0,0,0.1);

    margin: auto;

    max-width: 100%;

}



/* ===== Farm Grid ===== */

.farm-grid {

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 6px;

}



/* ===== Plot base ===== */

.plot {

    width: 70px;

    height: 70px;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    border: 2px solid transparent;

    transition: transform 0.12s, box-shadow 0.12s;

    position: relative;

    touch-action: none;

    -webkit-touch-callout: none;

}



.plot:hover { transform: scale(1.06); box-shadow: 0 3px 12px rgba(0,0,0,0.25); }



/* Empty plot — green grass tile */

.plot-empty {

    background: radial-gradient(ellipse at 40% 35%, #90ee90, #5da832);

    border-color: rgba(255,255,255,0.25);

    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2);

}



/* Tilled — rich brown dirt */

.plot-tilled {

    background: radial-gradient(ellipse at 40% 35%, #c8874a, #7b4a1e);

    border-color: rgba(255,255,255,0.15);

    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3);

}



/* Growing */

.plot-growing {

    background: radial-gradient(ellipse at 40% 35%, #b5873a, #7b4a1e);

    border-color: #86efac;

    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2);

}



/* Mature — golden glow + pulse */

.plot-mature {

    background: radial-gradient(ellipse at 40% 35%, #c8874a, #7b4a1e);

    border-color: #fbbf24;

    box-shadow: 0 0 12px rgba(251,191,36,0.6), inset 0 -3px 6px rgba(0,0,0,0.2);

    animation: mature-pulse 1.6s ease-in-out infinite;

}



@keyframes mature-pulse {

    0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.5), inset 0 -3px 6px rgba(0,0,0,0.2); }

    50%       { box-shadow: 0 0 20px rgba(251,191,36,0.9), inset 0 -3px 6px rgba(0,0,0,0.2); }

}



.plot-withered {

    background: radial-gradient(ellipse at 40% 35%, #9e9e9e, #616161);

    opacity: 0.7;

}



.plot-emoji {

    font-size: 2rem;

    line-height: 1;

    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));

}



.plot-progress {

    font-size: 0.58rem;

    color: #fff8e7;

    background: rgba(0,0,0,0.45);

    border-radius: 6px;

    padding: 1px 4px;

    margin-top: 2px;

    font-weight: 700;

    letter-spacing: 0.02em;

}



/* Drag-over highlight */

.plot.drag-over {

    border-color: #60a5fa !important;

    box-shadow: 0 0 0 3px rgba(96,165,250,0.5) !important;

    transform: scale(1.08) !important;

}



/* ===== Toast message ===== */

.farm-toast {

    position: fixed;

    top: 70px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 100;

    padding: 0.5rem 1.2rem;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 600;

    pointer-events: none;

    animation: toast-in 0.25s ease;

    white-space: normal;

    box-shadow: 0 4px 16px rgba(0,0,0,0.25);

    max-width: calc(100vw - 24px);

    text-align: center;

}

.farm-toast.success { background: #14532d; color: #bbf7d0; }

.farm-toast.error   { background: #7f1d1d; color: #fecaca; }

@keyframes toast-in {

    from { opacity: 0; top: 55px; }

    to   { opacity: 1; top: 70px; }

}



/* ===== Bottom Toolbar ===== */

.farm-toolbar {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 10px;

    background: linear-gradient(180deg, #c8a45a 0%, #a07832 100%);

    border-top: 3px solid #c8a45a;

    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}

.farm-toolbar::-webkit-scrollbar { display: none; }



/* Seed item */

.seed-item {

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: rgba(255,248,220,0.92);

    border: 2px solid #d4a843;

    border-radius: 12px;

    padding: 6px 10px;

    min-width: 58px;

    cursor: grab;

    text-decoration: none;

    transition: all 0.15s;

    position: relative;

    touch-action: none;

    -webkit-touch-callout: none;

}

.seed-item:hover         { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

.seed-item.selected      { background: #fde68a; border-color: #f59e0b; transform: translateY(-4px); box-shadow: 0 4px 16px rgba(245,158,11,0.5); }

.seed-item:active        { cursor: grabbing; }

.seed-item.shop-item     { background: rgba(255,255,255,0.85); min-width: 50px; }



.seed-emoji { font-size: 1.6rem; line-height: 1.1; }

.seed-name  { font-size: 0.62rem; color: #5a3600; font-weight: 700; margin-top: 1px; }

.seed-count { font-size: 0.58rem; color: #b45309; font-weight: 600; }



/* Till-all button in toolbar */

.toolbar-btn {

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border: 2px solid #d4a843;

    border-radius: 12px;

    padding: 6px 10px;

    min-width: 54px;

    cursor: pointer;

    font-size: 1.4rem;

    transition: all 0.15s;

}

.toolbar-btn span { font-size: 0.6rem; font-weight: 700; }

.toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

.toolbar-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }



.till-btn { background: rgba(180,100,30,0.85); color: #fff8e7; }



.toolbar-hint {

    font-size: 0.75rem;

    color: #fff8e7;

    padding: 0 0.5rem;

    opacity: 0.8;

}



/* ===== Touch drag ghost ===== */

.drag-ghost {

    position: fixed;

    width: 56px;

    height: 56px;

    font-size: 2.2rem;

    line-height: 56px;

    text-align: center;

    background: rgba(255,255,255,0.92);

    border: 2px solid #52b788;

    border-radius: 50%;

    box-shadow: 0 6px 20px rgba(0,0,0,0.35);

    pointer-events: none;

    z-index: 9999;

}



/* ===== Shop Page ===== */

.shop-page {

    max-width: 900px;

    margin: 0 auto;

    padding: 1rem;

}



.shop-header {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.5rem;

    flex-wrap: wrap;

}



.shop-header h1 {

    flex: 1; margin: 0;

    font-size: 1.6rem;

    color: #2d6a4f;

}



.back-btn {

    background: #e5e7eb;

    color: #374151;

    text-decoration: none;

    padding: 0.4rem 1rem;

    border-radius: 20px;

    font-size: 0.9rem;

    transition: background 0.2s;

}

.back-btn:hover { background: #d1d5db; color: #111; }



.shop-coins {

    font-size: 1.2rem;

    font-weight: bold;

    color: #d97706;

    background: #fef3c7;

    padding: 0.3rem 0.8rem;

    border-radius: 20px;

}



.shop-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 1rem;

}



.shop-card {

    background: white;

    border: 2px solid #e5e7eb;

    border-radius: 16px;

    padding: 1.25rem;

    text-align: center;

    transition: all 0.2s;

    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

}

.shop-card:hover { border-color: #52b788; box-shadow: 0 4px 16px rgba(82,183,136,0.2); transform: translateY(-2px); }



.shop-crop-emoji  { font-size: 3rem; margin-bottom: 0.3rem; }

.shop-crop-name   { font-size: 1.2rem; font-weight: bold; color: #1f2937; margin-bottom: 0.3rem; }

.shop-crop-stages { font-size: 1.2rem; margin-bottom: 0.3rem; letter-spacing: 4px; }

.shop-crop-time   { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.5rem; }

.shop-crop-price  { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; }

.buy-price        { color: #ef4444; font-weight: 600; font-size: 0.9rem; }

.sell-price       { color: #059669; font-size: 0.85rem; }

.shop-inventory   { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.75rem; background: #f9fafb; border-radius: 6px; padding: 0.2rem 0; }

.shop-buy-row     { display: flex; gap: 0.5rem; justify-content: center; }



.buy-btn {

    background: linear-gradient(135deg, #52b788, #2d6a4f);

    color: white;

    border: none;

    border-radius: 8px;

    padding: 0.4rem 0.8rem;

    font-size: 0.85rem;

    cursor: pointer;

    transition: all 0.15s;

    font-weight: 600;

}

.buy-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 2px 8px rgba(82,183,136,0.4); }

.buy-btn:disabled { background: #d1d5db; cursor: not-allowed; }



.shop-message { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.75rem; font-weight: 500; }

.shop-message.success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

.shop-message.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }



/* ===== Misc ===== */

.redirect-msg      { text-align: center; padding: 2rem; font-size: 1.1rem; color: #6b7280; }

.redirect-msg a    { color: #52b788; font-weight: bold; }



/* ===== Responsive ===== */

@media (max-width: 540px) {

    .farm-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }

    .plot { width: 58px; height: 58px; border-radius: 8px; }

    .plot-emoji { font-size: 1.65rem; }

}



@media (max-width: 400px) {

    .farm-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }

    .plot { width: 62px; height: 62px; }

    .plot-emoji { font-size: 1.5rem; }

}



/* ===== New: plot states ===== */

.plot-unwatered {

    background: #8B7355;

    border-color: #5a4a2a;

}

.plot-unwatered::after {

    content: '';

}

.plot-locked {

    background: #555 !important;

    border-color: #333 !important;

    cursor: not-allowed !important;

    opacity: 0.6;

}

.plot-water-badge {

    position: absolute;

    top: 2px; left: 2px;

    font-size: 14px;

    line-height: 1;

    filter: drop-shadow(0 1px 2px #000);

    animation: dropPulse 1.2s ease-in-out infinite;

}

.plot-fert-badge {

    position: absolute;

    top: 2px; right: 2px;

    font-size: 11px;

    line-height: 1;

}

@keyframes dropPulse {

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

    50%      { transform: scale(1.3); opacity:0.7; }

}



/* ===== HUD level bar ===== */

.hud-level {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    min-width: 120px;

    flex: 1 1 140px;

}

.level-label {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.8rem;

    color: #fff;

    text-shadow: 0 1px 2px rgba(0,0,0,.7);

}

.level-num {

    font-weight: 700;

    font-size: 0.9rem;

    color: #FFD700;

}

.xp-text {

    font-size: 0.7rem;

    opacity: 0.85;

}

.xp-bar-wrap {

    width: 110px;

    height: 8px;

    background: rgba(0,0,0,0.4);

    border-radius: 4px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.3);

}

.xp-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #FFD700, #FF8C00);

    border-radius: 4px;

    transition: width 0.4s ease;

}



/* ===== Toolbar new buttons ===== */

.water-btn {

    background: linear-gradient(135deg, #4fc3f7, #0288d1);

    border-color: #01579b;

    position: relative;

}

.water-btn:hover:not(:disabled) {

    background: linear-gradient(135deg, #81d4fa, #039be5);

}

.toolbar-badge {

    position: absolute;

    top: -4px; right: -4px;

    background: #e53935;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    border-radius: 50%;

    width: 16px; height: 16px;

    display: flex; align-items: center; justify-content: center;

    border: 1px solid #fff;

}

.fert-item {

    border-color: #4caf50 !important;

    background: rgba(76,175,80,0.15) !important;

}

.fert-item.selected {

    border-color: #2e7d32 !important;

    background: rgba(76,175,80,0.4) !important;

    box-shadow: 0 0 8px rgba(76,175,80,0.6) !important;

}



/* ===== Shop new styles ===== */

.shop-section-title {

    text-align: center;

    margin: 20px 0 10px;

    color: #5d4037;

    font-size: 1.2rem;

}

.shop-section-title small {

    font-size: 0.75rem;

    color: #8d6e63;

    font-weight: normal;

}

.shop-player-info {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 2px;

}

.shop-level {

    font-size: 0.85rem;

    color: #FFD700;

    font-weight: 700;

    text-shadow: 0 1px 2px rgba(0,0,0,.4);

}

.shop-card-locked {

    opacity: 0.55;

    filter: grayscale(0.5);

}

.shop-locked-label {

    font-size: 0.9rem;

    color: #999;

    margin: 8px 0;

    font-style: italic;

}

.shop-crop-xp {

    font-size: 0.78rem;

    color: #FFD700;

    font-weight: 600;

    margin: 3px 0;

}





/* ===== 8x8 grid responsive ===== */

.farm-grid {

    display: grid;

    grid-template-columns: repeat(8, minmax(38px, 62px));

    grid-template-rows: repeat(8, minmax(38px, 62px));

    gap: 12px;

    padding: 12px;

}

.plot {

    aspect-ratio: 1;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    cursor: pointer;

    border: 2px solid transparent;

    overflow: hidden;

    transition: transform 0.1s, box-shadow 0.15s;

    min-height: 38px;

}

.plot:active { transform: scale(0.94); }



/* ===== Large (2×2) plot ===== */

.plot-large {

    border-radius: 10px;

    z-index: 2;

    box-shadow: 0 4px 16px rgba(0,0,0,0.4);

    aspect-ratio: unset;

    width: 100%;

    height: 100%;

    align-self: stretch;

    justify-self: stretch;

}

.plot-large .plot-emoji {

    font-size: 3.2em;

    line-height: 1;

}

.plot-large .plot-progress { font-size: 0.78em; }

.plot-large .plot-water-badge { font-size: 1.2em; }

.plot-large .plot-fert-badge { font-size: 1.1em; bottom: 6px; right: 6px; }



/* ===== Plot Effects ===== */

@keyframes golden-pulse {

    0%, 100% { box-shadow: 0 0 8px 2px rgba(255,215,0,0.5), inset 0 0 8px rgba(255,215,0,0.15); }

    50%       { box-shadow: 0 0 18px 6px rgba(255,215,0,0.85), inset 0 0 14px rgba(255,215,0,0.3); }

}

@keyframes fast-pulse {

    0%, 100% { box-shadow: 0 0 8px 2px rgba(100,200,255,0.5); border-color: #60c8ff; }

    50%       { box-shadow: 0 0 20px 7px rgba(100,200,255,0.9); border-color: #a0e8ff; }

}

@keyframes mutation-shimmer {

    0%   { box-shadow: 0 0 10px 3px rgba(180,0,255,0.5); border-color: #c060ff; }

    33%  { box-shadow: 0 0 18px 6px rgba(255,80,180,0.7); border-color: #ff60cc; }

    66%  { box-shadow: 0 0 18px 6px rgba(0,255,160,0.6); border-color: #40ffb0; }

    100% { box-shadow: 0 0 10px 3px rgba(180,0,255,0.5); border-color: #c060ff; }

}

.effect-golden   { animation: golden-pulse 1.8s ease-in-out infinite; border-color: #ffd700 !important; background-image: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, transparent 60%) !important; }

.effect-fast     { animation: fast-pulse  1.0s ease-in-out infinite; border-color: #60c8ff !important; }

.effect-mutation { animation: mutation-shimmer 2.0s linear infinite; }



.plot-effect-badge {

    position: absolute;

    top: 2px;

    left: 3px;

    font-size: 0.75em;

    line-height: 1;

    filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));

    z-index: 3;

}

.effect-goldenharvest { color: #ffd700; }

.effect-fastgrowth    { color: #60c8ff; }

.effect-mutation      { color: #e040fb; }



/* ===== Plot tiers ===== */

.tier-red    { border-color: #c0392b !important; background-blend-mode: overlay; }

.tier-black  { border-color: #2c2c2c !important; }

.tier-gold   { border-color: #d4a017 !important; }

.tier-diamond{ border-color: #0099cc !important; }



.plot-empty.tier-red    { background: radial-gradient(ellipse at 40% 35%, #b34a1e, #7a2800) !important; }

.plot-empty.tier-black  { background: radial-gradient(ellipse at 40% 35%, #3a3a3a, #1a1a1a) !important; }

.plot-empty.tier-gold   { background: radial-gradient(ellipse at 40% 35%, #8a6500, #5a3d00) !important; }

.plot-empty.tier-diamond{ background: radial-gradient(ellipse at 40% 35%, #0055aa, #002255) !important; }



.plot-tilled.tier-red    { background: radial-gradient(ellipse at 40% 35%, #c45520, #8a3000) !important; }

.plot-tilled.tier-black  { background: radial-gradient(ellipse at 40% 35%, #484848, #252525) !important; }

.plot-tilled.tier-gold   { background: radial-gradient(ellipse at 40% 35%, #a07a00, #6a4a00) !important; }

.plot-tilled.tier-diamond{ background: radial-gradient(ellipse at 40% 35%, #0066cc, #003380) !important; }



.plot-growing.tier-red    { background: radial-gradient(ellipse at 40% 35%, #b55030, #7a3010) !important; }

.plot-growing.tier-black  { background: radial-gradient(ellipse at 40% 35%, #444, #202020) !important; }

.plot-growing.tier-gold   { background: radial-gradient(ellipse at 40% 35%, #996000, #604200) !important; }

.plot-growing.tier-diamond{ background: radial-gradient(ellipse at 40% 35%, #0055bb, #002266) !important; }



.plot-mature.tier-red    { background: radial-gradient(ellipse at 40% 35%, #b55030, #7a3010) !important; }

.plot-mature.tier-black  { background: radial-gradient(ellipse at 40% 35%, #444, #202020) !important; }

.plot-mature.tier-gold   { background: radial-gradient(ellipse at 40% 35%, #996000, #604200) !important; }

.plot-mature.tier-diamond{ background: radial-gradient(ellipse at 40% 35%, #0055bb, #002266) !important; }



.plot-tier-badge {

    position: absolute;

    bottom: 1px;

    right: 2px;

    font-size: 9px;

    line-height: 1;

    opacity: 0.85;

}

.plot-tier-hint {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    background: rgba(0,0,0,0.5);

    color: #FFD700;

    text-align: center;

    border-radius: 4px;

}

.lv-hint {

    font-size: 9px !important;

    color: #aaa !important;

}



/* ===== Upgrade/Expand toolbar buttons ===== */

.upgrade-btn {

    background: linear-gradient(135deg, #8e44ad, #6c3483);

    border-color: #5b2c6f;

}

.upgrade-btn:hover:not(:disabled) { background: linear-gradient(135deg, #a569bd, #7d3c98); }

.upgrade-btn.selected { box-shadow: 0 0 10px #e040fb, 0 0 4px #e040fb; border-color: #e040fb !important; }

.expand-btn {

    background: linear-gradient(135deg, #27ae60, #1e8449);

    border-color: #196f3d;

}

.expand-btn:hover:not(:disabled) { background: linear-gradient(135deg, #2ecc71, #27ae60); }

.toolbar-cost {

    display: block;

    font-size: 9px;

    color: #FFD700;

    line-height: 1;

    margin-top: 1px;

}



/* ===== Responsive smaller plots ===== */

@media (max-width: 520px) {

    .farm-grid {

        grid-template-columns: repeat(8, minmax(30px, 48px));

        gap: 5px;

        padding: 5px;

    }

    .plot {

        min-height: 30px;

        border-radius: 4px;

        font-size: 14px;

    }

    .plot-emoji { font-size: 16px !important; }

    .plot-progress { font-size: 7px !important; }

}



/* ===== Shop Game Layout ===== */

.shop-game {

    position: fixed;

    inset: 0;

    height: 100vh;

    height: 100dvh;

    display: flex;

    flex-direction: column;

    background: linear-gradient(170deg, #1a4d2e 0%, #2d7a4f 40%, #4a9e6b 100%);

    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;

    overflow: hidden;

    padding-bottom: env(safe-area-inset-bottom);

}



.shop-body {

    flex: 1;

    overflow-y: auto;

    padding: 10px 12px 20px;

    -webkit-overflow-scrolling: touch;

}

.shop-body::-webkit-scrollbar { width: 4px; }

.shop-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }

.shop-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }



.back-arrow {

    color: #FFD700;

    font-size: 1.1rem;

    text-decoration: none;

    padding: 0 6px;

    line-height: 1;

}



/* Section headers */

.shop-section-header {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 4px 4px;

    border-bottom: 2px solid rgba(255,255,255,0.25);

    margin-bottom: 8px;

    flex-wrap: wrap;

}

.shop-section-icon { font-size: 1.3rem; }

.shop-section-title {

    font-size: 1.05rem;

    font-weight: 700;

    color: #fff;

    text-shadow: 0 1px 3px rgba(0,0,0,.6);

}

.shop-section-sub {

    font-size: 0.7rem;

    color: rgba(255,255,255,0.7);

    margin-left: auto;

}



.shop-group-title {

    font-size: 0.8rem;

    font-weight: 600;

    color: #FFD700;

    padding: 6px 2px 4px;

    text-shadow: 0 1px 2px rgba(0,0,0,.5);

}



/* Cards row — horizontal scroll on mobile */

.shop-cards-row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 8px;

    padding-bottom: 4px;

}



/* Individual card */

.shop-card {

    background: rgba(255,255,255,0.12);

    border: 1.5px solid rgba(255,255,255,0.25);

    border-radius: 12px;

    padding: 8px 10px 10px;

    width: auto;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    backdrop-filter: blur(6px);

    transition: transform 0.1s, border-color 0.15s;

    position: relative;

}

.shop-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.5); }



.shop-card-locked {

    opacity: 0.55;

    filter: grayscale(0.4);

}

.shop-card-tier {

    border-color: rgba(255,215,0,0.5);

    background: rgba(255,215,0,0.08);

}

.shop-card-large {

    border-color: #56ab2f;

    background: rgba(86,171,47,0.12);

}

.large-badge {

    font-size: 0.6rem;

    background: rgba(86,171,47,0.8);

    color: #fff;

    border-radius: 4px;

    padding: 0 4px;

    position: absolute;

    top: 4px;

    right: 4px;

    font-weight: 700;

}



.shop-card-emoji   { font-size: 2rem; line-height: 1.1; }

.shop-card-name    { font-size: 0.8rem; font-weight: 700; color: #fff; text-align: center; }

.shop-card-stages  { display: flex; gap: 3px; font-size: 0.95rem; }

.shop-card-time    { font-size: 0.65rem; color: rgba(255,255,255,0.8); }

.shop-card-xp      { font-size: 0.7rem; color: #FFD700; font-weight: 600; }

.shop-card-desc    { font-size: 0.7rem; color: #81f4b8; text-align: center; }

.shop-card-price   { font-size: 0.7rem; color: rgba(255,255,255,0.85); text-align: center; }

.shop-card-qty     { font-size: 0.68rem; color: rgba(255,255,255,0.6); }



.shop-locked-badge {

    font-size: 0.72rem;

    color: #ffb74d;

    background: rgba(0,0,0,0.35);

    border-radius: 4px;

    padding: 2px 6px;

    margin-top: 2px;

}



.shop-card-btns {

    display: flex;

    gap: 4px;

    margin-top: 4px;

    width: 100%;

    flex-wrap: wrap;

}

.shop-buy-btn {

    flex: 1 1 48px;

    background: linear-gradient(135deg, #f39c12, #e67e22);

    border: 1px solid #d35400;

    border-radius: 6px;

    color: #fff;

    font-size: 0.75rem;

    font-weight: 700;

    padding: 4px 2px;

    cursor: pointer;

    transition: background 0.15s, transform 0.1s;

    min-width: 0;

}

.shop-buy-btn:hover:not(:disabled) {

    background: linear-gradient(135deg, #f5b041, #f39c12);

    transform: scale(1.05);

}

.shop-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.shop-buy-fill {

    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;

    border-color: #1e8449 !important;

    flex: 1 1 100%;

    width: 100%;

    padding-left: 6px;

    padding-right: 6px;

    white-space: nowrap;

}



/* Mobile: 2 cols when narrow */

@media (max-width: 420px) {

    .shop-card { min-width: unset; }

    .shop-section-sub { display: none; }

}



/* ===== Plot Info Panel ===== */

.plot-info-overlay {

    position: fixed;

    inset: 0;

    z-index: 199;

    background: transparent;

}



.plot-info-panel {

    position: fixed;

    bottom: 80px;

    right: 12px;

    z-index: 200;

    background: linear-gradient(160deg, rgba(30,20,10,0.97) 0%, rgba(20,12,4,0.97) 100%);

    border: 2px solid #c8a45a;

    border-radius: 14px;

    padding: 12px 14px 10px;

    min-width: 210px;

    max-width: 270px;

    box-shadow: 0 6px 28px rgba(0,0,0,0.65), 0 0 0 1px rgba(200,164,90,0.3);

    color: #f0e6c8;

    font-size: 0.82rem;

    animation: panel-pop 0.18s cubic-bezier(.34,1.56,.64,1) both;

}

@keyframes panel-pop {

    from { opacity:0; transform: scale(0.85) translateY(10px); }

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

}



.info-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 0.9rem;

    font-weight: 700;

    color: #FFD700;

    margin-bottom: 8px;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(200,164,90,0.35);

}

.info-close-btn {

    background: none;

    border: none;

    color: rgba(255,255,255,0.55);

    font-size: 0.85rem;

    cursor: pointer;

    padding: 0 2px;

    line-height: 1;

    transition: color 0.15s;

}

.info-close-btn:hover { color: #fff; }



.info-rows { display: flex; flex-direction: column; gap: 4px; }



.info-row {

    display: flex;

    align-items: flex-start;

    gap: 6px;

    line-height: 1.35;

}

.info-row small { font-size: 0.72em; opacity: 0.75; }

.info-label {

    flex-shrink: 0;

    width: 34px;

    color: rgba(255,255,255,0.55);

    font-size: 0.76rem;

}

.warn-row  { color: #60c8ff; font-style: italic; }

.ok-row    { color: #86efac; font-weight: 600; }

.effect-highlight-row .info-label { color: rgba(255,255,255,0.55); }

.effect-highlight-row span:last-child { font-weight: 700; }



.info-upgrade-btn {

    margin-top: 10px;

    width: 100%;

    background: linear-gradient(135deg, #8e44ad, #6c3483);

    border: 1.5px solid #a569bd;

    border-radius: 8px;

    color: #fff;

    font-size: 0.8rem;

    font-weight: 700;

    padding: 7px 8px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 4px;

    flex-wrap: wrap;

    transition: background 0.15s, transform 0.1s;

}

.info-upgrade-btn:hover:not(:disabled) {

    background: linear-gradient(135deg, #a569bd, #8e44ad);

    transform: scale(1.02);

}

.info-upgrade-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.upgrade-cost-badge {

    margin-left: auto;

    background: rgba(255,215,0,0.2);

    border: 1px solid rgba(255,215,0,0.5);

    border-radius: 4px;

    padding: 1px 5px;

    font-size: 0.75rem;

    color: #FFD700;

}

.upgrade-lv-req {

    width: 100%;

    font-size: 0.7rem;

    color: #ffb74d;

    font-style: italic;

}



@media (max-width: 520px) {

    .plot-info-panel {

        bottom: 70px;

        right: 8px;

        left: 8px;

        max-width: unset;

        min-width: unset;

    }

}



/* ===== Mobile refinements ===== */

.farm-grid {

    grid-template-columns: repeat(8, clamp(30px, 5.8vw, 62px));

    grid-template-rows: repeat(8, clamp(30px, 5.8vw, 62px));

    gap: clamp(4px, 1vw, 12px);

    padding: clamp(5px, 1.2vw, 12px);

}



.plot {

    width: auto;

    height: auto;

    min-width: 30px;

    min-height: 30px;

}



@media (max-width: 768px) {

    .farm-scene {

        --farm-mobile-gap: 4px;

        --farm-mobile-cell: clamp(32px, calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 28px - (var(--farm-mobile-gap) * 7)) / 8), 62px);

        padding: 0 4px 4px;

        align-items: center;

    }



    .farm-grid-wrapper {

        padding: 4px;

        border-width: 2px;

        width: fit-content;

    }



    .farm-grid {

        gap: var(--farm-mobile-gap);

        padding: 4px;

        grid-template-columns: repeat(8, var(--farm-mobile-cell));

        grid-template-rows: repeat(8, var(--farm-mobile-cell));

    }



    .login-card {

        padding: 2rem 1.25rem;

        border-radius: 16px;

    }



    .login-logo {

        font-size: 4rem;

    }



    .login-card h1 {

        font-size: 1.5rem;

    }



    .farm-hud-top {

        padding: 0.65rem;

    }



    .player-badge {

        flex: 1 1 calc(50% - 0.3rem);

    }



    .hud-level {

        order: 3;

        flex: 1 1 100%;

        align-items: stretch;

        min-width: 0;

    }



    .level-label {

        justify-content: space-between;

        flex-wrap: wrap;

    }



    .xp-bar-wrap {

        width: 100%;

    }



    .hud-actions {

        flex: 1 1 calc(50% - 0.3rem);

    }



    .shop-body {

        padding: 10px 10px 16px;

    }



    .shop-section-sub {

        width: 100%;

        margin-left: 0;

    }

}



@media (max-width: 520px) {

    .farm-scene {

        --farm-mobile-gap: 3px;

        --farm-mobile-cell: calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px - (var(--farm-mobile-gap) * 7)) / 8);

        padding-left: 2px;

        padding-right: 2px;

    }



    .farm-grid-wrapper {

        padding: 3px;

        border-width: 2px;

    }



    .farm-grid {

        gap: var(--farm-mobile-gap);

        padding: 3px;

        grid-template-columns: repeat(8, var(--farm-mobile-cell));

        grid-template-rows: repeat(8, var(--farm-mobile-cell));

    }



    .farm-hud-top {

        gap: 0.5rem;

    }



    .player-badge,

    .hud-actions {

        flex-basis: 100%;

    }



    .hud-actions {

        justify-content: space-between;

    }



    .hud-btn {

        width: 40px;

        height: 40px;

        font-size: 1.15rem;

    }



    .player-avatar {

        font-size: 1.4rem;

    }



    .player-name,

    .player-coins,

    .level-label,

    .xp-text {

        font-size: 0.72rem;

    }



    .level-num {

        font-size: 0.82rem;

    }



    .farm-toast {

        top: 76px;

        padding: 0.55rem 0.9rem;

        font-size: 0.82rem;

    }



    .shop-cards-row {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .shop-card {

        padding: 8px;

    }



    .shop-card-emoji {

        font-size: 1.75rem;

    }



.shop-card-stages {

        flex-wrap: wrap;

        justify-content: center;

    }

}



@media (max-width: 360px) {

    .shop-cards-row {

        grid-template-columns: minmax(0, 1fr);

    }



    .hud-actions {

        justify-content: flex-start;

    }

}



/* ===== Ranch ===== */

.ranch-game {

    background: linear-gradient(180deg, #88c070 0%, #75ad5d 45%, #5b9146 100%);

}



.ranch-scene {

    flex: 1;

    overflow-y: auto;

    padding: 12px;

}



.ranch-board {

    max-width: 980px;

    margin: 0 auto;

}



.ranch-summary {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 12px;

}



.ranch-summary-item {

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 999px;

    padding: 6px 10px;

    font-size: 0.78rem;

    font-weight: 700;

    backdrop-filter: blur(4px);

}



.ranch-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 12px;

}



.ranch-slot {

    position: relative;

    min-height: 160px;

    border: 2px solid rgba(255,255,255,0.25);

    border-radius: 18px;

    padding: 14px 12px;

    background: rgba(255,255,255,0.14);

    color: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 6px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.18);

    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;

    backdrop-filter: blur(4px);

}



.ranch-slot:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(0,0,0,0.22);

}



.ranch-slot.drag-over {

    border-color: #60a5fa !important;

    box-shadow: 0 0 0 3px rgba(96,165,250,0.45), 0 12px 28px rgba(0,0,0,0.22);

    transform: translateY(-2px) scale(1.02);

}



.ranch-slot-no {

    position: absolute;

    top: 10px;

    left: 10px;

    font-size: 0.7rem;

    color: rgba(255,255,255,0.75);

}



.ranch-slot-emoji {

    font-size: 3rem;

    line-height: 1;

}



.ranch-slot-name {

    font-size: 1rem;

    font-weight: 700;

}



.ranch-slot-desc {

    font-size: 0.78rem;

    color: rgba(255,255,255,0.84);

}



.ranch-slot-desc.ready {

    color: #fde68a;

    font-weight: 700;

}



.slot-empty {

    background: rgba(119, 85, 38, 0.24);

}



.slot-hungry {

    border-color: rgba(251, 191, 36, 0.55);

}



.slot-producing {

    border-color: rgba(96, 165, 250, 0.6);

}



.slot-ready {

    border-color: rgba(134, 239, 172, 0.75);

    box-shadow: 0 0 0 1px rgba(134,239,172,0.25), 0 10px 28px rgba(0,0,0,0.22);

}



.ranch-toolbar .seed-item {

    cursor: grab;

}



.animal-item {

    background: rgba(255, 248, 220, 0.96);

}



.feed-item {

    background: rgba(220, 252, 231, 0.95);

    border-color: #4caf50;

}



.animal-item:active,

.feed-item:active {

    cursor: grabbing;

}



@media (max-width: 640px) {

    .ranch-scene {

        padding: 8px;

    }



    .ranch-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;

    }



    .ranch-slot {

        min-height: 136px;

        padding: 12px 10px;

    }



    .ranch-slot-emoji {

        font-size: 2.4rem;

    }



    .ranch-slot-name {

        font-size: 0.9rem;

    }



    .ranch-slot-desc {

        font-size: 0.72rem;

    }

}



@media (max-width: 420px) {

    .ranch-grid {

        grid-template-columns: minmax(0, 1fr);

    }

}





.aquaculture-game {

    background: linear-gradient(180deg, #65b9ff 0%, #3d91da 40%, #2563eb 72%, #1d4ed8 100%);

}



.aquaculture-slot {

    background: rgba(255,255,255,0.12);

}



.aquaculture-slot.slot-empty {

    background: rgba(14, 116, 144, 0.34);

}



.aquaculture-slot.slot-hungry {

    border-color: rgba(253, 224, 71, 0.65);

}



.aquaculture-slot.slot-producing {

    border-color: rgba(125, 211, 252, 0.8);

}



.aquaculture-slot.slot-ready {

    border-color: rgba(167, 243, 208, 0.9);

    box-shadow: 0 0 0 1px rgba(167,243,208,0.25), 0 10px 28px rgba(0,0,0,0.22);

}



.aquatic-item {

    background: rgba(224, 242, 254, 0.96);

    border-color: #38bdf8;

}



.aquatic-feed-item {

    background: rgba(219, 234, 254, 0.95);

    border-color: #6366f1;

}