/*
  The whole BZ Huddle site, in one stylesheet.

  Every page used to carry its own copy of this, which is how terms.html
  ended up as the only page with a .section-title rule. Served same-origin
  from /site.css so the pages still fetch nothing from anywhere else.
*/
:root{
  --felt:#0A3A24; --felt-dark:#062818; --surface:#113222;
  --gold:#D4AF37; --gold-bright:#F0D67A;
  --ink:#F3EFE3; --muted:#9FB4A6; --line:#1d4a34;
}
*{box-sizing:border-box}
body{
  margin:0; padding:22px 16px 56px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #17724a 0%, transparent 60%),
    var(--felt-dark);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Vazirmatn,Tahoma,sans-serif;
  line-height:1.75; -webkit-text-size-adjust:100%;
}
.wrap{max-width:560px;margin:0 auto}
header{text-align:center;margin-bottom:34px}
.logo{
  width:88px;height:88px;margin:0 auto 16px;border-radius:24px;
  background:linear-gradient(160deg,var(--gold-bright),var(--gold));
  display:flex;align-items:center;justify-content:center;
  font-size:44px;box-shadow:0 10px 34px rgba(0,0,0,.45);
}
h1{margin:0;font-size:30px;letter-spacing:-.5px}
.latin{color:var(--muted);font-size:14px;letter-spacing:2px;direction:ltr}
.tag{margin-top:10px;color:var(--muted);font-size:15px}
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:22px;margin-bottom:18px;
}
.card h2{margin:0 0 4px;font-size:19px;display:flex;align-items:center;gap:9px}
.card h2 .ic{font-size:22px}
.sub{color:var(--muted);font-size:14px;margin:0 0 16px}
a.btn{
  display:block;text-align:center;text-decoration:none;
  background:linear-gradient(160deg,var(--gold-bright),var(--gold));
  color:#22180a;font-weight:700;font-size:17px;
  padding:15px;border-radius:13px;
}
a.btn:active{transform:translateY(1px)}
a.btn.ghost{background:none;border:1px solid var(--gold);color:var(--gold-bright);font-weight:600}
.meta{text-align:center;color:var(--muted);font-size:12.5px;margin-top:10px;direction:ltr}
ol,ul{margin:14px 0 0;padding-inline-start:22px;color:var(--muted);font-size:14.5px}
li{margin-bottom:7px}
li b{color:var(--ink);font-weight:600}
.note{
  margin-top:16px;padding:13px 15px;border-radius:11px;font-size:13.5px;
  background:rgba(212,175,55,.09);border:1px solid rgba(212,175,55,.28);color:#e8dcb8;
}
code{background:rgba(0,0,0,.3);padding:1px 6px;border-radius:5px;font-size:12.5px;direction:ltr;display:inline-block}
footer{text-align:center;color:var(--muted);font-size:12.5px;margin-top:30px}
footer a{color:var(--muted)}
.hide{display:none}
.section-title{margin:34px 0 14px;font-size:15px;color:var(--gold-bright);letter-spacing:.5px}

/* ── the language switch ───────────────────────────────────────────────
   A <details> rather than a <select>: it opens and closes with no
   JavaScript, so the choice of language is never trapped behind a script
   that failed to load. Always at the top, always laid out left-to-right,
   so it sits in the same corner whichever language is showing. */
.lang{position:relative;margin:0 0 18px auto;width:max-content;direction:ltr}
.lang summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-size:13.5px;
}
.lang summary::-webkit-details-marker{display:none}
.lang .globe{font-size:16px;line-height:1}
.langlist{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:5;
  min-width:150px;padding:6px;border-radius:13px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.langlist a{
  display:block;padding:8px 12px;border-radius:9px;
  color:var(--ink);text-decoration:none;font-size:14.5px;
}
.langlist a[aria-current="true"]{background:rgba(212,175,55,.14);color:var(--gold-bright)}

/* The tiles on the home page. */
a.tile{display:block;text-decoration:none;color:inherit}
a.tile:active{transform:translateY(1px)}
a.tile .card{margin-bottom:14px}
a.tile h2{color:var(--gold-bright)}
.games{
  text-align:center;color:var(--muted);font-size:13.5px;
  margin:-4px 0 26px;
}