/* ============================================================
   farming.css — Lanna Farming Game  ·  Warm Earthy Edition
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0c0804; --bgd:#07050200;
  --soil:#2d1a08; --soill:#3e2410; --soild:#1a0f05;
  --amber:#f59e0b; --amberl:#fcd34d; --amberd:#d97706;
  --leaf:#84cc16; --leafd:#65a30d;
  --sky:#bae6fd; --cream:#fffbeb;
  --red:#ef4444; --green:#22c55e;
  --hud-h:48px; --nav-h:54px;
  --font-px:'Press Start 2P',monospace; --font-body:'Space Grotesk',sans-serif;
}
html,body{height:100%;background:var(--bg);color:var(--cream);font-family:var(--font-body);overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;}
.px{font-family:var(--font-px)!important}

/* ── HUD ── */
.rh{position:fixed;top:0;left:0;right:0;height:var(--hud-h);background:rgba(12,8,4,.97);border-bottom:2px solid rgba(245,158,11,.4);display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:100;gap:8px;box-shadow:0 2px 20px rgba(245,158,11,.12);}
.rh-back{color:var(--amberl);font-size:1rem;text-decoration:none;padding:6px;}
.rh-title{font-size:7px;color:var(--amberl);letter-spacing:2px;text-shadow:0 0 10px rgba(252,211,77,.4);}
.rh-coins{font-size:8px;color:var(--amberl);display:flex;align-items:center;gap:4px;}

/* ── Hero buff badge ── */
.rh-hero-buff{display:flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;background:rgba(245,158,11,.15);border:1px solid rgba(252,211,77,.35);flex-shrink:0;}
#rh-hero-emoji{font-size:.9rem;line-height:1;}
.rh-hero-buff-lbl{font-size:7px;color:var(--amberl);font-family:var(--font-px);white-space:nowrap;}

/* ── Layout ── */
.farm-wrap{position:fixed;top:var(--hud-h);bottom:var(--nav-h);left:0;right:0;display:flex;flex-direction:column;overflow-y:auto;padding:12px;background:radial-gradient(ellipse at 50% 0%, rgba(45,26,8,.6) 0%, var(--bg) 70%);}

/* ── Market banner ── */
.market-banner{
  background:linear-gradient(135deg,rgba(45,26,8,.95),rgba(30,16,4,.95));
  border:1px solid rgba(245,158,11,.25);
  border-radius:12px;padding:9px 14px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  box-shadow:0 2px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(252,211,77,.05);
}
.mb-title{font-size:6px;font-family:var(--font-px);color:var(--amberl);letter-spacing:1px;}
.mb-prices{display:flex;gap:10px;flex-wrap:wrap;}
.mb-price{font-size:.65rem;color:rgba(255,251,235,.7);}
.mb-price .up{color:var(--leaf);font-weight:700;}
.mb-price .dn{color:var(--red);font-weight:700;}

/* ── Farm grid ── */
.farm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;flex-shrink:0;}
.farm-plot{
  aspect-ratio:1;border-radius:14px;
  background:linear-gradient(180deg,var(--soill),var(--soild));
  border:2px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
}
/* soil texture overlay */
.farm-plot::before{
  content:'';position:absolute;inset:0;opacity:.4;
  background:repeating-linear-gradient(45deg,transparent 0,transparent 4px,rgba(0,0,0,.1) 4px,rgba(0,0,0,.1) 5px);
  border-radius:12px;pointer-events:none;
}
.farm-plot:hover{border-color:rgba(245,158,11,.4);transform:scale(1.04);box-shadow:0 4px 20px rgba(0,0,0,.3);}
.farm-plot.empty .fp-icon{font-size:1.8rem;opacity:.3;}
.farm-plot.planted .fp-icon{font-size:1.8rem;}
.farm-plot.growing .fp-icon{font-size:2rem;animation:grow .9s ease-in-out infinite alternate;}
.farm-plot.ready .fp-icon{font-size:2.2rem;}
.farm-plot.ready{border-color:rgba(132,204,22,.6);box-shadow:0 0 18px rgba(132,204,22,.2),0 0 40px rgba(132,204,22,.06);}
@keyframes grow{0%{transform:scale(1) rotate(-3deg)}30%{transform:scale(1.1) rotate(1deg)}60%{transform:scale(1.05) rotate(-1deg)}100%{transform:scale(1.14) rotate(2deg)}}
.fp-icon{transition:font-size .3s;position:relative;z-index:1;}
.fp-label{font-size:.52rem;color:rgba(255,251,235,.55);margin-top:4px;text-align:center;position:relative;z-index:1;}
.fp-timer{font-size:.5rem;color:var(--amberl);margin-top:1px;font-family:var(--font-px);position:relative;z-index:1;}
.fp-badge{position:absolute;top:5px;right:5px;background:var(--leaf);color:#fff;font-size:.44rem;padding:2px 5px;border-radius:4px;font-weight:700;z-index:2;box-shadow:0 0 8px rgba(132,204,22,.4);}

/* ── Locked plot ── */
.farm-plot.locked {
  border: 2px dashed rgba(245,158,11,.25);
  background: rgba(12,8,4,.6);
  cursor: pointer;
  transition: all .2s;
}
.farm-plot.locked:hover {
  border-color: rgba(245,158,11,.55);
  background: rgba(245,158,11,.06);
  transform: scale(1.04);
}
.fp-lock-icon {
  font-size: 1.5rem;
  opacity: .5;
}
.fp-unlock-cost {
  font-size: .55rem;
  color: var(--amberl);
  font-family: var(--font-px);
  margin-top: 2px;
}

/* Fertilizer hint on growing plots */
.fp-fert-hint {
  font-size: .5rem;
  color: rgba(132,204,22,.7);
  margin-top: 2px;
  font-family: var(--font-px);
}

/* ── Shared farm modal ── */
.farm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,5,2,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
  backdrop-filter: blur(5px);
  transition: opacity .25s, display .25s allow-discrete;
}
@starting-style { .farm-modal-overlay { opacity: 0; } }

.farm-modal {
  background: linear-gradient(180deg, rgba(30,16,4,.98), rgba(12,8,4,.98));
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 22px;
  padding: 28px 22px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 0 60px rgba(245,158,11,.1);
}
.fm-icon {
  font-size: 2.8rem;
  margin-bottom: 10px;
}
.fm-title {
  font-size: 9px;
  color: var(--amberl);
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.fm-crop-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 8px;
}
.fm-desc {
  font-size: .78rem;
  color: rgba(255,251,235,.6);
  line-height: 1.7;
  margin-bottom: 20px;
}
.fm-desc strong {
  color: var(--amberl);
}
.fm-btns {
  display: flex;
  gap: 8px;
}
.fm-btn-cancel {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: none;
  color: rgba(255,251,235,.5);
  cursor: pointer;
  font-size: .82rem;
  font-family: var(--font-body);
  transition: background .15s;
}
.fm-btn-cancel:hover { background: rgba(255,255,255,.1); }
.fm-btn-confirm {
  flex: 2;
  padding: 11px;
  border-radius: 10px;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  border: none;
  color: #0c0804;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s;
  box-shadow: 0 4px 16px rgba(245,158,11,.3);
}
.fm-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,.4); }
.fm-btn-confirm:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Crop selector modal ── */
.crop-modal-overlay{position:fixed;inset:0;background:rgba(7,5,2,.88);display:flex;align-items:flex-end;justify-content:center;z-index:500;padding:0 0 calc(var(--nav-h)+8px);backdrop-filter:blur(4px);transition:opacity .25s,display .25s allow-discrete;}
@starting-style{.crop-modal-overlay{opacity:0;}}
.crop-modal{
  background:linear-gradient(180deg,rgba(30,16,4,.98),rgba(12,8,4,.98));
  border:1px solid rgba(245,158,11,.28);
  border-radius:22px 22px 0 0;padding:22px 16px;
  width:100%;max-width:420px;
  box-shadow:0 -8px 40px rgba(245,158,11,.1);
}
.cm-title{font-size:8px;font-family:var(--font-px);color:var(--amberl);text-align:center;margin-bottom:16px;letter-spacing:1px;}
.crop-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.crop-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:12px;
  border:1px solid rgba(245,158,11,.1);
  background:rgba(45,26,8,.6);
  cursor:pointer;transition:all .16s;
}
.crop-row:hover{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);transform:translateX(3px);}
.cr-icon{font-size:1.7rem;flex-shrink:0;}
.cr-info{flex:1;}
.cr-name{font-size:.75rem;font-weight:700;color:var(--cream);}
.cr-detail{font-size:.6rem;color:rgba(255,251,235,.5);margin-top:2px;}
.cr-cost{font-size:.7rem;color:var(--amberl);font-weight:700;flex-shrink:0;}
.cm-cancel{width:100%;padding:11px;border-radius:10px;background:rgba(255,255,255,.05);border:none;color:rgba(255,251,235,.45);cursor:pointer;font-size:.8rem;font-family:var(--font-body);}

/* ── Harvest toast ── */
.harvest-toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#65a30d,#84cc16);color:#fff;padding:8px 20px;border-radius:20px;font-size:.75rem;font-weight:700;z-index:600;pointer-events:none;transition:opacity .4s;box-shadow:0 4px 16px rgba(132,204,22,.3);}
.harvest-toast.hide{opacity:0;}

/* ── Bottom nav ── */
.game-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(7,5,2,.98);border-top:1px solid rgba(245,158,11,.12);display:flex;align-items:center;justify-content:space-around;z-index:50;}
.gbn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(255,251,235,.32);font-size:1.1rem;text-decoration:none;transition:color .15s;}
.gbn span{font-size:.62rem;font-family:var(--font-body);}
.gbn:hover,.gbn-active{color:var(--amberl);}
button.gbn{background:none;border:none;cursor:pointer;}
.ghp-backdrop{position:fixed;inset:0;z-index:200;background:rgba(7,5,2,.72);backdrop-filter:blur(6px);}
.games-hub-popup{position:fixed;bottom:calc(var(--nav-h)+8px);left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));background:rgba(12,8,4,.98);border:1px solid rgba(245,158,11,.28);border-radius:18px;padding:16px;z-index:201;box-shadow:0 -4px 40px rgba(245,158,11,.1);}
.ghp-title{font-size:8px;color:var(--amberl);text-align:center;margin-bottom:14px;letter-spacing:2px;font-family:var(--font-px);}
.ghp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ghp-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 6px;border-radius:10px;background:rgba(245,158,11,.05);border:1px solid rgba(245,158,11,.1);color:rgba(255,251,235,.65);text-decoration:none;font-size:1.4rem;transition:all .15s;}
.ghp-item span{font-size:.52rem;font-family:var(--font-body);color:rgba(255,251,235,.5);}
.ghp-item:hover,.ghp-item.ghp-active{background:rgba(245,158,11,.15);border-color:rgba(252,211,77,.4);color:var(--amberl);}
.ghp-close{display:block;width:100%;margin-top:12px;padding:8px;background:rgba(255,255,255,.05);border:none;border-radius:8px;color:rgba(255,251,235,.4);cursor:pointer;font-size:.75rem;font-family:var(--font-body);}
.game-login-wall{position:fixed;inset:0;background:rgba(7,5,2,.97);display:flex;align-items:center;justify-content:center;z-index:999;}
.glw-card{text-align:center;padding:32px 24px;background:rgba(12,8,4,.9);border:1px solid rgba(245,158,11,.28);border-radius:22px;max-width:280px;}
.glw-icon{font-size:3rem;margin-bottom:12px;}
.glw-title{font-size:10px;color:var(--amberl);line-height:1.8;margin-bottom:10px;font-family:var(--font-px);}
.glw-sub{font-size:.8rem;color:rgba(255,251,235,.5);margin-bottom:20px;}
.glw-btn{display:inline-block;padding:12px 28px;background:linear-gradient(135deg,#d97706,#f59e0b);color:#0c0804;border-radius:10px;font-weight:700;text-decoration:none;font-size:.85rem;}