/* 2048 · rules-page examples · colours cf. style.css */
.g48g { margin: 18px 0 22px; display: grid; gap: 10px; justify-items: start; }
.g48g figcaption { font-size: .95rem; color: var(--muted); max-width: 60ch; }
.g48g-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.g48g-swipe {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  font: 800 .8rem/1 var(--font); text-transform: uppercase; letter-spacing: .04em;
  background: var(--lemon); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--drop);
}
.g48g-row, .g48g-board {
  --s: 46px; display: grid; grid-template-columns: repeat(4, var(--s)); gap: 6px; padding: 6px; border-radius: 12px;
  background: #c9a26e; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--drop);
}
.g48g-board { --s: 52px; }
[data-theme="dark"] .g48g-row, [data-theme="dark"] .g48g-board { background: #6b5236; }
.g48g i {
  display: grid; place-items: center; width: var(--s); height: var(--s); box-sizing: border-box; border-radius: 9px;
  font: 800 calc(var(--s) * .42)/1 var(--font); font-style: normal; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: #e2c79c; color: var(--ink);
}
[data-theme="dark"] .g48g i { background: #84694a; }
.g48g i[class] { border: 2px solid var(--edge, var(--ink)); background: var(--c); color: var(--t); }
.g48g i.d3 { font-size: calc(var(--s) * .34); }
.g48g i.d4 { font-size: calc(var(--s) * .27); }
.g48g i.is-join { outline: 3px solid var(--tomato); outline-offset: 2px; }
.g48g i.is-new { outline: 3px dashed var(--cobalt); outline-offset: 2px; }
.g48g i.is-path { outline: 3px solid var(--mint); outline-offset: 1px; }
.g48g .v2 { --c: #fff4dc; --t: #161412; }
.g48g .v4 { --c: #ffe3a3; --t: #161412; }
.g48g .v8 { --c: #ffd23f; --t: #161412; }
.g48g .v16 { --c: #ffa94d; --t: #161412; }
.g48g .v32 { --c: #ff5a36; --t: #161412; }
.g48g .v64 { --c: #d63a1c; --t: #fff4dc; }
.g48g .v128 { --c: #ff8bc2; --t: #161412; }
.g48g .v256 { --c: #a99bff; --t: #161412; }
.g48g .v512 { --c: #3d6bff; --t: #fff4dc; }
.g48g .v1024 { --c: #2ed8a0; --t: #161412; }
.g48g .v2048 { --c: #161412; --t: #ffd23f; --edge: #ffd23f; }
.g48g .vbig { --c: #161412; --t: #ff8bc2; --edge: #ff8bc2; }
@media (max-width: 420px) {
  .g48g-row { --s: 40px; }
  .g48g-board { --s: 46px; }
}

/* points table */
.g48g-points { border-collapse: separate; border-spacing: 0; margin: 14px 0 18px; border: 2.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 3px 3px 0 var(--drop); font-variant-numeric: tabular-nums; }
.g48g-points th, .g48g-points td { padding: 7px 16px; text-align: right; border-bottom: 1.5px solid var(--line); }
.g48g-points th { font: 800 .78rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); }
.g48g-points th:first-child, .g48g-points td:first-child { text-align: left; font-weight: 800; }
.g48g-points tr:last-child td { border-bottom: 0; }