/* ============================================================
   HARVY.EXE — retro PlayStation/CRT farming UI
   ============================================================ */
:root{
  --bg:#3a1517; --bg2:#260c0e;
  --teal:#9a3b2a; --teal-d:#6f2a1d;
  --cream:#f5ead0; --cream2:#ead7b3;
  --ink:#2a1b15; --ink2:#412c22;
  --amber:#e8a838; --amber-d:#c5851c;
  --red:#cf4d2c; --red-d:#a23a20;
  --green:#5f8f44; --green-d:#436e32;
  --muted:#8a6f54;
  --pixel:"Fredoka",system-ui,sans-serif;
  --silk:"Fredoka",system-ui,sans-serif;
  --mono:"Nunito",system-ui,sans-serif;
  --shadow:6px 6px 0 #0b211e;
  --shadow-sm:4px 4px 0 #0b211e;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--mono);
  background:radial-gradient(120% 120% at 50% 0%,var(--bg) 0%,var(--bg2) 100%);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
small{font-size:.72em}

/* ---- CRT overlay ---- */
#crt{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
#crt::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 50%,transparent 60%,rgba(0,0,0,.35) 100%);
}

/* ---- screens ---- */
.screen{position:fixed;inset:0;display:none;overflow:auto}
.screen.active{display:flex}

/* ============================================================
   BOOT
   ============================================================ */
#boot{align-items:center;justify-content:center}
.boot-inner{font-family:var(--mono);color:var(--cream);width:min(560px,86vw)}
.boot-logo{font-family:var(--silk);font-size:1.7rem;color:var(--amber);margin-bottom:26px;letter-spacing:1px}
.boot-loading{width:min(430px,80vw)}
.boot-load-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);color:#e7c79a;letter-spacing:3px;font-size:.82rem;margin-bottom:12px}
.boot-load-top span:last-child{color:var(--amber)}
.boot-bar{height:16px;border-radius:9px;background:#3a181c;border:1px solid #5e2a2e;box-shadow:inset 0 2px 5px rgba(0,0,0,.5);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#caa258,#e8b53a);box-shadow:0 0 12px rgba(232,181,58,.6);transition:width .14s ease-out}
.boot-hint{margin-top:26px;color:#5f8f84;font-size:.8rem;animation:blink 1s steps(2) infinite}
.boot-hint.ready{color:#e8b53a}
@keyframes blink{50%{opacity:.25}}

/* ============================================================
   LOGIN
   ============================================================ */
#login{align-items:center;justify-content:center}
.login-card{
  width:min(380px,88vw);background:var(--cream);border:3px solid var(--ink);
  box-shadow:var(--shadow);padding:36px 32px;text-align:center;
}
.login-logo{font-family:var(--silk);font-size:2rem;color:var(--amber);margin-bottom:8px;letter-spacing:1px}
.login-sub{font-family:var(--mono);font-size:.85rem;color:var(--ink2);margin-bottom:28px}
.login-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:var(--silk);font-size:.82rem;padding:14px;
  border:3px solid var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .06s,box-shadow .06s;letter-spacing:.5px;
}
.login-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #0b211e}
.wallet-btn{background:var(--amber);color:var(--ink)}
.email-btn{background:var(--ink);color:var(--cream)}
.login-divider{
  display:flex;align-items:center;gap:12px;margin:18px 0;
  color:var(--muted);font-size:.75rem;font-family:var(--mono);
}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--ink2);opacity:.25}
.login-input{
  width:100%;font-family:var(--mono);font-size:.88rem;padding:12px 14px;
  border:2px solid var(--ink);background:var(--cream2);color:var(--ink);
  margin-bottom:10px;outline:none;
}
.login-input:focus{border-color:var(--amber)}
.login-link{
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
  margin-top:6px;cursor:pointer;background:none;border:none;
}
.login-link:hover{color:var(--ink)}
.email-flow{width:100%}

/* ============================================================
   LOBBY
   ============================================================ */
#lobby{align-items:center;justify-content:center}
.lobby-card{width:min(400px,88vw);background:var(--cream);border:3px solid var(--ink);box-shadow:var(--shadow);padding:36px 32px;text-align:center}
.lobby-code-display{font-family:var(--silk);font-size:1.1rem;color:var(--ink);background:var(--cream2);border:2px solid var(--ink);padding:12px;margin-bottom:14px;letter-spacing:3px}
.lobby-code-display b{color:var(--amber-d);font-size:1.4rem}
.lobby-roster{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;text-align:left}
.lobby-player{font-family:var(--silk);font-size:.78rem;padding:10px 12px;background:var(--cream2);border:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center}
.lobby-player .host-badge{font-size:.6rem;background:var(--amber);color:var(--ink);padding:2px 8px;border:1px solid var(--ink)}
.lobby-phase{}

/* ghost player sprites */
.ghost-tag{position:absolute;font-family:var(--silk);font-size:.55rem;color:var(--cream);background:rgba(42,27,21,.75);padding:2px 7px;white-space:nowrap;pointer-events:none;transform:translateX(-50%);z-index:9000}

/* mp HUD chip */
.mp-chip{background:var(--green);color:var(--cream);font-family:var(--silk);font-size:.65rem;padding:6px 10px;border:2px solid var(--ink);box-shadow:3px 3px 0 #0b211e;letter-spacing:.5px}

/* ============================================================
   MENU
   ============================================================ */
#menu{align-items:flex-start;justify-content:center;padding:26px}
.frame{
  width:min(1180px,96vw);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  background:var(--cream);
  overflow:hidden;
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--teal);color:var(--cream);
  padding:12px 20px;border-bottom:3px solid var(--ink);
  font-family:var(--silk);letter-spacing:1px;
}
.brand{font-size:1rem;display:flex;align-items:center;gap:8px}
.brand-ic{filter:saturate(.8)}
.ver{font-size:.7rem;opacity:.85}
.navbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:3px solid var(--ink);background:var(--cream2);
}
.navlinks{display:flex;gap:22px;font-family:var(--silk);font-size:.78rem}
.navlinks a{cursor:pointer;color:var(--ink);text-decoration:none}
.navlinks a:hover{color:var(--red)}
.play{
  font-family:var(--silk);font-size:.82rem;background:var(--amber);
  color:var(--ink);padding:10px 18px;border:3px solid var(--ink);
  box-shadow:var(--shadow-sm);transition:transform .06s,box-shadow .06s;
}
.play:active{transform:translate(4px,4px);box-shadow:0 0 0 #0b211e}

.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:0}
.hero-left{padding:34px 36px}
.pill{
  display:inline-block;font-family:var(--silk);font-size:.66rem;
  border:2px solid var(--ink);padding:7px 12px;margin-bottom:24px;background:var(--cream2);
}
.amber{color:var(--amber-d);font-weight:700}
.title{
  font-family:var(--pixel);font-weight:700;font-size:7rem;line-height:.82;
  color:var(--ink);letter-spacing:2px;text-shadow:4px 4px 0 #d9c79e;
}
.tagline{
  border-left:5px solid var(--amber);padding-left:16px;margin:24px 0 18px;
  font-size:1.5rem;line-height:1.4;
}
.tagline>span{display:block}
.lead{max-width:430px;line-height:1.65;color:var(--ink2);font-size:.95rem}

.menu-list{margin-top:28px;display:flex;flex-direction:column;gap:12px;max-width:430px}
.menu-item{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--ink);color:var(--cream);font-family:var(--silk);font-size:.86rem;
  padding:16px 18px;border:3px solid var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .06s,box-shadow .06s,background .1s;letter-spacing:1px;
}
.menu-item kbd{
  font-family:var(--mono);background:var(--cream);color:var(--ink);
  padding:2px 9px;border-radius:2px;font-size:.9rem;font-weight:700;
}
.menu-item.primary{background:var(--amber);color:var(--ink)}
.menu-item.primary kbd{background:var(--ink);color:var(--amber)}
.menu-item:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #0b211e}
.menu-item:active{transform:translate(4px,4px);box-shadow:0 0 0 #0b211e}
.menu-item.disabled{opacity:.45;filter:grayscale(.4)}
.statusline{margin-top:26px;font-family:var(--silk);font-size:.64rem;color:var(--red-d)}

.hero-right{position:relative;border-left:3px solid var(--ink);min-height:520px;background:#cdb873;overflow:hidden}
.scene{position:absolute;inset:0}
.farm-svg{width:100%;height:100%;display:block}
.farmer-card{
  position:absolute;right:24px;bottom:24px;width:150px;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--shadow-sm);
}
.farmer-emoji{font-size:4.2rem;text-align:center;padding:18px 0 10px;background:#bfe0d3}
.farmer-lvl{
  font-family:var(--silk);font-size:.7rem;text-align:center;
  padding:8px;background:var(--amber);border-top:3px solid var(--ink);color:var(--ink);
}

/* ============================================================
   GAME
   ============================================================ */
#game{flex-direction:column;padding:0}
.hud{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--teal);border-bottom:3px solid var(--ink);
  padding:10px 18px;color:var(--cream);flex:0 0 auto;
}
.hud-brand{font-family:var(--silk);font-size:.92rem;display:flex;flex-direction:column;gap:3px}
.hud-brand small{font-family:var(--mono);font-size:.66rem;opacity:.8;letter-spacing:.5px}
.hud-stats{display:flex;gap:10px;align-items:center}
.chip{
  display:flex;align-items:center;gap:7px;font-family:var(--silk);font-size:.74rem;
  background:var(--cream);color:var(--ink);padding:8px 12px;border:2px solid var(--ink);
  box-shadow:3px 3px 0 #0b211e;
}
.chip .chip-ic{font-family:var(--mono)}
.chip.xp{position:relative;flex-direction:column;align-items:flex-start;gap:3px;min-width:96px}
.chip.xp b{display:flex;align-items:center;gap:6px}
.xpbar{width:100%;height:5px;background:#cbb98f;border:1px solid var(--ink)}
.xpbar i{display:block;height:100%;background:var(--amber);width:0}
.chip.btn{background:var(--amber)}
.chip.btn:active{transform:translate(3px,3px);box-shadow:0 0 0}

.stage{flex:1 1 auto;display:grid;grid-template-columns:1fr 360px;gap:0;min-height:0}

/* ---- farm side ---- */
.farm{
  position:relative;display:flex;flex-direction:column;
  padding:20px;gap:14px;overflow:auto;background:linear-gradient(180deg,#1b463f,#143733);
}
.sky{
  position:relative;height:46px;border:3px solid var(--ink);overflow:hidden;flex:0 0 auto;
  box-shadow:var(--shadow-sm);transition:background .8s;
}
.sky[data-phase="dawn"]{background:linear-gradient(90deg,#e9a25a,#f0c97a)}
.sky[data-phase="day"]{background:linear-gradient(90deg,#7fc0d8,#bfe0c0)}
.sky[data-phase="dusk"]{background:linear-gradient(90deg,#c87a52,#9c6a8a)}
.sky[data-phase="night"]{background:linear-gradient(90deg,#23314f,#3a3a66)}
.sky-orb{position:absolute;top:8px;transition:left .6s;font-size:1.3rem;line-height:1}
.sky-label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:var(--silk);font-size:.66rem;color:#1c1c1c;mix-blend-mode:overlay}
.sky-clock{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--silk);font-size:.78rem;color:var(--ink);background:#ffffff77;padding:2px 7px;border:2px solid var(--ink)}

.grid{
  display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:8px;
  flex:1 1 auto;align-content:start;
  max-width:760px;width:100%;margin:0 auto;
}
.plot{
  position:relative;aspect-ratio:1/1;border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:transform .06s;font-size:1.9rem;
  background:#b08a55;
}
.plot:hover{transform:translate(-2px,-2px)}
.plot:active{transform:translate(2px,2px)}
.plot.is-selected{outline:4px solid var(--amber);outline-offset:2px;z-index:2}
.plot-locked{background:repeating-linear-gradient(45deg,#1e514a 0 10px,#1a473f 10px 20px);color:#9fc7bd}
.plot-empty{background:#b58c55}
.plot-tilled{background:#7c5630;color:#5a3c1f}
.plot-soil{font-family:var(--mono);font-size:1.4rem;opacity:.55;letter-spacing:-2px}
.plot-lock{font-size:1.5rem}
.plot-tag{position:absolute;bottom:4px;font-family:var(--silk);font-size:.5rem;background:#0b211e99;color:var(--cream);padding:2px 4px}
.plot-growing,.plot-ripe{background:#7c5630}
.plot-crop{filter:drop-shadow(0 2px 0 #00000033)}
.plot-crop.ripe{animation:bounce 1s ease-in-out infinite}
@keyframes bounce{50%{transform:translateY(-4px)}}
.plot-ripe{box-shadow:var(--shadow-sm),inset 0 0 0 3px var(--amber);background:#8a6033}
.plot-bar{position:absolute;left:5px;right:5px;bottom:5px;height:6px;background:#3a2616;border:1px solid #00000055}
.plot-bar i{display:block;height:100%;background:var(--green);transition:width .3s}
.plot-bar.dry i{background:var(--red)}
.plot-drop{position:absolute;top:3px;right:3px;font-size:.7rem;transition:opacity .3s}

.farm-toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;flex:0 0 auto}
.tbtn{
  font-family:var(--silk);font-size:.66rem;background:var(--cream);color:var(--ink);
  padding:9px 12px;border:2px solid var(--ink);box-shadow:3px 3px 0 #0b211e;
}
.tbtn:active{transform:translate(3px,3px);box-shadow:0 0 0}
.tbtn.locked{opacity:.4;cursor:not-allowed}

/* ---- panel side ---- */
.panel{
  background:var(--cream);border-left:3px solid var(--ink);
  display:flex;flex-direction:column;min-height:0;
}
.inspector{
  padding:16px;border-bottom:3px solid var(--ink);background:var(--cream2);
  min-height:170px;display:flex;flex-direction:column;gap:10px;
}
.insp-empty{color:var(--muted);font-style:italic;margin:auto;text-align:center}
.insp-head{font-family:var(--silk);font-size:.78rem;display:flex;justify-content:space-between;align-items:center}
.insp-state{font-size:.6rem;background:var(--ink);color:var(--cream);padding:3px 7px}
.insp-p{font-size:.84rem;line-height:1.5;color:var(--ink2)}
.insp-crop{font-size:3rem;text-align:center}
.muted{color:var(--muted)}

.seedpick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.seedchip{
  display:flex;flex-direction:column;align-items:center;gap:2px;font-size:1.5rem;
  background:var(--cream);border:2px solid var(--ink);padding:8px 4px;box-shadow:2px 2px 0 #0b211e;
}
.seedchip small{font-family:var(--silk);font-size:.5rem;color:var(--muted)}
.seedchip:hover{background:var(--amber)}
.seedchip:active{transform:translate(2px,2px);box-shadow:0 0 0}
.seedchip.locked{opacity:.4;cursor:not-allowed}

.meter{height:10px;background:#cbb98f;border:2px solid var(--ink);margin-top:2px}
.meter i{display:block;height:100%;background:var(--green);width:0;transition:width .3s}
.meter.moist i{background:#4f9fd8}
.meter-lbls{display:flex;justify-content:space-between;font-family:var(--silk);font-size:.54rem;color:var(--muted);margin-top:2px}

.abtn{
  width:100%;font-family:var(--silk);font-size:.72rem;background:var(--cream);
  color:var(--ink);padding:12px;border:3px solid var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .06s,box-shadow .06s;
}
.abtn:hover{transform:translate(-1px,-1px)}
.abtn:active{transform:translate(4px,4px);box-shadow:0 0 0}
.abtn.primary{background:var(--amber)}
.abtn.danger{background:var(--cream);color:var(--red-d);border-color:var(--red-d);box-shadow:4px 4px 0 var(--red-d);margin-top:10px}
.abtn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* tabs */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:3px solid var(--ink);flex:0 0 auto}
.tab{
  font-family:var(--silk);font-size:.62rem;padding:12px 4px;background:var(--cream2);
  color:var(--ink);border-right:2px solid var(--ink);transition:background .1s;
}
.tab:last-child{border-right:none}
.tab.on{background:var(--teal);color:var(--cream)}
.tab:hover:not(.on){background:var(--amber)}

.tabbody{padding:12px;overflow:auto;flex:1 1 auto;min-height:0}
.npc{
  background:var(--ink);color:var(--cream);padding:10px 12px;font-size:.82rem;
  margin-bottom:10px;display:flex;flex-direction:column;gap:3px;border:2px solid var(--ink);
}
.npc span{font-size:.68rem;color:#bfe3d6;font-style:italic}

.row{
  display:flex;align-items:center;gap:10px;padding:9px;margin-bottom:7px;
  background:var(--cream2);border:2px solid var(--ink);box-shadow:2px 2px 0 #0b211e;
}
.row.active{outline:3px solid var(--amber);outline-offset:-1px}
.row.locked,.row.dim{opacity:.55}
.row[data-act]{cursor:pointer}
.row-ic{font-size:1.6rem;width:32px;text-align:center;flex:0 0 auto}
.row-main{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.25}
.row-main b{font-size:.86rem}
.row-main small{color:var(--muted)}
.price{font-family:var(--silk);font-size:.72rem;white-space:nowrap}
.price .up{color:var(--green-d)}
.price .down{color:var(--red)}
.price .flat{color:var(--muted)}
.row-buy{display:flex;gap:5px;flex:0 0 auto}
.mini{
  font-family:var(--silk);font-size:.58rem;background:var(--cream);color:var(--ink);
  padding:7px 8px;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:2px 2px 0 #0b211e;
}
.mini small{font-size:.5rem;color:var(--muted)}
.mini.sell{background:var(--amber)}
.mini:active{transform:translate(2px,2px);box-shadow:0 0 0}
.mini[disabled]{opacity:.4;cursor:not-allowed}
.totline{margin-top:8px;font-family:var(--silk);font-size:.7rem;text-align:right;color:var(--ink2)}

.card{display:flex;gap:12px;padding:12px;margin-bottom:10px;background:var(--cream2);border:2px solid var(--ink);box-shadow:3px 3px 0 #0b211e}
.card-ic{font-size:2.4rem;flex:0 0 auto}
.card-body{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.card-body b{font-size:.88rem;display:flex;justify-content:space-between}
.card-body .lvl{font-family:var(--silk);font-size:.6rem;background:var(--ink);color:var(--amber);padding:2px 7px}
.card-body small{color:var(--muted);line-height:1.4}

.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.statgrid div{background:var(--cream2);border:2px solid var(--ink);padding:9px}
.statgrid span{display:block;font-family:var(--silk);font-size:.54rem;color:var(--muted)}
.statgrid b{font-size:1rem}

.statusbar{
  flex:0 0 auto;background:var(--ink);color:#bfe3d6;font-size:.68rem;
  padding:8px 16px;font-family:var(--mono);border-top:3px solid #0b211e;
}

/* ============================================================
   TOASTS
   ============================================================ */
.toaster{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{
  font-family:var(--mono);font-size:.8rem;padding:11px 15px;
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);
  box-shadow:var(--shadow-sm);transform:translateX(120%);transition:transform .3s,opacity .3s;
  max-width:330px;
}
.toast.show{transform:translateX(0)}
.toast-good{background:#d9efce;border-color:var(--green-d)}
.toast-warn{background:#f3d6c6;border-color:var(--red-d)}
.toast-level{background:var(--amber);border-color:var(--ink)}
.toast-info{background:var(--cream)}

/* ============================================================
   OVERWORLD (top-down map + character)
   ============================================================ */
.world-vp{position:relative;flex:1 1 auto;overflow:hidden;background:#3f6b34}
.world{
  position:absolute;top:0;left:0;will-change:transform;
  background:
    repeating-linear-gradient(0deg,#6aa84f 0 40px,#66a34b 40px 80px),
    repeating-linear-gradient(90deg,transparent 0 39px,#00000008 39px 40px),
    #6aa84f;
}
.world-tint{position:absolute;inset:0;pointer-events:none;z-index:55;transition:background .8s;background:rgba(0,0,0,0)}
.fence{position:absolute;inset:10px;border:6px solid #9a7846;border-radius:4px;
  box-shadow:inset 0 0 0 3px #7d5f38;opacity:.5;pointer-events:none;z-index:1}

.obj{position:absolute}
.path{background:#c7a86f;opacity:.5;border-radius:8px;z-index:1}
.pond{background:radial-gradient(circle at 40% 32%,#74c0de,#3d83ad);
  border:4px solid #2d6280;border-radius:46% 54% 50% 50%/54% 48% 52% 46%;
  box-shadow:inset 0 6px 14px #ffffff55;z-index:1}

.tree{width:68px;height:84px;pointer-events:none}
.tree-top{position:absolute;top:0;left:4px;width:60px;height:58px;
  background:radial-gradient(circle at 38% 32%,#74a35d,#4f7a43);
  border:3px solid #3a5e33;border-radius:48% 48% 44% 44%}
.tree-trunk{position:absolute;bottom:0;left:28px;width:12px;height:28px;background:#6b4a2f;border:3px solid #4a3320}

/* beds */
.wbed{position:absolute;border:3px solid var(--ink);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;font-size:1.9rem;background:#b08a55;cursor:pointer;z-index:2}
.wbed:hover{filter:brightness(1.08)}
.wbed-locked{background:repeating-linear-gradient(45deg,#43803c 0 11px,#3a7234 11px 22px);color:#eaf3e0}
.wbed-empty{background:#b58c55}
.wbed-tilled{background:#7c5630;color:#5a3c1f}
.wbed-growing,.wbed-ripe{background:#7c5630}
.wbed-ripe{box-shadow:var(--shadow-sm),inset 0 0 0 3px var(--amber);background:#8a6033}

/* house */
.house{z-index:360}
.house-roof{position:absolute;top:0;left:-12px;right:-12px;height:96px;
  background:#b6442c;border:4px solid var(--ink);clip-path:polygon(9% 100%,50% 0,91% 100%)}
.house-body{position:absolute;top:86px;bottom:0;left:0;right:0;background:#7a5230;border:4px solid var(--ink)}
.house-window{position:absolute;top:24px;width:38px;height:38px;background:#e7c25a;border:3px solid var(--ink)}
.house-window:nth-of-type(1){left:34px}
.house-window:nth-of-type(2){right:34px}
.house-door{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:70px;height:96px;background:#4a3018;border:4px solid var(--ink)}
.sign{position:absolute;top:-34px;left:50%;transform:translateX(-50%);font-family:var(--silk);font-size:.6rem;
  background:var(--cream);color:var(--ink);border:2px solid var(--ink);padding:4px 9px;white-space:nowrap;box-shadow:2px 2px 0 #0b211e;z-index:6}

/* stalls */
.stall{z-index:440}
.stall-awning{position:absolute;top:-6px;left:-8px;right:-8px;height:40px;border:3px solid var(--ink)}
.stall-seeds{background:repeating-linear-gradient(90deg,#4f8a4a 0 19px,#e9dcbd 19px 38px)}
.stall-buyer{background:repeating-linear-gradient(90deg,#c87a2e 0 19px,#e9dcbd 19px 38px)}
.stall-counter{position:absolute;bottom:0;left:0;right:0;height:48px;background:#8a5a32;border:3px solid var(--ink)}
.stall-npc{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:52px;height:66px}

/* player */
.player{position:absolute;width:44px;height:60px;z-index:5;pointer-events:none}
.player .p-bob{width:100%;height:100%;transform-origin:bottom center}
.char-svg{width:100%;height:100%;display:block}
.player.walking .p-bob{animation:walkbob .34s steps(2,jump-none) infinite}
@keyframes walkbob{50%{transform:translateY(-3px)}}
.player.face-left .p-bob{transform:scaleX(-1)}
.player.face-left.walking .p-bob{animation:walkbobL .34s steps(2,jump-none) infinite}
@keyframes walkbobL{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateY(-3px)}}

/* interaction prompt */
.prompt{position:absolute;z-index:60;transform:translate(-50%,-50%);background:var(--ink);color:var(--cream);
  font-family:var(--silk);font-size:.6rem;padding:6px 9px;border:2px solid var(--cream);white-space:nowrap;
  box-shadow:3px 3px 0 #0b211e;animation:promptbob .9s ease-in-out infinite}
.prompt[hidden]{display:none}
.pkey{display:inline-block;background:var(--amber);color:var(--ink);padding:1px 6px;margin-right:5px;border-radius:2px}
@keyframes promptbob{50%{transform:translate(-50%,-62%)}}

.statusbar b{color:var(--amber);font-family:var(--silk);font-size:.6rem}

/* ============================================================
   POPUP MODAL
   ============================================================ */
.popup-overlay{position:fixed;inset:0;z-index:300;background:rgba(8,20,18,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .15s}
.popup-overlay[hidden]{display:none}
@keyframes fadein{from{opacity:0}}
.popup-card{width:min(440px,94vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--shadow)}
.popup-head{display:flex;justify-content:space-between;align-items:center;background:var(--teal);
  color:var(--cream);padding:11px 14px;border-bottom:3px solid var(--ink);font-family:var(--silk);font-size:.82rem}
.popup-close{background:var(--red);color:var(--cream);border:2px solid var(--ink);width:28px;height:28px;font-family:var(--silk);font-size:.8rem}
.popup-close:active{transform:translate(2px,2px)}
.popup-body{padding:14px;overflow:auto}
.insp-crop{font-size:3rem;text-align:center}

.htabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.htab{font-family:var(--silk);font-size:.58rem;padding:10px 4px;background:var(--cream2);
  border:2px solid var(--ink);box-shadow:2px 2px 0 #0b211e}
.htab.on{background:var(--teal);color:var(--cream)}
.htab:active{transform:translate(2px,2px);box-shadow:0 0 0}

.wallet-panel{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.wp-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--silk);font-size:.72rem;padding:8px 10px;background:var(--cream2);border:2px solid var(--ink)}
.wp-row span{color:var(--muted)}
.wp-progress{margin-top:4px}
.wp-progress-label{font-family:var(--mono);font-size:.68rem;color:var(--ink2);margin-bottom:6px}
.wp-bar{height:10px;background:#cbb98f;border:2px solid var(--ink);overflow:hidden}
.wp-bar i{display:block;height:100%;background:var(--amber);width:0}

.subhead{font-family:var(--silk);font-size:.58rem;color:var(--muted);margin:14px 0 6px;border-bottom:2px dashed #cbb98f;padding-bottom:5px}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wcell{background:var(--cream2);border:2px solid var(--ink);padding:9px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px}
.wc-ic{font-size:1.8rem}
.wcell b{font-size:1.1rem}
.wcell small{color:var(--muted);font-size:.58rem}
.seedbag{display:flex;flex-wrap:wrap;gap:6px}
.seedbadge{font-family:var(--silk);font-size:.6rem;background:var(--cream2);border:2px solid var(--ink);padding:6px 8px}
.bulkrow{display:grid;grid-template-columns:1fr 1fr;gap:7px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .title{font-size:5rem}
  .hero{grid-template-columns:1fr}
  .hero-right{min-height:300px;border-left:none;border-top:3px solid var(--ink)}
}
@media(max-width:820px){
  .stage{grid-template-columns:1fr}
  .panel{border-left:none;border-top:3px solid var(--ink)}
  .navlinks{display:none}
}

/* ============================================================
   ROUNDED THEME — soften corners + shadows everywhere
   (overrides earlier hard-edged rules)
   ============================================================ */
:root{
  --r-lg:20px; --r:15px; --r-sm:10px; --pill:999px;
  --shadow:0 9px 20px rgba(26,7,8,.34);
  --shadow-sm:0 5px 12px rgba(26,7,8,.28);
}

/* big containers */
.frame{border-radius:var(--r-lg)}
.popup-card{border-radius:var(--r-lg);overflow:hidden}

/* menu */
.pill,.play{border-radius:var(--pill)}
.menu-item{border-radius:var(--r)}
.menu-item kbd{border-radius:7px}
.farmer-card{border-radius:var(--r);overflow:hidden}

/* HUD */
.chip{border-radius:var(--pill);box-shadow:var(--shadow-sm)}
.chip.xp{border-radius:16px}
.xpbar,.xpbar i,.meter,.meter i,.plot-bar,.plot-bar i{border-radius:var(--pill)}

/* buttons / cards / rows */
.abtn,.row,.card,.npc{border-radius:var(--r)}
.mini,.seedchip,.tbtn,.htab,.tab,.seedbadge,.wcell,.statgrid div{border-radius:var(--r-sm)}
.chip,.tbtn,.htab,.card,.row,.mini,.seedchip,.seedbadge{box-shadow:var(--shadow-sm)}
.insp-state,.popup-close,.pkey{border-radius:7px}

/* world chrome that reads as UI */
.toast{border-radius:13px}
.prompt,.sign{border-radius:var(--pill);box-shadow:var(--shadow-sm)}
.wbed{border-radius:11px}

/* soft hover / press feedback (replaces hard-offset jumps) */
.menu-item:hover,.abtn:hover{transform:translateY(-2px);box-shadow:0 13px 26px rgba(26,7,8,.36)}
.play:active,.menu-item:active,.abtn:active,.chip.btn:active,.tbtn:active,
.mini:active,.seedchip:active,.htab:active,.tab:active,.popup-close:active{
  transform:translateY(1px);box-shadow:0 2px 6px rgba(26,7,8,.26)
}

/* ---- rounded typography polish ---- */
.chip b,.price,.sky-clock,.totline,.wcell b,.statgrid b{font-variant-numeric:tabular-nums}
.title{letter-spacing:1px}
.brand,.hud-brand,.popup-head,.npc b,.menu-item,.tab,.htab,.tbtn,.chip,.play,.pill,.seedbadge{letter-spacing:.3px}
body{font-weight:500}

/* ============================================================
   ISOMETRIC WORLD
   ============================================================ */
.world{position:absolute;top:0;left:0;background:#cdae58}
#ground{position:absolute;top:0;left:0;z-index:0}
.ground-svg{display:block}
.spr{display:block;height:auto;overflow:visible}

.wo{position:absolute;transform:translate(-50%,-100%)}
.wo-in{transform-origin:bottom center}
.wo.face-left .wo-in{transform:scaleX(-1)}
.wo.walking .wo-in{animation:wobob .34s steps(2,jump-none) infinite}
@keyframes wobob{50%{transform:translateY(-3px)}}
.wo.face-left.walking .wo-in{animation:wobobL .34s steps(2,jump-none) infinite}
@keyframes wobobL{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateY(-3px)}}

/* buildings: floating sign above */
/* nudge building sprites left so the iso side-face mass sits centred over the player,
   not bulging to the right (visual only — collision & depth are unchanged) */
.wo.bld{transform:translate(-63%,-100%)}
.wo.bld .wo-in{position:relative}
.wo.bld .sign{position:absolute;top:-6px;left:50%;transform:translateX(-50%)}

/* beds (flat soil + crop) */
.wo.bed{transform:translate(-50%,-50%)}
.wo.bed .wo-in{position:relative;line-height:0}
.soil-svg{display:block}
.bedcrop{position:absolute;left:50%;bottom:40%;transform:translateX(-50%);line-height:0}
.bedcrop .spr{width:34px}
.bedbar{position:absolute;left:50%;top:1px;transform:translateX(-50%);width:36px;height:5px;
  background:#3a2616;border:1px solid #00000066;border-radius:99px;overflow:hidden}
.bedbar i{display:block;height:100%;background:var(--green)}
.bedtag{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:var(--silk);
  font-size:.52rem;background:#0b211ecc;color:var(--cream);padding:2px 6px;border-radius:6px;white-space:nowrap}

/* ============================================================
   FULLSCREEN MENU + FINAL PALETTE TWEAKS
   ============================================================ */
#menu{align-items:stretch;justify-content:stretch;padding:0}
#menu .frame{width:100%;max-width:none;min-height:100vh;border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
#menu .hero{flex:1 1 auto;min-height:0}
.hero-right{min-height:0}
.menu-item{justify-content:flex-start}
.world-vp:focus,.world-vp:focus-visible{outline:none}

/* warm up leftover cool accents for the red farm palette */
.statusbar{color:#ecd8af}
.npc span{color:#f2deb0}
.boot-log div{color:#e7c79a}
.boot-hint{color:#c08a5c}

/* ============================================================
   MENU: text on top, animated preview on the bottom
   ============================================================ */
#menu .hero{display:flex;flex-direction:column}
.hero-left{flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;
  flex-wrap:wrap;padding:22px 44px 18px}
.hero-text{flex:1 1 460px;min-width:300px}
.hero-left .menu-list{flex:0 0 360px;margin-top:0}
.hero-right{flex:1 1 auto;min-height:340px;width:100%;border-left:none;border-top:3px solid var(--ink);position:relative}
.title{font-size:5rem;margin-top:4px}
.tagline{margin:14px 0 12px}
.lead{max-width:560px;margin-top:0}

/* ---- animated scene ---- */
#menu-scene{position:absolute;inset:0;overflow:hidden;background:#cdb86a}
.mscene-sky{position:absolute;inset:0;background:linear-gradient(180deg,#a7d0dd 0%,#bcd6b4 44%,#d8b757 70%)}
.mscene-sun{position:absolute;top:9%;right:12%;width:82px;height:82px;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fff4ba,#f1cf5e);box-shadow:0 0 52px 18px #f1cf5e4d;
  animation:sunDrift 24s ease-in-out infinite}
@keyframes sunDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,16px)}}

.mscene-clouds,.mscene-birds{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cloud{position:absolute;opacity:.92}
.cloud.c1{top:11%;animation:cloudA 46s linear infinite}
.cloud.c2{top:23%;animation:cloudA 68s linear infinite;animation-delay:-22s}
.cloud.c3{top:5%;animation:cloudA 88s linear infinite;animation-delay:-48s}
@keyframes cloudA{from{left:-20%}to{left:110%}}
.bird{position:absolute}
.bird.b1{top:17%;animation:birdFly 30s linear infinite}
.bird.b2{top:21%;transform:scale(.8);animation:birdFly 30s linear infinite;animation-delay:-4s}
.bird.b3{top:14%;transform:scale(.65);animation:birdFly 40s linear infinite;animation-delay:-15s}
@keyframes birdFly{0%{left:-8%;transform:translateY(0)}50%{transform:translateY(-16px)}100%{left:108%;transform:translateY(8px)}}

.mscene-cam{position:absolute;inset:0;width:116%;left:-8%;animation:camPan 30s ease-in-out infinite}
@keyframes camPan{0%,100%{transform:translateX(0)}50%{transform:translateX(-6.5%)}}
.mscene-art{width:100%;height:100%;display:block}

.wheat-sway{transform-box:fill-box;transform-origin:bottom center;animation:wheatSway 3.6s ease-in-out infinite}
@keyframes wheatSway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.windmill-blades{transform-box:fill-box;transform-origin:50% 50%;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* farmer — JS-driven position + chores (water/harvest/carry) */
.mscene-farmer{position:absolute;left:40%;bottom:14%;z-index:6}
.farmer-svg{display:block;overflow:visible}
.farmer.walking .farmer-svg{animation:fbob .4s steps(2,jump-none) infinite}
@keyframes fbob{50%{transform:translateY(-3px)}}
.farmer .leg-f,.farmer .leg-b{transform-box:fill-box;transform-origin:50% 0}
.farmer.walking .leg-f{animation:legSwingF .4s ease-in-out infinite}
.farmer.walking .leg-b{animation:legSwingB .4s ease-in-out infinite}
@keyframes legSwingF{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}
@keyframes legSwingB{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}
.f-body{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s}
.farmer.act-harvest .f-body{transform:rotate(13deg)}
.farmer.act-water .f-body{transform:rotate(6deg)}
.f-can,.f-drops,.f-sheaf{display:none}
.farmer.act-water .f-can{display:block}
.farmer.act-water .f-drops{display:block;animation:drip .7s linear infinite}
@keyframes drip{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(9px);opacity:0}}
.farmer.carrying .f-sheaf{display:block}
.farmer.carrying .arm-b,.farmer.carrying .arm-f{transform-box:fill-box;transform-origin:50% 0;transform:rotate(-28deg)}

/* birds — flapping wings */
.bird-svg{display:block;overflow:visible}
.wing-f,.wing-b{transform-box:fill-box;transform-origin:88% 72%}
.bird .wing-f{animation:flapF .3s ease-in-out infinite}
.bird .wing-b{animation:flapB .3s ease-in-out infinite}
@keyframes flapF{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(36deg)}}
@keyframes flapB{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-34deg)}}

/* river + plant life */
.river-shimmer{animation:shimmer 3.6s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:.9;transform:translateX(7px)}}
.flower-sway{transform-box:fill-box;transform-origin:bottom center;animation:fsway 4.2s ease-in-out infinite}
.seedling{transform-box:fill-box;transform-origin:bottom center;animation:fsway 3.6s ease-in-out infinite}
@keyframes fsway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.bflower{transform-box:fill-box;transform-origin:center;animation:bpulse 3s ease-in-out infinite}
@keyframes bpulse{0%,100%{transform:scale(.88)}50%{transform:scale(1.12)}}

/* mute buttons */
.topbar-right{display:flex;align-items:center;gap:12px}
.mute-btn{font-size:1rem;line-height:1;background:var(--cream);color:var(--ink);border:2px solid var(--ink);
  border-radius:999px;width:40px;height:40px;box-shadow:var(--shadow-sm);cursor:pointer}
.mute-btn:active{transform:translateY(1px)}

/* grazing animals + BARNYARD title fit */
.wo.anim.eating .spr{animation:munch .6s ease-in-out infinite}
@keyframes munch{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.title{font-size:clamp(2.4rem,5vw,3.9rem);letter-spacing:0}

/* player walk cycle (legs + opposite arms swing) */
.wo.player.walking .pleg-l,.wo.player.walking .parm-r{transform-box:fill-box;transform-origin:50% 0;animation:walkA .36s ease-in-out infinite}
.wo.player.walking .pleg-r,.wo.player.walking .parm-l{transform-box:fill-box;transform-origin:50% 0;animation:walkB .36s ease-in-out infinite}
@keyframes walkA{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}}
@keyframes walkB{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}

/* lantern night glow (soft, fades in toward evening) */
.lamp-glow{transition:opacity 1.2s ease;filter:blur(4px)}

/* SVG icons that replace emojis */
.ic{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.24em;flex:none}
.chip .ic{width:1.35em;height:1.35em;vertical-align:-.3em}
.npc .ic{width:1.9em;height:1.9em;vertical-align:-.55em;margin-right:2px}
.insp-crop .ic{width:1.1em;height:1.1em}
.row-ic .ic,.wc-ic .ic{width:1.1em;height:1.1em}
.seedchip .ic{width:1em;height:1em}
.abtn .ic,.mini .ic,.tbtn .ic,.htab .ic{vertical-align:-.22em}
.brand-ic .ic{width:1.1em;height:1.1em;vertical-align:-.2em}
.card-ic .ic{width:2.3rem;height:2.3rem}
.sign .ic{vertical-align:-.25em}

/* menu buttons recolored to the top header barn-red (--teal) */
.menu-item{background:var(--teal);color:var(--cream)}
.menu-item.primary{background:#b04631;color:#fff5e6}
.menu-item.disabled{background:var(--teal-d)}

@media(max-width:1080px){ .title{font-size:4.4rem} }