/* ───────── $DOMINO · base, table, tiles, shared components ───────── */

:root {
  --table: #2a1a10;
  --table-deep: #140c07;
  --table-grain: #3a2416;
  --bone: #f2ebdd;
  --bone-shade: #e2d7c3;
  --bone-edge: #bfb199;
  --ink: #121010;
  --ink-soft: #1f1b19;
  --ink-edge: #050404;
  --board: #1d130d;
  --chalk: #f6f1e7;
  --ember: #f07a2a;
  --ember-hot: #ff5a36;
  --ember-gold: #ffc53d;
  --muted-bone: #6d6052;
  --muted-ink: #a99d8f;

  --f-display: "Londrina Solid", "Arial Black", Impact, sans-serif;
  --f-sketch: "Londrina Sketch", "Londrina Solid", Impact, sans-serif;
  --f-body: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --topbar-h: 64px;
  --tile-w: min(92vw, 1380px);
  --tile-r: clamp(22px, 2.6vw, 42px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.fx { scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--table-deep);
  color: var(--chalk);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
code { font-family: var(--f-mono); font-size: .86em; }

/* ───────── The table (fixed backdrop) ───────── */
.table {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 30%, rgba(8, 4, 2, .75) 100%),
    repeating-linear-gradient(92deg, rgba(255, 220, 180, .025) 0 2px, transparent 2px 9px, rgba(0, 0, 0, .05) 9px 11px, transparent 11px 23px),
    repeating-linear-gradient(88deg, transparent 0 60px, rgba(255, 200, 150, .03) 60px 64px, transparent 64px 140px),
    linear-gradient(180deg, #2f1d12 0%, var(--table) 45%, #1d110a 100%);
}
.table::after { /* pencil grain, matches the hand-drawn art */
  content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────── The chain: mini dominoes that topple with scroll progress ───────── */
.chain {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 9vh; min-height: 56px;
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 1.2vw, 20px);
  padding-bottom: 1.4vh;
  perspective: 600px;
  pointer-events: none;
}
.chain i {
  --h: clamp(26px, 5vh, 52px);
  width: calc(var(--h) * .5); height: var(--h);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 22%, var(--ink) 0 11%, transparent 12%),
    radial-gradient(circle at 50% 75%, var(--ink) 0 11%, transparent 12%),
    linear-gradient(var(--bone), var(--bone)) center / 70% 1.5px no-repeat,
    var(--bone);
  box-shadow: 3px 0 0 var(--bone-edge), 0 6px 10px rgba(0, 0, 0, .45);
  transform-origin: 100% 100%;
  transition: transform .45s var(--ease-out), opacity .45s;
  opacity: .9;
}
.chain i.is-down { transform: rotate(78deg) translate(4px, 2px); opacity: .55; }

/* ───────── Top bar ───────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 max(16px, calc((100vw - var(--tile-w)) / 2));
  background: linear-gradient(180deg, rgba(20, 12, 7, .85), rgba(20, 12, 7, 0));
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--f-display); font-weight: 900; font-size: 28px; letter-spacing: .01em; color: var(--bone);
}
.brand__tile { width: 18px; height: 32px; transform: rotate(-12deg); transition: transform .4s var(--ease-back); }
.brand:hover .brand__tile { transform: rotate(14deg); }
.brand__tile rect { fill: var(--bone); stroke: var(--ink); stroke-width: 1.5; }
.brand__tile line { stroke: var(--ink); stroke-width: 1.2; }
.brand__tile circle { fill: var(--ink); }
.topnav { display: flex; gap: 22px; margin-left: auto; }
.topnav a {
  text-decoration: none; font-weight: 600; font-size: 15px; color: rgba(246, 241, 231, .78);
  padding: 6px 0; background: linear-gradient(var(--ember), var(--ember)) 0 100% / 0 2px no-repeat;
  transition: background-size .25s, color .25s;
}
.topnav a:hover { color: var(--chalk); background-size: 100% 2px; }

/* ───────── Buttons ───────── */
.btn {
  --bg: var(--ink); --fg: var(--bone); --bd: var(--ink); --sh: var(--ember);
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 54px; padding: 0 26px;
  border: 2.5px solid var(--bd); border-radius: 14px;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-display); font-weight: 900; font-size: 22px; letter-spacing: .02em; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 4px 5px 0 var(--sh);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 6px 7px 0 var(--sh); }
.btn:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--sh); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 19px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
.btn--ink { --bg: var(--ink); --fg: var(--bone); --bd: var(--ink); --sh: var(--ember); }
.btn--ember { --bg: var(--ember); --fg: var(--ink); --bd: var(--ink); --sh: var(--ink); }
.btn--bone { --bg: var(--bone); --fg: var(--ink); --bd: var(--bone); --sh: var(--ember); }
.btn--line { --bg: transparent; --fg: var(--ink); --bd: var(--ink); --sh: var(--ink); }
.btn--line-light { --bg: transparent; --fg: var(--chalk); --bd: var(--chalk); --sh: rgba(246, 241, 231, .35); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 16px; justify-content: center; }

/* ───────── Contract address "spinner" (copy on click) ───────── */
.ca {
  --bg: var(--ink); --fg: var(--bone); --lb: var(--ember);
  position: relative;
  display: inline-flex; align-items: center; gap: 14px; max-width: 100%;
  padding: 10px 10px 10px 18px;
  border: 2.5px solid var(--ink); border-radius: 999px;
  background: var(--bg); color: var(--fg); cursor: copy;
  box-shadow: 0 0 0 6px var(--bone), 0 0 0 8.5px var(--ink), 0 14px 30px rgba(0, 0, 0, .25);
  transition: transform .2s var(--ease-back);
}
.ca:hover { transform: scale(1.025); }
.ca:active { transform: scale(.98); }
.ca__label { font-family: var(--f-display); font-weight: 900; font-size: 20px; color: var(--lb); }
.ca__value {
  font-family: var(--f-mono); font-size: clamp(11px, 1.02vw, 15.5px); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ca__action {
  flex: none; padding: 8px 14px; border-radius: 999px;
  background: var(--bone); color: var(--ink);
  font-family: var(--f-display); font-weight: 900; font-size: 18px; line-height: 1;
}
.ca.is-copied .ca__action { background: var(--ember); }
.ca--light { --bg: var(--bone); --fg: var(--ink); --lb: var(--ink); border-color: var(--bone); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.ca--light .ca__action { background: var(--ink); color: var(--bone); }

/* ───────── Tiles ───────── */
.deck { position: relative; }
.scene { position: relative; }
.stage {
  position: relative;
  display: grid; place-items: center;
  perspective: 720px; perspective-origin: 50% 55%; /* close camera: a falling tile swings over you */
}
.tile {
  --face: var(--bone); --edge: var(--bone-edge); --text: var(--ink); --muted: var(--muted-bone); --groove: rgba(18, 16, 16, .22);
  position: relative; width: var(--tile-w);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.tile__face {
  position: relative; overflow: hidden;
  height: 100%;
  border-radius: var(--tile-r);
  background: var(--face); color: var(--text);
  border: 3px solid var(--ink);
  /* the tile's thickness, drawn as stacked edges */
  box-shadow:
    0 2px 0 var(--edge), 0 4px 0 var(--edge), 0 6px 0 var(--edge), 0 8px 0 var(--edge),
    0 10px 0 var(--edge), 0 12px 0 var(--edge), 0 14px 0 var(--ink),
    0 30px 60px rgba(0, 0, 0, .55), 0 60px 120px rgba(0, 0, 0, .35);
  isolation: isolate;
}
.tile__face::before { /* pencil hatching like the mascot drawings */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(-38deg, transparent 0 7px, rgba(0, 0, 0, .025) 7px 8px),
    radial-gradient(130% 90% at 30% 10%, rgba(255, 255, 255, .35), transparent 60%);
}
.tile__face::after { /* shading while the tile tips toward you */
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 6, 3, .72), rgba(10, 6, 3, .95));
  opacity: var(--shade, 0);
}
.tile--ink { --face: var(--ink); --edge: #2b2522; --text: var(--chalk); --muted: var(--muted-ink); --groove: rgba(246, 241, 231, .16); }
.tile--ink .tile__face { border-color: #2e2825; }
.tile--ink .tile__face::before { background: repeating-linear-gradient(-38deg, transparent 0 7px, rgba(255, 255, 255, .02) 7px 8px), radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .06), transparent 60%); }
.tile--board { --face: var(--board); --edge: #3a281c; --text: var(--chalk); --muted: #bfae9c; }
.tile--board .tile__face { border-color: #3d2a1d; }
.tile--board .tile__face::before {
  opacity: 1;
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(255, 230, 200, .06), transparent 70%),
    repeating-linear-gradient(12deg, transparent 0 3px, rgba(255, 255, 255, .012) 3px 4px);
}

.groove { /* the line splitting a domino into two halves */
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 7%; bottom: 7%; width: 3px; margin-left: -1.5px;
  background: var(--groove); border-radius: 3px;
  box-shadow: 1px 0 0 rgba(255, 255, 255, .25);
}
.groove::after { /* the brass spinner pin */
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe3a3, #c68a2f 55%, #6e4513);
  box-shadow: 0 0 0 2px var(--ink);
}

/* ───────── Pips ───────── */
.pips {
  --s: 14px; --gap: 6px;
  display: inline-grid; grid-template: repeat(3, var(--s)) / repeat(3, var(--s)); gap: var(--gap);
  flex: none;
}
.pips i {
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3a3532, var(--ink) 60%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15);
}
.tile--ink .pips i, .tile--board .pips i { background: radial-gradient(circle at 38% 34%, #fff, var(--bone) 60%); }
.pips--1 i { grid-area: 2 / 2; }
.pips--2 i:nth-child(1) { grid-area: 1 / 1; } .pips--2 i:nth-child(2) { grid-area: 3 / 3; }
.pips--3 i:nth-child(1) { grid-area: 1 / 1; } .pips--3 i:nth-child(2) { grid-area: 2 / 2; } .pips--3 i:nth-child(3) { grid-area: 3 / 3; }
.pips--4 i:nth-child(1) { grid-area: 1 / 1; } .pips--4 i:nth-child(2) { grid-area: 1 / 3; } .pips--4 i:nth-child(3) { grid-area: 3 / 1; } .pips--4 i:nth-child(4) { grid-area: 3 / 3; }
.pips--5 i:nth-child(1) { grid-area: 1 / 1; } .pips--5 i:nth-child(2) { grid-area: 1 / 3; } .pips--5 i:nth-child(3) { grid-area: 2 / 2; } .pips--5 i:nth-child(4) { grid-area: 3 / 1; } .pips--5 i:nth-child(5) { grid-area: 3 / 3; }

/* ───────── Small shared bits ───────── */
.eyebrow {
  margin: 0 0 .5em; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.title {
  margin: 0 0 .45em; font-family: var(--f-display); font-weight: 900;
  font-size: clamp(38px, 4.6vw, 72px); line-height: .92; letter-spacing: .005em;
}
.hl { color: var(--ember); }
.tile--bone .hl { color: var(--ink); background: linear-gradient(transparent 58%, var(--ember) 58% 90%, transparent 90%); padding: 0 .06em; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); margin-right: 8px; vertical-align: 1px; }
.dot--live { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.bar { position: relative; height: 12px; border-radius: 99px; background: rgba(127, 110, 95, .25); overflow: hidden; }
.bar span { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: var(--ember); transition: width 1.2s var(--ease-out); }
.fineprint { margin: .8em 0 0; font-size: 12.5px; color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: 13vh; z-index: 200; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 14px; border: 2.5px solid var(--ink);
  background: var(--ember); color: var(--ink); box-shadow: 4px 5px 0 var(--ink);
  font-family: var(--f-display); font-weight: 900; font-size: 22px;
  animation: toast .35s var(--ease-back);
}
@keyframes toast { from { transform: translate(-50%, 20px) rotate(-4deg); opacity: 0; } }

.footer { position: relative; padding: 40px 16px 14vh; text-align: center; }
.footer p { max-width: 640px; margin: 0 auto; font-size: 13px; color: rgba(246, 241, 231, .55); }