/* ===== ROZCESTNÍK MĚSTA (v=534800, js/mesta.js, prefix mc-) =====
   Jedna scéna: pozadí aktuálního regionu, nadpis nahoře, budovy dole.
   Barvy z css/thelyon-ui.css (tmavé panely, zlaté rámy, karmín). */
:is(#centerContent,body) .mc{
  --mc-akcent:#c8952f;
  container-type:inline-size;
}
:is(#centerContent,body) .mc[data-mesto="egypt"]{--mc-akcent:#d9b45a}
:is(#centerContent,body) .mc[data-mesto="rim"]{--mc-akcent:#c4553a}
:is(#centerContent,body) .mc[data-mesto="severska"]{--mc-akcent:#7fa9c4}
:is(#centerContent,body) .mc[data-mesto="keltska"]{--mc-akcent:#6fae6a}
:is(#centerContent,body) .mc[data-mesto="rise_mrtvych"]{--mc-akcent:#9a7ad0}
:is(#centerContent,body) .mc[data-mesto="nebesa"]{--mc-akcent:#e6d48a}
:is(#centerContent,body) .mc[data-mesto="za_hranici"]{--mc-akcent:#f1cd72}

:is(#centerContent,body) .mc-scena{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  min-height:clamp(420px,60cqw,620px);
  padding:clamp(16px,3cqw,30px) clamp(12px,2.6cqw,28px) clamp(14px,2.4cqw,24px);
  border:2px solid #9b6c1b;border-radius:6px;
  background:#120c06 center 40% / cover no-repeat;
  box-shadow:0 0 0 1px #2a1805, inset 0 0 0 1px rgba(241,205,114,.35), 0 10px 28px rgba(0,0,0,.55);
  isolation:isolate;
}
/* ztmavení: nahoře pod nadpisem a dole pod kartami, střed obrázku zůstane vidět */
:is(#centerContent,body) .mc-scena::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,5,2,.72) 0%, rgba(8,5,2,.18) 28%, rgba(8,5,2,0) 45%, rgba(8,5,2,.35) 62%, rgba(8,5,2,.86) 100%),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}
:is(#centerContent,body) .mc-scena.mc-ma-pozadi{animation:mc-objev .45s ease-out}
@keyframes mc-objev{from{filter:brightness(.4)}to{filter:none}}
:is(#centerContent,body) .mc-ceka{justify-content:center;background:linear-gradient(180deg,#1b130a,#0d0905)}

:is(#centerContent,body) .mc-hlava{text-align:center}
:is(#centerContent,body) .mc-region{
  display:inline-block;margin-bottom:6px;padding:2px 14px;
  font:600 12px/1.6 var(--tl-pismo-nadpis);letter-spacing:2px;text-transform:uppercase;
  color:var(--tl-text-zlaty);
  background:linear-gradient(180deg,rgba(122,18,18,.92),rgba(58,7,7,.92));
  border:1px solid var(--mc-akcent);border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
:is(#centerContent,body) .mc-titul{
  margin:0;
  font:700 clamp(24px,4.6cqw,46px)/1.1 var(--tl-pismo-nadpis);
  letter-spacing:clamp(1px,.4cqw,4px);text-transform:uppercase;
  background:var(--tl-zlato-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(0,0,0,.6));
}
:is(#centerContent,body) .mc-motto{
  margin-top:6px;
  font:italic 400 clamp(13px,1.7cqw,17px)/1.3 var(--tl-pismo-text);
  color:var(--tl-text);text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.8);
}
:is(#centerContent,body) .mc-hlava::after{
  content:"";display:block;width:min(260px,60%);height:2px;margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--mc-akcent),transparent);
}
:is(#centerContent,body) .mc-znovu{margin-top:12px}

:is(#centerContent,body) .mc-budovy{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.2cqw,12px);
}
:is(#centerContent,body) .mc-budova{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:10px 12px;cursor:pointer;text-align:left;
  font:inherit;color:var(--tl-text);
  background:linear-gradient(180deg,rgba(28,20,11,.9),rgba(12,8,4,.94));
  border:1px solid rgba(214,168,71,.55);border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(241,205,114,.14);
  backdrop-filter:blur(2px);
  transition:transform .12s, border-color .12s, box-shadow .12s, background .12s;
}
:is(#centerContent,body) .mc-budova:hover,
:is(#centerContent,body) .mc-budova:focus-visible{
  transform:translateY(-2px);outline:none;
  border-color:var(--tl-zlato-300);
  background:linear-gradient(180deg,rgba(66,16,12,.94),rgba(30,8,6,.96));
  box-shadow:0 8px 18px rgba(0,0,0,.6), 0 0 0 1px var(--tl-karmin-500), inset 0 1px 0 rgba(241,205,114,.25);
}
:is(#centerContent,body) .mc-ik{
  flex:0 0 auto;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#3a2710,#140c05);
  border:1px solid var(--tl-zlato-700);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.5);
}
:is(#centerContent,body) .mc-ik .tl-ik{width:22px;height:22px}
:is(#centerContent,body) .mc-txt{display:flex;flex-direction:column;min-width:0}
:is(#centerContent,body) .mc-jm{
  font:700 14px/1.2 var(--tl-pismo-nadpis);color:var(--tl-text-zlaty);letter-spacing:.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
:is(#centerContent,body) .mc-po{font-size:12px;line-height:1.3;color:var(--tl-text-tlumeny)}

/* tablet */
@container (max-width:760px){
  :is(#centerContent,body) .mc-budovy{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#centerContent,body) .mc-budova:last-child:nth-child(odd){grid-column:1 / -1}
  :is(#centerContent,body) .mc-scena{min-height:0;justify-content:flex-start;background-position:center 30%}
  :is(#centerContent,body) .mc-hlava{padding:clamp(40px,14cqw,110px) 0 clamp(30px,10cqw,80px)}
}
/* mobil */
@container (max-width:440px){
  :is(#centerContent,body) .mc-scena{padding:12px 10px}
  :is(#centerContent,body) .mc-budova{padding:8px 9px;gap:8px}
  :is(#centerContent,body) .mc-ik{width:32px;height:32px}
  :is(#centerContent,body) .mc-ik .tl-ik{width:18px;height:18px}
  :is(#centerContent,body) .mc-jm{font-size:12.5px;white-space:normal}
  :is(#centerContent,body) .mc-po{display:none}
}
@media (prefers-reduced-motion:reduce){
  :is(#centerContent,body) .mc-scena.mc-ma-pozadi{animation:none}
  :is(#centerContent,body) .mc-budova{transition:none}
}