/* ═══════════════════════════════════════════════════════════════
   COMBO · a split-flap board in a dark hall
   A warm charcoal wall, one board of cream flaps with black digits,
   amber lamps, and a timetable under it. Nothing is drawn thick or
   cartoon here: the board is a machine, the type is a grotesk, the
   light is amber. The rule is written in three lines above the board
   before anything moves, and the board explains every block in plain
   words as it goes, slowly enough to read.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --wall:      #1c1a19;   /* the hall */
  --frame:     #2b2724;   /* the board's frame, the plates */
  --frame-2:   #3a3531;   /* its edge */
  --line:      #3d3733;   /* the timetable's rules */
  --flap:      #efe6d2;   /* a flap */
  --flap-2:    #e3d8c1;   /* its lower half, in shadow */
  --digit:     #1a1816;   /* the character on a flap */
  --cream:     #efe6d2;   /* the words on the wall */
  --soft:      #d6cdbc;   /* the running text on the wall */
  --muted:     #a89f8f;   /* the quieter words */
  --amber:     #ffb84a;   /* the lamps, the labels, the figure that matters */
  --amber-dim: #4a3a1d;   /* a lamp that is out */
  --red:       #ff5a4a;   /* a break */
  --green:     #8fd39a;   /* a block that counts */

  --font: "Archivo", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
html { scroll-behavior: smooth; background: var(--wall); }

body {
  margin: 0;
  background: var(--wall);
  color: var(--cream);
  font-family: var(--font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
code { font-family: var(--font); font-weight: 700; letter-spacing: .01em; }
::selection { background: var(--amber); color: var(--wall); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── the masthead ────────────────────────────────────────────── */

.masthead { max-width: 1240px; margin: 0 auto; padding: 18px clamp(14px, 3vw, 40px) 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.mark img { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--frame-2); }
.plates { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.plate {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 42px; height: 42px; padding: 0 14px;
  background: var(--frame); color: var(--cream); border: 2px solid var(--frame-2); border-radius: 6px;
  font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.plate:hover { border-color: var(--amber); }
.plate:disabled { opacity: .5; cursor: default; }
.plate svg { width: 17px; height: 17px; }
.plate.is-off { color: var(--muted); }
.wallet-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.wallet-btn.is-on .wallet-dot { background: var(--green); }
.wallet-btn.is-off .wallet-dot { background: var(--red); }

/* ─── the hall ────────────────────────────────────────────────── */

.hall { max-width: 1240px; margin: 0 auto; padding: 8px clamp(14px, 3vw, 40px) 54px; }

/* the rule in three lines */
.lesson { max-width: 900px; margin: 26px 0 30px; }
.kicker { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kicker b { color: var(--cream); }

/*  la seule ligne lue sur la chaine elle-meme : la tete de Robinhood Chain, en direct.
    Elle est masquee tant que le RPC n'a pas repondu, et redevient masquee s'il cesse de repondre,
    parce qu'un nombre fige presente comme vivant serait pire que pas de nombre du tout.  */
.live { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.live b { color: var(--amber); font-variant-numeric: tabular-nums; font-weight: 700; }
.live a { color: var(--soft); text-underline-offset: 3px; }
.live a:hover { color: var(--cream); }
.h1 { font-weight: 800; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.01em; font-stretch: 92%; margin: 10px 0 22px; }
.three { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.three li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 18px; line-height: 1.45; color: var(--soft); }
.three b { width: 34px; height: 34px; border-radius: 6px; background: var(--amber); color: var(--wall); display: grid; place-items: center; font-weight: 800; font-size: 15px; margin-top: 1px; }
.three em { font-style: normal; color: var(--amber); font-weight: 700; }

/* ─── the board ───────────────────────────────────────────────── */

.panel { background: var(--frame); border: 3px solid var(--frame-2); border-radius: 18px; padding: 26px 28px 22px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .4); }
.board.near .panel { border-color: var(--red); }
.fields { display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr); gap: 24px 44px; align-items: end; }
.field { min-width: 0; }
.field .lab { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.field .sub { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* the flaps */
.cells { display: flex; gap: 5px; align-items: flex-end; --cw: 56px; --ch: 82px; --cf: 60px; }
.field.streak .cells { --cw: 72px; --ch: 104px; --cf: 78px; }
.cells .dot { font-size: 34px; font-weight: 800; color: var(--flap); margin: 0 1px; line-height: 1; padding-bottom: 12px; }
.cell {
  position: relative; width: var(--cw); height: var(--ch); border-radius: 6px;
  background: var(--flap); color: var(--digit);
  font-weight: 800; font-size: var(--cf); font-stretch: 88%; line-height: var(--ch); text-align: center; font-variant-numeric: tabular-nums;
  overflow: hidden; perspective: 400px; box-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(0, 0, 0, .62); z-index: 5; }
.cell .half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--flap); }
.cell .top, .cell .flip-top { top: 0; border-radius: 6px 6px 0 0; }
.cell .bottom, .cell .flip-bottom { bottom: 0; border-radius: 0 0 6px 6px; background: var(--flap-2); }
.cell .half i { position: absolute; left: 0; right: 0; height: var(--ch); line-height: var(--ch); font-style: normal; display: block; }
.cell .top i, .cell .flip-top i { top: 0; }
.cell .bottom i, .cell .flip-bottom i { bottom: 0; }
.cell .flip-top, .cell .flip-bottom { visibility: hidden; backface-visibility: hidden; }
.cell .flip-top { transform-origin: 50% 100%; z-index: 3; }
.cell .flip-bottom { transform-origin: 50% 0; z-index: 4; }
.cell.flipping .flip-top { visibility: visible; animation: flip-top .13s ease-in both; }
.cell.flipping .flip-bottom { visibility: visible; animation: flip-bottom .13s .13s ease-out both; }
@keyframes flip-top { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flip-bottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* the lamps and the status line */
.strip { margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--frame-2); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 22px; align-items: center; }
.lamps { display: flex; gap: 6px; }
.lamps i { width: 22px; height: 12px; border-radius: 3px; background: var(--amber-dim); }
.lamps i.lit { background: var(--amber); }
.lamps i.red { background: var(--red); }
.status { font-weight: 700; font-size: 15px; letter-spacing: .03em; color: var(--cream); }
.status.ok { color: var(--green); }
.status.broke { color: var(--red); }
.small { font-size: 13px; color: var(--muted); white-space: nowrap; }
.small b { color: var(--cream); font-weight: 700; }

/* under the board: the caption and the keys */
.under { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; margin-top: 24px; }
.caption { font-size: 19px; line-height: 1.5; color: var(--cream); max-width: 72ch; min-height: 3em; }
.caption b { color: var(--amber); font-weight: 700; }
.keys { display: flex; gap: 12px; }
.key {
  height: 56px; min-width: 132px; padding: 0 26px; cursor: pointer;
  background: var(--flap); color: var(--digit); border: 0; border-radius: 8px;
  font-weight: 800; font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 4px 0 #9c9280;
  transition: transform .06s ease, box-shadow .06s ease;
}
.key.sell { background: var(--amber); box-shadow: 0 4px 0 #a8742a; }
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c9280; }
.key.sell:active { box-shadow: 0 1px 0 #a8742a; }
.fine { margin-top: 16px; font-size: 13.5px; color: var(--muted); max-width: 90ch; }

/* ─── the timetable, the steps ────────────────────────────────── */

.timetable, .steps, .notice, .honest { margin-top: 58px; }
.tt-head h2, .honest h2 { font-weight: 800; font-size: 26px; letter-spacing: -.005em; line-height: 1.15; }
.tt-head p { color: var(--muted); margin-top: 6px; max-width: 72ch; }
.tt-scroll { overflow-x: auto; margin-top: 16px; }
.tt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 640px; }
.tt th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); padding: 10px 12px; border-bottom: 2px solid var(--frame-2); white-space: nowrap; }
.tt td { padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--soft); white-space: nowrap; }
.tt td:first-child { color: var(--cream); font-weight: 700; }
.tt tr.ok td:nth-child(2) { color: var(--green); }
.tt tr.empty td, .tt tr.broke td { color: var(--red); }
.tt tr.broke td { font-weight: 700; }
.tt tr.yours td { background: rgba(255, 184, 74, .09); color: var(--amber); }
.steps-tbl { min-width: 0; max-width: 640px; margin-top: 16px; }
.steps-tbl td:first-child { color: var(--cream); }
.aside { margin-top: 16px; color: var(--muted); max-width: 72ch; font-size: 15.5px; }

/* ─── the law, on a notice ────────────────────────────────────── */

.notice { background: var(--flap); color: var(--digit); border-radius: 14px; padding: 30px 34px 26px; }
.notice-tag { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #8a7a52; }
.notice h2 { font-weight: 800; font-size: 36px; letter-spacing: -.01em; line-height: 1; margin: 6px 0 10px; }
.notice-sub { color: #5a5246; max-width: 60ch; font-size: 15.5px; }
.laws { list-style: none; counter-reset: law; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.laws li { position: relative; padding-left: 44px; font-size: 15.5px; line-height: 1.45; font-weight: 500; counter-increment: law; }
.laws li::before {
  content: counter(law, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  width: 32px; height: 24px; border-radius: 4px; background: var(--digit); color: var(--flap);
  font-weight: 800; font-size: 12px; line-height: 24px; text-align: center;
}
.notice-foot { margin-top: 20px; padding-top: 12px; border-top: 2px dashed rgba(26, 24, 22, .25); font-size: 14px; color: #5a5246; }
.notice-foot a { color: var(--digit); font-weight: 700; }

/* ─── the two things ──────────────────────────────────────────── */

.honest-body { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.honest-body p { color: var(--soft); font-size: 15.5px; line-height: 1.55; }
.honest-body p strong { color: var(--cream); font-weight: 700; }

/* ─── the foot ────────────────────────────────────────────────── */

.foot { margin-top: 56px; padding-top: 18px; border-top: 2px solid var(--frame-2); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-links a { font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--amber); padding-bottom: 1px; }
.legal { width: 100%; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 100ch; }

.reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ─── the law page ────────────────────────────────────────────── */

.doc-intro { max-width: 900px; margin: 26px 0 0; }
.doc-intro .sub { color: var(--soft); font-size: 17px; max-width: 70ch; margin-top: 4px; }
.stages { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.stages a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 9px; text-decoration: none; background: var(--frame); border: 2px solid var(--frame-2); border-radius: 6px; color: var(--muted); font-weight: 700; font-size: 12px; line-height: 1.15; text-align: center; }
.stages a b { font-size: 15px; color: var(--amber); }
.stages a:hover { border-color: var(--amber); color: var(--cream); }
.stages a.active { background: var(--amber); border-color: var(--amber); color: var(--wall); }
.stages a.active b { color: var(--wall); }
.articles { padding-top: 40px; max-width: 880px; }
.art { margin-bottom: 44px; scroll-margin-top: 20px; }
.art h2 { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: 26px; line-height: 1.1; margin-bottom: 14px; }
.art h2 .n { flex: none; min-width: 40px; height: 36px; padding: 0 9px; border-radius: 6px; background: var(--amber); color: var(--wall); display: grid; place-items: center; font-size: 14px; }
.art h3 { font-weight: 800; font-size: 19px; margin: 22px 0 8px; }
.art p { margin-bottom: 14px; max-width: 72ch; color: var(--soft); }
.art strong { color: var(--cream); font-weight: 700; }
.art ul, .art ol { margin: 0 0 16px; padding-left: 24px; max-width: 72ch; color: var(--soft); }
.art li { margin-bottom: 8px; }
.panel-note { background: var(--frame); border: 2px solid var(--frame-2); border-left: 6px solid var(--amber); border-radius: 10px; padding: 16px 20px; margin: 18px 0 22px; max-width: 76ch; }
.panel-note p { color: var(--cream); margin: 0; }
.panel-note p + p { margin-top: 10px; }
.panel-note.hot { border-left-color: var(--red); }
.tbl { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15.5px; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--soft); }
.tbl th { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); border-bottom: 2px solid var(--frame-2); }
.tbl .set { font-weight: 700; color: var(--amber); }
.red { color: var(--amber); font-weight: 700; }

/* ─── narrow ──────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .fields { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  .under { grid-template-columns: 1fr; }
  .laws { grid-template-columns: 1fr; }
  .honest-body { grid-template-columns: 1fr; }
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .steps-tbl { width: 100%; }
  .steps-tbl th, .steps-tbl td { white-space: normal; padding: 9px 8px; }
  .masthead { padding-top: 12px; }
  .plates { gap: 6px; }
  .plate { height: 38px; padding: 0 10px; font-size: 12px; }
  .lesson { margin: 20px 0 22px; }
  .three li { font-size: 16px; grid-template-columns: 30px 1fr; gap: 10px; }
  .three b { width: 30px; height: 30px; font-size: 13px; }
  .panel { padding: 18px 14px 16px; border-radius: 14px; }
  .fields { gap: 18px 14px; }
  .field.reserve, .field.burned { grid-column: 1 / -1; }   /* six cells need the whole width on a phone */
  .cells { --cw: 40px; --ch: 60px; --cf: 44px; gap: 4px; }
  .field.streak .cells { --cw: 52px; --ch: 76px; --cf: 58px; }
  .cells .dot { font-size: 26px; padding-bottom: 8px; }
  .field .sub { font-size: 12.5px; }
  .strip { grid-template-columns: 1fr; gap: 10px; }
  .lamps i { width: 18px; height: 10px; }
  .caption { font-size: 17px; }
  .keys { width: 100%; }
  .key { flex: 1; min-width: 0; }
  .notice { padding: 24px 18px 20px; }
  .notice h2 { font-size: 30px; }
  .h1 { font-size: clamp(28px, 8vw, 36px); }
}

/* ─── still ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cell.flipping .flip-top, .cell.flipping .flip-bottom { animation: none; visibility: hidden; }
  .key { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}