/* Page Jeux : écran de sélection des mondes, face à face, chapitres IMPERO et SECOND BREATH.
   L'or vient de la charte (--gold) ; le soufre et l'abîme, de la page SECOND BREATH (css/second-breath.css). */
.jeux-page { --jx-sulf:#b9c24a; --jx-abyss:#080a09; --jx-expo:cubic-bezier(.16,1,.3,1); }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.jx-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:44px; }
.jx-gold { background:linear-gradient(180deg, #fbf0c9 0%, var(--gold) 52%, #7d5c22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── 1. Écran de sélection ─────────────────────────────── */
.jx-select { position:relative; height:100vh; height:100svh; min-height:640px; overflow:hidden; overflow:clip; background:var(--ink); }
.jx-head { position:absolute; left:var(--g); right:var(--g); top:calc(var(--nav-h) + clamp(20px, 5vh, 56px)); z-index:3; text-align:center; pointer-events:none; }
.jx-head .mono { display:inline-flex; gap:14px; color:rgba(242,238,230,.75); animation:jx-rise 1s var(--jx-expo) .15s both; }
.jx-head .mono span::before { content:"·"; margin-right:14px; color:var(--verm); }
.jx-head h1 { margin:14px 0 0; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(44px, 6.4vw, 112px); line-height:.92; letter-spacing:-.02em; text-shadow:0 6px 40px rgba(0,0,0,.55); animation:jx-rise 1.2s var(--jx-expo) .25s both; }
.jx-head h1 em { color:var(--verm); }

.jx-worlds { position:absolute; inset:0; display:flex; }
.jx-world { position:relative; z-index:1; flex:1 1 0; min-width:0; overflow:hidden; overflow:clip; isolation:isolate; display:block; color:var(--paper); outline:none; transition:flex-grow 1.1s var(--jx-expo); }
.jx-world--impero { animation:jx-from-top 1.4s var(--jx-expo) both; }
.jx-world--breath { animation:jx-from-bottom 1.4s var(--jx-expo) .08s both; }
.jx-media { position:absolute; inset:-4%; z-index:-2; display:block; }
.jx-media img { display:block; width:100%; height:100%; object-fit:cover; transform:translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.04); transition:transform 1.4s var(--jx-expo), filter .9s ease; }
.jx-world--impero .jx-media img { object-position:50% 22%; }
.jx-world--breath .jx-media img { object-position:50% 40%; }
.jx-shade { position:absolute; inset:0; z-index:-1; display:block; transition:opacity .9s ease; }
.jx-world--impero .jx-shade { background:linear-gradient(180deg, rgba(17,16,22,.88) 0%, rgba(17,16,22,.25) 32%, rgba(17,16,22,.15) 50%, rgba(17,16,22,.95) 100%), radial-gradient(90% 60% at 30% 100%, rgba(216,178,90,.28), transparent 70%); }
.jx-world--breath .jx-shade { background:linear-gradient(180deg, rgba(17,16,22,.88) 0%, rgba(17,16,22,.25) 32%, rgba(8,10,9,.15) 50%, rgba(8,10,9,.95) 100%), radial-gradient(90% 60% at 70% 100%, rgba(185,194,74,.24), transparent 70%); }
.jx-index { position:absolute; top:50%; z-index:2; writing-mode:vertical-rl; color:rgba(242,238,230,.7); transition:opacity .6s ease; }
.jx-world--impero .jx-index { left:clamp(16px, 2.2vw, 32px); transform:translateY(-50%) rotate(180deg); }
.jx-world--breath .jx-index { right:clamp(16px, 2.2vw, 32px); transform:translateY(-50%); }
.jx-body { position:absolute; left:clamp(48px, 5vw, 88px); right:clamp(48px, 5vw, 88px); bottom:clamp(64px, 11vh, 120px); z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:14px; transition:opacity .7s ease, transform 1.1s var(--jx-expo); }
.jx-world--breath .jx-body { align-items:flex-end; text-align:right; }
.jx-kicker { font-family:"Instrument Serif",serif; font-style:italic; font-size:clamp(20px, 1.8vw, 28px); line-height:1.1; color:#efe9dc; }
.jx-name { display:block; font-weight:700; line-height:.86; white-space:nowrap; transition:letter-spacing 1.1s var(--jx-expo); }
.jx-name--impero { font-family:"Cinzel",serif; font-size:clamp(52px, 7.6vw, 140px); letter-spacing:.04em; background:linear-gradient(180deg, #fbf0c9 0%, var(--gold) 52%, #7d5c22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 8px 30px rgba(0,0,0,.55)); }
.jx-name--breath { font-family:"Big Shoulders Stencil Display",sans-serif; font-weight:900; font-size:clamp(56px, 8vw, 150px); line-height:.82; letter-spacing:.01em; text-transform:uppercase; text-shadow:0 8px 30px rgba(0,0,0,.5); }
.jx-name--breath span { display:block; color:transparent; -webkit-text-stroke:2px var(--paper); }
.jx-line { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,238,230,.78); }
.jx-go { display:inline-flex; align-items:center; gap:12px; margin-top:10px; padding-bottom:6px; font-weight:600; font-size:15px; background:linear-gradient(var(--verm), var(--verm)) 0 100% / 0 2px no-repeat; transition:background-size .7s var(--jx-expo); }
.jx-world--breath .jx-go { background-position:100% 100%; }
.jx-go i { font-style:normal; font-family:"JetBrains Mono",monospace; color:var(--verm); transition:transform .6s var(--jx-expo); }
.jx-world:hover .jx-go, .jx-world:focus-visible .jx-go { background-size:100% 2px; }
.jx-world:hover .jx-go i, .jx-world:focus-visible .jx-go i { transform:translateX(6px); }
.jx-world:focus-visible::after { content:""; position:absolute; inset:14px; z-index:3; border:2px solid var(--verm); pointer-events:none; }

/* La jointure : le trait vermillon du logo, et le choix. */
.jx-seam { position:relative; z-index:4; flex:0 0 0; width:0; pointer-events:none; }
.jx-seam i { position:absolute; top:0; bottom:0; left:-1px; width:2px; background:var(--verm); box-shadow:0 0 26px rgba(255,75,31,.65); transform-origin:50% 50%; animation:jx-seam 1.3s var(--jx-expo) .35s both; }
.jx-seam b { position:absolute; top:58%; left:0; display:grid; place-items:center; width:64px; height:64px; transform:translate(-50%, -50%); background:var(--ink); border:2px solid var(--verm); font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; font-size:26px; color:var(--paper); animation:jx-pop .9s var(--jx-expo) 1s both; }
.jx-down { position:absolute; left:50%; bottom:22px; z-index:3; display:inline-flex; gap:10px; transform:translateX(-50%); padding:10px 16px; background:rgba(17,16,22,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(242,238,230,.18); border-radius:99px; color:rgba(242,238,230,.85); white-space:nowrap; }
.jx-down span { display:inline-block; animation:jx-nudge 2s ease-in-out infinite; }
.jx-down:hover { color:var(--paper); border-color:var(--verm); }

@media (hover:hover) and (min-width:821px) {
  .jx-worlds:hover .jx-world, .jx-worlds:has(.jx-world:focus-visible) .jx-world { flex-grow:.62; }
  .jx-worlds .jx-world:hover, .jx-worlds .jx-world:focus-visible { flex-grow:1.6; }
  .jx-world:hover .jx-media img, .jx-world:focus-visible .jx-media img { transform:translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.1); }
  .jx-worlds:hover .jx-world:not(:hover) .jx-media img { filter:grayscale(1) brightness(.34) contrast(1.1); }
  .jx-worlds:hover .jx-world:not(:hover) .jx-body { opacity:.28; transform:translateY(14px); }
  .jx-worlds:hover .jx-world:not(:hover) .jx-index { opacity:0; }
  .jx-world--impero:hover .jx-name--impero { letter-spacing:.1em; }
  .jx-world--breath:hover .jx-name--breath { letter-spacing:.05em; }
}

/* ── 2. Face à face ────────────────────────────────────── */
.jx-versus { position:relative; padding:clamp(96px, 12vw, 170px) var(--g); background:radial-gradient(50% 60% at 0% 40%, rgba(216,178,90,.08), transparent 70%), radial-gradient(50% 60% at 100% 60%, rgba(185,194,74,.07), transparent 70%), var(--ink); }
.jx-versus-head { text-align:center; }
.jx-versus-head h2, .jx-outro h2 { margin:18px 0 0; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(46px, 6.2vw, 96px); line-height:.94; letter-spacing:-.02em; }
.jx-versus-head h2 i { color:var(--mute); }
.jx-table { width:min(1120px, 100%); margin:clamp(48px, 6vw, 80px) auto 0; border-collapse:collapse; }
.jx-table thead th { padding:0 0 26px; font-weight:700; }
.jx-col-impero { text-align:right; font-family:"Cinzel",serif; font-size:clamp(26px, 3.2vw, 48px); letter-spacing:.06em; background:linear-gradient(180deg, #fbf0c9 0%, var(--gold) 52%, #7d5c22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.jx-col-breath { text-align:left; font-family:"Big Shoulders Stencil Display",sans-serif; font-weight:900; font-size:clamp(30px, 3.6vw, 54px); letter-spacing:.02em; color:var(--jx-sulf); }
.jx-table tbody tr { border-top:1px solid var(--line); transition:background .4s ease; }
.jx-table tbody tr:last-child { border-bottom:1px solid var(--line); }
.jx-table td { width:calc(50% - 110px); padding:clamp(16px, 2vw, 26px) 0; font-family:"Instrument Serif",serif; font-size:clamp(20px, 2.1vw, 30px); line-height:1.15; transition:color .4s ease; }
.jx-table td:first-child { text-align:right; }
.jx-table td:last-child { text-align:left; }
.jx-table tbody th { width:220px; padding:0 20px; font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); text-align:center; white-space:nowrap; }
.jx-table tbody tr:hover { background:rgba(242,238,230,.025); }
.jx-table tbody tr:hover td:first-child { color:var(--gold); }
.jx-table tbody tr:hover td:last-child { color:var(--jx-sulf); }
.jx-table tbody tr:hover th { color:var(--verm); }
.jx-live { display:inline-flex; align-items:center; gap:12px; }
.jx-live::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--verm); animation:pulse 2s infinite; }
.jx-table td:first-child .jx-live { flex-direction:row-reverse; }

/* ── 3. Chapitres ──────────────────────────────────────── */
.jx-chapter { position:relative; padding:clamp(96px, 11vw, 170px) var(--g); overflow:hidden; overflow:clip; }
.jx-chapter--impero { background:radial-gradient(60% 40% at 80% 0%, rgba(216,178,90,.12), transparent 70%), var(--ink); }
.jx-chapter--breath { background:radial-gradient(70% 40% at 20% 0%, rgba(185,194,74,.12), transparent 70%), var(--jx-abyss); }
.jx-chapter-tag { color:var(--gold); }
.jx-chapter--breath .jx-chapter-tag { color:var(--jx-sulf); }
.jx-giant { margin:22px 0 0; font-weight:700; line-height:.8; background-size:cover; background-position:50% 50%; -webkit-background-clip:text; background-clip:text; color:transparent; }
.jx-giant--impero { font-family:"Cinzel",serif; font-size:clamp(64px, 21.2vw, 420px); letter-spacing:.01em; margin-left:-.04em; background-image:linear-gradient(180deg, rgba(251,240,201,.18), rgba(125,92,34,.22)), url("../assets/img/showcase/impero-rome.jpg"); -webkit-text-stroke:1px rgba(216,178,90,.45); }
.jx-giant--breath { font-family:"Big Shoulders Stencil Display",sans-serif; font-weight:900; font-size:clamp(92px, 29vw, 560px); line-height:.78; text-transform:uppercase; background-image:linear-gradient(180deg, rgba(185,194,74,.12), rgba(8,10,9,.2)), url("../assets/img/second-breath/bay.jpg"); -webkit-text-stroke:1px rgba(185,194,74,.4); }
@supports (animation-timeline: view()) {
  .jx-giant { animation:jx-pan linear both; animation-timeline:view(); }
}
.jx-intro { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(28px, 6vw, 110px); align-items:end; margin-top:clamp(40px, 5vw, 80px); }
.jx-intro h3, .jx-breathe h3 { margin:0; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(36px, 4.2vw, 68px); line-height:.98; letter-spacing:-.015em; }
.jx-intro h3 em { color:var(--gold); }
.jx-chapter--breath .jx-intro h3 em, .jx-breathe h3 em { color:var(--jx-sulf); }
.jx-intro p, .jx-breathe p { margin:0; max-width:560px; font-size:clamp(16px, 1.3vw, 19px); line-height:1.7; color:#cdc8bf; }

.jx-numbers { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin:clamp(64px, 8vw, 110px) 0 0; padding:0; list-style:none; border-top:1px solid rgba(216,178,90,.3); }
.jx-numbers li { padding:28px 24px 0 0; }
.jx-numbers li + li { padding-left:24px; border-left:1px solid var(--line); }
.jx-numbers b { display:block; font-family:"Cinzel",serif; font-weight:700; font-size:clamp(56px, 6.4vw, 110px); line-height:1; background:linear-gradient(180deg, #fbf0c9 0%, var(--gold) 52%, #7d5c22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.jx-numbers span { display:block; margin-top:12px; max-width:220px; font-size:15px; line-height:1.5; color:#bdb8ae; }

.jx-tablescene { position:relative; margin:clamp(72px, 9vw, 140px) auto 0; width:min(1180px, 100%); perspective:1800px; }
.jx-board { width:80%; margin:0; transform:rotateX(30deg) rotateZ(-4deg) scale(.96); transform-origin:50% 100%; }
.jx-board img { display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 60px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(216,178,90,.35); }
.jx-phone { position:absolute; margin:0; width:clamp(118px, 17vw, 240px); aspect-ratio:390 / 844; border:8px solid #1b1a20; border-radius:34px; overflow:hidden; overflow:clip; background:#000; box-shadow:0 50px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(216,178,90,.4); }
.jx-phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.jx-phone--a { right:2%; top:-4%; transform:rotate(7deg); }
.jx-phone--b { right:21%; top:22%; transform:rotate(-5deg); }
.jx-scene-note { position:absolute; left:0; bottom:-36px; color:var(--gold); }
@supports (animation-timeline: view()) {
  .jx-board { animation:jx-board linear both; animation-timeline:view(); animation-range:entry 0% cover 55%; }
  .jx-phone--a { animation:jx-float-a linear both; animation-timeline:view(); }
  .jx-phone--b { animation:jx-float-b linear both; animation-timeline:view(); }
}

.jx-factions { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin:clamp(96px, 10vw, 150px) 0 0; padding:0; list-style:none; }
.jx-factions li { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:30px 18px 28px; text-align:center; border:1px solid rgba(216,178,90,.22); border-radius:4px; background:linear-gradient(180deg, rgba(216,178,90,.07), rgba(216,178,90,0)); transition:border-color .4s ease, transform .6s var(--jx-expo); }
.jx-factions img { width:88px; height:88px; margin-bottom:10px; filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); transition:transform .8s var(--jx-expo); }
.jx-factions b { font-family:"Cinzel",serif; font-weight:700; font-size:22px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.jx-factions span { font-size:14px; color:#bdb8ae; }
.jx-factions li:hover { border-color:var(--gold); transform:translateY(-6px); }
.jx-factions li:hover img { transform:scale(1.1) rotate(-4deg); }

/* SECOND BREATH : la descente, niveau par niveau */
.jx-descent { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:clamp(20px, 4vw, 64px); margin-top:clamp(80px, 10vw, 150px); view-timeline:--jx-descent block; }
.jx-gauge { position:sticky; top:calc(var(--nav-h) + 40px); align-self:start; display:flex; flex-direction:column; align-items:center; gap:14px; height:calc(100vh - var(--nav-h) - 120px); }
.jx-gauge .mono { color:var(--jx-sulf); writing-mode:vertical-rl; transform:rotate(180deg); }
.jx-gauge i { position:relative; flex:1; width:2px; background:rgba(185,194,74,.18); }
.jx-gauge b { position:absolute; inset:0; background:var(--jx-sulf); box-shadow:0 0 16px rgba(185,194,74,.7); transform-origin:50% 0; transform:scaleY(.08); }
@supports (animation-timeline: view()) {
  .jx-gauge b { animation:jx-fill linear both; animation-timeline:--jx-descent; animation-range:entry 30% exit 70%; }
}
.jx-levels { display:grid; gap:clamp(72px, 10vw, 150px); margin:0; padding:0; list-style:none; }
.jx-level { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:clamp(28px, 4vw, 64px); align-items:end; }
.jx-level:nth-child(2) { grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); }
.jx-level:nth-child(2) figure { order:2; }
.jx-level figure { margin:0; aspect-ratio:16 / 10; overflow:hidden; overflow:clip; border-radius:4px; box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(185,194,74,.2); }
.jx-level img { display:block; width:100%; height:100%; object-fit:cover; }
@supports (animation-timeline: view()) {
  .jx-level img { animation:jx-sink linear both; animation-timeline:view(); }
}
.jx-level .mono { color:var(--jx-sulf); }
.jx-level h4 { margin:12px 0 16px; font-family:"Big Shoulders Stencil Display",sans-serif; font-weight:900; font-size:clamp(46px, 5.4vw, 92px); line-height:.86; text-transform:uppercase; }
.jx-level p { margin:0; max-width:420px; font-size:17px; line-height:1.65; color:#cdc8bf; }

.jx-breathe { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(36px, 6vw, 110px); align-items:center; margin-top:clamp(100px, 12vw, 180px); padding:clamp(32px, 5vw, 72px); border:1px solid rgba(185,194,74,.24); border-radius:4px; background:radial-gradient(60% 90% at 0% 50%, rgba(185,194,74,.1), transparent 70%); }
.jx-breathe p { margin-top:20px; }
.jx-mask { position:relative; display:grid; place-items:center; width:clamp(180px, 22vw, 300px); aspect-ratio:1; }
.jx-mask i { position:absolute; inset:0; border:1px solid var(--jx-sulf); border-radius:50%; animation:jx-breathe 6s ease-in-out infinite; }
.jx-mask i + i { inset:16%; border-style:dashed; animation-delay:-3s; }
.jx-mask span { display:grid; }
.jx-mask b { grid-area:1 / 1; text-align:center; font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--jx-sulf); opacity:0; animation:jx-words 9s infinite; }
.jx-mask b:nth-child(2) { animation-delay:3s; }
.jx-mask b:nth-child(3) { animation-delay:6s; }

/* ── 4. Suite ──────────────────────────────────────────── */
.jx-outro { position:relative; display:grid; place-items:center; padding:clamp(120px, 14vw, 200px) var(--g); text-align:center; overflow:hidden; overflow:clip; }
.jx-outro-frame { position:absolute; left:50%; top:50%; height:84%; transform:translate(-50%, -50%); overflow:visible; opacity:.55; }
.jx-outro-frame path { fill:none; stroke:var(--verm); stroke-width:3px; stroke-linecap:square; vector-effect:non-scaling-stroke; }
.jx-outro > div { position:relative; max-width:760px; }
.jx-outro h2 em { color:var(--verm); }
.jx-outro p:not(.mono) { margin:24px auto 0; max-width:520px; font-size:17px; line-height:1.65; color:#cdc8bf; }
.jx-outro .jx-cta { justify-content:center; }

/* ── Mouvements ────────────────────────────────────────── */
@keyframes jx-rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes jx-from-top { from { transform:translateY(-6%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes jx-from-bottom { from { transform:translateY(6%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes jx-seam { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes jx-pop { from { opacity:0; transform:translate(-50%, -50%) scale(.4) rotate(-45deg); } to { opacity:1; transform:translate(-50%, -50%); } }
@keyframes jx-nudge { 50% { transform:translateY(4px); } }
@keyframes jx-pan { from { background-position:50% 0%; } to { background-position:50% 100%; } }
@keyframes jx-board { from { transform:rotateX(58deg) rotateZ(-10deg) scale(.86); opacity:.2; } to { transform:rotateX(30deg) rotateZ(-4deg) scale(.96); opacity:1; } }
@keyframes jx-float-a { from { transform:translateY(90px) rotate(14deg); } to { transform:translateY(-70px) rotate(4deg); } }
@keyframes jx-float-b { from { transform:translateY(150px) rotate(-12deg); } to { transform:translateY(-40px) rotate(-3deg); } }
@keyframes jx-fill { from { transform:scaleY(.04); } to { transform:scaleY(1); } }
@keyframes jx-sink { from { transform:scale(1.18) translateY(-4%); } to { transform:scale(1.02) translateY(3%); } }
@keyframes jx-breathe { 0%, 100% { transform:scale(.86); opacity:.35; } 50% { transform:scale(1.04); opacity:1; } }
@keyframes jx-words { 0% { opacity:0; transform:translateY(6px); } 5%, 28% { opacity:1; transform:none; } 33%, 100% { opacity:0; transform:translateY(-6px); } }

/* ── Tablettes et téléphones ───────────────────────────── */
@media (max-width:1100px) {
  .jx-numbers { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:36px; }
  .jx-numbers li:nth-child(3) { padding-left:0; border-left:0; }
  .jx-factions { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:820px) {
  .jx-select { height:auto; min-height:0; }
  .jx-head { position:relative; left:auto; right:auto; top:auto; padding:calc(var(--nav-h) + 36px) var(--g) 28px; text-align:left; }
  .jx-head .mono { flex-direction:column; gap:6px; }
  .jx-head .mono span::before { content:none; }
  .jx-worlds { position:relative; inset:auto; flex-direction:column; }
  .jx-world { flex:none; min-height:74svh; }
  .jx-world--impero, .jx-world--breath { animation:none; }
  .jx-index { display:none; }
  .jx-body { left:var(--g); right:var(--g); bottom:40px; }
  .jx-seam { flex:none; width:auto; height:0; }
  .jx-seam i { top:-1px; bottom:auto; left:0; right:0; width:auto; height:2px; }
  .jx-seam b { top:0; left:50%; width:54px; height:54px; font-size:22px; }
  .jx-down { position:relative; left:auto; bottom:auto; transform:none; margin:24px var(--g) 0; }
  .jx-table thead tr, .jx-table tbody tr { display:grid; grid-template-columns:1fr 1fr; column-gap:18px; }
  .jx-table thead th:nth-child(2) { display:none; }
  .jx-table tbody th { grid-column:1 / -1; grid-row:1; width:auto; padding:18px 0 4px; }
  .jx-table td { width:auto; padding:6px 0 18px; font-size:19px; }
  .jx-table thead th { padding-bottom:18px; }
  .jx-intro { grid-template-columns:1fr; }
  .jx-giant--impero { font-size:20vw; }
  .jx-board { width:92%; }
  .jx-phone { border-width:5px; border-radius:22px; }
  .jx-phone--a { right:0; top:-10%; }
  .jx-phone--b { right:26%; top:30%; }
  .jx-scene-note { bottom:-44px; }
  .jx-descent { grid-template-columns:1fr; }
  .jx-gauge { display:none; }
  .jx-level, .jx-level:nth-child(2) { grid-template-columns:1fr; gap:22px; }
  .jx-level:nth-child(2) figure { order:0; }
  .jx-breathe { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .jx-breathe .jx-cta { justify-content:center; }
  .jx-breathe p { margin-left:auto; margin-right:auto; }
}
@media (max-width:480px) {
  .jx-numbers { grid-template-columns:1fr 1fr; }
  .jx-numbers li { padding-right:12px; }
  .jx-numbers li + li { padding-left:12px; }
  .jx-factions { gap:10px; }
  .jx-factions li { padding:22px 10px; }
  .jx-factions img { width:64px; height:64px; }
  .jx-factions b { font-size:17px; }
}
@media (prefers-reduced-motion: reduce) {
  .jx-world, .jx-media img, .jx-body, .jx-name, .jx-go, .jx-go i { transition:none; }
  .jx-head .mono, .jx-head h1, .jx-world--impero, .jx-world--breath, .jx-seam i, .jx-seam b, .jx-down span, .jx-mask i, .jx-giant, .jx-board, .jx-phone--a, .jx-phone--b, .jx-gauge b, .jx-level img { animation:none; }
  .jx-mask b:first-child { opacity:1; animation:none; }
  .jx-mask b:not(:first-child) { display:none; }
  .jx-gauge b { transform:none; }
}