/* Combat hotbar: framed ability tray, cooldown sweeps, energy and attack timer.
   Loaded after combat-motion.css. */

@property --hot-cd {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ---- Deck layout: status | hotbar | automation ---- */
.hunt-action-deck {
  grid-template-columns: minmax(150px, 1fr) auto minmax(110px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 12px 18px 14px;
  border-top: 1px solid #433434;
  background:
    linear-gradient(180deg, #0000 0, #00000040 100%),
    radial-gradient(ellipse at 50% 0, #2a2121, #130f0f 75%);
}
.hunt-deck-side { display: flex; justify-content: flex-end; }
.hunt-automation {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid #4d3a38;
  border-radius: 7px;
  background: linear-gradient(#241c1c, #161111);
  color: #d1bda6;
  font-size: 12px;
  font-weight: 600;
}
.hunt-automation:hover { border-color: #dbcbb8; color: #e7dccf; }

/* ---- Tray ---- */
.hunt-hotbar {
  --slot: clamp(54px, 4.4vw, 70px);
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}
.hot-tray {
  position: relative;
  display: flex;
  gap: 9px;
  padding: 9px 12px 6px;
  border: 1px solid #5e4442;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #281e1e, #140f0f),
    #140f0f;
  box-shadow:
    inset 0 1px 0 #ffffff12,
    inset 0 -8px 16px #0006,
    0 6px 18px #0008,
    0 0 0 1px #000a;
}
.hot-tray::before,
.hot-tray::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 22px;
  margin-top: -14px;
  border: 1px solid #5e4442;
  background: linear-gradient(#322727, #181313);
}
.hot-tray::before { left: -6px; border-radius: 4px 0 0 4px; border-right: 0; }
.hot-tray::after { right: -6px; border-radius: 0 4px 4px 0; border-left: 0; }

.hot-cell { display: grid; justify-items: center; gap: 4px; width: var(--slot); }
.hot-name {
  max-width: calc(var(--slot) + 8px);
  overflow: hidden;
  color: #baab9a;
  font-size: 10px;
  letter-spacing: .2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Slot ---- */
.hot-slot {
  --tone: #dfd1c1;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--slot);
  height: var(--slot);
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid #7a5a58;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%),
    linear-gradient(160deg, #251f1f, #100d0d);
  box-shadow: inset 0 0 0 1px #000b, inset 0 0 14px #000c, 0 2px 4px #0009;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.hot-slot:hover { border-color: #e5dacd; transform: translateY(-1px); }
.hot-slot:focus-visible { outline: 2px solid #e5dacd; outline-offset: 2px; }

.hot-icon {
  display: grid;
  place-items: center;
  width: 70%;
  height: 70%;
  color: var(--tone);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tone) 55%, transparent)) drop-shadow(0 2px 2px #000);
  transition: opacity .2s, filter .2s;
}
.hot-icon svg { width: 100%; height: 100%; }

.tone-steel  { --tone: #e1d4c5; }
.tone-guard  { --tone: #d3c1ab; }
.tone-buff   { --tone: #f3a75b; }
.tone-hunt   { --tone: #c9e292; }
.tone-debuff { --tone: #c9a0ec; }
.tone-arcane { --tone: #b7a0ff; }
.tone-heal   { --tone: #d6c5b0; }
.tone-poison { --tone: #9fdc6a; }
.tone-blood  { --tone: #f27c6c; }
.tone-energy { --tone: #7fe0cf; }
.tone-empty  { --tone: #6f5250; }
.hot-slot:has(.tone-steel)  { --tone: #e1d4c5; }
.hot-slot:has(.tone-guard)  { --tone: #d3c1ab; }
.hot-slot:has(.tone-buff)   { --tone: #f3a75b; }
.hot-slot:has(.tone-hunt)   { --tone: #c9e292; }
.hot-slot:has(.tone-debuff) { --tone: #c9a0ec; }
.hot-slot:has(.tone-arcane) { --tone: #b7a0ff; }
.hot-slot:has(.tone-heal)   { --tone: #d6c5b0; }
.hot-slot:has(.tone-poison) { --tone: #9fdc6a; }
.hot-slot:has(.tone-blood)  { --tone: #f27c6c; }
.hot-slot:has(.tone-energy) { --tone: #7fe0cf; }
.hot-slot:has(.tone-empty)  { --tone: #6f5250; }

.hot-key {
  position: absolute;
  z-index: 3;
  top: -6px;
  left: -6px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border: 1px solid #5e4442;
  border-radius: 4px;
  background: #181313;
  color: #d9c9b6;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.hot-cost {
  position: absolute;
  z-index: 3;
  right: -5px;
  bottom: -6px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  min-width: 20px;
  height: 17px;
  padding: 0 4px;
  border: 1px solid #2f6a62;
  border-radius: 9px;
  background: #1c1616;
  color: #9fe7da;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hot-cost::before { content: "ϟ"; font-size: 9px; opacity: .8; }

/* Ready: the slot is lit */
.hot-slot.is-ready {
  border-color: color-mix(in srgb, var(--tone) 60%, #7a5a58);
  box-shadow: inset 0 0 0 1px #000b, inset 0 0 12px color-mix(in srgb, var(--tone) 22%, transparent), 0 0 10px color-mix(in srgb, var(--tone) 22%, transparent), 0 2px 4px #0009;
}

/* Cooling down: radial sweep + countdown */
.hot-slot.is-cooling .hot-icon { opacity: .55; filter: grayscale(.5) drop-shadow(0 2px 2px #000); }
.hot-sweep {
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 8px;
  background: conic-gradient(#000000b8 calc(var(--hot-cd) * 1turn), #0000 0);
  animation-name: hot-cooldown;
  animation-timing-function: linear;
  animation-fill-mode: both;
  pointer-events: none;
}
@keyframes hot-cooldown {
  from { --hot-cd: 1; }
  to   { --hot-cd: 0; }
}
.hot-timer {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  color: #f3eee8;
  font-size: calc(var(--slot) * .3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px #000, 0 1px 2px #000;
}
.hot-icon, .hot-sweep, .hot-flash, .hot-off { grid-area: 1 / 1; }

/* Not enough energy */
.hot-slot.is-low .hot-icon { opacity: .6; filter: saturate(.4) drop-shadow(0 2px 2px #000); }
.hot-slot.is-low { border-color: #3f6f8a; box-shadow: inset 0 0 0 1px #000b, inset 0 0 16px #1f4c6a88; }
.hot-slot.is-low .hot-cost { border-color: #8a3f3f; background: #2a1212; color: #f0a2a2; }

/* Turned off in automation */
.hot-slot.is-off .hot-icon { opacity: .28; filter: grayscale(1); }
.hot-off {
  z-index: 2;
  padding: 2px 5px;
  border: 1px solid #654b49;
  border-radius: 4px;
  background: #181313e6;
  color: #bfae8e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Empty */
.hot-slot.is-empty { border-style: dashed; border-color: #503e3e; background: #121010; }

/* Just activated: a bright pulse that expands outward */
.hot-flash {
  position: absolute;
  inset: -3px;
  z-index: 2;
  border: 2px solid var(--tone);
  border-radius: 11px;
  pointer-events: none;
  animation: hot-flash 700ms ease-out both;
}
@keyframes hot-flash {
  0%   { opacity: 1; transform: scale(.94); box-shadow: 0 0 18px var(--tone), inset 0 0 18px var(--tone); }
  100% { opacity: 0; transform: scale(1.18); box-shadow: 0 0 4px var(--tone), inset 0 0 0 transparent; }
}
.hot-slot.is-fired .hot-icon { animation: hot-pop 380ms ease-out both; }
@keyframes hot-pop {
  0% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---- Energy and attack timer under the tray ---- */
.hot-energy {
  position: relative;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border: 1px solid #493939;
  border-radius: 8px;
  background: #141010;
  box-shadow: inset 0 1px 3px #000a;
}
.hot-energy i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, #7fe6d4, #3ba897 55%, #2a8072);
  box-shadow: 0 0 8px #5fd6c288;
  transition: width .6s linear;
}
.hot-energy span {
  position: relative;
  display: block;
  color: #e8fffa;
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  font-variant-numeric: tabular-nums;
}
.hot-swing {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: #261e1e;
}
.hot-swing i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #7a161c, #e5dacd);
  transform-origin: left center;
  animation-name: hot-swing;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.hot-swing.idle i { transform: scaleX(0); animation: none; }
@keyframes hot-swing {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Left status column */
.hunt-action-message .hunt-latest { font-size: 13px; color: #d8cab0; }

/* The old ability pill and footer Automation button are replaced */
.hunt-ability-detail { display: none; }
@media (min-width: 961px) {
  .hunt-footer { display: none; }
}

/* ---- Narrow screens ---- */
@media (max-width: 960px) {
  .hunt-action-deck { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; }
  .hunt-deck-side { display: none; }
  .hunt-hotbar { --slot: clamp(46px, 13vw, 62px); order: -1; justify-self: center; width: max-content; max-width: 100%; }
  .hot-name { max-width: var(--slot); }
  .hot-tray { gap: 7px; padding: 8px 9px 5px; }
}
@media (max-width: 400px) {
  .hunt-hotbar { --slot: clamp(42px, 12.4vw, 52px); }
  .hot-tray { gap: 5px; padding: 7px 7px 4px; }
  .hot-name { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .hot-flash, .hot-slot.is-fired .hot-icon, .hot-swing i { animation: none !important; }
}