/* The Underwatch on screen (Elderbrook's dungeon, UI/UnderwatchHUD.js): the party's frames, the role's keys,
   the boss, the run's progress, cards and the finder. In the traveller's folio (UI/parchment.css): translucent
   cream paper in a double brass rule, ink type, gold capitals for kickers, the rubric for what matters.
   Everything is under #hud so it outranks the folio's own ink rules where it needs a colour of its own. */
#hud :is(.uw-party, .uw-abilities, .uw-cast, .uw-boss, .uw-tracker, .uw-card) {
  pointer-events: auto; color: var(--ink); background: var(--paper);
  border: 3px double #88734e80; border-radius: 2px; box-shadow: 0 3px 12px #37281620, inset 0 0 0 1px #eee5cf30;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#hud .uw-glyph { width: 18px; height: 18px; flex: none; color: var(--gold); }
#hud .uw-glyph.role-tank { color: #2f5f86; }
#hud .uw-glyph.role-healer { color: #3a7a44; }
#hud .uw-glyph.role-dps { color: #9a4a24; }
/* A bar's track and its fills. */
#hud :is(.uw-hp, .uw-spring, .uw-boss-health, .uw-cast div) { background: #8a744f2e; box-shadow: inset 0 1px 2px #3e2e2033, inset 0 0 0 1px #88734e40; overflow: hidden; }

/* ---- The party's frames: top left ---- */
#hud .uw-column { position: absolute; left: 24px; top: 22px; width: 236px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
#hud .uw-party { padding: 7px 7px 6px; display: flex; flex-direction: column; gap: 3px; }
#hud .uw-party header { display: flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: 1.8px; color: var(--gold); padding: 0 4px 5px; border-bottom: 1px solid #88755340; }
#hud .uw-party header :is(span, .icon) { color: var(--gold); }
#hud .uw-party header .icon { width: 13px; height: 13px; }
#hud .uw-member {
  all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 20px 1fr auto; grid-template-rows: auto 6px auto; column-gap: 7px; row-gap: 2px;
  align-items: center; padding: 4px 7px 5px; border-radius: 2px; background: #f6efdf40; border: 1px solid #9b794930; cursor: var(--action-cursor);
}
#hud .uw-member:hover { border-color: #83562f80; background: #f6efdf70; }
#hud .uw-member.is-me { background: #efe2c48c; }
#hud .uw-member.is-ally { border: 1px solid #3a7a44; box-shadow: inset 0 0 0 1px #3a7a4440; }
#hud .uw-member:is(.is-down, .is-away) { opacity: .5; }
#hud .uw-member .uw-glyph { grid-row: 1 / span 2; }
#hud .uw-member-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .uw-member-hp { font-size: 11px; font-variant-numeric: tabular-nums; }
#hud .uw-member-hp small, #hud .uw-member em { font-size: 10.5px; font-style: normal; color: var(--muted); }
#hud .uw-hp { grid-column: 2 / span 2; height: 6px; border-radius: 1px; }
#hud .uw-hp i { display: block; height: 100%; background: linear-gradient(#86b866, #4f8a3c); transition: width .25s; }
#hud .uw-member.is-low .uw-hp i { background: linear-gradient(#d4785a, #a8452f); }
#hud .uw-auras { grid-column: 2; grid-row: 3; display: flex; gap: 4px; }
#hud .uw-aura { width: 13px; height: 13px; border-radius: 2px; font-size: 9px; font-style: normal; display: grid; place-items: center; color: #f6efdf; font-weight: 700; box-shadow: inset 0 0 0 1px #0002; }
#hud .uw-aura.is-renew { background: #3f8a86; } #hud .uw-aura.is-bulwark { background: #2f5f86; } #hud .uw-aura.is-rot { background: #7d8a2a; }
#hud .uw-tag { grid-column: 3; grid-row: 3; justify-self: end; font-size: 8.5px; line-height: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--rubric); }
#hud .uw-tag.is-cast { color: #3a7a44; }

/* ---- The role's keys and the cast bar: bottom centre, over the action bar ---- */
#hud .uw-abilities { position: absolute; left: 50%; bottom: 138px; transform: translateX(-50%); padding: 8px 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
#hud .uw-keys { display: flex; gap: 7px; }
#hud .uw-keys button {
  position: relative; width: 58px; height: 58px; padding: 0; overflow: hidden; display: grid; place-items: center; cursor: var(--action-cursor);
  background: linear-gradient(#e5d8ba59, #c8b18945); border: 3px double #a8885180; border-radius: 2px; color: #543b24; box-shadow: inset 0 1px #eee2c640, 0 1px 0 #ab8b5730;
}
#hud .uw-keys button:hover { background-color: #e3d3b36b; border-color: #83562f99; }
#hud .uw-keys button .uw-glyph { width: 27px; height: 27px; margin-top: -11px; color: #543b24; }
#hud .uw-keys button kbd { position: absolute; left: 4px; top: 3px; font: 700 10px/1 'Palatino Linotype', Palatino, Georgia, serif; color: var(--rubric); }
#hud .uw-keys button span { position: absolute; bottom: 4px; left: 2px; right: 2px; font-size: 9px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
#hud .uw-cool { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #3e2e20a0; pointer-events: none; transition: height .1s linear; }
#hud .uw-keys button.is-short { filter: grayscale(.8); opacity: .62; }
#hud .uw-keys button.is-casting { border-color: #3a7a44; box-shadow: 0 0 0 1px #3a7a44, 0 0 10px #3a7a4455; }
#hud .uw-spring { width: 100%; height: 12px; border-radius: 1px; position: relative; }
#hud .uw-spring i { display: block; height: 100%; background: linear-gradient(90deg, #3f8a86, #72b9b0); transition: width .2s; }
#hud .uw-spring span { position: absolute; inset: 0; font-size: 9px; line-height: 12px; text-align: center; letter-spacing: .8px; color: #20312e; font-weight: 700; }
#hud .uw-bar-label { font-size: 9.5px; color: var(--muted); max-width: 360px; text-align: center; }
#hud .uw-cast { position: absolute; left: 50%; bottom: 246px; transform: translateX(-50%); width: 260px; padding: 6px 10px 8px; text-align: center; }
#hud .uw-cast span { display: block; font-size: 11px; letter-spacing: .5px; margin-bottom: 4px; }
#hud .uw-cast div { height: 7px; border-radius: 1px; }
#hud .uw-cast i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b08a3e, #e2c27a); }

/* ---- The boss: top centre ---- */
#hud .uw-boss { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 440px; padding: 8px 16px 9px; text-align: center; }
#hud .uw-boss small { display: block; font-size: 9px; letter-spacing: 2px; color: var(--gold); }
#hud .uw-boss strong { display: block; font-family: Greenvale Serif, Georgia, serif; font-variant: small-caps; font-size: 20px; font-weight: 400; margin: 1px 0 6px; color: var(--rubric); }
#hud .uw-boss-health { position: relative; height: 12px; border-radius: 1px; }
#hud .uw-boss-health i { display: block; height: 100%; background: linear-gradient(#bd5b42, #7d2f22); transition: width .3s; }
#hud .uw-boss-health b { position: absolute; inset: 0; font-size: 9px; line-height: 12px; color: #f6efdf; text-shadow: 0 1px 1px #3e2e2099; }
#hud .uw-boss p { margin: 6px 0 0; min-height: 15px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: var(--rubric); }
#hud .uw-boss.is-cue p { animation: uw-cue .6s ease-in-out infinite alternate; }
@keyframes uw-cue { from { opacity: .62; } to { opacity: 1; } }

/* ---- The run's progress: right, under the map ---- */
#hud .uw-tracker { padding: 7px 11px 8px; }
#hud .uw-tracker header { display: grid; grid-template-columns: 1fr auto; row-gap: 1px; padding-bottom: 6px; border-bottom: 1px solid #88755340; }
#hud .uw-tracker header small { grid-column: 1 / -1; font-size: 8.5px; letter-spacing: 1.8px; color: var(--gold); }
#hud .uw-tracker header strong { font-family: Greenvale Serif, Georgia, serif; font-variant: small-caps; font-size: 16px; font-weight: 400; color: var(--rubric); }
#hud .uw-tracker header span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; align-self: end; }
#hud .uw-tracker ol { list-style: none; margin: 6px 0 5px; padding: 0; display: grid; gap: 1px; }
#hud .uw-tracker li { display: flex; gap: 7px; font-size: 11px; color: var(--muted); }
#hud .uw-tracker li span { color: inherit; }
#hud .uw-tracker li.done { color: #4f6a3a; text-decoration: line-through; text-decoration-color: #4f6a3a77; }
#hud .uw-tracker li.now { color: var(--ink); font-weight: 700; }
#hud .uw-tracker p { margin: 0; font-size: 11px; line-height: 1.35; font-style: italic; }

/* ---- Cards: invitations and the ready check ---- */
/* (Over any open page, the modal shade's 30: an invitation or a ready check is answered where it is.) */
#hud .uw-cards { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; pointer-events: none; z-index: 32; }
#hud .uw-card { position: relative; width: 410px; padding: 14px 18px; overflow: hidden; }
#hud .uw-card small { font-size: 9px; letter-spacing: 1.8px; color: var(--gold); }
#hud .uw-card strong { display: block; font-family: Greenvale Serif, Georgia, serif; font-variant: small-caps; font-size: 19px; font-weight: 400; margin: 3px 0 6px; color: var(--rubric); }
#hud .uw-card p { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
#hud .uw-card p b { color: var(--rubric); }
#hud .uw-card ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
#hud .uw-card li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; font-size: 12px; padding: 4px 6px; border-radius: 2px; background: #f6efdf40; border: 1px solid #9b794930; }
#hud .uw-card li em { font-style: normal; font-size: 11px; color: var(--muted); }
#hud .uw-card li.yes em { color: #3a7a44; font-weight: 700; } #hud .uw-card li.no em { color: var(--rubric); font-weight: 700; }
#hud .uw-card > div { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
#hud .uw-card button { pointer-events: auto; background: linear-gradient(#e5d8ba59, #c8b18945); border: 3px double #a8885180; border-radius: 2px; color: #543b24; padding: 6px 14px; font: inherit; font-size: 13px; cursor: var(--action-cursor); }
#hud .uw-card button:hover { background-color: #e3d3b36b; border-color: #83562f99; }
#hud .uw-card button.primary-button { color: var(--rubric); font-weight: 700; }
#hud .uw-timer { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--rubric); transition: width .25s linear; }
#hud .uw-waiting { font-size: 12px; color: var(--muted); font-style: italic; }

/* ---- Heals and hurts over heads ---- */
#hud .uw-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#hud .uw-float { position: absolute; left: 0; top: 0; font: 700 15px/1 'Palatino Linotype', Palatino, Georgia, serif; text-shadow: 0 1px 2px #1d140c, 0 0 5px #1d140caa; will-change: transform; }
#hud .uw-float.is-heal { color: #a6f0a0; } #hud .uw-float.is-harm { color: #ffa07e; }

/* ---- Carried back (a veil over the world, not a page: its own light type) ---- */
#hud .uw-veil { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, #0b0f12c4, #050608f0); z-index: 8; pointer-events: none; transition: opacity .9s; }
#hud .uw-veil.is-gone { opacity: 0; }
#hud .uw-veil > div { text-align: center; max-width: 440px; }
#hud .uw-veil small { font-size: 10px; letter-spacing: 2.4px; color: #d4bf85; }
#hud .uw-veil h2 { font-family: Greenvale Serif, Georgia, serif; font-variant: small-caps; font-weight: 400; font-size: 32px; margin: 6px 0 10px; color: #f1e7cc; }
#hud .uw-veil p { font-size: 14px; line-height: 1.5; color: #d8cfb5; margin: 0; }

/* ---- The finder (a folio page) ---- */
#hud .underwatch-panel { width: min(940px, 94vw); }
#hud .uw-finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 26px; }
#hud .uw-finder h3 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 18px 0 8px; font-weight: 700; }
#hud .uw-finder-party > h3:first-child { margin-top: 0; }
#hud .uw-finder-story > p { margin: 0; font-size: 13.5px; line-height: 1.55; }
#hud .uw-facts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
#hud .uw-facts li { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
#hud .uw-facts .icon { width: 15px; height: 15px; color: var(--gold); }
#hud .uw-bosses { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
#hud .uw-bosses li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 6px 9px; border-radius: 2px; background: #f6efdf40; border: 1px solid #9b794933; }
#hud .uw-bosses li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--gold); color: #f6efdf; }
#hud .uw-bosses li.done b { background: #4f8a3c; }
#hud .uw-bosses strong { display: block; font-size: 13px; } #hud .uw-bosses small { font-size: 10.5px; }
#hud .uw-record { margin: 0 0 8px; font-size: 12.5px; }
#hud .uw-cheevos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
#hud .uw-cheevos li { display: flex; gap: 5px; align-items: center; font-size: 10.5px; padding: 3px 8px 3px 6px; border-radius: 2px; background: #f6efdf30; border: 1px solid #9b794933; color: var(--muted); }
#hud .uw-cheevos li span { color: inherit; }
#hud .uw-cheevos li .icon { width: 12px; height: 12px; opacity: .4; }
#hud .uw-cheevos li.done { color: var(--ink); border-color: #76502280; background: #efe2c480; } #hud .uw-cheevos li.done .icon { opacity: 1; color: var(--gold); }
#hud .uw-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
#hud .uw-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#hud .uw-role {
  all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 11px 12px; min-height: 176px; cursor: var(--action-cursor);
  border-radius: 2px; background: #f6efdf38; border: 1px solid #9b794955; box-shadow: inset 0 1px #fff4dc40;
}
#hud .uw-role:hover:not([disabled]) { border-color: #83562f99; background: #f6efdf66; }
#hud .uw-role:focus-visible { outline: 2px solid var(--rubric); outline-offset: 2px; }
#hud .uw-role.is-on { border: 2px solid var(--rubric); padding: 10px 10px 11px; background: #efe2c4b0; box-shadow: inset 0 0 0 1px #fff4dc55, 0 2px 6px #3e2e2026; }
#hud .uw-role.is-on::after { content: '✓'; position: absolute; top: 7px; right: 9px; font-size: 13px; font-weight: 700; color: var(--rubric); }
#hud .uw-role[disabled] { opacity: .42; cursor: default; }
#hud .uw-role .uw-glyph { width: 26px; height: 26px; }
#hud .uw-role strong { font-family: Greenvale Serif, Georgia, serif; font-variant: small-caps; font-size: 17px; font-weight: 400; color: var(--rubric); }
#hud .uw-role small { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
#hud .uw-role p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.4; }
#hud .uw-role em { margin-top: auto; padding-top: 7px; border-top: 1px solid #88755333; font-size: 10.5px; line-height: 1.38; font-style: italic; color: #4a3a26; }
#hud .uw-members { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; }
#hud .uw-members li { display: grid; grid-template-columns: 20px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 2px; background: #f6efdf40; border: 1px solid #9b794933; font-size: 12.5px; }
#hud .uw-members li small { font-size: 9px; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; }
#hud .uw-members li em { font-style: normal; font-size: 11px; color: var(--muted); } #hud .uw-members li i { font-style: normal; font-size: 10px; color: var(--rubric); }
#hud .uw-members li button { all: unset; cursor: var(--action-cursor); color: var(--muted); display: grid; place-items: center; width: 18px; height: 18px; }
#hud .uw-members li button:hover { color: var(--rubric); }
#hud .uw-members li.uw-solo { display: block; font-size: 12.5px; line-height: 1.45; font-style: italic; }
#hud .uw-members li.uw-solo b { color: var(--rubric); font-style: normal; }
#hud .uw-status { margin: 10px 0 0; min-height: 17px; font-size: 12.5px; color: #3f5a2e; }
#hud .uw-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
#hud .uw-actions button { padding: 8px 16px; font-size: 14px; }
#hud .uw-complete p { font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }
#hud .uw-complete dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
#hud .uw-complete dl div { padding: 8px 10px; border-radius: 2px; background: #f6efdf40; border: 1px solid #9b794933; text-align: center; }
#hud .uw-complete dt { font-size: 9px; letter-spacing: 1.6px; color: var(--gold); text-transform: uppercase; }
#hud .uw-complete dd { margin: 3px 0 0; font-size: 19px; font-family: Greenvale Serif, Georgia, serif; color: var(--rubric); }
#hud .underwatch-ledger-panel { width: min(660px, 92vw); }
#hud .uw-ledger { display: grid; gap: 14px; padding: 4px 2px; }
#hud .uw-ledger article { padding: 14px 18px; border-radius: 2px; background: #f6efdf55; border: 1px solid #9b794944; box-shadow: inset 0 1px #fff4dc40; }
#hud .uw-ledger h3 { margin: 0 0 6px; font-family: Greenvale Serif, Georgia, serif; font-variant: small-caps; font-size: 17px; font-weight: 400; color: var(--rubric); }
#hud .uw-ledger p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.6; font-style: italic; }
@media (max-width: 760px) {
  #hud .uw-finder { grid-template-columns: 1fr; } #hud .uw-roles { grid-template-columns: 1fr; } #hud .uw-role { min-height: 0; }
  #hud .uw-column { width: 198px; } #hud .uw-tracker { display: none; } #hud .uw-boss { width: calc(100vw - 32px); } #hud .uw-card { width: calc(100vw - 32px); }
}

/* ---- Party chat in the chat box ('/p' sends it): a small tag in the party's green ---- */
#hud .chat-lines .social-message.is-party em { font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #3a7a44; margin-right: 6px; }
#hud .chat-lines .social-message.is-party strong { color: #2f6a3a; }

/* ---- The Gloam's dark: outside every brazier's light, the screen's edges close in ---- */
#hud .uw-dark { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s; background: radial-gradient(ellipse at center, transparent 42%, #1a0b2a99 78%, #0b0414e0 100%); }
#hud .uw-dark.is-on { opacity: 1; }
#hud .uw-dark span { position: absolute; left: 50%; top: 152px; transform: translateX(-50%); padding: 6px 14px; border-radius: 2px; background: #12081ccc; border: 3px double #b487ff66; color: #ece0ff; font-size: 13px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
#hud .uw-dark.is-on span { animation: uw-cue .7s ease-in-out infinite alternate; }