/* Readable game typography. Do not shrink important copy to make a panel fit. */
.castle-alert{width:min(520px,calc(100% - 24px));max-width:calc(100% - 24px);display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;padding:12px 14px 15px;background:#293b2bf2}
.castle-alert.own-castle{background:#493d2ef2}
.castle-alert #castle-title{font:700 20px/1.25 var(--ui);white-space:normal;color:#fff0cc}
.castle-alert #castle-detail{display:block;max-width:none;font:700 15px/1.4 var(--ui);color:#ede2c4;margin-top:5px}
.castle-alert #castle-time{font:700 24px/1.2 var(--ui);font-variant-numeric:tabular-nums;color:#ffe1a0}
.castle-alert .castle-emblem{font-size:30px;line-height:1}
.dialog p,.dialog .text-button,.dialog .install-button,.dialog .install-note{font-size:15px;font-weight:700;line-height:1.45}
.dialog .eyebrow{font-size:12px;font-weight:700;letter-spacing:.7px}
.result-overlay .dialog h1{font-size:30px;line-height:1.2;font-weight:700}
.result-overlay .defeat-cause{font-size:16px;font-weight:700;line-height:1.45;color:#536047}
.result-overlay .defeat-opponent strong{font-size:17px;font-weight:700}
.result-overlay .battle-result .result-label,.result-overlay .battle-result span{font-size:15px;font-weight:700;color:#56634b}
.result-overlay .battle-result strong{font-size:32px;font-weight:700}
.result-overlay .dialog .primary{font-size:17px;font-weight:700;min-height:44px}
.result-overlay #home{font-size:15px;font-weight:700;color:#536047;min-height:40px}
.effect-hint strong{font-size:15px;font-weight:700}.effect-hint span{font-size:14px;font-weight:700;color:#d1d9bf;line-height:1.4}
#connection{font-size:14px;font-weight:700}
.baron-guide p,.baron-guide .baron-note,.baron-sites p,.baron-sites small{font-size:15px!important;font-weight:700;line-height:1.5;color:#435b3e}
.baron-guide h3{font-size:17px;font-weight:700}.baron-tabs button{font-size:14px;font-weight:700}.baron-controls kbd,.baron-number{font-size:13px;font-weight:700}
.estate-strip b{font-size:12px;font-weight:700}
@media(min-width:901px){
 .desktop-hud .your-estate .eyebrow{font-size:12px;font-weight:700;letter-spacing:.4px}
 .desktop-hud .holding>span{font-size:12px;font-weight:700;color:#d0d8bc}
 .desktop-hud .holding strong,.desktop-hud .troop-group b{font-weight:700}
 .desktop-hud .troop-group small{font-size:13px;font-weight:700;color:#d0d8bc}
 .desktop-map-ui .desktop-top-title{font-size:14px;font-weight:700}
 .desktop-map-ui .desktop-self .position,.desktop-map-ui .desktop-self .leader-name,.desktop-map-ui .desktop-self .leader-score{font-size:14px;font-weight:700}
 .desktop-map-ui .standings #leaders>.leader,.desktop-map-ui .standings .leader-score,.desktop-map-ui .standings .position{font-size:14px;font-weight:700}
 .desktop-dock .desktop-march>.dash .dash-reservoir kbd,.desktop-dock .army-command::after{font-size:12px;font-weight:700;letter-spacing:.2px}
 .desktop-dock .desktop-march>.dash .dash-reservoir .dash-multiplier{font-size:12px;font-weight:700}
}
@media(max-width:900px){
 .castle-alert{gap:8px;padding:10px 10px 13px;grid-template-columns:24px minmax(0,1fr) auto}
 .castle-alert #castle-title{font-size:17px}.castle-alert #castle-detail{font-size:14px}.castle-alert #castle-time{font-size:22px}.castle-alert .castle-emblem{font-size:26px}
 .mobile-self,#mobile-self-name,#mobile-self-score,#mobile-self-rank{font-size:14px;font-weight:700}
 .ranking-panel .leader,.ranking-panel .position,.ranking-panel .leader-score{font-size:14px;font-weight:700}
 .app>.touch-controls .dash-mobile .dash-multiplier{font-size:13px;font-weight:700}
}
@media(max-height:550px){
 .result-overlay .dialog h1{font-size:26px;margin:4px 0 8px}
 .result-overlay .result-emblem{height:30px;margin-bottom:2px}.result-overlay .result-emblem>svg{height:28px;margin:1px auto}
 .result-overlay .battle-result{margin:6px 0}.result-overlay .defeat-opponent{margin-bottom:7px}
 .result-overlay .dialog{padding:10px 14px}
}

/* Readable loading and error screens use the same bold type as the game. */
.game-loading .loading-content{width:min(360px,100%)}
.game-loading .loading-content>p{font-size:clamp(18px,4.7vw,22px);font-weight:700;line-height:1.35;letter-spacing:0;color:#f1e7c7}
.game-loading.loading-full .loading-content>p{white-space:nowrap}
.game-loading.loading-error .loading-track{display:none}
.game-loading.loading-error .loading-content>img{animation-play-state:paused}
.game-loading #loading-actions{gap:12px;margin-top:24px;font-size:16px;font-weight:700}
.game-loading #loading-actions button,.game-loading #loading-actions a{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:46px;padding:10px 12px;border:1px solid #b49c62;border-radius:9px;font:700 16px/1.25 var(--ui);color:#f3e8c7;white-space:nowrap}
.game-loading #loading-actions button{background:#3c5942;box-shadow:inset 0 1px #e6d6a322}
.game-loading #loading-actions a{background:#273d2e;border-color:#7c89674d}
.game-loading #loading-actions a:hover{background:#344c38}

/* The dash multiplier reads as part of the action label, without a badge. */
.desktop-dock .desktop-march>.dash .dash-reservoir .dash-multiplier,
.app>.touch-controls .dash-mobile .dash-multiplier{font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;padding:0;border:0;border-radius:0;background:none;box-shadow:none}

/* Keyboard hints stay secondary to the action names. */
@media(min-width:901px){
 .desktop-dock .desktop-march>.dash .dash-reservoir kbd,
 .desktop-dock .army-command::after{color:#e2d4ae;opacity:.75;text-shadow:none}
}

/* Modal backdrop covers the whole game viewport, including both HUD bars. */
#overlay{position:fixed;inset:0;z-index:20;background:#10201955;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.arena .victory-fireworks{z-index:21}

/* Castle loss is a critical notice: never fade it near heroes or map edges. */
#castle-alert{top:8px;z-index:9;opacity:1;background:#293b2b}
#castle-alert.own-castle{background:#493d2e}
@media(max-width:900px){#castle-alert{top:54px}}

/* A tiny compositor-only float; endpoints meet with zero speed. */
@keyframes loading-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@media(prefers-reduced-motion:no-preference){
 .loading-content>img{animation:loading-float 3.6s ease-in-out infinite;will-change:transform}
}

/* Keep the command in place when no troops are available. */
.app .army-command.army-unavailable:disabled{opacity:1;filter:none;transform:none;background:linear-gradient(145deg,#4c554b,#39453c);color:#949b88;border-color:#747c6666;box-shadow:inset 0 1px #cbd0b51a;cursor:default}
.app .army-command.army-unavailable:disabled::before,.app .army-command.army-unavailable:disabled::after{color:inherit;text-shadow:none}

/* Result numbers and their symbols form one readable, aligned row. */
.result-overlay .battle-result .result-label{margin-bottom:5px}
.result-overlay .battle-result .result-value{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0}
.result-overlay .battle-result .result-value svg{width:30px;height:30px;margin:0;color:#70815a;stroke-width:1.9}
.result-overlay .battle-result .result-value strong{font-size:36px;font-weight:700;line-height:1.15}
@media(max-width:360px),(max-height:550px){
 .result-overlay .battle-result .result-value{gap:7px}
 .result-overlay .battle-result .result-value svg{width:27px;height:27px}
 .result-overlay .battle-result .result-value strong{font-size:32px}
}

/* Mobile: ranking in the header; readable holdings and a compact siege notice. */
@media(max-width:900px){
 .app>.topbar{position:relative;z-index:10;gap:8px;min-width:0;flex:0 0 56px;height:56px;overflow:visible}
 .topbar .brand{display:none}
 .topbar .top-actions{flex:none;margin-left:auto}
 .topbar .mobile-ranking{position:relative;inset:auto;flex:1;min-width:0;width:auto;max-width:none;height:40px;margin:0;padding-right:8px;background:transparent;border:0;box-shadow:none}
 .topbar .mobile-ranking .mobile-self{margin-left:32px;gap:6px}
 .topbar .mobile-ranking .ranking-tab{padding-left:0}
 .topbar .mobile-ranking .ranking-tab svg{width:24px;height:24px}
 .topbar .mobile-ranking .ranking-panel{top:46px;z-index:12;max-height:calc(var(--game-height,100dvh) - 150px)}
 .arena .estate-strip{top:10px;left:10px;width:calc(100% - 140px);max-width:300px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 8px;padding:7px 8px;opacity:1;background:#20372be8;border:1px solid #a6ac7155;border-radius:7px;white-space:normal}
 .arena .estate-strip>span{gap:4px}
 .arena .estate-strip svg{width:21px;height:22px;stroke-width:1.8}
 .arena .estate-strip b{font-size:16px;line-height:22px;color:#f1e6bf}
 .arena .estate-strip .empty{opacity:.6}
 #castle-alert{top:8px;width:calc(100% - 20px);max-width:500px;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 10px 11px;border-radius:7px}
 #castle-alert .castle-emblem{display:none}
 #castle-alert #castle-title{font-size:16px;line-height:1.2}
 #castle-alert #castle-detail{display:block;font-size:12px;line-height:1.25;margin-top:3px}
 #castle-alert #castle-time{font-size:23px;line-height:1.2}
 .arena:has(#castle-alert:not([hidden])) .minimap-wrap{display:none}
 .arena:has(#castle-alert:not([hidden])) .estate-strip{top:78px}
}
@media(max-width:360px){
 .topbar .mobile-ranking .mobile-self{gap:4px;margin-left:29px}
 .topbar #mobile-self-score{padding-left:4px}
 .arena .estate-strip{width:calc(100% - 128px);left:8px;gap:4px;padding:6px}
 .arena .estate-strip>span{gap:2px}
}

/* A slightly larger mobile army target without enlarging the bottom bar. */
@media(max-width:900px){
 #army-mobile-slot.available{flex-basis:66px;width:66px;height:53px;align-self:center}
 #army-mobile-slot .army-command{width:58px;height:53px;padding:10px}
 #army-mobile-slot .army-command svg{width:30px;height:30px}
}
@media(max-width:900px) and (max-height:550px){
 #army-mobile-slot.available{flex-basis:58px;width:58px;height:45px}
 #army-mobile-slot .army-command{width:50px;height:45px;padding:6px}
}

/* Dismiss shares the sprint glyph's weight; the label stays clear and bold. */
.army-command[aria-pressed=true] svg{stroke-width:2.6}
@media(min-width:901px){
 .desktop-dock .army-command::before{font-size:15px;font-weight:700;letter-spacing:0;color:#fff0bf;text-shadow:0 1px 2px #263d22}
 .desktop-dock .army-command::after{font-weight:700}
 .desktop-dock .army-command.army-unavailable::before{color:inherit;text-shadow:none}
}

/* Leave the minimap's column clear when the mobile ranking is expanded. */
@media(max-width:900px){
 .topbar .mobile-ranking .ranking-panel{width:min(300px,calc(100vw - 150px));max-width:calc(100vw - 150px)}
 .topbar .ranking-panel .leader{gap:5px;padding-left:7px;padding-right:7px;min-width:0}
 .topbar .ranking-panel .position,.topbar .ranking-panel .flag,.topbar .ranking-panel .leader-score{flex-shrink:0}
 .topbar .ranking-panel .leader-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Holdings stay put in one row; notices and the minimap sit underneath. */
@media(max-width:900px){
 .arena .estate-strip,.arena:has(#castle-alert:not([hidden])) .estate-strip{top:10px;left:10px;width:calc(100% - 20px);max-width:440px;display:flex;justify-content:space-between;gap:4px;padding:6px 8px;white-space:nowrap}
 .arena .estate-strip>span{gap:3px;flex:none}
 .arena .estate-strip svg{width:20px;height:22px}
 .arena .estate-strip b{font-size:15px}
 .arena .map-top{top:54px}
 #castle-alert{top:54px}
}
@media(max-width:360px){
 .arena .estate-strip,.arena:has(#castle-alert:not([hidden])) .estate-strip{gap:3px;padding-left:6px;padding-right:6px}
 .arena .estate-strip>span{gap:2px}
 .arena .estate-strip svg{width:18px}
 .arena .estate-strip b{font-size:14px}
}

/* Constant mild transparency keeps the mobile meadow visible beneath the map. */
@media(max-width:900px){.arena .minimap-wrap{opacity:.88}}

/* Shared parchment dialogs, with the game's warm gold action and sturdy icons. */
.overlay .dialog{border:3px solid #687452;outline:1px solid #b9ac7966;border-radius:14px;background:linear-gradient(145deg,#f0e8ce,#e9dfbf);box-shadow:inset 0 0 0 2px #fff4d880,inset 0 0 0 4px #b3a47840,0 16px 48px #081b1766}
.overlay .dialog h1{font-weight:700;letter-spacing:.2px}
.overlay .dialog .primary{min-height:54px;padding:13px 18px;border:2px solid #8d7139;border-bottom:4px solid #70592f;border-radius:10px;background:linear-gradient(160deg,#e0c77a,#c7a957 65%,#b89748);color:#303a24;font-size:18px;font-weight:700;line-height:1.25;text-shadow:0 1px #fff0bd70;box-shadow:inset 0 1px #fff3c3, inset 0 0 0 1px #efda9d88,0 3px 0 #66532d33;filter:none;transition:background .15s,transform .12s,box-shadow .12s}
.overlay .dialog .primary:active:not(:disabled){transform:translateY(2px);background:linear-gradient(160deg,#d2b766,#b89948);box-shadow:inset 0 2px 4px #6b552d40}
.overlay .dialog .primary:focus-visible{outline:2px solid #496346;outline-offset:3px}
.overlay .dialog .primary:disabled{opacity:.6;cursor:default}
.overlay .dialog .primary svg,.overlay .dialog .text-button svg{stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.overlay .dialog .primary svg{width:26px;height:26px}
.overlay .dialog .text-button{font-size:16px;font-weight:700;color:#4c6042;border-radius:8px}
.overlay .dialog .text-button svg{width:24px;height:24px}
.overlay .dialog .install-button{font-weight:700;border:2px solid #7f895c;border-radius:9px}
.result-overlay .battle-result .result-value svg{stroke-width:2.3}
@media(hover:hover){
 .overlay .dialog .primary:hover:not(:disabled){background:linear-gradient(160deg,#ebd58e,#d4b763 65%,#c3a250);filter:none}
 .overlay .dialog .text-button:hover{background:#697a4620;filter:none}
}
@media(max-height:550px){.overlay .dialog .primary{min-height:44px;padding:8px 12px;font-size:17px}.overlay .dialog .text-button{padding:9px}}
@media(prefers-reduced-motion:reduce){.overlay .dialog .primary{transition:none}}