/* LOOT Window — reusable component styles (blackjack idiom) */

.lw-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  /* transparent (v7): the scene is drawn for a white page; hosts may overlap the
     card's empty regions, so the stage neither paints nor captures clicks there */
  background: transparent;
  pointer-events: none;
}

.lw-slider, .lw-nowflag { pointer-events: auto; }

.lw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.lw-ui {
  position: absolute; /* anchored just above the window by resize() */
  color: #111111;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.lw-clock {
  font: 650 19px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------------- now flag ----------------
   Small pill on a leader line poking out of the track at the real current
   time; clicking it reverts a scrub back to live. Positioned in px by the
   component (resize + minute tick). */

.lw-nowflag {
  appearance: none;
  cursor: pointer;
  position: absolute;
  font: 700 10px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 999px;
  background: #d21f33;
  color: #ffffff;
  border: 2px solid #d21f33;
  box-shadow: 0 2px 0 #9c0f1c;
  transition: transform 0.1s, opacity 0.2s;
}

.lw-nowflag::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: #d21f33;
}

.lw-nowflag:hover { transform: translateY(-1px); }
.lw-nowflag:active { transform: translateY(1px); box-shadow: 0 1px 0 #9c0f1c; }
.lw-nowflag:disabled { opacity: 0.35; cursor: default; transform: none; }

/* ---------------- hour ruler ---------------- */

.lw-scale {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lw-tick {
  position: absolute;
  height: 1.5px;
  background: #111111;
  opacity: 0.35;
}

.lw-tick6 { opacity: 1; }

.lw-ticklab {
  position: absolute;
  width: 34px;
  text-align: right;
  font: 700 8px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  color: #111111;
}

/* ---------------- vertical slider ----------------
   A plain horizontal range rotated 90deg: left end = midnight at the top,
   time runs downward like the full-page scroll. Length is set in px by
   the component on resize (percent width can't track stage height). */

.lw-slider {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 47%;
  left: 0; /* actual center is set in px by the component on resize */
  transform: translate(-50%, -50%) rotate(90deg);
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.lw-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #101a3e 0%, #43315e 22%, #ff9e63 26%, #cfe8fa 38%,
    #c9e7fb 54%, #e8ddc2 71%, #ffc272 79%, #8f4468 87%, #182048 100%);
  border: 1.5px solid #111111;
}

.lw-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #101a3e 0%, #43315e 22%, #ff9e63 26%, #cfe8fa 38%,
    #c9e7fb 54%, #e8ddc2 71%, #ffc272 79%, #8f4468 87%, #182048 100%);
  border: 1.5px solid #111111;
}

/* thumb shadow is in local +x so it points visually down after the rotation */
.lw-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #111111;
  box-shadow: 2px 0 0 #111111;
}

.lw-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #111111;
  box-shadow: 2px 0 0 #111111;
}