/* Battle-only garden UI: chalk lines, warm stone, sage and ochre. */
#hud { --paper:#ece6d6; --ink:#423f34; --line:#a49c86; --sage:#7b9072; --ochre:#c0a05b; color:var(--ink); }
#hud-top { top:10px; left:212px; right:14px; height:42px; padding:0; gap:8px; background:none; }
#hud-gold { display:flex; align-items:center; gap:7px; min-width:110px; font-size:14px; }
#hud-gold .currency-mark { width:20px; height:20px; border:1.5px solid #a07f33; border-radius:50%; color:#876c31; text-align:center; font-family:Georgia,serif; font-weight:700; line-height:18px; }
#hud-gold b { color:#685226; font-variant-numeric:tabular-nums; }
#hud-income { display:none; }
#hud-top > #hud-gold, #hud-castles, #hud-view3d { padding:8px 12px; background:#ece6d6ed; border:1px solid #c7bea6; border-radius:7px; box-shadow:0 2px 8px #24221924; }
#hud-castles { flex:1; gap:10px; height:42px; }
.cbar { width:clamp(58px, 10vw, 160px); height:10px; border-radius:4px; background:#5d584c45; border:0; overflow:visible; }
.cbar.blue div { background:#7e9b93; border-radius:4px; }
.cbar.red div { background:#b97563; border-radius:4px; }
.cbar span { top:-4px; line-height:17px; color:#fffaf0; font-size:10px; font-weight:600; text-shadow:0 1px 2px #403c32; }
#hud-time { color:#575747; font-size:13px; font-variant-numeric:tabular-nums; }
#hud-view3d { gap:3px; padding:3px; }
#hud .btn, #garden-economy .btn, #campaign-training .btn { background:#e6dfcfeF; color:#49473c; border:1px solid #a99f88; border-radius:6px; box-shadow:inset 0 0 0 2px #f6efdf55; }
#hud .btn:hover, #garden-economy .btn:hover, #campaign-training .btn:hover { background:#f4eedf; border-color:#776f5b; }
#hud .btn.primary { background:#b8c2a0; color:#353e2e; border-color:#758164; }
#hud .btn.danger { background:#c39a83; border-color:#987660; }
#hud .btn:focus-visible, .card:focus-visible { outline:2px solid #645538; outline-offset:3px; }
#hud-commander { position:absolute; left:14px; top:10px; width:186px; min-height:98px; padding:9px; display:flex; align-items:center; gap:9px; border:1px solid #c7bea6; border-radius:9px; background:#ece6d6ed; box-shadow:0 2px 8px #24221924; }
#commander-home { flex:0 0 56px; height:66px; padding:0; cursor:pointer; border:1px solid #9e9278; border-radius:28px 28px 9px 9px; background:#cec8b5; overflow:hidden; }
#commander-home img { display:block; width:100%; height:100%; object-fit:cover; }
#commander-home img.recovering { filter:grayscale(1); opacity:.55; }
.commander-info { min-width:0; flex:1; }
#commander-name { font-size:13px; font-weight:650; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#commander-status { display:block; font-size:10px; color:#77725f; line-height:1.5; margin-top:5px; }
#commander-health { margin-top:6px; height:4px; background:#77745d44; border-radius:3px; overflow:hidden; }
#commander-health-fill { height:100%; background:#799778; }
#hud-resources { position:absolute; top:62px; left:212px; right:14px; min-height:46px; padding:7px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #c7bea6; border-radius:7px; background:#ece6d6ed; box-shadow:0 2px 8px #24221924; }
[hidden] { display:none !important; }
.resource-chip { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.resource-chip svg { flex:0 0 22px; width:22px; height:22px; color:#767d59; }
.resource-wood svg { color:#8c7057; }.resource-stone svg {color:#827e74;}.resource-iron svg {color:#737c81;}.resource-ready svg {color:#9b8756;}
.resource-label { font-size:11px; color:#78715f; }
.resource-chip b { font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; }
#hud-resources { justify-content:flex-start; background:#e2d8baef; }
#material-inventory { order:-1; display:grid; grid-template-columns:repeat(6,48px); gap:4px; }
.material-slot { position:relative; height:48px; background:#d7cfaf; border:1px solid #a79b7e; border-radius:4px; box-shadow:inset 0 0 0 3px #eee4c477; }
.material-slot svg { position:absolute; width:42px; height:42px; left:3px; top:3px; }
.material-slot small { position:absolute; left:4px; top:1px; font-size:9px; color:#65614d; }
.material-slot b { position:absolute; right:3px; bottom:0; font-size:14px; color:#464136; text-shadow:1px 1px #efe6ca,-1px -1px #efe6ca; }
#hud-bottom { left:14px; right:14px; bottom:10px; padding:0 0 env(safe-area-inset-bottom); background:none; gap:12px; }
#build-bar, #spell-bar { padding:6px; gap:5px; border:1px solid #c7bea6; border-radius:9px; background:#e1dac7d9; box-shadow:0 3px 12px #24221932; }
#build-bar { min-width:0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#9f977c transparent; touch-action:pan-x; }
#spell-bar { flex:0 0 auto; }
#hud .card { flex:0 0 58px; width:58px; height:65px; border-radius:5px; background:#ded7bf; border:1px solid #a79c7f; color:#4d493b; box-shadow:inset 0 0 0 3px #f2ecd545; padding:3px; font-family:inherit; }
#hud .card:nth-child(3n+2) { background:#c9d0b9; }#hud .card:nth-child(3n+3) {background:#d2c4ae;}
#hud .card.spell { background:#c2cdcb; }
#hud .card.sel { background:#eee2b8; border-color:#8b7446; box-shadow:inset 0 0 0 2px #b29a57,0 0 0 2px #fff7d3; }
#hud .card.dis { opacity:.55; }
#hud .card .ic { font-size:22px; filter:saturate(.62); }
#hud .card .nm { color:#4d493b; font-size:10px; }
#hud .card .cost { color:#7c6431; font-size:10px; }
#bld-info, #fate-offer { background:#ece6d6f5; border-color:#b7ab91; color:#423f34; }
#bld-info { bottom:96px; max-width:calc(100vw - 36px); font-size:12px; }
#mode-tip { top:118px; background:#514f43df; color:#faf4e2; border-radius:6px; }
#campaign-status { position:fixed; left:14px; top:120px; max-width:235px; padding:10px 12px; background:#ece6d6e8; border:1px solid #c7bea6; color:#5b594a; white-space:pre-line; z-index:20; border-radius:7px; pointer-events:none; font-size:11px; line-height:1.7; }
#campaign-training { position:fixed; right:14px; top:120px; max-width:300px; padding:12px; background:#ece6d6f2; border:1px solid #c7bea6; color:#49473c; z-index:20; border-radius:7px; font-size:12px; }
#campaign-training p {margin-bottom:8px;}#campaign-training .btn {padding:7px 9px; font-size:11px; margin:2px;}
#garden-economy { position:fixed; left:14px; top:230px; z-index:25; max-width:min(560px,92vw); color:#49473c; }
#garden-economy.is-open { top:116px; }
#garden-economy > .btn { padding:8px 14px; font-size:12px; }
#garden-economy-body {background:#ece6d6f7; padding:14px; border:1px solid #c7bea6; border-radius:7px; max-height:calc(100vh - 240px); overflow:auto; font-size:12px; line-height:1.65; box-shadow:0 3px 16px #25221633; }
#garden-economy-body .btn { padding:7px 9px; font-size:11px; margin:3px 4px 3px 0; }
#garden-economy-body p { margin:8px 0; }
#garden-economy-body label { display:block; margin:10px 0; font-weight:600; }
#garden-economy-body select, #garden-economy-body input { max-width:100%; border:1px solid #ada68f; border-radius:5px; padding:7px; background:#f7f0df; color:#49473c; }
#garden-economy-body details { border-top:1px solid #c7bea6; margin-top:12px; padding-top:8px; }
#garden-economy-body summary { cursor:pointer; color:#6d7058; }
#garden-economy-body .btn[aria-pressed="true"] { background:#798a63; color:#fff9e9; }
body:not(.in-battle) #garden-economy, body:not(.in-battle) #campaign-status, body:not(.in-battle) #campaign-training { display:none; }
@media (max-width:1000px) {
  #hud-commander { width:164px; } #hud-top, #hud-resources {left:188px;}
  #hud-top {gap:5px;} #hud-top > #hud-gold { min-width:80px; padding:8px; }#hud-top .btn {padding:6px;font-size:11px;}
  #hud-castles {padding:8px;gap:6px;} #hud-resources {padding:8px;gap:6px;} .resource-chip {gap:4px;}.resource-label {font-size:10px;}.resource-chip b {font-size:13px;}
  #hud .card {flex-basis:52px;width:52px;height:60px;} #build-bar, #spell-bar {gap:4px;padding:5px;}
}
@media (max-height:580px) and (orientation:landscape) {
  #hud-commander {min-height:82px;padding:6px; }#commander-home {flex-basis:46px;height:58px;}
  #hud-top {height:34px;} #hud-castles {height:34px;} #hud-resources {top:51px;min-height:41px;}
  #campaign-status, #campaign-training {top:101px;} #campaign-status {max-width:210px;padding:7px 10px;font-size:10px;line-height:1.5;}
  #garden-economy {top:190px;} #garden-economy.is-open {top:101px;} #garden-economy-body {max-height:calc(100vh - 220px);}
  #hud-bottom {bottom:5px;} #hud .card {height:53px;}#hud .card .ic {font-size:18px;}#hud .card .nm {font-size:9px;}
  #bld-info {bottom:76px;} #mode-tip {top:101px;}
}
@media (max-width:760px) {
  #material-inventory {grid-template-columns:repeat(6,40px);gap:3px;}.material-slot {height:43px;}.material-slot svg {width:36px;height:36px;}.material-slot b {font-size:12px;}
  #hud-commander {width:140px;left:8px;}#hud-top,#hud-resources {left:156px;right:8px;}
  #commander-home {flex-basis:40px;}#commander-name {font-size:11px;}#commander-status {font-size:9px;}
  #hud-view3d #btn-mode-toggle {display:none;}#hud-top > #hud-gold {min-width:65px;padding:5px;font-size:12px;}
  .resource-chip svg {width:17px;height:17px;flex-basis:17px;}.resource-label {display:none;}.resource-chip b {font-size:12px;}
  #hud-bottom {left:8px;right:8px;gap:6px;}#hud .card {flex-basis:48px;width:48px;}#spell-bar .card {width:44px;flex-basis:44px;}
}
/* The two inventory rows sit above the campaign controls at every viewport. */
#campaign-status, #campaign-training {top:182px;}
#garden-economy {top:290px;} #garden-economy.is-open {top:182px;}
/* A single mobile control board: no folding summaries or native dropdowns. */
#garden-economy.is-open {position:fixed;inset: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));width:min(860px,calc(100vw - 24px));max-height:none;margin:auto;z-index:80;overflow:auto;padding:16px;background:#eee4c9;border:2px solid #9c8868;border-radius:14px;box-shadow:0 10px 60px #18272199;}
#garden-economy .btn {min-height:48px;padding:12px 16px;border:2px solid #9d8f6c;border-radius:9px;white-space:normal;touch-action:manipulation;font-size:16px;background:#e0d4b3;color:#3f4839;margin:4px;}
.living-button-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 16px;}
#garden-economy button[aria-pressed="true"] {background:#718665;color:#fff7df;border-color:#526648;}
#garden-economy .living-hold {width:calc(100% - 8px);min-height:64px;background:#7f966a;color:#fff7df;touch-action:none;user-select:none;}
@media(max-width:600px){.living-button-grid{grid-template-columns:repeat(2,minmax(0,1fr));}#garden-economy.is-open{padding:10px;}}