/* ============================================
   TAT26.CSS — Tricks and Treats 2026 Festival
   Dark Halloween theme: glowing orange, gold accents.
   Structural block CSS lives in shared/platform.css.
   This file: color tokens, tat26 callout variants, map block.
   ============================================ */

/* ── Tricks & Treats 2026 palette ── */
:root {
  --tat-primary:       #ff8c00;
  --tat-accent:        #ffd700;
  --tat-bg:            #0a0a0a;
  --tat-surface:       #141414;
  --tat-surface2:      #1e1e1e;
  --tat-text:          #f0f0f0;
  --tat-text-muted:    #999;
  --tat-border-color:  #ff8c00;
  --tat-border-style:  solid;
  --tat-border-color-2:  #9333ea;
  --tat-border-width-2:  3px;
  --tat-border-radius-2: 12px;
  --tat-border-style-2:  solid;
  --tat-border-color-3:  #22c55e;
  --tat-border-width-3:  1px;
  --tat-border-radius-3: 8px;
  --tat-border-style-3:  solid;
  --tat-border-width:  3px;
  --tat-border-radius: 12px;
  --tat-font-family:   'Enchanted Land', Georgia, serif;
  --tat-nav-height:    64px;
  --tat-glow:          0 0 12px rgba(255, 140, 0, 0.45);
  --tat-glow-accent:   0 0 10px rgba(255, 215, 0, 0.4);
  --tat-transition:    0.2s ease;
  --tat-hero-radius:   18px;
  --tat-card-radius:   16px;
}

/* ── TaT26-specific callout variants ── */
.tat-callout--gold {
  background: rgba(255,215,0,0.1);
  border-left-color: #ffd700;
}

.tat-callout--spooky {
  background: rgba(128,0,128,0.12);
  border-left-color: #9b30ff;
}

.tat-callout--gold .tat-callout__title {
  color: #c8a800;
}

.tat-callout--spooky .tat-callout__title {
  color: #9b30ff;
}

/* ============================================================
   MAP BLOCK — tat26/Goblet specific
   ============================================================ */

.tat-map-container {
  position: relative;
  width: 100%;
  user-select: none;
}

.tat-map-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--tat-border-radius);
  border: var(--tat-border-width) var(--tat-border-style) var(--tat-border-color);
}

.tat-map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tat-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  pointer-events: auto;
  outline: none;
}

.tat-pin-body {
  background: var(--tat-map-pin-bg, rgba(10, 10, 10, 0.88));
  border: 2px solid var(--tat-map-pin-border, var(--tat-primary));
  border-radius: 12px;
  padding: 7px 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background var(--tat-transition), box-shadow var(--tat-transition), transform var(--tat-transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  min-width: 39px;
}

.tat-map-pin:hover,
.tat-map-pin:focus-visible {
  z-index: 10;
}

.tat-map-pin:hover .tat-pin-body,
.tat-map-pin:focus-visible .tat-pin-body {
  background: var(--tat-map-pin-border, var(--tat-primary));
  box-shadow: var(--tat-glow);
  transform: scale(1.2);
}

.tat-pin-icons {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--tat-map-pin-icon, #e8e8e8);
  font-size: 1.17rem;
  line-height: 1;
  pointer-events: none;
}

.tat-map-pin:hover .tat-pin-icons,
.tat-map-pin:focus-visible .tat-pin-icons {
  color: #fff;
}

.tat-pin-num {
  font-size: 0.78rem;
  color: var(--tat-map-pin-icon, rgba(255, 255, 255, 0.6));
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.tat-map-pin:hover .tat-pin-num,
.tat-map-pin:focus-visible .tat-pin-num {
  color: rgba(255, 255, 255, 0.75);
}

.tat-map-pin--dimmed .tat-pin-body {
  opacity: 0.35;
  filter: grayscale(0.6);
  transition: opacity 0.18s, filter 0.18s;
}

.tat-map-pin--dimmed:hover .tat-pin-body,
.tat-map-pin--dimmed:focus-visible .tat-pin-body {
  opacity: 0.7;
}

.tat-map-pin--hidden {
  display: none;
}

/* ============================================================
   MAP MODAL — tat26 accent overrides only
   (layout/structure is in shared/platform.css)
   ============================================================ */

.tat-pmodal-box.tat-mmodal-box {
  border-color: var(--tat-modal-border-color, var(--tat-map-modal-border, var(--tat-border-color)));
  border-width: var(--tat-modal-border-width, var(--tat-border-width));
  border-radius: var(--tat-modal-border-radius, var(--tat-border-radius));
}

.tat-pmodal-box.tat-mmodal-box .tat-pmodal-type-badge {
  color: var(--tat-map-accent, var(--tat-primary));
  border-color: var(--tat-map-accent, var(--tat-primary));
}

.tat-pmodal-box.tat-mmodal-box .tat-pmodal-close {
  color: var(--tat-map-accent, var(--tat-primary));
  outline: none;
}

.tat-pmodal-box.tat-mmodal-box .tat-pmodal-close:hover {
  color: var(--tat-map-accent, var(--tat-primary));
}

/* ── Calibration-mode states ── */

.tat-map-pin--ghost .tat-pin-body {
  background: rgba(10, 10, 10, 0.55);
  border-color: rgba(255, 140, 0, 0.35);
  border-style: dashed;
}

.tat-pin-num--ghost {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
}

.tat-calib-sel .tat-pin-body {
  background: #ff8c00;
  border-color: #ffd700;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4), var(--tat-glow);
  transform: scale(1.25);
}

/* ── Map landmark pins (aetheryte shards, apartments) ── */
.tat-map-landmark {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: default;
  z-index: 3;
}

.tat-map-landmark i {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.82rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s, box-shadow 0.15s;
}

.tat-map-landmark:hover i {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.tat-map-landmark--aetheryte i {
  background: #1a6fa8;
  color: #a8d8f0;
  border-color: #5bb3e0;
}

.tat-map-landmark--apartments i {
  background: #6b4a9b;
  color: #d4b8f0;
  border-color: #9b6fe0;
}

.tat-landmark-label {
  margin-top: 3px;
  padding: 4px 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.82);
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  letter-spacing: 0.01em;
}

.tat-map-landmark:hover .tat-landmark-label {
  opacity: 1;
}

.tat-map-container[data-calib] .tat-map-landmark {
  cursor: pointer;
}

.tat-map-container[data-calib] .tat-map-landmark .tat-landmark-label {
  opacity: 1;
}

.tat-map-container[data-calib] .tat-map-landmark.tat-calib-sel i {
  box-shadow: 0 0 0 3px #ff8c00;
  transform: scale(1.2);
}

/* ── Map legend ── */
.tat-map-legend-btn {
  position: absolute;
  z-index: 20;
  background: rgba(10, 10, 10, 0.85);
  border: 2px solid var(--tat-map-pin-border, var(--tat-primary));
  border-radius: 999px;
  color: var(--tat-map-pin-border, var(--tat-primary));
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: background 0.18s, color 0.18s, transform 0.15s;
}

.tat-map-legend-btn i {
  font-size: 1.1rem;
}

.tat-map-legend-btn:hover,
.tat-map-legend-btn:focus-visible {
  background: var(--tat-map-pin-border, var(--tat-primary));
  color: #000;
  transform: scale(1.05);
  outline: none;
}

.tat-map-legend {
  display: none;
  position: absolute;
  z-index: 30;
  background: rgba(10, 10, 10, 0.94);
  border: 1.5px solid var(--tat-map-pin-border, var(--tat-primary));
  border-radius: 10px;
  padding: 0.8rem 1rem;
  min-width: 260px;
  max-width: 90vw;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.tat-map-legend.tat-map-legend--open {
  display: block;
}

.tat-map-legend-cols {
  display: flex;
  gap: 1.25rem;
}

.tat-map-legend-col {
  flex: 1;
}

.tat-map-legend-col h4 {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tat-map-pin-border, var(--tat-primary));
  margin: 0 0 0.45rem;
}

.tat-map-legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--tat-text, #e8e8e8);
  padding: 0.25rem 0.4rem;
  width: 100%;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.tat-map-legend-row:hover,
.tat-map-legend-row:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.tat-map-legend-row--active {
  background: var(--tat-map-pin-border, var(--tat-primary));
  color: #000;
  font-weight: 700;
}

.tat-map-legend-row--active i {
  color: #000;
}

.tat-map-legend-row i {
  width: 14px;
  text-align: center;
  color: var(--tat-map-pin-icon, #e8e8e8);
  font-size: 0.85rem;
}

.tat-map-legend-empty {
  font-size: 0.78rem;
  color: var(--tat-text-muted, rgba(255,255,255,0.45));
  font-style: italic;
}