/* Shared by the text pages of playbisqa.com (rules, strategy, about,
   contact). The home page keeps its own inline copy. */
:root {
  --bg: #0F2019; --card: #18392B; --border: #2A5241;
  --gold: #C9A84C; --gold2: #E8CF85; --text: #F3EEE2; --muted: #B9C4BC;
  --heart: #E05555;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--gold2); }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 16px; }

.top {
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% -40%, #1C6B4C 0%, var(--bg) 75%);
}
.top .wrap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
         color: var(--gold2); font-weight: 800; font-size: 1.3rem; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.top nav { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto;
           font-size: .95rem; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a[aria-current="page"] { color: var(--gold2); font-weight: 700; }

main { padding: 28px 0 24px; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); color: var(--gold2);
     margin: 8px 0 8px; letter-spacing: -.5px; line-height: 1.2; }
.lead { font-size: 1.12rem; color: var(--muted); margin: 0 0 18px; }
h2 { font-size: 1.4rem; color: var(--gold2); margin: 34px 0 10px; }
h3 { font-size: 1.1rem; color: var(--text); margin: 22px 0 6px; }
p, li { color: var(--muted); }
p { margin: 0 0 12px; }
ul, ol { padding-left: 1.3em; margin: 0 0 12px; }
li { margin: 5px 0; }
strong { color: var(--text); }
.heart { color: var(--heart); }

.box { background: var(--card); border: 1px solid var(--border);
       border-radius: 14px; padding: 14px 18px; margin: 14px 0; }
.box p:last-child, .box ul:last-child, .box ol:last-child { margin-bottom: 0; }
.box h3:first-child { margin-top: 0; }
.example { border-left: 4px solid var(--gold); }
.tip { border-left: 4px solid #3DB87A; }

table { width: 100%; border-collapse: collapse; margin: 10px 0 16px;
        font-size: .96rem; }
th, td { border-bottom: 1px solid var(--border); padding: 8px 10px;
         text-align: left; color: var(--muted); }
th { color: var(--text); }

.cta {
  display: inline-block; padding: 14px 28px; border-radius: 14px;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  color: #1A1000; font-weight: 800; text-decoration: none;
}
.again { text-align: center; padding: 26px 0 8px; }

footer { border-top: 1px solid var(--border); padding: 24px 0 40px;
         color: var(--muted); font-size: .92rem; text-align: center; }
footer nav { display: flex; gap: 6px 16px; justify-content: center;
             flex-wrap: wrap; margin-bottom: 10px; }