/* CRANK CHAOS - le site « univers ». Noir et blanc 1-bit, un seul accent : le jaune de la Playdate.
   Les scenes collantes (.scene > .stage) sont pilotees par universe.js ; sans script, tout reste lisible. */

:root {
  --ink: #000;
  --paper: #fff;
  --yellow: #ffc500;
  --dim: rgba(255, 255, 255, 0.62);
  --dim-ink: rgba(0, 0, 0, 0.62);
  --pixel: Silkscreen, ui-monospace, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: max(16px, env(safe-area-inset-left));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 17px/1.5 var(--sans); overflow-x: hidden; }
img { max-width: 100%; }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--yellow); color: var(--ink); padding: 8px 12px; }

/* --- barre ---------------------------------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 52px;
  display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter);
  background: rgba(0, 0, 0, 0.72); backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.brand img { display: block; height: 30px; width: auto; filter: invert(1); image-rendering: pixelated; }
.bar nav { display: flex; gap: 22px; margin-right: auto; font-size: 13px; }
.bar nav a, .lang { text-decoration: none; color: var(--dim); }
.bar nav a:hover, .lang:hover { color: var(--paper); }
.lang { font-size: 13px; }
.pill {
  font: 600 13px/1 var(--sans); text-decoration: none; background: var(--yellow); color: var(--ink);
  padding: 8px 14px; border-radius: 999px;
}
@media (max-width: 720px) { .bar nav { display: none; } .lang { margin-left: auto; } }

/* --- typo ----------------------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--pixel); font-weight: 700; letter-spacing: 0.01em; margin: 0; }
.kicker { font: 600 15px/1.2 var(--sans); color: var(--yellow); margin: 0 0 12px; letter-spacing: 0.02em; }
.big { font-size: clamp(34px, 7vw, 92px); line-height: 1; }
.lede { font-size: clamp(19px, 2.4vw, 26px); line-height: 1.35; max-width: 34em; color: var(--dim); margin: 24px 0 0; }
.note { color: var(--dim); font-size: 15px; }
.btn {
  display: inline-block; margin-top: 28px; font: 600 17px/1 var(--sans); text-decoration: none;
  background: var(--yellow); color: var(--ink); padding: 14px 24px; border-radius: 999px;
}
.btn.dark { background: var(--ink); color: var(--yellow); }

/* --- scenes collantes ----------------------------------------------------------------------------- */
.scene { position: relative; height: var(--len, 300vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.js [data-show] { opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease; }
.js [data-show].on { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js [data-reveal].on { opacity: 1; transform: none; }

/* HERO : le nom, la machine qui tourne, trois phrases tour a tour. */
.hero .stage { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 72px var(--gutter) 28px; }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.hero-kicker { position: relative; font: 600 clamp(18px, 2.4vw, 26px)/1 var(--sans); color: var(--yellow); margin: 2vh 0 0; }
.hero-name { position: relative; margin-top: 10px; line-height: 0; }
.hero-name img { width: min(78vw, 640px); height: auto; }
.turn { position: relative; height: min(52vh, 92vw); width: auto; align-self: center; }
.hero-lines { position: relative; display: grid; text-align: center; min-height: 2.6em; }
.hero-lines p { margin: 0; font: 700 clamp(24px, 4vw, 44px)/1.15 var(--pixel); }
.scroll-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--dim); margin: 0; }

/* ANATOMIE : fond blanc, la machine de profil, une legende par piece. */
.light { background: var(--paper); color: var(--ink); }
.anatomy .stage { display: grid; grid-template-rows: auto 1fr; padding: 84px var(--gutter) 24px; }
.anat-head { text-align: center; }
.anat-head .kicker { color: var(--ink); opacity: 0.6; }
.anat-head h2 { font-size: clamp(24px, 3.8vw, 48px); line-height: 1.05; }
.anat-body { position: relative; justify-self: center; align-self: center; height: min(62vh, 120vw); aspect-ratio: 300 / 380; }
.anat-body img { width: 100%; height: 100%; }
.callout {
  --reach: clamp(48px, 11vw, 140px); --line: clamp(36px, 9vw, 120px);
  position: absolute; top: var(--y); margin: -0.65em 0 0; width: min(15em, 38vw);
  font-size: clamp(12px, 1.5vw, 16px); line-height: 1.3; color: var(--ink);
}
.callout.to-right { left: var(--x); margin-left: var(--reach); }
.callout.to-left { right: calc(100% - var(--x)); margin-right: var(--reach); text-align: right; }
.callout::before { content: ""; position: absolute; top: 0.65em; height: 2px; width: var(--line); background: var(--ink); }
.callout.to-right::before { right: 100%; margin-right: 8px; }
.callout.to-left::before { left: 100%; margin-left: 8px; }
.callout::after {
  content: ""; position: absolute; top: calc(0.65em - 5px); width: 8px; height: 8px; background: var(--ink);
  border: 2px solid var(--paper);
}
.callout.to-right::after { right: calc(100% + 8px + var(--line) - 2px); }
.callout.to-left::after { left: calc(100% + 8px + var(--line) - 2px); }

/* PLAYDATE : la console en 3D, sa manivelle tourne avec le defilement. */
.playdate .stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 4vw;
  padding: 80px max(var(--gutter), 6vw) 32px; background: radial-gradient(circle at 70% 50%, #1b1500 0, #000 60%);
}
.pd-text h2 { font-size: clamp(32px, 5.4vw, 76px); line-height: 1; color: var(--yellow); }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; }
.steps li { font: 700 clamp(20px, 2.6vw, 32px)/1.2 var(--pixel); }
.js .steps li, .js .hero-lines p { grid-area: 1 / 1; }
.steps { gap: 10px; }
.js .steps { gap: 0; }
.pd-wrap { perspective: 1400px; display: grid; place-items: center; }
.pd {
  --w: min(34vw, 380px); --h: calc(var(--w) * 74 / 76); --d: calc(var(--w) * 9 / 76); --u: calc(var(--w) / 76);
  position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-38deg);
}
.face { position: absolute; background: var(--yellow); }
.front, .back { inset: 0; border-radius: calc(var(--u) * 7); }
.front { transform: translateZ(calc(var(--d) / 2)); box-shadow: inset 0 0 0 calc(var(--u) * 0.6) #e3ad00; }
.back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #e6b100; }
.left, .right { top: calc(var(--u) * 4); width: var(--d); height: calc(var(--h) - var(--u) * 8); left: calc(50% - var(--d) / 2); background: #d9a700; }
.left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.top, .bottom { left: calc(var(--u) * 4); width: calc(var(--w) - var(--u) * 8); height: var(--d); top: calc(50% - var(--d) / 2); background: #f0b800; }
.top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #c99a00; }
.screen {
  position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); top: calc(var(--u) * 8);
  aspect-ratio: 400 / 240; background: #111; padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.4);
}
.screen img { display: block; width: 100%; height: 100%; }
.dpad { position: absolute; left: calc(var(--u) * 12); bottom: calc(var(--u) * 10); width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.dpad i { position: absolute; background: #222; border-radius: calc(var(--u) * 1); }
.dpad i:first-child { left: 34%; top: 0; width: 32%; height: 100%; }
.dpad i:last-child { top: 34%; left: 0; height: 32%; width: 100%; }
.ab { position: absolute; right: calc(var(--u) * 9); bottom: calc(var(--u) * 11); display: flex; gap: calc(var(--u) * 3); align-items: flex-end; }
.ab b {
  display: grid; place-items: center; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%;
  background: #8a6a00; color: #ffd94d; font: 700 calc(var(--u) * 3.5)/1 var(--sans);
}
.ab b:last-child { margin-bottom: calc(var(--u) * 4); }
.menu { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 3); width: calc(var(--u) * 6); height: calc(var(--u) * 2); border-radius: 9px; background: #c99a00; }
.crank { position: absolute; left: 50%; top: 62%; width: 0; height: 0; transform: rotate(var(--crank, 0deg)); }
.crank::before {
  content: ""; position: absolute; left: calc(var(--u) * -3.5); top: calc(var(--u) * -3.5); width: calc(var(--u) * 7);
  height: calc(var(--u) * 7); border-radius: 50%; background: #b88d00;
}
.crank .arm { position: absolute; left: calc(var(--u) * -1.3); top: 0; width: calc(var(--u) * 2.6); height: calc(var(--u) * 26); background: #f5c000; border-radius: 6px; }
.crank .knob {
  position: absolute; left: calc(var(--u) * -3); top: calc(var(--u) * 22); width: calc(var(--u) * 6); height: calc(var(--u) * 9);
  background: #ffd23a; border-radius: calc(var(--u) * 3); box-shadow: inset 0 0 0 2px #c99a00;
}
@media (max-width: 760px) {
  .playdate .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-top: 72px; gap: 0; }
  .pd { --w: min(64vw, 300px); }
  .pd-text .btn { display: none; }
}

/* --- blocs ---------------------------------------------------------------------------------------- */
.block { padding: clamp(96px, 14vw, 180px) 0; }
.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.physics { background: var(--paper); color: var(--ink); }
.physics .kicker { color: var(--ink); opacity: 0.6; }
.physics .lede { color: var(--dim-ink); }
.facts { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.facts li { border: 3px solid var(--ink); padding: 22px; font: 700 22px/1.2 var(--pixel); }

.ios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.phones { position: relative; height: min(70vh, 640px); }
.phone {
  position: absolute; height: 100%; aspect-ratio: 430 / 932; right: 18%; border-radius: 46px; padding: 10px;
  background: #1a1a1a; box-shadow: 0 0 0 2px #333, 0 40px 80px rgba(255, 197, 0, 0.12);
}
.phone img { width: 100%; height: 100%; border-radius: 36px; display: block; object-fit: cover; }
.phone.back { right: 0; top: 8%; height: 88%; transform: rotate(6deg); z-index: -1; opacity: 0.85; }
@media (max-width: 760px) { .ios-grid { grid-template-columns: 1fr; } .phones { height: 520px; } .phone { right: 28%; } }

.next { background: #0b0b0b; }
.platforms { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.platforms li > a, .platforms li.soon {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; padding: 24px;
  border-radius: 22px; text-decoration: none; background: #161616;
}
.platforms li > a { background: var(--yellow); color: var(--ink); }
.platforms span { font: 700 clamp(28px, 3.4vw, 40px)/1 var(--pixel); }
.platforms em { font-style: normal; font-size: 15px; opacity: 0.72; }
.platforms li.soon { border: 2px dashed rgba(255, 255, 255, 0.3); background: transparent; color: var(--dim); }

.com-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 56px; }
@media (max-width: 860px) { .com-grid { grid-template-columns: 1fr; } }
.cards { display: grid; gap: 20px; align-content: start; }
.card { background: #161616; border-radius: 22px; padding: 26px; }
.card h3 { font-size: 26px; color: var(--yellow); }
.card p { color: var(--dim); margin: 10px 0 0; }

.board { background: #161616; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; min-width: 0; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.board-head h3 { font-size: 22px; }
.board-status { margin: 0; font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.board .dot { width: 8px; height: 8px; border-radius: 50%; background: #666; animation: blink 1.2s steps(2) infinite; }
.board[data-state="live"] .dot { background: #4cd964; animation: none; }
.board[data-state="live"] .board-status { color: var(--paper); }
@keyframes blink { 50% { opacity: 0.2; } }
.board-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.board-modes button, .board-period button {
  font: 700 13px/1 var(--pixel); color: var(--dim); background: transparent; border: 2px solid #333;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; min-height: 44px;
}
.board-modes button[aria-selected="true"], .board-period button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.board-period { display: flex; gap: 6px; margin-top: 8px; }
.scroller { overflow-x: auto; margin-top: 12px; }
.board-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board-table th { text-align: left; font-size: 12px; color: var(--dim); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #333; }
.board-table td { padding: 9px 10px; border-bottom: 1px solid #222; font-size: 15px; }
.board-table td.num { color: var(--dim); }
.board-table .score { text-align: right; }
.board-table tr.empty td { color: var(--dim); text-align: center; }
.board[data-state="loading"] .board-table tbody { opacity: 0.4; }

.walls-title { font-size: clamp(30px, 4vw, 48px); margin-top: 96px; }
.walls { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.walls li { display: grid; gap: 8px; }
.walls img { width: 100%; height: auto; border-radius: 18px; border: 2px solid #222; }
.walls span { font: 700 18px/1 var(--pixel); }
.walls a { font-size: 14px; color: var(--yellow); text-decoration: none; }
.walls a::before { content: "\2193  "; }

.foot { text-align: center; padding: 80px var(--gutter) 64px; color: var(--dim); font-size: 14px; border-top: 1px solid #222; }
.foot img { filter: invert(1); }
.foot .fine { font-size: 12px; opacity: 0.7; }

/* Mouvement reduit : tout est pose d'emblee, rien ne tourne. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene { height: auto; }
  .stage { position: relative; height: auto; min-height: 100vh; }
}

/* Telephone : la machine en haut, les legendes en liste dessous (les fleches n'auraient pas la place). */
@media (max-width: 600px) {
  .anat-body { height: auto; aspect-ratio: auto; width: 100%; display: grid; justify-items: center; gap: 6px; }
  .anat-body img { width: auto; height: 34vh; }
  .callout, .callout.to-left, .callout.to-right {
    position: static; width: 100%; margin: 0; text-align: left; font-size: 14px;
    border-left: 3px solid var(--ink); padding-left: 10px;
  }
  .callout::before, .callout::after { display: none; }
}

/* La vraie Playdate 3D (playdate3d.js) prend la place de la console CSS une fois chargee. */
.pd-wrap[data-playdate3d] { position: relative; width: 100%; height: min(78vh, 720px); }
.pd-wrap canvas { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }
.pd-wrap.has-3d .pd { display: none; }
@media (max-width: 760px) { .pd-wrap[data-playdate3d] { height: 58vh; } }