/* Section 2 presentation only. Stable DOM, fixed shell, original heraldic artwork. */
#hud{padding:6px max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left));position:relative;
 background:linear-gradient(100deg,#101c22ec,#253638e8 45%,#141e24f5),repeating-linear-gradient(0deg,#574a38 0 1px,#2a302e 1px 24px);
 border-bottom:3px double #a68c57;box-shadow:0 3px 12px #0005;z-index:6;display:grid;grid-template-columns:minmax(310px,1fr) minmax(340px,1.1fr);gap:2px 20px}
#hud h1{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
#hud .identity{display:grid;grid-template-columns:minmax(100px,1fr) auto auto;gap:2px 8px;align-items:center}
#name{grid-row:span 2;display:flex;align-items:center;gap:8px;text-align:left;min-height:48px;padding:0 4px 0 0;border:0;background:none;box-shadow:none;font:600 1.05rem var(--font-heading);color:#f6e6bd;overflow-wrap:anywhere}
#name::before{content:'';display:block;flex:0 0 42px;width:42px;height:46px;background:url('/play/crest.svg') center/contain no-repeat}
#castle{grid-column:2;grid-row:1;font:600 .78rem var(--font-heading);color:#d7c59f;white-space:nowrap;padding-left:6px}
#hud #army-nav{grid-column:2;grid-row:2;min-height:26px;padding:2px 6px;font-size:.72rem;background:transparent;border-color:transparent;box-shadow:none;text-align:left;white-space:nowrap}
#hud #gems-nav{grid-column:3;grid-row:span 2;min-height:44px;background:linear-gradient(145deg,#443c57,#252e37);border-color:#9784aa;font-size:.78rem;padding:5px 8px;white-space:nowrap}
#gems-nav::before{content:'◆';color:#d7bdf8;display:inline-block;margin-right:5px;text-shadow:0 1px 4px #9b80c7}
#rss{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:center}
#rss>div{display:grid;grid-template-columns:1fr;gap:2px;min-width:0;padding:4px 8px;border-left:1px solid #bda16b4d;background:linear-gradient(110deg,#d2b1760d,transparent)}
#rss dt{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;color:#cabd9f;white-space:nowrap}
#rss dd{font-size:.85rem;color:#fff0cf;white-space:nowrap;font-weight:600;line-height:1.2;overflow-x:auto;scrollbar-width:none}
#rss .ui-icon{width:18px;height:18px;filter:drop-shadow(0 1px 1px #0008)}
#status{grid-column:1/-1;margin:0;font-size:.67rem;line-height:1.35;max-height:2.7em;overflow:auto;color:#c7c7b5}
#connected>.controls{padding:2px max(8px,env(safe-area-inset-right)) 2px max(8px,env(safe-area-inset-left));gap:6px;flex-wrap:nowrap;background:linear-gradient(#36382f,#222d2c);border-bottom:1px solid #a088554d}
#connected>.controls>label{font:600 .73rem var(--font-heading);color:#c9b88d}
#profiles{min-height:40px;max-width:340px;width:auto;background:#19282c;border-color:#8c805d;font-size:.8rem}
#refresh{min-height:40px;background:transparent;border-color:#807451;font-size:.75rem}
#account-tools{margin-left:auto}#account-tools summary{min-height:40px;display:flex;align-items:center;gap:5px;padding:6px 10px;color:#eddbb6;border:1px solid #807451;border-radius:6px;background:#272e2b}
#account-tools summary::before{content:'◇';color:#e0be77}#account-tools summary::after{content:'⌄'}
#account-tools[open]{position:relative;right:auto;top:auto;padding:0;background:none;border:0;box-shadow:none;z-index:8}
#account-tools[open]>button{position:relative;width:100%;margin:0;border-radius:0;min-height:44px}
#account-tools[open]{position:absolute;right:max(8px,env(safe-area-inset-right));top:2px;width:min(245px,calc(100% - 16px));background:#202c30;border:1px solid var(--bronze)}
#rail{background:linear-gradient(#414337 0 1px,#17252b 1px 5px,#29302de8 5px),repeating-linear-gradient(90deg,#634b34 0 2px,#2f2b24 2px 80px);border-top:3px double #aa905a;gap:4px;padding:5px max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-shadow:0 -3px 12px #0006}
#rail>button{position:relative;display:flex;justify-content:center;align-items:center;gap:6px;min-height:46px;padding:4px 6px;border-color:#89734d;border-radius:3px 3px 8px 8px;background:linear-gradient(130deg,#444a3c,#202e30 70%);font-size:.75rem;line-height:1.2;color:#e4dbc4;box-shadow:inset 0 0 0 2px #e6c77908,0 2px 2px #0005}
#rail>button .ui-icon{width:25px;height:25px;margin:0;padding:3px;border-radius:50%;border:1px solid #b79a5e80;background:radial-gradient(circle at 30% 25%,#5b5e46,#1c292e);color:#f0d38e;flex:none}
#rail .nav-label{min-width:0;white-space:pre-line;font-variant-numeric:tabular-nums}
#rail>#retry{grid-column:1/-1;min-height:44px;border-color:var(--warning)}
#rail>button[aria-pressed=true]{background:linear-gradient(120deg,#655b3d,#314c48);border-color:#ebca83;color:#fff5d5;box-shadow:inset 0 -3px #dbb765,0 0 8px #e5bd5320}
#rail>button[data-lane]{min-height:46px;font-size:.68rem}
#rail>button[data-lane] .ui-icon{width:23px;height:23px}
#rail>button[data-active=true]::after{content:'';position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:#a9d7bb;box-shadow:0 0 3px #a9d7bb}
#panel{max-height:100%;scroll-padding-bottom:16px}#account-tools:focus-within{z-index:9}
@media(max-width:700px){
 #hud{grid-template-columns:1fr;gap:3px;padding-top:3px;padding-bottom:3px}
 #hud .identity{grid-template-columns:minmax(105px,1fr) auto auto;gap:0 6px}
 #name{min-height:44px;font-size:.95rem;gap:5px}#name::before{width:36px;height:40px;flex-basis:36px}
 #hud #gems-nav{font-size:.73rem}#hud #army-nav{font-size:.65rem;min-height:23px}#castle{font-size:.72rem}
 #rss{gap:3px}#rss>div{padding:1px 4px;gap:0}#rss dt{font-size:.58rem}#rss dd{font-size:.77rem}#rss .ui-icon{width:16px;height:16px}
 #status{font-size:.62rem;line-height:1.25}
 #connected>.controls{gap:4px}#connected>.controls>label{font-size:.66rem}#profiles{min-width:65px;max-width:none;font-size:.73rem;padding:4px}#account-tools summary{padding:6px;font-size:.73rem}#refresh{padding:4px 6px;font-size:.7rem}
 #rail{gap:3px;padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
 #rail>button{gap:3px;padding:3px 2px;font-size:.7rem;min-height:44px}
 #rail>button[data-lane]{gap:2px;min-height:46px;font-size:.6rem}
 #rail>button[data-lane] .ui-icon{width:18px;height:22px;padding:1px;border:0;background:none}
}
@media(max-height:500px) and (orientation:landscape){
 #hud{grid-template-columns:minmax(285px,.95fr) minmax(275px,1fr);gap:0 8px;padding-block:2px}
 #hud .identity{gap:0 4px}#name{font-size:.88rem;min-height:40px}#name::before{height:38px;width:34px;flex-basis:34px}
 #rss>div{padding:1px 4px}#rss dd{font-size:.75rem}#rss dt{font-size:.58rem}#status{font-size:.6rem;line-height:1.15;max-height:1.15em}
 #connected>.controls{padding-block:0}#profiles,#refresh,#account-tools summary{min-height:40px}
 #rail{grid-template-columns:repeat(10,minmax(0,1fr));padding-block:3px;gap:3px}
 #rail>button:not([data-lane]),#rail>button[data-lane]{grid-column:span 1;min-height:44px;padding:2px;font-size:.61rem;gap:2px}
 #rail>button .ui-icon,#rail>button[data-lane] .ui-icon{width:20px;height:22px;padding:1px}
 #panel{inset:3px;padding:8px}#panel>button:first-child{min-height:36px;margin-bottom:4px}
}
@media(prefers-reduced-motion:reduce){#hud *,#rail *{transition:none}}

#rail>button:not([data-lane]):not(#retry){grid-column:span 4}
#path-details{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
#path-panel select{width:100%;min-width:0;min-height:44px;margin-bottom:8px}
@media(max-height:500px) and (orientation:landscape){#rail>button:not([data-lane]):not(#retry){grid-column:span 1}}

/* Rank choices remain compact and have native keyboard/touch activation. */
.alliance-rank-editor {padding:8px!important; margin:4px 0!important;}
.alliance-rank-editor h3,.alliance-rank-editor p {margin:4px 0;}
.alliance-rank-buttons {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.alliance-rank-buttons button {min-height:44px;min-width:44px;padding:6px;}
.alliance-rank-buttons [data-current="true"] {border:2px solid #e1bd74;}
.alliance-rank-buttons [aria-pressed="true"] {background:#405b45;color:white;box-shadow:inset 0 0 0 2px #92c79b;}
.alliance-rank-editor>button {min-height:44px;margin:4px 4px 0 0;}
.rank-management h2 {margin:4px 0;font-size:1rem;}
.rank-management .alliance-tabs {flex-wrap:nowrap;overflow-x:auto;margin:2px 0;padding-bottom:2px;gap:3px;}
.rank-management .alliance-tabs button {flex-shrink:0;min-height:44px;margin:0;padding:4px;font-size:.75rem;}
.rank-management .alliance-content>p {margin:2px 0;font-size:.7rem;}
.rank-management .alliance-content>label {margin:2px 0;font-size:.8rem;}
.rank-management .alliance-content select {min-height:36px;padding:4px;}
.rank-management .alliance-rank-editor {display:flex;flex-wrap:wrap;gap:4px;}
.rank-management .alliance-rank-editor>h3,.rank-management .alliance-rank-editor>p,.rank-management .alliance-rank-buttons,.rank-management .alliance-rank-editor>small {width:100%;margin:0;}
.rank-management .alliance-rank-editor>button {flex:1;min-width:120px;margin:0;padding:4px;font-size:.8rem;}
.rank-management .alliance-rank-feedback:empty {display:none;}
.rank-management .alliance-rank-feedback {max-height:2.5em;overflow:auto;}
.rank-management {position:relative;}
.rank-management h2 {min-height:44px;padding-right:72px;display:flex;align-items:center;}
.rank-management #alliance-details>button {position:absolute;right:0;top:0;min-height:44px;padding:4px 10px;}
.rank-management .alliance-content>label {display:flex;align-items:center;gap:6px;}
.rank-management .alliance-content>label select {flex:1;width:0;min-height:44px;}
#panel:has(.rank-management:not([hidden])) #close-panel {position:absolute;right:8px;top:8px;min-height:44px;margin:0;z-index:1;}
.rank-management h2 {margin:0;padding-right:140px;}
.rank-management #alliance-details>button {right:76px;}

#leaderboards-menu {position:relative;min-width:0;}
#leaderboards-menu summary {min-height:44px;padding:8px 4px;cursor:pointer;font-size:.75rem;border:1px solid #89734d;border-radius:6px;box-sizing:border-box;}
#leaderboards-menu>div {position:absolute;bottom:100%;left:0;z-index:10;background:#203038;border:1px solid #89734d;padding:6px;width:180px;}
#leaderboards-menu button,#leaderboard-tabs button {min-height:44px;}
#leaderboard-tabs {display:flex;gap:4px;flex-wrap:wrap;}
#leaderboard-tabs [aria-pressed=true] {background:#426b53;}
#leaderboard-rows details {padding:8px;border-bottom:1px solid #89734d;overflow-wrap:anywhere;}
#leaderboard-rows summary {min-height:44px;cursor:pointer;}
#rail {grid-template-columns:repeat(30,minmax(0,1fr));}
#rail>button:not([data-lane]):not(#retry),#rail>#leaderboards-menu {grid-column:span 5;}
#rail>button[data-lane] {grid-column:span 6;}
#leaderboards-menu summary {font-size:.62rem;overflow-wrap:anywhere;}
@media(max-height:500px) and (orientation:landscape){
 #rail {grid-template-columns:repeat(11,minmax(0,1fr));}
 #rail>button:not([data-lane]):not(#retry),#rail>#leaderboards-menu,#rail>button[data-lane] {grid-column:span 1;}
}

/* March composer: fixed action row, bounded details, no panel/page scrolling. */
#panel.farming{display:flex;flex-direction:column;overflow:hidden;gap:4px;scroll-padding:0}
#panel.farming #close-panel{align-self:flex-end;flex:none;min-height:32px;margin:0;padding:4px 8px;font-size:.75rem}
#panel.farming #march-panel{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;gap:4px;min-height:0;flex:1}
#panel.farming #march-title{font-size:.95rem;margin:0}
#panel.farming #tile-details{font-size:.75rem;line-height:1.2;margin:0}
#panel.farming .march-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 64px;gap:5px;min-width:0}
#panel.farming .march-fields.scouting{grid-template-columns:1fr}
#panel.farming .march-fields label{min-width:0;font-size:.7rem;line-height:1.2}
#panel.farming select,#panel.farming input{min-width:0;width:100%;min-height:44px;margin:2px 0 0;padding:4px;font-size:16px}
#panel.farming #march-capacity{font-size:.72rem;line-height:1.2;margin:0}
#panel.farming #march-quote{min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;margin:0;font-size:.72rem;line-height:1.25}
#panel.farming #march-error{max-height:2.5em;overflow:auto;margin:0;font-size:.75rem;line-height:1.2}
#panel.farming #send-march{min-height:44px;margin:0;padding:6px;touch-action:manipulation;font-size:.85rem}
@media(max-width:700px){
 #overview.composing #world-view{margin-right:0}
 #panel.farming{inset:auto max(4px,env(safe-area-inset-right)) 4px max(4px,env(safe-area-inset-left));width:auto;height:260px;max-height:calc(100% - 8px);padding:6px}
 #panel.farming #march-panel{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}
 #panel.farming #march-title{display:none}
 #hud{padding-top:max(3px,env(safe-area-inset-top))}
}
@media(max-height:500px) and (orientation:landscape){
 #panel.farming{inset:3px max(4px,env(safe-area-inset-right)) 3px auto;width:min(620px,calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 8px));height:auto;max-height:none;padding:5px}
 #panel.farming #close-panel{position:absolute;right:5px;top:5px;z-index:1}
 #panel.farming #march-title{display:none}
 #panel.farming #march-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:3px}
 #panel.farming #tile-details{grid-area:1/1;font-size:.7rem}
 #panel.farming .march-fields{grid-area:2/1/3/3;grid-template-columns:1fr 1fr 80px}
 #panel.farming .march-fields.scouting{grid-template-columns:1fr}
 #panel.farming #march-capacity{grid-area:3/1;overflow:auto}
 #panel.farming #march-quote{grid-area:3/2}
 #panel.farming #march-error{grid-area:4/1}
 #panel.farming #send-march{grid-area:4/2}
 #rail{padding-bottom:max(3px,env(safe-area-inset-bottom))}
}