/* Hirelings: HUD card under the player card, the Hireling panel inside the
   shared left-panel frame, and Captain Maren's recruitment window. */
:root { --hl-teal:#5fc9b8; --hl-teal-dim:#2c6f66; --hl-life-a:#47a57f; --hl-life-b:#1f5a44; }

/* ---------- HUD card ---------- */
.hireling-card { position:fixed; top:calc(16px + 112px * var(--ui-zoom,1)); left:16px; width:236px; height:58px; transform:scale(var(--ui-zoom,1)); transform-origin:top left; pointer-events:auto; cursor:pointer; filter:drop-shadow(0 4px 7px #0009); font-variant-numeric:tabular-nums; outline:none; }
.hireling-card.hidden { display:none; }
.hc-portrait { position:absolute; z-index:2; left:4px; top:1px; width:56px; height:56px; border:3px solid #8f7440; border-radius:50%; background:radial-gradient(circle,#4c5a50,#141512 70%); box-shadow:0 0 0 2px #1d1409,inset 0 0 0 2px var(--hl-teal-dim); }
.hc-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:50%; }
.hc-level { position:absolute; right:-6px; bottom:-4px; display:grid; place-items:center; min-width:22px; height:22px; padding:0 3px; border:2px solid #a88c52; border-radius:11px; background:#131612; color:#dff3ea; font:700 11px Georgia,serif; box-shadow:0 2px 4px #000; }
.hc-plate { position:absolute; inset:7px 0 5px 36px; padding:4px 16px 5px 32px; background:linear-gradient(115deg,#35433b,#7e8a63 45%,#3c3d2c); clip-path:polygon(0 0,100% 0,95% 100%,0 100%); }
.hc-plate::before { content:''; position:absolute; inset:2px; z-index:-1; background:linear-gradient(130deg,#1f2622,#131513 70%); clip-path:polygon(0 0,100% 0,95% 100%,0 100%); }
.hc-name { overflow:hidden; color:#cfeee2; font:700 12px/17px Cinzel,Georgia,serif; text-overflow:ellipsis; text-shadow:0 2px 2px #000; white-space:nowrap; }
.hc-bar { position:relative; height:15px; margin-top:3px; overflow:hidden; border:1px solid #4a5a45; background:#060807; box-shadow:inset 0 1px 4px #000; }
.hc-fill { position:absolute; inset:0 auto 0 0; background:linear-gradient(var(--hl-life-a),var(--hl-life-b) 55%,#398a69); box-shadow:inset 0 1px #c9ffe63b; transition:width .22s ease-out; }
.hc-bar span { position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:#f1f7f2; font:600 11px/1 Georgia,serif; text-shadow:0 1px 3px #000,0 0 2px #000; }
.hireling-card:hover .hc-portrait,.hireling-card:focus-visible .hc-portrait { border-color:#e2c47c; box-shadow:0 0 0 2px #1d1409,0 0 10px #5fc9b877,inset 0 0 0 2px var(--hl-teal-dim); }
.hireling-card.low .hc-bar { animation:life-warning 1.8s ease-in-out infinite; }
.hireling-card.dead .hc-portrait img { filter:grayscale(1) brightness(.55); }
.hireling-card.dead .hc-fill { background:#4a4442; }
.hireling-card.dead .hc-bar span { color:#e8b9a8; }
body.has-hireling #buffs { top:calc(16px + 178px * var(--ui-zoom,1)); }
@media (max-width:759px) {
  .hireling-card { top:103px; left:12px; transform:scale(.85); }
  body.has-hireling #buffs { top:160px; }
}

/* ---------- Hireling panel (inside #panelL) ---------- */
#panelL:has(.hireling-panel) { overflow:hidden; }
.hireling-panel { display:flex; flex-direction:column; gap:9px; color:#e4d7bc; font:14px/1.3 Georgia,serif; }
.hl-id { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:center; }
.hl-portrait { position:relative; width:72px; height:72px; border:3px solid #a8844a; border-radius:50%; background:#161412; box-shadow:0 0 0 2px #1d1409,inset 0 0 0 2px var(--hl-teal-dim),0 4px 10px #000a; }
.hl-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:50%; }
.is-dead .hl-portrait img { filter:grayscale(1) brightness(.55); }
.hl-level { position:absolute; right:-6px; bottom:-4px; display:grid; place-items:center; min-width:25px; height:25px; padding:0 4px; border:2px solid #bd934c; border-radius:13px; background:#191313; color:#f2d297; font:700 12px Georgia,serif; box-shadow:0 2px 4px #000; }
.hl-idtext { min-width:0; }
.hl-idtext h2 { margin:0; overflow:hidden; color:#efd38e; font:700 19px/1.15 Cinzel,Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.hl-idtext p { margin:1px 0 5px; color:#a9c9bd; font:600 12px Cinzel,Georgia,serif; letter-spacing:.03em; }
.hl-bar { position:relative; height:16px; overflow:hidden; border:1px solid #5d4a33; background:#080606; box-shadow:inset 0 1px 4px #000; }
.hl-bar + .hl-bar { margin-top:4px; }
.hl-bar i { position:absolute; inset:0 auto 0 0; transition:width .22s ease-out; }
.hl-bar.life i { background:linear-gradient(var(--hl-life-a),var(--hl-life-b) 55%,#398a69); }
.hl-bar.xp { height:12px; }
.hl-bar.xp i { background:linear-gradient(#c8a45a,#7a5a26); }
.hl-bar span { position:absolute; inset:0; display:grid; place-items:center; color:#f5eee0; font:600 11px/1 Georgia,serif; text-shadow:0 1px 3px #000; }
.hl-bar.xp span { font-size:10px; }
.hl-fallen { display:flex; justify-content:space-between; align-items:baseline; gap:8px; height:16px; padding:0 6px; border:1px solid #7a3c2e; background:#2a1210cc; color:#f0b9a5; font-size:11px; line-height:14px; }
.hl-fallen b { color:#ff9a7a; font:700 11px/14px Cinzel,Georgia,serif; }
.hl-revive-note { margin:0; color:#cf9c71; font-size:12px; text-align:center; }
.hl-gear { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:9px 4px 3px; border-top:1px solid rgba(188,140,72,.45); }
.hl-gear.hl-archer,.hl-gear.hl-adept { grid-template-columns:repeat(3,76px); justify-content:center; gap:14px; }
.hl-slot { position:relative; display:grid; place-items:center; height:76px; min-width:0; border:1px solid rgba(176,131,67,.75); background:radial-gradient(circle at 50% 42%,rgba(70,48,30,.42),rgba(4,3,3,.86)); box-shadow:inset 0 0 16px #000; cursor:pointer; transition-property:border-color,box-shadow,transform; transition-duration:.15s; }
.hl-slot img { width:58px; height:58px; object-fit:contain; pointer-events:none; }
.hl-slot .hl-ghost { opacity:.4; filter:grayscale(1) brightness(.6) drop-shadow(0 0 2px #c6985555); }
.hl-slot small { position:absolute; left:2px; right:2px; bottom:2px; overflow:hidden; color:#bfa46c; font:600 10px Cinzel,Georgia,serif; text-align:center; text-overflow:ellipsis; text-shadow:0 1px 2px #000; white-space:nowrap; pointer-events:none; }
.hl-slot.q-magic { border-color:#6d7fe0; } .hl-slot.q-rare { border-color:#e8d466; } .hl-slot.q-unique { border-color:#c9a25a; } .hl-slot.q-set { border-color:#5fd05f; }
.hl-slot.bad { box-shadow:inset 0 0 22px #b3201acc; border-color:#c0473c; }
.hl-slot:hover,.hl-slot:focus-visible { outline:0; border-color:#f1c55f; box-shadow:inset 0 0 16px #000,0 0 12px rgba(241,197,95,.45); }
.hl-slot:active { transform:scale(.96); }
.hl-stats { padding:7px 9px; border:1px solid rgba(176,131,67,.55); background:rgba(0,0,0,.34); box-shadow:inset 0 0 14px #000; }
.hl-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; font-size:13px; }
.hl-grid span { display:flex; justify-content:space-between; gap:6px; color:#bcb09a; }
.hl-grid b { color:#f1e1bd; font-variant-numeric:tabular-nums; }
.hl-res { margin-top:4px; }
.hl-abilities { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.hl-abilities li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:9px; align-items:center; }
.hl-abilities img { width:38px; height:38px; border:1px solid #6d5230; box-shadow:0 1px 4px #000; }
.hl-abilities b { color:#ecd28f; font:700 13px Cinzel,Georgia,serif; }
.hl-abilities em { margin-left:6px; color:#8fb8aa; font:italic 11px Georgia,serif; }
.hl-abilities small { display:block; color:#b9ac94; font-size:11.5px; line-height:1.25; text-wrap:pretty; }
.hl-abilities .passive b { color:#9fd9c2; }
.hl-stance { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
/* The global button rule carries an id in its :not() list, so these toggles need !important to drop the wooden plank art. */
.hl-stance button { min-height:46px; margin:0; padding:4px 5px !important; border:1px solid #6d5634 !important; border-image:none !important; background:linear-gradient(#2f241a,#15100b) !important; color:#d9c6a2; text-transform:none; transition-property:border-color,filter,transform; transition-duration:.14s; }
.hl-stance button[aria-pressed="true"] { border-color:var(--hl-teal) !important; color:#effff8; background:linear-gradient(#244a44,#10201d) !important; box-shadow:inset 0 0 0 1px #9fe0c833,0 0 10px #5fc9b833; }
.hl-stance button:hover { border-color:#dcb665 !important; filter:brightness(1.12); }
.hl-stance button:active { transform:scale(.96); }
.hl-stance b,.hl-stance small { display:block; }
.hl-stance b { font:700 11px/1.1 Cinzel,Georgia,serif; }
.hl-stance small { margin-top:2px; color:#a89a82; font:10.5px/1.15 Georgia,serif; text-wrap:balance; }
.hireling-panel .hint { margin:0; font-size:12px; text-align:center; }
.tt-hireling { margin-top:4px; color:#e3a08a; font-size:13px; }
.tt-hireling.ok { color:#8fe0bf; }

/* ---------- Captain Maren ---------- */
.hireling-captain-modal { position:fixed; z-index:54; inset:0; display:grid; place-items:center; padding:18px; pointer-events:auto; background:rgba(4,3,2,.62); }
.hc-frame { display:flex; flex-direction:column; width:min(780px,calc(100vw - 36px)); max-height:calc(100vh - 36px); overflow:hidden; border:22px solid transparent; border-image:url('assets/gen/ui/panel_frame.webp') 350 350 375 350 fill / 48px 48px 51px 48px stretch; background:#130f0b linear-gradient(rgba(10,7,4,.6),rgba(10,7,4,.82)); box-shadow:0 20px 64px rgba(0,0,0,.78); color:#e4d7bc; font:14px/1.35 Georgia,serif; }
.hc-head { position:relative; display:grid; grid-template-columns:74px minmax(0,1fr) 40px; gap:14px; align-items:center; padding:2px 4px 12px; border-bottom:1px solid rgba(218,171,87,.35); }
.hc-captain { width:70px; height:70px; border:3px solid #a8844a; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px #1d1409,inset 0 0 0 2px var(--hl-teal-dim); }
.hc-captain img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.hc-head small { color:#8fb8aa; font:700 11px Cinzel,Georgia,serif; letter-spacing:.14em; text-transform:uppercase; }
.hc-head h2 { margin:1px 0 2px; color:#efd38e; font:700 24px/1.1 Cinzel,Georgia,serif; }
.hc-head p { margin:0; color:#d6c7a8; font-style:italic; }
.hc-head .ui-close { width:40px; height:40px; margin:0; padding:0; border:0; background:url('assets/gen/ui/close.webp') center/32px 32px no-repeat; color:transparent; }
.hc-body { display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding:12px 4px 4px; }
.hc-notice { margin:0; padding:7px 10px; color:#ffd18a; background:rgba(92,56,23,.35); box-shadow:inset 0 0 0 1px rgba(239,180,77,.28); }
.hc-status { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 10px; background:rgba(34,58,52,.35); box-shadow:inset 0 0 0 1px rgba(95,201,184,.3); }
.hc-status.fallen { background:rgba(80,30,24,.4); box-shadow:inset 0 0 0 1px rgba(224,121,92,.4); }
.hc-status img { width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid #8f7440; }
.hc-status.fallen img { filter:grayscale(1) brightness(.6); }
.hc-status b { display:block; color:#e9f2e6; font:700 14px Cinzel,Georgia,serif; }
.hc-status span { color:#b9ae98; font-size:12.5px; }
.hc-status button,.hc-recruit button { min-height:38px; margin:0; font-size:12px; white-space:nowrap; }
.hc-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.hc-tabs button { display:flex; align-items:center; gap:10px; min-height:62px; margin:0; padding:6px 10px !important; border:1px solid #6d5634 !important; border-image:none !important; background:linear-gradient(#2a2118,#120d09) !important; color:#d9c6a2; text-align:left; text-transform:none; transition-property:border-color,filter; transition-duration:.14s; }
.hc-tabs button:hover { filter:brightness(1.15); }
.hc-tabs button[aria-selected="true"] { border-color:#e4bd6a !important; background:linear-gradient(#4a3822,#1c140c) !important; box-shadow:inset 0 0 0 1px rgba(255,220,143,.2),0 0 12px rgba(228,189,106,.18); }
.hc-tabs button:focus-visible { outline:2px solid #e4bd6a; outline-offset:2px; }
.hc-tabs button:focus:not(:focus-visible) { outline:none; }
.hc-tabs img { width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid #8f7440; }
.hc-tabs b { display:block; color:#efd38e; font:700 15px Cinzel,Georgia,serif; }
.hc-tabs small { color:#a89a82; font-size:12px; }
.hc-type { display:grid; gap:10px; }
.hc-type-info { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:0 2px; }
.hc-type-info > p { margin:0; color:#d8c8aa; }
.hc-type-info .hc-kit { grid-column:1/-1; color:#9d917c; font-size:12.5px; }
.hc-abilities { display:flex; gap:10px; margin:0; padding:0; list-style:none; }
.hc-abilities li { display:flex; align-items:center; gap:5px; color:#c9bb9f; font-size:12px; }
.hc-abilities img { width:28px; height:28px; border:1px solid #6d5230; }
.hc-abilities b { color:#ecd28f; font-weight:600; }
.hc-recruits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.hc-recruit { display:flex; flex-direction:column; gap:6px; padding:10px; background:linear-gradient(160deg,rgba(92,63,32,.42),rgba(17,11,8,.74)); box-shadow:inset 0 0 0 1px rgba(226,183,99,.22),0 4px 12px rgba(0,0,0,.24); }
.hc-recruit.current { box-shadow:inset 0 0 0 1px rgba(95,201,184,.6),0 4px 12px rgba(0,0,0,.24); }
.hc-recruit-head h4 { margin:0; color:#efd38e; font:700 15px/1.15 Cinzel,Georgia,serif; }
.hc-recruit-head span { color:#8fd0bb; font:600 11px Cinzel,Georgia,serif; letter-spacing:.06em; text-transform:uppercase; }
.hc-recruit p { flex:1; margin:0; color:#bcae94; font-size:12.5px; line-height:1.3; text-wrap:pretty; }
.hc-recruit dl { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:0; }
.hc-recruit dl div { padding:3px 0; background:rgba(0,0,0,.3); text-align:center; }
.hc-recruit dt { color:#9d917c; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; }
.hc-recruit dd { margin:0; color:#f1e1bd; font-weight:700; font-variant-numeric:tabular-nums; }
.hc-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 4px 0; border-top:1px solid rgba(218,171,87,.28); color:#9d917c; font-size:12px; }
.hc-foot > span:first-child { color:#edcf83; font:700 15px Cinzel,Georgia,serif; white-space:nowrap; }
.hc-foot .gold { display:inline-block; width:20px; height:16px; color:transparent; vertical-align:-3px; background:url('assets/gen/ui/gold_icon.webp') center/contain no-repeat; font-style:normal; }
@media (max-width:759px) {
  .hireling-captain-modal { padding:6px; }
  .hc-frame { width:calc(100vw - 12px); max-height:calc(100vh - 12px); border-width:16px; }
  .hc-head { grid-template-columns:56px minmax(0,1fr) 36px; gap:10px; }
  .hc-captain { width:54px; height:54px; }
  .hc-head h2 { font-size:20px; }
  .hc-status { grid-template-columns:40px minmax(0,1fr); }
  .hc-status img { width:40px; height:40px; }
  .hc-status button { grid-column:1/-1; width:100%; }
  .hc-tabs { gap:5px; }
  .hc-tabs button { flex-direction:column; justify-content:center; gap:3px; min-height:74px; padding:5px 3px !important; text-align:center; }
  .hc-tabs img { width:38px; height:38px; }
  .hc-tabs b { font-size:12px; }
  .hc-tabs small { display:none; }
  .hc-recruits { grid-template-columns:1fr; }
  .hc-type-info { grid-template-columns:1fr; }
  .hc-abilities { flex-wrap:wrap; }
  .hc-foot > span:last-child { display:none; }
}
@media (prefers-reduced-motion:reduce) { .hireling-card.low .hc-bar { animation:none; } .hc-fill,.hl-bar i { transition:none; } }