/* ============================================================
   GUICHET 9 — components.css
   Topbar, hero, stamps, saturation gauge, guichets, preorder, footer
   ============================================================ */

/* ---------- STAMP ---------- */
.stamp {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--red); white-space: nowrap;
  border: 3px solid var(--red); padding: .28em .6em .2em;
  border-radius: 4px; transform: rotate(-4deg);
  opacity: .85; line-height: 1; position: relative;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.06' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1.1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size: 180px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.06' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1.1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: 180px;
}
.stamp.ink { color: var(--ink); border-color: var(--ink); }
.stamp.sm { font-size: 13px; border-width: 2px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content:center; gap: .6em;
  font-family: var(--mono); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: 14px;
  padding: 15px 26px; border: 2px solid var(--ink); color: var(--ink);
  background: transparent; border-radius: 3px;
  transition: transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  position: relative;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--red); border-color: var(--red); color: #f6ecda;
  box-shadow: 4px 4px 0 rgba(29,29,29,.22);
}
[data-theme="dark"] .btn--primary { color: #14120d; }
.btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); box-shadow: 6px 6px 0 rgba(29,29,29,.25); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--block { width: 100%; }
.btn .arrow { transition: transform .2s var(--ease); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
.btn:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px) scaleX(-1); }

/* ---------- TOPBAR ---------- */
.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(8px) saturate(1.1);
  border-bottom: 1px solid var(--hairline);
  transition: transform .35s var(--ease), background .3s var(--ease);
}
.topbar__strip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--ink-mute); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items:center; gap: 16px;
  padding: 5px 0; border-bottom: 1px solid var(--hairline);
}
.topbar__strip .seg { display: flex; gap: 4px; align-items:center; }
.topbar__strip .tick { width: 14px; height: 9px; background: var(--ink-faint); display:inline-block; }
.topbar__strip .tick.r { background: var(--red); }
.topbar__main {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding-block: 11px; min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 30px; width: auto; }
[data-theme="dark"] .brand img { filter: invert(1) brightness(1.6) contrast(1.1); }
.nav { display: flex; gap: 26px; align-items: center; }
.nav a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); position: relative; padding-block: 4px;
}
.nav a::after { content:""; position:absolute; inset-inline:0; bottom:0; height:1.5px; background: var(--red); transform: scaleX(0); transform-origin: inline-start; transition: transform .25s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.topbar__actions { display:flex; align-items:center; gap: 14px; }

/* theme toggle */
.theme-toggle { width: 40px; height: 40px; border: 1px solid var(--panel-line-2); border-radius: 7px;
  display:flex; align-items:center; justify-content:center; color: var(--ink-soft);
  transition: background .2s, color .2s, border-color .2s; }
.theme-toggle:hover { background: var(--stamp-ghost); color: var(--ink); border-color: var(--panel-line); }
.theme-toggle .ic-moon { display:none; }
[data-theme="dark"] .theme-toggle .ic-sun { display:none; }
[data-theme="dark"] .theme-toggle .ic-moon { display:block; }

/* language switcher — click dropdown (works on every device) */
.lang { position: relative; }
.lang__toggle {
  display:flex; align-items:center; gap:7px; height:40px; padding:0 11px;
  border: 1px solid var(--panel-line-2); border-radius: 7px;
  font-family: var(--mono); font-size: 12.5px; font-weight:600; letter-spacing:.06em;
  color: var(--ink-soft); text-transform:uppercase; transition: background .15s, color .15s, border-color .15s;
}
.lang__toggle:hover { background: var(--stamp-ghost); color: var(--ink); border-color: var(--panel-line); }
.lang__toggle svg { color: var(--ink-mute); flex:none; }
.lang__chev { transition: transform .2s var(--ease); }
.lang[data-open="true"] .lang__chev { transform: rotate(180deg); }
.lang__menu {
  position:absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 80;
  min-width: 178px; list-style:none; margin:0; padding:6px;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 10px;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform: translateY(-6px) scale(.98); transform-origin: top;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.lang[data-open="true"] .lang__menu { opacity:1; visibility:visible; transform: none; }
.lang__menu button {
  display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  padding: 10px 11px; border-radius: 6px; font-family: var(--body); font-size: 14px; color: var(--ink-soft);
  transition: background .14s, color .14s;
}
.lang__menu button b { font-family: var(--mono); font-size: 11px; font-weight:700; letter-spacing:.08em; color: var(--ink-mute); min-width: 22px; }
.lang__menu button:hover { background: var(--stamp-ghost); color: var(--ink); }
.lang__menu button[aria-selected="true"] { color: var(--ink); }
.lang__menu button[aria-selected="true"] b { color: var(--red); }
.lang__menu button[aria-selected="true"]::after { content:"✓"; margin-inline-start:auto; color: var(--red); font-size:13px; }
[dir="rtl"] .lang__menu button { text-align:start; }

.menu-toggle { display:none; width: 42px; height: 42px; border: 1px solid var(--panel-line-2); border-radius:3px; align-items:center; justify-content:center; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { content:""; display:block; width:18px; height:2px; background: var(--ink); position:relative; transition: .25s; }
.menu-toggle span::before { position:absolute; top:-6px; } .menu-toggle span::after { position:absolute; top:6px; }

/* ---------- SATURATION GAUGE (fixed) ---------- */
.gauge {
  position: fixed; inset-block-start: 50%; inset-inline-end: 14px; transform: translateY(-50%);
  z-index: 55; width: var(--gauge-w);
  background: var(--panel); border: 1.5px solid var(--panel-line);
  border-radius: 8px; padding: 10px 8px 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s, transform .5s var(--ease);
}
.gauge.show { opacity: 1; visibility: visible; }
.gauge__head { text-align:center; font-family: var(--mono); }
.gauge__head .t { font-size: 10px; font-weight:700; letter-spacing: .16em; }
.gauge__head .s { font-size: 7.5px; letter-spacing: .14em; color: var(--ink-mute); display:block; margin-top:1px; }
.gauge__scale { display:flex; flex-direction:column; gap: 3px; margin-top: 9px; }
.gauge__cell {
  position: relative; height: 26px; border: 1px solid var(--panel-line-2); border-radius: 3px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink-faint);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.gauge__cell.filled { color: var(--paper); background: var(--ink-soft); border-color: var(--ink-soft); }
.gauge__cell.crit { color: var(--red); border-color: var(--red); }
.gauge__cell.crit.filled { background: var(--red); border-color: var(--red); color: #f6ecda; }
.gauge__cell[data-n="9"].filled { background: var(--red-crit); border-color: var(--red-crit); }
.gauge__cell.active { transform: scale(1.06); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px currentColor; z-index:2; }
.gauge__zone { position:absolute; inset-inline-end: 100%; margin-inline-end: 6px; white-space:nowrap; font-family:var(--mono); font-size:8px; letter-spacing:.1em; color: var(--red); text-align:end; line-height:1.1; opacity:0; transition:opacity .3s; }
[dir="rtl"] .gauge__zone { text-align:start; }
.gauge__cell.active .gauge__zone { opacity:1; }

/* mobile slim progress */
.satbar { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 70; background: transparent; display:none; }
.satbar__fill { height:100%; width:0; background: linear-gradient(90deg, var(--g01), var(--g05) 55%, var(--red) 78%, var(--red-crit)); transition: width .2s linear; }
.satbadge { display:none; }

/* ---------- HERO ---------- */
.hero { padding-block: clamp(104px, 13vw, 150px) clamp(44px,6vw,76px); position: relative; z-index:1; overflow: clip; }
.hero__grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,64px); align-items:center; }
.hero__eyebrow { display:flex; flex-wrap:wrap; gap: 10px 18px; align-items:center; margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(46px, 8.5vw, 104px);
  text-transform: uppercase;
}
.hero h1 .red { color: var(--red); display:block; }
.hero__lead { font-size: clamp(17px, 2.1vw, 21px); color: var(--ink-soft); max-width: 30em; margin-top: 24px; }
.hero__meta { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 26px; }
.chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 12px; border: 1px solid var(--panel-line-2); border-radius: 100px; color: var(--ink-soft);
  display:inline-flex; align-items:center; gap:7px;
}
.chip b { color: var(--ink); font-weight:700; }
.hero__cta { display:flex; flex-wrap:wrap; gap: 14px; margin-top: 34px; }

/* hero document visual */
.doc {
  position: relative; background: var(--panel); border: 1.5px solid var(--panel-line);
  border-radius: 10px; padding: 14px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.5);
  transform: rotate(1.2deg);
}
.doc::before { /* inner hairline frame */
  content:""; position:absolute; inset:7px; border: 1px solid var(--panel-line-2); border-radius: 6px; pointer-events:none;
}
.doc__corner { position:absolute; width: 16px; height:16px; border:2px solid var(--ink-mute); }
.doc__corner.tl { inset-block-start:3px; inset-inline-start:3px; border-inline-end:none; border-block-end:none; }
.doc__corner.tr { inset-block-start:3px; inset-inline-end:3px; border-inline-start:none; border-block-end:none; }
.doc__corner.bl { inset-block-end:3px; inset-inline-start:3px; border-inline-end:none; border-block-start:none; }
.doc__corner.br { inset-block-end:3px; inset-inline-end:3px; border-inline-start:none; border-block-start:none; }
.doc img { border-radius: 4px; width:100%; }
.doc--bare { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; transform: none; }
.doc--bare::before { display: none; }
.doc--bare img { border-radius: 0; }
.doc__stamp { position:absolute; z-index:3; }
.doc__stamp.one { inset-block-start: 6%; inset-inline-end: -4%; transform: rotate(8deg); font-size: 17px; }
.doc__stamp.two { inset-block-end: 9%; inset-inline-start: -3%; transform: rotate(-7deg); font-size: 14px; }
/* hero box "Vérifié" tampon — affixed, legible over the photo */
.doc__stamp--hero {
  inset-block-end: 6.5%; inset-inline-end: 4.5%;
  transform: rotate(-8deg);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.55);
}
@media (max-width: 520px) { .doc__stamp--hero { inset-inline-end: 5%; inset-block-end: 5%; } }

/* ---------- MARQUEE strip ---------- */
.marquee { border-block: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); overflow: hidden; padding-block: 11px; position:relative; z-index:1; }
.marquee__track { display:flex; gap: 0; white-space: nowrap; width: max-content; animation: slide calc(36s / var(--anim-scale)) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; padding-inline: 26px; display:inline-flex; align-items:center; gap: 26px; }
.marquee__track span::after { content:"●"; color: var(--red); font-size:9px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .marquee__track { animation-name: slideR; }
@keyframes slideR { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- SECTION SHELL ---------- */
.sec-head { display:flex; flex-direction:column; gap: 14px; margin-bottom: clamp(30px,4.5vw,52px); max-width: 38em; align-items:center; text-align:center; margin-inline:auto; }
.sec-head .section-num { justify-content:center; }
.sec-head.center { margin-inline:auto; text-align:center; align-items:center; }
.sec-head h2 { font-size: clamp(32px, 5vw, 60px); text-transform: uppercase; }
.sec-head p { color: var(--ink-soft); font-size: clamp(16px,1.9vw,19px); }

/* ---------- PILLARS ---------- */
.pillars { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar { background: var(--panel); border: 1.5px solid var(--panel-line); border-radius: 8px; padding: 28px 24px 26px; position:relative; overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(0,0,0,.5); }
.pillar__n { font-family: var(--mono); font-size: 12px; letter-spacing:.16em; color: var(--ink-mute); }
.pillar h3 { font-size: 27px; text-transform:uppercase; margin: 14px 0 10px; }
.pillar p { color: var(--ink-soft); font-size: 15.5px; }
.pillar__bar { position:absolute; inset-inline-start:0; inset-block-start:0; width:5px; height:100%; }

/* ---------- SATURATION feature section ---------- */
.sat-feature { background: var(--paper-2); border-block: 1.5px solid var(--panel-line-2); }
.sat-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,80px); align-items:center; }
.sat-levels { display:flex; flex-direction:column; gap: 0; border: 1.5px solid var(--panel-line); border-radius: 8px; overflow:hidden; background: var(--panel); }
.sat-row { display:grid; grid-template-columns: 76px 1fr; gap: 16px; align-items:center; padding: 16px 18px; border-bottom: 1px solid var(--hairline); transition: background .3s; }
.sat-row:last-child { border-bottom:none; }
.sat-row__n { font-family: var(--display); font-weight:700; font-size: 34px; line-height:1; color: var(--ink-faint); transition: color .3s; }
.sat-row__t b { display:block; font-family: var(--mono); font-size: 12px; letter-spacing:.12em; text-transform:uppercase; }
.sat-row__t span { font-size: 14.5px; color: var(--ink-soft); }
.sat-row.is-on { background: var(--stamp-ghost); }
.sat-row.is-on .sat-row__n { color: var(--ink); }
.sat-row.crit.is-on { background: color-mix(in srgb, var(--red) 12%, transparent); }
.sat-row.crit.is-on .sat-row__n, .sat-row.crit .sat-row__t b { color: var(--red); }
.sat-bignum { font-family: var(--display); font-weight:700; font-size: clamp(160px, 26vw, 340px); line-height:.8; color: var(--ink); position:relative; }
.sat-bignum .lbl { position:absolute; inset-inline-start:0; inset-block-end: 6%; font-family:var(--mono); font-size:13px; letter-spacing:.18em; color: var(--ink-mute); }

/* ---------- GUICHETS (procedure) ---------- */
.guichets { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guichet { background: var(--panel); border: 1.5px solid var(--gc, var(--panel-line)); border-radius: 8px; overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; flex-direction:column; }
.guichet:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -26px rgba(0,0,0,.5); }
.guichet__top { display:flex; align-items:stretch; gap:0; border-bottom: 1.5px solid var(--gc); }
.guichet__num { background: var(--gc); color: #f6ecda; font-family: var(--mono); font-weight:700; font-size: 16px; display:flex; align-items:center; padding: 12px 14px; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); padding-inline-end: 22px; }
[data-theme="dark"] .guichet__num { color:#14120d; }
.guichet__title { padding: 11px 14px; }
.guichet__title b { font-family: var(--display); font-weight:700; font-size: 22px; text-transform:uppercase; display:block; line-height:1; }
.guichet__title span { font-family: var(--mono); font-size: 9.5px; letter-spacing:.2em; color: var(--ink-mute); }
.guichet__body { padding: 16px 16px 14px; flex:1; }
.guichet__req { font-family: var(--mono); font-size: 11px; letter-spacing:.06em; color: var(--ink-soft); text-transform:uppercase; }
.guichet__req .o { color: var(--gc); font-weight:700; }
.guichet__foot { padding: 9px 14px; border-top: 1px dashed var(--panel-line-2); font-family: var(--mono); font-size: 9px; letter-spacing:.18em; color: var(--ink-mute); text-transform:uppercase; display:flex; justify-content:space-between; }

/* ---------- TWIST split ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items:start; }
.fact { display:grid; grid-template-columns: auto 1fr; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--hairline); }
.fact:last-child { border-bottom:none; }
.fact__k { font-family: var(--display); font-weight:700; font-size: 30px; color: var(--red); line-height:1; min-width: 1.4em; }
.fact__b b { display:block; font-family:var(--mono); font-size: 12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px; }
.fact__b p { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- CHARACTERS (full card illustrations) ---------- */
.chars { display:grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ccard { position:relative; }
.ccard__inner {
  position:relative; border-radius: 12px; overflow:hidden;
  border: 1px solid var(--panel-line-2);
  box-shadow: 0 14px 30px -20px rgba(0,0,0,.55);
  transform: translateZ(0);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  animation: ccfloat calc(6s / var(--anim-scale)) ease-in-out infinite;
  animation-delay: calc(var(--ci) * -0.9s);
}
.ccard__inner img { width:100%; aspect-ratio: 1024/1536; object-fit: cover; display:block; }
.ccard__shine {
  position:absolute; inset:0; pointer-events:none; border-radius:12px;
  background: linear-gradient(115deg, transparent 38%, rgba(255,248,230,.55) 50%, transparent 62%);
  background-size: 250% 100%; background-position: 150% 0; opacity:0;
  transition: opacity .2s var(--ease);
}
.ccard:hover .ccard__inner {
  transform: translateY(-10px) scale(1.035) rotate(-.6deg);
  box-shadow: 0 30px 50px -22px rgba(0,0,0,.6);
  animation-play-state: paused;
}
.ccard:hover .ccard__shine { opacity:1; animation: ccshine .9s var(--ease) forwards; }
@keyframes ccfloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}
@keyframes ccshine { from { background-position: 150% 0; } to { background-position: -90% 0; } }
[data-theme="dark"] .ccard__inner { box-shadow: 0 16px 34px -18px rgba(0,0,0,.8); border-color: rgba(236,225,206,.14); }
@media (prefers-reduced-motion: reduce) { .ccard__inner { animation: none; } }

/* ---------- IN THE BOX ---------- */
.box-photo {
  margin: clamp(36px, 5vw, 56px) 0 clamp(28px, 4vw, 40px);
  border: 1.5px solid var(--panel-line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}
.box-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.box-photo figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.box-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,5vw,64px); align-items:center; }
.manifest { border:1.5px solid var(--panel-line); border-radius:8px; background:var(--panel); overflow:hidden; }
.manifest__row { display:grid; grid-template-columns: 64px 1fr auto; align-items:center; gap:14px; padding: 14px 18px; border-bottom:1px solid var(--hairline); font-size:15px; }
.manifest__row:last-child { border-bottom:none; }
.manifest__row .q { font-family:var(--display); font-weight:700; font-size: 26px; color: var(--red); line-height:1; }
.manifest__row .n { font-family: var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-mute); }

/* ---------- PREORDER ---------- */
.preorder { background: var(--paper-2); border-block: 1.5px solid var(--panel-line-2); }
.po-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items:start; }
.editions { display:flex; flex-direction:column; gap: 14px; }
.edition { border: 1.5px solid var(--panel-line); border-radius: 8px; background: var(--panel); padding: 20px 22px; cursor:pointer; position:relative; transition: border-color .2s, box-shadow .2s, transform .2s; display:flex; gap: 16px; align-items:flex-start; }
.edition:hover { transform: translateY(-2px); }
.edition.sel { border-color: var(--red); box-shadow: 0 0 0 1.5px var(--red), 6px 6px 0 rgba(176,57,43,.14); }
.edition__radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--panel-line); margin-top:3px; flex:none; position:relative; transition:.2s; }
.edition.sel .edition__radio { border-color: var(--red); }
.edition.sel .edition__radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background: var(--red); }
.edition__body { flex:1; }
.edition__body h4 { font-family:var(--display); font-weight:700; font-size: 24px; text-transform:uppercase; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.edition__price { font-family: var(--mono); font-weight:600; font-size: 18px; color: var(--red); }
.edition__body p { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.edition__localnote { font-family: var(--mono); font-size: 11px; letter-spacing:.04em; color: var(--ink-mute); margin-top: 7px !important; display:flex; align-items:center; gap:7px; }
.edition__localnote::before { content:""; width:5px; height:5px; border-radius:50%; background: var(--red); flex:none; }
.edition__tag { position:absolute; inset-block-start:-10px; inset-inline-end:16px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; background: var(--red); color:#f6ecda; padding: 3px 8px; border-radius:3px; }
[data-theme="dark"] .edition__tag{color:#14120d;}

.po-form { border:1.5px solid var(--panel-line); border-radius:8px; background:var(--panel); padding: clamp(22px,3vw,32px); position:relative; }
.po-form .formcode { position:absolute; inset-block-start:12px; inset-inline-end:16px; font-family:var(--mono); font-size:9px; letter-spacing:.14em; color: var(--ink-faint); }
.field { margin-bottom: 16px; }
.field label { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-mute); display:block; margin-bottom:6px; }
.field label .opt-tag { color: var(--ink-faint); letter-spacing:.06em; }
.field input, .field select {
  width:100%; font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--panel-line-2); border-radius: 4px; padding: 12px 14px; transition: border-color .2s;
}
.field input:focus, .field select:focus { outline:none; border-color: var(--red); }
.field.row { display:grid; grid-template-columns: 1fr 110px; gap: 12px; }
.po-fine { font-family:var(--mono); font-size: 10.5px; letter-spacing:.04em; color: var(--ink-mute); margin-top: 12px; line-height:1.5; }
.po-error { color: var(--red); font-family:var(--mono); font-size:12px; margin-top:-8px; margin-bottom:12px; display:none; }
.po-error.show { display:block; }

/* interest counter */
.counter { display:flex; align-items:baseline; gap:14px; margin-bottom: 22px; }
.counter__big { font-family: var(--display); font-weight:700; font-size: clamp(48px,7vw,76px); line-height:.85; color: var(--red); font-variant-numeric: tabular-nums; }
.counter__lbl { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); max-width:14em; }
.progressbar { height: 10px; border:1.5px solid var(--panel-line); border-radius: 100px; overflow:hidden; background: var(--paper); margin-bottom: 8px; }
.progressbar__fill { height:100%; background: repeating-linear-gradient(45deg, var(--red) 0 8px, var(--red-deep) 8px 16px); width:0; transition: width 1s var(--ease); }
.progress-meta { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }

/* confirmation receipt */
.receipt { display:none; text-align:center; padding: 20px 0; }
.receipt.show { display:block; animation: pop .5s var(--ease); }
@keyframes pop { from { opacity:0; transform: scale(.92); } to { opacity:1; transform:scale(1); } }
.receipt .big-stamp { display:inline-flex; font-family:var(--display); font-weight:700; font-size: 34px; text-transform:uppercase; color: var(--red); border:4px solid var(--red); padding: 10px 22px; border-radius:6px; transform: rotate(-5deg); letter-spacing:.04em; }
.receipt h4 { font-family:var(--display); font-size:26px; text-transform:uppercase; margin: 22px 0 8px; }
.receipt p { color: var(--ink-soft); font-size:15px; }
.receipt .ref { font-family:var(--mono); font-size:13px; letter-spacing:.1em; color: var(--ink); margin-top:14px; }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); color: var(--paper); padding-block: 56px 30px; position:relative; z-index:1; }
[data-theme="dark"] .footer { background: #0c0a07; border-top:1px solid var(--panel-line-2); }
.footer .wrap { color: inherit; }
.footer__top { display:flex; flex-wrap:wrap; justify-content:space-between; gap: 30px; align-items:flex-start; padding-bottom: 30px; border-bottom: 1px solid rgba(244,231,212,.16); }
.footer__brand img { height: 38px; }
.footer__brand p { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color: rgba(244,231,212,.6); text-transform:uppercase; margin-top:14px; max-width:24em; }
.footer__cols { display:flex; gap: 60px; flex-wrap:wrap; }
.footer__col h5 { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: rgba(244,231,212,.5); margin-bottom:14px; }
.footer__col a { display:block; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color: rgba(244,231,212,.85); padding-block:5px; transition: color .2s; }
.footer__col a:hover { color: var(--red); }
.footer__bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center; padding-top: 24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: rgba(244,231,212,.5); }
.barcode { height: 34px; width: 150px; background: repeating-linear-gradient(90deg, var(--paper) 0 2px, transparent 2px 4px, var(--paper) 4px 5px, transparent 5px 9px, var(--paper) 9px 12px, transparent 12px 14px); opacity:.85; }

/* ---------- reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.40s; }

/* ---- Promise: pillar accent bar draws down + content lifts ---- */
.pillar__bar { transform-origin: top; transform: scaleY(0); transition: transform .8s var(--ease) .15s; }
.pillar.in .pillar__bar { transform: scaleY(1); }
.pillar .pillar__n, .pillar h3, .pillar p { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pillar:not(.in) .pillar__n, .pillar:not(.in) h3, .pillar:not(.in) p { opacity: 0; transform: translateY(10px); }
.pillar.in .pillar__n { transition-delay:.18s; }
.pillar.in h3 { transition-delay:.26s; }
.pillar.in p { transition-delay:.34s; }

/* ---- Twist: sticky heading only on wide screens (avoids mobile overlap) ---- */
.twist-head { position: static; }
@media (min-width: 1041px) { .twist-head { position: sticky; top: 120px; align-self: start; } }

/* ---- Twist: facts slide in from the side + number pops ---- */
.facts .fact.reveal { transform: translateX(-26px); }
[dir="rtl"] .facts .fact.reveal { transform: translateX(26px); }
.facts .fact.reveal.in { transform: none; }
.fact__k { display:inline-block; transition: transform .55s var(--ease), opacity .55s var(--ease); }
.fact.reveal:not(.in) .fact__k { transform: scale(.5) translateY(6px); opacity: 0; }
.fact.reveal.in .fact__k { transform: none; opacity: 1; transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; }
  .pillar__bar { transform: scaleY(1); }
  .pillar .pillar__n, .pillar h3, .pillar p,
  .facts .fact.reveal, .fact__k { opacity:1 !important; transform:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; }
  .doc { max-width: 460px; margin-inline:auto; }
  .sat-grid, .box-grid, .po-grid, .split { grid-template-columns: 1fr; }
  .chars { grid-template-columns: repeat(3, 1fr); }
  .guichets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .nav { display:none; }
  .menu-toggle { display:flex; }
  .topbar__strip .hide-sm { display:none; }
  .gauge { display:none; }
  .satbar { display:block; }
  .satbadge { display:flex; }
  .pillars { grid-template-columns: 1fr; }
  .guichets { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(40px, 13vw, 72px); }
  .field.row { grid-template-columns: 1fr; }
  /* mobile nav drawer */
  .nav.open { display:flex; position:fixed; inset: 0; inset-block-start: 92px; flex-direction:column; gap:0; background: var(--paper); padding: 10px var(--gutter); z-index:59; border-top:1px solid var(--hairline); }
  .nav.open a { padding: 18px 0; border-bottom:1px solid var(--hairline); font-size:18px; }
}
@media (max-width: 460px) {
  .chars { grid-template-columns: repeat(2, 1fr); }
  .counter { flex-direction:column; gap:6px; }
}

/* mobile saturation badge */
.satbadge {
  position: fixed; inset-block-start: 12px; inset-inline-end: 12px; z-index: 71;
  width: 40px; height: 40px; border-radius: 8px; background: var(--panel); border: 1.5px solid var(--panel-line);
  align-items:center; justify-content:center; font-family: var(--display); font-weight:700; font-size: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: background .3s, color .3s, border-color .3s;
}
.satbadge.crit { background: var(--red); color: #f6ecda; border-color: var(--red); }

/* ============================================================
   HERO LOGO (prominent)
   ============================================================ */
.hero__logo { display:block; margin-bottom: 26px; }
.hero__logo img { height: clamp(64px, 9vw, 116px); width:auto; }
@media (max-width:1040px){ .hero__logo img{ height: clamp(56px,13vw,92px); } }

/* ============================================================
   CHARACTER CARDS — see .ccard rules above
   ============================================================ */

/* ============================================================
   SATURATION — scroll-driven section
   ============================================================ */
.satscroll { position: relative; height: 320vh; background: var(--paper-2); }
.satscroll__sticky { position: sticky; inset-block-start: 0; height: 100vh; height: 100svh; min-height: 600px;
  display:flex; align-items:center; overflow:hidden; border-block:1.5px solid var(--panel-line-2);
  transition: background .5s var(--ease); }
[data-zone="crit"] .satscroll__sticky { background: color-mix(in srgb, var(--red) 7%, var(--paper-2)); }
[data-zone="max"]  .satscroll__sticky { background: color-mix(in srgb, var(--red) 14%, var(--paper-2)); }
.satscroll__tint { position:absolute; inset:0; opacity:0; pointer-events:none; mix-blend-mode: multiply;
  background: radial-gradient(130% 100% at 50% 125%, var(--red-crit), transparent 62%); }
[data-theme="dark"] .satscroll__tint { mix-blend-mode: screen; }
.satscroll__inner { position:relative; z-index:2; width:100%; }
.satscroll__head { max-width: 36em; margin-bottom: clamp(26px,4vw,48px); }
.satscroll__head .section-num { display:flex; margin-bottom: 14px; }
.satscroll__head h2 { font-size: clamp(32px,5.2vw,62px); text-transform:uppercase; }
.satscroll__head p { color: var(--ink-soft); font-size: clamp(16px,1.9vw,19px); margin-top: 12px; }
.satscroll__stage { display:grid; grid-template-columns: auto 1fr; gap: clamp(24px,5vw,70px); align-items:center; }
.satscroll__numwrap { display:flex; align-items:baseline; gap:10px; }
.satscroll__num { font-family:var(--display); font-weight:700; font-size: clamp(150px, 25vw, 360px);
  line-height:.76; color: var(--ink); font-variant-numeric: tabular-nums; transition: color .4s var(--ease); }
.satscroll__den { font-family:var(--display); font-weight:700; font-size: clamp(40px,6vw,92px); color: var(--ink-faint); }
[data-zone="crit"] .satscroll__num, [data-zone="max"] .satscroll__num { color: var(--red); }
[data-zone="max"] .satscroll__num { animation: satpulse 1.1s ease-in-out infinite; }
@keyframes satpulse { 50% { opacity:.5; } }
.satscroll__meter { display:flex; gap:5px; margin-bottom: 24px; }
.ssm { flex:1; height: 48px; border:1.5px solid var(--panel-line-2); border-radius:5px; display:flex;
  align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:16px;
  color:var(--ink-faint); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.ssm.on { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); }
.ssm.crit { border-color: var(--red); color: var(--red); }
.ssm.crit.on { background: var(--red); border-color: var(--red); color:#f6ecda; }
.ssm[data-n="9"].on { background: var(--red-darkest); border-color: var(--red-darkest); color:#f6ecda; }
.ssm.active { transform: translateY(-6px) scale(1.04); box-shadow: 0 10px 20px rgba(0,0,0,.18); z-index:2; }
.satscroll__zone b { font-family:var(--display); font-weight:700; font-size: clamp(24px,3.2vw,40px); text-transform:uppercase; display:block; line-height:1; transition: color .3s; }
.satscroll__zone p { color: var(--ink-soft); font-size: clamp(15px,1.9vw,18px); margin-top:10px; max-width: 28em; min-height: 3em; }
[data-zone="crit"] .satscroll__zone b, [data-zone="max"] .satscroll__zone b { color: var(--red); }
.satscroll__note { margin-top:18px; font-size:12px; letter-spacing:.04em; text-transform:none; color: var(--ink-mute); }
@media (max-width: 880px) {
  .satscroll { height: 300vh; }
  .satscroll__stage { grid-template-columns: 1fr; gap: 18px; }
  .satscroll__num { font-size: clamp(120px, 38vw, 220px); }
  .satscroll__den { font-size: 44px; }
  .ssm { height: 38px; font-size: 13px; }
}
@media (max-width: 480px) {
  .satscroll__sticky { min-height: 540px; }
  .ssm { height: 32px; font-size: 11px; gap:3px; }
  .satscroll__meter { gap:3px; }
}

/* ---------- SATIRE intensity ---------- */
[data-satire="dry"] .marquee { display: none; }
[data-satire="dry"] .doc__stamp { display: none; }
[data-satire="dry"] .satscroll__note { display: none; }
[data-satire="dry"] .stamp { transform: none !important; opacity: .72; -webkit-mask-image: none; mask-image: none; }
[data-satire="dry"] .hero__eyebrow .stamp { border-style: solid; }
[data-satire="maximal"] .doc__stamp.one { font-size: 20px; }
[data-satire="maximal"] .hero__eyebrow .stamp { transform: rotate(-6deg); }

/* ---------- ANIMATION off ---------- */
body.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body.no-anim .marquee__track { animation: none; }
body.no-anim [data-par] { transform: none !important; }

/* ============================================================
   READING BAR (top scroll progress)
   ============================================================ */
.readbar {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 3px; width: 0;
  background: var(--red); z-index: 75; box-shadow: 0 0 12px color-mix(in srgb, var(--red) 60%, transparent);
  transition: width .12s linear;
}
[dir="rtl"] .readbar { inset-inline-start: auto; inset-inline-end: 0; }

/* parallax layers move via JS transform; this just smooths it */
[data-par] { will-change: transform; }

/* ============================================================
   TOUR OF PLAY (inside the Procedure section)
   ============================================================ */
.turn { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(36px, 5vw, 64px); border-top: 1.5px dashed var(--panel-line-2); }
.turn__intro { max-width: 60ch; margin-bottom: 30px; }
.turn__intro h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 3.4vw, 40px); line-height: 1; }
.turn__intro p { color: var(--ink-soft); font-size: clamp(15px, 1.8vw, 18px); margin-top: 12px; }
.turn__body { display: grid; grid-template-columns: 160px 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
@media (max-width: 720px) { .turn__body { grid-template-columns: 1fr; gap: 24px; } }
.turn__clock { position: sticky; top: 120px; display: flex; justify-content: center; }
@media (max-width: 720px) { .turn__clock { position: static; } }
.turn__dial { width: 128px; height: 128px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--panel-line);
  position: relative; display: grid; place-items: center; box-shadow: 0 14px 34px -24px rgba(0,0,0,.5); }
.turn__ring { position: absolute; inset: -1.5px; width: calc(100% + 3px); height: calc(100% + 3px); }
#turnArc { transition: stroke-dashoffset .6s var(--ease); }
.turn__read { text-align: center; line-height: 1; }
.turn__read b { font-family: var(--display); font-weight: 700; font-size: 46px; display: block; }
.turn__read small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); }
.turn__steps { display: flex; flex-direction: column; gap: 4px; }
.tstep { display: flex; gap: 16px; text-align: start; padding: 15px 16px; border-radius: 8px;
  position: relative; transition: opacity .35s var(--ease), background .25s var(--ease); }
.tstep:not(.on) { opacity: .5; }
.tstep.on { background: var(--stamp-ghost); }
.tstep__k { font-family: var(--mono); font-weight: 700; font-size: 13px; width: 30px; height: 30px;
  border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--panel-line); color: var(--ink-mute); background: var(--panel);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.tstep.on .tstep__k { color: #f6ecda; background: var(--red); border-color: var(--red); }
[data-theme="dark"] .tstep.on .tstep__k { color: #14120d; }
.tstep--danger.on .tstep__k { background: var(--red-crit); border-color: var(--red-crit); }
.tstep__c { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.tstep__time { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.tstep.on .tstep__time { color: var(--red); }
.tstep__c b { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(17px, 2vw, 21px); line-height: 1.04; }
.tstep__c span { color: var(--ink-soft); font-size: 14.5px; max-width: 60ch; line-height: 1.45; }

/* ============================================================
   FAQ
   ============================================================ */
.faqlist { max-width: 880px; margin-inline: auto; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--panel-line-2); }
.faqlist .qa { border-bottom: 1px solid var(--panel-line-2); }
.faqlist .qa__q { width: 100%; text-align: start; display: flex; align-items: center; gap: 18px; padding: 20px 4px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(17px, 2.2vw, 23px); color: var(--ink); }
.faqlist .qa__pm { margin-inline-start: auto; font-family: var(--mono); font-weight: 400; font-size: 26px; color: var(--red);
  transition: transform .35s var(--ease); flex: none; }
.faqlist .qa.open .qa__pm { transform: rotate(45deg); }
.faqlist .qa__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faqlist .qa__a p { padding: 0 4px 22px; color: var(--ink-soft); font-size: clamp(14.5px, 1.7vw, 16.5px); max-width: 74ch; }

/* ============================================================
   SCARCITY / social proof (Reserve)
   ============================================================ */
.po-scarcity { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.po-scarcity__left { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); text-transform: uppercase; }
.po-scarcity__left b { color: var(--red); font-weight: 700; }
.po-scarcity__left .blip { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none;
  animation: po-blip 1.5s ease-in-out infinite; }
@keyframes po-blip { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.po-scarcity__tag { text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute);
  border: 1px solid var(--panel-line-2); border-radius: 100px; padding: 5px 12px; }
body.no-anim .po-scarcity__left .blip { animation: none; }

/* ============================================================
   BOX EXHIBIT — clean vector flat-lay, transparent, multilingual
   ============================================================ */
.box-exhibit {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.05fr 1.5fr;
  grid-template-areas:
    "box   board"
    "cards board"
    "cards extras";
  gap: clamp(22px, 3vw, 40px);
  align-items: end;
}
.bx-box    { grid-area: box; }
.bx-board  { grid-area: board; align-self: stretch; }
.bx-cards  { grid-area: cards; }
.bx-extras {
  grid-area: extras;
  display: flex; align-items: end; gap: clamp(18px, 2.5vw, 32px);
}
.bx-extras .bx-tokens { flex: none; }
.bx-extras .bx-rules { flex: 1; }

.bx-piece {
  margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(18px);
  animation: bxIn .7s var(--ease) forwards;
  animation-delay: calc(var(--d, 1) * .12s);
}
.bx-piece[data-d="1"] { --d: 1; } .bx-piece[data-d="2"] { --d: 2; }
.bx-piece[data-d="3"] { --d: 3; } .bx-piece[data-d="4"] { --d: 4; }
.bx-piece[data-d="5"] { --d: 5; }
@keyframes bxIn { to { opacity: 1; transform: translateY(0); } }
body.no-anim .bx-piece { opacity: 1; transform: none; animation: none; }

.bx-cap {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); text-align: center;
}
.bx-cap b { color: var(--red); font-weight: 700; }

/* shared stamp block */
.bx-stamp {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  border: 2.5px solid var(--red); border-radius: 4px;
  padding: 8px 14px; transform: rotate(-3deg); color: var(--red);
}
.bx-stamp b { font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; font-size: clamp(16px, 2vw, 22px); line-height: .9; }
.bx-stamp em { font-family: var(--mono); font-style: normal; font-size: 8.5px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.bx-stamp.sm { padding: 5px 10px; }
.bx-stamp.sm b { font-size: 13px; }

/* BOX */
.bx-box__lid {
  position: relative; aspect-ratio: 4 / 4.2;
  background: linear-gradient(150deg, var(--paper-3), var(--paper));
  border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: 7px 7px 0 rgba(29,29,29,.13), inset 0 0 0 1px var(--paper-edge);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bx-box__lid::before {
  content: ""; position: absolute; inset: 10px; border: 1.5px solid var(--ink-faint);
  border-radius: 5px; pointer-events: none;
}
.bx-box__string {
  position: absolute; inset-block: 0; inset-inline-end: 26%;
  width: 1.5px; background: repeating-linear-gradient(var(--ink-mute) 0 4px, transparent 4px 8px);
  opacity: .5;
}
.bx-box__ref {
  position: absolute; inset-block-start: 14px; inset-inline-start: 16px;
  font-size: 9px; letter-spacing: .1em; color: var(--ink-mute);
}

/* BOARD */
.bx-board__sheet {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: 7px 7px 0 rgba(29,29,29,.13);
  padding: clamp(14px, 1.6vw, 20px); height: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
.bx-board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bx-board__title {
  font-size: clamp(13px, 1.5vw, 17px); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); opacity: .82;
}
.bx-board__sat { display: inline-flex; gap: 5px; align-items: center; }
.bx-board__sat b {
  width: 20px; height: 20px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink-mute);
  border: 1px solid var(--panel-line-2); border-radius: 4px;
}
.bx-board__sat b.hot { color: #f4e7d4; background: var(--red-crit); border-color: var(--red-crit); }
.bx-board__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1;
}
.bx-win {
  position: relative; aspect-ratio: 1 / .82; border-radius: 5px;
  background: color-mix(in srgb, var(--gc) 8%, var(--paper));
  border: 1.5px solid color-mix(in srgb, var(--gc) 45%, var(--panel-line-2));
  display: flex; align-items: flex-start; padding: 7px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bx-win:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(29,29,29,.12); }
.bx-win__n {
  font-family: var(--mono); font-weight: 700; font-size: 11px; font-style: normal;
  color: #f4e7d4; background: var(--gc); border-radius: 3px;
  padding: 2px 6px; letter-spacing: .04em;
}
.bx-win__bar {
  position: absolute; inset-block-end: 7px; inset-inline: 7px; height: 4px;
  border-radius: 2px; background: var(--gc); opacity: .35;
}

/* CARDS */
.bx-cards__fan { display: flex; padding-block: 8px; padding-inline-start: 10px; }
.bx-card {
  width: clamp(46px, 6vw, 66px); aspect-ratio: 2.6 / 3.6; flex: none;
  margin-inline-start: clamp(-20px, -1.6vw, -14px);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(29,29,29,.1);
  display: flex; flex-direction: column; gap: 4px; padding: 7px 6px;
  transform: rotate(calc((var(--i) - 2.5) * 3deg));
  transform-origin: bottom center;
  transition: transform .28s var(--ease), margin .28s var(--ease);
}
.bx-card:first-child { margin-inline-start: 0; }
.bx-cards__fan:hover .bx-card { margin-inline-start: clamp(-6px, -.4vw, -4px); transform: rotate(0); }
.bx-card__tab {
  font-family: var(--mono); font-weight: 700; font-style: normal; font-size: 10px;
  color: #f4e7d4; background: var(--gc); border-radius: 3px; padding: 1px 5px;
  align-self: flex-start; letter-spacing: .03em;
}
.bx-card__name {
  font-family: var(--mono); font-style: normal; font-size: 8.5px; line-height: 1.15;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft);
  margin-block-start: auto;
}

/* TOKENS */
.bx-tokens__row { display: flex; gap: 12px; justify-content: center; padding-block: 6px; }
.bx-tok {
  width: clamp(34px, 4vw, 46px); aspect-ratio: 1; border-radius: 50%;
  background: var(--tc); border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(29,29,29,.13), inset 0 0 0 3px color-mix(in srgb, var(--tc) 60%, #fff);
}

/* RULEBOOK */
.bx-rules__book {
  position: relative; aspect-ratio: 4 / 3; max-width: 200px; margin-inline: auto;
  width: 100%;
  background: linear-gradient(150deg, var(--paper-3), var(--paper));
  border: 2px solid var(--ink); border-radius: 6px;
  box-shadow: 5px 5px 0 rgba(29,29,29,.12);
  display: flex; align-items: center; justify-content: center;
}
.bx-rules__book::before {
  content: ""; position: absolute; inset-block: 6px; inset-inline-start: 12px; width: 2px;
  background: var(--ink-faint); opacity: .6;
}
.bx-rules__lines {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 38%; height: 22px;
  background: repeating-linear-gradient(var(--ink-faint) 0 1.5px, transparent 1.5px 7px);
  opacity: .5;
}

@media (max-width: 760px) {
  .box-exhibit {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "box   board"
      "cards board"
      "cards extras";
    gap: 20px;
  }
}
@media (max-width: 520px) {
  .box-exhibit {
    grid-template-columns: 1fr;
    grid-template-areas: "board" "box" "cards" "extras";
  }
}