/* Among Us IRL : cartoon vectoriel plat (contours épais, aplats, ombres décalées). Partagé par among-us.html et among-us-guide.html */
:root{--bg:#0d0b24;--bg2:#171243;--ink:#14102b;--pn:#4a5784;--pn2:#6a79ab;--pn3:#2a3157;--fg:#f4f5ff;--mut:#c0c8ee;
--cy:#4cd8e8;--mg:#f06bb4;--ye:#f7d23e;--li:#46c957;--or:#f08a2d;--rd:#e8433c;--bl:#3d6ff0;
--head:'Fredoka',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#2b2478,transparent 60%),var(--bg);color:var(--fg);font:600 18px/1.6 var(--body);position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;left:0;top:0;width:3px;height:3px;border-radius:50%;box-shadow:924px 884px 0 #fff3b0, 1040px 872px 0 #bfe9ff, 1048px 484px 0 #ffffff, 912px 308px 0 #ffffff, 1100px 828px 0 #fff3b0, 924px 668px 0 #ffffff, 1080px 64px 0 #ffffff, 388px 900px 0 #ffffff, 1592px 472px 0 #fff3b0, 1208px 860px 0 #bfe9ff, 1308px 300px 0 #ffffff, 1356px 84px 0 #ffd9f0, 832px 564px 0 #ffd9f0, 644px 776px 0 #ffd9f0, 60px 68px 0 #fff3b0, 220px 864px 0 #fff3b0, 136px 980px 0 #ffffff, 436px 212px 0 #fff3b0, 768px 724px 0 #fff3b0, 148px 576px 0 #ffd9f0, 688px 88px 0 #ffd9f0, 28px 984px 0 #ffffff, 272px 252px 0 #ffffff, 120px 476px 0 #bfe9ff, 1396px 572px 0 #fff3b0, 1040px 192px 0 #fff3b0, 1316px 392px 0 #fff3b0, 860px 216px 0 #ffd9f0, 1212px 308px 0 #bfe9ff, 380px 400px 0 #ffffff, 296px 216px 0 #ffd9f0, 16px 788px 0 #ffd9f0, 788px 72px 0 #ffffff, 424px 596px 0 #ffffff, 1228px 376px 0 #fff3b0, 260px 980px 0 #bfe9ff, 788px 184px 0 #ffd9f0, 464px 836px 0 #bfe9ff, 324px 756px 0 #fff3b0, 988px 616px 0 #fff3b0, 96px 104px 0 #ffffff, 1048px 984px 0 #bfe9ff, 1512px 720px 0 #ffd9f0, 860px 840px 0 #ffd9f0, 1064px 176px 0 #bfe9ff, 464px 488px 0 #ffd9f0, 432px 936px 0 #ffffff, 140px 272px 0 #fff3b0, 508px 60px 0 #bfe9ff, 576px 376px 0 #ffffff, 740px 140px 0 #ffd9f0, 1344px 748px 0 #ffffff, 36px 484px 0 #ffd9f0, 68px 20px 0 #fff3b0, 136px 748px 0 #ffd9f0, 276px 72px 0 #fff3b0, 1116px 376px 0 #bfe9ff, 696px 360px 0 #fff3b0, 156px 892px 0 #ffffff, 1020px 584px 0 #fff3b0;opacity:.7;pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--cy);font-weight:700}a:focus-visible,button:focus-visible{outline:4px solid var(--ye);outline-offset:3px;border-radius:8px}
nav{padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:600 1.05rem var(--head)}
nav a{color:var(--mut);text-decoration:none}nav a:hover{color:var(--ye)}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,6vw,3rem);margin:30px 0 14px}
h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:16px}
h3{font-size:1.25rem;margin:22px 0 8px}
p,li{max-width:66ch}
p{margin:0 0 .9em}
section{padding:20px 0}
/* contour de texte façon dessin animé */
.out{color:#fff;text-shadow:-3px -3px 0 var(--ink),3px -3px 0 var(--ink),-3px 3px 0 var(--ink),3px 3px 0 var(--ink),0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink),0 8px 0 var(--ink)}
/* panneau métallique : gros contour, bords ronds, ombre décalée, rivets */
.panel{background:var(--pn);border:5px solid var(--ink);border-radius:26px;padding:clamp(18px,3vw,30px);margin:26px 0 34px;position:relative;
 box-shadow:inset 0 6px 0 #ffffff26,inset 0 -8px 0 #00000030,0 9px 0 var(--ink)}
.panel::before,.panel::after{content:"";position:absolute;top:12px;width:10px;height:10px;border-radius:50%;background:#aeb9de;border:3px solid var(--ink)}
.panel::before{left:12px}.panel::after{right:12px}
.panel>h2{color:#fff;margin-left:18px}
/* câbles colorés qui courent entre les sections */
.cable{height:64px;margin:6px 0;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%2264%22 viewBox=%220 0 200 64%22%3E%3Cpath d=%22M0 20 C25 0 75 0 100 20 S175 40 200 20%22 fill=%22none%22 stroke=%22%2314102b%22 stroke-width=%2211%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M0 20 C25 0 75 0 100 20 S175 40 200 20%22 fill=%22none%22 stroke=%22%23e8433c%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M0 30 C25 10 75 10 100 30 S175 50 200 30%22 fill=%22none%22 stroke=%22%2314102b%22 stroke-width=%2211%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M0 30 C25 10 75 10 100 30 S175 50 200 30%22 fill=%22none%22 stroke=%22%233d6ff0%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M0 40 C25 20 75 20 100 40 S175 60 200 40%22 fill=%22none%22 stroke=%22%2314102b%22 stroke-width=%2211%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M0 40 C25 20 75 20 100 40 S175 60 200 40%22 fill=%22none%22 stroke=%22%23f7d23e%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M0 50 C25 30 75 30 100 50 S175 70 200 50%22 fill=%22none%22 stroke=%22%2314102b%22 stroke-width=%2211%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M0 50 C25 30 75 30 100 50 S175 70 200 50%22 fill=%22none%22 stroke=%22%23f06bb4%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") repeat-x center/200px 64px}
.screen{background:#12163a;border:4px solid var(--ink);border-radius:16px;padding:8px 10px;box-shadow:inset 0 0 0 3px #2c3a85,inset 0 0 30px #4cd8e822}
table{border-collapse:collapse;width:100%;font-size:1rem}
th,td{text-align:left;padding:9px 10px;border-bottom:3px dotted #ffffff30;vertical-align:top}
th{font:600 1rem var(--head);color:var(--ye)}
.scroll{overflow-x:auto}
footer{padding:30px 0 60px;color:var(--mut)}
@media (prefers-reduced-motion:no-preference){.bob{animation:bob 3s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-4px)}}}