/* DJTL Nades — teams, side panel, crosshair overlay, hover previews.
   Loaded after app.css, which owns the colour tokens and the base layout. */

/* ---------- media wrapper ----------
   The wrapper shrink-wraps the picture so an absolutely positioned overlay
   covers exactly the image box, never the letterboxing around it. */
.media {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.media img, .media video { position: relative; z-index: 0; }

.xhair {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Out of the way, in the corner. A play button over the middle of the frame
   covers the one thing the picture is for — the lineup — and the whole frame
   is clickable anyway, so the badge only has to say that there is something
   to play.

   Stacking inside .media, bottom to top: picture 0, hover loop 1, crosshair 3,
   badge 4, magnifier 4, the way back 5. The badge has to clear the hover loop
   in particular — the loop is the thing it is labelling. */
.playbadge {
  position: absolute;
  right: 10px; bottom: 10px;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: #000000b0;
  border: 1px solid #ffffff2e;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  pointer-events: none;
}
.feed.grid .playbadge { right: 6px; bottom: 6px; height: 22px; padding: 0 8px; font-size: 11px; }

/* Shown while a clip is playing: the way back to the still. Same corner as the
   badge it replaces, lifted clear of the video's own controls — the row of
   them along the bottom edge ends in the fullscreen button, and covering that
   to save 36 pixels would be a poor trade. */
.backimg {
  position: absolute;
  right: 10px; bottom: 46px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: #000000c4;
  border: 1px solid #ffffff33;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.backimg:hover { background: #000; border-color: #ffffff66; }

/* The silent loop sits on top of the poster and fades in once it is playing,
   so there is never a flash of black while it buffers. */
/* Selector weight matters here. `.media img, .media video` above and
   `.frame img, .frame video` in app.css both outrank a lone `.hoverclip`, and
   between them they put the loop back in the flow at its own small size —
   under the picture instead of over it. Naming both the wrapper and the
   element beats both. */
.media video.hoverclip {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
  opacity: 0;
  transition: opacity .18s ease;
}
.media video.hoverclip.on { opacity: 1; }
.feed.grid .media video.hoverclip { object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hoverclip { transition: none; } }

/* ---------- deep-link highlight ---------- */
.item.flash { animation: flashring 1.6s ease-out; }
@keyframes flashring {
  0%, 40% { box-shadow: inset 0 0 0 2px var(--accent); }
  100%    { box-shadow: inset 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) { .item.flash { animation: none; } }

/* ---------- team identity ---------- */
.teamtag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--team, #f0a92b) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--team, #f0a92b) 45%, transparent);
  color: var(--team, #f0a92b);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.teamtag.sm { height: 19px; font-size: 11px; padding: 0 8px; }
.teamtag.admintag { --team: #e0663b; }
.teamtag:empty { display: none; }

.borrowbadge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  background: #16161a;
  border: 1px dashed var(--line);
  color: var(--dim);
}
.feed.grid .borrowbadge { top: 8px; right: 8px; }

.pill {
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 999px;
  background: #2a2a31;
  color: var(--dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.btn.hasnew { border-color: var(--accent); color: var(--accent); }
.btn.hasnew .pill { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.teamswitch { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.teamchip {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--dim);
  text-decoration: none;
  font-size: 12.5px;
}
.teamchip:hover { color: var(--text); }
.teamchip.on {
  border-color: color-mix(in srgb, var(--team, #f0a92b) 55%, transparent);
  color: var(--team, #f0a92b);
  background: color-mix(in srgb, var(--team, #f0a92b) 14%, transparent);
}

/* ---------- team picker ---------- */
.picker .card.wide { width: min(520px, 100%); }
.teamlist { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.teamcard {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-left: 3px solid var(--team, #f0a92b);
  border-radius: 10px;
  text-decoration: none;
  text-align: left;
}
.teamcard:hover { background: #212127; border-color: #34343c; }
.teamdot { width: 10px; height: 10px; border-radius: 50%; background: var(--team, #f0a92b); flex: none; }
.teamtext { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.teamtext strong { color: var(--text); }
.teamsub { color: var(--dimmer); font-size: 12px; }
.pendingbadge {
  flex: none;
  min-width: 20px; padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px; font-weight: 700;
  text-align: center;
}
.row.centred { justify-content: center; }

/* ---------- workspace + side panel ---------- */
.workspace { display: flex; align-items: flex-start; }
.feed { flex: 1 1 auto; min-width: 0; }

.sidepanel {
  flex: none;
  width: min(440px, 42vw);
  position: sticky;
  top: var(--chrome);
  height: calc(100vh - var(--chrome));
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border-left: 1px solid var(--line);
}

.paneltabs {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.ptab {
  height: 26px; padding: 0 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--dim);
  font-size: 12.5px;
}
.ptab:hover { color: var(--text); }
.ptab.on { background: #202026; border-color: var(--line); color: var(--text); }
.paneltabs .icon.sm { margin-left: auto; }

.panelbody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 10px;
  gap: 8px;
}
.panelhead { display: flex; align-items: center; gap: 8px; flex: none; }
.savestate { color: var(--dimmer); font-size: 11.5px; margin-left: auto; }

/* ---------- notes ---------- */
.doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.docrow { display: flex; align-items: stretch; gap: 4px; }
.docopen {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 10px;
  background: #1a1a1f;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  text-align: left;
}
.docopen:hover { background: #22222a; }
.docrow.pinned .docopen { border-color: #3a3320; }
.mini.pin { align-self: stretch; }

.doceditor { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.docbar { display: flex; align-items: center; gap: 8px; }
.docbar .dim { margin-left: auto; }
.doctitle {
  height: 32px; padding: 0 10px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 600;
}
.docbody {
  flex: 1 1 auto;
  min-height: 240px;
  padding: 10px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
  font: 13px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.docbody:focus, .doctitle:focus { outline: none; border-color: var(--accent); }
.docfoot { display: flex; align-items: center; gap: 8px; }
.docfoot .savestate { margin-left: 0; margin-right: auto; }

.docpreview {
  flex: 1 1 auto;
  overflow: auto;
  padding: 4px 2px;
  border-top: 1px solid var(--line-soft);
}
.docpreview h2 { font-size: 16px; margin: 14px 0 6px; }
.docpreview h3 { font-size: 14px; margin: 12px 0 5px; }
.docpreview h4 { font-size: 13px; margin: 10px 0 4px; color: var(--dim); }
.docpreview p { margin: 0 0 8px; }
.docpreview ul, .docpreview ol { margin: 0 0 8px; padding-left: 22px; }
.docpreview li { margin: 2px 0; }
.docpreview code {
  background: #202027; padding: 1px 5px; border-radius: 4px;
  font: 12px ui-monospace, Consolas, monospace;
}
.docpreview blockquote {
  margin: 0 0 8px; padding: 4px 12px;
  border-left: 2px solid var(--line); color: var(--dim);
}
.docpreview a { color: var(--accent); }
.docpreview hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

.conflict {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px;
  background: #2a2118;
  border: 1px solid #4a3a1e;
  border-radius: 6px;
  color: #e8c98a;
  font-size: 12.5px;
}

/* ---------- stratmaker ---------- */
.strathost { display: flex; flex-direction: column; gap: 8px; }
.strattools { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.stratname {
  flex: 1 1 130px; min-width: 100px;
  height: 26px; padding: 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12.5px;
}
.mini.tool.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.stratcanvas {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #101014;
}
.board { display: block; width: 100%; height: auto; touch-action: none; }
.board.tool-draw, .board.tool-arrow { cursor: crosshair; }
.board.tool-text { cursor: text; }
.obj { cursor: grab; }
.obj.sel circle, .obj.sel polyline, .obj.sel line { filter: drop-shadow(0 0 3px var(--accent)); }

.stratpalette { display: flex; flex-direction: column; gap: 6px; }
.palrow { display: flex; flex-wrap: wrap; gap: 5px; }
.palbtn {
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, #888) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #888) 45%, transparent);
  color: var(--c, #888);
  font-size: 11.5px;
  font-weight: 600;
}
.palbtn.on { background: var(--c, #888); color: #0b0b0d; }

/* ---------- share offers ---------- */
.offerlist { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.offer {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  background: #191920;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.offer img { width: 88px; height: 56px; object-fit: cover; border-radius: 4px; flex: none; }
.offertext { flex: 1 1 auto; min-width: 0; }
.offernote { color: var(--dim); font-size: 12px; margin-top: 3px; font-style: italic; }
.offeracts { display: flex; gap: 6px; flex: none; }
.offer.thin { padding: 6px 10px; }
.status { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.status.accepted { color: #7ed07e; border-color: #26402a; }
.status.declined { color: var(--danger); border-color: #3a2626; }
.status.pending  { color: var(--accent); border-color: #43371f; }

/* ---------- crosshair dialog ---------- */
.xhairinput {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 12.5px ui-monospace, Consolas, monospace;
  resize: vertical;
}
.xhairpreview { display: grid; place-items: center; margin: 12px 0 4px; }
/* `position: relative` is load-bearing: the overlay rule below positions any
   `.xhair` absolutely, and without a positioned ancestor the preview escaped
   this box and painted itself across the whole dialog. The preview now uses
   its own class as well, so the two can never be confused again. */
.xhairbox {
  position: relative;
  width: 190px; height: 190px;
  background: repeating-conic-gradient(#1a1a1e 0% 25%, #202026 0% 50%) 0 0 / 22px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid; place-items: center;
  overflow: hidden;
}
.xhairpreviewsvg { display: block; width: 100%; height: 100%; }

/* Which resolution the game was running at, since a stretched 4:3 or 16:10
   setup draws the crosshair wider than it is tall. */
.xhairaspect { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.xhairaspect .mini.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.xhairaspecthint { color: var(--dimmer); font-size: 11.5px; margin: 4px 0 0; }
.xhairgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 14px;
  margin: 14px 0 4px;
}
.xhairgrid label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); }
.xhairgrid label.cb { gap: 6px; }
.xhairgrid input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.xhairgrid input[type="color"] {
  width: 40px; height: 24px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 5px;
}
.xhairgrid output { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.xhairexport { margin-top: 10px; }
.xhairexport summary { cursor: pointer; color: var(--dim); font-size: 12.5px; }
.xhairexport pre {
  margin: 8px 0 0;
  padding: 10px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 11.5px/1.6 ui-monospace, Consolas, monospace;
  overflow-x: auto;
  color: var(--dim);
}

/* ---------- odds and ends ---------- */
.icon.on { color: var(--accent); border-color: var(--accent); }
.centred { text-align: center; }
.dim { color: var(--dim); }
.sm { font-size: 11.5px; }
.grow { flex: 1 1 auto; }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .sidepanel {
    position: fixed;
    top: var(--chrome); right: 0; bottom: 0;
    width: min(440px, 100vw);
    height: auto;
    z-index: 45;
    box-shadow: -18px 0 50px #000a;
  }
}
/* A slider to hunt with and a box to type in, both writing the same number.
   The box is what makes a config's exact value reachable: a 0.1-step slider
   cannot land on 1.5 thickness reliably, and nobody should have to fight it. */
.xhairgrid input.num {
  width: 62px; flex: none;
  padding: 3px 6px;
  font: inherit; font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.xhairgrid input.num:focus { outline: none; border-color: var(--accent); }
.xhairgrid select.num { width: auto; flex: 1 1 auto; min-width: 0; text-align: left; }