/* ===================================================================
   VERDANT EMPIRE — Game UI Stylesheet (Imperial Gold Edition)
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');
*{margin:0;padding:0;box-sizing:border-box;user-select:none;}
:root{
  --bg:#060e06;--gold:#d4af37;--gb:#f4d76b;--gs:#e8c878;
  --gd:#8a6f28;--gdeep:#5a4818;--bd:#2a2418;
  --text:#c8bfa0;--tdim:#8a8068;--tbr:#f0e4c0;--parch:#e8dcb8;
  --gp:linear-gradient(180deg,rgba(28,22,14,0.97) 0%,rgba(14,10,6,0.99) 100%);
  --si:inset 0 1px 0 rgba(244,215,107,0.15),inset 0 -1px 0 rgba(0,0,0,0.5);
  --fd:'Cinzel',serif;--fb:'Crimson Text',serif;--fm:'Courier New',monospace;
  --grad-gold:linear-gradient(180deg,#f4d76b 0%,#d4af37 50%,#8a6f28 100%);
  /* legacy compat */
  --l2-gold:#d4af37;--l2-gold2:#f4d76b;--l2-text:#c8bfa0;
  --l2-border:#8a6f28;--l2-border2:#2a2418;
  --l2-bg:rgba(28,22,14,0.97);--l2-bg-dark:rgba(14,10,6,0.99);
  --color-gold:#d4af37;--color-gold-light:#f4d76b;
  --color-parchment:#e8dcb8;--color-parchment-dark:#c8bfa0;
}
body{background:#0a0f08;color:var(--text);font-family:var(--fb);overflow:hidden;height:100vh;width:100vw;}
#gameCanvas{width:100vw;height:100vh;display:block;touch-action:none;outline:none;}

/* ── LOADING SCREEN ── */
#loadingScreen{
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse at 50% 25%,rgba(212,175,55,0.18),transparent 55%),
    radial-gradient(ellipse at 30% 80%,rgba(74,138,74,0.15),transparent 60%),
    linear-gradient(180deg,#060e06 0%,#0a1408 30%,#0e1a0a 55%,#0a1408 80%,#060e06 100%);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;overflow:hidden;transition:opacity 0.8s ease;
}
#loadingScreen.hidden{opacity:0;pointer-events:none;}
#loadingScreen::before,#loadingScreen::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 22%,rgba(244,215,107,0.65),transparent),
    radial-gradient(1px 1px at 38% 65%,rgba(244,215,107,0.85),transparent),
    radial-gradient(1.5px 1.5px at 58% 18%,rgba(244,215,107,0.55),transparent),
    radial-gradient(1px 1px at 78% 58%,rgba(244,215,107,0.75),transparent),
    radial-gradient(2px 2px at 28% 88%,rgba(244,215,107,0.45),transparent),
    radial-gradient(1px 1px at 68% 38%,rgba(244,215,107,0.65),transparent);
  background-size:800px 800px;animation:lsEmber 30s linear infinite;opacity:0.75;
}
#loadingScreen::after{animation-duration:48s;animation-direction:reverse;opacity:0.45;background-size:1200px 1200px;}
@keyframes lsEmber{from{transform:translateY(0)}to{transform:translateY(-800px)}}
.loading-content{
  position:relative;z-index:5;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem;max-width:640px;
}
.loading-content::before{
  content:'⚜';font-size:4rem;color:var(--gb);
  text-shadow:0 0 20px var(--gold),0 0 40px rgba(212,175,55,0.5);
  margin-bottom:1.5rem;display:block;animation:lsCrest 6s ease-in-out infinite;
}
@keyframes lsCrest{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.game-title{
  font-family:var(--fd);font-size:5rem;font-weight:900;
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:0.3em;line-height:1;margin-bottom:0.5rem;
  filter:drop-shadow(0 0 30px rgba(212,175,55,0.5));
  animation:lsTitle 4s ease-in-out infinite alternate;
}
@keyframes lsTitle{from{filter:drop-shadow(0 0 20px rgba(212,175,55,0.3))}to{filter:drop-shadow(0 0 50px rgba(212,175,55,0.8))}}
.game-title+p::before{
  content:'◆  ◆  ◆';display:block;color:var(--gold);font-size:0.8rem;
  letter-spacing:1em;margin-bottom:0.8rem;opacity:0.6;font-family:var(--fd);
}
.game-subtitle{
  font-family:var(--fb);font-style:italic;font-weight:600;color:var(--parch);
  font-size:1.3rem;letter-spacing:0.06em;margin-bottom:2.8rem;
  text-shadow:0 2px 8px rgba(0,0,0,0.9);
}
.loading-bar{
  width:100%;max-width:500px;height:16px;background:rgba(0,0,0,0.7);
  border:1px solid var(--gd);position:relative;padding:2px;
  box-shadow:var(--si),0 0 24px rgba(212,175,55,0.25),0 4px 16px rgba(0,0,0,0.6);
  margin-bottom:1.5rem;
}
.loading-bar::before,.loading-bar::after{
  content:'';position:absolute;width:12px;height:12px;border:2px solid var(--gold);pointer-events:none;
}
.loading-bar::before{top:-7px;left:-7px;border-right:none;border-bottom:none;}
.loading-bar::after{bottom:-7px;right:-7px;border-left:none;border-top:none;}
.loading-progress{
  height:100%;width:0%;background:var(--grad-gold);transition:width 0.3s ease;
  box-shadow:0 0 20px var(--gb),inset 0 1px 0 rgba(255,255,255,0.4);
  position:relative;overflow:hidden;
}
.loading-progress::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);
  animation:lsShimmer 2s linear infinite;
}
@keyframes lsShimmer{from{transform:translateX(-100%)}to{transform:translateX(200%)}}
.loading-tip{
  color:var(--tdim);font-size:1rem;font-style:italic;
  letter-spacing:0.05em;font-family:var(--fb);text-shadow:1px 1px 2px #000;
}
.loading-tip::before{content:'◆';color:var(--gold);margin-right:8px;font-size:0.7em;opacity:0.7;}

/* ── HUD GENERAL ── */
.hud-element{position:fixed;z-index:100;pointer-events:auto;}
.hud-element.hidden{display:none;}
#statusHUD,#selectionHUD,#hintBox,#menuHUD,.hint-box{display:none!important;}

/* ── TOP HUD ── */
#topHUD{
  position:fixed;top:0;left:0;right:0;padding:9px 18px;
  background:linear-gradient(180deg,rgba(20,16,8,0.98),rgba(10,8,4,0.94));
  border-bottom:1px solid var(--gd);
  display:flex;justify-content:space-between;align-items:center;
  pointer-events:none;z-index:500;box-shadow:0 6px 20px rgba(0,0,0,0.7);
}
#topHUD::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gb) 50%,transparent);opacity:0.7;
}
.resource-bar{
  display:flex;background:var(--gp);border:1px solid var(--gd);
  box-shadow:var(--si),0 4px 12px rgba(0,0,0,0.5);position:relative;
}
.resource-bar::before,.resource-bar::after{
  content:'';position:absolute;width:7px;height:7px;border:1.5px solid var(--gold);
}
.resource-bar::before{top:-3px;left:-3px;border-right:none;border-bottom:none;}
.resource-bar::after{bottom:-3px;right:-3px;border-left:none;border-top:none;}
.resource{
  display:flex;align-items:center;gap:7px;padding:5px 13px;
  border-right:1px solid rgba(138,111,40,0.4);min-width:75px;transition:background 0.15s;
}
.resource:last-child{border-right:none;}
.resource:hover{background:rgba(212,175,55,0.08);}
.resource-icon{font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.9));line-height:1;}
.resource-amount{
  font-family:var(--fm);font-weight:bold;font-size:14px;color:var(--gb);
  min-width:32px;text-align:right;text-shadow:1px 1px 2px #000,0 0 6px rgba(212,175,55,0.3);
}
.player-info{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  pointer-events:auto;background:var(--gp);border:1px solid var(--gd);
  padding:5px 16px 5px 22px;position:relative;box-shadow:var(--si);
}
.player-info::before{
  content:'⚜';position:absolute;left:-11px;top:50%;transform:translateY(-50%);
  color:var(--gb);font-size:17px;text-shadow:0 0 12px var(--gold),0 2px 4px #000;
  background:#060e06;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--gd);
}
.player-title{font-family:var(--fd);font-size:13px;font-weight:600;color:var(--gb);letter-spacing:2px;text-shadow:1px 1px 2px #000;}
.day-cycle{font-family:var(--fm);font-size:10px;color:var(--tdim);letter-spacing:2px;}

/* ── VILLAGER HUD ── */
#villagerHUD{
  position:fixed;top:62px;left:14px;z-index:1002;
  display:flex;flex-direction:column;gap:5px;pointer-events:none;
}
.vhud-card{
  background:var(--gp);border:1px solid var(--gd);
  padding:7px 9px;width:210px;font-family:var(--fm);position:relative;
  box-shadow:var(--si),0 4px 10px rgba(0,0,0,0.6);
}
.vhud-card::before,.vhud-card::after{
  content:'';position:absolute;width:6px;height:6px;border:1.5px solid var(--gold);
}
.vhud-card::before{top:-2px;left:-2px;border-right:none;border-bottom:none;}
.vhud-card::after{bottom:-2px;right:-2px;border-left:none;border-top:none;}
.vhud-name{
  font-family:var(--fd);font-size:11px;font-weight:600;color:var(--gb);
  letter-spacing:1.5px;text-shadow:1px 1px 2px #000;margin-bottom:5px;
  position:relative;padding-top:2px;
}
.vhud-name::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0.5;
}
.vhud-bar-row{display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.vhud-bar-row:last-child{margin-bottom:0;}
.vhud-label{width:16px;font-size:9px;color:var(--tdim);font-weight:bold;}
.vhud-track{
  flex:1;height:11px;background:#0a0806;border:1px solid var(--bd);
  position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,0.8);
}
.vhud-fill{height:100%;position:absolute;left:0;top:0;transition:width 0.4s;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}
.vhud-fill[style*="#8a2020"]{background:linear-gradient(180deg,#c84040,#8a2020 50%,#501010)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 0 8px rgba(160,40,40,0.4)!important;}
.vhud-fill[style*="#20508a"]{background:linear-gradient(180deg,#4080d0,#20508a 50%,#102850)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 0 8px rgba(40,88,160,0.4)!important;}
.vhud-txt{position:absolute;inset:0;font-size:8px;line-height:11px;color:#fff;text-shadow:1px 1px 2px #000;text-align:center;font-weight:bold;}
.vhud-more{
  background:var(--gp);border:1px solid var(--gd);padding:6px 10px;width:210px;
  font-family:var(--fm);font-size:10px;color:var(--gs);text-align:center;letter-spacing:2px;
  box-shadow:var(--si);
}

/* ── NOTIFICATIONS ── */
#notifications{
  position:fixed;top:62px;left:50%;transform:translateX(-50%);
  z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.notification{
  background:var(--gp);border:1px solid var(--gd);border-top:2px solid var(--gold);
  padding:9px 20px;color:var(--tbr);font-family:var(--fd);font-size:12px;letter-spacing:1px;
  box-shadow:var(--si),0 8px 20px rgba(0,0,0,0.8),0 0 16px rgba(212,175,55,0.2);
  animation:notifIn 0.4s cubic-bezier(0.34,1.56,0.64,1),notifOut 0.3s ease 2.7s forwards;
  white-space:nowrap;position:relative;
}
.notification::before{content:'◆';color:var(--gold);margin-right:7px;font-size:10px;}
@keyframes notifIn{from{transform:translateX(-50%) translateY(-20px) scale(0.95);opacity:0}to{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
@keyframes notifOut{to{opacity:0;transform:translateX(-50%) translateY(-20px) scale(0.95)}}

/* ── ACTION BUTTONS ── */
.action-btn{
  padding:7px 14px;background:var(--gp);border:1px solid var(--gd);
  color:var(--tbr);font-family:var(--fd);font-size:11px;letter-spacing:2px;
  cursor:pointer;transition:all 0.15s;box-shadow:var(--si);
}
.action-btn:hover{background:linear-gradient(180deg,rgba(212,175,55,0.2),rgba(138,111,40,0.1));color:var(--gb);border-color:var(--gold);}

/* ── BUILD MENU ── */
#buildMenu{display:none!important;}
#invActions{
  display:flex;gap:5px;padding:8px 12px;border-top:1px solid var(--gd);
  background:var(--gp);justify-content:center;flex-wrap:wrap;position:relative;
}
#invActions::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0.6;
}
.inv-action{
  width:52px;height:52px;
  background:linear-gradient(180deg,rgba(36,28,12,0.95),rgba(18,14,4,0.98));
  border:1px solid var(--gd);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:all 0.15s;position:relative;
  box-shadow:var(--si),0 2px 6px rgba(0,0,0,0.6);
}
.inv-action::before,.inv-action::after{
  content:'';position:absolute;width:5px;height:5px;border:1px solid var(--gdeep);transition:border-color 0.15s;
}
.inv-action::before{top:1px;left:1px;border-right:none;border-bottom:none;}
.inv-action::after{bottom:1px;right:1px;border-left:none;border-top:none;}
.inv-action:hover{border-color:var(--gb);background:linear-gradient(180deg,rgba(80,64,16,0.95),rgba(40,32,8,0.98));transform:translateY(-2px);box-shadow:var(--si),0 6px 14px rgba(0,0,0,0.7),0 0 20px rgba(212,175,55,0.4);}
.inv-action.active{border-color:var(--gb);background:linear-gradient(180deg,rgba(120,96,24,0.95),rgba(80,64,12,1));box-shadow:var(--si),0 0 24px rgba(244,215,107,0.5);}

/* ── CHAT WINDOW ── */
.l2w{width:400px;font-size:11px;position:fixed;bottom:16px;left:16px;z-index:1000;filter:drop-shadow(0 12px 30px rgba(0,0,0,0.8));}
.l2border{border:1px solid var(--gd);background:var(--gp);position:relative;}
.l2border::before,.l2border::after{content:'';position:absolute;width:10px;height:10px;border:1.5px solid var(--gold);pointer-events:none;z-index:5;}
.l2border::before{top:-3px;left:-3px;border-right:none;border-bottom:none;}
.l2border::after{bottom:-3px;right:-3px;border-left:none;border-top:none;}
.l2clockbar{
  background:linear-gradient(180deg,rgba(36,28,8,0.98),rgba(18,14,4,0.99));
  border-bottom:1px solid var(--gd);padding:6px 13px;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative;
}
.l2clockbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gb),transparent);opacity:0.6;}
.l2clock-label{color:var(--gs);font-family:var(--fd);font-size:9px;letter-spacing:3px;font-weight:600;}
.l2clock-time{display:flex;align-items:center;gap:7px;}
.l2clock-digits{color:var(--gb);font-size:17px;letter-spacing:3px;font-weight:bold;font-family:var(--fm);text-shadow:0 0 10px rgba(244,215,107,0.5),1px 1px 2px #000;}
.l2clock-icon{color:var(--gold);font-size:14px;filter:drop-shadow(0 0 6px var(--gold));}
.l2clock-admin{color:var(--tdim);font-family:var(--fd);font-size:9px;letter-spacing:3px;font-weight:600;transition:color 0.2s;}
.l2clockbar:hover .l2clock-admin{color:var(--gb);}
.l2dragbar{
  background:rgba(12,10,4,0.99);border-bottom:1px solid var(--bd);
  padding:3px 8px;display:flex;justify-content:space-between;align-items:center;
  cursor:grab;user-select:none;font-family:var(--fd);font-size:9px;color:var(--tdim);letter-spacing:2px;font-weight:600;
}
.l2dragbar:active{cursor:grabbing;}
.l2dragdots{color:var(--gd);letter-spacing:2px;font-size:11px;}
.l2panel{background:rgba(16,12,6,0.97);display:flex;height:88px;}
.l2msgs{flex:1;overflow-y:auto;padding:5px 7px;scrollbar-width:thin;scrollbar-color:var(--gd) #0a0806;}
.l2msgs::-webkit-scrollbar{width:5px;}
.l2msgs::-webkit-scrollbar-track{background:#0a0806;}
.l2msgs::-webkit-scrollbar-thumb{background:var(--gd);border:1px solid var(--gold);}
.l2sbar{width:18px;background:rgba(12,10,4,0.99);border-left:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;padding:2px 0;gap:1px;flex-shrink:0;}
.l2sbar.left{border-left:none;border-right:1px solid var(--bd);}
.l2sbtn{width:13px;height:13px;background:var(--gp);border:1px solid var(--gd);color:var(--gs);font-size:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all 0.15s;}
.l2sbtn:hover{background:linear-gradient(180deg,rgba(212,175,55,0.3),rgba(138,111,40,0.2));color:var(--gb);border-color:var(--gold);}
.l2strack{flex:1;width:9px;background:#0a0806;border:1px solid var(--bd);position:relative;margin:1px 0;overflow:hidden;}
.l2sthumb{width:7px;height:24px;background:var(--grad-gold);border:1px solid var(--gold);position:absolute;left:0;top:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);}
.l2msg{line-height:1.55;color:var(--text);text-shadow:1px 1px 2px #000;font-size:11px;font-family:var(--fb);padding:1px 0;}
.l2divider{
  height:3px;background:linear-gradient(180deg,#080604,#140e04 50%,#080604);
  border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);position:relative;
}
.l2divider::after{content:'';position:absolute;top:50%;left:25%;right:25%;height:1px;background:linear-gradient(90deg,transparent,var(--gd),transparent);transform:translateY(-50%);}
.l2tabs{display:flex;background:linear-gradient(180deg,rgba(18,14,4,1),rgba(12,10,4,0.99));border-top:1px solid var(--gd);}
.l2ticon{width:22px;background:rgba(8,6,2,0.99);border-right:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--gs);font-family:var(--fd);font-size:10px;font-weight:bold;}
.l2tab{flex:1;padding:5px 3px;background:rgba(24,18,8,0.7);color:var(--tdim);border:none;border-right:1px solid var(--bd);cursor:pointer;font-family:var(--fd);font-size:10px;letter-spacing:1.5px;font-weight:600;text-align:center;text-transform:uppercase;transition:all 0.15s;}
.l2tab:last-child{border-right:none;}
.l2tab:hover{background:rgba(60,48,16,0.9);color:var(--gb);}
.l2tab.on{background:linear-gradient(180deg,rgba(80,64,16,0.9),rgba(40,32,8,0.95));color:var(--gb);border-top:2px solid var(--gb);margin-top:-1px;box-shadow:inset 0 -2px 8px rgba(212,175,55,0.2);}
.l2inputrow{display:flex;align-items:center;background:rgba(6,4,2,0.99);border-top:1px solid var(--bd);padding:4px 5px;gap:4px;}
.l2arrowicon{width:18px;height:18px;background:var(--gp);border:1px solid var(--gd);display:flex;align-items:center;justify-content:center;color:var(--gs);font-size:9px;}
.l2aicon{width:18px;height:18px;background:linear-gradient(180deg,#c83030,#801818);border:1px solid var(--gb);color:#fff;font-size:10px;font-weight:bold;display:flex;align-items:center;justify-content:center;font-family:var(--fd);flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 0 6px rgba(200,48,48,0.4);text-shadow:1px 1px 1px #000;}
.l2inp{flex:1;background:transparent;border:none;color:var(--tbr);font-family:var(--fb);font-size:12px;padding:1px 5px;outline:none;letter-spacing:0.5px;}
.l2inp::placeholder{color:var(--tdim);font-style:italic;}

/* ── ADMIN PANEL ── */
#adminPanel{
  position:fixed;top:0;right:0;width:290px;height:100vh;
  background:linear-gradient(180deg,rgba(20,16,8,0.98),rgba(12,10,4,0.99));
  border-left:2px solid var(--gd);display:none;flex-direction:column;
  font-family:var(--fm);z-index:2000;box-shadow:-4px 0 24px rgba(0,0,0,0.8);
}
#aHdr{
  background:linear-gradient(180deg,rgba(28,22,10,0.99),rgba(16,12,6,0.99));
  border-bottom:2px solid var(--gd);padding:8px 12px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
#aTitle{color:var(--gb);font-size:11px;letter-spacing:3px;font-family:var(--fd);}
#aClose{background:none;border:1px solid var(--gd);color:var(--gs);width:22px;height:22px;cursor:pointer;font-size:13px;}
#aClose:hover{background:rgba(212,175,55,0.15);color:var(--gb);}
#aTabs{display:flex;background:rgba(18,14,6,0.98);border-bottom:2px solid var(--gd);flex-shrink:0;flex-wrap:wrap;}
.atb{flex:1;padding:6px 2px;background:rgba(24,18,8,0.95);border:none;border-right:1px solid var(--bd);color:var(--tdim);cursor:pointer;font-family:var(--fm);font-size:8px;letter-spacing:1px;text-transform:uppercase;min-width:40px;transition:all 0.15s;}
.atb:last-child{border-right:none;}
.atb:hover{background:rgba(50,38,14,0.95);color:var(--gb);}
.atb.on{background:rgba(42,32,10,0.98);color:var(--gb);border-top:2px solid var(--gold);margin-top:-2px;}
#aBody{flex:1;overflow-y:auto;padding:8px;scrollbar-width:thin;scrollbar-color:var(--gd) rgba(18,14,6,0);}
#aBody::-webkit-scrollbar{width:4px;}
#aBody::-webkit-scrollbar-track{background:rgba(16,12,6,0.95);}
#aBody::-webkit-scrollbar-thumb{background:var(--gd);border:1px solid var(--gold);}
.asc{margin-bottom:12px;}
.ath{color:var(--gs);font-size:8px;letter-spacing:2px;text-transform:uppercase;margin-bottom:5px;padding-bottom:3px;border-bottom:1px solid var(--bd);}
.ar{display:flex;align-items:center;gap:5px;margin-bottom:4px;}
.al{color:var(--text);font-size:10px;min-width:50px;flex-shrink:0;}
.ai{flex:1;background:rgba(12,10,4,0.97);border:1px solid var(--bd);color:var(--text);font-family:var(--fm);font-size:10px;padding:2px 5px;outline:none;}
.ai:focus{border-color:var(--gd);}
.ab{padding:3px 8px;background:rgba(24,18,8,0.95);border:1px solid var(--gd);color:var(--text);cursor:pointer;font-family:var(--fm);font-size:10px;white-space:nowrap;transition:all 0.1s;}
.ab:hover{background:rgba(50,38,14,0.95);color:var(--gb);}
.ab.d{color:#e05050;border-color:#6a2020;}
.ab.d:hover{background:rgba(80,20,20,0.5);border-color:#e05050;}
.ab.ok{color:#90c060;border-color:#3a5a20;}
.ab.ok:hover{background:rgba(20,60,20,0.5);}
.ab.full{width:100%;text-align:center;margin-bottom:3px;display:block;}
.ab.active{background:rgba(42,32,10,0.98);color:var(--gb);border-top:2px solid var(--gold);}
.asl{display:flex;align-items:center;gap:5px;margin-bottom:4px;}
.asl input[type=range]{flex:1;accent-color:var(--gold);height:3px;}
.aslv{color:var(--text);font-size:10px;min-width:30px;text-align:right;}
.abg{display:inline-block;padding:1px 5px;background:rgba(18,14,6,0.95);border:1px solid var(--gd);color:var(--tdim);font-size:9px;margin-bottom:5px;}
.abg.on{color:#90c060;border-color:#3a5a20;}
.xyzg{display:flex;gap:3px;margin-bottom:4px;}
.xyzg label{display:flex;flex-direction:column;align-items:center;font-size:8px;gap:1px;flex:1;}
.xyzg label.x{color:#f87171;}.xyzg label.y{color:#86efac;}.xyzg label.z{color:#93c5fd;}
.xyzg input{width:100%;background:rgba(12,10,4,0.97);border:1px solid var(--bd);color:var(--text);font-family:var(--fm);font-size:10px;padding:2px;text-align:center;outline:none;}
.adiv{height:3px;background:rgba(10,8,4,1);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin:6px 0;}
#aFtr{border-top:2px solid var(--gd);padding:5px 10px;font-size:8px;color:var(--tdim);text-align:center;letter-spacing:1px;flex-shrink:0;background:rgba(16,12,6,0.99);font-family:var(--fd);}

/* ── INVENTORY PANEL ── */
#menuHUD{display:none!important;}
#invPanel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:420px;
  background:linear-gradient(180deg,rgba(22,18,8,0.98),rgba(12,10,4,0.99));
  border:1px solid var(--gd);display:none;flex-direction:column;
  font-family:var(--fm);z-index:1500;
  box-shadow:var(--si),0 0 40px rgba(0,0,0,0.9),0 0 60px rgba(212,175,55,0.1);
}
#invPanel::before,#invPanel::after{
  content:'';position:absolute;width:12px;height:12px;border:2px solid var(--gold);pointer-events:none;z-index:5;
}
#invPanel::before{top:-4px;left:-4px;border-right:none;border-bottom:none;}
#invPanel::after{bottom:-4px;right:-4px;border-left:none;border-top:none;}
#invHeader{
  background:linear-gradient(180deg,rgba(28,22,10,0.99),rgba(16,12,6,0.99));
  border-bottom:2px solid var(--gd);padding:7px 12px;
  display:flex;align-items:center;justify-content:space-between;cursor:move;
}
#invTitle{color:var(--gb);font-size:12px;letter-spacing:3px;text-shadow:1px 1px 2px #000;font-family:var(--fd);}
#invClose{background:none;border:1px solid var(--gd);color:var(--gs);width:22px;height:22px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
#invClose:hover{background:rgba(212,175,55,0.15);color:var(--gb);}
#invWeight{padding:6px 12px;border-bottom:1px solid var(--bd);background:rgba(14,10,4,0.9);}
#invWeightLabel{color:var(--tdim);font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between;margin-bottom:3px;}
#invWeightBar{height:8px;background:#0a0806;border:1px solid var(--bd);overflow:hidden;}
#invWeightFill{height:100%;background:linear-gradient(90deg,var(--gdeep),var(--gold));transition:width 0.3s;box-shadow:0 0 8px rgba(212,175,55,0.3);}
#invGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:12px;}
.inv-slot{
  aspect-ratio:1;background:rgba(14,10,4,0.9);border:1px solid var(--bd);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;position:relative;transition:all 0.1s;
}
.inv-slot:hover{border-color:var(--gd);background:rgba(28,22,8,0.95);}
.inv-slot.filled{background:rgba(24,18,8,0.95);border-color:var(--gd);}
.inv-icon{font-size:20px;line-height:1;}
.inv-count{position:absolute;bottom:2px;right:3px;font-size:9px;color:var(--gb);font-weight:bold;text-shadow:1px 1px 2px #000;}
.inv-slot.weapon{border-color:#c85020;}
.inv-slot.armor{border-color:#5070c8;}
.inv-slot.consumable{border-color:#50c850;}
#invTooltip{
  position:fixed;background:rgba(14,10,4,0.97);border:1px solid var(--gd);
  padding:6px 10px;font-family:var(--fm);font-size:11px;color:var(--text);
  z-index:1600;pointer-events:none;display:none;max-width:200px;
  box-shadow:0 0 12px rgba(0,0,0,0.9),0 0 8px rgba(212,175,55,0.15);
}
#invTooltip .tt-name{color:var(--gb);font-weight:bold;margin-bottom:2px;font-family:var(--fd);font-size:12px;letter-spacing:1px;}
#invTooltip .tt-type{color:var(--gs);font-size:9px;text-transform:uppercase;}
#invBuildLabel{padding:4px 12px 0;color:var(--gs);font-size:9px;letter-spacing:2px;border-top:1px solid var(--bd);font-family:var(--fd);}
#invActions{display:flex;gap:5px;padding:6px 12px 8px;background:linear-gradient(180deg,rgba(18,14,6,0.9),rgba(12,10,4,0.95));justify-content:center;flex-wrap:wrap;}
#invFooter{
  border-top:2px solid var(--gd);
  background:linear-gradient(180deg,rgba(22,18,8,0.99),rgba(14,10,4,0.99));
  padding:6px 12px;display:flex;justify-content:space-between;align-items:center;
}
.inv-gold{color:var(--gold);font-size:11px;font-family:var(--fd);letter-spacing:1px;}
.inv-hint{color:var(--tdim);font-size:9px;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .game-title{font-size:3rem;letter-spacing:0.15em;}
  #topHUD{padding:6px 10px;flex-wrap:wrap;gap:6px;}
  .resource{padding:4px 10px;min-width:60px;}
  .resource-icon{font-size:1.1rem;}
  .resource-amount{font-size:12px;}
  .l2w{width:calc(100vw - 32px);}
  #villagerHUD{top:110px;}
  .vhud-card,.vhud-more{width:180px;}
  .inv-action{width:44px;height:44px;font-size:18px;}
}