/* Pages d'information de Rythmo Bille : même univers néon que le jeu, mais faites pour être lues */
:root{--bg:#05020d;--bg2:#0e0820;--ink:#ece6ff;--dim:#a99fd0;--mag:#ff2bd6;--cyan:#19f0ff;--yel:#ffe14d;--line:rgba(169,95,255,.35);--pix:"Press Start 2P",ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background-image:radial-gradient(1200px 600px at 50% -10%,rgba(169,95,255,.18),transparent 70%),radial-gradient(900px 500px at 100% 40%,rgba(255,43,214,.07),transparent 70%)}
a{color:var(--cyan)}
a:hover{color:#fff}
.skip{position:absolute;left:-999px;top:0;background:var(--yel);color:#000;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
.top{position:sticky;top:0;z-index:5;background:rgba(5,2,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{max-width:1080px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font:15px var(--pix);color:#fff;text-decoration:none;text-shadow:0 0 6px var(--cyan),0 0 16px var(--cyan),2px 2px 0 var(--mag);white-space:nowrap}
.logo span{color:var(--yel);text-shadow:0 0 8px var(--yel)}
.right{display:flex;align-items:center;gap:14px}
.lang{font-size:15px;color:var(--dim);text-decoration:none}
.btn{display:inline-block;font:11px var(--pix);color:#fff;background:var(--mag);padding:10px 14px;text-decoration:none;box-shadow:0 0 16px rgba(255,43,214,.55);border-radius:4px}
.btn:hover{color:#fff;filter:brightness(1.15)}
.btn.big{font-size:14px;padding:16px 22px}
nav{max-width:1080px;margin:0 auto;padding:0 16px 10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{flex:none;font-size:15px;color:var(--dim);text-decoration:none;padding:5px 10px;border:1px solid transparent;border-radius:999px}
nav a:hover{color:#fff;border-color:var(--line)}
nav a[aria-current]{color:#fff;border-color:var(--cyan);box-shadow:0 0 10px rgba(25,240,255,.25)}
main{max-width:820px;margin:0 auto;padding:28px 16px 40px}
h1{font:clamp(18px,4.2vw,28px)/1.5 var(--pix);margin:10px 0 18px;color:#fff;text-shadow:0 0 8px rgba(25,240,255,.6),2px 2px 0 var(--mag)}
h2{font:clamp(13px,2.8vw,16px)/1.6 var(--pix);color:var(--yel);margin:40px 0 12px}
h3{font-size:20px;margin:26px 0 8px;color:#fff}
p,li{color:var(--ink)}
.lead{font-size:21px;color:#fff}
.muted{color:var(--dim)}
ul,ol{padding-left:22px}
li{margin:6px 0}
strong{color:#fff}
kbd{font:13px var(--pix);background:var(--bg2);border:1px solid var(--line);border-bottom-width:3px;border-radius:4px;padding:3px 7px;color:var(--yel)}
figure{margin:24px 0}
figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;box-shadow:0 0 30px rgba(169,95,255,.2)}
figcaption{font-size:15px;color:var(--dim);margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.card h3{margin-top:0;font-size:18px}
.card p{margin:6px 0 0;font-size:16px;color:var(--dim)}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:16px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--yel);font-weight:600}
.tablewrap{overflow-x:auto}
.note{background:rgba(25,240,255,.06);border-left:3px solid var(--cyan);padding:12px 16px;border-radius:0 6px 6px 0;margin:18px 0}
details{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:10px 0}
summary{cursor:pointer;font-weight:600;color:#fff}
details p{margin:10px 0 2px}
.cta{max-width:820px;margin:20px auto 0;text-align:center;border:1px solid var(--line);border-radius:10px;padding:28px 16px;background:linear-gradient(180deg,rgba(255,43,214,.08),rgba(25,240,255,.05))}
.cta-t{font:clamp(13px,3vw,16px)/1.6 var(--pix);color:#fff;margin:0 0 6px}
.cta p{margin:0 0 18px;color:var(--dim)}
footer{border-top:1px solid var(--line);margin-top:30px;padding:28px 16px 40px}
.cols{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.cols h2{font:11px var(--pix);color:var(--dim);margin:0 0 10px}
.cols a{display:block;color:var(--ink);text-decoration:none;font-size:15px;margin:6px 0}
.cols a:hover{color:var(--cyan)}
.small{max-width:1080px;margin:24px auto 0;font-size:14px;color:var(--dim)}
@media (max-width:560px){body{font-size:17px}.lead{font-size:19px}.logo{font-size:12px}.btn{font-size:10px;padding:9px 11px}}