/* The field belongs to the armies. Keep paint and engraved marks on the keys,
   but let the ground show through their frames; opacity never dims the troops,
   portraits or words. Only an opened command sheet needs the stronger veil. */
:root {
  --hud-glass: rgba(20,33,39,.68); --hud-sheet: rgba(20,33,39,.82);
  --hud-card: rgba(20,33,39,.72); --hud-hover: rgba(55,101,131,.82);
  --hud-line: rgba(201,214,206,.42); --hud-shine: rgba(255,243,213,.12);
  --hud-shadow: 0 2px 8px rgba(12,20,24,.24);
  --hud-text-shadow: 0 1px 2px rgba(12,20,24,.95);
}
html #hud :is(#factions.scorecard, #factions.alliance, #factions.ladder, #mapframe, #buildbar, #clashbar, #clashcmd) {
  background: var(--hud-glass); color: var(--field-ink);
  border: 1px solid var(--hud-line); border-top: 2px solid var(--field-rule);
  border-radius: var(--r-md); box-shadow: inset 0 1px var(--hud-shine), var(--hud-shadow);
  backdrop-filter: none;
}
html #hud #factions.scorecard .sc-card { background: transparent; backdrop-filter: none; }
html #hud #factions .sc-side { background: transparent; }
html #hud #factions .sc-mid { background: var(--outline); border-radius: var(--r-sm); }
html #hud #mapframe::before { opacity: .25; }
html #hud #mapframe :is(.mf-label, .mf-title, .kp-label, .kp-name) { color: var(--field-ink); text-shadow: none; }
html #hud #mapframe :is(.mf-gold, .mf-bank b, .ws-gold) { color: var(--gold-hi); text-shadow: none; }
html #hud #mapframe :is(.mf-bank, #resources) { border-color: var(--field-rule); }
html #hud #keeppanel, html.phone #hud :is(#keepsheet, #worksheet) {
  background: var(--paper-face); color: var(--paper-ink); border: 2px solid var(--outline);
  border-radius: var(--r-sm); box-shadow: var(--carved-edge);
}
html #hud #keeppanel :is(.kp-hd, .kp-name, .kp-ttl, .kp-label, .kp-tot) { color: var(--paper-ink); text-shadow: none; }
html #hud #keeppanel .kp-hd { border-bottom: 1px solid var(--paper-shadow); padding-bottom: 4px; }
html #hud #keeppanel :is(.kp-row, .kp-btn) { background: var(--paper-light); color: var(--paper-ink); border-color: var(--paper-shadow); }
html #hud #garrisonbtn { background: var(--enamel-face); color: var(--cloth-ink); border: 2px solid var(--outline); text-shadow: none; }
html #hud #garrisonbtn[aria-pressed="true"] { background: var(--paper-ready); color: var(--cloth-ink); border-color: var(--ready-lt); }
html #hud #fortifybtn { background: var(--paper-light); color: var(--paper-ink); border: 2px solid var(--outline); text-shadow: none; }
html #hud #fortifybtn .fb-cost { color: var(--paper-ink); }
/* NOT YET AFFORDABLE IS DARK GLASS, NOT A GREY SLAB. The sheet dims a disabled
   fortify to 42%, which on this cream plate over the dark keep panel came out a
   mud-grey block with dark-grey words — the tier and its price, the two things
   the button is for, at the lowest contrast in the corner. Unaffordable now
   takes the panel's own glass with the field's quiet ink, fully legible; the
   cream plate is kept for the moment it can be bought, so the change from one to
   the other is a change of value and shape as well as of colour. */
html #hud #fortifybtn:disabled { opacity: 1; background: var(--hud-card); color: var(--field-muted); border-color: var(--hud-line); }
html #hud #fortifybtn:disabled .fb-cost { color: var(--field-muted); }

/* Portraits sit on a pale painted plane; the frame carries role and readiness.
   A dimmed unaffordable tile still keeps its name and cost readable. */
html #hud .build, html.phone #hud .build {
  background: var(--hud-card); color: var(--field-ink);
  border: 2px solid var(--outline); border-top: 4px solid var(--cat, var(--gold));
  border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--outline), var(--sh-1);
}
html #hud .build::before { top: -3px; height: 3px; opacity: .8; }
html #hud .build :is(.bn, .bc, .bname, .bcost, .bpop, .bdesc) { color: var(--field-ink); text-shadow: none; }
html #hud .build .bn { background: var(--field-board); box-shadow: none; }
html #hud .build .bcat { color: var(--cat, var(--gold-lt)); text-shadow: 0 1px var(--outline); }
html #hud .build .bicon { background: transparent; box-shadow: none; border-radius: var(--r-xs); }
html #hud .build .bk { color: var(--field-ink); background: var(--field-board); border-color: var(--field-rule); }
html #hud .build .bupg { background: var(--field-board); color: var(--field-ink); border: 1px solid var(--field-rule); text-shadow: none; }
html #hud .build .bupg.go { background: var(--paper-ready); color: var(--cloth-ink); border-color: var(--ready-lt); }
html #hud .build .bupg.cant { background: var(--field-board); color: var(--field-muted); border-color: var(--field-rule); }
html #hud .build.ready { border-color: var(--ready-lt); border-top-color: var(--cat, var(--gold)); box-shadow: inset 0 0 0 1px var(--ready-lt), 0 3px 0 var(--outline), var(--sh-1); }
html #hud .build.ready .bk { background: var(--ready-lt); color: var(--ready-ink); border-color: var(--outline); }
html #hud .build.armed { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
html #hud .build:not(.ready) { opacity: .9; }
html #hud .br-item { background: var(--field-board-light); color: var(--field-ink); border: 2px solid var(--outline); border-top: 4px solid var(--cat, var(--gold)); border-radius: var(--r-sm); }
html #hud .br-item :is(.br-n, .br-c) { color: var(--field-ink); text-shadow: none; }

/* The engineer's board stays distinct from the troop rack, in pale blue ink. */
html #hud .uw-card { background: var(--blueprint); color: var(--blueprint-ink); border: 2px solid var(--outline); border-top: 4px solid var(--steel-light); border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--outline), var(--sh-3); }
html #hud .uw-head { background: var(--blueprint-light); border-color: var(--steel); }
html #hud .uw-strap, html #hud .uw-strap b { color: var(--blueprint-ink); }
html #hud .uw-row { background: var(--blueprint-light); color: var(--blueprint-ink); border: 1px solid var(--steel); border-left: 4px solid var(--enamel-blue); border-radius: var(--r-xs); box-shadow: var(--sh-1); }
html #hud .uw-row.uw-keep { background: var(--paper-face); border-left-color: var(--wood); }
html #hud .uw-row.can { border-color: var(--paper-ready); border-left-color: var(--paper-ready); box-shadow: inset 0 0 0 1px var(--paper-ready), var(--sh-1); }
html #hud .uw-row :is(.uw-name, .uw-g) { color: var(--blueprint-ink); text-shadow: none; }
html #hud .uw-row .uw-g { background: var(--paper-light); border-color: var(--steel); }
html #hud .uw-up.can { background: var(--paper-ready); color: var(--cloth-ink); border: 2px solid var(--outline); text-shadow: none; }
html #hud .uw-up.poor { background: var(--blueprint); color: var(--blueprint-ink); border-color: var(--steel); }
html #hud .uw-up.busy { background: var(--steel-light); color: var(--blueprint-ink); border-color: var(--steel); }
html #hud .uw-row .autobox { background: var(--blueprint); color: var(--blueprint-ink); border-color: var(--steel); }

/* A coral build key and blue upgrade key share the silhouette of painted wood.
   Green remains exclusively an actionable/completed signal. */
html #hud :is(#buildbtn, #upgradebtn, #releasepanelbtn, #keepstud, #workstud) { background: var(--enamel-face); color: var(--cloth-ink); border: 2px solid var(--outline); border-radius: var(--r-md); box-shadow: var(--enamel-edge); text-shadow: none; transition: transform var(--t-1) var(--e-out), filter var(--t-1) var(--e-out); }
html #hud #buildbtn { background: var(--rose-face); border-top-color: var(--enamel-rose-light); }
html #hud #upgradebtn { border-top-color: var(--steel-light); }
html #hud :is(#buildbtn, #upgradebtn) .action-icon { color: var(--cloth-ink); background: var(--outline); border-color: var(--field-rule); box-shadow: none; }
html #hud #upgradebtn.ready { border-color: var(--ready-lt); }
html #hud #upgradebtn.ready .action-icon { color: var(--ready-lt); border-color: var(--ready-lt); }
html #hud #upgradebtn.none { filter: saturate(.5); }
html #hud :is(#releasebtn, #releasepanelbtn) { background: var(--paper-ready); color: var(--cloth-ink); border: 2px solid var(--outline); border-radius: var(--r-sm); text-shadow: none; }
html #hud :is(#marchallbtn, #stopbtn, #fwbtn, #emotebtn) { background: var(--enamel-face); color: var(--cloth-ink); border: 2px solid var(--outline); border-radius: var(--r-pill); box-shadow: 0 3px 0 var(--outline), var(--sh-1); text-shadow: none; transition: transform var(--t-1) var(--e-out), filter var(--t-1) var(--e-out); }
html #hud #stopbtn { background: var(--paper-peril); }
html #hud #fwbtn { background: var(--paper-face); color: var(--paper-ink); }
html #hud #emotebtn { background: var(--room-chronicle); }
html #hud :is(#marchallbtn.on, #emotebtn.on), html.phone #hud #keepstud[aria-pressed="true"] { background: var(--paper-ready); color: var(--cloth-ink); border-color: var(--ready-lt); }
@media (hover: hover) {
  html #hud .build:hover { background: var(--enamel-blue); }
  html #hud :is(#buildbtn, #upgradebtn, #marchallbtn, #stopbtn, #fwbtn, #emotebtn):hover { transform: translateY(-2px); filter: brightness(1.1); }
  html #hud #upgradebtn.none:hover { transform: none; filter: saturate(.5); }
  html #hud .uw-row.can:hover { background: var(--paper-light); }
}
html #hud :is(#buildbtn, #upgradebtn, #marchallbtn, #stopbtn, #fwbtn, #emotebtn, #releasepanelbtn):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline), var(--sh-0); }
html #hud #releasebtn:active { transform: translate(-50%, 2px); }
html.phone #hud #mapframe { border-width: 1px; border-radius: var(--r-md); }
html.phone #hud #keeppanel { border: 0; box-shadow: none; background: none; }
html.phone #hud #keepstud { background: var(--paper-face); color: var(--paper-ink); border: 2px solid var(--outline); }
html.phone #hud #workstud { background: var(--enamel-face); color: var(--cloth-ink); border: 2px solid var(--outline); }
html #hud :is(#selpanel, #bldqueue) { background: var(--paper-face); color: var(--paper-ink); border: 2px solid var(--outline); border-radius: var(--r-sm); box-shadow: var(--carved-edge); }
@media (prefers-reduced-motion: reduce) {
  html #hud :is(#buildbtn, #upgradebtn, #marchallbtn, #stopbtn, #fwbtn, #emotebtn) { transition: none; }
  html #hud :is(#buildbtn, #upgradebtn, #marchallbtn, #stopbtn, #fwbtn, #emotebtn):hover { transform: none; }
}

/* Context sheets float over the ground. Strong ink shadows and the dark veil
   keep labels readable over pale snow as well as a forest; no heavy blur hides
   a unit moving behind the tray. Slots retain their normal hit areas. */
html #hud :is(#keeppanel, #keepsheet, #worksheet, #selpanel, #bldqueue, .uw-card),
html.phone #hud :is(#keepsheet, #worksheet) {
  background: var(--hud-sheet); color: var(--field-ink); border-color: var(--hud-line);
  box-shadow: var(--hud-shadow); text-shadow: var(--hud-text-shadow);
}
html #hud :is(#keeppanel, #keepsheet, #worksheet, #selpanel, #bldqueue, .uw-card) :is(.kp-hd, .kp-name, .kp-ttl, .kp-label, .kp-tot, .kp-row, .kp-btn, .uw-name, .uw-g, .uw-strap, .uw-strap b) { color: var(--field-ink); text-shadow: var(--hud-text-shadow); }
html #hud :is(.uw-head, .uw-row, .uw-row.uw-keep, .kp-row, .kp-btn, .uw-row .uw-g, .uw-row .autobox, .uw-up.poor) { background: var(--hud-card); color: var(--field-ink); border-color: var(--hud-line); }
html #hud :is(.uw-up.can, .uw-up.busy, .uw-up.poor) { min-height: 34px; }
html #hud :is(.build, .br-item) { border-width: 1px; border-top-width: 3px; box-shadow: var(--hud-shadow); }
html #hud :is(.bn, .bc, .bname, .bcost, .cl-nm, .cl-pr, .sc-name, .mf-label, .ws-gold, .ws-armhd) { text-shadow: var(--hud-text-shadow); }
html #hud .br-item { background: var(--hud-card); }
/* (unaffordable keeps full opacity and loses its card-wide saturate: a filtered card
   is re-rendered whole on every change inside it, and over a live battle on a
   phone that was the frame rate — the portrait's own grey says "not yet") */
html #hud .build:not(.ready) { opacity: 1; }
html #hud #mapframe::before, html.inmatch body::after, html.inmatch .kingdomframe { display: none; }
html:not(.phone) #hud #warstate { padding: 8px 12px; }
html:not(.phone) #hud #warstate .ws-gold { font-size: 30px; line-height: 1; }
html:not(.phone) #hud #warstate .ws-purse { margin-bottom: 6px; }
/* THE CORNER PLATE IS GLASS, SO IT KEEPS THE FIELD'S INKS. It sat in storybook's
   list of paper containers, which re-points --ink, --muted and --gold-lt at dark
   paper inks for everything inside — right for parchment, and on this glass it
   set the GOLD rank and the whole army register (its label, and the 44/240 a
   commander checks before every muster) in dark brown on dark teal, near enough
   invisible. The purse figure only survived because it is named by class above.
   Taken out of that list rather than re-inked here: a remap that is undone one
   sheet later is two rules saying opposite things about one box.
   …AND THE WORDS GO. The purse is the gold-coloured number and the rate is the
   green +N beside it; GOLD and PER SEC were captions on what the colour already
   says, and the phone has done without both from the start. The army reads as a
   figure and a filling bar under the troop mark, not a word. */
html:not(.phone) #hud #warstate :is(.ws-lbl, .ws-inc em) { display: none; }
html #hud #warstate .ws-armhd span { display: inline-flex; color: var(--gold-lt); }
html #hud #warstate .ws-armhd span .ic { width: 14px; height: 14px; }
html:not(.phone) #hud #warstate .ws-armhd b { font-size: 16px; }
html #hud #factions .sc-mid { background: transparent; }
html #hud #factions .sc-vs:empty { display: none; }   /* the usual goal goes unsaid (updateScorecard) */
html #hud #factions.scorecard::before, html #hud #factions.scorecard::after { display: none; }
html #hud #factions.alliance::before, html #hud #factions.alliance::after, html #hud #factions .sb-rodcap { display: none; }
html #hud #factions.scorecard .sc-card { box-shadow: none; }

/* Deployment is a painter's palette, not a second screen. The ground briefing
   opens on request; the roster folds independently, leaving Ready in reach. */
html #hud #clashbar { width: min(calc(96vw / var(--ui)), 940px); padding: 8px 10px; gap: 4px; }
html #hud #clashbar .cl-head { gap: 10px; }
html #hud #clashbar .cl-title b { font-size: 15px; }
html #hud #clashbar .cl-kick { display: none; }
html #hud #clashbar :is(.cl-clock b, .cl-purse b) { font-size: 18px; color: var(--field-ink); text-shadow: var(--hud-text-shadow); }
html #hud #clashbar .cl-pop { color: var(--field-ink); }
html #hud #clashbar .cl-foe { flex: 1 1 80px; min-width: 0; font-size: 11px; }
html #hud #clashbar .cl-foe-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html #hud #clashbar .cl-acts { gap: 5px; }
html #hud #clashbar :is(.cl-roster-toggle, .cl-clear, .cl-ready) { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--hud-line); border-radius: var(--r-sm); background: var(--hud-card); color: var(--field-ink); font: 700 12px var(--font-ui); cursor: pointer; }
html #hud #clashbar .cl-roster-toggle .ic { width: 16px; height: 16px; }
html #hud #clashbar .cl-ready { background: var(--enamel-face); border-color: var(--steel-light); }
html #hud #clashbar .cl-ready.on { background: var(--paper-ready); border-color: var(--ready-lt); }
html #hud #clashbar .cl-ready:disabled { opacity: .6; }
html #hud #clashbar .cl-brief { position: relative; }
html #hud #clashbar .cl-brief summary { display: inline-block; cursor: pointer; color: var(--field-ink); font: 600 11px var(--font-ui); padding: 3px 0; }
html #hud #clashbar .cl-brief summary::before { content: '+'; color: var(--gold-lt); margin-right: 5px; }
html #hud #clashbar .cl-brief[open] summary::before { content: '−'; }
html #hud #clashbar .cl-field { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 4; padding: 12px; background: var(--hud-sheet); border: 1px solid var(--hud-line); border-radius: var(--r-md); box-shadow: var(--hud-shadow); }
html #hud #clashbar .cl-card { width: 76px; min-height: 83px; padding: 4px 3px; gap: 1px; background: var(--hud-card); border: 1px solid var(--hud-line); border-top: 2px solid var(--cat); border-radius: var(--r-sm); box-shadow: none; }
html #hud #clashbar .cl-card::after { display: none; }
html #hud #clashbar .cl-card canvas { width: 44px; height: 44px; }
html #hud #clashbar .cl-nm { white-space: normal; overflow: visible; font-size: 11px; line-height: 1.1; }
html #hud #clashbar .cl-pr { color: var(--field-ink); font: 800 11px var(--font-ui); }
html #hud #clashbar .cl-card.armed { transform: translateY(-2px); border-color: var(--gold-hi); outline: 2px solid var(--gold-hi); outline-offset: -2px; background: var(--hud-hover); box-shadow: var(--hud-shadow); }
html #hud #clashbar .cl-card.cant { filter: saturate(.35); }
html #hud #clashbar .cl-card.cant .cl-pr { color: var(--field-ink); }
html #hud #clashbar .cl-cards { padding: 4px 2px; gap: 5px; }
html #hud #clashbar .cl-cards[hidden], html #hud #clashbar.cl-folded .cl-brief { display: none; }
html #hud #clashbar .cl-hint { color: var(--field-ink); font: 600 11px var(--font-ui); text-shadow: var(--hud-text-shadow); }
html.cl-deploying #hud #mapframe { display: none; }
html.cl-mode #hud #clashcmd { padding: 4px; gap: 4px; }
html.cl-mode #hud #clashcmd button { color: var(--field-ink); background: var(--hud-card); min-height: 36px; }
html.cl-mode #hud #clashcmd button.armed { background: var(--enamel-face); border-color: var(--gold-hi); }
/* Battle hover cards share the veil too. The parchment ledger still belongs
   in the Armory, but a tactical glance must not paint a wall over live troops. */
html.inmatch :is(#tip, #unittip) { --ink: var(--field-ink); --muted: var(--field-muted); --gold-lt: var(--field-ink); --gold-bright: var(--field-ink); background: var(--hud-sheet); color: var(--field-ink); border: 1px solid var(--hud-line); box-shadow: var(--hud-shadow); text-shadow: var(--hud-text-shadow); }
html.inmatch #tip .thead, html.inmatch #unittip .ut-head { background: var(--hud-hover); border-color: var(--hud-line); }
html.inmatch #tip .tart, html.inmatch #unittip .ut-art { background: transparent; }
html.inmatch #tip :is(.tgrid, .tcell), html.inmatch #unittip .ut-stats { background: transparent; }
html.inmatch #tip .tcell :is(b,i), html.inmatch #unittip .ut-stats :is(b,i,em) { color: var(--field-ink); }
html.inmatch #tip .tpow span, html.inmatch #unittip .ut-pow span { color: var(--field-ink); background: var(--hud-card); border-color: var(--hud-line); }
html.inmatch #tip .tstrong, html.inmatch #unittip .ut-strong { color: var(--ready-lt); }
html.inmatch #tip .tweak, html.inmatch #unittip .ut-weak { color: var(--peril-lt); }
html.inmatch #unittip .ut-desc { color: var(--field-ink); }
html.inmatch #unittip .ut-foot { background: transparent; border-color: var(--hud-line); color: var(--field-ink); }
html.inmatch #unittip .ut-foot.own { color: var(--ready-lt); }
html.inmatch #unittip .ut-foot.locked { color: var(--field-ink); }
@media (hover: hover) {
  html #hud .build:hover, html #hud #clashbar .cl-card:hover { background: var(--hud-hover); }
  html #hud #clashbar :is(.cl-roster-toggle, .cl-clear):hover { background: var(--hud-hover); }
}
html.phone #hud #clashbar { width: auto; padding: 6px; }
html.phone #hud #clashbar .cl-head { flex-wrap: wrap; gap: 5px; }
html.phone #hud #clashbar .cl-foe, html.phone #hud #clashbar .cl-title { display: none; }
html.phone #hud #clashbar .cl-acts { margin-left: auto; }
html.phone #hud #clashbar :is(.cl-clear, .cl-roster-toggle, .cl-ready, .cl-brush button) { min-height: 38px; }
html.phone #hud #clashbar .cl-roster-toggle span { display: none; }
html.phone #hud #clashbar .cl-card { width: 66px; min-height: 79px; }
html.phone #hud #clashbar .cl-hint { font-size: 11px; }
html.phone #hud #clashbar .cl-field { display: flex; max-height: 35vh; overflow: auto; }
@media (max-height: 420px) {
  html.phone.landscape #hud #clashbar .cl-brief { display: none; }
  html.phone.landscape #hud #clashbar .cl-card { width: 117px; min-height: 48px; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: minmax(0, 1fr) auto; column-gap: 3px; }
  html.phone.landscape #hud #clashbar .cl-card canvas { width: 38px; height: 38px; grid-row: 1 / 3; }
  html.phone.landscape #hud #clashbar .cl-nm { align-self: end; }
  html.phone.landscape #hud #clashbar .cl-pr { align-self: start; }
  html.phone.landscape #hud #clashbar .cl-nm { text-align: left; min-width: 0; overflow-wrap: anywhere; }
  html.phone.landscape #hud #clashbar .cl-n { top: 2px; left: 2px; right: auto; }
}