/* =====================================================================
   SUJET 07 — escape game autonome (un seul fichier)
   Palette : #050505 #101010 #181818 #651414 #941C1C #D8D3CA
   ===================================================================== */
:root{
  --k0:#050505;--k1:#101010;--k2:#181818;--r1:#651414;--r2:#941C1C;--bone:#D6D4BE;--dim:#7d7f6c;
  --osd:ui-monospace,"Cascadia Mono","Consolas","Lucida Console","Courier New",monospace;
  --voice:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --grain:.06;--red:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;color:var(--bone);font-family:var(--osd);overflow:hidden;
  user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input{font:inherit;user-select:text;-webkit-user-select:text}
canvas{display:block}
[hidden]{display:none!important}
#app{position:fixed;inset:0;overflow:hidden;background-color:#060705;
  background-image:radial-gradient(ellipse at 20% 15%,#1a1f1244,#0000 55%),radial-gradient(ellipse at 85% 90%,#2a120c33,#0000 50%),repeating-linear-gradient(0deg,#0000 0 62px,#0e110c 62px 64px),repeating-linear-gradient(90deg,#0000 0 62px,#0e110c 62px 64px)}
#stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
#app.playing #stage{top:42px}
.scroll{overflow:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:6px}.scroll::-webkit-scrollbar-thumb{background:#2a2826}

/* ---------- HUD ---------- */
#hud{position:absolute;top:0;left:0;right:0;height:42px;display:none;align-items:center;justify-content:space-between;
  padding:0 10px;z-index:30;background:linear-gradient(#000,#000a);font-size:11px;letter-spacing:.14em;color:var(--dim)}
#app.playing #hud{display:flex}
#hud .hl,#hud .hr{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
#hud .hr{justify-content:flex-end}
#plabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#timer{font-size:22px;color:#d2413a;letter-spacing:.16em;font-variant-numeric:tabular-nums;background:#0a0303;border:1px solid #2a0c0c;padding:1px 10px;
  text-shadow:0 0 8px #c9302c,0 0 2px #c9302c;cursor:default}
#timer.low{color:#ff5a50}
#timer.crit{color:#ff5a50;animation:pulse .9s infinite}
.hb{width:34px;height:30px;border:1px solid #3a3733;color:#a39e94;font-size:14px;background:#0b0b0b}
.hb:hover,.hb:focus-visible{color:var(--bone);border-color:#55504a;outline:none}
.hb.off{text-decoration:line-through;color:#4a4641}
@keyframes pulse{50%{opacity:.45}}

/* ---------- Boutons génériques ---------- */
.btn{border:1px solid #3a3733;background:#131313;color:var(--bone);padding:9px 14px;font-size:12px;letter-spacing:.12em;
  transition:background .1s,border-color .1s}
.btn:hover{background:#1c1c1c;border-color:#5a554e}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:1px solid var(--bone);outline-offset:2px}
.btn.red{border-color:var(--r2);color:#eecfca}
.btn.red:hover{background:#2a0c0c}
.btn.on{background:var(--bone);color:#000;border-color:var(--bone)}
.btn[disabled]{opacity:.35;pointer-events:none}

/* ---------- Couches d'effets ---------- */
#fx{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}
#fx>*{position:absolute;inset:0}
#fx-grain{width:100%;height:100%;image-rendering:pixelated;opacity:var(--grain);mix-blend-mode:screen}
#fx-scan{background:repeating-linear-gradient(0deg,#0000 0 2px,#0000002e 2px 3px);opacity:.8}
#fx-red{background:radial-gradient(ellipse at center,#0000 35%,#651414);opacity:var(--red);transition:opacity 2s}
#fx-vig{background:radial-gradient(ellipse at center,#0000 55%,#000d 100%)}
#fx-tint{background:radial-gradient(ellipse at center,#8fae4a17,#4a6a240d)}
.tvh{display:flex;align-items:center;gap:10px;font-family:var(--osd);font-size:10px;letter-spacing:.3em;color:#d2413a;margin-bottom:.4em}
.tvh svg{width:34px;height:34px;fill:none;stroke:#d2413a;stroke-width:2.2;filter:drop-shadow(0 0 6px #941c1c);animation:pulse 1.4s infinite}
.intro .piece{width:64px;height:64px;fill:none;stroke:#941C1C;stroke-width:1.6;filter:drop-shadow(0 0 10px #651414)}
#fx-bars div{position:absolute;left:0;right:0;background:#d8d3ca14;mix-blend-mode:difference}
#fx-black{background:#000;opacity:0;transition:opacity .25s}
#fx-black.on{opacity:1}
#fx-flash{background:#d8d3ca;opacity:0}
#fx-flash.on{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:var(--fa,.5)}100%{opacity:0}}
#fx-sub{display:none;align-items:center;justify-content:center;font-size:clamp(28px,8vw,90px);letter-spacing:.2em;color:#d8d3ca55;text-align:center}
#fx-sub.on{display:flex}
#fx-sil{display:none}
#fx-sil.on{display:block}
#fx-sil::after{content:"";position:absolute;bottom:0;right:6%;width:9vh;height:38vh;background:#000;opacity:.85;
  clip-path:polygon(35% 0,65% 0,72% 12%,62% 18%,95% 26%,100% 62%,84% 62%,82% 100%,18% 100%,16% 62%,0 62%,5% 26%,38% 18%,28% 12%);filter:blur(1.5px)}
#fx-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:8vh 8vw;
  font-family:var(--voice);font-size:clamp(19px,3.4vw,34px);letter-spacing:.04em;text-align:center;opacity:0;transition:opacity .6s;
  text-shadow:0 0 18px #000,0 0 4px #000,1px 0 #941c1c66}
#fx-msg.on{opacity:1}
#fx-msg.band{justify-content:flex-end;padding-bottom:12vh;background:linear-gradient(#0000 45%,#000c 80%)}
#fx-toast{inset:auto auto 14px 14px;font-size:11px;letter-spacing:.14em;color:var(--bone);background:#000c;border-left:2px solid var(--r2);
  padding:7px 12px;opacity:0;transform:translateX(-10px);transition:all .3s;max-width:80vw}
#fx-toast.on{opacity:1;transform:none}
#fx-err{inset:auto;left:50%;top:38%;transform:translate(-50%,-50%);width:min(88vw,380px);background:#bdb8ae;color:#111;border:2px solid #000;
  box-shadow:6px 6px 0 #000;display:none;font-size:12px}
#fx-err.on{display:block}
#fx-err b{display:block;background:var(--r1);color:var(--bone);padding:5px 8px;letter-spacing:.1em}
#fx-err p{padding:14px 10px;line-height:1.5}
#stage.glitch{animation:gl .22s steps(2) infinite}
@keyframes gl{0%{transform:translate(0)}25%{transform:translate(-7px,2px) skewX(1.5deg);filter:contrast(1.5) saturate(1.8)}
  50%{clip-path:inset(18% 0 46% 0);transform:translate(9px,-2px)}75%{clip-path:inset(62% 0 8% 0);transform:translate(-4px,1px);filter:hue-rotate(-20deg)}100%{transform:none}}
#stage.shake{animation:shk .08s linear infinite}
@keyframes shk{0%{transform:translate(3px,-2px)}25%{transform:translate(-3px,3px)}50%{transform:translate(2px,3px)}75%{transform:translate(-3px,-2px)}}
#app.flick #stage{animation:flk .7s steps(1)}
@keyframes flk{0%,22%,45%,70%{filter:brightness(.25)}10%,30%,60%,100%{filter:brightness(1)}}
#app.unstable #stage{animation:unst 3.2s infinite}
@keyframes unst{0%,91%,100%{transform:none}92%{transform:translateX(1.5px)}95%{transform:translateX(-1.5px)}}
@media(prefers-reduced-motion:reduce){#stage.shake,#app.unstable #stage{animation:none}}

/* ---------- Modales ---------- */
#modals{position:absolute;inset:0;z-index:60;pointer-events:none}
.modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000c;pointer-events:auto;padding:12px}
.panel{background:#0c0c0c;border:1px solid #2c2a27;width:min(100%,560px);max-height:92%;padding:20px;box-shadow:0 0 60px #000}
.panel h2{font-size:13px;letter-spacing:.2em;font-weight:400;margin-bottom:14px;color:var(--bone)}
.panel p{font-size:13px;line-height:1.6;color:#b5b0a6;margin-bottom:10px}
.panel .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.panel input[type=text],.panel input[type=password]{width:100%;background:#000;border:1px solid #3a3733;color:var(--bone);padding:10px;letter-spacing:.1em;outline:none}
.panel input:focus{border-color:var(--bone)}
.hint{border-left:2px solid var(--r1);padding:6px 10px;margin:8px 0;font-family:var(--voice);font-size:16px;color:var(--bone)}
.nb-e{border-top:1px solid #1f1e1c;padding:12px 0;font-size:12px;line-height:1.6;color:#b5b0a6}
.nb-e b{display:block;color:var(--bone);font-weight:400;letter-spacing:.14em;font-size:11px;margin-bottom:6px}
.nb-e canvas,.nb-e svg{background:#070707;border:1px solid #1f1e1c}
.morse{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:2px 10px;font-size:12px;color:var(--bone)}

/* ---------- Points ---------- */
#pts{font-size:12px;letter-spacing:.1em;color:var(--bone);white-space:nowrap;margin-right:4px;font-variant-numeric:tabular-nums}
.pshort{display:none}
.ptsbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin-bottom:14px}
.ptsbox div{background:#101010;border:1px solid #232120;padding:8px}
.ptsbox small{display:block;font-size:9px;letter-spacing:.14em;color:var(--dim)}
.ptsbox b{font-weight:400;font-size:19px;color:var(--bone);font-variant-numeric:tabular-nums}

/* ---------- Intro / fins ---------- */
.intro{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center}
.intro .lines{font-family:var(--voice);font-size:clamp(20px,4vw,38px);line-height:1.5;min-height:3em;letter-spacing:.05em;text-shadow:1px 0 #941c1c77,-1px 0 #2b6f8a44}
.intro .big{font-family:var(--osd);font-size:clamp(54px,16vw,150px);letter-spacing:.1em}
.intro .who{display:flex;flex-direction:column;gap:12px;align-items:center;width:min(100%,320px)}
.intro .who label{font-size:11px;letter-spacing:.3em;color:var(--dim)}
.intro .who input{width:100%;background:#000;border:none;border-bottom:1px solid var(--bone);color:var(--bone);text-align:center;
  font-size:22px;padding:8px;letter-spacing:.2em;outline:none;text-transform:uppercase}
.intro .who input.bad{border-color:var(--r2);animation:shk .08s linear 4}
.intro .power{font-size:12px;letter-spacing:.3em;color:var(--dim);animation:pulse 1.6s infinite;padding:30px}
.end{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;gap:18px}
.end .lines{font-family:var(--voice);font-size:clamp(20px,4vw,36px);line-height:1.6}
.end h1{font-weight:400;font-size:clamp(22px,6vw,54px);letter-spacing:.3em}
.end h1.go{color:var(--r2)}
.res{width:min(100%,400px);font-size:13px;letter-spacing:.1em}
.res div{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-bottom:1px solid #1a1918}
.res div.sub{color:var(--dim);font-size:11px}
.res div.tot{font-size:20px;border:none;padding-top:14px;color:var(--bone)}

/* ---------- 1. CCTV ---------- */
.cctv{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:14px;width:min(100%,1240px);height:100%;padding:10px;align-items:center}
.mon{position:relative;justify-self:center;width:min(100%,calc((100vh - 70px)*4/3));width:min(100%,calc((100dvh - 70px)*4/3));aspect-ratio:4/3;background:#000;
  border:12px solid #111;border-radius:16px/20px;box-shadow:inset 0 0 50px #000,0 0 0 2px #1d1c1a,0 20px 60px #000;overflow:hidden;cursor:grab}
.mon canvas{width:100%;height:100%;border-radius:10px}
.mon-msg{position:absolute;left:0;right:0;top:44%;text-align:center;font-size:clamp(14px,2.6vw,24px);letter-spacing:.2em;
  color:var(--bone);text-shadow:2px 0 #941c1c,-2px 0 #1d5b70;pointer-events:none}
.side{display:flex;flex-direction:column;gap:8px}
.side .cams,.side .zoom{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.side .note{font-size:10px;line-height:1.5;color:var(--dim);letter-spacing:.06em}
@media(max-width:760px){.cctv{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;overflow:auto;touch-action:pan-y}
  .mon{border-width:6px;touch-action:none}.side{display:grid;grid-template-columns:1fr 1fr;align-items:start}.side .cap,.side .note{grid-column:1/-1}}

/* ---------- 2. Magnétophone ---------- */
.tape{width:min(96%,780px);max-height:100%;background:linear-gradient(#211f1c,#121110);border:1px solid #2f2c28;border-radius:10px;padding:14px;
  box-shadow:0 30px 80px #000,inset 0 1px 0 #3a3632}
.tape .win{display:flex;justify-content:space-around;align-items:center;background:#070707;border:3px solid #000;border-radius:6px;padding:12px 6px;position:relative}
.reel{width:clamp(56px,12vw,88px);aspect-ratio:1;border-radius:50%;border:5px solid #26241f;
  background:conic-gradient(#0a0a0a 0 7%,#0000 0 33%,#0a0a0a 0 40%,#0000 0 66%,#0a0a0a 0 73%,#0000 0),radial-gradient(circle,#55524c 0 13%,#161514 14% 44%,#3b2a1c 45% 100%)}
.cass{flex:1;margin:0 10px;background:#cfc8b8;color:#1a1815;padding:8px 10px;font-size:clamp(9px,1.7vw,12px);line-height:1.5;border:1px solid #000;transform:rotate(-.6deg);min-width:0}
.cass .mir{display:inline-block;transform:scaleX(-1);font-family:var(--voice);font-size:1.25em;letter-spacing:.06em}
.tape .meta{display:flex;justify-content:space-between;align-items:center;margin:10px 0 6px;font-size:11px;letter-spacing:.12em;color:var(--dim);gap:10px}
.tape .ctr{font-size:18px;color:var(--bone);font-variant-numeric:tabular-nums}
.tape .lamp{display:flex;align-items:center;gap:6px}
.tape .lamp i{width:10px;height:10px;border-radius:50%;background:#2a0a0a;display:inline-block}
.tape .lamp.on i{background:#d23a32;box-shadow:0 0 10px #d23a32}
.wave{width:100%;height:clamp(70px,16vh,120px);background:#060606;border:1px solid #232120;cursor:crosshair;touch-action:none}
.tape .vu{height:8px;background:#060606;border:1px solid #232120;margin:8px 0 10px;position:relative}
.tape .vu b{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#807b72,#d8d3ca 70%,#941c1c)}
.keys{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.key{height:52px;background:linear-gradient(#2c2a27,#151413);border:1px solid #000;border-bottom:6px solid #000;color:var(--bone);
  font-size:clamp(8px,1.6vw,11px);letter-spacing:.06em;border-radius:3px}
.key.on{border-bottom-width:2px;transform:translateY(4px);color:#e0635c}
.key small{display:block;font-size:15px;margin-bottom:2px}
.tape .tip{font-size:10px;color:var(--dim);margin-top:8px;letter-spacing:.06em}

/* ---------- 3. Pièce noire ---------- */
.dark{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;cursor:none}
.dark canvas.room{touch-action:none}
.inspect{position:absolute;inset:0;background:#000e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px;cursor:default;z-index:5}
.inspect canvas{width:min(100%,560px);aspect-ratio:7/5;background:#0a0a0a;border:1px solid #2a2826;box-shadow:0 0 60px #000}
.inspect .cap{font-family:var(--voice);font-size:17px;color:var(--bone);text-align:center;max-width:540px;line-height:1.5;min-height:1.5em}
.safe{display:flex;flex-direction:column;align-items:center;gap:14px;background:linear-gradient(#232220,#131211);border:2px solid #000;padding:22px 26px;box-shadow:inset 0 0 40px #000,0 0 0 3px #2a2826}
.wheels{display:flex;gap:12px}
.wheel{display:flex;flex-direction:column;align-items:center;gap:4px}
.wheel button{width:54px;height:30px;border:1px solid #000;background:#1c1b19;color:var(--dim)}
.wheel span{width:54px;height:66px;display:flex;align-items:center;justify-content:center;font-size:36px;background:#cfc8b8;color:#111;border:2px solid #000;box-shadow:inset 0 8px 10px #0007,inset 0 -8px 10px #0007}

/* ---------- 4. Photographies ---------- */
.table{position:absolute;inset:0;overflow:hidden;--ps:min(42vmin,250px);
  background:radial-gradient(ellipse at 50% 40%,#2a2019 0,#120d0a 60%,#060403 100%),repeating-linear-gradient(92deg,#0000 0 38px,#0003 38px 40px)}
.table::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(91deg,#0000 0 60px,#00000040 60px 62px);pointer-events:none}
.photo{position:absolute;left:0;top:0;width:var(--ps);height:var(--ps);margin:calc(var(--ps)/-2) 0 0 calc(var(--ps)/-2);touch-action:none;cursor:grab;will-change:transform}
.photo.snap{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.photo .face,.photo .back{position:absolute;inset:0}
.photo svg{width:100%;height:100%;display:block}
.photo.film .face{background:#0d0d0d59;border:1px solid #d8d3ca33;box-shadow:0 4px 14px #0008}
.photo.opq .face{background:#cfc8b8;padding:6%;padding-bottom:16%;box-shadow:0 6px 18px #000a}
.photo .back{display:none;background:#b9b2a2;color:#3a352e;font-size:10px;letter-spacing:.1em;align-items:center;justify-content:center;flex-direction:column;gap:8px;box-shadow:0 6px 18px #000a}
.photo.flip .face{display:none}.photo.flip .back{display:flex}
.photo.sel{outline:1px dashed #d8d3ca66;outline-offset:4px}
.photo.lit .face{border-color:var(--r2);box-shadow:0 0 30px #941c1c88}
.pbar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;z-index:999;background:#000a;padding:6px;border:1px solid #2a2826}
.pbar .btn{padding:8px 12px;font-size:15px}
.reveal{position:absolute;inset:0;z-index:1000;background:#000d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;animation:fadein 1.2s}
.reveal svg{width:min(80vmin,460px);height:auto}
.reveal .cap{font-family:var(--voice);font-size:18px}
@keyframes fadein{from{opacity:0}}
.xmark{animation:pulse 1s infinite}

/* ---------- 5. Radio ---------- */
.radio{width:min(96%,720px);max-height:100%;background:linear-gradient(#2b251d,#16120e);border:2px solid #0a0806;border-radius:14px;padding:16px;
  box-shadow:0 30px 80px #000,inset 0 1px 0 #4a4034}
.radio .top{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px}
.radio canvas.dial{width:100%;height:84px;border:3px solid #0a0806;border-radius:4px}
.radio .vu{height:84px;background:#bdb6a6;border:3px solid #0a0806;border-radius:4px;position:relative}
.radio .vu svg{width:100%;height:100%}
.radio .mid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.grille{height:clamp(70px,16vh,120px);border-radius:6px;background:repeating-linear-gradient(90deg,#0a0806 0 3px,#2b251d 3px 7px);border:2px solid #0a0806}
.strip{height:clamp(70px,16vh,120px);background:#060606;border:2px solid #000;color:var(--bone);font-size:clamp(14px,3vw,22px);letter-spacing:.25em;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;overflow:hidden;word-break:break-all;text-shadow:0 0 8px #d8d3ca66}
.radio .bot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.knob{width:clamp(96px,22vw,130px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a5650,#151413 70%);border:4px solid #000;
  position:relative;touch-action:none;cursor:grab;box-shadow:0 6px 14px #000;flex:none}
.knob i{position:absolute;left:50%;top:8%;width:4px;height:24%;background:var(--bone);margin-left:-2px;border-radius:2px}
.radio .read{font-size:clamp(24px,6vw,40px);letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--bone)}
.radio .read small{font-size:11px;color:var(--dim);letter-spacing:.2em;display:block}
.radio .fine{display:flex;gap:6px;margin-top:6px}
.radio .fine .btn{padding:6px 14px;font-size:13px;letter-spacing:0;touch-action:none}
.lockb{width:110px;font-size:10px;letter-spacing:.14em;color:var(--dim);text-align:center}
.lockb .bar{height:10px;border:1px solid #000;background:#0a0806;margin-top:6px}
.lockb .bar b{display:block;height:100%;width:0;background:var(--r2)}
.radio .tip{font-size:10px;color:#8a8275;margin-top:10px;letter-spacing:.06em}

/* ---------- 6. Terminal ---------- */
.term{position:absolute;inset:0;background:#030403;font-size:clamp(12px,1.9vw,15px);line-height:1.5;display:flex;flex-direction:column;
  color:#c9c4ba;text-shadow:0 0 6px #d8d3ca44;cursor:text}
.tscr{flex:1;min-height:0;padding:14px 16px}
.tkeys{display:none;flex:none;gap:6px;padding:6px 8px;background:#0b0b0b;border-top:1px solid #232120;overflow-x:auto;touch-action:pan-x;text-shadow:none}
.tkeys .btn{flex:none;min-height:40px;padding:6px 12px;font-size:13px;letter-spacing:.02em;white-space:nowrap}
.term .out{flex:0 1 auto;white-space:pre-wrap;word-break:break-word;user-select:text;-webkit-user-select:text}
.term .out div.r{color:#d2413a;text-shadow:0 0 6px #941c1c}
.term .out div.g{color:#e9e5dc}
.term .out div.d{color:#6f6a62}
.term .line{display:flex;gap:8px;flex:none;padding-bottom:22vh}
.term .ps{white-space:nowrap;color:#e9e5dc}
.tin{flex:1;min-width:0;background:none;border:none;outline:none;color:inherit;text-shadow:inherit;caret-color:var(--bone)}

/* ---------- 7. Machine ---------- */
.machine{width:min(100%,1080px);max-height:100%;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mod{background:linear-gradient(#1c1b19,#101010);border:1px solid #2c2a27;border-radius:5px;padding:26px 10px 10px;min-height:186px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;position:relative;box-shadow:inset 0 0 30px #000}
.mod::before,.mod::after{content:"";position:absolute;top:6px;width:6px;height:6px;border-radius:50%;background:#000;box-shadow:inset 0 1px 0 #444}
.mod::before{right:8px}.mod::after{right:22px}
.mod .ico{position:absolute;top:5px;left:8px;width:22px;height:22px;opacity:.5}
.mod.ok{border-color:var(--r2);box-shadow:inset 0 0 30px #000,0 0 22px #941c1c77}
.mod .rd{font-size:16px;letter-spacing:.14em;font-variant-numeric:tabular-nums;background:#060606;border:1px solid #000;padding:3px 10px}
.mod .mini{display:flex;gap:6px}
.mod .mini .btn{padding:5px 12px}
.drum{width:92px;height:92px;background:#070707;border:2px solid #000;box-shadow:inset 0 12px 14px #000,inset 0 -12px 14px #000}
.lamps{display:flex;gap:10px}
.lampb{width:44px;height:44px;border-radius:50%;border:3px solid #000;background:radial-gradient(circle at 35% 30%,#4a2a28,#1a0a0a)}
.lampb.on{background:radial-gradient(circle at 35% 30%,#ffd0c8,#d23a32);box-shadow:0 0 22px #d23a32}
.dots{display:flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:#2a2826}.dots i.on{background:var(--bone)}
.mod svg.drag{touch-action:none;cursor:pointer}
.freq{width:92%;height:46px;background:#bdb6a6;border:2px solid #000;position:relative;touch-action:none;cursor:ew-resize;
  background-image:repeating-linear-gradient(90deg,#0000 0 9px,#1116 9px 10px)}
.freq b{position:absolute;top:0;bottom:0;width:2px;background:var(--r2);box-shadow:0 0 6px #941c1c}
.sws{display:flex;gap:8px}
.sw{width:26px;height:64px;background:#070707;border:2px solid #000;position:relative;border-radius:3px}
.sw::after{content:"";position:absolute;left:3px;right:3px;height:26px;bottom:3px;background:linear-gradient(#807b72,#3a3733);border-radius:2px;transition:bottom .12s}
.sw.up::after{bottom:31px;background:linear-gradient(#e9e5dc,#807b72)}
.swl{font-size:9px;color:var(--dim);letter-spacing:.2em}
.core{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:26px;padding:6px}
.core svg{width:150px;height:90px}
.lever{width:120px;height:74px;border:2px solid #000;background:linear-gradient(#651414,#2a0808);color:var(--bone);letter-spacing:.2em;font-size:11px;border-bottom:8px solid #000;border-radius:4px}
.lever:active{border-bottom-width:2px;transform:translateY(6px)}
@media(max-width:820px){.machine{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.machine{grid-template-columns:1fr}}

/* ---------- Admin ---------- */
.admin{width:min(100%,980px);max-height:96%;background:#090909;border:1px solid var(--r1);padding:16px;box-shadow:0 0 80px #000}
.admin h2{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.3em;font-weight:400;margin-bottom:12px;color:var(--bone)}
.admin h3{font-size:10px;letter-spacing:.3em;font-weight:400;color:var(--dim);margin:14px 0 8px;border-bottom:1px solid #1d1c1a;padding-bottom:4px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.stat{background:#101010;border:1px solid #1d1c1a;padding:8px}
.stat small{display:block;font-size:9px;letter-spacing:.2em;color:var(--dim)}
.stat span{font-size:16px;color:var(--bone);font-variant-numeric:tabular-nums}
.agrid{display:flex;flex-wrap:wrap;gap:6px}
.agrid .btn{font-size:10px;padding:8px 10px}
.alog{height:150px;background:#030303;border:1px solid #1d1c1a;padding:8px;font-size:11px;line-height:1.6;color:#a39e94;user-select:text;-webkit-user-select:text}
.amsg{display:flex;gap:6px;margin-top:8px}
.amsg input{flex:1;background:#000;border:1px solid #3a3733;color:var(--bone);padding:8px;outline:none;min-width:0}
.pausebanner{position:absolute;inset:0;z-index:35;display:none;align-items:center;justify-content:center;background:#000b;font-size:14px;letter-spacing:.4em;pointer-events:none}
#app.paused .pausebanner{display:flex}

/* =====================================================================
   MOBILE ET TACTILE
   ===================================================================== */
html,body{overscroll-behavior:none}
#hud{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
@media(pointer:coarse){
  .btn{min-height:44px;font-size:13px;padding:10px 14px}
  .hb{width:42px;height:38px;font-size:17px}
  input,.tin{font-size:16px!important}                 /* évite le zoom automatique d'iOS à la saisie */
  .intro .who input{font-size:22px!important}
  .intro .power{font-size:14px;padding:40px 20px;line-height:1.8}
  .side .note,.tape .tip,.radio .tip{font-size:12px;line-height:1.5}
  .wheel button{width:66px;height:46px;font-size:16px}.wheel span{width:66px}
  .pbar .btn{min-width:54px;min-height:50px;font-size:20px;padding:6px}
  .mod .mini .btn{min-width:56px;padding:6px 10px}
  .tkeys{display:flex}
  .term .line{padding-bottom:10px}
  .radio .fine .btn{min-width:60px;min-height:48px;font-size:16px}
  .hint{font-size:17px}
}
@media(max-width:760px){
  #app.playing #stage{top:46px}
  #hud{height:46px;font-size:10px;letter-spacing:.06em}
  #timer{font-size:20px;letter-spacing:.1em}
  #hud .hr{gap:4px;flex:none}
  .pfull{display:none}.pshort{display:inline;font-size:13px;color:var(--bone)}
  #pts{font-size:11px;letter-spacing:.04em;margin-right:2px}
  #fx-toast{inset:54px 10px auto 10px;max-width:none;font-size:12.5px;line-height:1.45}
  #fx-msg{font-size:21px;padding:8vh 6vw}
  .cctv{padding:8px;gap:10px}
  .side{grid-template-columns:1fr}
  .side .cams{grid-template-columns:repeat(4,1fr)}
  .side .cam,.side .zoom .btn{padding:10px 2px;font-size:12px;letter-spacing:.03em}
  .side .cap{min-height:54px;font-size:15px}
  .tape{width:100%;border-left:none;border-right:none;border-radius:0;padding:10px}
  .cass{font-size:11px}
  .keys{grid-template-columns:repeat(4,1fr);gap:6px}
  .key{height:60px;font-size:10.5px}.key small{font-size:19px}
  .key[data-k=play]{grid-column:span 2}
  .wave{height:124px}
  .tape .vu{height:12px}
  .tape .meta{font-size:12px}.tape .ctr{font-size:20px}
  .table{--ps:min(46vmin,250px)}
  .radio{width:100%;border-left:none;border-right:none;border-radius:0;padding:12px}
  .radio .top{grid-template-columns:minmax(0,1fr) 96px}
  .radio .bot{flex-wrap:wrap;justify-content:space-around}
  .knob{width:136px}
  .lockb{width:100%;font-size:12px}.lockb .bar{height:14px}
  .strip{font-size:19px}
  .tscr{padding:10px 12px}.term{font-size:13.5px}
  .machine{grid-template-columns:repeat(2,1fr);gap:8px;padding:8px}
  .mod{min-height:172px;padding:28px 6px 8px}
  .lamps{gap:6px}.lampb{width:36px;height:36px}
  .sws{gap:5px}.sw{width:23px;height:70px}.sw.up::after{bottom:37px}
  .core{gap:14px;padding:8px 0 14px}.core svg{width:124px;height:74px}
  .lever{height:70px;width:150px;font-size:13px}
  .panel{padding:16px}.panel p{font-size:14px}
  .inspect .cap{font-size:16px}
  .res{font-size:13px}
  .admin{padding:12px}.stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-height:500px) and (orientation:landscape){
  .side .note,.tape .tip,.radio .tip,.tape .win{display:none}
  .wave{height:70px}
  .key{height:46px}
  .radio{padding:10px 14px}
  .radio canvas.dial,.radio .vu{height:56px}
  .grille,.strip{height:52px}
  .radio .mid{margin:8px 0}
  .knob{width:96px}
  .machine{grid-template-columns:repeat(3,1fr) 150px;gap:8px;padding:6px}
  .mod{min-height:138px;padding:24px 6px 6px}
  .core{grid-column:4;grid-row:1/3;flex-direction:column;gap:14px;padding:0}
  .core svg{width:130px;height:78px}
  .drum{width:72px;height:72px}
  .mod svg.clk{width:104px;height:104px}
  .lamps{gap:6px}.lampb{width:36px;height:36px}
  .sws{gap:5px}.sw{width:23px;height:56px}.sw::after{height:22px}.sw.up::after{bottom:27px}
}