/* ============================================================
   Exordium — painted game icons in place of line-art SVG icons.
   Medallions, map markers, path tabs/triptychs. No backdrops.
   Loaded after expansion.css.
   ============================================================ */

/* ---------- medallions (painted icons on a dark plate) ---------- */

.medal {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2a1f10, #0d0a06 70%);
  border: 1px solid rgba(212, 163, 61, 0.45);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.85),
    0 0 0 4px rgba(212, 163, 61, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.medal img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}
.medal img[src*="/tile-"] { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: none; }
.medal-lg { width: 88px; height: 88px; }
.wcard .medal { margin: 0 0 18px; }
.wcard:hover .medal, .pillar:hover .medal {
  transform: translateY(-3px) scale(1.05);
  border-color: var(--gold-bright);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.85), 0 0 0 4px rgba(212, 163, 61, 0.16), 0 0 28px rgba(212, 163, 61, 0.22), 0 10px 26px rgba(0, 0, 0, 0.6);
}
.talk-medal { width: 72px; height: 72px; margin: 0; animation: talkBob 4s ease-in-out infinite; }
@media (max-width: 600px) { .talk-medal { width: 56px; height: 56px; } }

/* class emblems row (world card IV) */
.class-row { display: flex; gap: 8px; margin-bottom: 18px; }
.class-row img {
  width: 56px;
  height: 56px;
  border-radius: 7px;
  border: 1px solid rgba(212, 163, 61, 0.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.class-row img:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 22px rgba(212, 163, 61, 0.3), 0 10px 20px rgba(0, 0, 0, 0.6); z-index: 1; }

/* ---------- town map: real markers ---------- */

.mark-plate {
  fill: #120d07;
  stroke: rgba(212, 163, 61, 0.55);
  stroke-width: 1.2;
  transition: stroke 0.35s ease;
}
.mark-ring {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.map-mark image { transition: transform 0.35s ease; transform-box: fill-box; transform-origin: center; }
.map-mark.is-lit .mark-plate { stroke: var(--gold-bright); filter: url(#hsGlow); }
.map-mark.is-lit .mark-ring { opacity: 0.9; }
.map-mark.is-lit image { transform: scale(1.12); }
.hs-hit { fill: rgba(0, 0, 0, 0.001); }
.map-label { font-size: 12.5px; }

.panel-art {
  width: 104px;
  height: 104px;
  margin-bottom: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2a1f10, #0d0a06 70%);
  border: 1px solid rgba(212, 163, 61, 0.5);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.85), 0 0 0 5px rgba(212, 163, 61, 0.08), 0 0 34px rgba(212, 163, 61, 0.14);
  overflow: hidden;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.panel-art img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)); }
.panel-art img[src*="/tile-"] { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: none; }
.townmap-panel.is-switching .panel-art { opacity: 0; transform: scale(0.9); }
.townmap-panel.is-ashen .panel-art { border-color: rgba(185, 140, 240, 0.6); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.85), 0 0 0 5px rgba(138, 92, 200, 0.1), 0 0 34px rgba(138, 92, 200, 0.22); }

/* ---------- paths: plated icon tabs + triptych art ---------- */

.path-tab { padding: 8px 16px 8px 8px; gap: 12px; }
.path-tab-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 35%, #2a1f10, #0d0a06 72%);
  border: 1px solid rgba(212, 163, 61, 0.35);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  padding: 5px;
}
.path-tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.path-tab-icon img[src*="/tile-"] { object-fit: cover; }
.path-tab.is-active .path-tab-icon { border-color: var(--gold-bright); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 14px rgba(242, 205, 114, 0.35); }
.path-tab.is-active .path-tab-icon img { filter: drop-shadow(0 0 6px rgba(242, 205, 114, 0.6)); }

.path-art { display: flex; flex-direction: column; align-items: center; }
.path-main {
  width: 176px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2a1f10, #0d0a06 72%);
  border: 1px solid rgba(212, 163, 61, 0.5);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.85), 0 0 0 6px rgba(212, 163, 61, 0.07), 0 0 44px rgba(212, 163, 61, 0.16), 0 18px 40px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  animation: mainIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.path-main::before, .path-main::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--gold-bright);
  border-style: solid;
  z-index: 1;
}
.path-main::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.path-main::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.path-main img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.75)); }
.path-main img[src*="/tile-"] { width: 100%; height: 100%; object-fit: cover; filter: none; }
.path-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.path-classes img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; border: 1px solid rgba(212, 163, 61, 0.35); filter: none; }
@keyframes mainIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: none; } }

.path-sats { display: flex; gap: 16px; margin-top: 18px; }
.path-sats span {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #231a0d, #0d0a06 72%);
  border: 1px solid rgba(212, 163, 61, 0.35);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.8), 0 8px 18px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: mainIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.path-sats span:nth-child(2) { animation-delay: 0.1s; }
.path-sats span img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)); }
.path-sats span img[src*="/tile-"] { width: 100%; height: 100%; object-fit: cover; filter: none; }
.path-art.outlaw .path-main, .path-art.outlaw .path-sats span { border-color: rgba(138, 92, 200, 0.5); }
.path-art.outlaw .path-main { box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.85), 0 0 0 6px rgba(138, 92, 200, 0.08), 0 0 44px rgba(138, 92, 200, 0.2), 0 18px 40px rgba(0, 0, 0, 0.6); }
@media (max-width: 820px) {
  .path-main { width: 140px; height: 140px; }
  .path-sats span { width: 56px; height: 56px; }
}

/* ---------- banners: crossed swords between the crests, war block icons ---------- */

.faction-vs { overflow: hidden; }
.faction-vs img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.war-icon img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(212, 163, 61, 0.4); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); }
.war-icon img[src*="map-"] { object-fit: contain; border: none; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .path-main, .path-sats span, .talk-medal { animation: none !important; }
}