:root{
  --wood:#2c1d10;
  --wood2:#1b1209;
  --panel:#34230f;
  --gold:#d8b25a;
  --gold-d:#8a6520;
  --gold-l:#f2dd9b;
  --beige:#e9d6a8;
  --ink:#1c1206;
  --red:#c0392b;
  --blue:#2f6fd8;
  --green:#5aa83a;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:#05080a;
  font-family:"Trebuchet MS","Segoe UI",Tahoma,sans-serif;color:var(--beige);
  user-select:none;-webkit-user-select:none;}
#game-root{position:fixed;inset:0;}
#game-root canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;}

#ui-overlay{position:fixed;inset:0;pointer-events:none;z-index:10;}
.hidden{display:none !important;}
img{image-rendering:pixelated;}

/* ============ ornate panel base ============ */
.panel{
  background:
    linear-gradient(180deg,rgba(86,58,24,.96),rgba(34,22,12,.98));
  border:3px solid var(--gold-d);
  border-radius:7px;
  box-shadow:0 0 0 2px #120c05, inset 0 0 0 2px rgba(216,178,90,.55),
             inset 0 2px 6px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.55);
  pointer-events:auto;
}

/* ============ TOP RESOURCE BAR ============ */
#topbar{
  position:absolute;top:0;left:0;right:0;height:46px;
  display:flex;align-items:center;gap:6px;padding:0 10px;
  background:linear-gradient(180deg,#3c2913,#1b1108 85%);
  border-bottom:3px solid var(--gold-d);
  box-shadow:inset 0 -2px 0 rgba(216,178,90,.4),0 3px 8px rgba(0,0,0,.6);
  pointer-events:auto;
}
.res{display:flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;
  background:linear-gradient(180deg,rgba(20,14,7,.7),rgba(0,0,0,.35));
  border:1px solid var(--gold-d);border-radius:5px;min-width:74px;
  box-shadow:inset 0 0 0 1px rgba(216,178,90,.25);}
.res-ic{width:26px;height:26px;}
.res span{font-size:17px;font-weight:bold;color:var(--gold-l);
  text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums;}
.pop-ic{font-size:18px;color:var(--gold-l);}
#res-pop{min-width:70px;}
#topbar-spacer{flex:1;}
#age-badge{padding:5px 14px;background:linear-gradient(180deg,#6a4a18,#3a2710);
  border:2px solid var(--gold);border-radius:5px;color:var(--gold-l);
  font-weight:bold;letter-spacing:1px;text-shadow:1px 1px 0 #000;}
.top-btn{width:30px;height:30px;border-radius:5px;border:2px solid var(--gold-d);
  background:linear-gradient(180deg,#5a3d18,#2c1d0e);color:var(--gold-l);
  font-weight:bold;font-size:16px;cursor:pointer;}
.top-btn:hover{background:linear-gradient(180deg,#7a531f,#3c2812);}

/* ============ BOTTOM HUD ============ */
#bottom{position:absolute;left:0;right:0;bottom:0;height:168px;
  display:flex;align-items:flex-end;gap:8px;padding:8px;pointer-events:none;}
#bottom .panel{height:100%;pointer-events:auto;}

#info-panel{width:300px;display:flex;padding:8px;gap:8px;position:relative;}
#info-portrait{width:84px;height:84px;flex:0 0 84px;border:2px solid var(--gold-d);
  border-radius:5px;background:radial-gradient(circle at 50% 35%,#46341a,#15100a);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
#portrait-img{max-width:100%;max-height:100%;}
#info-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
#info-name{font-size:16px;font-weight:bold;color:var(--gold-l);text-shadow:1px 1px 0 #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#info-sub{font-size:11px;color:#cdb892;}
#info-stats{font-size:12px;line-height:1.5;color:var(--beige);}
#info-stats b{color:var(--gold-l);}
#info-hpbar{height:9px;background:#0c0805;border:1px solid #000;border-radius:3px;
  overflow:hidden;margin-top:2px;}
#info-hpbar i{display:block;height:100%;width:100%;
  background:linear-gradient(180deg,#7ee05a,#3f9a2c);transition:width .15s;}
#info-queue{display:flex;gap:3px;flex-wrap:wrap;margin-top:2px;}
.q-chip{width:20px;height:20px;border:1px solid var(--gold-d);border-radius:3px;
  background:#1c130a;overflow:hidden;position:relative;}
.q-chip img{width:100%;height:100%;object-fit:contain;}
.q-chip.q-prog::after{content:"";position:absolute;left:0;bottom:0;height:3px;
  background:var(--gold);width:var(--p,0%);}
#info-multi{position:absolute;inset:8px;display:flex;flex-wrap:wrap;gap:3px;
  align-content:flex-start;overflow:hidden;background:rgba(10,7,3,.4);}
.mini-port{width:34px;height:34px;border:1px solid var(--gold-d);border-radius:3px;
  background:#15100a;overflow:hidden;}
.mini-port img{width:100%;height:100%;object-fit:contain;}

#command-panel{flex:1;min-width:0;padding:8px;}
#cmd-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:6px;height:100%;}
.cmd{position:relative;border:2px solid var(--gold-d);border-radius:5px;
  background:linear-gradient(180deg,#4a341a,#241708);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:3px;overflow:hidden;color:var(--beige);
  box-shadow:inset 0 0 0 1px rgba(216,178,90,.25);}
.cmd:hover{background:linear-gradient(180deg,#664823,#33210e);border-color:var(--gold);}
.cmd:active{transform:translateY(1px);}
.cmd.disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.5);}
.cmd img{width:34px;height:34px;}
.cmd .cmd-ico{font-size:24px;line-height:1;}
.cmd .cmd-lbl{font-size:10px;text-align:center;line-height:1.05;color:var(--gold-l);
  text-shadow:1px 1px 0 #000;}
.cmd .cmd-cost{position:absolute;bottom:1px;right:3px;font-size:9px;color:#ffe9a8;}

#minimap-panel{width:236px;padding:8px;display:flex;align-items:center;justify-content:center;}
#minimap{width:100%;height:100%;border:2px solid var(--gold-d);border-radius:4px;
  image-rendering:pixelated;background:#0a140a;cursor:crosshair;}

/* toast */
#toast{position:absolute;top:60px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:5px;align-items:center;pointer-events:none;}
.toast-msg{background:rgba(20,12,5,.9);border:1px solid var(--gold-d);
  padding:6px 16px;border-radius:5px;color:var(--gold-l);font-size:13px;
  text-shadow:1px 1px 0 #000;animation:toastIn .25s ease;}
.toast-msg.warn{border-color:#c0392b;color:#ffb4a8;}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;}}

#place-banner{position:absolute;top:56px;left:50%;transform:translateX(-50%);
  background:rgba(20,12,5,.92);border:2px solid var(--gold);padding:6px 18px;
  border-radius:6px;color:var(--gold-l);font-weight:bold;pointer-events:none;}

/* ============ LOADING ============ */
#loading-screen{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 40%,#241a0d,#0a0805);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;pointer-events:auto;z-index:30;}
.ls-title{font-size:46px;font-weight:bold;color:var(--gold-l);letter-spacing:6px;
  text-shadow:2px 3px 0 #000,0 0 18px rgba(216,178,90,.4);}
.ls-sub{font-size:14px;letter-spacing:5px;color:var(--gold);}
.ls-bar{width:min(60vw,340px);height:14px;background:#0c0805;border:2px solid var(--gold-d);
  border-radius:7px;overflow:hidden;margin-top:14px;}
#ls-fill{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#8a6520,#f2dd9b);transition:width .2s;}
.ls-pct{font-size:13px;color:var(--beige);}

/* ============ START GATE ============ */
#start-screen{position:absolute;inset:0;pointer-events:auto;z-index:25;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;}
#start-card{max-width:560px;margin:0 20px;padding:26px 30px;text-align:center;
  background:linear-gradient(180deg,rgba(40,27,13,.93),rgba(15,10,5,.96));
  border:3px solid var(--gold);border-radius:12px;
  box-shadow:0 0 0 3px #120c05,0 14px 50px rgba(0,0,0,.7),inset 0 0 30px rgba(0,0,0,.5);}
#start-card h1{font-size:50px;color:var(--gold-l);letter-spacing:8px;
  text-shadow:2px 3px 0 #000,0 0 22px rgba(216,178,90,.5);}
.tagline{margin:4px 0 16px;color:var(--gold);letter-spacing:3px;font-size:13px;}
.how{font-size:13px;line-height:1.8;color:var(--beige);background:rgba(0,0,0,.3);
  border:1px solid var(--gold-d);border-radius:7px;padding:12px 14px;margin-bottom:18px;text-align:left;}
.how b{color:var(--gold-l);}
#btn-start{font-size:22px;font-weight:bold;letter-spacing:3px;color:#2a1c08;cursor:pointer;
  padding:12px 46px;border:none;border-radius:8px;
  background:linear-gradient(180deg,#f2dd9b,#cf9f3e);
  box-shadow:0 5px 0 #7a5418,0 8px 16px rgba(0,0,0,.5);}
#btn-start:hover{filter:brightness(1.07);}
#btn-start:active{transform:translateY(3px);box-shadow:0 2px 0 #7a5418;}
.diff{margin-top:14px;font-size:12px;color:#cdb892;}

/* ============ HELP ============ */
#help-modal{position:absolute;inset:0;background:rgba(0,0,0,.6);pointer-events:auto;
  display:flex;align-items:center;justify-content:center;z-index:28;}
.help-box{max-width:560px;margin:0 20px;padding:24px 28px;
  background:linear-gradient(180deg,rgba(40,27,13,.97),rgba(15,10,5,.98));
  border:3px solid var(--gold);border-radius:12px;box-shadow:0 0 0 3px #120c05;}
.help-box h2{color:var(--gold-l);margin-bottom:12px;letter-spacing:2px;}
.help-box ul{margin-left:18px;line-height:1.85;font-size:13px;}
.help-box b{color:var(--gold-l);}
.help-box button{margin-top:16px;padding:9px 26px;border:2px solid var(--gold-d);border-radius:7px;
  background:linear-gradient(180deg,#5a3d18,#2c1d0e);color:var(--gold-l);font-weight:bold;cursor:pointer;}

/* ============ END ============ */
#end-screen{position:absolute;inset:0;background:rgba(0,0,0,.72);pointer-events:auto;
  display:flex;align-items:center;justify-content:center;z-index:30;}
#end-card{text-align:center;padding:34px 50px;
  background:linear-gradient(180deg,rgba(40,27,13,.96),rgba(15,10,5,.98));
  border:3px solid var(--gold);border-radius:14px;box-shadow:0 0 0 3px #120c05,0 14px 50px rgba(0,0,0,.7);}
#end-title{font-size:54px;letter-spacing:6px;text-shadow:2px 3px 0 #000;}
#end-title.win{color:#ffe07a;}
#end-title.lose{color:#ff8a7a;}
#end-sub{margin:10px 0 22px;color:var(--beige);}
#btn-restart{font-size:18px;font-weight:bold;padding:11px 38px;border:none;border-radius:8px;cursor:pointer;
  color:#2a1c08;background:linear-gradient(180deg,#f2dd9b,#cf9f3e);box-shadow:0 5px 0 #7a5418;}
#btn-restart:active{transform:translateY(3px);box-shadow:0 2px 0 #7a5418;}

/* ============ responsive ============ */
@media (max-width:860px){
  #bottom{height:132px;}
  #info-panel{width:210px;}
  #minimap-panel{width:160px;}
  #cmd-grid{grid-template-columns:repeat(5,1fr);gap:4px;}
  .cmd img{width:26px;height:26px;}
  .res{min-width:58px;padding:2px 7px 2px 4px;}
  .res-ic{width:20px;height:20px;}
  .res span{font-size:14px;}
  #age-badge{padding:3px 8px;font-size:12px;}
  .ls-title,#start-card h1{font-size:34px;}
}
@media (max-width:560px){
  #info-panel{width:150px;}
  #info-portrait{width:54px;height:54px;flex-basis:54px;}
  #minimap-panel{width:120px;}
  #cmd-grid{grid-template-columns:repeat(4,1fr);}
}