/* WORLD ORDER brand v1.3 applied to the game (brand/ folder: manual, tokens, fonts, logo, W icon).
   Typography: Barlow Condensed Bold for titles, short uppercase labels and numbers; Source Sans 3 for running text.
   The illustrated logo is never retyped: compact spaces use the W icon, the setup screen shows the full logo. */
@font-face{font-family:"Barlow Condensed";src:url("../brand/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../brand/fonts/BarlowCondensed-Bold.ttf") format("truetype");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../brand/fonts/SourceSans3%5Bwght%5D.ttf") format("truetype");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  /* brand tokens (brand/tokens.css) */
  --wo-petroleum:#11232F;--wo-ivory:#FAF9F5;--wo-steel:#5D6C72;--wo-amber:#A77939;--wo-gold:#D4AA5B;--wo-deep:#0A151D;
  --wo-title:"Barlow Condensed","Segoe UI",Arial,sans-serif;
  --wo-text:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --wo-num:"Barlow Condensed","Segoe UI",Arial,sans-serif;
}
html,body{background:var(--wo-deep)}
body,.battle-app,dialog,button,input,select,textarea{font-family:var(--wo-text)}
.battle-app{background:var(--wo-deep)}

/* titles: Barlow Condensed Bold, as the manual recommends */
.setup-heading h1,.inspection-text h2,.response-modal h2,.info-modal h2,.mulligan-modal h2,.choice-modal h2,.result-copy h2,.deck-heading h2,#combat-sequence-title,#card-dossier h2,.leader-option-copy strong,.ordered-choice-card h3{font-family:var(--wo-title);font-weight:700;letter-spacing:.01em}
.setup-heading h1{text-transform:uppercase;letter-spacing:.02em;line-height:.98}
.result-copy h2{text-transform:uppercase}

/* short labels in caps: Barlow Condensed SemiBold */
.eyebrow,.chip,.position-label,.fh-name,.lh-label,.lh-meta,#priority-label,.phase-name,.round-plaque .eyebrow,.face-kind,.face-forecast,.front-forecast,.briefing-label,.briefing-button small,.special-info small,.hand-heading,.pile-label,.status-bar,.session-status,.rail-heading,.combat-heading,.combat-sequence-steps li,.combat-latest-heading,.table-drop-zone strong,.dock-actions .text-button,.primary-button,.secondary-button,.window-button,.face-ribbon,.dossier-hint,.dossier-values dt,.dossier-glossary dt,.forecast-line .eyebrow,.autosave-status,.selection-banner,.hidden-count,.opponent-pile-info,.initiative-panel,.table-location,.empty-slot span,.mulligan-mark,.deck-status,.collection-meta,.setup-rules,.leader-role{font-family:var(--wo-title)!important;font-weight:600}
.primary-button,.secondary-button{font-weight:700;letter-spacing:.14em}

/* names */
.face-name>span{font-family:var(--wo-title);font-weight:700;font-size:11.2cqw;line-height:1.02;letter-spacing:.005em}
.face-name{height:22.8cqw}
.card-visual .card-name,.card-visual .card-name-text{font-family:var(--wo-title);font-weight:700;letter-spacing:.01em}
.lh .leader-name{font-family:var(--wo-title);font-weight:700;font-size:clamp(17px,1.35vw,25px);letter-spacing:.02em}

/* numbers: Barlow Condensed has lining figures; the trim keeps them optically centred */
.face-cost,.face-stat,.lh-value,.lane .formation-power b,.fx-ruler b,.fx-number.fx-hit,.dossier-values dd,.lh .special-cost,.briefing-cost,#round-value,.card-visual .card-cost,.card-visual .card-attributes,.inspection-values strong,.result-scores strong,.deck-entry em,.collection-cost,.pile-number{font-family:var(--wo-num)!important;font-weight:700}
.face-cost>b{font-size:1.18em}
.face-stat>b{font-size:1.12em}

/* topbar: the W icon stands for the brand in compact spaces (full logo needs ≥ 320 px visible width) */
.wordmark.brand-mark{display:flex;align-items:center;gap:0;padding:0;height:46px;width:46px;flex:none;letter-spacing:0}
.wordmark.brand-mark img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 6px #000a)}
.wordmark.brand-mark span{display:none}

/* setup: the official two-line logo, ≥ 320 px visible width, with its protection area (x = H/8) */
.setup-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center}
.setup-heading>*:not(.brand-logo-wrap){grid-column:1}
.brand-logo-wrap{grid-column:2;grid-row:1/span 3;align-self:center;padding:22px 24px;margin:-12px 0}
.brand-logo{display:block;width:clamp(345px,26vw,470px);height:auto;margin:-11% -3% -8%}
.setup-heading p{max-width:62ch}
@media (max-width:1450px){.brand-logo{width:345px}.brand-logo-wrap{padding:16px 10px}}
@media (max-height:800px){.brand-logo{width:345px}}

/* palette touches: petroleum panels, gold accents */
.priority-panel,.chronicle-panel,.combat-sequence,.leader-panel{background-color:var(--wo-petroleum)}
.priority-panel .primary-button{background:linear-gradient(110deg,#c99f52,var(--wo-gold) 55%,#e6c98a);color:#13202a}

/* Intelligence Briefing: dim when unavailable, lit when it can be used now */
.briefing-button{opacity:1}
.briefing-button:disabled{opacity:.5;filter:saturate(.4)}
.briefing-button.is-ready{background:linear-gradient(135deg,#1b4a5c,#0f2f3c);border-color:#8fe3ff;color:#eafaff;box-shadow:0 0 0 1px #8fe3ff66,0 0 18px #4fc3e866,inset 0 0 14px #8fe3ff22}
.briefing-button.is-ready>svg{stroke:#c9f3ff;filter:drop-shadow(0 0 4px #8fe3ff)}
.briefing-button.is-ready small{color:#bfefff}
.briefing-button.is-ready .briefing-cost{border-color:#f3d48e;box-shadow:0 0 8px #f3d48e88}
.pile-stack{position:relative;display:flex}
.pile-briefing{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);white-space:nowrap;z-index:4;display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:3px;border:1px solid #8fe3ff;background:#0f3442ee;color:#eafaff;font:700 11px/1 var(--wo-title);letter-spacing:.12em;box-shadow:0 0 14px #4fc3e899;cursor:pointer}
.pile-briefing[hidden]{display:none}
.pile-briefing svg{width:12px;height:12px;stroke:#c9f3ff}
.pile-briefing b{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid #f3d48e;font:700 11px/1 var(--wo-num)}
.briefing-ready .pile-button[data-deck="player"] .pile-art{box-shadow:0 0 0 2px #8fe3ff,0 0 18px #4fc3e8aa;border-radius:4px}
@media (prefers-reduced-motion:no-preference){
  .battle-app:not(.reduced-motion) .briefing-button.is-ready{animation:wo-brief 2.4s ease-in-out infinite}
  .battle-app:not(.reduced-motion) .pile-briefing:not([hidden]){animation:wo-brief 2.4s ease-in-out infinite}
}
@keyframes wo-brief{50%{box-shadow:0 0 0 1px #8fe3ffaa,0 0 26px #4fc3e8aa,inset 0 0 18px #8fe3ff33}}
.lh .special-button .special-info strong{font-family:var(--wo-title);font-weight:700;font-size:clamp(11px,.78vw,14px);letter-spacing:.02em;line-height:1.05}
/* short screens (≤ 800 px tall): the setup fits without scrolling, logo kept at ≥ 320 px visible width */
@media (min-width:681px) and (max-height:800px){
  .setup-modal{padding-top:18px;padding-bottom:14px}
  .setup-heading{padding-bottom:17px;margin-bottom:12px}
  .setup-heading h1{font-size:32px;margin-top:8px;margin-bottom:8px}
  .setup-heading p{line-height:1.5;margin:0}
  .brand-logo-wrap{padding:6px 10px;margin:-6px 0}
  .leader-option{min-height:112px}
  .setup-config{margin-top:12px;margin-bottom:12px}
  .setup-config small{display:none}
  .deck-builder-link{padding:2px 0 4px}
  .opponent-config{padding:7px 0;margin-bottom:12px}
  .setup-rules{margin:8px 0 8px}
  .setup-rules br{display:none}
  .setup-footer{padding-top:9px}
}
@media (min-width:681px) and (min-height:801px) and (max-height:960px){
  .setup-modal{padding-top:28px;padding-bottom:18px}
  .leader-option{min-height:134px}
  .brand-logo{width:clamp(345px,22vw,380px)}
  .setup-config{margin-top:18px;margin-bottom:16px}
}
.setup-rules .br-sep{display:none}
@media (min-width:681px) and (max-height:800px){.setup-rules .br-sep{display:inline}}

/* v019: three leaders on the setup screen */
.leader-choice{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px}
.leader-choice .leader-option-art img{width:88%;right:-6%;height:118%}
.leader-choice .leader-option-copy strong{font-size:clamp(17px,1.25vw,22px)}
.opponent-config select{min-width:130px}