*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#141008;--panel:#1c1710;--panel2:#232016;--panel3:#2a261a;
  --border:#302810;--border2:#3e3218;--gold:#c8a84b;--gold2:#e0bc60;
  --text:#d0c098;--dim:#8a7850;--faint:#4a3e20;
  --red:#7a1c1c;--red2:#b83030;--green:#185018;--green2:#228822;
  --blue:#162840;--blue2:#205888;--row:#1e1a0e;--rowh:#252016;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Crimson Text',Georgia,serif;font-size:15px;display:flex;flex-direction:column}

/* ── HUD ── */
#hud{display:flex;align-items:center;height:44px;background:#120e06;border-bottom:1px solid var(--border2);padding:0 16px;gap:0;flex-shrink:0;z-index:20}
.hud-left{display:flex;align-items:center;gap:20px;flex:1}
.hud-center{flex:0 0 auto;text-align:center}
.hud-right{display:flex;align-items:center;gap:18px;justify-content:flex-end;flex:1}
.hud-item{display:flex;align-items:center;gap:7px;font-family:'Cinzel',serif;font-size:13px;color:var(--gold)}
.hud-item svg{opacity:.75;flex-shrink:0}
.hud-item .sub{font-size:11px;color:var(--dim);margin-left:2px}
.hud-sep{width:1px;height:22px;background:var(--border2)}
#hud-date{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);letter-spacing:.5px}

/* ── TABS ── */
#tabs{display:flex;align-items:center;height:46px;background:#0e0b04;border-bottom:1px solid var(--border2);padding:0 8px;gap:3px;flex-shrink:0}
.tab-btn{display:flex;align-items:center;gap:8px;padding:0 16px;height:34px;background:none;border:none;border-radius:4px;color:var(--dim);font-family:'Cinzel',serif;font-size:12px;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:all .15s;white-space:nowrap}
.tab-btn:hover{color:var(--text);background:var(--panel2)}
.tab-btn.active{background:var(--gold);color:#100c02;font-weight:700}
.tab-btn.active svg{color:#100c02}
.tab-btn svg{flex-shrink:0;transition:color .15s}

/* ── CONTENT ── */
#content{display:flex;flex:1;overflow:hidden;min-height:0}
.tab-pane{display:none;width:100%;height:100%;min-height:0}
.tab-pane.active{display:flex;flex-direction:column;overflow:hidden}
#tab-map.active{flex-direction:row}

/* ── MAP TAB ── */
#map-wrap{position:relative;flex:1;overflow:hidden}
#map-canvas{display:block}
#map-controls{position:absolute;bottom:12px;left:12px;display:flex;flex-direction:column;gap:5px}
.map-btn{padding:6px 13px;background:rgba(18,12,4,.9);border:1px solid var(--border2);color:var(--gold);font-family:'Cinzel',serif;font-size:11px;cursor:pointer;letter-spacing:.4px;border-radius:3px}
.map-btn:hover{background:var(--panel2);border-color:var(--gold)}
#place-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(18,12,4,.92);border:1px solid var(--gold);color:var(--gold2);padding:6px 18px;font-family:'Cinzel',serif;font-size:12px;display:none;border-radius:3px;pointer-events:none}
#village-name-box{position:absolute;top:12px;left:12px;z-index:10;background:rgba(14,10,4,.88);border:1px solid var(--border2);border-radius:4px;padding:7px 10px;min-width:170px;cursor:pointer;transition:border-color .15s}
#village-name-box:hover{border-color:var(--gold)}
#village-name-label{font-family:'Cinzel',serif;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
#village-name-display{color:var(--gold2);font-family:'Cinzel',serif;font-size:13px;letter-spacing:.3px;min-height:18px}
#map-sidebar{width:295px;background:var(--panel);border-left:1px solid var(--border2);display:flex;flex-direction:column;overflow:hidden}
.sidebar-tabs{display:flex;border-bottom:1px solid var(--border2)}
.sidebar-tab{flex:1;padding:8px;background:none;border:none;color:var(--dim);font-family:'Cinzel',serif;font-size:11px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;text-transform:uppercase;letter-spacing:.4px}
.sidebar-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:var(--panel2)}
.sidebar-panel{display:none;flex:1;overflow-y:auto}
.sidebar-panel.active{display:flex;flex-direction:column}
.shop-cats{display:flex;flex-wrap:wrap;gap:4px;padding:8px}
.shop-cat{padding:4px 8px;background:var(--panel2);border:1px solid var(--border);color:var(--dim);font-size:10px;cursor:pointer;border-radius:3px;font-family:'Cinzel',serif;letter-spacing:.3px;text-transform:uppercase}
.shop-cat.active{background:var(--border2);color:var(--gold);border-color:var(--gold)}
#shop-items{padding:0 8px 8px}
.shop-item{background:var(--panel2);border:1px solid var(--border);margin-bottom:5px;border-radius:3px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.shop-item:hover{border-color:var(--border2)}
.shop-item.selected{border-color:var(--gold)}
.shop-item-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--panel3)}
.shop-item-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text)}
.shop-item-cost{font-size:12px;color:var(--gold);font-weight:600}
.shop-item-desc{padding:3px 8px 5px;font-size:11px;color:var(--dim);line-height:1.4}
.shop-item-meta{display:flex;flex-wrap:wrap;gap:5px;padding:0 8px 5px;font-size:10px;color:var(--faint)}
.shop-item-meta span{background:var(--panel3);padding:1px 5px;border-radius:2px}
.buy-btn{display:block;width:calc(100% - 16px);margin:0 8px 7px;padding:5px;background:var(--green);border:1px solid var(--green2);color:#80c080;font-family:'Cinzel',serif;font-size:11px;cursor:pointer;border-radius:2px;letter-spacing:.3px}
.buy-btn:hover{background:var(--green2)}
.buy-btn:disabled{background:var(--panel3);color:var(--faint);border-color:var(--border);cursor:not-allowed}
.placed-item{background:var(--panel2);border:1px solid var(--border);margin:4px 8px;border-radius:3px;overflow:hidden}
.placed-item-head{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:var(--panel3)}
.placed-item-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text)}
.placed-item-id{font-size:10px;color:var(--faint)}
.placed-item-body{padding:3px 8px 5px;font-size:11px;color:var(--dim)}
.placed-item-body .row{display:flex;justify-content:space-between;margin:1px 0}
.upgrade-btn{display:block;width:calc(100% - 16px);margin:0 8px 6px;padding:4px;background:var(--blue);border:1px solid var(--blue2);color:#80a8d0;font-family:'Cinzel',serif;font-size:10px;cursor:pointer;border-radius:2px}
.upgrade-btn:hover{background:var(--blue2)}
.upgrade-btn:disabled{background:var(--panel3);color:var(--faint);border-color:var(--border);cursor:not-allowed}

/* ── VILLAGERS TAB ── */
#tab-villagers{flex-direction:column;overflow:hidden}
#v-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;flex-shrink:0}
#v-title{font-family:'Cinzel',serif;font-size:22px;font-weight:700;color:var(--text);letter-spacing:1px;text-transform:uppercase}
#v-filters{display:flex;gap:5px}
.vf-btn{padding:5px 14px;background:var(--panel2);border:1px solid var(--border2);color:var(--dim);font-family:'Cinzel',serif;font-size:11px;letter-spacing:.4px;cursor:pointer;border-radius:3px;transition:all .15s}
.vf-btn:hover{color:var(--text)}
.vf-btn.active{background:var(--gold);border-color:var(--gold);color:#100c02;font-weight:700}
#v-stats-bar{padding:0 20px 12px;font-size:13px;color:var(--dim);display:flex;gap:18px;flex-shrink:0}
#v-stats-bar b{color:var(--text)}
#villager-list{flex:1;overflow-y:auto}
.v-row{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--border);background:var(--row);cursor:pointer;transition:background .12s;position:relative}
.v-row:hover{background:var(--rowh)}
.v-row.expanded{background:var(--rowh)}
.v-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:#100c02;flex-shrink:0;letter-spacing:0}
.v-info{flex:1;min-width:0}
.v-name{font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--text);letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px}
.v-sub{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim)}
.v-sub .job-tag{color:var(--gold)}
.v-sub .job-tag.mil{color:#e09060}
.v-sub .star{color:var(--gold);font-size:11px}
.v-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.v-bars{display:flex;flex-direction:column;gap:3px;width:130px}
.v-bar{height:5px;background:var(--border2);border-radius:3px;overflow:hidden}
.v-bar-hp{background:#30a030}
.v-bar-hunger{background:#b07020}
.v-bar-thirst{background:#2070b0}
.v-chevron{color:var(--dim);font-size:14px;transition:transform .2s;line-height:1}
.v-row.expanded .v-chevron{transform:rotate(180deg)}
.v-expand{display:none;background:var(--panel2);border-bottom:1px solid var(--border2);padding:14px 20px 14px 78px}
.v-expand.open{display:flex;gap:24px;flex-wrap:wrap}
.v-expand-col{flex:1;min-width:180px}
.v-expand-label{font-family:'Cinzel',serif;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.job-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.job-opt{padding:6px 8px;background:var(--panel3);border:1px solid var(--border);border-radius:3px;cursor:pointer;transition:border-color .12s}
.job-opt:hover{border-color:var(--border2)}
.job-opt.active{border-color:var(--gold);background:var(--panel2)}
.job-opt.locked{opacity:.4;cursor:not-allowed}
.job-opt-name{font-family:'Cinzel',serif;font-size:10px;color:var(--text);margin-bottom:1px}
.job-opt-desc{font-size:10px;color:var(--dim)}
.job-cost{font-size:9px;color:var(--gold)}
.v-dead{opacity:.45;filter:grayscale(.8)}

/* ── ARRIVAL POPUP ── */
#arrival-popup{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:300;background:#1c1810;border:1px solid var(--border2);border-radius:6px;padding:18px 22px;display:flex;align-items:center;gap:16px;min-width:420px;box-shadow:0 12px 50px rgba(0,0,0,.85);display:none}
#arrival-popup.visible{display:flex}
.arrival-avatar{width:52px;height:52px;border-radius:50%;background:#2a2620;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.arrival-info{flex:1}
.arrival-name{font-family:'Cinzel',serif;font-size:17px;font-weight:700;color:var(--text);letter-spacing:.5px;margin-bottom:3px}
.arrival-sub{font-size:12px;color:var(--dim);margin-bottom:7px}
.arrival-stats{display:flex;gap:14px;font-size:13px;color:var(--text)}
.arrival-stats span{display:flex;align-items:center;gap:4px}
.arrival-actions{display:flex;gap:8px;flex-shrink:0}
.arr-btn{width:38px;height:38px;border-radius:4px;border:1px solid;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .15s}
.arr-btn-yes{border-color:#2a7a2a;color:#2a7a2a}
.arr-btn-yes:hover{background:#1a4a1a}
.arr-btn-no{border-color:#7a2020;color:#7a2020}
.arr-btn-no:hover{background:#4a1212}

/* ── DEFENCE TAB ── */
#tab-defence{flex-direction:column;overflow:hidden}
.section-header{padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.section-title{font-family:'Cinzel',serif;font-size:13px;color:var(--gold)}
.defence-body{flex:1;display:flex;overflow:hidden}
.defence-col{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
.defence-col:last-child{border-right:none}
.col-title{padding:8px 12px;font-family:'Cinzel',serif;font-size:10px;color:var(--gold);background:var(--panel2);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.col-body{flex:1;overflow-y:auto;padding:8px}
.mil-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px}
.mil-stat{background:var(--panel2);border:1px solid var(--border);padding:8px;border-radius:3px;text-align:center}
.mil-stat .n{font-family:'Cinzel',serif;font-size:20px;color:var(--text)}
.mil-stat .l{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.attack-item{background:var(--panel2);border:1px solid var(--border);margin-bottom:5px;border-radius:3px;padding:8px 10px}
.attack-item.urgent{border-color:var(--red2)}
.attack-item-title{font-family:'Cinzel',serif;font-size:11px;color:var(--text);margin-bottom:2px}
.attack-item-sub{font-size:11px;color:var(--dim);margin-bottom:3px}
.attack-timer{font-size:11px;color:var(--red2);font-family:'Cinzel',serif}
.log-item{font-size:12px;color:var(--dim);padding:5px 0;border-bottom:1px solid var(--border);line-height:1.5}
.outcome-win{color:#30a030}.outcome-loss{color:var(--red2)}

/* ── ATTACKING TAB ── */
#tab-attacking{flex-direction:column;overflow:hidden}
.attacking-body{flex:1;display:flex;overflow:hidden}
.attack-left{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
.attack-right{width:250px;display:flex;flex-direction:column;overflow:hidden}
.target-item{background:var(--panel2);border:1px solid var(--border);margin:5px 8px;border-radius:3px;overflow:hidden}
.target-head{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:var(--panel3)}
.target-name{font-family:'Cinzel',serif;font-size:12px;color:var(--text)}
.target-wealth{font-size:11px;color:var(--gold)}
.target-body{padding:5px 10px;font-size:11px;color:var(--dim);line-height:1.6}
.target-actions{padding:3px 10px 7px;display:flex;gap:5px}
.small-btn{padding:4px 10px;font-family:'Cinzel',serif;font-size:10px;cursor:pointer;border-radius:2px;border:1px solid;letter-spacing:.3px}
.small-btn-attack{background:var(--red);border-color:var(--red2);color:#d08080}
.small-btn-attack:hover{background:var(--red2)}
.hostage-item{background:var(--panel2);border:1px solid var(--border);margin:4px 8px;border-radius:3px;padding:7px 10px}
.hostage-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text)}
.hostage-status{font-size:11px;color:var(--dim)}
.feed-btn{margin-top:4px;padding:3px 8px;background:var(--panel3);border:1px solid var(--border2);color:var(--gold);font-size:10px;cursor:pointer;border-radius:2px}

/* ── ALLIANCE TAB ── */
#tab-alliance{flex-direction:column;overflow:hidden}
.alliance-body{flex:1;display:flex;overflow:hidden}
.alliance-left{flex:1;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.alliance-right{width:250px;display:flex;flex-direction:column;overflow:hidden}
.alliance-item{background:var(--panel2);border:1px solid var(--border);margin:5px 8px;border-radius:3px;overflow:hidden}
.alliance-head{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:var(--panel3)}
.alliance-head-name{font-family:'Cinzel',serif;font-size:12px;color:var(--text)}
.alliance-body-text{padding:5px 10px 4px;font-size:11px;color:var(--dim);line-height:1.5}
.alliance-actions{padding:3px 10px 8px;display:flex;gap:5px}
.small-btn-peace{background:#3a2808;border-color:var(--border2);color:var(--gold)}
.small-btn-peace:hover{background:#4a3010}
.small-btn-full{background:#183010;border-color:#305a30;color:#80c080}
.small-btn-full:hover{background:#1a4018}
.active-alliance-item{background:var(--panel2);border:1px solid var(--border);margin:4px 8px;border-radius:3px;padding:7px 10px}
.act-al-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text);margin-bottom:3px;display:flex;align-items:center;gap:7px}
.act-al-sub{font-size:11px;color:var(--dim)}
.break-btn{margin-top:5px;padding:3px 8px;background:var(--red);border:1px solid var(--red2);color:#d08080;font-size:10px;cursor:pointer;border-radius:2px}
.alliance-type{font-size:10px;padding:1px 6px;border-radius:2px;font-family:'Cinzel',serif}
.type-peace{background:#3a2808;color:var(--gold);border:1px solid var(--border2)}
.type-full{background:#183010;color:#80c080;border:1px solid #305a30}

/* ── NOTIFICATION LOG ── */
#notif-log{position:fixed;bottom:0;right:0;width:295px;max-height:55vh;overflow-y:auto;display:flex;flex-direction:column-reverse;gap:2px;padding:8px 8px;pointer-events:none;z-index:50}
.notif-card{background:rgba(22,17,8,.96);border:1px solid var(--border2);border-radius:4px;padding:10px 12px;display:flex;gap:10px;pointer-events:auto;align-items:flex-start;animation:fadeIn .3s ease}
.notif-card.info{border-left:3px solid var(--blue2)}
.notif-card.danger{border-left:3px solid var(--red2)}
.notif-card.success{border-left:3px solid var(--green2)}
.notif-card.warn{border-left:3px solid var(--gold)}
.notif-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.notif-icon.info{background:#16284020;color:#5888c0;border:1px solid var(--blue2)}
.notif-icon.danger{background:#5a18181a;color:var(--red2);border:1px solid var(--red2)}
.notif-icon.success{background:#18501818;color:#40a040;border:1px solid var(--green2)}
.notif-icon.warn{background:#5a381010;color:var(--gold);border:1px solid var(--gold)}
.notif-body{flex:1;min-width:0}
.notif-msg{font-size:12px;color:var(--text);line-height:1.5;margin-bottom:2px}
.notif-time{font-size:10px;color:var(--faint)}
.notif-close{background:none;border:none;color:var(--faint);font-size:14px;cursor:pointer;line-height:1;padding:0;flex-shrink:0;margin-top:1px}
.notif-close:hover{color:var(--dim)}
@keyframes fadeIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

/* ── MODAL ── */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:none;align-items:center;justify-content:center}
#modal-overlay.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--border2);max-width:520px;width:90%;max-height:80vh;display:flex;flex-direction:column;border-radius:4px;box-shadow:0 12px 50px rgba(0,0,0,.85)}
.modal-header{padding:14px 18px;background:var(--panel2);border-bottom:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-family:'Cinzel',serif;font-size:15px;color:var(--gold);font-weight:600}
.modal-close{background:none;border:none;color:var(--dim);font-size:18px;cursor:pointer}
.modal-close:hover{color:var(--text)}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1;font-size:14px;line-height:1.6;color:var(--text)}
.modal-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.btn{padding:7px 18px;font-family:'Cinzel',serif;font-size:12px;cursor:pointer;border-radius:3px;letter-spacing:.4px;border:1px solid}
.btn-primary{background:var(--green);border-color:var(--green2);color:#80c080}
.btn-primary:hover{background:var(--green2)}
.btn-danger{background:var(--red);border-color:var(--red2);color:#d09090}
.btn-danger:hover{background:var(--red2)}
.btn-neutral{background:var(--panel2);border-color:var(--border2);color:var(--text)}
.btn-neutral:hover{background:var(--panel3)}

/* ── MISC ── */
.empty-state{text-align:center;color:var(--faint);font-style:italic;padding:20px 16px;font-size:12px}
.gold-text{color:var(--gold)} .red-text{color:var(--red2)} .green-text{color:#30a030}
hr.divider{border:none;border-top:1px solid var(--border);margin:8px 0}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ── WIDE MODAL (founding shop) ── */
.modal--wide{max-width:600px;width:92%}

/* ── SETTINGS TAB ── */
.tab-btn-settings{margin-left:auto}
#tab-settings{flex-direction:column;overflow-y:auto}
.settings-body{padding:24px;display:flex;flex-direction:column;gap:24px;max-width:560px}
.settings-group{background:var(--panel);border:1px solid var(--border2);border-radius:4px;overflow:hidden}
.settings-group-title{font-family:'Cinzel',serif;font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:.8px;padding:10px 16px;background:var(--panel2);border-bottom:1px solid var(--border)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px}
.settings-row-label{font-family:'Cinzel',serif;font-size:13px;color:var(--text);margin-bottom:4px}
.settings-row-desc{font-size:12px;color:var(--dim);line-height:1.5}
.toggle-btn{width:46px;height:26px;border-radius:13px;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;background:var(--faint)}
.toggle-btn.on{background:#226622}
.toggle-btn::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;opacity:.9}
.toggle-btn.on::after{transform:translateX(20px)}

/* ── GAME HIDDEN UNTIL MENU DISMISSED ── */
#hud,#tabs,#content,#notif-log,#arrival-popup,#modal-overlay{visibility:hidden}
body.game-started #hud,body.game-started #tabs,body.game-started #content,body.game-started #notif-log,body.game-started #arrival-popup,body.game-started #modal-overlay{visibility:visible}

/* ── MENU SCREEN ── */
#menu-screen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080604}
#menu-canvas{position:absolute;inset:0;width:100%;height:100%}
#menu-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;padding:40px 60px;background:rgba(8,6,4,.55);border:1px solid rgba(200,168,75,.18);border-radius:6px}
#menu-title{font-family:'Cinzel',serif;font-size:52px;font-weight:700;color:var(--gold);letter-spacing:4px;text-transform:uppercase;line-height:1;text-shadow:0 0 60px rgba(200,168,75,.4),0 2px 8px rgba(0,0,0,.8);margin-bottom:10px}
#menu-subtitle{font-family:'Crimson Text',serif;font-size:17px;color:var(--dim);letter-spacing:3px;text-transform:uppercase;margin-bottom:40px}
#menu-start{padding:14px 48px;background:none;border:1px solid var(--gold);color:var(--gold);font-family:'Cinzel',serif;font-size:15px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:3px;transition:all .25s;position:relative;overflow:hidden}
#menu-start::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s;z-index:-1}
#menu-start:hover{color:#100c02;background:var(--gold)}
#menu-version{position:absolute;bottom:16px;right:20px;font-size:11px;color:var(--faint);font-family:'Cinzel',serif;letter-spacing:1px}

/* ── VILLAGER DETAIL PANEL ── */
#v-detail-panel{width:320px;background:var(--panel);border-left:1px solid var(--border2);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
#v-detail-panel.hidden{display:none}
.vd-portrait{height:100px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:36px;font-weight:700;color:#100c02;position:relative;flex-shrink:0}
.vd-portrait .vd-status{position:absolute;bottom:8px;right:10px;font-size:10px;font-family:'Crimson Text',serif;color:rgba(255,255,255,.6)}
.vd-name{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--text);padding:12px 16px 2px;letter-spacing:.5px}
.vd-job{font-size:12px;color:var(--gold);padding:0 16px 10px;border-bottom:1px solid var(--border)}
.vd-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border)}
.vd-stat{background:var(--panel2);border:1px solid var(--border);padding:7px 9px;border-radius:3px}
.vd-stat .n{font-family:'Cinzel',serif;font-size:17px;color:var(--text)}
.vd-stat .l{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.vd-bars{padding:8px 16px;border-bottom:1px solid var(--border)}
.vd-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:11px;color:var(--dim)}
.vd-bar-row .lbl{width:46px;text-align:right;flex-shrink:0}
.vd-bar-outer{flex:1;height:6px;background:var(--border2);border-radius:3px;overflow:hidden}
.vd-bar-inner{height:100%;border-radius:3px;transition:width .4s}
.vd-bar-val{width:30px;text-align:left;flex-shrink:0;color:var(--text)}
.vd-job-section{flex:1;overflow-y:auto;padding:8px 16px}
.vd-job-label{font-family:'Cinzel',serif;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.vd-job-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.vd-job-opt{padding:6px 8px;background:var(--panel2);border:1px solid var(--border);border-radius:3px;cursor:pointer;transition:border-color .12s}
.vd-job-opt:hover{border-color:var(--border2)}
.vd-job-opt.active{border-color:var(--gold);background:var(--panel3)}
.vd-job-opt.locked{opacity:.38;cursor:not-allowed}
.vd-job-opt-name{font-family:'Cinzel',serif;font-size:10px;color:var(--text);margin-bottom:1px}
.vd-job-opt-sub{font-size:9px;color:var(--dim)}
.vd-close{display:flex;align-items:center;justify-content:center;padding:10px;border-top:1px solid var(--border);background:none;border-left:none;border-right:none;border-bottom:none;color:var(--dim);font-family:'Cinzel',serif;font-size:11px;cursor:pointer;letter-spacing:.5px;flex-shrink:0}
.vd-close:hover{color:var(--text);background:var(--panel2)}