/* Azmar Quest - stile condiviso delle pagine Talenti.
   Ogni pagina classe sovrascrive solo --accent nel proprio <style> inline. */

  :root {
    --bg:#14161a; --card:#1a1d22; --line:#2e333a;
    --name:#f2e9d8; --desc:#b9c0c9; --accent:#d5a05f; /* sovrascritto da ogni pagina */ --kicker:#838c96;

    /* una tinta per classe, uguale su tutte le pagine: la pill del Guerriero
       resta oro anche quando la stai guardando dalla pagina dell'Arciere */
    --c-warrior:#d2b48c; --c-cleric:#5dd6ff; --c-warlock:#cc88ff; --c-archer:#adc68d;
  }
  * { box-sizing:border-box; }

  html { font-size:100%; }
  body {
    margin:0; padding:2rem 1.5rem 3rem;
    background:var(--bg); color:var(--name);
    font-family:'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    line-height:1.5;
  }
  .wrap { max-width:1100px; margin:0 auto; }

  .kicker {
    margin:0 0 .25rem; font-size:.8rem; letter-spacing:.15em;
    text-transform:uppercase; color:var(--kicker);
  }
  h1 { font-weight:600; font-size:2rem; margin:0 0 .6rem; }
  .intro { color:var(--desc); margin:0 0 2.25rem; max-width:68ch; font-size:1rem; }

  .tier { margin:0 0 2rem; }
  .tier h2 {
    font-size:1.15rem; font-weight:600; color:var(--accent);
    margin:0 0 .85rem; padding-bottom:.4rem; border-bottom:1px solid var(--line);
  }

  .cards {
    list-style:none; margin:0; padding:0;
    display:grid; gap:.9rem;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
  .card {
    display:flex; gap:.75rem;
    background:var(--card); border:1px solid var(--line);
    border-radius:8px; padding:.85rem;
  }
  .card img {
    width:48px; height:48px; flex-shrink:0;
    border-radius:6px; object-fit:contain; background:rgba(0,0,0,.35);
  }
  .card .body { min-width:0; }
  .card h3 { font-size:1rem; font-weight:600; color:var(--name); margin:0 0 .3rem; }
  .card p { margin:0; font-size:.9rem; color:var(--desc); line-height:1.4; overflow-wrap:break-word; }
  /* --- navigazione e footer aggiunti per SEO e usabilita' --- */
  a { color:var(--accent); }
  .topnav { font-size:.85rem; color:var(--kicker); margin:0 0 1.4rem; }
  .topnav a { color:var(--kicker); text-decoration:none; }
  .topnav a:hover { color:var(--accent); text-decoration:underline; }
  .topnav span { opacity:.45; margin:0 .45rem; }

  .classnav { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2.4rem; padding:0; list-style:none; }
  .classnav a {
    display:block; padding:.45rem .95rem; border:1px solid var(--line);
    border-radius:999px; background:var(--card); color:var(--desc);
    text-decoration:none; font-size:.9rem;
  }
  .classnav a:hover { border-color:var(--pill); color:var(--name); }
  .classnav a[aria-current="page"] {
    background:var(--pill); border-color:var(--pill);
    color:#15171a; font-weight:600;
  }

  /* ogni pill porta il colore della SUA classe, non di quella della pagina */
  .classnav .warrior { --pill:var(--c-warrior); }
  .classnav .cleric  { --pill:var(--c-cleric); }
  .classnav .warlock { --pill:var(--c-warlock); }
  .classnav .archer  { --pill:var(--c-archer); }
  .classnav a:not([aria-current="page"]) { color:var(--pill); border-color:rgba(255,255,255,.12); }
  .classnav a:not([aria-current="page"]):hover { background:rgba(255,255,255,.04); }


  .tier { scroll-margin-top:1rem; }

  .pagefoot {
    margin:3.5rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line);
    font-size:.9rem; color:var(--kicker);
  }
  .pagefoot p { margin:0 0 .6rem; }
  .pagefoot .legal { font-size:.82rem; opacity:.75; margin-top:.9rem; }
  .pagefoot a { color:var(--desc); }
  .pagefoot a:hover { color:var(--accent); }


  /* stesso trattamento della homepage: il grassetto e' un'etichetta,
     non un'enfasi sparsa. Senza questa regola ereditava il grigio del
     corpo e il peso 700 di default, piu' pesante e piu' spento. */
  strong { color:var(--name); font-weight:600; }