/* The in-browser demo (demo.js). Sizes are the addon's defaults at 1.6x: 110 x 54 frames, a 7 px mana bar. */
.hk-demo { margin-top: 28px; }
.hk-stage {
  position: relative; min-height: 680px; padding: 108px 16px 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0f0b08 url("/img/demo-bg-deadmines.webp") center / cover no-repeat;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hk-msgs { position: absolute; top: 18px; left: 16px; right: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 4; pointer-events: none; }
.hk-statusline {
  min-height: 24px; text-align: center;
  color: #ffd100; font: 700 18px/1.3 var(--body); text-shadow: 0 1px 2px #000, 0 0 6px #000;
}
.hk-error {
  min-height: 20px; text-align: center;
  color: #ff3a2a; font: 700 16px var(--body); text-shadow: 0 1px 2px #000; opacity: 0; transition: opacity 0.3s;
}
.hk-error.on { opacity: 1; transition: none; }

.hk-field { display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; }
.hk-party { display: flex; flex-direction: column; gap: 3px; }

/* the boss: Edwin VanCleef */
.hk-boss { width: 240px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.hk-boss-cell { height: 64px; background: rgba(0, 0, 0, 0.7); background-clip: padding-box; }
.hk-boss-health { position: relative; height: 100%; overflow: hidden; background: rgba(20, 20, 20, 0.9); }
.hk-boss-fill { position: absolute; top: 0; bottom: 0; left: 0; background: rgb(150, 18, 12); transition: width 0.12s ease-out; }
.hk-boss-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.hk-boss-name { color: #fff; font: 700 17px var(--body); text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.hk-boss-pct { color: #f2e6cf; font: 700 14px var(--body); text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.hk-boss-cast { position: relative; height: 34px; background: #120d09; background-clip: padding-box; visibility: hidden; }
.hk-boss-cast.on { visibility: visible; }
.hk-boss-cast .hk-cast-fill { background: linear-gradient(#ff6a3a, #b8300a); }
.hk-row { display: flex; gap: 3px; }
.hk-cell {
  position: relative; width: 176px; height: 86px; flex: none;
  cursor: url("/img/cursor-point.png") 1 1, pointer; touch-action: manipulation;
  transition: box-shadow 0.2s;
}
.hk-pet { width: 96px; }
.hk-cell.hk-aggro { border-image-source: url("/img/trim-aggro.svg"); box-shadow: 0 0 12px 2px rgba(255, 30, 0, 0.6); }
.hk-cell.hk-magic { border-image-source: url("/img/trim-magic.svg"); box-shadow: 0 0 12px 2px rgba(51, 153, 255, 0.6); }
.hk-cell.hk-curse { border-image-source: url("/img/trim-curse.svg"); box-shadow: 0 0 12px 2px rgba(153, 0, 255, 0.6); }
.hk-cell.hk-poison { border-image-source: url("/img/trim-poison.svg"); box-shadow: 0 0 12px 2px rgba(0, 153, 0, 0.65); }
.hk-content { position: absolute; inset: 0; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.7); transition: opacity 0.25s; }
.hk-health { position: relative; flex: 1; overflow: hidden; background: rgba(20, 20, 20, 0.9); }
.hk-divider { position: relative; height: 5px; flex: none; background: linear-gradient(#0c0700, #493212 20%, #aa8e5e 50%, #674b24 75%, #1f1200); }
.hk-fsr { position: absolute; left: 0; top: 1px; bottom: 1px; width: 0; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 217, 115, 0.25), rgba(255, 228, 150, 1)); box-shadow: 0 0 6px rgba(255, 217, 115, 0.8); }
.hk-fsr.on { opacity: 1; }
.hk-mana { position: relative; height: 11px; flex: none; overflow: hidden; background: rgba(20, 20, 20, 0.9); }

.hk-fill, .hk-inc, .hk-shield, .hk-hot, .hk-mana-fill, .hk-cost { position: absolute; top: 0; bottom: 0; left: 0; width: 0; }
.hk-inc { background: rgba(89, 255, 89, 0.55); }
.hk-shield { background: url("/img/raid/Shield-Fill.png") center / 100% 100%; }
.hk-shield::after { content: ""; position: absolute; inset: 0; background: url("/img/raid/Shield-Overlay.png") repeat; background-size: 24px 24px; }
.hk-hot { background: linear-gradient(90deg, rgba(115, 255, 115, 0.4), rgba(115, 255, 115, 0.05)); }
.hk-cost { background: rgba(107, 148, 242, 0.75); }
.hk-oh, .hk-edge { position: absolute; top: 0; bottom: 0; right: 0; opacity: 0; pointer-events: none; }
.hk-edge { width: 12px; mix-blend-mode: screen; }
.hk-edge-shield { width: 18px; right: -8px; background: url("/img/raid/Shield-Overshield.png") center / 100% 100%; }
.hk-oh.on, .hk-edge.on { opacity: 1; }
.hk-sheen { position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.28)); pointer-events: none; }
.hk-hl { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); display: none; }
.hk-cell:hover .hk-hl, .hk-cell:focus-visible .hk-hl { display: block; }
.hk-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hk-action.hk-armed { animation: none; box-shadow: 0 0 10px rgba(255, 209, 0, 0.8); }
  .hk-center.on { animation: none; }
}

.hk-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.hk-name { display: flex; align-items: center; gap: 4px; color: #fff; font: 700 16px/1.1 var(--body); text-shadow: 0 1px 1px #000, 0 0 2px #000; white-space: nowrap; }
.hk-role svg { width: 14px; height: 14px; display: block; }
.hk-status { color: #9a9a9a; font: 700 13px var(--body); text-shadow: 0 1px 1px #000; }
.hk-dead .hk-name { color: #9a9a9a; }

.hk-corner { position: absolute; top: 3px; display: flex; }
.hk-tr { right: 3px; }
.hk-tl { left: 3px; }
.hk-corner { gap: 1px; }
.hk-ic { position: relative; display: block; }
.hk-corner img { width: 20px; height: 20px; border: 1px solid #000; display: block; }
.hk-ic b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 11px var(--body); text-shadow: 0 0 2px #000, 0 0 2px #000; }
.hk-dispel { position: absolute; left: 3px; bottom: 3px; }
.hk-dispel img { width: 22px; height: 22px; display: block; border: 2px solid #3399ff; }
.hk-center { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.hk-center.on { opacity: 1; animation: spirit 2s ease-in-out infinite; }

.hk-dispel-flash { position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
.hk-dispel-ring { position: absolute; inset: -7px; pointer-events: none; z-index: 2; }
.hk-dispel-ghost { position: absolute; width: 22px; height: 22px; border: 2px solid; pointer-events: none; transform-origin: center; }

/* combat text */
.hk-floats { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.hk-float { position: absolute; white-space: nowrap; font: 800 18px/1 var(--body); will-change: transform, opacity;
  text-shadow: 0 0 2px #000, 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8); }
.hk-heal { color: #58ff58; }
.hk-hit { color: #fff6d8; font-size: 16px; }
.hk-crit { color: #ffd100; font-size: 18px; }
.hk-removed { font-size: 17px; }

/* the cast bar under the frames */
.hk-castbar {
  position: absolute; left: 50%; bottom: 128px; width: 300px; height: 40px; transform: translateX(-50%);
  background: #120d09; background-clip: padding-box; visibility: hidden;
}
.hk-castbar.on { visibility: visible; }
.hk-castbar { transition: opacity 0.45s; }
.hk-castbar.hk-done .hk-cast-fill { background: linear-gradient(#7dff6a, #19a512); }
.hk-castbar.hk-done { box-shadow: 0 0 14px rgba(120, 255, 100, 0.55); }
.hk-castbar.hk-failed .hk-cast-fill { background: linear-gradient(#ff5a4a, #a8120c); }
.hk-castbar.hk-fading { opacity: 0; }
.hk-cast-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: linear-gradient(#ffcf3a, #d68a00); }
.hk-cast-icon { position: absolute; left: -44px; top: -7px; width: 40px; height: 40px; border: 1px solid #000; }
.hk-cast-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 15px var(--body); text-shadow: 0 1px 1px #000, 0 0 2px #000; }

.hk-overlay {
  /* top right, out of the way: the party stays clickable, so you can still resurrect your friends */
  position: absolute; right: 14px; top: 14px; width: min(300px, calc(100% - 28px));
  padding: 14px 16px; text-align: center; font-size: 16px; background: rgba(18, 13, 9, 0.96); background-clip: padding-box; z-index: 5;
}
.hk-overlay[hidden] { display: none; }
.hk-result { color: var(--cream); margin-bottom: 12px; line-height: 1.4; }

/* the clicks panel: HealKit's Healing tab in miniature */
.hk-keys { padding: 16px 18px; background: #18110c; background-clip: padding-box; }
.hk-keys-title { font-family: var(--display); color: var(--gold); font-weight: 700; margin: 0 0 10px; }
.hk-help { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.hk-help li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.hk-help li:last-child { border-bottom: 0; }
.hk-help strong { color: var(--gold); display: inline-block; min-width: 118px; }
.hk-grid { display: grid; grid-template-columns: 52px repeat(3, 1fr); gap: 8px 6px; align-items: center; font-size: 14px; }
.hk-grid .hk-h { color: var(--gold); font-weight: 700; text-align: center; }
.hk-grid .hk-mod { color: var(--gold); font-weight: 700; }
.hk-slot { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; color: var(--text); font-size: 12px; }
.hk-slot img { width: 34px; height: 34px; border: 1px solid #000; margin-bottom: 3px; transition: filter 0.15s; }
.hk-row-shift { opacity: 0.55; transition: opacity 0.15s; }
.hk-shift-down .hk-row-shift { opacity: 1; }
.hk-shift-down .hk-row-plain { opacity: 0.55; }
.hk-gcd .hk-slot img { filter: brightness(0.55); }
.hk-shift {
  margin-top: 14px; width: 100%; padding: 8px; border: 1px solid #674b24; background: #1f1610; color: var(--text);
  font: 700 15px var(--body); border-radius: 3px; cursor: pointer;
}
.hk-shift.on { background: #3a2a1a; color: var(--gold); border-color: #aa8e5e; }
.hk-note { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.hk-small { color: var(--muted); font-size: 15px; margin-top: 14px; }

/* picking a healer */
.hk-picker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(460px, calc(100% - 32px));
  padding: 20px; text-align: center; background: rgba(18, 13, 9, 0.96); background-clip: padding-box; }
.hk-picker[hidden] { display: none; }
.hk-picker-title { font-family: var(--display); color: var(--cream); font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.hk-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hk-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; background: #1f1610; border: 1px solid #493212;
  border-radius: 3px; color: var(--cls); font: 700 16px var(--body); cursor: url("/img/cursor-point.png") 1 1, pointer; }
.hk-pick img { width: 48px; height: 48px; border: 1px solid #000; }
.hk-pick:hover, .hk-pick:focus-visible { border-color: #aa8e5e; background: #2a1e14; box-shadow: 0 0 12px rgba(240, 194, 122, 0.25); }
.hk-demo:not(.hk-has-healer) .hk-party { opacity: 0.35; }
.hk-demo:not(.hk-has-healer) .hk-actionbar { visibility: hidden; }
.hk-overlay-btns { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* the action bar: your six clicks */
.hk-actionbar { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); display: flex; gap: 22px; z-index: 4; }
.hk-action { position: relative; width: 52px; height: 52px; overflow: visible; padding: 0; border: 2px solid #3a2a1a; border-radius: 3px; background: #000;
  cursor: url("/img/cursor-point.png") 1 1, pointer; box-shadow: 0 0 0 1px #000; }
.hk-action img { width: 100%; height: 100%; display: block; }
.hk-hotkey { position: absolute; top: -2px; right: -2px; display: flex; align-items: center; gap: 1px; }
.hk-hotkey img { width: 22px; height: 22px; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); }
.hk-hotkey i { font: 700 10px var(--body); font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; order: -1; }
.hk-sweep { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.68) var(--p, 0deg), transparent 0); pointer-events: none; }
.hk-action-name { position: absolute; top: 56px; left: 50%; width: 74px; transform: translateX(-50%); color: var(--text); font: 600 11px/1.15 var(--body);
  text-align: center; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; }
.hk-cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 18px var(--body); text-shadow: 0 0 3px #000; }
.hk-action { transition: transform 0.12s; }
.hk-action.hk-armed { border-color: var(--gold); transform: scale(1.1); z-index: 1; animation: hk-armed 1.2s ease-in-out infinite; }
.hk-action.hk-armed > img { filter: none !important; }
@keyframes hk-armed { 0%, 100% { box-shadow: 0 0 6px rgba(255, 209, 0, 0.55); } 50% { box-shadow: 0 0 16px rgba(255, 209, 0, 0.95); } }
.hk-action.hk-queued, .hk-action.hk-casting { border-color: #f0c27a; }
.hk-action:nth-child(2), .hk-action:nth-child(4) { margin-right: 12px; }
/* not enough mana for it: blue, as on the game's action bars */
.hk-action.hk-nomana > img { filter: grayscale(0.4) brightness(0.55) sepia(1) hue-rotate(185deg) saturate(3) !important; }
.hk-mod-shift .hk-action:not(:nth-child(3)):not(:nth-child(4)) > img, .hk-mod-ctrl .hk-action:not(:nth-child(5)):not(:nth-child(6)) > img,
.hk-mod-none .hk-action:nth-child(n+3) > img { filter: brightness(0.5); }
/* with a mouse and keyboard, the rows you aren't holding are dimmed; on touch screens only once a spell is picked */
@media (hover: hover) {
  .hk-demo:not(.hk-mod-shift):not(.hk-mod-ctrl) .hk-action:nth-child(n+3) > img { filter: brightness(0.55); }
}
/* touch screens: every spell bright (taps don't use Shift/Ctrl), but the mouse and Shift/Ctrl badges stay
   to show how the clicks work in game; only the picked spell stands out */
@media (hover: none) {
  .hk-demo .hk-action > img { filter: none; }
}

@media (max-width: 900px) {
  .hk-stage { min-height: 500px; }
}
/* phones: the scene sizes to its content; messages, boss, party, cast bar and spells packed close */
@media (max-width: 640px) {
  .hk-stage { min-height: 0; padding: 78px 10px 118px; }
  .hk-msgs { top: 8px; left: 10px; right: 10px; gap: 2px; }
  .hk-statusline { font-size: 16px; min-height: 0; }
  .hk-error { font-size: 14px; min-height: 18px; }
  /* the end panel floats over the message band and the boss frame (dead by then), short enough to stop
     above the party: no layout jump, every frame tappable for a rez */
  .hk-overlay { left: 10px; right: 10px; top: 6px; width: auto; transform: none; padding: 8px 12px; font-size: 14px; z-index: 6; }
  .hk-overlay .hk-result { margin-bottom: 8px; }
  .hk-overlay .btn { padding: 4px 18px 10px; font-size: 16px; }
  .hk-field { flex-direction: column-reverse; gap: 8px; }
  .hk-boss { width: 100%; max-width: 280px; gap: 4px; }
  .hk-boss-cell { height: 52px; }
  .hk-boss-cast { height: 26px; }
  .hk-castbar { bottom: 70px; height: 34px; width: 230px; }
  .hk-cast-icon { width: 34px; height: 34px; left: -38px; }
  .hk-actionbar { bottom: 14px; gap: 4px; }
  .hk-action { width: 46px; height: 46px; }
  .hk-action:nth-child(2), .hk-action:nth-child(4) { margin-right: 6px; }
  .hk-action-name { display: none; }
  .hk-picks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .hk-cell { width: 160px; height: 80px; }
  .hk-pet { width: 84px; }
}