/* NW Hub v2 : sobre, plat, une seule couleur d'accent.
   Règles : pas de dégradé sur le texte, pas de halo, pas de verre dépoli
   sauf la barre de nav, coins petits, séparateurs fins. */

:root {
  --bg: #0b0b0d;
  --bg-2: #101013;
  --panel: #141417;
  --panel-2: #1a1a1e;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #ededf0;
  --muted: #9b9ba4;
  --dim: #6a6a73;
  --accent: #8f7cff;
  --ok: #3ecf8e;
  --menu: #1c1c1f;
  --menu-row: #242428;
  --menu-on: #2fbf71;

  --display: "Archivo", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --r: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
::selection { background: var(--accent); color: #0b0b0d; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--text); color: var(--bg); border-radius: 6px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }

/* ── Boutons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 7px; font-weight: 600; font-size: 14.5px; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn-light { background: var(--text); color: #0b0b0d; }
.btn-light:hover { background: #fff; }
.btn-line { border: 1px solid var(--line-2); color: var(--text); }
.btn-line:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.03); }
.btn-accent { background: var(--accent); color: #0b0b0d; }
.btn-accent:hover { background: #a393ff; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }

/* ── Bandeau d'annonce ── */
.notice { border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: 13.5px; }
.notice a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px var(--gut); color: var(--muted); }
.notice a:hover { color: var(--text); }
.notice b { font: 600 11px/1 var(--body); letter-spacing: 0.02em; color: #0b0b0d; background: var(--accent); padding: 4px 7px; border-radius: 4px; }
.notice i { font-style: normal; color: var(--text); }

/* ── Navigation ── */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(11, 11, 13, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.nav.stuck { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 32px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--display); font-stretch: 108%; letter-spacing: -0.01em; color: var(--text); }
.logo svg { width: 28px; height: 28px; color: var(--text); }
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-discord { font-size: 14px; color: var(--muted); }
.nav-discord:hover { color: var(--text); }

/* ── Héros ── */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--line); }
.hero-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.15); }
.hero h1 { font-size: clamp(34px, 3.9vw, 52px); font-weight: 750; max-width: 16ch; }
.lede { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.lede b { color: var(--text); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { display: flex; gap: 0; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 480px; }
.facts div { flex: 1; padding: 16px 0 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.facts dt { font-size: 12.5px; color: var(--dim); }
.facts dd { margin: 4px 0 0; font: 700 24px/1.1 var(--display); font-stretch: 108%; font-variant-numeric: tabular-nums; }

/* Démo : sélecteur de jeu + menu posé sur la capture du jeu */
.hero-demo { position: relative; min-width: 0; }
.demo-games { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.demo-games::-webkit-scrollbar { display: none; }
.demo-game {
  flex: none; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px;
  border: 1px solid var(--line); border-radius: 7px; font-size: 13px; color: var(--muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.demo-game img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; background: var(--panel-2); }
.demo-game:hover { color: var(--text); border-color: var(--line-2); }
.demo-game[aria-selected="true"] { color: var(--text); border-color: var(--line-2); background: var(--panel); }

.menu-stage { position: relative; padding: 36px 0 36px 56px; }
.stage-art { position: absolute; inset: 0 26% 0 0; border-radius: 12px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.stage-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
.stage-art img.on { opacity: 0.75; }
.stage-art img.is-icon { inset: -15%; width: 130%; height: 130%; filter: blur(26px) saturate(1.1); }
.stage-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 13, 0) 30%, rgba(11, 11, 13, 0.6)); }
.menu {
  position: relative; height: 420px; display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-2); background: var(--menu);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  font-family: var(--body); font-size: 13.5px;
}
.menu-bar { display: flex; align-items: center; height: 46px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.menu-title { font-size: 13px; color: #d6d6da; }
.menu-ctl { margin-left: auto; display: flex; gap: 14px; color: #85858c; }
.menu-ctl svg { width: 14px; height: 14px; }
.menu-tabs { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tab { flex: none; height: 30px; padding: 0 13px; border-radius: 7px; font-size: 12.5px; color: #8e8e95; transition: background 0.15s, color 0.15s; }
.menu-tab:hover { color: #d6d6da; }
.menu-tab[aria-selected="true"] { background: #2c2c31; color: #f1f1f3; }
.menu-body { flex: 1; overflow-y: auto; padding: 10px 12px 14px; scrollbar-width: thin; scrollbar-color: #3a3a40 transparent; }
.menu-sub { padding: 10px 4px 6px; font-size: 11.5px; color: #75757c; }
.mrow {
  display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 6px; padding: 0 14px;
  background: var(--menu-row); border-radius: 8px; color: #e4e4e7; width: 100%; text-align: left;
  opacity: 0; transform: translateY(4px); animation: mrow-in 0.35s var(--ease) forwards;
}
@keyframes mrow-in { to { opacity: 1; transform: none; } }
.mrow-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-tag { font-size: 10.5px; color: var(--accent); border: 1px solid rgba(143, 124, 255, 0.35); border-radius: 4px; padding: 1px 5px; }
.tgl { position: relative; flex: none; width: 36px; height: 20px; border-radius: 20px; background: #3a3a40; transition: background 0.2s; }
.tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #c9c9ce; transition: transform 0.2s var(--ease), background 0.2s; }
.mrow[aria-pressed="true"] .tgl { background: var(--menu-on); }
.mrow[aria-pressed="true"] .tgl::after { transform: translateX(16px); background: #fff; }
.drop { display: flex; align-items: center; gap: 6px; color: #9d9da4; font-size: 12.5px; }
.drop svg { width: 12px; height: 12px; }
.slide { flex: none; position: relative; width: 120px; height: 5px; border-radius: 5px; background: #3a3a40; }
.slide i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--menu-on); }
.slide i::after { content: ""; position: absolute; right: -7px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
.slide-val { width: 30px; text-align: right; font: 500 12px var(--mono); color: #9d9da4; }
.demo-note { margin-top: 12px; font-size: 12.5px; color: var(--dim); }

/* ── Sections ── */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 36px; }
.head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.head p { margin-top: 12px; color: var(--muted); max-width: 54ch; }

/* Filtres */
.filters { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; }
.filters button { height: 32px; padding: 0 12px; border-radius: 6px; font-size: 13.5px; color: var(--muted); transition: background 0.15s, color 0.15s; }
.filters button:hover { color: var(--text); }
.filters button[aria-selected="true"] { background: var(--panel-2); color: var(--text); }

/* Tableau des jeux */
.table { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) 80px 130px 96px 28px; gap: 20px; align-items: center;
  padding: 16px 12px; border-bottom: 1px solid var(--line);
}
.row-head { padding-top: 12px; padding-bottom: 12px; font-size: 12.5px; color: var(--dim); }
button.row, a.row { width: 100%; text-align: left; transition: background 0.15s; }
button.row:hover, a.row:hover { background: rgba(255, 255, 255, 0.025); }
button.row:hover .row-go, a.row:hover .row-go { color: var(--text); transform: translateX(3px); }
.row[hidden] { display: none; }
.g { display: flex; align-items: center; gap: 18px; min-width: 0; }
.thumb { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-icon { background: #15151a; }
.thumb.is-icon .thumb-bg { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; filter: blur(18px) saturate(1.2); opacity: 0.55; }
.thumb.is-icon .thumb-fg { position: relative; margin: auto; height: 78%; width: auto; aspect-ratio: 1; top: 11%; border-radius: 8px; }
.thumb.no-art img { display: none; }
.g-text { min-width: 0; }
.g-name { display: block; font: 700 17px/1.2 var(--display); font-stretch: 106%; letter-spacing: -0.01em; }
.g-meta { display: block; margin-top: 3px; font-size: 13px; color: var(--dim); }
.g-blurb { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { font: 500 14px var(--mono); font-variant-numeric: tabular-nums; }
.yes, .no { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; }
.yes { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.yes svg { width: 12px; height: 12px; }
.no { color: var(--dim); }
.access { font-size: 13.5px; color: var(--text); }
.access.is-paid { color: var(--accent); }
.no::before { content: ""; width: 10px; height: 1.5px; background: currentColor; }
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.row-go { color: var(--dim); transition: color 0.15s, transform 0.2s var(--ease); }
.row-go svg { width: 16px; height: 16px; }
.cell-label { display: none; }
.table-foot { margin-top: 20px; font-size: 14px; color: var(--muted); }
.table-foot a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.table-foot a:hover { text-decoration-color: var(--text); }

/* Étapes */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); counter-reset: s; }
.steps li { padding: 28px 28px 8px 0; counter-increment: s; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.steps li::before { content: "0" counter(s); display: block; font: 500 13px var(--mono); color: var(--accent); margin-bottom: 18px; }
.steps h3 { font-size: 20px; }
.steps p { margin-top: 10px; color: var(--muted); max-width: 34ch; }

/* Offres */
.pricing { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.plan.is-best { border-color: rgba(143, 124, 255, 0.5); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-name { font-size: 15px; font-weight: 600; }
.plan-badge { font-size: 11.5px; font-weight: 600; color: var(--accent); }
.plan-price { margin-top: 22px; display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font: 750 44px/1 var(--display); font-stretch: 104%; letter-spacing: -0.03em; }
.plan-price span { color: var(--dim); font-size: 13.5px; }
.plan ul { list-style: none; margin: 24px 0 28px; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
.plan li { display: flex; gap: 10px; }
.plan li svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--text); }
.plan .btn { margin-top: auto; width: 100%; }

.compare table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; }
.compare th { font-size: 12.5px; font-weight: 500; color: var(--dim); padding-top: 4px; }
.compare th + th, .compare td + td { text-align: center; width: 90px; }
.compare td:first-child { color: var(--muted); }
.compare td .yes, .compare td .no { vertical-align: middle; }
.fine-print { margin-top: 18px; font-size: 13px; color: var(--dim); line-height: 1.55; }

/* FAQ */
.faq-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; }
.head-side { margin: 0; align-items: flex-start; }
.head-side .btn { margin-top: 24px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 500; font-size: 15.5px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 62ch; }

/* Pied de page */
.footer { padding: 56px 0 32px; }
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.foot-brand p { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 30ch; }
.foot-cols { display: flex; gap: clamp(40px, 7vw, 96px); }
.foot-cols h3 { font: 500 12.5px var(--body); letter-spacing: 0; color: var(--dim); margin-bottom: 14px; }
.foot-cols a { display: block; font-size: 14px; color: var(--muted); padding: 3px 0; }
.foot-cols a:hover { color: var(--text); }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: var(--dim); }

/* Tiroir d'un jeu */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer[hidden] { display: none; }
.drawer-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.25s; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-2); border-left: 1px solid var(--line);
  transform: translateX(24px); opacity: 0; transition: transform 0.3s var(--ease), opacity 0.25s;
}
.drawer.open .drawer-back { opacity: 1; }
.drawer.open .drawer-panel { transform: none; opacity: 1; }
.drawer-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: rgba(11, 11, 13, 0.7); border: 1px solid var(--line-2); }
.drawer-close svg { width: 14px; height: 14px; }
.d-art { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.d-art img { width: 100%; height: 100%; object-fit: cover; }
.d-art.is-icon .thumb-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(30px); opacity: 0.5; }
.d-art.is-icon .thumb-fg { position: absolute; left: 50%; top: 50%; width: auto; height: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 14px; }
.d-in { padding: 26px 28px 40px; }
.d-in h2 { font-size: 30px; }
.d-meta { margin-top: 6px; font-size: 13.5px; color: var(--dim); }
.d-blurb { margin-top: 14px; color: var(--muted); }
.d-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.d-search { display: flex; align-items: center; gap: 10px; margin-top: 30px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.d-search svg { width: 15px; height: 15px; color: var(--dim); flex: none; }
.d-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.d-search input::placeholder { color: var(--dim); }
.d-group { margin-top: 26px; }
.d-group h3 { display: flex; justify-content: space-between; font: 600 13px var(--body); letter-spacing: 0; color: var(--text); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.d-group h3 span { font: 500 12px var(--mono); color: var(--dim); }
.d-group ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.d-group li { break-inside: avoid; display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 14px; color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.d-group li .mrow-tag { margin-left: auto; }
.d-empty { margin-top: 24px; color: var(--dim); font-size: 14px; }
body.locked { overflow: hidden; }

/* Apparition au défilement, discrète */
.js .rv { opacity: 0; transform: perspective(1000px) translateY(22px) rotateX(9deg); transform-origin: 50% 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ── Tablette ── */
@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero h1 { max-width: 16ch; }
  .pricing { grid-template-columns: 1fr; }
  .faq-in { grid-template-columns: 1fr; gap: 28px; }
  .row { grid-template-columns: minmax(0, 1fr) 64px 120px 84px 20px; gap: 14px; }
  .thumb { width: 104px; }
}

/* ── Téléphone ── */
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .nav-links, .nav-discord { display: none; }
  .nav-in { height: 58px; }
  .lede { font-size: 16px; }
  .actions .btn { flex: 1 1 100%; }
  .menu { height: 380px; }
  .menu-stage { padding: 20px 0 0 20px; }
  .stage-art { inset: 0 18% 40% 0; }
  .slide { width: 72px; }
  .head { flex-direction: column; align-items: flex-start; }
  .filters { width: 100%; overflow-x: auto; }
  .filters button { flex: 1 0 auto; }

  .row-head { display: none; }
  .row { grid-template-columns: 0.7fr 1.3fr 1fr; gap: 12px 10px; padding: 18px 4px; }
  .row .g { grid-column: 1 / -1; align-items: flex-start; }
  .row .row-go { display: none; }
  .thumb { width: 108px; }
  .g-blurb { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cell { display: flex; flex-direction: column; gap: 6px; }
  .cell-label { display: block; font-size: 11.5px; color: var(--dim); }

  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 24px 0 20px; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--line); }
  .plans { grid-template-columns: 1fr; }
  .d-in { padding: 22px 18px 36px; }
  .d-group ul { columns: 1; }
  .foot-cols { gap: 32px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; }
}

/* ── Aizen : le miroir de Kyōka Suigetsu ── */
.aizen { position: relative; height: clamp(560px, 88vh, 820px); overflow: hidden; background: #08070d; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); isolation: isolate; }
.aizen-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.1); }
.aizen-tint { position: absolute; inset: 0; background: linear-gradient(140deg, rgba(143, 124, 255, 0.85), rgba(30, 15, 90, 0.4) 60%, rgba(143, 124, 255, 0.5)); mix-blend-mode: color; pointer-events: none; }
.aizen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(8, 7, 13, 0.92), rgba(8, 7, 13, 0.1) 55%, rgba(8, 7, 13, 0.35)); opacity: 0; transition: opacity 1.2s var(--ease) 0.4s; }
.aizen.broken::after { opacity: 1; }

/* Le verre : des éclats flous posés sur la vidéo */
.aizen-glass { position: absolute; inset: 0; z-index: 2; }
.shard {
  position: absolute; inset: 0; will-change: transform, opacity;
  background: rgba(22, 18, 40, 0.35);
  backdrop-filter: blur(16px) brightness(0.5) saturate(0.6); -webkit-backdrop-filter: blur(16px) brightness(0.5) saturate(0.6);
  transition: transform 1.1s cubic-bezier(0.5, 0, 0.75, 0.3), opacity 1.1s ease-in;
}
.aizen.broken .shard { opacity: 0; }
.aizen-cracks { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.aizen-cracks path { fill: none; stroke: rgba(235, 230, 255, 0.75); stroke-width: 1.2; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.aizen.cracking .aizen-cracks path { transition: stroke-dashoffset 0.28s ease-out; stroke-dashoffset: 0; }
.aizen.broken .aizen-cracks { opacity: 0; transition: opacity 0.6s 0.2s; }
.aizen-flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.aizen.cracking .aizen-flash { animation: aizen-flash 0.5s ease-out; }
@keyframes aizen-flash { 0% { opacity: 0.35; } 100% { opacity: 0; } }

.aizen-intro { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity 0.3s, transform 0.3s; }
.aizen.cracking .aizen-intro, .aizen.broken .aizen-intro { opacity: 0; transform: scale(0.97); pointer-events: none; }
.aizen-kanji { font: 700 clamp(44px, 8vw, 96px)/1 "Noto Serif JP", serif; letter-spacing: 0.12em; color: rgba(237, 237, 240, 0.9); }
.aizen-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; background: rgba(237, 237, 240, 0.95); color: #0b0b0d; font-weight: 600; font-size: 14.5px; transition: background 0.15s, transform 0.15s; }
.aizen-btn:hover { background: #fff; transform: translateY(-1px); }
.aizen-btn svg { width: 18px; height: 18px; }
.aizen-hint { font-size: 12.5px; color: rgba(237, 237, 240, 0.55); }

.aizen-copy { position: absolute; left: 0; right: 0; bottom: clamp(40px, 7vw, 80px); z-index: 5; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.8s var(--ease) 0.9s, transform 0.8s var(--ease) 0.9s; }
.aizen.broken .aizen-copy { opacity: 1; transform: none; pointer-events: auto; }
.aizen-kicker { display: flex; align-items: baseline; gap: 10px; font: 600 13px var(--body); color: rgba(237, 237, 240, 0.8); margin-bottom: 14px; }
.aizen-kicker span { font: 700 17px "Noto Serif JP", serif; letter-spacing: 0.08em; color: #fff; }
.aizen-copy h2 { font-size: clamp(34px, 5vw, 64px); max-width: 14ch; }
.aizen-copy > p:not(.aizen-kicker) { margin-top: 16px; color: rgba(237, 237, 240, 0.75); max-width: 44ch; font-size: 16px; }
.aizen-copy .actions { margin-top: 26px; }

@media (max-width: 720px) {
  .aizen { height: 620px; }
  .aizen-copy .actions .btn { flex: 1 1 auto; }
}

/* ── 3D ── */
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s; }
.hero.has-gl .hero-gl { opacity: 1; }
.hero-in { position: relative; z-index: 1; }

/* Le menu en photo de produit : incliné, en couches, il se redresse quand on le survole. */
@media (min-width: 981px) and (pointer: fine) {
  .hero-demo { perspective: 1700px; }
  .menu-stage { transform-style: preserve-3d; transform: rotateY(var(--ry, -13deg)) rotateX(var(--rx, 6deg)); transition: transform 0.9s var(--ease); }
  .stage-art { transform: translateZ(-70px); }
  .menu { transform: translateZ(40px); box-shadow: 0 50px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04); }
  .demo-games { transform: rotateY(-6deg); transform-origin: 0 50%; }
}

.aizen-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.aizen.gl .aizen-glass, .aizen.gl .aizen-cracks, .aizen.gl .aizen-tint { display: none; }
.aizen.gl .aizen-video { opacity: 0; }
.aizen.gl::after { z-index: 2; }

/* Carte qui suit la souris sur la liste des jeux */
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: 260px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; pointer-events: none;
  border: 1px solid var(--line-2); background: var(--panel-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  opacity: 0; transition: opacity 0.2s; will-change: transform; }
.peek.on { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.is-icon img.bg { position: absolute; inset: -15%; width: 130%; height: 130%; filter: blur(24px); opacity: 0.6; }
.peek.is-icon img.fg { position: absolute; left: 50%; top: 50%; width: auto; height: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 12px; }
.peek::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 40%); }

/* Cartes de prix : légère inclinaison et reflet sous le curseur */
.plans { perspective: 1200px; }
.plan { transform-style: preserve-3d; transition: transform 0.5s var(--ease), border-color 0.2s; }
.plan::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.06), transparent 45%); }
.plan:hover::before { opacity: 1; }
.js .plan.rv.in { transition: transform 0.5s var(--ease), border-color 0.2s, opacity 0.7s; transition-delay: 0s; }
main { overflow-x: clip; }

/* Aizen dans les cartes de prix */
.plan { overflow: hidden; }
.plan-media { position: relative; margin: -26px -26px 22px; aspect-ratio: 16 / 7; overflow: hidden; background: #120f22; border-bottom: 1px solid var(--line); }
.plan-media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.05); transform: scale(1.12); transform-origin: 50% 35%; }
.plan-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 23, 0) 45%, var(--panel)), linear-gradient(140deg, rgba(143, 124, 255, 0.35), rgba(20, 16, 40, 0.1)); mix-blend-mode: normal; }
.plan.is-best .plan-media { background: #14102a; }

/* Pied de page : le nom du shikai en filigrane, et le clin d'œil */
.footer { position: relative; overflow: hidden; }
.foot-kanji { position: absolute; right: -0.05em; bottom: -0.22em; font: 700 clamp(90px, 17vw, 240px)/1 "Noto Serif JP", serif; letter-spacing: 0.06em; color: rgba(143, 124, 255, 0.06); pointer-events: none; user-select: none; white-space: nowrap; }
.footer .wrap { position: relative; }
.foot-quote { margin-top: 18px !important; font-size: 13.5px !important; font-style: italic; color: var(--dim) !important; max-width: 34ch !important; }

/* ── Aperçu du menu : l'interface Kyōka (reprise de vesper-ui/kyoka-preview) ── */
.menu.kyo {
  --k-bg: #07060c; --k-panel: #0c0b14; --k-panel2: #110f1c; --k-el: #161424; --k-el-hover: #1d1a2f;
  --k-border: #242038; --k-border-soft: #1a1729; --k-accent: #7c6cff; --k-rgb: 124, 108, 255; --k-cyan: #2ad4ff;
  --k-text: #ecebf5; --k-dim: #a3a1b8; --k-faint: #6c6a82; --k-success: #3ddc84;
  --k-mono: "JetBrains Mono", ui-monospace, monospace;
  display: grid; grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr) 26px;
  height: 440px; padding: 0; border-radius: 12px; border: 0; overflow: hidden;
  background: linear-gradient(180deg, #0d0b16 0%, var(--k-bg) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(var(--k-rgb), .35);
  font: 500 12.5px/1.3 var(--body); color: var(--k-text); text-align: left;
}
.menu.kyo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; padding: 1px;
  background: conic-gradient(from var(--ka, 0deg), rgba(var(--k-rgb), .15) 0 40%, var(--k-accent) 60%, var(--k-cyan) 70%, rgba(var(--k-rgb), .15) 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@property --ka { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) { .menu.kyo::after { animation: kyoSpin 7s linear infinite; } }
@keyframes kyoSpin { to { --ka: 360deg; } }

/* Barre latérale */
.kyo-side { position: relative; grid-row: 1 / 4; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; border-right: 1px solid var(--k-border-soft);
  background: linear-gradient(180deg, rgba(var(--k-rgb), .07), transparent 40%); }
.kyo-brand { position: relative; flex: none; display: flex; align-items: flex-end; gap: 10px; height: 104px; padding: 0 14px 12px; overflow: hidden; border-bottom: 1px solid var(--k-border-soft); }
.kyo-art { position: absolute; inset: 0; background: url(https://media.giphy.com/media/cEUhgMTCEFmKa8Fw4z/giphy.gif) 50% 30% / cover; filter: grayscale(.2) brightness(1.15) contrast(1.05); }
.kyo-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(124, 108, 255, .18), rgba(60, 40, 160, .28) 45%, rgba(7, 6, 12, .85) 82%, #07060c 100%); }
.kyo-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); }
.kyo-orb { position: relative; z-index: 2; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, #cfc9ff 20%, #7c6cff 48%, #1a1238 100%); box-shadow: 0 0 14px rgba(var(--k-rgb), .8); transform-style: preserve-3d; }
.kyo-orb i { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(207, 201, 255, .8); box-shadow: 0 0 6px rgba(124, 108, 255, .9); }
.kyo-orb i:nth-child(2) { inset: -9px; border-color: rgba(42, 212, 255, .6); }
@media (prefers-reduced-motion: no-preference) {
  .kyo-orb { animation: kyoPulse 2.4s ease-in-out infinite; }
  .kyo-orb i:nth-child(1) { animation: kyoR1 3s linear infinite; }
  .kyo-orb i:nth-child(2) { animation: kyoR2 4.5s linear infinite; }
}
@keyframes kyoPulse { 50% { box-shadow: 0 0 22px rgba(124, 108, 255, 1), 0 0 44px rgba(124, 108, 255, .5); } }
@keyframes kyoR1 { from { transform: rotateX(70deg) rotateZ(0); } to { transform: rotateX(70deg) rotateZ(360deg); } }
@keyframes kyoR2 { from { transform: rotateY(70deg) rotateZ(0); } to { transform: rotateY(70deg) rotateZ(-360deg); } }
.kyo-brand-txt { position: relative; z-index: 2; display: grid; gap: 3px; }
.kyo-brand-txt b { font: 400 12px "Michroma", var(--display); letter-spacing: .06em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.kyo-brand-txt small { font: 700 9px "Noto Serif JP", serif; letter-spacing: .3em; color: #9d93ff; }

.kyo-reiatsu { position: absolute; inset: 104px 0 60px 0; overflow: hidden; pointer-events: none; }
.kyo-reiatsu i { position: absolute; bottom: -6px; border-radius: 50%; background: #cfc9ff; box-shadow: 0 0 6px #7c6cff; opacity: 0; animation: kyoRise linear infinite; }
@keyframes kyoRise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(var(--dx), -330px); opacity: 0; } }

.kyo-tabs { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; padding: 10px 8px; }
.kyo-tabs::-webkit-scrollbar { display: none; }
.kyo-tab { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--k-dim); font: 600 12.5px var(--body); text-align: left; transition: background-color .15s, color .15s; }
.kyo-tab:hover { background: var(--k-el); color: var(--k-text); }
.kyo-tab .ico { flex: none; width: 16px; display: grid; place-items: center; font: 600 12px var(--k-mono); color: var(--k-faint); }
.kyo-tab .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kyo-tab .n { font: 600 10px var(--k-mono); color: var(--k-faint); }
.kyo-tab[aria-selected="true"] { color: #fff; background: linear-gradient(90deg, rgba(var(--k-rgb), .28), rgba(var(--k-rgb), .04)); }
.kyo-tab[aria-selected="true"] .ico { color: #cfc9ff; }
.kyo-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--k-accent), var(--k-cyan)); box-shadow: 0 0 10px var(--k-accent); }

.kyo-user { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-top: 1px solid var(--k-border-soft); }
.kyo-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--body); background: linear-gradient(135deg, #3a2f7a, #120e26); box-shadow: 0 0 0 1px var(--k-border), 0 0 0 3px rgba(var(--k-rgb), .25); }
.kyo-user-txt { display: grid; gap: 2px; min-width: 0; }
.kyo-user-txt b { font: 600 12px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kyo-tier { font: 600 9.5px var(--k-mono); letter-spacing: .08em; color: #cfc9ff; }
.kyo-tier::before { content: "\265B  "; color: var(--k-accent); }

/* Barre du haut */
.kyo-top { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 10px 0 16px; border-bottom: 1px solid var(--k-border-soft); }
.kyo-crumb { flex: 1; min-width: 0; font: 600 13px var(--body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kyo-crumb small { margin-left: 8px; font: 600 10px var(--k-mono); color: var(--k-faint); letter-spacing: .08em; text-transform: uppercase; }
.kyo-search { display: flex; align-items: center; gap: 7px; width: 130px; height: 28px; padding: 0 9px; border-radius: 8px; background: var(--k-panel2); border: 1px solid var(--k-border-soft); color: var(--k-faint); font: 500 12px var(--body); }
.kyo-search svg { width: 12px; height: 12px; flex: none; }
.kyo-wbtn { display: grid; place-items: center; width: 26px; height: 28px; border-radius: 7px; color: var(--k-faint); font: 600 14px var(--body); }

/* Contenu */
.kyo-content { position: relative; min-height: 0; overflow: hidden; }
.kyo-cols { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; overflow-y: auto; align-content: start; align-items: start; scrollbar-width: thin; scrollbar-color: #2a2545 transparent; }
.kyo-cols.swap { animation: kyoPage .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes kyoPage { from { opacity: 0; transform: translateY(8px); } }
.kyo-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.kyo-grp { border-radius: 9px; border: 1px solid var(--k-border-soft); overflow: hidden; transition: border-color .25s;
  background: linear-gradient(90deg, transparent calc(var(--mx, -999px) - 140px), rgba(124, 108, 255, .08) var(--mx, -999px), transparent calc(var(--mx, -999px) + 140px)), var(--k-panel);
  animation: kyoGrp .55s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--gd, 0s); }
.kyo-grp:hover { border-color: rgba(124, 108, 255, .35); }
@keyframes kyoGrp { from { opacity: 0; transform: translateY(14px); } }
.kyo-grp-h { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; background: linear-gradient(90deg, rgba(var(--k-rgb), .16), transparent 80%); border-bottom: 1px solid var(--k-border-soft); }
.kyo-grp-h::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(207, 201, 255, .35) 50%, transparent 70%); transform: translateX(-100%); animation: kyoSweep .9s ease var(--gd2, .2s) both; pointer-events: none; }
@keyframes kyoSweep { to { transform: translateX(100%); } }
.kyo-dia { flex: none; width: 6px; height: 6px; rotate: 45deg; background: linear-gradient(135deg, var(--k-accent), var(--k-cyan)); box-shadow: 0 0 6px var(--k-accent); }
.kyo-grp-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10.5px var(--k-mono); letter-spacing: .12em; text-transform: uppercase; color: #d9d5ff; }
.kyo-grp-b { padding: 4px 0 6px; }

.kyo-el { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 0 10px; color: var(--k-text); text-align: left;
  opacity: 0; animation: kyoRow .35s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes kyoRow { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kyo-el:hover { background: rgba(255, 255, 255, .02); }
.kyo-lbl { flex: 1; min-width: 0; font: 500 12.5px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kyo-el[aria-pressed="false"] .kyo-lbl { color: var(--k-dim); }
.kyo-lock { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font: 600 9px var(--k-mono); letter-spacing: .06em; color: #cfc9ff; background: rgba(var(--k-rgb), .15); box-shadow: inset 0 0 0 1px rgba(var(--k-rgb), .45); }
.kyo-sw { position: relative; flex: none; width: 30px; height: 16px; border-radius: 9px; background: #231f38; border: 1px solid #2d2848; transition: background .2s, border-color .2s; }
.kyo-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #8d8aa6; transition: left .25s cubic-bezier(.16, 1, .3, 1), background .2s, box-shadow .2s; }
.kyo-el[aria-pressed="true"] .kyo-sw { background: linear-gradient(90deg, #6a58f0, #8f80ff); border-color: #9d90ff; }
.kyo-el[aria-pressed="true"] .kyo-sw::after { left: 16px; background: #fff; box-shadow: 0 0 8px rgba(207, 201, 255, .9); }

.kyo-sl { display: grid; gap: 6px; padding: 5px 10px 8px; opacity: 0; animation: kyoRow .35s cubic-bezier(.16, 1, .3, 1) forwards; }
.kyo-sl-top { display: flex; align-items: center; gap: 8px; }
.kyo-val { min-width: 38px; padding: 2px 6px; border-radius: 5px; background: var(--k-el); font: 600 10.5px var(--k-mono); color: #cfc9ff; text-align: center; }
.kyo-track { position: relative; height: 6px; border-radius: 4px; background: #1d1a2f; }
.kyo-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #5b49e6, var(--k-accent) 60%, var(--k-cyan)); }
.kyo-knob { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(var(--k-rgb), .35), 0 0 10px rgba(var(--k-rgb), .8); }

.kyo-dd { display: grid; gap: 5px; padding: 5px 10px 7px; opacity: 0; animation: kyoRow .35s cubic-bezier(.16, 1, .3, 1) forwards; }
.kyo-dd-btn { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 9px; border-radius: 7px; background: var(--k-el); border: 1px solid var(--k-border-soft); font: 500 12px var(--body); color: var(--k-text); }
.kyo-dd-btn i { font-style: normal; color: var(--k-faint); }

.kyo-stat { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; font: 500 12px var(--body); color: var(--k-dim); }
.kyo-stat b { font: 600 11px var(--k-mono); color: #fff; white-space: nowrap; }
.kyo-stat b.ok { color: var(--k-success); }
.kyo-btn { display: flex; align-items: center; justify-content: center; width: calc(100% - 20px); height: 28px; margin: 4px 10px; border: 1px solid var(--k-border); border-radius: 7px; background: var(--k-el); font: 600 12px var(--body); color: var(--k-text); transition: border-color .15s, background .15s; }
.kyo-btn:hover { border-color: rgba(var(--k-rgb), .6); background: var(--k-el-hover); }
.kyo-btn.accent { border-color: transparent; background: linear-gradient(180deg, #8f80ff, #6a58f0); color: #fff; box-shadow: 0 4px 16px rgba(var(--k-rgb), .35); }
.kyo-btn.accent:hover { filter: brightness(1.08); }

/* Pied */
.kyo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 0 12px 0 16px; border-top: 1px solid var(--k-border-soft); font: 500 10px var(--k-mono); color: var(--k-faint); letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.kyo-foot b { color: #9d93ff; font-weight: 600; }
.kyo-foot .ok::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--k-success); box-shadow: 0 0 6px var(--k-success); vertical-align: 1px; }

/* Le jeu derrière le menu : flouté et assombri, comme le BlurEffect de Kyōka. */
.stage-art img.on { opacity: .9; filter: blur(3px) brightness(.6) saturate(.85); }

@media (max-width: 720px) {
  .menu.kyo { grid-template-columns: 112px minmax(0, 1fr); height: 400px; }
  .kyo-brand { height: 78px; padding: 0 10px 10px; gap: 8px; }
  .kyo-orb { width: 20px; height: 20px; }
  .kyo-brand-txt b { font-size: 9.5px; }
  .kyo-reiatsu { inset: 78px 0 56px 0; }
  .kyo-tab { gap: 6px; padding: 0 6px; font-size: 11.5px; }
  .kyo-tab .n { display: none; }
  .kyo-user { padding: 10px; }
  .kyo-user-txt b { font-size: 11px; }
  .kyo-search { display: none; }
  .kyo-cols { grid-template-columns: 1fr; padding: 10px; }
  .kyo-foot .ok { display: none; }
}

/* ── Pages de jeux (/scripts/<id>/), générées par tools/build_seo.py ── */
.row-static { display: block; }
.row-static .g-blurb { white-space: normal; }
.gp-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.gp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.gp-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 13px; color: var(--dim); }
.gp-crumb a { color: var(--muted); }
.gp-crumb a:hover { color: var(--text); }
.gp-crumb [aria-current] { color: var(--text); }
.gp h1 { font-size: clamp(36px, 4.6vw, 58px); font-weight: 750; }
.gp .lede { max-width: 52ch; }
.gp-small { font-size: 18px !important; padding-top: 5px; }
.gp-shot { position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8); aspect-ratio: 16 / 9; }
.gp-shot img { width: 100%; height: 100%; object-fit: cover; }
.gp-shot.is-icon { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(143, 124, 255, 0.28), transparent 60%), var(--panel); }
.gp-shot.is-icon img { width: 42%; height: auto; aspect-ratio: 1; border-radius: 20px; }
.gp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gp-group { padding: 18px 20px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.gp-group h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.gp-group h3 span { font: 500 12px var(--mono); color: var(--dim); }
.gp-group ul { list-style: none; margin: 0; padding: 6px 0 0; }
.gp-group li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--muted); }
.gp-group li svg { flex: none; width: 14px; height: 14px; color: var(--accent); }
.gp-group li em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--accent); border: 1px solid rgba(143, 124, 255, 0.4); border-radius: 4px; padding: 1px 6px; }
.gp-plans { max-width: 760px; }
.gp-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gp-other { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: border-color 0.15s, background 0.15s; }
.gp-other:hover { border-color: var(--line-2); background: var(--panel-2); }
.gp-other img { flex: none; width: 96px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--panel-2); }
.gp-other b { display: block; font: 700 15px var(--display); font-stretch: 106%; }
.gp-other small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--dim); }
@media (max-width: 980px) { .gp-hero-in { grid-template-columns: 1fr; } }