/* Shared generated lacquer/gold artwork, sliced so corners never stretch. */
:root{--hud-frame:url('./assets/ui/black-gold-panel.png');--hud-gold:#b99a60;--hud-ink:#10130f}
header,footer>.panel,footer .map,.display-controls button,.view-controls button,#toast{
 background:var(--hud-ink);border:12px solid transparent;border-image:var(--hud-frame) 180 fill / 12px / 0 stretch;box-shadow:0 3px 12px #0008;border-radius:0;
}
header{top:6px;left:7px;right:auto;height:40px;padding:0 2px;gap:7px;max-width:calc(100% - 87px);border-width:8px;border-image-width:8px}
.resources{gap:0;flex:0}.resources span{gap:4px;font-size:16px;padding:0 9px;border-right:1px solid #b99a603d;line-height:20px}.resources span:first-child{padding-left:1px}.resources span:last-child{border:0}.resources b{font-size:14px;color:#f1e5c8;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}.epoch{gap:5px;padding:0 7px;border-color:#b99a604d}.epoch b{font-size:18px}.epoch span{font-size:10px;color:#cfbe99}
header button,.command-heading button{height:24px;min-width:24px;padding:1px 5px;background:linear-gradient(#37352b,#171914);border-color:#8f7951;color:#e4cf9e;box-shadow:inset 0 0 0 1px #0008;border-radius:0}
.display-controls{top:6px;right:7px;gap:4px}.display-controls button{width:34px;height:34px;padding:0;border-width:6px;border-image-width:6px;font-size:19px}
.view-controls{right:7px;top:46px;gap:4px}.view-controls button{width:30px;height:30px;padding:0;border-width:6px;border-image-width:6px;font-size:17px}
footer{left:7px;right:7px;bottom:7px;gap:7px;align-items:flex-end;flex-wrap:nowrap}
footer>.panel{padding:1px 2px;min-width:0;flex-shrink:0}
footer>.selection{width:235px;gap:9px;min-height:100px;height:auto;align-items:center}
.portrait{width:55px;height:71px;font-size:43px;line-height:69px;border:1px solid #ab8d53;background:radial-gradient(ellipse at top,#33423c,#0b1210);box-shadow:inset 0 0 10px #0008;color:#dec080}
.selection>div:last-child{min-width:0;flex:1}.selection h2{font-size:14px;line-height:1.35;margin:0 0 5px;color:#f0dfb7}.selection p{font-size:10px;line-height:1.55;margin:0;color:#c1baa8}.health{height:5px;margin-top:6px;background:#23251d;border:1px solid #777043}.health i{background:linear-gradient(#95b554,#547b31)}
footer>.commands{flex:0 1 310px;max-width:530px;width:310px;min-width:260px;padding:2px 3px}
footer>.commands:has(#actions>button:nth-child(5)){flex-basis:530px;width:530px}
.command-heading{gap:4px;min-height:23px}.command-heading .eyebrow{display:block;font-size:9px;letter-spacing:.6px;margin-right:auto;color:#c8ad77}.command-heading button{font-size:10px;height:22px;padding:1px 5px;white-space:nowrap}
.buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:5px;max-height:208px;overflow:auto;scrollbar-width:thin;scrollbar-color:#937b4d #151711}
.commands:has(#actions>button:nth-child(5)) .buttons{grid-template-columns:repeat(7,minmax(0,1fr))}
.buttons button{min-width:0;max-width:none;min-height:55px;height:55px;font-size:19px;padding:3px 2px;border:1px solid #82704b;background:linear-gradient(135deg,#35362b,#11150f);box-shadow:inset 0 0 0 1px #090c09,inset 0 1px 8px #88744422;color:#ead3a1;border-radius:0;line-height:1.25}
.buttons span{font-size:10px;line-height:1.3;white-space:normal}.buttons small{font-size:8px;line-height:1.25;color:#c6b990}.buttons button:disabled{opacity:.42}.buttons button:hover:not(:disabled),.command-heading button:hover{background:linear-gradient(#56523a,#25291e);border-color:#ebcc85}.buttons button.active{border-color:#ffe09b;background:#51482d}button:focus-visible{outline:2px solid #ffe0a0;outline-offset:2px}
footer>.map-dock{position:relative;overflow:visible;width:194px;min-width:194px;margin-left:auto;flex-shrink:0}footer .map{width:100%;min-width:0;margin:0;padding:0}.map .eyebrow{display:none}#minimap{width:170px;height:auto;aspect-ratio:23/15;border:1px solid #51472f;background:#0b100b}
#productionQueue{margin-top:4px;gap:4px;padding-bottom:0}.queue-item{flex-basis:96px;padding:3px 5px;font-size:9px;background:#10150de6}.queue-item strong,.queue-item span{font-size:9px}.queue-item progress{height:3px;margin-top:3px}.queue-item .queue-cancel{display:block;margin-top:3px;height:16px;padding:0 4px;font-size:9px;line-height:14px;border:1px solid #8f7951;background:#171914;color:#e4cf9e;cursor:pointer}
#buildingWork{margin-top:4px;padding:3px 5px;font-size:10px;line-height:1.4;background:#181c12;border-color:#a38a4e}#buildingWork span{font-size:9px;margin-left:5px}#buildingWork progress{height:3px;margin-top:3px}
#toast{left:0;right:0;bottom:100%;transform:none;width:auto;max-width:none;margin:0 0 6px;z-index:6;font-size:11px;padding:4px 8px;border-width:7px;border-image-width:7px;color:#e6d9b7;line-height:1.45;white-space:normal;text-align:center}
@media(max-width:1050px){footer>.selection{width:200px;gap:6px}.portrait{width:43px;height:62px;font-size:36px;line-height:60px}.selection h2{font-size:12px}footer>.map-dock{width:166px;min-width:166px}#minimap{width:142px}.commands:has(#actions>button:nth-child(5)) .buttons{grid-template-columns:repeat(5,minmax(0,1fr))}.command-heading .eyebrow{display:none}.command-heading{justify-content:flex-end}.resources span{padding:0 6px}}
@media(max-width:720px){header{max-width:calc(100% - 82px);height:36px;gap:3px;left:4px;top:4px}.resources span{padding:0 4px;font-size:13px;gap:2px}.resources b{font-size:11px}.epoch{display:none}header button{width:21px;min-width:21px;height:21px;font-size:11px;padding:0}.display-controls{top:4px;right:4px}.view-controls{right:4px;top:44px}footer{left:4px;right:4px;bottom:4px;gap:5px;flex-wrap:wrap}footer>.selection{width:calc(100% - 145px);min-height:79px;padding:0}.portrait{width:40px;height:53px;line-height:51px;font-size:33px}.selection h2{font-size:12px}.selection p{font-size:9px}footer>.map-dock{width:140px;min-width:140px;margin-left:0}footer .map{height:auto}#minimap{width:116px}footer>.commands,footer>.commands:has(#actions>button:nth-child(5)){order:3;flex:0 0 100%;width:100%;max-width:none;min-width:0}.buttons,.commands:has(#actions>button:nth-child(5)) .buttons{grid-template-columns:repeat(6,minmax(0,1fr));max-height:112px}.buttons button{height:52px;min-height:52px}.buttons span{font-size:9px}.command-heading button{font-size:9px;height:20px}.command-heading{min-height:20px}#toast{font-size:10px}.health{margin-top:4px}}
@media(max-width:420px){header{flex-wrap:wrap;height:auto;min-height:36px}.resources span{padding:0 3px}.resources b{font-size:10px}.buttons,.commands:has(#actions>button:nth-child(5)) .buttons{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* Reserve separate lines for icon, wrapped name and resource cost. */
.buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;height:64px;min-height:64px;font-size:17px;line-height:19px;overflow:hidden}
.buttons span{display:block;line-height:12px;min-height:12px;max-height:24px;overflow:hidden}
.buttons small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;line-height:11px}
.buttons{max-height:208px}
@media(max-width:720px){.buttons,.commands:has(#actions>button:nth-child(5)) .buttons{max-height:188px}.buttons button{height:60px;min-height:60px;font-size:16px;line-height:18px}}
/* Build tabs: economy first, then army, defenses and special buildings. */
#buildCategories[hidden]{display:none}
#buildCategories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:5px 0}
#buildCategories button{min-width:0;padding:5px 2px;font-size:11px;line-height:1.4;border:1px solid #82704b;border-radius:0;background:#191e16;color:#cbbb98;white-space:nowrap}
#buildCategories button[aria-pressed=true]{background:linear-gradient(#655735,#322e20);color:#ffe4a5;border-color:#d4b578;box-shadow:inset 0 -2px #d4b578}
footer>.commands.building-menu{flex-basis:450px;width:450px;max-width:450px}
.commands.building-menu .buttons{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:720px){footer>.commands.building-menu{flex-basis:100%;width:100%;max-width:none}#buildCategories button{font-size:10px}}
.commands.building-menu:has(#actions>button:nth-child(5)) .buttons{grid-template-columns:repeat(5,minmax(0,1fr))}
#cheat{position:fixed;z-index:30;left:50%;top:58px;transform:translateX(-50%)}
#cheat input{width:240px;padding:8px 12px;border:1px solid #c8aa6e;background:#14120ee6;color:#f3e6c4;font:16px/1.2 "Noto Sans Thai",sans-serif;text-align:center}
#cheat input:focus{outline:none}
.buttons button.upgrade{border-color:#5d8f4e;background:linear-gradient(135deg,#2a4a2c,#0f1c11);box-shadow:inset 0 0 0 1px #07100a,inset 0 1px 8px #7fc46a2e;color:#d9f0c4}.buttons button.upgrade small{color:#a8d092}.buttons button.upgrade:hover:not(:disabled){background:linear-gradient(#3d6a3c,#18301a);border-color:#9fe07f}
.resources .res-icon{width:1.25em;height:1.25em;vertical-align:-.28em;flex:none}
.buttons small .cost{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1px 5px;font-style:normal;margin-top:2px}.buttons small .cost b{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;line-height:1.2;color:#f6ead0;white-space:nowrap;text-shadow:0 1px 1px #000}.buttons small .cost .ci{font-style:normal;font-size:10px;line-height:1;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}.buttons small .cost b.short{color:#ff7d68}.buttons small .cost .era{font-style:normal;font-size:9px;color:#d8c48e;border:1px solid #7a6a45;padding:0 3px;line-height:1.3}.buttons button.upgrade small .cost b{color:#eafbe0}.buttons button.upgrade small .cost b.short{color:#ff8a72}
#details{white-space:pre-line}
#superWeapon{border-color:#ff9a3c;color:#ffe0b0;background:linear-gradient(#7a3414,#2c1409);animation:superPulse 1.6s ease-in-out infinite}#superWeapon[hidden]{display:none}@keyframes superPulse{50%{box-shadow:0 0 10px #ff8a2a,inset 0 0 0 1px #0008}}