/* The Pharos download floater (renderer/pharos/floater.js).
 * The lamp room's own hand: black glass, one beacon-orange light that fills as
 * the download does. Bottom-right, beside Hearth's game-grab floater (and lifted
 * above it when both show, --phf-lift). Below modals and toasts in z. */
.phf {
  --phf-glass: rgba(14, 11, 16, .94);
  --phf-line: rgba(255, 255, 255, .09);
  --phf-beacon: #ff8c1a;
  --phf-beacon-2: #ff6000;
  --phf-ink: #f3efe9;
  --phf-dim: #a69f95;
  position: fixed;
  right: 18px;
  bottom: var(--phf-lift, calc(92px + env(safe-area-inset-bottom, 0px)));
  z-index: 9400;
  width: 320px;
  max-width: calc(100vw - 24px);
  border-radius: 14px;
  border: 1px solid var(--phf-line);
  background: var(--phf-glass);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 210, 140, .06);
  backdrop-filter: blur(10px);
  color: var(--phf-ink);
  font-size: 12.5px;
  animation: phf-in .32s cubic-bezier(.22, 1, .36, 1);
}
.phf[hidden] { display: none; }
@keyframes phf-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.phf-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; }
.phf-toggle {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 5px; align-items: center;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 4px; border-radius: 9px;
}
.phf-toggle:hover { background: rgba(255, 255, 255, .04); }
.phf-toggle:focus-visible, .phf-close:focus-visible { outline: 2px solid var(--phf-beacon); outline-offset: 2px; }
.phf-lamp { grid-row: 1 / 3; width: 22px; height: 22px; object-fit: contain; }
.phf-head-t { font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phf-mini { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.phf-mini-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--phf-beacon-2), var(--phf-beacon)); transition: width .5s ease; }
.phf-close {
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: none; color: var(--phf-dim); font-size: 19px; line-height: 1; cursor: pointer;
}
.phf-close:hover { background: rgba(255, 255, 255, .07); color: var(--phf-ink); }
.phf-list { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 360px); overflow-y: auto; overscroll-behavior: contain; }
.phf.is-min .phf-list { display: none; }
.phf.is-done .phf-mini-fill { background: #8fdc8a; }
.phf-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid var(--phf-line); }
.phf-art { width: 34px; height: 51px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .05); }
.phf-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phf-art img.is-mark { width: 26px; height: 26px; object-fit: contain; }
.phf-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.phf-name { font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phf-line { color: var(--phf-dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phf-row.is-done .phf-line { color: #8fdc8a; font-weight: 600; }
.phf-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.phf-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--phf-beacon-2), var(--phf-beacon)); transition: width .6s ease; }
.phf-row.is-done .phf-fill { background: #8fdc8a; }
.phf-dest { font-size: 11px; color: var(--phf-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phf-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (max-width: 520px) {
  .phf { right: 12px; left: 12px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phf { animation: none; }
  .phf-mini-fill, .phf-fill { transition: none; }
}