/* Base layout, top bar, minimap, bottom panel, command cards */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:#0b0f0a;color:var(--parchment);font-family:var(--body);
  user-select:none;-webkit-user-select:none;touch-action:none}
canvas#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vig{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 55%,rgba(8,6,2,.42) 100%)}
.wood{background:var(--grain),var(--planks),linear-gradient(var(--wood-hi),var(--wood))}
#top{position:absolute;left:0;right:0;top:0;height:54px;display:flex;align-items:center;gap:6px;padding:0 6px;z-index:3;
  background:var(--grain),var(--planks),linear-gradient(#4b3524,#2a1b10);
  box-shadow:inset 0 -2px 0 var(--brass),inset 0 -4px 0 var(--brass-lo),0 4px 14px rgba(0,0,0,.55)}
#flagL{position:absolute;left:17.5%;top:2%;height:94%;transform:translateX(-50%);aspect-ratio:.9;background:center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));z-index:1}#logo::after{content:'Age of Yahee';position:absolute;left:30%;right:13%;white-space:nowrap;top:0;bottom:0;padding-bottom:3.4%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font:800 6.4cqw/1 'Cinzel','Georgia',serif;letter-spacing:.04em;text-transform:none;text-align:center;color:#fff4d6;text-shadow:0 2px 0 #2a1030,0 0 8px rgba(255,214,120,.35)}
#logo{position:relative;container-type:inline-size;display:none;flex:none;height:78px;align-self:flex-start;margin:4px 14px 0 4px;aspect-ratio:404/99;background:var(--u-title) center/100% 100% no-repeat;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55))}
#shield{flex:none;height:44px;aspect-ratio:121/97;background:var(--u-shield) center/100% 100% no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
#res{flex:1;min-width:0;display:flex;gap:5px;align-items:center;justify-content:center}
#ibs{display:flex;gap:7px;flex:none}
.ib{width:36px;height:36px;padding:0;border:0;background:center/contain no-repeat;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.ib:active{transform:translateY(1px);filter:brightness(1.25)}
#ibF{background:linear-gradient(#5a3a1c,#33200f);border:2px solid #d9a441;border-radius:50%;padding:0;align-items:center;justify-content:center}#ibs #ibF.ok{display:flex}
#ibs #ibF{display:none}
.ib.dk{display:none}
#ibT{background-image:var(--u-ib_trophy)}#ibM{background-image:var(--u-ib_mail)}#ibH{background-image:var(--u-ib_help)}#ibG{background-image:var(--u-ib_gear)}
.chip{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 0;max-width:118px;padding:2px 8px 2px 3px;background:linear-gradient(#2b1b10,#150d07);border:2px solid #d9a63c;border-radius:20px;
  box-shadow:inset 0 0 0 1px #6e4f1c,inset 0 2px 5px #000,0 2px 4px rgba(0,0,0,.5);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;color:#fff4d6;overflow:hidden;justify-content:flex-start}
.chip img{width:22px;height:22px;flex:none}
#ageB{flex:none;display:flex;align-items:center;gap:4px;padding:3px 10px 3px 7px;border-radius:9px;color:#4a2a08;font-family:var(--display);font-weight:700;white-space:nowrap;
  background:linear-gradient(#ffe27a,#f2a81e);border:2px solid #fff1b8;box-shadow:0 0 0 2px #b07a1c,0 3px 6px rgba(0,0,0,.55),inset 0 -3px 0 rgba(160,90,0,.35)}
#ageB svg{width:18px;height:18px;flex:none}
#ageB b{font-size:12px;opacity:.75}#ageB small{font-size:15px;letter-spacing:.02em;line-height:1}
#miniw{position:absolute;right:6px;top:60px;width:150px;aspect-ratio:341/272;z-index:3;background:#04070c;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.6);touch-action:none}
#mini{position:absolute;left:4.5%;top:6%;height:88%;width:auto;aspect-ratio:1;background:#04070c;border-radius:5px;touch-action:none;image-rendering:auto}
#mf{position:absolute;inset:0;border:9px solid transparent;border-image:var(--u-mapf) 26 / 9px stretch;pointer-events:none}
#cmp{position:absolute;right:6%;top:9%;width:15%;aspect-ratio:1;background:var(--u-compass) center/contain no-repeat;pointer-events:none}
.zb{position:absolute;right:6%;width:16%;aspect-ratio:1;border:0;padding:0;background:center/contain no-repeat;cursor:pointer}
#zp{bottom:36%;background-image:var(--u-zp)}#zm{bottom:13%;background-image:var(--u-zm)}
.zb:active{transform:translateY(1px);filter:brightness(1.3)}
#surv{position:absolute;left:50%;top:50px;transform:translateX(-50%);z-index:4;pointer-events:none;display:none;padding:3px 12px;border-radius:12px;background:rgba(26,17,10,.85);color:#f6e7b9;font:700 14px var(--display);letter-spacing:.5px;border:1px solid #a9843a}
#toast{position:absolute;left:8px;top:62px;max-width:calc(100% - 180px);background:var(--grain),rgba(26,17,10,.92);
  border:1px solid var(--brass);border-left:4px solid var(--brass);border-radius:3px;padding:6px 11px;font-size:13px;font-weight:600;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none;z-index:4}
#toast.show{opacity:1;transform:none}
.mtg{min-width:62px;height:30px;border:0;border-radius:15px;background:#5b8f3a;color:#fff;font-weight:800;cursor:pointer;box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}.mtg.off{background:#7a4a3a}
#quick{position:absolute;left:8px;bottom:190px;display:flex;flex-direction:column;gap:8px;z-index:3}
.qb{width:50px;height:50px;padding:0;border:0;position:relative;cursor:pointer;background:center/contain no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.qb img{display:none}
.qb.tx{background:linear-gradient(#5a3a1c,#33200f);border:3px solid #d9a441;border-radius:14px;color:#fff1c8;font:800 17px/1 'Inter',system-ui,sans-serif;letter-spacing:.02em;box-shadow:inset 0 0 0 2px #2a1a0b}.qb.tx.on{background:linear-gradient(#a8541c,#6a2d0c)}
#qIdle{background-image:var(--u-q0)}#qArmy{background-image:var(--u-q1)}#qBox{background-image:var(--u-q2)}#qHome{background-image:var(--u-q3)}
.qb.on{filter:drop-shadow(0 0 7px #ffe27a) brightness(1.35)}
.qb:active{transform:translateY(1px);filter:brightness(1.25)}
.qb i{position:absolute;right:-5px;top:-6px;min-width:20px;height:20px;border-radius:10px;background:#d8382b;border:2px solid #fff0d0;
  font-style:normal;font-size:11px;font-weight:700;line-height:16px;padding:0 4px;color:#fff;font-family:var(--body);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.qb i:empty{display:none}
#panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;padding:9px 8px 8px;z-index:3;
  background:var(--grain),var(--planks),linear-gradient(#4b3524,#2a1b10);
  box-shadow:inset 0 2px 0 var(--brass),inset 0 4px 0 var(--brass-lo),0 -4px 16px rgba(0,0,0,.6)}
#selrow{display:flex;gap:10px;align-items:center;min-height:54px}
#portrait{flex:none;width:54px;height:54px;border-radius:7px;border:2px solid #d9a63c;background:radial-gradient(circle at 50% 35%,#6c7f4a,#27311c);box-shadow:inset 0 0 8px rgba(0,0,0,.7),0 0 0 2px #5c4318;overflow:hidden}
#portrait img{width:100%;height:100%;display:block}
#selinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#selname{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.05;letter-spacing:.03em;color:#fff1c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
#hpbar{position:relative;height:13px;max-width:260px;background:#14240f;border:2px solid #2a1a0c;border-radius:7px;box-shadow:0 0 0 1px #8a6a2c;overflow:hidden}
#hpbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#9cf47a,#2f9d26);border-radius:5px}
#hpbar span{position:absolute;inset:0;text-align:center;font-size:10px;font-weight:700;line-height:11px;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;font-variant-numeric:tabular-nums}
#info{font-size:12.5px;line-height:1.3;color:#f0e2bb;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:17px}
#info img{width:17px;height:17px;vertical-align:-4px}
#center{min-width:0;display:flex;flex-direction:column}
#t0::after{content:'Buildings'}#t1::after{content:'Units'}#t2::after{content:'Upgrades'}#t3::after{content:'Other'}
.tab{position:relative;container-type:size}.tab::after{position:absolute;left:60%;top:52%;transform:translate(-50%,-50%);font:700 36cqh/1 'Inter',system-ui,sans-serif;color:#fff1d0;text-shadow:0 1px 2px #000;white-space:nowrap}
.tab:not(.on)::after{color:#e9d7b4}
#tabs{display:flex;gap:2px;padding-left:8px;position:relative;z-index:1;margin-bottom:-3px}
.tab{flex:none;height:28px;border:0;padding:0;background:center/100% 100% no-repeat;cursor:pointer;filter:brightness(.7) saturate(.85)}
#t0{background-image:var(--u-tab0);aspect-ratio:230/54}#t1{background-image:var(--u-tab1);aspect-ratio:195/53}
#t2{background-image:var(--u-tab2);aspect-ratio:205/53}#t3{background-image:var(--u-tab3);aspect-ratio:200/53}
.tab.on{filter:none}.tab.on:not(#t0){filter:brightness(1.55) saturate(1.4)}
.tab.off{opacity:.4;pointer-events:none}
#tabs.lk .tab{opacity:.4;pointer-events:none}
#actsw{border:8px solid transparent;border-image:var(--u-bar) 24 / 8px stretch;background:linear-gradient(#3a2618,#20140b) padding-box;border-radius:6px}
#acts{display:flex;gap:7px;overflow-x:auto;align-items:stretch;min-height:84px;scrollbar-width:none;padding:1px 3px 2px}
#acts::-webkit-scrollbar{display:none}
#acts{touch-action:pan-x;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}#acts .ab{touch-action:pan-x;flex:none}
@media (pointer:fine){#acts{scrollbar-width:thin;scrollbar-color:#d9a441 #2a1a0e;padding-bottom:4px}#acts::-webkit-scrollbar{display:block;height:8px}#acts::-webkit-scrollbar-track{background:#2a1a0e;border-radius:4px}#acts::-webkit-scrollbar-thumb{background:#d9a441;border-radius:4px}}
#acts .hint{align-self:center;font-size:12.5px;color:#d8c690;padding:0 10px}
.ab{flex:0 0 auto;width:76px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:1px 0 1px;
  cursor:pointer;color:#fff2d0;font-family:var(--body);border:7px solid transparent;border-image:var(--u-btn) 22 / 7px stretch;
  background:linear-gradient(#5e3d24,#2f1d11) padding-box;border-radius:9px;box-shadow:0 2px 5px rgba(0,0,0,.5)}
.ab img.ic{width:34px;height:34px;flex:none;pointer-events:none}
.ab .nm{font-size:10.5px;font-weight:700;white-space:normal;text-align:center;max-width:100%;line-height:1.1;overflow:hidden}
.ab .co{font-size:10px;white-space:nowrap;line-height:1.2;color:#f8e6a8;font-variant-numeric:tabular-nums;display:flex;gap:4px;align-items:center}
.ab .co img{width:11px;height:11px;margin-right:1px;vertical-align:-2px}
.ab:active{transform:translateY(1px);filter:brightness(1.25)}
.ab:disabled{filter:grayscale(.85) brightness(.62)}
.ab.lk{border-image-source:var(--u-btnl);background:linear-gradient(#444449,#202023) padding-box;color:#c9c9cf}
.ab.lk .co{color:#a9a9b0}
.ab.go{background:linear-gradient(#7fc063,#2f7a2a) padding-box}
.hide{display:none!important}
#modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:12;background:rgba(10,7,3,.62)}
.mcard{width:min(420px,100%);max-height:86%;overflow:auto;color:var(--ink);border:30px solid transparent;border-image:var(--u-card) 44 / 30px stretch;background:linear-gradient(#f3e6c4,#dfc995) padding-box;padding:0 4px 4px}
.mcard h2{font-family:var(--display);font-size:30px;margin:0 0 6px;color:#3a2412;letter-spacing:.03em}
.mcard p,.mcard li{font-size:13.5px;line-height:1.5;margin:0 0 6px}.mcard ul{margin:0 0 10px;padding-left:18px}
.mcard .row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;border-bottom:1px solid rgba(58,36,18,.2)}
.mcard .row b{font-variant-numeric:tabular-nums}
.mcard .lg{font-size:13px;padding:4px 0;border-bottom:1px solid rgba(58,36,18,.2)}
.mbtn{margin-top:10px;display:block;width:100%;padding:10px;border-radius:8px;cursor:pointer;color:#fff2d0;font-family:var(--display);font-weight:700;font-size:20px;
  border:2px solid #d9a63c;background:linear-gradient(#6a4529,#33200f);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.mbtn:active{filter:brightness(1.25)}
button:focus-visible{outline:3px solid #fff;outline-offset:1px}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10;overflow:auto;
  background:radial-gradient(ellipse at center,rgba(12,9,5,.5),rgba(12,9,5,.94))}
#overlay.hide{display:none}
.card .st{width:100%;border-collapse:collapse;font-size:12.5px;margin:0 0 10px}.card .st th{font-family:var(--display);font-size:13px;padding:2px 4px;border-bottom:2px solid #c9a96a;text-align:right}.card .st th:first-child,.card .st td:first-child{text-align:left}.card .st td{padding:2px 4px;text-align:right;border-bottom:1px solid rgba(120,90,40,.25);font-variant-numeric:tabular-nums}.card .st td.b{font-weight:800;color:#8a3a10}