/* ==========================================================
   Otter Farm — Interactive CSS Scene
   Fully drawn with CSS: animated clouds, bobbing boat,
   rolling waves, smooth gradient transitions between
   farm ↔ beach ↔ sea (no hard boundary lines).
   ========================================================== */

/* ---- Wrapper ---- */
.farm-wrapper {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.3);
}

/* ---- HUD ---- */
.farm-hud {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(15,118,110,.88), rgba(5,46,22,.88));
    backdrop-filter: blur(6px);
    position: relative; z-index: 50;
}
.farm-hud-left {
    font-weight: 700; font-size: 1.1rem;
    color: #fffbe6; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.farm-hud-icon { margin-right: 6px; }
.farm-gem-badge {
    display: flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff; padding: 4px 14px; border-radius: 20px;
    font-weight: 600; font-size: .95rem;
    box-shadow: 0 2px 8px rgba(109,40,217,.4);
}

/* ==================================================================
   SCENE — Main viewport
   ================================================================== */
.farm-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(180deg,
        #7dd3fc 0%, #38bdf8 20%, #22a9e8 35%,
        #0ea5e9 50%, #0284c7 70%, #0369a1 100%);
    overflow: hidden;
    user-select: none;
}

/* ==================================================================
   SKY — Sun, rays, clouds
   ================================================================== */
.scene-sun {
    position: absolute;
    top: 3%; left: 6%;
    width: 11%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #fffde4, #fcd34d 40%, #f59e0b 85%);
    box-shadow:
        0 0 40px 15px rgba(250,204,21,.35),
        0 0 80px 30px rgba(250,204,21,.15),
        0 0 120px 60px rgba(250,204,21,.06);
    z-index: 2;
    animation: sun-glow 4s ease-in-out infinite alternate;
}
@keyframes sun-glow {
    to { box-shadow:
        0 0 50px 20px rgba(250,204,21,.45),
        0 0 100px 40px rgba(250,204,21,.2),
        0 0 140px 70px rgba(250,204,21,.08);
    }
}
.sun-rays {
    position: absolute; inset: -50%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(255,255,200,.07) 4deg, transparent 8deg);
    animation: rays-spin 30s linear infinite;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }

/* Clouds */
.scene-cloud {
    position: absolute; left: -15%;
    border-radius: 200px;
    background: rgba(255,255,255,.92);
    z-index: 3;
}
.scene-cloud::before, .scene-cloud::after {
    content: ''; position: absolute;
    background: inherit; border-radius: 50%;
}
.sc-1 { top: 8%; width: 13%; height: 5.5%;
    animation: cloud-move 60s linear infinite; animation-delay: -15s; }
.sc-1::before { width: 55%; height: 150%; bottom: 18%; left: 12%; }
.sc-1::after  { width: 42%; height: 125%; bottom: 10%; right: 10%; }

.sc-2 { top: 15%; width: 10%; height: 4%;
    animation: cloud-move 80s linear infinite; animation-delay: -35s; opacity: .78; }
.sc-2::before { width: 50%; height: 140%; bottom: 15%; left: 18%; }
.sc-2::after  { width: 38%; height: 110%; bottom: 10%; right: 15%; }

.sc-3 { top: 5%; width: 9%; height: 3.6%;
    animation: cloud-move 100s linear infinite; animation-delay: -65s; opacity: .6; }
.sc-3::before { width: 48%; height: 130%; bottom: 12%; left: 20%; }
.sc-3::after  { width: 35%; height: 105%; bottom: 8%; right: 18%; }

@keyframes cloud-move { to { transform: translateX(130vw); } }

/* ==================================================================
   LANDSCAPE — Distant green hills
   ================================================================== */
.scene-hill { position: absolute; border-radius: 50%; z-index: 3; }
.hill-far {
    width: 55%; height: 36%;
    top: 20%; right: -8%;
    background: linear-gradient(180deg, #16a34a 0%, #15803d 60%, #166534);
}
.hill-mid {
    width: 42%; height: 28%;
    top: 26%; right: 12%;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 60%, #15803d);
}
.hill-near {
    width: 48%; height: 30%;
    top: 25%; left: -8%;
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 60%, #16a34a);
}

/* ==================================================================
   WATER — Sea, shimmer, waves, shore foam
   ================================================================== */
.scene-sea {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 56%;
    background: linear-gradient(180deg,
        #0ea5e9 0%, #0284c7 40%, #0369a1 70%, #075985 100%);
    z-index: 4;
}
.sea-shine {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(115deg,
        transparent 0%, rgba(255,255,255,.04) 2%, transparent 4%);
    background-size: 35px 100%;
    animation: shimmer 10s linear infinite;
}
@keyframes shimmer { to { background-position: 250px 0; } }

.scene-wave {
    position: absolute;
    height: 4px; border-radius: 50%;
    background: rgba(255,255,255,.3);
    z-index: 5;
}
.wave-1 { bottom: 36%; left: 42%; width: 54%;
    animation: wave-drift 6s ease-in-out infinite; }
.wave-2 { bottom: 26%; left: 50%; width: 46%; opacity: .65;
    animation: wave-drift 8s ease-in-out infinite; animation-delay: -3s; }
.wave-3 { bottom: 18%; left: 35%; width: 60%; opacity: .45;
    animation: wave-drift 10s ease-in-out infinite; animation-delay: -6s; }
@keyframes wave-drift {
    0%, 100% { transform: translateX(0) scaleX(1); opacity: .2; }
    50%      { transform: translateX(-12px) scaleX(1.06); opacity: .45; }
}

.scene-shore {
    position: absolute;
    bottom: 30%; left: 8%; width: 35%; height: 3px;
    background: rgba(255,255,255,.35);
    border-radius: 50%; filter: blur(1px);
    z-index: 6;
    animation: shore-wash 4s ease-in-out infinite;
}
@keyframes shore-wash {
    0%, 100% { transform: scaleX(1) translateY(0); opacity: .25; }
    50%      { transform: scaleX(1.06) translateY(-3px); opacity: .55; }
}

/* ==================================================================
   BEACH — Sand (curved shape, smooth edges)
   ================================================================== */
.scene-beach {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 36%;
    background: linear-gradient(160deg,
        #daa06d 0%, #e8c97d 30%, #d4a76a 65%, rgba(196,154,98,.3) 100%);
    z-index: 5;
    border-radius: 0 55% 0 0 / 0 80% 0 0;
}
.scene-beach::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 25% 80%,
        rgba(255,255,255,.08) 0%, transparent 60%);
    pointer-events: none;
}

/* ==================================================================
   GRASS — Farm land (curved boundary, fades into sand)
   ================================================================== */
.scene-grass {
    position: absolute;
    bottom: 10%; left: 0;
    width: 56%; height: 62%;
    background: linear-gradient(180deg,
        #4ade80 0%, #22c55e 50%, #16a34a 85%, #15803d 100%);
    z-index: 7;
    border-radius: 0 50% 22% 0 / 0 38% 16% 0;
    box-shadow: 8px 4px 20px rgba(0,0,0,.15);
}
.grass-detail {
    position: absolute; inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(95deg,
        transparent 0px, rgba(255,255,255,.025) 2px, transparent 5px);
}
.scene-grass::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 18%; border-radius: inherit;
    background: linear-gradient(180deg, transparent 0%, rgba(218,160,109,.25) 100%);
    pointer-events: none;
}

/* ==================================================================
   FENCE — Wooden rails around farm
   ================================================================== */
.scene-fence {
    position: absolute;
    top: 30%; left: 2%; width: 40%; height: 8px;
    z-index: 8;
    background: linear-gradient(180deg, #b8860b, #8B6914);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.scene-fence::before {
    content: '';
    position: absolute; top: -5px; left: 0; right: 0; bottom: -4px;
    background: repeating-linear-gradient(90deg,
        #a67c2e 0px, #a67c2e 4px, transparent 4px, transparent 20px);
}
.scene-fence-l {
    position: absolute;
    top: 30%; left: 1.5%; width: 6px; height: 36%;
    z-index: 8;
    background: linear-gradient(90deg, #b8860b, #8B6914);
    border-radius: 2px;
    box-shadow: 2px 0 4px rgba(0,0,0,.15);
}
.scene-fence-l::before {
    content: '';
    position: absolute; top: 0; left: -4px; right: -4px; bottom: 0;
    background: repeating-linear-gradient(180deg,
        #a67c2e 0px, #a67c2e 4px, transparent 4px, transparent 16px);
}

/* ==================================================================
   PIER — Wooden dock extending into the sea
   ================================================================== */
.scene-pier {
    position: absolute;
    top: 60%; left: 44%;
    width: 26%; height: 5.5%;
    z-index: 9;
    background: repeating-linear-gradient(90deg,
        #b8860b 0px, #b8860b 14px, #8B6914 14px, #8B6914 16px);
    border-radius: 3px;
    box-shadow: 0 5px 12px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.15);
}
.scene-pier::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: rgba(255,255,255,.12);
    border-radius: 3px 3px 0 0;
}
.scene-pier::after {
    content: '';
    position: absolute;
    bottom: -13px; left: 22%;
    width: 5px; height: 15px;
    background: #654321;
    border-radius: 0 0 2px 2px;
    box-shadow: 28px 0 0 #654321, 58px 0 0 #654321, 88px 0 0 #654321;
}

/* ==================================================================
   BARN — Red barn on the pier
   ================================================================== */
.scene-barn {
    position: absolute;
    top: 37%; left: 56%;
    width: 15%; height: 25%;
    z-index: 10;
}
.barn-roof {
    position: absolute; top: 0; left: -8%;
    width: 116%; height: 42%;
    background: linear-gradient(180deg, #b45309 0%, #92400e 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    z-index: 2;
    filter: drop-shadow(0 -2px 3px rgba(0,0,0,.12));
}
.barn-roof::after {
    content: '';
    position: absolute; top: -3px; left: 44%;
    width: 12%; height: 18%;
    background: #ef4444;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.barn-body {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 62%;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    z-index: 1;
    border: 1px solid rgba(255,255,255,.08);
}
.barn-door {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 28%; height: 52%;
    background: linear-gradient(180deg, #78350f, #654321);
    border-radius: 40% 40% 0 0 / 25% 25% 0 0;
}
.barn-window {
    position: absolute; top: 16%;
    width: 18%; aspect-ratio: 1;
    background: radial-gradient(circle, #fef9c3, #fde68a);
    border: 2px solid #fff;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(253,224,71,.5);
}
.bw-1 { left: 12%; }
.bw-2 { right: 12%; }

/* ==================================================================
   BOAT — Fishing boat with bobbing animation
   ================================================================== */
.scene-boat {
    position: absolute;
    top: 51%; left: 39%;
    width: 12%; height: 15%;
    z-index: 11;
    animation: boat-bob 3.5s ease-in-out infinite;
    transform-origin: center 70%;
}
@keyframes boat-bob {
    0%, 100% { transform: translateY(0px) rotate(-1.5deg); }
    50%      { transform: translateY(-7px) rotate(1.5deg); }
}
.boat-hull {
    position: absolute; bottom: 8%; left: 5%;
    width: 90%; height: 30%;
    background: linear-gradient(180deg, #1e3a5f, #2d5a8a);
    border-radius: 5px 5px 42% 42%;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.boat-hull::after {
    content: '';
    position: absolute; top: 35%; left: 6%; right: 6%;
    height: 3px;
    background: #f59e0b; border-radius: 2px;
}
.boat-cabin {
    position: absolute; bottom: 36%; left: 22%;
    width: 48%; height: 30%;
    background: linear-gradient(180deg, #f8fafc, #e2e8f0);
    border: 2px solid #94a3b8;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -2px 6px rgba(0,0,0,.1);
}
.boat-cabin::after {
    content: '';
    position: absolute; top: 18%; left: 12%;
    width: 30%; height: 42%;
    background: #7dd3fc;
    border: 1px solid #64748b;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(125,211,252,.4);
}
.boat-mast {
    position: absolute; bottom: 60%; left: 44%;
    width: 3px; height: 36%;
    background: linear-gradient(180deg, #94a3b8, #64748b);
    border-radius: 2px 2px 0 0;
}
.boat-flag {
    position: absolute; bottom: 82%; left: 40%;
    font-size: clamp(.5rem, 1.2vw, .9rem);
    animation: flag-wave .8s ease-in-out infinite alternate;
}
@keyframes flag-wave { 0% { transform: rotate(-6deg); } 100% { transform: rotate(6deg); } }

.scene-boat::after {
    content: '';
    position: absolute; bottom: 2%; left: 12%; right: 12%;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 50%; filter: blur(1px);
}

/* ==================================================================
   DECORATIONS — Palms, starfish, shells
   ================================================================== */
.scene-palm {
    position: absolute; z-index: 12;
    font-size: clamp(2rem, 5vw, 3.5rem);
    filter: drop-shadow(3px 5px 4px rgba(0,0,0,.25));
    line-height: 1;
}
.palm-l { bottom: 3%; left: 24%; transform: scaleX(-1); }
.palm-r { bottom: 1%; left: 50%; }

.scene-decor {
    position: absolute; z-index: 6;
    font-size: clamp(.6rem, 1.4vw, 1rem);
    opacity: .8; line-height: 1;
}
.deco-star  { bottom: 5%; left: 36%; }
.deco-shell { bottom: 7%; left: 43%; }

/* ==================================================================
   PLOTS — Interactive 4×5 grid
   ================================================================== */
.farm-plots-overlay {
    position: absolute;
    top: 32%; left: 4%;
    width: 40%; height: 44%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4%;
    z-index: 20;
}

.farm-plot {
    position: relative;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
    background: linear-gradient(145deg, #92552a, #7a4422);
    border: 2px solid rgba(139,85,30,.5);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.18);
}
.farm-plot:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.28);
}
.farm-plot:active { transform: scale(.94); }

/* Empty */
.plot-empty {
    background: linear-gradient(145deg, rgba(139,105,20,.5), rgba(107,79,16,.5));
    border: 2px dashed rgba(255,255,255,.22);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
}
.plot-empty::after {
    content: '+';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.4);
    font-size: clamp(.8rem, 2vw, 1.3rem); font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Growing */
.plot-growing {
    border-color: rgba(74,222,128,.5);
    background: linear-gradient(145deg, #6b4f10, #5a4210);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 0 8px rgba(74,222,128,.15);
}

/* Mature */
.plot-mature {
    border-color: #fbbf24;
    background: linear-gradient(145deg, #7a5c1a, #6b4f10);
    animation: plot-glow 1.2s ease-in-out infinite alternate;
}
@keyframes plot-glow {
    0%   { box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 0 6px rgba(251,191,36,.2); }
    100% { box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 0 18px rgba(251,191,36,.55), 0 0 4px rgba(251,191,36,.3); }
}

/* Crop icon */
.plot-crop {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(.85rem, 2.5vw, 1.7rem);
    z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.plot-mature .plot-crop { animation: crop-bounce 1s ease-in-out infinite; }
@keyframes crop-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Progress bar */
.plot-progress {
    position: absolute; bottom: 3px; left: 4px; right: 4px;
    height: 3px;
    background: rgba(0,0,0,.4);
    border-radius: 2px; z-index: 3; overflow: hidden;
}
.plot-bar {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 2px;
    transition: width .5s linear;
}
.plot-mature .plot-bar { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.plot-empty .plot-progress { display: none; }

/* Timer */
.plot-timer {
    position: absolute; top: 2px; right: 3px;
    font-size: clamp(.4rem, .85vw, .58rem);
    color: #fff; font-weight: 700; z-index: 3;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    line-height: 1;
}
.plot-mature .plot-timer { color: #fde047; }
.plot-empty .plot-timer { display: none; }

/* ==================================================================
   FISHING — UI overlay near the boat
   ================================================================== */
.farm-fish-overlay {
    position: absolute;
    bottom: 14%; right: 6%;
    z-index: 20;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.farm-fish-btn {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff; border: none;
    padding: 10px 24px; border-radius: 24px;
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(249,115,22,.5);
    transition: transform .15s, box-shadow .15s;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.farm-fish-btn:hover:not([disabled]) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,115,22,.6);
}
.farm-fish-btn:active:not([disabled]) { transform: scale(.95); }
.farm-fish-btn[disabled] { opacity: .45; cursor: not-allowed; }
.fb-icon { margin-right: 4px; }
.farm-fish-info {
    color: #fff; font-size: .8rem; font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    background: rgba(0,0,0,.35); padding: 2px 10px; border-radius: 10px;
}
.farm-fish-timer {
    color: #fde047; font-size: .75rem; font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    background: rgba(0,0,0,.35); padding: 2px 10px; border-radius: 10px;
}

/* ==================================================================
   TOAST
   ================================================================== */
.farm-toast {
    position: absolute;
    bottom: 16px; left: 50%; transform: translateX(-50%);
    background: rgba(15,23,42,.88);
    color: #e2e8f0;
    padding: 8px 20px; border-radius: 20px;
    font-size: .9rem; font-weight: 500;
    z-index: 30; pointer-events: none;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    white-space: nowrap;
}
.toast-fade { animation: toast-anim 2.5s ease forwards; }
@keyframes toast-anim {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ==================================================================
   AUTH NOTICE
   ================================================================== */
.farm-auth-notice {
    text-align: center; padding: 10px;
    color: #fbbf24; font-size: .85rem;
    background: rgba(0,0,0,.25);
}
.farm-auth-notice a { color: #38bdf8; text-decoration: underline; }

/* ==================================================================
   ANIMATIONS — Plant & Harvest
   ================================================================== */
.plot-plant-anim .plot-crop {
    animation: plant-drop .5s cubic-bezier(.34,1.56,.64,1) forwards !important;
}
@keyframes plant-drop {
    0%   { transform: translateY(-24px) scale(.3); opacity: 0; }
    60%  { transform: translateY(3px) scale(1.15); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.plot-harvest-anim .plot-crop {
    animation: harvest-pop .6s ease forwards !important;
}
@keyframes harvest-pop {
    0%   { transform: scale(1); opacity: 1; }
    40%  { transform: scale(1.5) translateY(-12px); opacity: 1; }
    100% { transform: scale(.4) translateY(-30px); opacity: 0; }
}

/* Gem float */
.farm-gem-float {
    position: fixed; z-index: 10000;
    font-size: 1.1rem; font-weight: 700;
    color: #fde047;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
    pointer-events: none;
    transform: translateX(-50%);
    transition: transform .9s ease-out, opacity .9s ease-out;
    opacity: 1;
}
.farm-gem-float.float-up {
    transform: translateX(-50%) translateY(-70px);
    opacity: 0;
}

/* ==================================================================
   MODALS — Crop picker & Fish result
   ================================================================== */
.crop-picker-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.crop-picker {
    background: linear-gradient(145deg, #1e3a2e, #162b22);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px; padding: 26px;
    max-width: 380px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: modal-in .25s ease;
}
@keyframes modal-in { 0% { transform: scale(.9); opacity: 0; } }
.crop-picker-title {
    text-align: center; color: #e2e8f0;
    font-size: 1.2rem; margin: 0 0 16px;
}
.crop-picker-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.crop-option {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 8px; border-radius: 14px;
    border: 2px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    cursor: pointer; color: #e2e8f0;
    transition: border-color .15s, background .15s, transform .15s;
}
.crop-option:hover {
    border-color: #4ade80;
    background: rgba(74,222,128,.12);
    transform: translateY(-2px);
}
.co-icon { font-size: 2.2rem; }
.co-name { font-weight: 600; font-size: .95rem; }
.co-time { font-size: .75rem; color: #94a3b8; }
.co-gems { font-size: .85rem; color: #fde047; font-weight: 600; }
.crop-picker-cancel {
    display: block; width: 100%; margin-top: 12px;
    padding: 10px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent; color: #94a3b8;
    cursor: pointer; font-size: .9rem;
    transition: background .15s;
}
.crop-picker-cancel:hover { background: rgba(255,255,255,.06); }

.fish-result-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.fish-result {
    background: linear-gradient(145deg, #1e3a2e, #162b22);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px; padding: 34px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: modal-in .35s cubic-bezier(.34,1.56,.64,1);
}
.fish-result-catch {
    font-size: 3.8rem; margin-bottom: 8px;
    animation: fish-wobble .6s ease;
}
@keyframes fish-wobble {
    0% { transform: rotate(0); } 25% { transform: rotate(-15deg); }
    50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}
.fish-result-text {
    color: #fde047; font-size: 1.35rem; font-weight: 700; margin-bottom: 20px;
}
.fish-result-ok {
    background: linear-gradient(135deg, #4ade80, #16a34a);
    color: #fff; border: none;
    padding: 10px 36px; border-radius: 24px;
    font-size: 1rem; font-weight: 700;
    cursor: pointer; transition: transform .15s;
}
.fish-result-ok:hover { transform: scale(1.06); }

/* ==================================================================
   FEATURED CARD (arcade page)
   ================================================================== */
.farm-featured {
    grid-column: 1 / -1;
    margin-bottom: 10px;
}
.farm-featured-card {
    display: flex; border-radius: 16px; overflow: hidden;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.farm-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.farm-featured-banner {
    flex: 0 0 280px;
    background: url('../assets/Otter-Farm.png') center / cover no-repeat;
    position: relative; overflow: hidden; min-height: 180px;
}
.farm-featured-badge {
    position: absolute; top: 10px; left: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; padding: 4px 10px; border-radius: 10px;
    font-size: .75rem; font-weight: 700; z-index: 2;
}
.farm-featured-scene { display: none; }
.farm-featured-body {
    flex: 1; padding: 22px 26px;
    display: flex; flex-direction: column; justify-content: center;
}
.farm-featured-title {
    font-size: 1.5rem; font-weight: 800; margin: 0 0 8px; color: #e2e8f0;
}
.farm-featured-desc {
    color: #94a3b8; font-size: .95rem; line-height: 1.5; margin: 0 0 12px;
}
.farm-featured-meta {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.farm-featured-play {
    width: fit-content;
    background: linear-gradient(135deg, #4ade80, #16a34a) !important;
    font-size: 1rem;
}

/* ==================================================================
   LIGHT THEME
   ================================================================== */
html[data-theme="light"] .farm-wrapper { box-shadow: 0 8px 40px rgba(0,0,0,.12); }
html[data-theme="light"] .farm-hud { background: linear-gradient(135deg, rgba(15,118,110,.7), rgba(5,46,22,.7)); }
html[data-theme="light"] .crop-picker,
html[data-theme="light"] .fish-result {
    background: #fff; border-color: rgba(0,0,0,.1);
}
html[data-theme="light"] .crop-picker-title { color: #1e293b; }
html[data-theme="light"] .crop-option { color: #1e293b; border-color: rgba(0,0,0,.1); }
html[data-theme="light"] .crop-picker-cancel { color: #64748b; border-color: rgba(0,0,0,.1); }
html[data-theme="light"] .farm-featured-title { color: #1e293b; }
html[data-theme="light"] .farm-featured-desc { color: #475569; }
html[data-theme="light"] .farm-toast { background: rgba(255,255,255,.92); color: #1e293b; }

/* ==================================================================
   RESPONSIVE — Mobile
   ================================================================== */
@media (max-width: 640px) {
    .farm-scene { aspect-ratio: 10 / 9; }
    .farm-plots-overlay {
        top: 24%; left: 3%;
        width: 48%; height: 38%;
        gap: 3%;
    }
    .scene-grass { width: 60%; height: 58%; }
    .scene-barn { top: 32%; left: 50%; width: 18%; height: 22%; }
    .scene-boat { top: 46%; left: 34%; width: 14%; height: 14%; }
    .scene-pier { top: 55%; left: 40%; width: 28%; }
    .farm-fish-overlay { bottom: 8%; right: 4%; }
    .farm-fish-btn { font-size: .85rem; padding: 8px 16px; }
    .scene-palm { font-size: clamp(1.5rem, 4vw, 2.5rem); }
    .scene-fence { top: 24%; width: 44%; }
    .scene-fence-l { top: 24%; height: 32%; }
    .farm-featured-card { flex-direction: column; }
    .farm-featured-banner { flex: none; min-height: 140px; }
}