/* Dark Mage of Mossfen — the Server Watch (v1.74, ui/server-watch.js): the game master's count of who was in the
   game, hour by hour. In the middle like the world map, over it. One series, one muted amber (validated against the
   chart's own dark ground for lightness and contrast); no glow anywhere: soft on the eyes. */
#watch {
  left: 50%; top: calc(50% - 20px); transform: translate(-50%, -50%); z-index: 8;
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 150px); overflow-y: auto;
  padding: 10px 14px 12px;
  --w-ground: #101612;
  --w-bar: #b48a3a;
  --w-bar-lift: #c9a052;
  --w-grid: rgba(239, 230, 207, 0.08);
  --w-base: rgba(239, 230, 207, 0.22);
  --w-off: rgba(182, 172, 146, 0.22);
}
#watch header { align-items: center; }
#watch .win-meta { margin-right: auto; margin-left: 8px; }
#watch.is-waiting .watch-tiles, #watch.is-waiting .watch-chart, #watch.is-waiting .watch-day { opacity: 0.45; }

.watch-ranges { display: flex; gap: 2px; margin: -2px 0 10px; border-bottom: 1px solid var(--edge); }
.watch-ranges button {
  padding: 7px 12px 9px; border: 0; background: none; cursor: pointer;
  font: 700 14px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.watch-ranges button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--edge-strong); }
.watch-ranges button:hover, .watch-ranges button:focus-visible { color: var(--ink-dim); outline: none; }
.watch-ranges button[aria-selected="true"]:focus-visible { color: var(--ink); }

.watch-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.watch-tile {
  display: grid; gap: 3px; align-content: start; padding: 8px 10px 9px;
  background: rgba(0, 0, 0, 0.26); border: 1px solid var(--edge); border-radius: 4px;
}
.watch-tile small { font-size: 12.5px; color: var(--ink-dim); }
.watch-tile b { font: 400 26px/1.05 var(--f-num); color: var(--ink); }
.watch-tile em { font-style: normal; font-size: 12px; color: var(--ink-faint); min-height: 1.2em; }

.watch-chart {
  position: relative; margin: 0; padding: 4px 0 0; background: var(--w-ground); border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 4px; box-shadow: 0 0 0 1px var(--edge); outline: none; min-height: 172px;
  touch-action: pan-y;
}
.watch-chart:focus-visible { box-shadow: 0 0 0 1px var(--edge-strong); }
.watch-chart svg, .watch-day-chart svg { display: block; }
.watch-grid { stroke: var(--w-grid); stroke-width: 1; }
.watch-base { stroke: var(--w-base); stroke-width: 1; }
.watch-hatch { stroke: var(--w-off); stroke-width: 2; }
.watch-off { pointer-events: none; }
.watch-bar { fill: var(--w-bar); }
.watch-bar.is-now { fill-opacity: 0.55; }
.watch-bar.is-hover, .watch-bar.is-busy { fill: var(--w-bar-lift); fill-opacity: 1; }
.watch-cursor { fill: rgba(239, 230, 207, 0.06); pointer-events: none; }
.watch-ytick { fill: var(--ink-faint); font: 400 11px/1 var(--f-num); text-anchor: end; font-variant-numeric: tabular-nums; }
.watch-xtick { fill: var(--ink-faint); font: 500 11px/1 var(--f-body); text-anchor: middle; }
.watch-label { fill: var(--ink-dim); font: 600 11px/1 var(--f-body); text-anchor: middle; }

.watch-tip {
  position: absolute; top: 8px; z-index: 1; pointer-events: none; min-width: 150px; max-width: 240px;
  padding: 7px 10px 8px; background: rgba(12, 16, 13, 0.96); border: 1px solid var(--edge); border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.watch-tip small { display: block; margin-bottom: 4px; font-size: 12px; color: var(--ink-dim); }
.watch-tip p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; }
.watch-tip b { font: 400 15px/1 var(--f-num); color: var(--ink); }

.watch-caption { margin: 6px 2px 10px; font-size: 12.5px; color: var(--ink-faint); }
.watch-day h3 { margin: 0 0 4px; font: 700 13px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink-dim); }
.watch-day-chart { background: var(--w-ground); border-radius: 4px; box-shadow: 0 0 0 1px var(--edge); }

.watch-table { margin-top: 10px; }
.watch-table summary { cursor: pointer; font: 700 13px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink-dim); padding: 4px 0; }
.watch-table summary:hover { color: var(--ink); }
.watch-table-scroll { max-height: 220px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--edge); border-radius: 4px; }
.watch-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.watch-table th { position: sticky; top: 0; background: var(--panel-solid); text-align: left; font-weight: 600; color: var(--ink-dim); padding: 6px 8px; }
.watch-table td { padding: 4px 8px; color: var(--ink); border-top: 1px solid var(--w-grid); font-variant-numeric: tabular-nums; }
.watch-table th:not(:first-child), .watch-table td:not(:first-child) { text-align: right; }

@media (max-width: 600px) {
  #watch { top: calc(50% - 30px); max-height: calc(100vh - 170px); padding: 8px 10px 10px; }
  #watch header { flex-wrap: wrap; row-gap: 4px; }
  #watch .win-title { white-space: nowrap; }
  #watch .win-meta { order: 3; flex-basis: 100%; margin-left: 0; line-height: 1.3; }
  .watch-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .watch-tile b { font-size: 22px; }
  .watch-ranges button { padding: 7px 9px 9px; }
  .watch-chart { min-height: 140px; }
}