/* ===================================================================
   dmtools.css — styles for DM authoring tools
     · custom-character composer   · staged-tray notes
     · shared YouTube audio bar     · map geofences
   Uses the Embers tokens (parchment / leather / candlelight).
   =================================================================== */

/* ---------------- Encounter tray: custom foes & notes ---------------- */
.tray-main { display: flex; align-items: center; gap: 9px; }
.tray-actions { display: flex; gap: 5px; margin-left: auto; }
.tray-row { flex-direction: column; align-items: stretch; gap: 7px; }
.tray-row.ally { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--forest) 60%, transparent); }
.tray-row.ally.shown { box-shadow: inset 0 0 0 1px var(--forest), 0 0 10px rgba(63,125,74,.25); }
.side-pip { font-family: var(--font-display); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  margin-left: 7px; padding: 1px 6px; border-radius: 4px; vertical-align: middle; }
.side-pip.enemy { background: color-mix(in srgb, var(--wine-br) 30%, transparent); color: #ffd9dc; }
.side-pip.ally  { background: color-mix(in srgb, var(--forest) 38%, transparent); color: #d6f3da; }
.side-pip.boss  { background: linear-gradient(180deg, #d36aa6, #a23576); color: #fff; box-shadow: 0 0 8px rgba(211,106,166,.5); }
.tray-row.boss { box-shadow: inset 0 0 0 1px color-mix(in srgb, #c2568a 55%, transparent); }
.tray-row.boss.shown { box-shadow: inset 0 0 0 1px #c2568a, 0 0 12px rgba(194,86,138,.3); }
.tray-row.boss .tray-sprite { box-shadow: 0 0 0 2px #c2568a, 0 0 10px rgba(194,86,138,.45); }
.flip-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(0,0,0,.4);
  background: rgba(0,0,0,.3); color: var(--parchment-light); font-size: 15px; }
.flip-btn:hover { background: rgba(193,147,63,.22); }
.tray-notes { list-style: none; margin: 0; padding: 6px 8px 4px 30px; display: flex; flex-direction: column; gap: 3px;
  background: rgba(0,0,0,.22); border-radius: 7px; border: 1px dashed rgba(184,147,100,.35); }
.tray-notes li { position: relative; font-size: 12px; line-height: 1.35; color: var(--parchment-dark);
  font-style: italic; }
.tray-notes li::before { content: "•"; position: absolute; left: -14px; color: var(--gold-bright); font-style: normal; }
.tray-add { width: 100%; margin-top: 10px; background: none; border: 1px dashed var(--leather-stitch);
  border-radius: 8px; padding: 9px; color: var(--parchment-dark); font-family: var(--font-body); font-size: 13px; }
.tray-add:hover { background: rgba(193,147,63,.14); color: var(--parchment-light); }
.mon-tag.ally { color: var(--forest); background: color-mix(in srgb, var(--forest) 16%, transparent); }

/* ---------------- Character composer modal ---------------- */
.composer-card { width: min(560px, 94vw); max-height: 92vh; overflow-y: auto; overflow-x: hidden; padding: 22px 24px; border-radius: 14px;
  box-shadow: var(--shadow-deep); }
.composer-hd { display: flex; align-items: center; justify-content: space-between; }
.composer-x { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--parchment-edge);
  background: transparent; color: var(--ink-soft); font-size: 15px; }
.composer-x:hover { background: rgba(0,0,0,.06); }
.composer-title { font-size: 26px; margin: 2px 0 14px; color: var(--ink); }

.side-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.side-toggle button { flex: 1; padding: 10px; border-radius: 9px; font-family: var(--font-display);
  font-size: 13px; letter-spacing: .04em; border: 2px solid var(--parchment-edge);
  background: var(--parchment-light); color: var(--ink-soft); }
.side-enemy.on { border-color: var(--wine-br); background: color-mix(in srgb, var(--wine-br) 16%, var(--parchment-light));
  color: var(--wine); box-shadow: 0 0 0 1px var(--wine-br); }
.side-ally.on { border-color: var(--forest); background: color-mix(in srgb, var(--forest) 16%, var(--parchment-light));
  color: var(--forest); box-shadow: 0 0 0 1px var(--forest); }

.stat-row { display: flex; gap: 8px; }
.stat-row label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.stat-row input, .stat-row select { width: 100%; min-width: 0; font-family: var(--font-body); font-size: 14px; padding: 9px 8px; border-radius: 7px;
  border: 1px solid var(--parchment-edge); background: var(--parchment-light); color: var(--ink); }
.reveal-field { flex: 2.2; }

.sprite-pick { margin: 4px 0 12px; }
.sprite-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sprite-chip { width: 38px; height: 38px; border-radius: 9px; font-size: 20px; border: 1px solid var(--parchment-edge);
  background: var(--parchment-light); display: grid; place-items: center; }
.sprite-chip.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-bright); transform: scale(1.06); }

.notes-block { margin: 6px 0 16px; display: flex; flex-direction: column; gap: 7px; }
.notes-block .eyebrow { margin-bottom: 2px; }
.note-input-row { display: flex; align-items: center; gap: 8px; }
.note-bullet { color: var(--gold-deep); font-size: 18px; line-height: 1; width: 10px; text-align: center; }
.note-input-row .lobby-input { margin: 0; }

/* ---------------- Geofence config modal ---------------- */
.geo-card { width: min(520px, 94vw); }
.geo-sub { font-size: 13px; color: var(--ink-soft); font-style: italic; margin: -6px 0 16px; }
.geo-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.geo-field input[type="range"] { accent-color: var(--gold-deep); }
.geo-field .lobby-input { margin: 0; }
.geo-narr { resize: vertical; font-family: var(--font-body); }
.lobby-input.bad { border-color: var(--wine-br); box-shadow: 0 0 0 1px var(--wine-br); }
.geo-warn, .geo-field .geo-warn { color: var(--wine); font-size: 12px; font-style: italic; }
.geo-once { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); margin-bottom: 16px; cursor: pointer; }
.geo-once input { width: 17px; height: 17px; accent-color: var(--gold-deep); }
.geo-once i { color: var(--ink-faint); font-size: 12px; }

/* ---------------- Shared YouTube audio bar ---------------- */
.yt-sink { position: fixed; width: 1px; height: 1px; left: -9999px; top: -9999px; overflow: hidden; opacity: 0; pointer-events: none; }
.yt-wrap { position: fixed; z-index: 95; }
.yt-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 12px;
  color: var(--parchment-light); box-shadow: var(--shadow-deep); }

/* equaliser */
.yt-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 18px; }
.yt-eq i { width: 3px; height: 5px; background: var(--gold-bright); border-radius: 2px; opacity: .55; }
.yt-eq.on i { animation: eqBounce .9s ease-in-out infinite; opacity: 1; }
.yt-eq.on i:nth-child(2) { animation-delay: .25s; }
.yt-eq.on i:nth-child(3) { animation-delay: .5s; }
@keyframes eqBounce { 0%,100% { height: 5px; } 50% { height: 17px; } }

.yt-now { display: flex; flex-direction: column; min-width: 0; }
.yt-kind { font-family: var(--font-display); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); }
.yt-title { font-size: 13.5px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-idle { font-size: 13px; color: var(--parchment-dark); font-style: italic; }

.yt-transport { display: flex; align-items: center; gap: 4px; }
.yt-ctl { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(0,0,0,.4);
  background: rgba(0,0,0,.28); color: var(--parchment-light); font-size: 12px; display: grid; place-items: center; }
.yt-ctl:hover { background: rgba(193,147,63,.24); }
.yt-vol { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.yt-vol input { width: 70px; accent-color: var(--gold-deep); }

.yt-add-wrap { position: relative; }
.yt-add { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; color: #2a1c08;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); border: 1px solid var(--gold-deep);
  border-radius: 8px; padding: 7px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.yt-add:hover { filter: brightness(1.06); }
.yt-pop { position: absolute; bottom: 46px; right: 0; width: 320px; padding: 12px; border-radius: 11px;
  box-shadow: var(--shadow-deep); color: var(--ink); z-index: 5; }
.yt-tape .yt-pop, .yt-pill .yt-pop { bottom: auto; top: 46px; }
.yt-input { width: 100%; font-family: var(--font-body); font-size: 13px; padding: 9px 10px; margin: 8px 0;
  border-radius: 7px; border: 1px solid var(--parchment-edge); background: var(--parchment-light); color: var(--ink); }
.yt-pop-actions { display: flex; gap: 8px; }
.yt-pop-actions .btn { flex: 1; }
.yt-hint { color: var(--wine); font-size: 12px; font-style: italic; margin-top: 8px; }
.yt-tip { color: var(--ink-faint); font-size: 11.5px; line-height: 1.4; margin-top: 8px; }
.yt-dm-flag { font-family: var(--font-display); font-size: 9px; letter-spacing: .12em; color: var(--gold-bright);
  border: 1px solid rgba(232,195,114,.4); border-radius: 5px; padding: 2px 6px; }

/* variant: bar — wide leather dock, bottom centre */
.yt-bar.yt-wrap, .yt-wrap.yt-bar { left: 50%; bottom: 18px; transform: translateX(-50%); }
.yt-wrap.yt-bar .yt-bar { min-width: 420px; }

/* variant: pill — compact, bottom left */
.yt-wrap.yt-pill { left: 24px; bottom: 18px; }
.yt-wrap.yt-pill .yt-bar { border-radius: 999px; padding: 7px 10px 7px 14px; gap: 9px; }
.yt-wrap.yt-pill .yt-vol, .yt-wrap.yt-pill .yt-ctl[title="Next track"] { display: none; }
.yt-wrap.yt-pill .yt-title { max-width: 150px; }

/* variant: tape — parchment "now playing" card, bottom centre */
.yt-wrap.yt-tape { left: 50%; bottom: 18px; transform: translateX(-50%); }
.yt-wrap.yt-tape .yt-bar { flex-direction: column; align-items: stretch; gap: 9px; min-width: 320px;
  background: var(--surface); background-image:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.4), transparent 55%); color: var(--ink); }
.yt-wrap.yt-tape .yt-kind { color: var(--gold-deep); }
.yt-wrap.yt-tape .yt-idle, .yt-wrap.yt-tape .yt-title { color: var(--ink); }
.yt-wrap.yt-tape .yt-title { font-family: var(--font-display); max-width: 320px; }
.yt-wrap.yt-tape .yt-eq { position: absolute; }
.yt-wrap.yt-tape .yt-bar { position: relative; padding-left: 36px; }
.yt-wrap.yt-tape .yt-eq i { background: var(--gold-deep); }
.yt-wrap.yt-tape .yt-ctl { background: rgba(0,0,0,.08); color: var(--ink); border-color: var(--parchment-edge); }
.yt-wrap.yt-tape .yt-transport { justify-content: space-between; }

@media (max-width: 760px) {
  .yt-wrap.yt-bar .yt-bar, .yt-wrap.yt-tape .yt-bar { min-width: 0; }
  .yt-wrap.yt-bar, .yt-wrap.yt-tape { width: 92vw; }
  .yt-vol { display: none; }
}

/* ---------------- Map geofences (DM-only) ---------------- */
.geofence { position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; z-index: 16; display: grid; place-items: center; }
.geofence.draft { opacity: .5; }
.geofence.spent { opacity: .28; filter: grayscale(.6); }
.geo-core { position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 10px 3px rgba(232,195,114,.7); }
.geo-tag { font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; color: #fff;
  background: rgba(20,16,10,.7); padding: 2px 8px; border-radius: 6px; transform: translateY(-2px); white-space: nowrap; }

/* style: ring — dashed glowing outline */
.geo-ring { border: 2.5px dashed var(--gold-bright); background: radial-gradient(circle, rgba(232,195,114,.1), transparent 70%);
  box-shadow: 0 0 18px rgba(232,195,114,.35), inset 0 0 22px rgba(232,195,114,.18); animation: geoPulse 2.6s ease-in-out infinite; }

/* style: rune — twin rotating sigil rings */
.geo-rune { background: radial-gradient(circle, rgba(91,127,208,.12), transparent 72%); }
.geo-rune::before, .geo-rune::after { content: ""; position: absolute; inset: 6%; border-radius: 50%;
  border: 2px solid var(--arcane); opacity: .8; }
.geo-rune::before { border-style: dashed; animation: geoSpin 9s linear infinite; }
.geo-rune::after { inset: 20%; border-style: dotted; border-color: var(--gold-bright); animation: geoSpin 6s linear infinite reverse; }

/* style: zone — soft filled glow */
.geo-zone { background: radial-gradient(circle, rgba(194,86,100,.32), rgba(194,86,100,.12) 55%, transparent 75%);
  border: 1.5px solid rgba(221,120,134,.5); box-shadow: inset 0 0 30px rgba(194,86,100,.3); animation: geoPulse 3s ease-in-out infinite; }

@keyframes geoPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
@keyframes geoSpin { to { transform: rotate(360deg); } }

/* trigger burst — a shimmer everyone sees */
.geo-burst { position: absolute; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%;
  z-index: 40; pointer-events: none; border: 3px solid var(--gold-bright);
  box-shadow: 0 0 24px 8px rgba(232,195,114,.6); animation: burst 1.5s ease-out forwards; }
@keyframes burst {
  0% { width: 8px; height: 8px; opacity: 0; }
  18% { opacity: 1; }
  100% { width: var(--gr); height: var(--gr); opacity: 0; border-width: 1px; }
}

/* ---------------- DM fog-reveal curtain slider ---------------- */
.fog-curtain { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 22;
  display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 10px;
  color: var(--parchment-light); box-shadow: var(--shadow-deep); }
.fc-label { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-bright); line-height: 1.15; text-align: right; }
.fc-dirs { display: flex; gap: 3px; }
.fc-dir { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(0,0,0,.4);
  background: rgba(0,0,0,.28); color: var(--parchment-light); font-size: 15px; display: grid; place-items: center; line-height: 1; }
.fc-dir:hover { background: rgba(193,147,63,.22); }
.fc-dir.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: #2a1c08;
  box-shadow: 0 0 10px rgba(232,195,114,.4); }
.fc-slider { width: 150px; accent-color: var(--gold-bright); }
.fc-pct { font-family: var(--font-display); font-size: 12px; color: var(--gold-bright); min-width: 34px; text-align: center; }
.fc-quick { display: flex; gap: 4px; }
.fc-quick button { font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--parchment-light); background: rgba(0,0,0,.28); border: 1px solid rgba(0,0,0,.4); border-radius: 6px; padding: 6px 9px; }
.fc-quick button:hover { background: rgba(193,147,63,.22); }

@media (max-width: 760px) {
  .fog-curtain { flex-wrap: wrap; max-width: 92vw; gap: 7px; }
  .fc-slider { width: 110px; }
}

/* ---------------- Interactive POI markers (overview maps) ---------------- */
.poi-pin-wrap { position: absolute; z-index: 19; width: 0; height: 0; }
.poi-pin { position: absolute; left: 0; top: 0; transform-origin: center center;
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: #fff; font-family: var(--font-display); font-size: 17px; line-height: 1;
  background: radial-gradient(circle, rgba(232,195,114,.35), rgba(40,20,10,.62));
  border: 2px solid var(--gold-bright); box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 14px rgba(232,195,114,.55);
  animation: poiPulse 2.3s ease-in-out infinite; }
.poi-pin:hover { background: radial-gradient(circle, rgba(232,195,114,.6), rgba(60,30,12,.78)); }
.poi-pin.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: #2a1c08;
  box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 0 22px rgba(232,195,114,.85); animation: none; }
@keyframes poiPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 9px rgba(232,195,114,.4); }
  50%     { box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 20px rgba(232,195,114,.8); }
}
.poi-num { pointer-events: none; }
.poi-card { position: absolute; left: 0; top: -26px; transform-origin: bottom center; width: 236px;
  padding: 12px 14px 13px; border-radius: 11px; z-index: 42; color: var(--ink);
  background: linear-gradient(180deg, #f3e7c9, #e7d6ad); border: 1px solid var(--gold-deep);
  box-shadow: var(--shadow-deep); }
.poi-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.poi-card-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: #2a1c08;
  font-family: var(--font-display); font-size: 13px; }
.poi-card-hd b { font-family: var(--font-display); font-size: 16px; color: var(--ink); letter-spacing: .01em; }
.poi-card p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.poi-card-tip { position: absolute; left: 50%; bottom: -7px; width: 13px; height: 13px;
  transform: translateX(-50%) rotate(45deg); background: #e7d6ad;
  border-right: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }