:root{color-scheme:dark;--gold:#e2c98e;--hud-scale:1.32;--hud-height:180px}
*{box-sizing:border-box}html,body,#game{width:100%;height:100%;margin:0;overflow:hidden}body{background:#11150c;color:var(--gold);font-family:Georgia,'Times New Roman',serif}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid #f4dfa4;outline-offset:3px}#game{position:relative}#renderCanvas{display:block;width:100%;height:100%;outline:none;touch-action:none;cursor:url('assets/interface/Cursor.png') 4 3,default}
#fps{position:absolute;top:3px;left:3px;font:9px Arial,sans-serif;color:#c0c2af;pointer-events:none}.groups{position:absolute;left:1.1%;top:4.3%;width:20.5%;height:58px;display:flex;align-items:center;gap:3px;padding:10px 14px;background:url('assets/interface/GruposSeleccion.png') center/100% 100% no-repeat}.groups button{position:relative;width:11.11%;height:34px;border:1px solid #605139;background:linear-gradient(120deg,#e5c997,#cdb082);box-shadow:inset 0 0 0 2px #e4ca9c,inset 0 0 0 3px #806a45;color:#504127;font-size:10px;text-align:right;padding:18px 2px 0}.groups button.selected{background:#b79c5d;box-shadow:inset 0 0 0 2px #fff0bb,0 0 7px #e0cc8e}
.objective{position:absolute;right:1.8%;top:3.8%;min-height:58px;width:32.6%;border:5px solid #6e6d57;border-image:url('assets/interface/MarcoTutConInterior.png') 5 fill stretch;background:#0b0d09b8;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;color:#f2d896;font-family:'Times New Roman',serif;font-size:clamp(10px,1.08vw,22px);font-weight:bold;box-shadow:inset 0 0 0 1px #15190e,0 1px 4px #0007}.objective span{white-space:nowrap}.objective button{flex-shrink:0;width:24px;height:24px;line-height:15px;padding:0;border:2px solid #929389;border-radius:4px;background:#222725;color:#b8b9ac;font:20px Arial}.objective.collapsed{width:42px;min-height:40px;padding:3px}.objective.collapsed span{display:none}
.hud{position:absolute;left:0;right:0;bottom:0;height:var(--hud-height);pointer-events:none}.minimap-wrap{position:absolute;left:0;bottom:0;width:calc(250px * var(--hud-scale));height:calc(170px * var(--hud-scale));pointer-events:auto}.minimap-paper{position:absolute;inset:0;width:100%;height:100%;filter:sepia(.2) saturate(.8) brightness(1.16)}#minimap{position:absolute;left:5%;top:22%;width:83%;height:70%;cursor:crosshair;clip-path:polygon(0 38%,39% 0,100% 56%,63% 100%)}.map-tools{position:absolute;top:9%;left:53%;display:flex;gap:2px;transform:rotate(23deg);transform-origin:left center}.map-tools button{width:23px;height:18px;border:1px solid #a38c57;border-radius:50%;padding:0;line-height:14px;font-size:13px;background:radial-gradient(ellipse at 35% 25%,#ffedb8,#b6a16c);color:#4f4a2d;box-shadow:0 2px 2px #0006}
.parchment{position:absolute;left:calc(237px * var(--hud-scale));right:16%;bottom:0;height:calc(138px * var(--hud-scale));background-image:linear-gradient(#bc916155,#c0986b66),url('assets/interface/Papiro.png');background-position:center;background-size:100% 100%,100% 150%;border-top:10px double #d8b984;border-bottom:10px double #c7a575;pointer-events:auto}.parchment:before,.parchment:after{content:'';position:absolute;bottom:-10px;width:37px;height:calc(150px * var(--hud-scale));background:linear-gradient(90deg,#ad9864,#fff3bf 40%,#eee0a8 80%,#9a8753);border:2px solid #b6a472;box-shadow:0 0 2px #211e10}.parchment:before{left:-20px}.parchment:after{right:-20px}.scroll-cap{position:absolute;top:calc(-12px * var(--hud-scale));width:43px;height:13px;border-top:4px solid #c8a250;border-bottom:4px solid #c5a15e;background:#9b5142;z-index:1}.scroll-cap.left{left:-23px}.scroll-cap.right{right:-23px}.scroll-cap:before{content:'';position:absolute;width:11px;height:15px;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#fff3a0,#e7b83a 40%,#85621c);left:16px;top:-19px}.resources{position:absolute;right:5.5%;top:22%;width:263px;font-size:14px;font-weight:bold;color:#4f4530}.resources>div{display:grid;grid-template-columns:30px 1fr 30px 1fr;gap:5px;align-items:center;margin:4px 0}.resources>div>span:not(.resource-icon){display:flex;align-items:center;justify-content:center;background:#baa588a8;border:1px solid #f2e2bd;box-shadow:0 0 0 1px #8a775b;border-radius:2px;height:25px}.resource-icon{height:28px;font-size:0!important;background:center/contain no-repeat}.resource-icon.population{background-image:url('assets/interface/icon-population.png')}.resource-icon.squads{background-image:url('assets/interface/icon-troops.png')}.resource-icon.combat{background-image:url('assets/interface/icon-kills.png')}.resource-icon.losses{background-image:url('assets/interface/icon-losses.png')}.resources .honour{grid-template-columns:30px 1fr}.honour .resource-icon{background-image:url('assets/interface/icon-honor.png')}.honour>span:last-child{padding:2px 6px;gap:8px}.honour i{display:block;height:13px;background:#101207;flex:1}
.commands{position:absolute;right:6.7%;bottom:calc(150px * var(--hud-scale));display:flex;gap:11px;pointer-events:auto}.commands button{border:4px solid #302d15;border-radius:50%;width:46px;height:46px;background:#55564e;color:#c3bb99;font:22px Georgia;box-shadow:0 1px 4px #0005}.commands button:hover{background:#807c58}.commands button.active{border-color:#e0c283}.commands button:not(:hover){color:transparent}
#selectionInfo{position:absolute;left:5%;top:23%;display:flex;gap:16px;align-items:center;color:#40361f}#selectionInfo[hidden]{display:none}
#toast{position:absolute;left:50%;bottom:calc(var(--hud-height) + 24px);transform:translateX(-50%);background:#11180ddd;border:1px solid #827343;color:#eddaa9;padding:9px 20px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}#toast.visible{opacity:1}#loading{position:absolute;inset:0;z-index:20;background:radial-gradient(ellipse at center,#28301c,#0a1009);display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;color:#ddc18a;text-align:center}.loading-title{font-size:clamp(30px,5vw,70px);letter-spacing:.12em;border-bottom:1px solid #887046;padding:0 15px 25px}#loadingText{font-size:15px;letter-spacing:.06em}
#settings{position:absolute;top:0;right:0;bottom:0;width:350px;max-width:92vw;z-index:10;overflow:auto;background:#171d15f5;border-left:1px solid #8a794d;padding:24px;box-shadow:-12px 0 40px #0006;font-family:Segoe UI,Arial,sans-serif;color:#dbd5bd}#settings[hidden]{display:none}.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.settings-heading small{font-size:9px;letter-spacing:2px;color:#bba571}.settings-heading h2{font:20px Georgia;color:#e7cf9c;margin:7px 0}#closeSettings{border:0;background:transparent;color:#bbaa7a;font-size:30px}#settings h3{font-size:11px;letter-spacing:1.7px;color:#c7ae74;border-bottom:1px solid #4d513d;padding:13px 0 9px;margin:15px 0 8px}.settings-note{font-size:11px;line-height:1.7;color:#a3a690}.choice{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:12px}.choice input{accent-color:#c4a565}.smalllabel{display:block;font-size:11px;margin:15px 0 7px}select{width:100%;padding:9px;background:#293224;border:1px solid #6c6a49;color:#ded4b2;font:12px Segoe UI}.preset-buttons{display:flex;gap:5px}.preset-buttons button{flex:1;font:11px Segoe UI;padding:8px 4px;border:1px solid #6b6847;background:#2b3223;color:#ddcc9e}.counts{display:flex;justify-content:space-between;font-size:11px;margin-top:20px}.counts b{color:#e2c58a}details{font-size:11px;line-height:1.7;padding:10px 0}pre{white-space:pre-wrap;font-size:10px;color:#b9b9a0}.controls{font-size:11px;line-height:1.9;color:#b7b9a3;border-top:1px solid #454b36;padding-top:12px}
@media(min-width:1600px){:root{--hud-scale:1.4;--hud-height:194px}.resources{width:263px;right:5%}}
@media(min-width:1001px) and (max-width:1599px){:root{--hud-scale:1;--hud-height:138px}.groups{height:44px;padding:7px 10px;gap:2px}.groups button{height:27px;padding-top:14px;font-size:8px}.objective{min-height:44px;padding:6px 8px;gap:7px}.objective button{width:20px;height:20px}.resources{width:220px;right:5%;font-size:12px}.resources>div>span:not(.resource-icon){height:20px}.resource-icon{height:23px}.commands{gap:7px}.commands button{width:36px;height:36px}.scroll-cap{top:-20px}.map-tools button{width:18px;height:15px;font-size:10px;line-height:12px}}
@media(max-width:1000px){:root{--hud-scale:.94;--hud-height:130px}.groups{width:32%;height:48px;top:3%}.groups button{height:29px;padding-top:15px;font-size:8px}.objective{width:49%;font-size:13px;top:3%;min-height:45px;padding:6px 8px}.objective span{white-space:normal}.parchment{right:12%}.resources{right:5%;width:210px;font-size:11px}.resources>div{grid-template-columns:22px 1fr 22px 1fr;gap:4px}.resources>div>span:not(.resource-icon){height:19px}.resources .honour{grid-template-columns:22px 1fr}.resource-icon{height:21px}.commands{right:3%;gap:5px}.commands button{width:33px;height:33px;font-size:16px}#selectionInfo{gap:8px}#selectionName{font-size:15px}#selectionDescription{font-size:10px}.healthbar{width:100px}#selectionPortrait{width:45px;height:50px}.map-tools{gap:0}.map-tools button{width:17px;height:14px;font-size:10px;line-height:11px}}
@media(max-width:700px){:root{--hud-scale:.72;--hud-height:100px}.groups{width:42%}.objective{width:49%;font-size:10px}.resources{width:160px;top:22%}.parchment{right:8%}#selectionInfo{top:20%;left:7%}#selectionPortrait,#selectionDescription{display:none}#selectionName{font-size:12px}.healthbar{width:70px}.commands{bottom:calc(140px * var(--hud-scale))}.commands button{width:26px;height:26px}.resources .resource-icon{height:17px}.resources>div>span:not(.resource-icon){height:15px;font-size:9px}}

.spawn-grid{display:grid;grid-template-columns:1fr 1fr 70px;gap:6px;margin-bottom:8px}.spawn-grid label{display:flex;flex-direction:column;gap:4px;font-size:10px;color:#bba571}.spawn-grid select,.spawn-grid input{width:100%;padding:7px 5px;background:#293224;border:1px solid #6c6a49;color:#ded4b2;font:12px Segoe UI}#spawnPlace.active{background:#5b4a22;border-color:#e2c58a;color:#fff1c8}