/* The supplied art brief's typefaces, bundled for offline play. */
@font-face { font-family:Inter; src:url('fonts/inter-latin-400-800.woff2') format('woff2'); font-weight:400 800; font-display:swap; }
@font-face { font-family:Anton; src:url('fonts/anton-latin-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
html,body { font-family:Inter,system-ui,sans-serif; }
button { font-family:inherit; }
.menuCard h1 { font-family:Anton,Impact,sans-serif; font-weight:400; letter-spacing:.6px; -webkit-text-stroke:1px #101e20; paint-order:stroke fill; text-shadow:0 3px 0 #07171d; }
.primary { font-family:Anton,Impact,sans-serif; font-weight:400; font-size:23px; letter-spacing:1.2px; background:#ffd233; }
#hudTimer { font-family:Anton,Impact,sans-serif; font-weight:400; font-variant-numeric:tabular-nums; -webkit-text-stroke:1px #101e20; paint-order:stroke fill; }
.tagline { font-size:14px; line-height:1.55; }
.segmented button { font-weight:700; }
#weaponPanel .weaponPanelMeta strong { font-family:Anton,Impact,sans-serif; font-weight:400; letter-spacing:1px; }
#weaponPanel .wepBtn .nm { font-weight:750; }
button:focus-visible { outline:3px solid #fff5cf; outline-offset:3px; }
/* A readable selected-weapon card; width buys legibility instead of 8px labels. */
#weaponDock #btnWeapon { width:176px; grid-template-columns:40px minmax(0,1fr); grid-template-rows:1fr 18px; column-gap:8px; padding:6px 10px; text-align:left; }
#weaponDock #btnWeapon .btnWepIco { width:40px; height:40px; }
#weaponDock #btnWeapon .btnWepTxt,
#weaponDock #btnWeapon .btnWepTxt.nm-long,
#weaponDock #btnWeapon .btnWepTxt.nm-xlong,
#weaponDock #btnWeapon .btnWepTxt.nm-word { font-size:13px; line-height:15px; max-height:30px; font-weight:750; align-self:center; white-space:normal; word-break:normal; overflow-wrap:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#weaponDock #btnWeapon .btnWepMore { font-size:10px; line-height:14px; letter-spacing:.6px; align-self:center; color:#e1e9e3; }
#weaponSummary { font-size:12px; line-height:16px; max-width:min(520px,calc(100vw - 24px)); padding:1px 8px; }
/* Comparisons reload the match: keep developer links on the menu, not over play. */
body:has(#hud:not(.hidden)) #painted-preview-status { display:none; }
#fluid-pilot-status { position:fixed; right:12px; top:122px; z-index:9000; max-width:min(300px,calc(100vw - 24px)); padding:7px 10px; border-radius:8px; background:#17352aee; color:#e7f0e8; font:12px/1.4 Inter,system-ui,sans-serif; pointer-events:none; }
#fluid-pilot-tools { position:fixed; right:12px; top:122px; z-index:9000; max-width:min(320px,calc(100vw - 24px)); border:1px solid #6e918577; border-radius:9px; background:#142e32f5; color:#edf3ea; font:12px/1.4 Inter,system-ui,sans-serif; box-shadow:0 3px 12px #06171955; }
#fluid-pilot-tools > summary { padding:8px 11px; cursor:pointer; font-weight:750; min-height:34px; box-sizing:border-box; }
#fluid-pilot-tools[open] { padding-bottom:8px; }
#fluid-pilot-tools #fluid-pilot-status { position:static; max-width:none; background:none; padding:4px 11px 8px; }
#fluid-pilot-tools button,#fluid-pilot-tools a { display:block; margin:5px 10px; padding:8px 10px; border:1px solid #91aa9477; border-radius:6px; background:#29464a; color:#fff7db; font:inherit; text-align:left; }
#fluid-pilot-tools textarea { display:block; box-sizing:border-box; width:calc(100% - 20px); min-width:260px; height:100px; margin:8px 10px; font:10px/1.4 monospace; }
#fluid-pilot-tools[data-stopped="true"] > summary { color:#ffd890; }
@media(max-height:500px) and (orientation:landscape) {
  #weaponDock #btnWeapon { width:144px; grid-template-columns:28px minmax(0,1fr); grid-template-rows:1fr 12px; column-gap:6px; padding:3px 6px; }
  #weaponDock #btnWeapon .btnWepIco { width:28px; height:28px; }
  #weaponDock #btnWeapon .btnWepTxt,#weaponDock #btnWeapon .btnWepTxt.nm-long,#weaponDock #btnWeapon .btnWepTxt.nm-xlong,#weaponDock #btnWeapon .btnWepTxt.nm-word { font-size:11px; line-height:12px; max-height:24px; }
  #weaponDock #btnWeapon .btnWepMore { font-size:9px; line-height:11px; }
  #weaponSummary { font-size:11px; line-height:13px; padding:0 6px; }
  #fluid-pilot-status,#fluid-pilot-tools { top:76px; right:8px; }
}
@media(max-height:500px) and (max-width:700px) and (orientation:landscape) {
  #weaponDock #btnWeapon { width:116px; grid-template-columns:22px minmax(0,1fr); column-gap:4px; padding:3px 4px; }
  #weaponDock #btnWeapon .btnWepIco { width:22px; height:22px; }
  #weaponDock #btnWeapon .btnWepTxt,#weaponDock #btnWeapon .btnWepTxt.nm-long,#weaponDock #btnWeapon .btnWepTxt.nm-xlong,#weaponDock #btnWeapon .btnWepTxt.nm-word { font-size:10px; line-height:12px; }
  #weaponDock #quickWeapons { gap:3px; }
  #weaponDock .quickWeapon { width:40px; }
}
/* Playback capture belongs to the same optional review drawer. */
#fluid-pilot-tools[open] { max-height:calc(100dvh - 150px); overflow:auto; }
#fluid-pilot-tools .fluid-play-review { position:static!important; max-width:none!important; padding:6px 0!important; background:transparent!important; color:inherit!important; border:0!important; border-top:1px solid #91aa9444!important; border-radius:0!important; display:block!important; }
#fluid-pilot-tools .fluid-play-review > span { display:block; margin:4px 11px; }
#fluid-pilot-tools [hidden] { display:none!important; }
#fluid-pilot-tools button:disabled { opacity:.45; }
@media(max-height:500px) and (orientation:landscape) {
  #fluid-pilot-tools[open] { max-height:calc(100dvh - 92px); }
}
@media(max-height:500px) and (max-width:700px) and (orientation:landscape) {
  /* Reserve the back-jump button's right edge on the shortest landscape phones. */
  #weaponDock { margin-left:8px; }
}
/* Keep the touch instruction attached to the weapon controls. The old 116px
   lane left a 40px empty gap and put this line across actors/aim cues on phones. */
#aimHint.target-confirm-hint {
  max-width:min(720px,calc(100vw - 24px)); box-sizing:border-box;
  white-space:pre-line; text-align:center; line-height:1.3;
}
@media (max-height:500px) and (orientation:landscape) {
  #aimHint { bottom:calc(78px + env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); box-sizing:border-box; }
  #aimHint:not(.melee-hint):not(.material-hint) { white-space:normal; text-align:center; line-height:1.3; }
  /* An unspent treatment/rescue needs its confirmation more than a queued tip.
     Let the existing toast clock and queue continue; only its paint yields. */
  body:has(.hintToast.show) #aimHint.target-confirm-hint:not(.hidden) { visibility:visible; }
  body:has(#aimHint.target-confirm-hint:not(.hidden)) #hintToast { visibility:hidden; }
  body:has(#aimHint.target-support-hint:not(.hidden)) #hintToast[data-key="support-relief"],
  body:has(#aimHint.target-rescue-hint:not(.hidden)) #hintToast[data-key="belay-route"] { visibility:visible; }
  /* If confirmation is refused, its actual reason keeps the existing lane. */
  body:has(#hintToast.show:not(.hidden)[data-key="support-relief"]) #aimHint.target-support-hint,
  body:has(#hintToast.show:not(.hidden)[data-key="belay-route"]) #aimHint.target-rescue-hint { visibility:hidden; }
  #aimHint.target-confirm-hint:not(.hidden) { font-size:11px; white-space:pre-line; }
}

/* Narrow desktop panels give the rosters, clock, next turn and wind their own space. */
@media (max-width:739.98px) and (min-height:501px) {
  body:has(#touchPad.hidden) #hudTop {
    display:grid;
    grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);
    column-gap:8px;
    row-gap:4px;
  }
  body:has(#touchPad.hidden) .teamBar {
    width:100%;
    min-width:0;
    max-width:none;
    grid-row:1 / span 2;
  }
  /* Four portraits need enough tile width for the unchanged three-digit HP.
     Reclaim only their inter-tile gaps; smaller rosters keep the usual gap. */
  body:has(#touchPad.hidden) .squadStrip:has(> .squadUnit:nth-child(4):last-child) {
    gap:2px;
  }
  body:has(#touchPad.hidden) #teamBar0 { grid-column:1; }
  body:has(#touchPad.hidden) #teamBar1 { grid-column:3; }
  body:has(#touchPad.hidden) #hudCenter {
    grid-column:2;
    grid-row:1;
    min-width:0;
    box-sizing:border-box;
  }
  body:has(#touchPad.hidden) #hudNext {
    position:static;
    width:auto;
    max-width:none;
    max-height:none;
    margin-top:4px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  body:has(#touchPad.hidden) #windBanner {
    grid-column:2;
    grid-row:2;
    position:static !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    justify-self:stretch;
    justify-content:center;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    padding:3px 4px !important;
    gap:3px !important;
    flex-wrap:wrap;
  }
}
