:root{
  --sky:#FFF6E0;
  --sky-2:#FFEBC2;
  --field:#6FA84F;
  --field-dark:#3F7A32;
  --field-light:#A9D687;
  --soil:#8A5A34;
  --soil-dark:#5C3A20;
  --gold:#F2A93B;
  --gold-dark:#C97F1E;
  --terracotta:#C1543B;
  --ink:#3B2A18;
  --ink-soft:#6B5640;
  --cream:#FFFBF2;
  --card:#FFFDF7;
  --line:#E8D9B8;
  --shadow: 0 4px 0 rgba(59,42,24,0.18);
  --radius: 16px;
  font-family:'Nunito',sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 15% 0%, #FFFCF4 0%, transparent 45%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 220px, #F4EBD4 220px, #F4EBD4 100%);
  color:var(--ink);
  min-height:100vh;
  padding-bottom:100px;
}

h1,h2,h3{font-family:'Baloo 2',cursive; margin:0; color:var(--ink);}

button{font-family:inherit; cursor:pointer; border:none;}
input{font-family:inherit;}

.hidden{display:none !important;}

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(59,42,24,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index:200; padding:20px;
}
.modal-card{
  background:var(--card); border-radius:24px; padding:32px 28px;
  max-width:400px; width:100%; text-align:center;
  box-shadow:0 10px 0 rgba(59,42,24,0.2), 0 20px 40px rgba(0,0,0,0.25);
  border:3px solid var(--gold);
}
.setup-emoji{font-size:56px; margin-bottom:6px;}
.setup-card h1{font-size:22px; margin-bottom:6px;}
.setup-sub{color:var(--ink-soft); font-weight:600; margin-bottom:18px; font-size:14px;}
#farmNameInput{
  width:100%; padding:12px 14px; border-radius:12px; border:2px solid var(--line);
  font-size:16px; font-weight:700; text-align:center; margin-bottom:14px; color:var(--ink);
  background:#fff;
}
#farmNameInput:focus{outline:none; border-color:var(--gold);}
.setup-emoji-row{display:flex; justify-content:center; gap:10px; margin-bottom:20px;}
.icon-pick{
  font-size:26px; padding:8px 10px; border-radius:12px; background:#F4EBD4;
  border:2px solid transparent; transition:.15s;
}
.icon-pick.sel{border-color:var(--gold); background:#FFEBC2; transform:scale(1.1);}

.btn-primary{
  background:var(--terracotta); color:#fff; font-weight:800; font-family:'Baloo 2',cursive;
  padding:12px 20px; border-radius:14px; box-shadow:0 4px 0 #8E3A28; font-size:15px;
  transition:.1s;
}
.btn-primary:active{transform:translateY(3px); box-shadow:0 1px 0 #8E3A28;}
.btn-big{width:100%; font-size:17px; padding:14px;}

/* ============ TOAST ============ */
#toastBox{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none; width:100%; max-width:420px; padding:0 12px;
}
.toast{
  background:var(--ink); color:#fff; font-weight:700; padding:10px 18px; border-radius:30px;
  font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,0.25);
  animation: toastIn .25s ease, toastOut .3s ease 1.7s forwards;
}
@keyframes toastIn{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
@keyframes toastOut{to{opacity:0; transform:translateY(-10px);}}

.event-banner{
  position:sticky; top:0; z-index:50; text-align:center; padding:8px 12px;
  background:linear-gradient(90deg, var(--gold), var(--terracotta));
  color:#fff; font-weight:800; font-family:'Baloo 2',cursive; font-size:14px;
}

/* ============ HEADER ============ */
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px 10px; max-width:820px; margin:0 auto;
}
.farm-id{display:flex; align-items:center; gap:10px;}
.farm-icon{
  font-size:32px; background:#fff; border-radius:50%; width:52px; height:52px;
  display:flex; align-items:center; justify-content:center; border:3px solid var(--gold);
  box-shadow:var(--shadow);
}
.farm-id-text{display:flex; flex-direction:column;}
.farm-name{font-family:'Baloo 2',cursive; font-weight:700; font-size:17px; color:var(--ink);}
.lvl-row{display:flex; align-items:center; gap:6px; margin-top:2px;}
.lvl-badge{
  background:var(--field-dark); color:#fff; font-size:11px; font-weight:800;
  padding:2px 8px; border-radius:20px;
}
.lvl-title{font-size:12px; font-weight:700; color:var(--ink-soft);}

.xp-wrap{flex:1; min-width:140px;}
.xp-bar-bg{background:#E8D9B8; border-radius:20px; height:10px; overflow:hidden;}
.xp-bar-fill{background:linear-gradient(90deg,var(--gold),var(--terracotta)); height:100%; width:0%; transition:width .3s;}
.xp-label{font-size:11px; font-weight:700; color:var(--ink-soft);}

.stats-row{display:flex; gap:8px;}
.stat-pill{
  background:#fff; border-radius:20px; padding:7px 14px; font-weight:800; font-size:14px;
  box-shadow:var(--shadow); border:2px solid var(--line);
}
.money-pill{color:var(--gold-dark);}
.time-pill{color:var(--ink-soft); font-size:13px;}
.mute-pill{padding:7px 10px; font-size:15px; color:var(--ink-soft); line-height:1;}
.mute-pill.muted{opacity:.5;}

/* ============ TABS ============ */
.tabbar{
  position:sticky; top:0; z-index:40; display:flex; gap:4px; overflow-x:auto;
  background:var(--cream); padding:8px 10px; border-bottom:3px solid var(--line);
  max-width:820px; margin:0 auto; scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{display:none;}
.tab-btn{
  flex:1; min-width:78px; background:transparent; color:var(--ink-soft); font-weight:800;
  padding:9px 6px; border-radius:12px; font-size:12px; display:flex; flex-direction:column;
  align-items:center; gap:2px; white-space:nowrap; position:relative;
}
.tab-btn span{font-family:'Nunito',sans-serif;}
.tab-btn.active{background:var(--field); color:#fff;}
.tab-btn:disabled{opacity:.35; pointer-events:none;}
.tab-badge{
  position:absolute; top:2px; right:8px; background:var(--terracotta); color:#fff;
  font-size:9px; border-radius:10px; padding:1px 5px; font-weight:800;
}

/* ============ MAIN ============ */
main{max-width:820px; margin:0 auto; padding:16px;}
.panel{display:none; animation:fadeIn .25s ease;}
.panel.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.panel-head{margin-bottom:14px;}
.panel-head h2{font-size:20px; margin-bottom:2px;}
.panel-head p{margin:0; color:var(--ink-soft); font-weight:600; font-size:13px;}

.sub-title{font-size:15px; margin:18px 0 10px;}

/* ============ PLOTS / PENS GRID ============ */
.plots-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px;
}
.plot-tile{
  background:var(--soil); border-radius:14px; aspect-ratio:1/1; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--shadow); border:3px solid var(--soil-dark); overflow:hidden;
  transition:.12s;
}
.plot-tile:active{transform:scale(.96);}
.plot-tile.empty{background:repeating-linear-gradient(45deg, #7A5230, #7A5230 8px, #6B4A28 8px, #6B4A28 16px);}
.plot-tile.empty::after{content:"+"; font-size:30px; color:#FFE9BF; font-weight:800;}
.plot-tile.growing{background:var(--field-light);}
.plot-tile.ready{background:var(--field); animation:pulseReady 1s infinite;}
.plot-tile.pop-anim{animation:popGlow .32s ease !important;}
.plot-tile.pop-anim .plot-emoji{animation:popEmoji .32s ease;}
@keyframes popGlow{
  0%{ box-shadow:var(--shadow); }
  35%{ box-shadow:0 4px 0 rgba(59,42,24,0.18), 0 0 0 10px rgba(242,169,59,0.55); }
  100%{ box-shadow:var(--shadow); }
}
@keyframes popEmoji{
  0%{ transform:scale(1) rotate(0deg); }
  35%{ transform:scale(1.4) rotate(-8deg); }
  65%{ transform:scale(0.9) rotate(6deg); }
  100%{ transform:scale(1) rotate(0deg); }
}

/* ============ FLOATING TEXT ============ */
.floating-text{
  position:fixed; z-index:250; pointer-events:none; font-family:'Baloo 2',cursive;
  font-weight:800; font-size:16px; transform:translate(-50%,0);
  animation:floatUp .9s ease-out forwards; text-shadow:0 2px 3px rgba(0,0,0,0.15);
}
.ft-money{color:var(--gold-dark);}
.ft-item{color:var(--field-dark);}
@keyframes floatUp{
  0%{ opacity:0; transform:translate(-50%,0) scale(0.7); }
  15%{ opacity:1; transform:translate(-50%,-10px) scale(1.15); }
  100%{ opacity:0; transform:translate(-50%,-64px) scale(1); }
}
@keyframes pulseReady{0%,100%{box-shadow:var(--shadow);} 50%{box-shadow:0 4px 0 rgba(59,42,24,0.18), 0 0 0 6px rgba(242,169,59,0.45);}}
.plot-tile.locked{background:#C9BFA6; border-color:#A9A085;}
.plot-tile.locked::after{content:"🔒"; font-size:22px;}

/* golden crop */
.plot-tile.golden{
  background:linear-gradient(135deg,#FFE79A,#F2A93B) !important;
  border-color:#C97F1E !important;
  animation:goldenPulse 1.1s infinite !important;
}
.plot-tile.golden::before{
  content:"✨"; position:absolute; top:3px; right:5px; font-size:14px;
  animation:sparkleSpin 1.4s linear infinite;
}
@keyframes goldenPulse{
  0%,100%{ box-shadow:var(--shadow), 0 0 0 0 rgba(242,169,59,0.6); }
  50%{ box-shadow:var(--shadow), 0 0 0 8px rgba(242,169,59,0); }
}
@keyframes sparkleSpin{
  0%{ transform:rotate(0deg) scale(1); }
  50%{ transform:rotate(180deg) scale(1.3); }
  100%{ transform:rotate(360deg) scale(1); }
}
.plot-emoji{font-size:34px; filter:drop-shadow(0 2px 1px rgba(0,0,0,.15));}
.plot-timer{
  position:absolute; bottom:5px; left:5px; right:5px; background:rgba(59,42,24,0.7); color:#fff;
  font-size:10px; font-weight:800; text-align:center; border-radius:8px; padding:2px 0;
}
.plot-bar-bg{position:absolute; bottom:0; left:0; right:0; height:5px; background:rgba(0,0,0,0.25);}
.plot-bar-fill{height:100%; background:var(--gold);}
.plot-lock-label{font-size:10px; font-weight:800; color:#5C5540; margin-top:2px;}

/* ============ DRAWERS ============ */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:99; display:none;
}
.drawer-overlay.show{display:block;}
.seed-drawer, .buy-drawer{
  position:fixed; left:0; right:0; bottom:-100%; max-width:820px; margin:0 auto;
  background:var(--cream); border-radius:22px 22px 0 0; z-index:100; padding:16px;
  box-shadow:0 -6px 24px rgba(0,0,0,0.25); transition:bottom .25s ease; max-height:70vh; overflow-y:auto;
}
.seed-drawer.show, .buy-drawer.show{bottom:0;}
.seed-drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.btn-close{
  background:#F4EBD4; width:30px; height:30px; border-radius:50%; font-weight:800; color:var(--ink);
}
.seed-list{display:flex; flex-direction:column; gap:8px;}
.seed-item{
  display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--line);
  border-radius:14px; padding:10px 12px;
}
.seed-item.locked{opacity:.5;}
.seed-emoji{font-size:28px;}
.seed-info{flex:1;}
.seed-info b{display:block; font-size:14px;}
.seed-info span{font-size:12px; color:var(--ink-soft); font-weight:700;}
.seed-buy-btn{
  background:var(--field-dark); color:#fff; font-weight:800; padding:8px 14px; border-radius:10px; font-size:13px;
}
.seed-buy-btn:disabled{background:#B7B09B;}

/* ============ KILANG ============ */
.kilang-slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; margin-bottom:6px;}
.kilang-slot{
  background:#fff; border:3px dashed var(--line); border-radius:14px; aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;
}
.kilang-slot.busy{border-style:solid; border-color:var(--gold);}
.kilang-slot.done{border-color:var(--field); background:#EAF5E1;}
.kilang-slot .plot-emoji{font-size:30px;}

.recipe-list{display:flex; flex-direction:column; gap:8px;}
.recipe-item{
  background:#fff; border:2px solid var(--line); border-radius:14px; padding:10px 12px;
  display:flex; align-items:center; gap:12px;
}
.recipe-emoji{font-size:28px;}
.recipe-info{flex:1;}
.recipe-info b{font-size:14px; display:block;}
.recipe-needs{font-size:12px; color:var(--ink-soft); font-weight:700;}
.recipe-needs .miss{color:var(--terracotta);}
.recipe-btn{background:var(--terracotta); color:#fff; font-weight:800; padding:8px 14px; border-radius:10px; font-size:13px;}
.recipe-btn:disabled{background:#C9BFA6;}

/* ============ PASAR / ORDERS ============ */
.order-board{display:flex; flex-direction:column; gap:10px; margin-bottom:6px;}
.order-card{
  background:#fff; border:2px solid var(--line); border-radius:16px; padding:12px 14px;
  display:flex; align-items:center; gap:12px;
}
.order-emoji{font-size:30px;}
.order-info{flex:1;}
.order-info b{font-size:14px; display:block;}
.order-info span{font-size:12px; color:var(--ink-soft); font-weight:700; display:block;}
.order-reward{font-size:12px; color:var(--gold-dark); font-weight:800;}
.order-actions{display:flex; flex-direction:column; gap:6px;}
.order-fulfill{background:var(--field-dark); color:#fff; font-weight:800; padding:7px 12px; border-radius:10px; font-size:12px;}
.order-fulfill:disabled{background:#C9BFA6;}
.order-skip{background:#F4EBD4; color:var(--ink-soft); font-weight:800; padding:6px 12px; border-radius:10px; font-size:11px;}
.empty-note{color:var(--ink-soft); font-weight:700; font-size:13px; text-align:center; padding:14px;}

.quick-sell-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;}
.qs-item{
  background:#fff; border:2px solid var(--line); border-radius:14px; padding:10px; text-align:center;
}
.qs-item .plot-emoji{font-size:26px;}
.qs-item b{display:block; font-size:12px; margin:4px 0 2px;}
.qs-item span{font-size:11px; color:var(--ink-soft); font-weight:700; display:block; margin-bottom:6px;}
.qs-sell-btn{background:var(--gold-dark); color:#fff; font-weight:800; padding:6px 10px; border-radius:8px; font-size:12px; width:100%;}
.qs-sell-btn:disabled{background:#C9BFA6;}

/* ============ UPGRADE ============ */
.upgrade-groups{display:flex; flex-direction:column; gap:6px;}
.upgrade-list{display:flex; flex-direction:column; gap:8px;}
.upgrade-item{
  background:#fff; border:2px solid var(--line); border-radius:14px; padding:10px 12px;
  display:flex; align-items:center; gap:12px;
}
.upgrade-emoji{font-size:26px;}
.upgrade-info{flex:1;}
.upgrade-info b{font-size:14px; display:block;}
.upgrade-info span{font-size:12px; color:var(--ink-soft); font-weight:700;}
.upgrade-btn{background:var(--terracotta); color:#fff; font-weight:800; padding:8px 12px; border-radius:10px; font-size:12px;}
.upgrade-btn.owned{background:var(--field-dark);}
.upgrade-btn:disabled{background:#C9BFA6;}

/* ============ INVENTORY ============ */
.cap-bar-bg{background:#E8D9B8; border-radius:20px; height:8px; overflow:hidden; margin-bottom:14px;}
.cap-bar-fill{background:linear-gradient(90deg,var(--field),var(--gold)); height:100%; width:0%; transition:width .3s;}
.inventory-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px;}
.inv-item{background:#fff; border:2px solid var(--line); border-radius:14px; padding:10px; text-align:center;}
.inv-item .plot-emoji{font-size:26px;}
.inv-item b{display:block; font-size:11px; margin-top:4px;}
.inv-item span{font-size:11px; color:var(--gold-dark); font-weight:800;}
.inv-empty{grid-column:1/-1; text-align:center; color:var(--ink-soft); font-weight:700; padding:20px;}

/* ============ CONFETTI ============ */
.confetti-piece{
  position:fixed; top:-20px; z-index:260; pointer-events:none; border-radius:2px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(110vh) rotate(540deg); opacity:0.2; }
}

@media(min-width:600px){
  .topbar{padding:18px 20px 12px;}
}