/* ============================
   AERYNDOR MAP — FULL CSS
   + Auto-sized emblems by hierarchy
   + Subtle emblem animation
   ============================ */

:root{
  --bg:#0b0b12;
  --panel:rgba(255,255,255,.05);
  --panel-strong:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);

  /* emblem sizing per hierarchy */
  --em-world: 34px;
  --em-region: 28px;
  --em-settlement: 22px;

  /* animation strengths */
  --floatA: 2px;
  --floatB: 3px;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
}

body{
  background:transparent;
  color:var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height:1.45;
}

/* Root container */
.am{
  width:100%;
  padding:14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
}

/* ============================
   Header
   ============================ */

.am__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.am__eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.6);
  text-transform:uppercase;
}

.am__title{
  margin:6px 0 0;
  font-size:32px;
}

.am__sub{
  margin:6px 0 0;
  color:var(--muted);
  max-width:860px;
}

.am__controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Buttons */
.am__btn{
  padding:9px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}

.am__btn:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
}

.am__btn--primary{
  background:rgba(255,255,255,.12);
}

/* ============================
   Search
   ============================ */

.am__searchRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:12px;
}

.am__q{
  width:460px;
  max-width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:0;
  flex:1 1 260px;
}

/* ============================
   Map Panel
   ============================ */

.am__mapPanel{
  border:1px solid var(--line);
  background:rgba(0,0,0,.14);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
  transition:max-height .28s ease, opacity .28s ease;
}

.am__mapWrap{
  width:100%;
  height:min(62vh, 720px);
  background:#000;
}

.am__map{
  width:100%;
  height:100%;
  border:0;
}

/* Expanded map mode */
.am--full .am__mapWrap{
  height:min(88vh, 980px);
}

.am__mapHint{
  padding:10px 12px;
  font-size:12px;
  color:rgba(255,255,255,.62);
  border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.10);
}

/* Collapsed map */
.am__mapPanel.is-collapsed{
  max-height:0 !important;
  opacity:0;
  border-width:0;
  margin-bottom:0;
}

/* ============================
   Accordion Containers
   ============================ */

.am__acc{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Region / World card */
.am__region{
  border:1px solid var(--line-soft);
  background:var(--panel);
  border-radius:16px;
  overflow:hidden;
}

/* Region button */
.am__regionBtn{
  width:100%;
  text-align:left;
  padding:14px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:800;
}

.am__regionBtn span{
  color:var(--muted);
  font-weight:normal;
}

/* Region content panel */
.am__panel{
  display:none;
  padding:14px;
  border-top:1px solid var(--line-soft);
}

.am__panel.is-open{
  display:block;
}

/* ============================
   Lore Blocks
   ============================ */

.am__p{
  margin:0 0 10px;
  color:rgba(255,255,255,.86);
}

.am__block{
  border:1px solid var(--line-soft);
  background:rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px 14px;
  margin:12px 0;
}

.am__blockTitle{
  font-weight:900;
  font-size:12px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
  margin-bottom:8px;
}

/* Lists (factions, people, hooks) */
.am__list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.am__item{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:10px 12px;
}

.am__item b{
  display:block;
  font-weight:800;
}

.am__item p{
  margin:6px 0 0;
  color:rgba(255,255,255,.72);
  font-size:13px;
}

/* ============================
   Emblems (auto-sized by hierarchy)
   ============================ */

.am__itemHead{
  display:flex;
  align-items:center;
  gap:10px;
}

.am__emblem{
  width:var(--em-region);
  height:var(--em-region);
  object-fit:contain;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  padding:3px;
  border:1px solid rgba(255,255,255,.16);

  /* subtle animation baseline */
  animation: am-float 5.5s ease-in-out infinite;
  transform-origin:center;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

/* hierarchy sizing */
.am__item--world .am__emblem{ width:var(--em-world); height:var(--em-world); }
.am__item--region .am__emblem{ width:var(--em-region); height:var(--em-region); }
.am__item--settlement .am__emblem{ width:var(--em-settlement); height:var(--em-settlement); border-radius:7px; }

/* hover/focus stronger but still subtle */
.am__item:focus-within .am__emblem,
.am__item:hover .am__emblem{
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 0 10px rgba(124,58,237,.20));
}

/* When an accordion is open, emblems get a faint glow */
.am__panel.is-open .am__emblem,
.am__settlePanel.is-open .am__emblem{
  filter: drop-shadow(0 0 12px rgba(56,189,248,.14));
}

/* Optional: emblem caption if you ever show it */
.am__emblemCaption{
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,.62);
}

/* float keyframes */
@keyframes am-float{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(var(--floatA) * -1)); }
  100% { transform: translateY(0); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .am__emblem{ animation:none; }
}

/* ============================
   Meta rows for rich objects
   ============================ */

.am__meta{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.74);
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.am__metaRow span{
  color:rgba(255,255,255,.62);
  font-weight:700;
}

/* ============================
   Settlements
   ============================ */

.am__settlements{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.am__settle{
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  overflow:hidden;
}

/* Settlement button */
.am__settleBtn{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:700;
}

.am__settlePanel{
  display:none;
  padding:12px 14px;
  border-top:1px solid var(--line-soft);
}

.am__settlePanel.is-open{
  display:block;
}

/* ============================
   Empty / Fallback
   ============================ */

.am__empty{
  border:1px dashed rgba(255,255,255,.18);
  border-radius:14px;
  padding:14px;
  color:var(--muted);
  text-align:center;
}

/* ============================
   Responsive
   ============================ */

@media (max-width:900px){
  .am__title{ font-size:28px; }
}

@media (max-width:640px){
  .am{ padding:12px; }
  .am__title{ font-size:24px; }

  .am__controls{
    width:100%;
  }

  .am__btn{
    flex:1 1 auto;
    text-align:center;
  }

  .am__mapWrap{ height:56vh; }

  /* slightly smaller emblems on small screens */
  :root{
    --em-world: 30px;
    --em-region: 26px;
    --em-settlement: 20px;
    --floatA: 1px;
  }
}