/*
 * The How to Play pages (khelau.com/games/…): plain HTML, no app, so they load fast and any crawler can
 * read them. The Khelau colours from @khelau/ui/tokens.css, with system fonts (the brand fonts live in the app bundle).
 */
:root {
  --gold-1: #fff3c4;
  --gold-2: #f2c75c;
  --gold-3: #c68a2c;
  --gold-faint: rgba(242, 199, 92, 0.22);
  --ink: #f7eedb;
  --ink-dim: #d8caa8;
  --green-0: #0f3d2e;
  --green-1: #0a2a1f;
  --green-2: #06150f;
  --panel: rgba(16, 42, 32, 0.85);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--green-2) linear-gradient(180deg, var(--green-0) 0, var(--green-1) 420px, var(--green-2) 900px) no-repeat;
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
}
a {
  color: var(--gold-2);
}
a:focus-visible {
  outline: 3px solid var(--gold-2);
  outline-offset: 2px;
}
h1,
h2,
h3 {
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.2;
  color: var(--gold-1);
}
h1 {
  margin: 8px 0 4px;
  font-size: clamp(1.9rem, 7vw, 2.8rem);
}
h2 {
  margin: 36px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold-faint);
  font-size: 1.45rem;
}
h3 {
  margin: 20px 0 4px;
  font-size: 1.1rem;
}
[lang='ne'] {
  font-family: 'Noto Sans Devanagari', 'Mukta', 'Kohinoor Devanagari', system-ui, sans-serif;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--gold-faint);
  background: rgba(6, 21, 15, 0.6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-1);
  font: 700 1.25rem Georgia, serif;
  text-decoration: none;
}
.brand span {
  color: var(--gold-2);
  font-size: 0.9em;
}
.top nav a {
  display: inline-block;
  padding: 10px 4px;
}

.guide {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}
.crumbs {
  color: var(--ink-dim);
  font-size: 0.9rem;
}
.intro {
  text-align: center;
}
.icon {
  display: block;
  margin: 18px auto 0;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.ne {
  margin: 0;
  color: var(--gold-2);
  font-size: 1.3rem;
}
.lead {
  text-align: left;
}
.note {
  margin-top: 4px;
  color: var(--ink-dim);
  font-size: 0.92rem;
}
.play {
  display: inline-block;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3c4 0%, #f2c75c 45%, #c68a2c 100%);
  color: #2a1a05;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.play:hover {
  filter: brightness(1.06);
}
.again {
  margin: 32px 0 0;
  text-align: center;
}

.facts,
.terms,
.moods {
  display: grid;
  gap: 8px;
  margin: 0;
}
.facts {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.facts div,
.terms div,
.moods div {
  padding: 10px 14px;
  border: 1px solid var(--gold-faint);
  border-radius: 12px;
  background: var(--panel);
}
dt {
  color: var(--gold-2);
  font-weight: 700;
}
dd {
  margin: 2px 0 0;
}
ol,
ul {
  padding-left: 1.4em;
}
li {
  margin: 4px 0;
}

.table {
  overflow-x: auto;
  border: 1px solid var(--gold-faint);
  border-radius: 12px;
  background: var(--panel);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gold-faint);
  text-align: left;
  vertical-align: top;
}
tbody tr:last-child > * {
  border-bottom: 0;
}
thead th {
  color: var(--gold-2);
  font-size: 0.9rem;
}
tbody th {
  color: var(--gold-1);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding: 0;
  list-style: none;
}
.card {
  margin: 0;
}
.card a {
  display: flex;
  gap: 12px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--gold-faint);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}
.card a:hover {
  border-color: var(--gold-3);
}
.card img {
  flex: none;
  border-radius: 12px;
}
.card strong {
  color: var(--gold-1);
}
.card [lang='ne'] {
  color: var(--gold-2);
}
.card small {
  display: block;
  margin-top: 2px;
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.4;
}

.foot {
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gold-faint);
  color: var(--ink-dim);
  font-size: 0.9rem;
  text-align: center;
}
.foot .links a {
  display: inline-block;
  padding: 6px 2px;
}