/* Vision & spell areas (vision-aoe): line of sight on the GM map. Behind Settings > GM test features. */
.dm-map-grid .los-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.los-shade .los-dim { fill: #08080a; fill-opacity: 0.62; }
.dm-map-grid.los-solo .los-shade .los-dim { fill-opacity: 0.7; }
.dm-map-grid .map-token.los-unseen { opacity: 0.62; filter: saturate(0.45) brightness(0.8); }
.dm-map-grid .map-token .los-tag {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px);
  font: 600 9px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.02em;
  color: #ffb3b3; background: rgba(12, 12, 16, 0.86); border: 1px solid rgba(255, 140, 140, 0.55);
  border-radius: 999px; padding: 1px 6px; white-space: nowrap; pointer-events: none; z-index: 3;
}
.dm-map-grid .map-token.los-unseen .map-token-caption { display: none; }

/* pressed: the app's brass ring (the Hearth palette's [aria-pressed] rule), the eye stays gold */
.gm2-iconbtn.los-btn.on { color: var(--gm-gold, #f0d59a); }
.gm2-stage .los-fab { display: none; }

.los-panel {
  position: absolute; z-index: 30; right: 12px; top: 12px; width: 236px; max-width: calc(100% - 24px);
  padding: 14px 14px 12px; border-radius: 16px;
  background: rgba(25, 25, 28, 0.97); border: 1px solid var(--gm-line, #2c2c31);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); color: #f3ead8;
  font: 14px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.los-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.los-head b { font-size: 17px; color: var(--gm-gold, #e9bd62); }
.los-x { width: 36px; height: 36px; margin: -6px -6px -6px 0; border: 0; background: none; color: #cfc6b2; font-size: 22px; border-radius: 10px; }
.los-switch {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 16px; border-radius: 999px; border: 1px solid var(--gm-line, #2c2c31);
  background: #141417; color: #f3ead8; font: 600 14px/1 inherit; font-family: inherit;
}
.los-switch.on { background: linear-gradient(#f6e2a8, #e0b45a 55%, #c8963f); border-color: #f3e2b0; color: #17171a; }
.los-switch b { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.los-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.los-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 10px;
  border: 1px solid transparent; background: none; color: #f3ead8; font: 14px/1.2 inherit; font-family: inherit; text-align: left;
}
.los-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.los-row em { font-style: normal; color: #b9b0a0; font-size: 12px; }
.los-row.on { background: rgba(233, 189, 98, 0.12); border-color: rgba(233, 189, 98, 0.55); }
.los-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
.los-dot.all { background: #f3ead8; }
.los-legend { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gm-line, #2c2c31); color: #b9b0a0; font-size: 12.5px; }
.los-note { margin: 10px 2px 0; color: #b9b0a0; font-size: 13px; }

/* phones: the panel is a sheet across the bottom of the map, above the wheel */
@media (max-width: 719px) {
  .gm2-top .los-btn { display: none; }
  .gm2-stage .los-fab { display: inline-flex; position: absolute; left: 10px; top: 124px; z-index: 6; border-radius: 50%; background: rgba(20, 20, 23, 0.92); border-color: var(--gm-line, #2c2c31); }
  .los-panel { left: 8px; right: 8px; top: auto; bottom: 112px; width: auto; max-width: none; padding: 10px 12px; }
  .los-panel.min { left: auto; right: 8px; padding: 6px 6px 6px 8px; }
  .los-panel.min .los-switch { min-width: 150px; padding: 0 12px; }
  .los-head { margin-bottom: 6px; }
  .los-list { flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; scrollbar-width: none; }
  .los-list::-webkit-scrollbar { display: none; }
  .los-row { flex: none; padding: 0 12px 0 8px; border-color: var(--gm-line, #2c2c31); border-radius: 999px; }
  .los-row span { overflow: visible; }
  .los-legend { flex-direction: row; flex-wrap: wrap; column-gap: 12px; margin-top: 8px; padding-top: 8px; font-size: 12px; }
}

/* 2 Nov review: a clearer "unseen" tag, a foldable panel */
.dm-map-grid .map-token.los-unseen { opacity: 0.8; filter: saturate(0.5) brightness(0.85); outline: 2px dashed rgba(255, 150, 150, 0.95); outline-offset: 3px; }
.dm-map-grid .map-token .los-tag {
  font: 700 11px/1.15 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.03em;
  color: #fff; background: #b3283a; border: 1px solid #ffb3b3; padding: 2px 8px 2px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); display: inline-flex; align-items: center; gap: 4px; transform: translate(-50%, 5px); z-index: 4;
}
.dm-map-grid .map-token .los-tag svg { width: 12px; height: 12px; flex: none; }
.los-hbtns { display: inline-flex; gap: 2px; }
.los-head .los-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -8px -10px 0; }
.los-panel.min { width: auto; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; border-radius: 999px; }
.los-panel.min .los-switch { width: auto; min-width: 168px; }
.los-panel.min .los-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; }
.los-minwho { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
.los-minwho .los-dot { width: 12px; height: 12px; }

/* step 2: darkvision, light, auras */
.los-shade .los-dim.dark { fill-opacity: 0.78; }
.dm-map-grid .los-rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dm-map-grid .los-carry { position: absolute; pointer-events: none; }
.dm-map-grid .los-carry svg { position: absolute; inset: 0; overflow: visible; }
.los-ring { fill: none; }
.los-ring.dv { stroke: #c9ccd3; stroke-opacity: 0.7; stroke-width: 1.6; stroke-dasharray: 7 5; }
.los-ring.dim { stroke: #fff6dc; stroke-opacity: 0.22; stroke-width: 1; stroke-dasharray: 2 4; }
.los-ring.bright { stroke: none; }
.los-ring.aura { stroke: #f0d59a; stroke-opacity: 0.6; stroke-width: 1.6; }
.los-amb { margin: 10px 2px 0; color: #cfc6b2; font-size: 12.5px; }
.los-row em.lit { color: #f0d59a; }
.los-detail { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: #141417; border: 1px solid var(--gm-line, #2c2c31); display: flex; flex-direction: column; gap: 4px; }
.los-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #f3ead8; }
.los-key { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.los-key.dv { border: 1.6px dashed #c9ccd3; }
.los-key.aura { border: 2px solid #f0d59a; background: radial-gradient(circle, transparent 50%, rgba(240, 213, 154, 0.35)); }
.los-key.light { background: radial-gradient(circle, #fff2c8 0 35%, rgba(255, 230, 163, 0.35) 36% 100%); }
.los-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.los-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gm-line, #2c2c31); background: #19191c; color: #f3ead8; font: 600 13px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.los-chip.on { color: var(--gm-gold, #f0d59a); }
@media (max-width: 719px) {
  .los-chip { padding: 0 12px; }
}

/* 2 Nov review: a shorter panel, so it can find a spot clear of the tokens */
.los-panel { width: 272px; padding: 12px 12px 10px; }
.los-head { margin-bottom: 8px; }
.los-amb { margin-top: 8px; }
.los-list { margin-top: 6px; gap: 0; }
.los-row { min-height: 44px; }
.los-legend { display: grid; grid-template-columns: auto auto; column-gap: 8px; row-gap: 2px; margin-top: 8px; padding-top: 8px; font-size: 12px; }
.los-legend .wide { grid-column: 1 / -1; }
@media (max-width: 719px) { .los-legend .wide { display: none; } .los-panel { width: auto; } }

/* discovered: players see a blank token there */
.dm-map-grid .map-token.los-unseen.los-found { outline-color: rgba(240, 213, 154, 0.95); }
.dm-map-grid .map-token .los-tag.found { background: #f0d59a; color: #17171a; border-color: #fff1d6; }

/* step 3: spell areas */
.dm-map-grid .los-aims { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.dm-map-grid .los-aims svg { position: absolute; inset: 0; overflow: visible; }
.los-aim > * { fill: rgba(240, 213, 154, 0.18); stroke: #f0d59a; stroke-width: 2.5; stroke-dasharray: 8 5; animation: losAimDash 1.2s linear infinite; }
@keyframes losAimDash { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .los-aim > * { animation: none; } }
.dm-map-grid .los-aim-tag { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgba(20, 20, 23, 0.94); border: 1px solid #f0d59a; color: #f3ead8; font: 600 12px/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.dm-map-grid .map-token.los-aim-in, .dm-map-grid .map-token.los-in-area { box-shadow: 0 0 0 3px #f0d59a, 0 0 14px 4px rgba(240, 213, 154, 0.75) !important; }

/* step 4: pushes */
.dm-map-grid .los-push-map { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
.los-push-map line { stroke: #f0d59a; stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
.los-push-map .land { fill: rgba(240, 213, 154, 0.12); stroke: #f0d59a; stroke-width: 2; stroke-dasharray: 5 4; }
.los-pushpanel {
  position: absolute; z-index: 31; left: 12px; top: 12px; width: 340px; max-width: calc(100% - 24px);
  padding: 12px; border-radius: 16px; background: rgba(25, 25, 28, 0.97); border: 1px solid #f0d59a;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); color: #f3ead8; font: 14px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.los-pushpanel .los-head { display: flex; align-items: baseline; gap: 10px; justify-content: flex-start; }
.los-psub { color: #cfc6b2; font-size: 12.5px; }
.los-prows { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-height: 40vh; overflow: auto; }
.los-prow { display: flex; align-items: center; gap: 8px; }
.los-pwho { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.los-pwho b { font-size: 14px; }
.los-pwho span { color: #b9b0a0; font-size: 12px; }
.los-pacts { display: flex; gap: 8px; margin-top: 10px; }
.los-pbtn { flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid var(--gm-line, #2c2c31); background: #141417; color: #f3ead8; font: 600 14px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.los-pbtn.go { background: linear-gradient(#f6e2a8, #e0b45a 55%, #c8963f); color: #17171a; border-color: #f3e2b0; }
.los-pbtn:disabled { opacity: 0.5; }
@media (max-width: 719px) { .los-pushpanel { top: auto; bottom: 112px; left: 8px; right: 8px; width: auto; padding: 10px 12px; } .los-prows { max-height: 26vh; } .los-pushpanel .los-note { display: none; } }

/* lingering spells at the start of a turn */
.los-tick { border-color: #f0d59a; }
.los-tdmg { width: 64px; min-height: 44px; border-radius: 10px; border: 1px solid var(--gm-line, #2c2c31); background: #141417; color: #f3ead8; font: 600 15px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: center; }
.los-tick .los-head { flex-wrap: wrap; row-gap: 2px; }
.los-tick .los-head b { font-size: 16px; }
.los-ring.cone { stroke: #fff6dc; stroke-opacity: 0.3; stroke-width: 1; stroke-dasharray: 2 4; }