/* Mystics Duel — rune-stone register
   basalt base · glowing amber rune-etch · weathered lichen */

:root {
  --basalt-950: #0f1112;
  --basalt-900: #151819;
  --basalt-850: #1b1f20;
  --basalt-800: #222728;
  --basalt-700: #2d3334;
  --basalt-600: #3b4244;
  --grit: #566062;

  --rune: #f2a53a;
  --rune-hot: #ffcf7a;
  --rune-deep: #b06f1c;
  --rune-glow: rgba(242, 165, 58, .38);
  --rune-faint: rgba(242, 165, 58, .14);

  --lichen: #9fb08a;
  --lichen-dim: #6f7d61;
  --lichen-wash: rgba(159, 176, 138, .12);

  --bone: #e8e3d7;
  --ash: #a7aba3;
  --rust: #a4462b;

  --f-carve: "Grenze", "Georgia", serif;
  --f-read: "Pathway Extreme", "Segoe UI", system-ui, sans-serif;

  --gutter: 22px;
  --wrap: 1180px;
  --slab-radius: 3px 3px 5px 4px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .58 0 0 0 0 .56 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --pits: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='.018 .03' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.8 .45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --stave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1v14M6 4l4-3M6 4 2 1M6 9l3.5 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--basalt-900);
  background-image: var(--grain), radial-gradient(120% 70% at 50% -10%, #242a2b 0%, var(--basalt-900) 60%, var(--basalt-950) 100%);
  background-attachment: scroll;
  color: var(--bone);
  font-family: var(--f-read);
  font-size: 17px;
  line-height: 1.62;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--rune-hot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rune); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rune); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--f-carve);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  color: var(--bone);
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1.05em; }

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--rune); color: var(--basalt-950); padding: 8px 14px; z-index: 100;
}
.skip:focus { left: 12px; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---------- carved text helpers ---------- */
.carved {
  color: var(--bone);
  text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.7);
}
.lit { color: var(--rune); text-shadow: 0 0 14px var(--rune-glow), 0 0 2px rgba(255, 207, 122, .6); }
.kicker {
  font-family: var(--f-read);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lichen);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.kicker::before {
  content: ""; width: 9px; height: 12px;
  background: var(--lichen);
  -webkit-mask: var(--stave) center / contain no-repeat;
  mask: var(--stave) center / contain no-repeat;
}

/* ---------- rune bullet list ---------- */
.staves { list-style: none; margin: 0 0 1.2em; padding: 0; }
.staves li { position: relative; padding-left: 28px; margin-bottom: .55em; }
.staves li::before {
  content: ""; position: absolute; left: 4px; top: .38em;
  width: 11px; height: 15px;
  background: var(--rune);
  filter: drop-shadow(0 0 4px var(--rune-glow));
  -webkit-mask: var(--stave) center / contain no-repeat;
  mask: var(--stave) center / contain no-repeat;
}

/* ---------- etched divider ---------- */
.etch {
  display: flex; align-items: center; gap: 14px;
  margin: 0 auto; width: min(var(--wrap), 100% - var(--gutter) * 2);
  color: var(--rune);
}
.etch::before, .etch::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rune-deep) 20%, var(--rune) 50%, var(--rune-deep) 80%, transparent);
  box-shadow: 0 0 8px var(--rune-glow);
}
.etch svg { width: 44px; height: 22px; filter: drop-shadow(0 0 5px var(--rune-glow)); }

/* ---------- basalt slab (signature panel) ---------- */
.slab {
  position: relative;
  background-color: var(--basalt-800);
  background-image: var(--pits), var(--grain), linear-gradient(168deg, #2a3031 0%, var(--basalt-800) 45%, #1c2021 100%);
  background-size: 480px, 220px, cover;
  border-radius: var(--slab-radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 0 rgba(0,0,0,.45), 0 18px 40px -22px rgba(0,0,0,.9);
  padding: 30px;
}
.slab::before {
  /* the glowing etch line, cut in from the edge */
  content: ""; position: absolute; inset: 9px;
  border: 1px solid var(--rune-deep);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--rune-faint), inset 0 0 10px var(--rune-faint);
  pointer-events: none;
}
.slab::after {
  /* carved notch marks at two corners */
  content: ""; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px;
  pointer-events: none;
  background:
    linear-gradient(var(--rune), var(--rune)) left 0 top 0 / 11px 2px no-repeat,
    linear-gradient(var(--rune), var(--rune)) left 0 top 0 / 2px 11px no-repeat,
    linear-gradient(var(--rune), var(--rune)) right 0 bottom 0 / 11px 2px no-repeat,
    linear-gradient(var(--rune), var(--rune)) right 0 bottom 0 / 2px 11px no-repeat;
  filter: drop-shadow(0 0 3px var(--rune-glow));
}
.slab > * { position: relative; z-index: 1; }
.slab--lichen::before { border-color: var(--lichen-dim); box-shadow: 0 0 10px var(--lichen-wash), inset 0 0 10px var(--lichen-wash); }
.slab--lichen::after { filter: none; background:
    linear-gradient(var(--lichen), var(--lichen)) left 0 top 0 / 11px 2px no-repeat,
    linear-gradient(var(--lichen), var(--lichen)) left 0 top 0 / 2px 11px no-repeat,
    linear-gradient(var(--lichen), var(--lichen)) right 0 bottom 0 / 11px 2px no-repeat,
    linear-gradient(var(--lichen), var(--lichen)) right 0 bottom 0 / 2px 11px no-repeat; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--rune);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px;
  font-family: var(--f-carve); font-weight: 700; font-size: 1.2rem; letter-spacing: .03em;
  color: var(--basalt-950); background: var(--b);
  border: 0; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--rune-hot) inset, 0 0 18px var(--rune-glow), 0 3px 0 var(--rune-deep);
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { background: var(--rune-hot); color: var(--basalt-950); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 1px var(--rune-hot) inset, 0 0 12px var(--rune-glow), 0 1px 0 var(--rune-deep); }
.btn--stone {
  background: var(--basalt-700); color: var(--bone);
  box-shadow: 0 0 0 1px var(--basalt-600) inset, 0 3px 0 #111;
}
.btn--stone:hover { background: var(--basalt-600); color: var(--rune-hot); }
.btn[disabled] { opacity: .38; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(17, 20, 21, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 var(--rune-deep), 0 4px 16px -4px var(--rune-faint);
}
.masthead__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bone); }
.brand svg { width: 30px; height: 42px; flex: none; }
.brand__name { font-family: var(--f-carve); font-weight: 800; font-size: 1.7rem; letter-spacing: .02em; line-height: 1; }
.brand__name b { color: var(--rune); font-weight: 800; text-shadow: 0 0 10px var(--rune-glow); }
.brand__age {
  font-family: var(--f-read); font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  border: 1px solid var(--lichen-dim); color: var(--lichen); padding: 2px 6px; border-radius: 2px;
}

.mainnav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.mainnav a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; color: var(--ash); text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  border-bottom: 2px solid transparent;
}
.mainnav a svg { width: 16px; height: 18px; color: var(--grit); }
.mainnav a:hover { color: var(--bone); }
.mainnav a[aria-current="page"] { color: var(--rune-hot); border-bottom-color: var(--rune); }
.mainnav a[aria-current="page"] svg, .mainnav a:hover svg { color: var(--rune); }

/* ---------- hero ---------- */
.hero { padding: 54px 0 64px; position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .72fr); gap: 40px; align-items: center; }
.hero__lead { font-size: 1.14rem; color: #d7d3c8; max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.hero__visual {
  justify-self: end;
  width: min(100%, 280px);
  margin-inline: auto 0;
}
.hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  box-shadow:
    0 0 0 1px rgba(242, 165, 58, .18),
    0 28px 60px rgba(0, 0, 0, .55);
}
.oath {
  display: flex; gap: 14px; align-items: flex-start;
  border-left: 2px solid var(--lichen-dim); padding: 4px 0 4px 16px;
  font-size: .92rem; color: var(--ash);
}
.oath strong { color: var(--lichen); }
.agebadge {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 58px;
  font-family: var(--f-carve); font-weight: 800; font-size: 1.35rem; color: var(--rune);
  background: var(--basalt-800);
  clip-path: polygon(14% 0, 86% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  box-shadow: inset 0 0 0 1px var(--rune-deep);
  text-shadow: 0 0 10px var(--rune-glow);
}

.runeband { margin-top: 30px; display: flex; gap: 18px; color: var(--basalt-600); }
.runeband svg { width: 20px; height: 30px; }

/* ---------- trust strip ---------- */
.trust { padding: 22px 0 58px; }
.trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trust__item { padding: 26px 24px; }
.trust__item h3 { font-size: 1.3rem; margin-bottom: .3em; }
.trust__item p { margin: 0; font-size: .93rem; color: var(--ash); }
.trust__glyph { width: 26px; height: 34px; color: var(--rune); margin-bottom: 12px; filter: drop-shadow(0 0 6px var(--rune-glow)); }

/* ---------- generic sections ---------- */
.band { padding: 64px 0; }
.band--deep { background: rgba(0, 0, 0, .22); border-block: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.prose { max-width: 42em; }
.prose p { color: #d6d2c7; }
.prose h2 { margin-top: 1.3em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; color: var(--rune-hot); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; margin-top: 30px; }
.step { padding: 30px 28px; }
.step__no {
  font-family: var(--f-carve); font-size: 3rem; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--rune);
  text-shadow: 0 0 16px var(--rune-faint); margin-bottom: 10px;
}
.step p { color: var(--ash); margin: 0; font-size: .96rem; }

.monolith {
  display: grid; place-items: center; min-height: 340px; position: relative;
}
.monolith svg { width: min(280px, 80%); height: auto; }

.cta { text-align: center; padding: 48px 30px; }
.cta p { max-width: 36em; margin-inline: auto; color: var(--ash); }

/* ---------- page head (inner pages) ---------- */
.pagehead { padding: 56px 0 30px; }
.pagehead p { max-width: 40em; color: var(--ash); font-size: 1.1rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
.faq > div { padding: 26px 26px 22px; }
.faq dt { font-family: var(--f-carve); font-weight: 700; font-size: 1.28rem; color: var(--bone); margin-bottom: 8px; line-height: 1.2; }
.faq dd { margin: 0; color: var(--ash); font-size: .96rem; }

.contact { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: stretch; }
.contact__mail { font-family: var(--f-carve); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; word-break: break-word; }

.legal { max-width: 46em; }
.legal h2 { font-size: 1.6rem; margin-top: 1.6em; color: var(--rune-hot); }
.legal p, .legal li { color: #d2cec3; }
.legal .stamp { color: var(--ash); font-size: .9rem; }

/* ---------- footer ---------- */
.foot {
  margin-top: 40px;
  background: var(--basalt-950);
  background-image: var(--grain);
  border-top: 1px solid #000;
  box-shadow: 0 -1px 0 var(--rune-deep), 0 -6px 20px -8px var(--rune-faint);
  padding: 46px 0 30px;
  color: var(--ash);
  font-size: .93rem;
}
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 36px; }
.foot h2 { font-size: 1.15rem; color: var(--lichen); letter-spacing: .06em; margin-bottom: .8em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; }
.foot a { color: var(--bone); text-decoration: none; }
.foot a:hover { color: var(--rune-hot); text-decoration: underline; }
.foot__age { display: flex; gap: 14px; align-items: flex-start; }
.foot__base {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--basalt-700);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .84rem;
}

/* ============== STONECALL TWENTY-ONE (game) ============== */
.duel { padding: 26px; }
.duel__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.duel__title { font-family: var(--f-carve); font-size: 1.55rem; font-weight: 800; margin: 0; line-height: 1; }
.duel__title span { color: var(--rune); text-shadow: 0 0 10px var(--rune-glow); }
.duel__free { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lichen); }

.purse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.purse__cell { background: rgba(0,0,0,.35); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); padding: 8px 14px; border-radius: 2px; }
.purse__label { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); }
.purse__val { font-family: var(--f-carve); font-weight: 800; font-size: 1.75rem; line-height: 1.1; color: var(--rune-hot); font-variant-numeric: tabular-nums; }
.purse__val.bump { animation: bump .5s ease; }
@keyframes bump { 40% { color: #fff; text-shadow: 0 0 16px var(--rune); } }

.table {
  position: relative;
  background: radial-gradient(90% 80% at 50% 50%, #252b2c, #171a1b);
  border: 1px solid #000; border-radius: 3px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(242,165,58,.12);
  padding: 16px 16px 12px;
}
.hand { min-height: 150px; }
.hand + .hand { border-top: 1px dashed var(--basalt-600); margin-top: 8px; padding-top: 12px; }
.hand__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hand__who { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lichen); font-weight: 700; }
.hand__score { font-family: var(--f-carve); font-size: 1.35rem; font-weight: 700; color: var(--bone); min-width: 3ch; text-align: right; }
.hand__cards { display: flex; flex-wrap: wrap; gap: 8px; min-height: 108px; align-items: flex-start; }

.card { width: 74px; height: 104px; perspective: 700px; flex: none; animation: slidein .32s ease-out both; }
.card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3, .1, .25, 1);
}
@keyframes slidein { from { opacity: 0; transform: translateY(-18px) rotate(-4deg); } }
.card.is-down .card__inner { transform: rotateY(180deg); }
.card__face, .card__back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 5px;
}
.card__face {
  background: linear-gradient(160deg, #efeade, #dcd5c4);
  color: #1b1e1f;
  box-shadow: 0 4px 10px rgba(0,0,0,.55), inset 0 0 0 1px #b8ae98;
  display: grid; grid-template-rows: auto 1fr auto; padding: 5px 7px;
  font-family: var(--f-carve); font-weight: 700;
}
.card__face.red { color: var(--rust); }
.card__corner { font-size: 1.15rem; line-height: .95; }
.card__corner small { display: block; font-size: .95rem; }
.card__corner--end { transform: rotate(180deg); justify-self: end; }
.card__pip { align-self: center; justify-self: center; font-size: 2.1rem; line-height: 1; }
.card__back {
  transform: rotateY(180deg);
  background-color: var(--basalt-700);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30' viewBox='0 0 22 30'%3E%3Cpath d='M11 5v20M11 9l5-4M11 9 6 5M11 17l4 4' fill='none' stroke='%23b06f1c' stroke-width='1.3' stroke-linecap='square' opacity='.75'/%3E%3C/svg%3E"),
    var(--grain);
  background-size: 22px 30px, 220px;
  box-shadow: 0 4px 10px rgba(0,0,0,.55), inset 0 0 0 1px #000, inset 0 0 0 4px var(--basalt-800), inset 0 0 0 5px var(--rune-deep);
}
.card.is-lit .card__face { animation: runeflick .7s ease-out; }
@keyframes runeflick {
  0% { box-shadow: 0 0 0 2px var(--rune), 0 0 22px var(--rune); }
  25% { box-shadow: 0 0 0 1px var(--rune-hot), 0 0 8px var(--rune-glow); }
  45% { box-shadow: 0 0 0 2px var(--rune), 0 0 18px var(--rune); }
  100% { box-shadow: 0 4px 10px rgba(0,0,0,.55), inset 0 0 0 1px #b8ae98; }
}

.verdict {
  min-height: 58px; margin: 14px 0 0; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--basalt-600); border-radius: 2px; background: rgba(0,0,0,.3);
  font-weight: 600;
}
.verdict__main { font-family: var(--f-carve); font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.verdict__sub { font-size: .9rem; color: var(--ash); font-weight: 500; }
.verdict--win { border-color: var(--rune); box-shadow: 0 0 18px var(--rune-faint), inset 0 0 18px var(--rune-faint); }
.verdict--win .verdict__main { color: var(--rune-hot); text-shadow: 0 0 12px var(--rune-glow); }
.verdict--natural { border-color: var(--rune-hot); background: linear-gradient(90deg, rgba(242,165,58,.2), rgba(0,0,0,.3)); box-shadow: 0 0 26px var(--rune-glow); }
.verdict--natural .verdict__main { color: #fff3d6; text-shadow: 0 0 14px var(--rune), 0 0 30px var(--rune-glow); }
.verdict--lose .verdict__main { color: #d98a6f; }
.verdict--push { border-color: var(--lichen-dim); }
.verdict--push .verdict__main { color: var(--lichen); }
.verdict--warn { border-color: var(--rust); }
.verdict--warn .verdict__main { color: #e1a08a; font-size: 1.15rem; }

.stake { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.stake__label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); margin-right: 4px; }
.chip {
  min-width: 52px; min-height: 42px; padding: 6px 10px;
  font-family: var(--f-carve); font-weight: 700; font-size: 1.1rem;
  color: var(--bone); background: var(--basalt-700);
  border: 1px solid #000; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--basalt-600), 0 2px 0 #0c0d0e;
  cursor: pointer;
}
.chip:hover:not([disabled]) { color: var(--rune-hot); box-shadow: inset 0 0 0 1px var(--rune-deep), 0 2px 0 #0c0d0e; }
.chip[disabled] { opacity: .35; cursor: not-allowed; }
.chip--clear { font-family: var(--f-read); font-size: .82rem; font-weight: 600; color: var(--ash); }

.moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.moves .btn { font-size: 1.12rem; padding-inline: 10px; }
.duel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; font-size: .84rem; color: var(--ash); }
.linkbtn { background: none; border: 0; padding: 4px 0; color: var(--rune-hot); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rules .slab { padding: 28px 26px; }
.rules h3 { font-size: 1.35rem; color: var(--rune-hot); }
.rules p, .rules li { font-size: .95rem; color: #d2cec3; }
.paytable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.paytable td { padding: 7px 0; border-bottom: 1px solid var(--basalt-600); }
.paytable td:last-child { text-align: right; font-family: var(--f-carve); font-weight: 700; color: var(--rune-hot); font-size: 1.1rem; }

.gamepage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: start; }
.sidenote { padding: 26px; }
.sidenote p { font-size: .95rem; color: var(--ash); }

/* ---------- responsive: 1040 / 880 / 560 ---------- */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { max-width: 44em; }
  .hero__visual { justify-self: center; margin-inline: auto; width: min(100%, 220px); }
  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gamepage { grid-template-columns: minmax(0, 1fr); }
  .rules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rules > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  body { padding-bottom: 74px; }
  .masthead { backdrop-filter: none; background: var(--basalt-950); }
  .masthead__row { min-height: 60px; }
  /* mobile: the nav drops to a fixed stone ledge along the bottom edge */
  .mainnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--basalt-950);
    background-image: var(--grain);
    border-top: 1px solid var(--rune-deep);
    box-shadow: 0 -8px 22px rgba(0,0,0,.6), 0 -1px 10px var(--rune-faint);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mainnav ul { justify-content: space-around; gap: 0; }
  .mainnav li { flex: 1; }
  .mainnav a {
    flex-direction: column; gap: 3px; padding: 9px 2px 8px;
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 0; border-top: 2px solid transparent; justify-content: center;
  }
  .mainnav a svg { width: 18px; height: 20px; }
  .mainnav a[aria-current="page"] { border-top-color: var(--rune); background: linear-gradient(var(--rune-faint), transparent); }
  .split, .contact { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__grid > :first-child { grid-column: 1 / -1; }
  .monolith { min-height: 240px; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .brand__name { font-size: 1.4rem; }
  .brand svg { width: 24px; height: 34px; }
  .hero { padding-top: 34px; }
  .trust__grid, .rules { grid-template-columns: minmax(0, 1fr); }
  .slab { padding: 24px 20px; }
  .duel { padding: 20px 14px; }
  .table { padding: 12px 10px 10px; }
  .card { width: 58px; height: 82px; }
  .card__corner { font-size: .95rem; }
  .card__corner small { font-size: .8rem; }
  .card__pip { font-size: 1.6rem; }
  .hand { min-height: 124px; }
  .hand__cards { min-height: 86px; gap: 6px; }
  .moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purse__val { font-size: 1.45rem; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.h3 { font-size: 1.5rem; }
.btn--stone[disabled] { opacity: .5; box-shadow: 0 0 0 1px var(--basalt-600) inset; }