:root{
  --ink:#120d08;--glass:rgba(24,18,12,.86);--glass2:rgba(38,29,20,.92);--line:rgba(212,165,74,.32);--line2:rgba(212,165,74,.6);
  --brass:#d4a54a;--brass2:#f3cc6e;--text:#f1e4c8;--dim:#a8957a;--red:#e8705e;--green:#9ad672;--blue:#86b8e6;--warn:#f0b050;
  --shadow:0 10px 40px rgba(0,0,0,.55),0 2px 0 rgba(255,220,150,.06) inset;
  --serif:'Cinzel',Georgia,serif;--sans:'Inter',system-ui,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0c0906;color:var(--text);font:13px/1.45 var(--sans);overflow:hidden;user-select:none}
#app{position:fixed;inset:0}
#view{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.dim{color:var(--dim)}.bad{color:var(--red)}.good{color:var(--green)}.warn{color:var(--warn)}small{font-size:11px}
kbd{display:inline-block;min-width:18px;padding:0 5px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;font:700 10px var(--sans);color:var(--brass2);text-align:center;background:rgba(0,0,0,.3)}
.glass{background:linear-gradient(180deg,var(--glass2),var(--glass));border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
button{font:600 12px var(--sans);color:var(--text);background:linear-gradient(180deg,#3a2c1e,#2a2016);border:1px solid var(--line2);border-radius:7px;padding:5px 10px;cursor:pointer;transition:transform .08s,background .15s,box-shadow .15s}
button:hover{background:linear-gradient(180deg,#4a3826,#33271a);box-shadow:0 0 0 1px var(--brass) inset,0 0 14px rgba(212,165,74,.25)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.38;cursor:default;box-shadow:none}
button.gold{background:linear-gradient(180deg,#e9bd5c,#b8862a);color:#2a1a08;border-color:#ffe29a;text-shadow:0 1px 0 rgba(255,255,255,.3)}
button.gold:hover{background:linear-gradient(180deg,#f6cf72,#c8963a)}
button.big{padding:9px 16px;font-size:13px}
input{font:600 13px var(--sans);color:var(--text);background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:7px;padding:7px 10px;outline:none}
input:focus{border-color:var(--brass2);box-shadow:0 0 0 3px rgba(212,165,74,.18)}
input[type=range]{padding:0;accent-color:var(--brass);width:220px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--brass2);margin:0}
h4{font-size:12px;letter-spacing:.08em;margin:14px 0 6px;text-transform:uppercase;color:var(--brass)}
.ico{width:20px;height:20px;image-rendering:pixelated;vertical-align:middle}.ico.big{width:36px;height:36px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}.row.end{justify-content:flex-end;margin-top:18px}
.row>span{min-width:70px;color:var(--dim)}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;transition:opacity .3s}
#hud.dim{opacity:.25}
#hud>*{pointer-events:auto}
#hudTL{position:absolute;left:14px;top:14px;display:flex;gap:10px;padding:10px 14px 10px 10px;align-items:center}
#hPortrait{width:64px;height:64px;border-radius:10px;border:2px solid var(--brass);image-rendering:pixelated;cursor:pointer;background:#2a1e14}
.who b{font:700 15px var(--serif);color:var(--text);display:block}.who #hRank{font-size:11px;color:var(--brass2);letter-spacing:.06em;text-transform:uppercase}
.bars{display:flex;flex-direction:column;gap:4px;margin-top:6px;width:190px}
.bar{position:relative;height:14px;background:rgba(0,0,0,.45);border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;transition:width .3s}
.bar.energy i{background:linear-gradient(90deg,#3a8ad0,#7ad0ff)}.bar.hunger i{background:linear-gradient(90deg,#c87a2a,#f0c060)}
.bar.low i{animation:pulse 1s infinite}
.bar span{position:absolute;left:8px;top:-1px;font:700 10px var(--sans);text-shadow:0 1px 2px #000}
.bar em{font-style:normal}
@keyframes pulse{50%{filter:brightness(1.8)}}
.plotline{font-size:11px;color:var(--dim);margin-top:5px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hudTC{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:8px 18px 10px;min-width:250px;text-align:center}
.clockrow{display:flex;gap:12px;justify-content:center;align-items:baseline}
.clockrow b{font:700 15px var(--serif);color:var(--brass2)}#hTime{font:800 18px var(--sans);letter-spacing:.04em}#hWeather{color:var(--dim);font-size:12px}
.sunline{position:relative;height:6px;margin-top:6px;border-radius:3px;background:linear-gradient(90deg,#1a2240,#e08a40 10%,#8ac8f0 30%,#8ac8f0 70%,#e0703a 88%,#1a2240)}
#sunDot{position:absolute;top:-4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(#fff6c0,#ffc040);box-shadow:0 0 12px #ffb020;transition:left .3s}
#sunDot.moon{background:radial-gradient(#ffffff,#c8d4ff);box-shadow:0 0 10px #a8b8ff}
#hudTR{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.wallet-h{display:flex;gap:14px;padding:8px 14px;align-items:center}
.wallet-h div{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:34px}
.wallet-h b{font:800 13px var(--sans)}.wallet-h small{font-size:9px;color:var(--dim);letter-spacing:.1em}
.wallet-h #wValue small{display:block;font-size:8px;color:var(--red)}
.mm{position:relative;padding:6px;line-height:0}
#minimap{width:240px;height:180px;border-radius:8px;image-rendering:pixelated}
.mmbtn{position:absolute;right:10px;bottom:10px;padding:2px 7px;font-size:14px}
#feed{position:absolute;left:14px;bottom:86px;width:420px;display:flex;flex-direction:column-reverse;gap:3px;pointer-events:none!important}
.fl{font-size:12px;padding:4px 10px;background:rgba(14,10,6,.6);border-left:3px solid var(--line2);border-radius:4px;text-shadow:0 1px 2px #000}
.c-law{border-color:#e8705e}.c-bank{border-color:#86b8e6}.c-land{border-color:#9ad672}.c-econ{border-color:#d4a54a}.c-you{border-color:#f3e3c0}.c-people{border-color:#b48af0}
#equipBar{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;padding:7px}
.eq{position:relative;width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid var(--line);display:grid;place-items:center}
.eq .ico{width:32px;height:32px}.eq.empty{opacity:.35}
.eq i{position:absolute;left:4px;bottom:3px;height:3px;border-radius:2px;background:var(--green);max-width:36px}
#hotbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:4px;padding:6px}
#hotbar button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:66px;padding:5px 6px 4px;font-size:11px;background:transparent;border-color:transparent}
#hotbar button span{font-size:18px;line-height:1.1}
#hotbar button kbd{margin-top:2px;font-size:9px}
#hotbar button:hover,#hotbar button.on{background:rgba(212,165,74,.14);border-color:var(--line2)}
#toasts{position:absolute;left:50%;top:84px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none!important;width:min(560px,90vw)}
.toast{display:flex;gap:10px;align-items:center;padding:9px 16px;border-radius:10px;background:rgba(22,16,10,.94);border:1px solid var(--line2);box-shadow:0 8px 30px rgba(0,0,0,.5);animation:tin .35s cubic-bezier(.2,1.4,.4,1);font-weight:500;max-width:100%}
.toast .ti{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brass);color:#1a1208;font-weight:900;font-size:12px;flex:none}
.toast.bad{border-color:var(--red)}.toast.bad .ti{background:var(--red)}.toast.good .ti{background:var(--green)}.toast.law{border-color:#c890ff}.toast.law .ti{background:#c890ff}
.toast.level .ti{background:#7ad0ff}.toast.ach{background:linear-gradient(90deg,#3a2a10,#1e160c);border-color:var(--brass2);box-shadow:0 0 30px rgba(243,204,110,.35);font-size:14px}
.toast.ach .ti{background:none;font-size:20px;width:auto}
.toast.out{animation:tout .5s forwards}
@keyframes tin{from{opacity:0;transform:translateY(-14px) scale(.9)}}@keyframes tout{to{opacity:0;transform:translateY(-10px)}}

/* ---------- side panel ---------- */
#panel{position:absolute;right:14px;top:280px;bottom:84px;width:400px;display:flex;flex-direction:column;transform:translateX(440px);opacity:0;transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .25s;pointer-events:none}
#panel.open{transform:none;opacity:1;pointer-events:auto}
#panel header,.winbox header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
#panel h2{font-size:17px}.x{padding:3px 9px}
#panelBody{overflow:auto;padding:4px 14px 16px;flex:1}
#panelBody::-webkit-scrollbar,#winBody::-webkit-scrollbar{width:8px}#panelBody::-webkit-scrollbar-thumb,#winBody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.wallet{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.wallet>div{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:7px 9px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.wallet .ico{grid-row:span 2;width:24px;height:24px}.wallet b{font-size:14px}.wallet small{color:var(--dim)}
.wallet.small{grid-template-columns:1fr;gap:4px}.wallet.small>div{padding:4px 8px;display:flex;gap:6px}
.bankico{font-size:18px;grid-row:span 2}
.loadbar{position:relative;height:18px;border-radius:9px;background:rgba(0,0,0,.4);margin:10px 0;overflow:hidden;border:1px solid var(--line)}
.loadbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#6a4a22,#b8862a)}.loadbar span{position:relative;z-index:1;padding-left:10px;font-size:11px;font-weight:700;line-height:18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:9px;background:rgba(0,0,0,.28);border:1px solid var(--line);text-align:center}
.slot .cnt{position:absolute;top:4px;right:7px;font-weight:800;color:var(--brass2)}.slot .nm{font-size:11px}.slot button{padding:2px 8px;font-size:11px}
.eqrow{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(212,165,74,.12);flex-wrap:wrap}
.slotname{width:40px;text-transform:uppercase;font-size:10px;color:var(--dim);letter-spacing:.08em}
.eqrow .dim{font-size:11px;flex:1 1 100%;padding-left:48px}.eqrow button{margin-left:auto;padding:2px 8px;font-size:11px}
.dur{width:60px;height:5px;border-radius:3px;background:rgba(0,0,0,.4);overflow:hidden}.dur i{display:block;height:100%;background:var(--green)}
.charhead{display:flex;gap:12px;align-items:center;margin-top:10px}.portrait{width:96px;height:96px;border-radius:12px;border:2px solid var(--brass);image-rendering:pixelated}
.rank{color:var(--brass2);font-family:var(--serif);font-weight:700}.nw{margin-top:4px}.nw b{color:var(--green);font-size:15px}
.chart{width:100%;margin-top:6px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(212,165,74,.15)}
.skill{margin:8px 0}.skill .lvl{float:right;color:var(--brass2);font-weight:700}.xpbar{height:7px;border-radius:4px;background:rgba(0,0,0,.4);margin:4px 0;overflow:hidden}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#7a5a20,#f3cc6e)}
.rep{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,#c84a3a,#4a4038 50%,#5aa04a)}.rep i{position:absolute;top:-4px;width:6px;height:18px;margin-left:-3px;background:#fff;border-radius:3px;box-shadow:0 0 6px #000}
table{width:100%;border-collapse:collapse}td,th{padding:5px 4px;border-bottom:1px solid rgba(212,165,74,.12);text-align:left;vertical-align:middle}th{font-size:10px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.kv td:last-child{text-align:right;font-weight:600}
.achs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ach{padding:7px 8px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);opacity:.45;display:grid;grid-template-columns:22px 1fr;column-gap:6px}
.ach span{grid-row:span 2;filter:grayscale(1)}.ach b{font-size:11px}.ach small{color:var(--dim);font-size:10px}.ach.got{opacity:1;border-color:var(--brass);background:linear-gradient(135deg,rgba(212,165,74,.18),rgba(0,0,0,.2))}.ach.got span{filter:none}
.deed{padding:9px 11px;border-radius:9px;background:rgba(0,0,0,.25);border:1px solid var(--line);margin:6px 0}.deed>div{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap}
.deed.offer{border-color:var(--brass2);background:rgba(212,165,74,.1)}
.dep{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.05);font-size:11px}.dep .ico{width:16px;height:16px}.vein{color:#fff;background:#b8862a;padding:0 4px;border-radius:3px;font-size:9px}
.chk{display:flex;gap:8px;align-items:center;cursor:pointer}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}.chip{padding:3px 10px;border-radius:12px;font-size:11px}.chip.on{background:var(--brass);color:#1a1208}
.journal .je,.je{padding:6px 8px 6px 10px;border-left:3px solid var(--line2);margin:4px 0;background:rgba(0,0,0,.2);border-radius:4px;font-size:12px}.jt{display:block;font-size:10px;color:var(--dim)}
.tabs{display:flex;gap:4px;margin:10px 0 6px;border-bottom:1px solid var(--line);padding-bottom:6px;flex-wrap:wrap}.tab{background:transparent;border-color:transparent}.tab.on{background:rgba(212,165,74,.18);border-color:var(--line2);color:var(--brass2)}
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}.stats4>div{padding:8px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid var(--line);text-align:center}.stats4 small{display:block;color:var(--dim);font-size:10px}.stats4 b{font-size:15px}
.census tr{cursor:pointer}.census tr:hover td{background:rgba(212,165,74,.08)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
.prices td{padding:4px}.prices .btns{white-space:nowrap}.prices .btns button{padding:2px 7px;font-size:11px;margin:1px}.spark{display:block;width:60px;height:20px}
.laws{display:flex;flex-direction:column;gap:6px;margin-top:8px}.law{padding:9px 11px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid var(--line)}.law p{margin:3px 0 0;color:var(--dim)}
.banner{padding:9px 12px;border-radius:8px;margin:8px 0;font-weight:600}.banner.bad{background:rgba(232,112,94,.15);border:1px solid var(--red);color:#ffb0a4}
.bigval{font:800 28px var(--sans);color:var(--brass2);margin:12px 0}.bigval small{display:block;font:500 12px var(--sans);color:var(--dim)}

/* ---------- building window ---------- */
#win{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,3,2,.55);opacity:0;pointer-events:none;transition:opacity .2s}
#win.show{opacity:1;pointer-events:auto}
.winbox{display:grid;grid-template-columns:230px 1fr;width:min(1020px,94vw);height:min(680px,88vh);overflow:hidden;transform:scale(.96);transition:transform .25s cubic-bezier(.2,1.3,.4,1)}
#win.show .winbox{transform:none}
.winleft{padding:18px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(212,165,74,.08),transparent);display:flex;flex-direction:column;gap:10px}
#winPortrait{width:194px;height:194px;border-radius:12px;border:2px solid var(--brass);image-rendering:pixelated;object-fit:cover;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.winleft h2{font-size:18px}#winGreet{margin:0;font-style:italic;color:var(--dim)}.leave{margin-top:auto}
#winBody{overflow:auto;padding:8px 22px 22px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.card{padding:14px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--line)}.card p{color:var(--dim);margin:6px 0 10px}
.job{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--line);margin:10px 0}.job>div{flex:1}
.prog{height:10px;border-radius:5px;background:rgba(0,0,0,.45);margin:6px 0;overflow:hidden}.prog i{display:block;height:100%;background:linear-gradient(90deg,#b8862a,#f3cc6e);transition:width .4s}
.office{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-top:12px;align-items:start}#plotmap{width:400px;height:300px;border-radius:8px;border:1px solid var(--line2);cursor:crosshair;image-rendering:pixelated;display:block;margin-bottom:6px}
.office button.big{display:block;width:100%;margin:8px 0}

/* ---------- dialogue ---------- */
#dialog{position:absolute;left:50%;bottom:90px;transform:translate(-50%,30px);width:min(720px,94vw);display:flex;gap:16px;padding:16px;opacity:0;pointer-events:none;transition:all .25s cubic-bezier(.2,1.2,.4,1)}
#dialog.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#dlgPortrait{width:128px;height:128px;border-radius:12px;border:2px solid var(--brass);image-rendering:pixelated;flex:none}
.dlgmain{flex:1}#dlgName{font:700 17px var(--serif);color:var(--brass2)}#dlgName small{font:600 11px var(--sans);margin-left:6px}#dlgMood{font-size:11px;color:var(--dim)}
#dlgText{font-size:15px;margin:8px 0 10px;min-height:44px;line-height:1.5}
#dlgOpts{display:flex;flex-direction:column;gap:4px}#dlgOpts button{text-align:left;background:rgba(0,0,0,.25);border-color:var(--line)}#dlgOpts .k{display:inline-block;width:18px;color:var(--brass2);font-weight:800}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none;place-items:center;z-index:20}
.screen.show{display:grid;animation:fadein .4s}
@keyframes fadein{from{opacity:0}}
#loading{background:radial-gradient(#1e160e,#080604)}.loadbox{text-align:center;font-family:var(--serif);color:var(--brass2);font-size:16px}
.spinner{width:46px;height:46px;margin:0 auto 14px;border:3px solid var(--line);border-top-color:var(--brass2);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
#title,#pause{background:radial-gradient(ellipse at 30% 50%,rgba(0,0,0,.15),rgba(5,3,2,.75))}
#title{justify-items:start;padding-left:8vw}
.titlebox{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.titlebox.small{align-items:center}
.logo{font-family:var(--serif);font-weight:900;line-height:.85;display:flex;flex-direction:column;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.logo span{background:linear-gradient(180deg,#fff2c0 10%,#f3cc6e 45%,#a8701e 55%,#f3cc6e 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(60,35,10,.6)}
.logo .l1{font-size:110px;letter-spacing:.08em}.logo .l2{font-size:110px;letter-spacing:.04em}.logo .amp{font-size:54px;margin:4px 0 4px 8px;font-style:italic}
.logo.sm .l1,.logo.sm .l2{font-size:56px}.logo.sm .amp{font-size:28px}
.sub{font:600 18px var(--serif);color:var(--text);margin:4px 0 10px;letter-spacing:.06em;text-shadow:0 2px 8px #000}
.menu{display:flex;flex-direction:column;gap:9px;width:260px}.menu button{padding:12px 18px;font:700 15px var(--serif);letter-spacing:.06em;text-align:left;background:rgba(20,14,8,.78);backdrop-filter:blur(4px)}
.menu button.gold{background:linear-gradient(180deg,#e9bd5c,#b8862a)}
.foot{color:var(--dim);font-style:italic;margin-top:14px;text-shadow:0 1px 4px #000}
.sheet{width:min(980px,94vw);max-height:90vh;overflow:auto;padding:24px 28px}.sheet.narrow{width:min(520px,94vw)}.sheet h1{font-size:28px;margin-bottom:14px}
#newgame,#howto,#settings{background:rgba(5,3,2,.7)}
.creator{display:grid;grid-template-columns:260px 1fr;gap:26px}
.cleft{display:flex;flex-direction:column;gap:8px}#ngPortrait{width:180px;height:180px;border-radius:12px;border:2px solid var(--brass);image-rendering:pixelated;align-self:center}
.cleft label,.cright label{font:700 11px var(--sans);color:var(--brass);letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;gap:5px;margin-top:6px}
.swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.sw{width:26px;height:26px;border-radius:50%;padding:0;border:2px solid rgba(0,0,0,.5)}.sw.on{border-color:var(--brass2);box-shadow:0 0 0 2px var(--brass2)}
#ngBgs{display:grid;gap:8px}.bgcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px 14px;background:rgba(0,0,0,.3)}
.bgcard b{font:700 15px var(--serif);color:var(--brass2)}.bgcard small{color:var(--text);font-size:12px;font-weight:500}.bgcard span{font-size:11px;color:var(--dim)}
.bgcard.on{border-color:var(--brass2);background:linear-gradient(135deg,rgba(212,165,74,.22),rgba(0,0,0,.3));box-shadow:0 0 0 1px var(--brass2) inset}
.howto .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.howto h3{font-size:15px;margin:10px 0 6px}.howto ul{margin:0;padding-left:18px;color:var(--text)}.howto li{margin:5px 0}
.set{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:12px 0}.set label{flex:1}
#fader{position:absolute;inset:0;display:grid;place-items:center;background:#000;opacity:0;pointer-events:none;z-index:15}
#fader span{font:700 22px var(--serif);color:var(--brass2)}
#fader.go{animation:fade 1.6s}
@keyframes fade{0%{opacity:0}25%{opacity:.92}70%{opacity:.92}100%{opacity:0}}
#tooltip{position:fixed;z-index:50;max-width:280px;padding:7px 10px;border-radius:7px;background:rgba(14,10,6,.96);border:1px solid var(--line2);font-size:12px;pointer-events:none;opacity:0;transition:opacity .12s}
#tooltip.show{opacity:1}
@media (max-width:900px){#panel{top:14px;width:calc(100vw - 28px)}#hudTR .mm{display:none}#feed{display:none}#hotbar button{min-width:44px;font-size:0}#hotbar button span{font-size:18px}.winbox{grid-template-columns:1fr}.winleft{display:none}.logo .l1,.logo .l2{font-size:64px}.creator,.howto .cols{grid-template-columns:1fr}#hudTC{top:auto;bottom:80px}}

/* ---------- v2: goals, events, businesses, board, elections, leaderboard ---------- */
#toasts{top:118px}
#goalBox{position:absolute;left:14px;top:142px;width:300px;padding:9px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
#goalBox small{font-size:9px;letter-spacing:.12em;color:var(--brass)}#goalBox b{font:700 14px var(--serif);color:var(--text)}#goalBox span{font-size:11px;color:var(--dim)}
.gbar{height:6px;border-radius:3px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:4px}.gbar i{display:block;height:100%;background:linear-gradient(90deg,#4a8a3a,#9ad672);transition:width .4s}
#eventBar{position:absolute;left:50%;top:76px;transform:translateX(-50%);display:flex;gap:6px}
.ev{display:flex;gap:5px;align-items:center;padding:3px 10px 3px 7px;border-radius:14px;background:rgba(40,20,10,.85);border:1px solid #e0a040;font-size:12px;font-weight:600;animation:tin .4s;cursor:default}
.ev span{color:#ffd890}
#mayorBadge{position:absolute;left:14px;top:236px;padding:6px 12px;font-size:12px}
.c-event{border-color:#ffb040}.toast.event{border-color:#ffb040;background:linear-gradient(90deg,#3a2408,#1e160c)}.toast.event .ti{background:#ffb040}
.recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:8px 0}
.rcard{display:flex;flex-direction:column;gap:5px;padding:10px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.rcard.ok{border-color:rgba(154,214,114,.55)}.rout{display:flex;gap:8px;align-items:center}.rout b{font-size:13px}.rin{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:700}.rcard button{align-self:flex-start}
.orders{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.order{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.order .btns{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pollrow{display:grid;grid-template-columns:150px 1fr 50px;gap:10px;align-items:center;margin:6px 0}.pollrow.big{grid-template-columns:200px 1fr 60px;font-size:15px}
.pbar{height:14px;border-radius:7px;background:rgba(0,0,0,.4);overflow:hidden}.pbar i{display:block;height:100%;border-radius:7px;transition:width 1.6s cubic-bezier(.2,.9,.3,1)}
#elect{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,3,2,.7);opacity:0;pointer-events:none;transition:opacity .3s;z-index:12}
#elect.show{opacity:1;pointer-events:auto}.electbox{width:min(640px,92vw);padding:26px 30px}.electbox h1{font-size:30px;margin-bottom:6px}.electbox h2{margin:18px 0 14px;font-size:22px}
.lb td{padding:5px 6px}.lb tr.you td{background:rgba(243,204,110,.14);color:var(--brass2);font-weight:700}.lb td:last-child{text-align:right;font-weight:700}
.goal{padding:8px 10px;border-radius:8px;margin:5px 0;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:2px}
.goal.done{opacity:.55}.goal.now{border-color:var(--brass2);background:linear-gradient(135deg,rgba(212,165,74,.16),rgba(0,0,0,.2))}.goal.locked{opacity:.4}.goal small{color:var(--dim)}
.policies td{padding:7px 6px}.policies .btns{white-space:nowrap;text-align:right}.policies .pv{display:inline-block;min-width:110px;text-align:center}
.card.done{border-color:var(--green);background:rgba(154,214,114,.08)}
@media (max-width:900px){#goalBox{display:none}#eventBar{top:auto;bottom:140px}}

/* ---------- v3: work mini-games, eat button ---------- */
#mg{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,3,2,.72);opacity:0;pointer-events:none;transition:opacity .2s;z-index:14}
#mg.show{opacity:1;pointer-events:auto}
.mgbox{width:min(820px,96vw);padding:14px 18px 12px;display:flex;flex-direction:column;gap:10px}
.mgbox header{display:flex;gap:12px;align-items:center}.mgbox h2{font-size:18px}.mgbox header p{margin:2px 0 0;color:var(--dim);font-size:12px}
#mgCanvas{width:100%;aspect-ratio:760/400;border-radius:10px;border:1px solid var(--line2);cursor:pointer;background:#120a06;touch-action:none}
.mgbox footer{display:flex;gap:8px;align-items:center;justify-content:flex-end}#mgStatus{margin-right:auto;color:var(--dim);font-size:12px}
#eatBtn{margin-top:6px;padding:3px 10px;font-size:12px}#eatBtn.pulse{animation:pulse 1s infinite;border-color:var(--warn)}
.worders td{vertical-align:middle}
#dlgOpts button.gold{background:linear-gradient(180deg,#e9bd5c,#b8862a);color:#2a1a08;border-color:#ffe29a;font-weight:700}#dlgOpts button.gold .k{color:#5a3a08}
/* ---- expansion: health, quick bar, quests, bounties, workshop ---- */
.bar.hp i{background:linear-gradient(90deg,#b8302a,#f0605a)}.bar.sta i{background:linear-gradient(90deg,#4a9a6a,#9ae0a0)}
#goalBox{top:184px}#mayorBadge{top:278px}
#quickbar{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);display:flex;gap:5px;padding:5px}
#quickbar .qs,#quickbar .qw{position:relative;width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}
#quickbar .qs .ico{width:30px;height:30px}#quickbar .qs.empty{opacity:.35}
#quickbar .qs b{position:absolute;right:3px;bottom:1px;font:800 11px var(--sans);text-shadow:0 1px 2px #000}
#quickbar .qs kbd{position:absolute;left:2px;top:2px;min-width:12px;padding:0 3px;font-size:9px;border-bottom-width:1px}
#quickbar .qw{width:auto;min-width:64px;padding:0 6px;grid-auto-flow:column;gap:6px;border-color:var(--line2);background:rgba(212,165,74,.1);cursor:default}
#quickbar .qw .ico{width:30px;height:30px}#quickbar .qw small{font:700 11px var(--sans);color:var(--brass2)}#quickbar .fist{font-size:22px}
#wantedBar{position:absolute;left:50%;top:112px;transform:translateX(-50%);font:800 14px var(--serif);color:#ffd23f;text-shadow:0 2px 4px #000;letter-spacing:.08em;pointer-events:none}
#wantedBar:empty{display:none}
#questTrack{position:absolute;right:14px;top:276px;width:270px;padding:9px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;border-color:rgba(255,154,64,.55)}
#questTrack small{font-size:9px;letter-spacing:.12em;color:#ff9a40}#questTrack b{font:700 14px var(--serif);color:var(--text)}#questTrack span{font-size:11px;color:var(--dim)}
.deed.poster{background:linear-gradient(180deg,rgba(232,216,168,.1),rgba(232,216,168,.04));border-color:rgba(232,216,168,.35)}
.workshop{width:min(1100px,94vw)}
.wsgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin:10px 0}
#wsText{width:100%;height:52vh;box-sizing:border-box;resize:none;background:rgba(0,0,0,.45);color:#f1e4c8;border:1px solid var(--line2);border-radius:8px;padding:10px;font:12px/1.5 Consolas,'Courier New',monospace;user-select:text;outline:none}
.wsout{height:52vh;overflow:auto;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;user-select:text}
.wshelp{margin:0;white-space:pre-wrap;font:11px/1.5 Consolas,'Courier New',monospace;color:var(--text)}
@media (max-width:900px){#questTrack{display:none}.wsgrid{grid-template-columns:1fr}#quickbar{bottom:70px}}