/* The in-game tiles of jarvisdota2.com, drawn in code instead of upscaled screenshots (his note, 2026-11-12: "картинки худа
   виглядають дуже піксельно"). Every size, colour and font below is taken from the app's own layers
   (src/renderer/src/layers.css and styles.css, the rules for .tb-* and .it-*), at the app's 1080p sizes; each tile only
   magnifies them with `zoom`, so text and frames stay sharp on any screen. Icons are Valve's own at their full size. */

.hud {
  --font-ui: var(--ui);
  --font-num: var(--num);
  --z: 2;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 12px;
  padding: 20px 24px;
  background: radial-gradient(120% 90% at 50% 0%, #2c312c, #1d211d 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 16px 40px color-mix(in oklab, var(--shade) 70%, transparent);
  color: var(--porcelain);
  font-family: var(--font-ui);
  line-height: normal;
}
.hud-z { zoom: var(--z); }
.hud img { display: block; }

/* Under the portraits: five enemies as Dota's top bar holds them, Jarvis's rail under each. */
.hud-items { --z: 1.75; }
.hud-bar { display: grid; grid-template-columns: repeat(5, 62px); gap: 4px; align-items: start; }
.hud-who { display: grid; gap: 6px; justify-items: center; }
.hud-who > img { width: 62px; height: 35px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.7), 0 2px 0 0 rgb(0 0 0 / 0.5); }
.hud .tb-rail { display: grid; gap: 4px; justify-items: center; }
.hud .tb-ult { position: relative; width: 42px; height: 42px; }
.hud .tb-ult img { position: absolute; left: 5px; top: 5px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #000; filter: brightness(0.42) saturate(0.6); }
.hud .tb-ult svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.hud .tb-ult .track { fill: none; stroke: rgb(9 9 11 / 0.8); stroke-width: 4; }
.hud .tb-ult .arc { fill: none; stroke: #ffa63d; stroke-width: 3.4; stroke-linecap: round; }
.hud .tb-ult b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13.5px var(--font-num); color: #fff; text-shadow: 0 1px 2px #000, 0 0 5px #000; }
.hud .tb-chip { display: flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 5px; font: 600 12px/16px var(--font-num); white-space: nowrap; color: #efeae1; background: rgb(9 9 11 / 0.84); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.hud .tb-icons { display: grid; grid-template-columns: repeat(3, 18px); justify-content: center; gap: 1px; }
.hud .tb-icons.old { opacity: 0.55; }
.hud .tb-icons span { position: relative; width: 18px; height: 13px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); }
.hud .tb-icons img { width: 100%; height: 100%; object-fit: cover; }
.hud .tb-icons span[style]::after { content: ''; position: absolute; inset: 0; background: conic-gradient(rgb(0 0 0 / 0.72) calc(var(--p) * 360deg), transparent 0); }
.hud .tb-icons b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 600 10px var(--font-num); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.hud .tb-age { font: 500 10.5px/14px var(--font-num); color: #cfcac1; text-shadow: 0 1px 2px #000; }

/* The win chance on the edge of Dota's score panel, and Jarvis's line under it. */
.hud-win { --z: 2.4; display: grid; justify-items: center; gap: 10px; }
.hud-gone { --z: 1.7; }
.hud .tb-win { width: 211px; }
.hud .tb-win-bar { position: relative; display: flex; height: 4px; box-shadow: 0 1px 0 rgb(0 0 0 / 0.6); }
.hud .tb-win-bar i { height: 100%; }
.hud .tb-win-bar i:last-of-type { flex: 1; border-radius: 0 0 3px 0; }
.hud .tb-win-bar i:first-of-type { border-radius: 0 0 0 3px; }
.hud .tb-win-bar i.mine { background: linear-gradient(90deg, #d96a08, var(--amber)); box-shadow: 0 0 8px rgb(255 132 16 / 0.7); }
.hud .tb-win-bar i.theirs { background: rgb(242 238 230 / 0.16); }
.hud .tb-win-bar b { position: absolute; top: -2px; width: 2px; height: 8px; margin-left: -1px; background: var(--porcelain); box-shadow: 0 0 4px rgb(255 255 255 / 0.8); }
.hud .tb-win-nums { display: flex; justify-content: space-between; margin-top: 3px; font: 600 14px/14px var(--font-num); text-shadow: 0 1px 2px #000; }
.hud .tb-win-nums .mine { color: var(--ember); }
.hud .tb-win-nums .theirs { color: var(--ash); }
.hud .tb-win-nums .down { color: #ff6a5c; }
.hud .tb-say { display: grid; justify-items: center; gap: 4px; width: 212px; text-align: center; }
.hud .tb-say-now { box-sizing: border-box; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 8px;
  border: 1px solid rgb(255 138 31 / 0.55); background: linear-gradient(180deg, rgb(9 9 11 / 0.82), rgb(9 9 11 / 0.6)); box-shadow: 0 1px 0 0 var(--amber);
  font: 600 15.5px/19px var(--font-ui); text-wrap: balance; }
.hud .tb-say-old { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 15px/1.3 var(--font-ui); color: rgb(242 238 230 / 0.5); text-shadow: 0 1px 2px rgb(0 0 0 / 0.8); }
.hud .tb-say-old .num { font-family: var(--font-num); color: var(--ash); }

/* The item card by Dota's gold. */
.hud-buy { --z: 2.2; }
.hud .it-card { width: 180px; border-radius: 9px; overflow: hidden; background: linear-gradient(90deg, rgb(9 9 11 / 0.66), rgb(9 9 11 / 0.44)); box-shadow: inset 1px 0 0 rgb(255 170 90 / 0.38); text-shadow: 0 1px 2px #000; }
.hud .it-in { padding: 6px 8px; }
.hud .it-top { display: grid; grid-template-columns: 26px 1fr; gap: 0 7px; align-items: center; }
.hud .it-top img, .hud .it-pair img:first-child { width: 26px; height: 19px; border-radius: 3px; object-fit: cover; }
.hud .it-top b { display: block; font: 600 11.5px/13px var(--font-ui); }
.hud .it-top small { display: block; font: 400 10px/12px var(--font-num); color: var(--ember); }
.hud .it-parts { display: flex; flex-wrap: wrap; row-gap: 4px; align-items: flex-start; margin-top: 6px; font: 400 9px/10px var(--font-num); color: var(--ash); }
.hud .it-partwrap { display: flex; align-items: flex-start; }
.hud .it-plus { width: 8px; text-align: center; font: 400 10px/16px var(--font-num); color: rgb(163 157 148 / 0.7); }
.hud .it-part { position: relative; display: grid; justify-items: center; gap: 2px; min-width: 28px; }
.hud .it-part img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; }
.hud .it-part.now img { box-shadow: 0 0 0 1.5px var(--amber), 0 0 6px rgb(255 132 16 / 0.6); }
.hud .it-part.now span { color: var(--ember); }
.hud .it-part.todo img { opacity: 0.42; }
.hud .it-foe { display: grid; grid-template-columns: 26px 1fr; gap: 0 7px; align-items: center; padding: 5px 8px 6px; font: 400 9.5px/12px var(--font-ui); color: rgb(242 238 230 / 0.82);
  background: linear-gradient(90deg, rgb(255 106 92 / 0.2), rgb(255 106 92 / 0.03) 85%); box-shadow: inset 1px 0 0 rgb(255 106 92 / 0.55); }
.hud .it-pair { position: relative; width: 26px; height: 19px; }
.hud .it-face { position: absolute; left: -5px; bottom: -5px; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(9 9 11 / 0.95), 0 0 0 2.5px #ff6a5c; }

/* Narrower screens: the same layers, magnified less, so each stays inside its tile from 320 px up (checked by width). */
@media (max-width: 1240px) {
  .hud-items { --z: 1.45; }
  .hud-win { --z: 2; }
  .hud-gone { --z: 1.45; }
  .hud-buy { --z: 1.8; }
}
@media (max-width: 1080px) {
  .hud-items { --z: 1.5; }
  .hud-win { --z: 2.2; }
  .hud-gone { --z: 1.9; }
  .hud-buy { --z: 2.2; }
}
@media (max-width: 640px) {
  .hud { padding: 16px; }
  .hud-items { --z: 0.85; }
  .hud-win { --z: 1.4; }
  .hud-gone { --z: 1.35; }
  .hud-buy { --z: 1.55; }
}
@media (max-width: 380px) {
  .hud-items { --z: 0.75; }
  .hud-win { --z: 1.15; }
  .hud-gone { --z: 1.2; }
  .hud-buy { --z: 1.4; }
}
@media (max-width: 340px) {
  .hud { padding: 12px; }
  .hud-items { --z: 0.64; }
  .hud-win, .hud-gone { --z: 1; }
  .hud-buy { --z: 1.2; }
}