:root{
  --panel:#2c1f10; --cream:#fff8e7; --green:#4caf50; --dark:#17351c;
  --gold:#ffcf40; --blue:#4fc3f7; --brown:#7a4a21;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:"Trebuchet MS",Verdana,system-ui,sans-serif;background:#58a34c}
#app{position:fixed;inset:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

/* Top bar — chunky FB-era game vibe, original styling */
#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:8px 12px;background:linear-gradient(#7cc46a,#4e9440);border-bottom:3px solid #2f6b26;
  box-shadow:0 2px 10px rgba(0,0,0,.35);z-index:10}
.brand{display:flex;align-items:center;gap:6px;background:#3a2a12;color:#fff;
  padding:4px 12px;border-radius:14px;border:2px solid #ffd94d;box-shadow:inset 0 1px 0 #ffffff55}
.logo-text{font-weight:900;font-size:20px;letter-spacing:.5px;color:#ffedbe}
.logo-text i{color:#7dd3fc;font-style:normal}
.stats{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.pill{background:linear-gradient(#fffbe8,#ffe9a8);border:2px solid #7a4a21;border-radius:20px;
  padding:3px 12px;font-weight:800;color:#5a3410;display:flex;align-items:center;gap:6px;min-width:90px;
  box-shadow:0 2px 0 #7a4a2155}
.pill.coins{background:linear-gradient(#fff7c2,#ffd94d)}
.pill.cash{background:linear-gradient(#dcf6ff,#8fdcff)}
.pill.farmname{background:linear-gradient(#e8d3a8,#c9a15e);color:#3a2408}
.xpbar{width:90px;height:10px;background:#3a2408;border-radius:6px;overflow:hidden}
#xpfill{height:100%;width:0%;background:linear-gradient(90deg,#ffb300,#ffea00);transition:width .4s}
.top-actions button{background:#fff8e7;border:2px solid #7a4a21;border-radius:10px;font-weight:900;
  width:34px;height:30px;cursor:pointer}
.top-actions button:hover{background:#ffe9a8}

#renderer-badge{position:absolute;top:58px;left:12px{z-index:9;font-size:12px;font-weight:700;
  background:#000000aa;color:#fff;padding:3px 10px;border-radius:12px;pointer-events:none}
#hint{position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:9;background:#000000b0;
  color:#fff;font-size:13px;padding:6px 14px;border-radius:14px;max-width:min(92vw,640px);text-align:center}
#nogeek{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);background:#442200ee;color:#ffe9a8;
  padding:6px 14px;border-radius:10px;font-size:13px;z-index:9}

/* Bottom toolbar */
#toolbar{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:stretch;
  background:linear-gradient(#8a5a28,#5a3410);padding:8px;border-radius:16px;border:3px solid #ffdf7e;
  box-shadow:0 4px 18px rgba(0,0,0,.5);z-index:10}
#toolbar button{background:linear-gradient(#fffbe8,#ffd98a);border:2px solid #7a4a21;border-radius:12px;
  min-width:62px;padding:4px 6px;font-size:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center}
#toolbar button small{font-size:11px;font-weight:800;color:#5a3410}
#toolbar button.active{outline:3px solid #4fc3f7;background:linear-gradient(#e3f7ff,#8fdcff)}
#toolbar button:hover{filter:brightness(1.07)}
#toolbar .sep{width:3px;background:#ffdf7e66;border-radius:2px;margin:2px}

/* Seed picker */
#seedbar{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;
  background:#fff8e7ee;border:3px solid #7a4a21;border-radius:14px;padding:8px;max-width:94vw;overflow-x:auto}
#seedbar.hidden{display:none}
.seed{min-width:118px;border:2px solid #7a4a21;border-radius:10px;background:#fff;padding:6px;cursor:pointer;text-align:center}
.seed.active{outline:3px solid #4caf50}
.seed b{display:block;font-size:13px}
.seed span{font-size:12px;color:#5a3410}

/* Modals */
.modal{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:20}
.modal.hidden{display:none}
.modal-card{background:#fff8e7;border:4px solid #7a4a21;border-radius:18px;width:min(92vw,560px);max-height:82vh;
  overflow:auto;padding:0 0 14px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.modal-head{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#8a5a28,#5a3410);
  color:#ffe9a8;padding:10px 14px;border-radius:12px 12px 0 0}
.modal-head h2{margin:0}
.close{background:#fff;border:2px solid #7a4a21;border-radius:8px;cursor:pointer;font-weight:900}
.tabs{display:flex;gap:6px;padding:10px 14px 0}
.tabs button{border:2px solid #7a4a21;border-radius:10px;background:#ffe9a8;font-weight:800;padding:6px 12px;cursor:pointer}
.tabs button.active{background:#4caf50;color:#fff}
#shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:12px 14px}
.shop-item{border:2px solid #7a4a21;border-radius:12px;background:#fff;padding:8px;text-align:center}
.shop-item .emo{font-size:30px}
.shop-item button{background:#4caf50;color:#fff;border:none;border-radius:8px;font-weight:800;padding:6px 10px;cursor:pointer;margin-top:6px}
.shop-item button:disabled{background:#999}
.fine{font-size:11px;color:#7a4a21;padding:0 14px}
.help-list{padding:6px 22px 6px 34px;font-size:14px;line-height:1.65}

/* Toasts + floaters */
#toasts{position:absolute;top:100px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:15}
.toast{background:#2c1f10;color:#ffe9a8;font-weight:800;padding:8px 14px;border-radius:12px;border:2px solid #ffd94d;
  animation:slidein .25s ease-out}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
#floaters{position:absolute;inset:0;pointer-events:none;z-index:14;overflow:hidden}
.floater{position:absolute;font-weight:900;font-size:18px;color:#fff;text-shadow:0 2px 0 #2c1f10,0 0 8px #000;
  animation:floatup 1.4s ease-out forwards}
@keyframes floatup{from{transform:translateY(0);opacity:1}to{transform:translateY(-70px);opacity:0}}
.hidden{display:none !important}
@media (max-width:700px){ .pill.farmname{display:none} #hint{display:none} #toolbar button{min-width:50px} }