/* ORAȘUL VOCILOR · foaia de stil
   Educație socială · gimnaziu · ediția 2026–2027

   Toate culorile stau aici, în :root. Se schimbă într-un singur loc
   și se schimbă în tot site-ul. */

:root{
  /* fundalul orașului: amurg */
  --noapte:#0d1024;
  --noapte-sus:#1b2044;
  --aur:#c8a24e;
  --aur-pal:#e8d4a0;
  --text:#e9e6dd;
  --text-sters:#9d9a94;

  /* accentele celor opt cartiere — culorile din dosarele locurilor */
  --piata:#6A1B9A;        /* violet          · Tăcerea */
  --turnul:#1565C0;       /* albastru        · Zvonul */
  --poarta:#00838F;       /* turcoaz         · Conformismul (propunere, dosar 06) */
  --forumul:#2E7D32;      /* verde           · Eticheta */
  --ulita:#EF6C00;        /* portocaliu      · Nepăsarea */
  --biblioteca:#C98A16;   /* auriu-chihlimbar· Graba (de probat pe ecran, vezi dosar 09) */
  --gradina:#C62828;      /* roșu            · Batjocura */
  --strada:#AD1457;       /* roz-magenta     · Mirajul */

  --serif:Georgia,"Times New Roman","DejaVu Serif",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  background:radial-gradient(ellipse at 50% 38%, var(--noapte-sus) 0%, var(--noapte) 72%);
  color:var(--text);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

/* ————— antetul ————— */

.antet{text-align:center;padding:38px 20px 10px}
.antet .supratitlu{
  font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--aur);opacity:.85;margin-bottom:.7em;
}
.antet h1{
  margin:0;
  font-size:clamp(2.1rem,6vw,3.4rem);
  font-weight:normal;
  letter-spacing:.03em;
  color:var(--aur-pal);
  text-shadow:0 2px 18px rgba(200,162,78,.25);
}
.antet .deviza{
  margin:.9em auto 0;
  font-size:clamp(.9rem,2.4vw,1.05rem);
  font-style:italic;
  color:var(--text-sters);
}
.antet .deviza span{white-space:nowrap}
.antet .deviza span::after{content:" · ";color:var(--aur);font-style:normal}
.antet .deviza span:last-child::after{content:""}

/* ————— cercul ————— */

.cerc{
  position:relative;
  width:min(94vw,860px);
  aspect-ratio:1;
  margin:14px auto 72px;   /* loc pentru etichetele de jos */
}

/* inelul subțire pe care stau medalioanele */
.cerc::before{
  content:"";position:absolute;inset:4%;
  border:1px solid rgba(160,170,210,.18);
  border-radius:50%;
}

/* orașul, în mijloc */
.oras{
  position:absolute;
  left:50%;top:50%;
  width:62%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--aur);
  box-shadow:0 0 70px rgba(200,162,78,.30), 0 10px 40px rgba(0,0,0,.55);
}
.oras img{width:100%;height:100%;object-fit:cover;display:block}

/* roata care se învârte */
.roata{
  position:absolute;inset:0;
  animation:roteste 90s linear infinite;
}
.cerc:hover .roata,
.cerc:focus-within .roata{animation-play-state:paused}

@keyframes roteste{ to{transform:rotate(360deg)} }
@keyframes contra{ to{transform:rotate(-360deg)} }

/* fiecare loc */
.loc{
  position:absolute;
  left:50%;top:50%;
  width:19%;aspect-ratio:1;
  margin:-9.5% 0 0 -9.5%;
  /* --unghi vine din HTML.
     translate se raportează la lățimea medalionului, nu a cercului:
     medalionul are 19% din cerc, iar raza dorită e 40% din cerc,
     deci 40/19 = 210% din propria lățime. */
  transform:rotate(var(--unghi)) translate(210%) rotate(calc(-1 * var(--unghi)));
}
.loc .contra{
  width:100%;height:100%;
  animation:contra 90s linear infinite;   /* ține medalionul drept */
}
.cerc:hover .loc .contra,
.cerc:focus-within .loc .contra{animation-play-state:paused}

.loc a{
  display:block;width:100%;height:100%;
  border-radius:50%;overflow:hidden;
  border:4px solid var(--acc);
  box-shadow:0 8px 22px rgba(0,0,0,.55);
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.loc a:hover, .loc a:focus-visible{
  transform:scale(1.09);
  box-shadow:0 0 26px var(--acc), 0 10px 26px rgba(0,0,0,.6);
  outline:none;
}
.loc img{width:100%;height:100%;object-fit:cover;display:block}

/* numele și replica Umbrei, la trecerea cu mouse-ul */
.eticheta{
  position:absolute;left:50%;top:104%;
  transform:translateX(-50%);
  width:max-content;max-width:15rem;
  text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
  z-index:5;
}
.loc a:hover + .eticheta,
.loc a:focus-visible + .eticheta{opacity:1}
.eticheta .nume{
  display:block;font-size:.95rem;color:var(--aur-pal);
  text-shadow:0 2px 10px #000;
}
.eticheta .umbra{
  display:block;font-size:.84rem;font-style:italic;
  color:var(--text-sters);text-shadow:0 2px 10px #000;
}

/* locurile care nu s-au deschis încă */
.loc.inchis a{
  filter:grayscale(.85) brightness(.45);
  cursor:default;
  pointer-events:none;   /* nu se mai poate apăsa cu mouse-ul */
}
.loc.inchis a:hover{transform:none;box-shadow:0 8px 22px rgba(0,0,0,.55)}
.loc.inchis .eticheta .nume{color:var(--text-sters)}

/* ————— ecrane cu atingere: roata stă pe loc —————
   Fără mouse nu există „trecere cu degetul", deci nu se poate opri
   rotația. O țintă în mișcare, mică, e greu de nimerit. */

@media (hover:none){
  .roata, .loc .contra{animation:none}
}

/* ————— telefon ————— */

@media (max-width:640px){

  /* cercul devine coloană: orașul sus, cele opt locuri dedesubt,
     câte două pe rând, fiecare cu numele lui scris. */

  .cerc{
    width:auto;aspect-ratio:auto;
    margin:6px 18px 12px;
  }
  .cerc::before{display:none}

  .oras{
    position:static;transform:none;
    width:min(78%,320px);
    margin:0 auto 30px;
  }

  .roata{
    position:static;inset:auto;
    animation:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 16px;
  }

  .loc{
    position:static;transform:none;
    width:auto;aspect-ratio:auto;margin:0;
  }
  .loc .contra{
    animation:none;
    height:auto;
    display:flex;flex-direction:column;align-items:center;
  }
  .loc a{
    height:auto;aspect-ratio:1;
    border-width:3px;
  }

  /* numele se vede întotdeauna; replica Umbrei rămâne pentru ecranul mare */
  .eticheta{
    position:static;transform:none;
    opacity:1;pointer-events:auto;
    width:100%;max-width:none;
    margin-top:.6em;
  }
  .eticheta .nume{font-size:.88rem;line-height:1.25}
  .eticheta .umbra{display:none}

  .antet{padding-top:24px}
}

/* dacă cineva a cerut sistemului mai puțină mișcare, o oprim */
@media (prefers-reduced-motion:reduce){
  .roata, .loc .contra{animation:none}
}

/* Academia nu are încă pagină: numele rămâne, fără legătură */
.subsol .academia.inchisa{color:var(--text-sters);cursor:default}