.gpio-runtime{--g-mint:#38d6c9;--g-orange:#ff6b35;--g-blue:#6fa8ff;--g-red:#ff4d5f;margin-top:2rem;border:1px solid #2a3448;border-radius:18px;overflow:hidden;background:#080d17;color:#f4f7fb;box-shadow:0 22px 70px #0008;font-family:Inter,sans-serif}.gpio-runtime *{box-sizing:border-box}.gpio-game{position:relative;min-height:720px;background:#080d17 url('/quetes/gpio-rescue/workbench.png') center/cover no-repeat;isolation:isolate}.gpio-game:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#070b13e8 0,#070b1366 25%,transparent 55%,#070b13aa 100%),linear-gradient(0deg,#070b13ee 0,transparent 42%)}.gpio-hud{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;background:#090e19e8;border-bottom:1px solid #38d6c944;backdrop-filter:blur(12px)}.gpio-brand small,.gpio-state small,.gpio-objective small{display:block;color:var(--g-mint);font:700 .7rem/1.2 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase}.gpio-brand strong{font:700 clamp(1.1rem,2.1vw,1.7rem)/1.1 'Space Grotesk',sans-serif}.gpio-state{text-align:right}.gpio-state strong{color:var(--g-blue);font:800 1rem 'JetBrains Mono',monospace}.gpio-stage{position:relative;min-height:560px}.gpio-objective{position:absolute;left:1.2rem;top:1.2rem;width:min(285px,35%);padding:1rem;border-left:3px solid var(--g-mint);border-radius:0 12px 12px 0;background:#09111ee8;box-shadow:0 12px 30px #0008}.gpio-objective p{margin:.45rem 0 0;font-size:.92rem;line-height:1.45}.gpio-console{position:absolute;right:1.2rem;top:1.2rem;width:min(260px,32%);padding:.9rem;border:1px solid #38d6c966;border-radius:12px;background:#061016eb;font:600 .75rem/1.55 'JetBrains Mono',monospace;color:#9cf7ed;min-height:108px}.gpio-console b{display:block;color:#fff;margin-bottom:.35rem}.gpio-hotspot{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:2px solid #ffffff99;border-radius:50%;background:#08101dbb;color:#fff;font:800 .68rem 'JetBrains Mono',monospace;cursor:pointer;box-shadow:0 0 0 7px #08101d55,0 0 24px #6fa8ff88;transition:.18s transform,.18s border-color}.gpio-hotspot:hover,.gpio-hotspot:focus-visible{transform:scale(1.1);border-color:var(--g-mint);outline:0}.gpio-hotspot[data-fixed=true]{border-color:#32e58d;box-shadow:0 0 24px #32e58d}.gpio-hotspot[data-error=true]{animation:g-pulse .8s infinite alternate;border-color:var(--g-orange)}.gpio-hotspot--button{left:66%;top:53%}.gpio-hotspot--led{left:77%;top:39%}.gpio-hotspot--code{left:24%;top:48%}.gpio-toolbelt{position:absolute;left:1.2rem;right:1.2rem;bottom:1rem;display:flex;gap:.65rem;align-items:stretch}.gpio-tool{min-width:108px;min-height:62px;padding:.65rem;border:1px solid #43506a;border-radius:10px;background:#101827ee;color:#fff;cursor:pointer;text-align:left;font-weight:750}.gpio-tool small{display:block;color:#aab5c9;font:600 .68rem 'JetBrains Mono',monospace;margin-top:.25rem}.gpio-tool[aria-pressed=true]{border-color:var(--g-mint);box-shadow:inset 0 0 0 1px var(--g-mint),0 0 22px #38d6c944}.gpio-actions{margin-left:auto;display:flex;gap:.65rem}.gpio-action{min-width:130px;border:2px solid var(--g-mint);border-radius:10px;background:#061815e8;color:#9ff9ef;font-weight:850;cursor:pointer}.gpio-action--reset{border-color:var(--g-orange);color:#ff9a72;background:#1b0d08e8}.gpio-action:disabled{opacity:.45;cursor:not-allowed}.gpio-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:1.2rem;background:#050912d9;backdrop-filter:blur(9px);z-index:5}.gpio-card{width:min(590px,100%);padding:clamp(1.2rem,4vw,2.2rem);border:1px solid #38d6c966;border-radius:16px;background:#0d1422;box-shadow:0 30px 80px #000}.gpio-card h3{font:750 clamp(1.5rem,4vw,2.2rem) 'Space Grotesk',sans-serif;margin:.3rem 0}.gpio-card p{color:#c3cada;line-height:1.55}.gpio-card__choices{display:grid;gap:.6rem;margin:1rem 0}.gpio-card button,.gpio-download{width:100%;min-height:48px;padding:.7rem 1rem;border:1px solid #43506a;border-radius:9px;background:#141e30;color:#fff;font-weight:750;cursor:pointer}.gpio-card button:hover,.gpio-card button:focus-visible{border-color:var(--g-mint);outline:0}.gpio-primary{border-color:var(--g-mint)!important;background:var(--g-mint)!important;color:#06100f!important}.gpio-result{padding:.75rem;border-radius:8px;background:#070d17;font:600 .78rem/1.5 'JetBrains Mono',monospace;white-space:pre-wrap}.gpio-result--bad{border-left:3px solid var(--g-orange)}.gpio-result--good{border-left:3px solid #32e58d}.gpio-press{position:absolute;left:61%;top:58%;width:76px;height:76px;border:0;border-radius:50%;background:#ff6b35;color:#fff;font-weight:900;box-shadow:0 0 0 9px #ff6b3533,0 10px 28px #000;cursor:pointer}.gpio-press:active{transform:translateY(5px)}@keyframes g-pulse{to{box-shadow:0 0 0 11px #ff6b3522,0 0 32px #ff6b35}}@media(max-width:760px){.gpio-game{min-height:760px;background-position:60% center}.gpio-stage{min-height:650px}.gpio-hud{align-items:flex-start}.gpio-brand strong{font-size:1rem}.gpio-objective{width:calc(100% - 2rem);left:1rem;top:1rem}.gpio-console{top:132px;right:1rem;width:calc(100% - 2rem)}.gpio-hotspot--code{left:16%;top:47%}.gpio-hotspot--button{left:58%;top:54%}.gpio-hotspot--led{left:77%;top:42%}.gpio-toolbelt{left:.7rem;right:.7rem;bottom:.7rem;display:grid;grid-template-columns:repeat(3,1fr)}.gpio-tool{min-width:0;min-height:58px;font-size:.72rem}.gpio-actions{grid-column:1/-1;margin:0}.gpio-action{min-height:48px;flex:1}.gpio-press{left:50%;top:60%}}
/* --- Atelier 974 : retour sensoriel honnête (additif, 2026-07-30) --- */
.gpio-hud__status{display:flex;align-items:flex-start;gap:.7rem}
.gpio-sound{align-self:center;min-height:38px;padding:.35rem .7rem;border:1px solid #43506a;border-radius:9px;background:#101827ee;color:#c3cada;font:700 .74rem 'JetBrains Mono',monospace;cursor:pointer}
.gpio-sound:hover,.gpio-sound:focus-visible{border-color:var(--g-mint);color:#fff;outline:0}
.gpio-sound[data-on=true]{border-color:var(--g-mint);color:#9ff9ef;box-shadow:0 0 16px #38d6c944}
.gpio-sign{position:absolute;left:50%;top:1.2rem;transform:translateX(-50%);width:min(228px,26%);padding:.7rem .8rem;border:1px solid #2a3448;border-radius:12px;background:#060b14e8;text-align:center;box-shadow:0 12px 30px #0009;z-index:2;transition:box-shadow .25s,border-color .25s,background .25s}
.gpio-sign small{display:block;color:#7d8798;font:700 .62rem/1.2 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.gpio-sign strong{display:block;margin:.3rem 0 .45rem;font:800 clamp(.95rem,1.7vw,1.2rem)/1.1 'Space Grotesk',sans-serif;color:#6b7488;transition:color .25s,text-shadow .25s}
.gpio-sign__leds{display:flex;justify-content:center;gap:.9rem}
.gpio-led{width:14px;height:14px;border-radius:50%;background:#1b2333;border:1px solid #33405a;transition:background .2s,box-shadow .2s}
.gpio-sign[data-mode=idle]{border-color:#38d6c955}
.gpio-sign[data-mode=idle] strong{color:#9fb0c8}
.gpio-sign[data-mode=open]{border-color:#32e58d;background:#061a12ee;box-shadow:0 0 34px #32e58d55,0 12px 30px #0009}
.gpio-sign[data-mode=open] strong{color:#7bffc0;text-shadow:0 0 14px #32e58d99}
.gpio-sign[data-mode=open] .gpio-led--v{background:#32e58d;box-shadow:0 0 14px #32e58d,0 0 26px #32e58d66}
.gpio-sign[data-mode=closed]{border-color:var(--g-red);background:#1a070bee;box-shadow:0 0 34px #ff4d5f44,0 12px 30px #0009}
.gpio-sign[data-mode=closed] strong{color:#ff9aa5;text-shadow:0 0 14px #ff4d5f99}
.gpio-sign[data-mode=closed] .gpio-led--r{background:var(--g-red);box-shadow:0 0 14px var(--g-red),0 0 26px #ff4d5f66}
.gpio-fx-good{animation:g-fx-good .55s ease-out}
.gpio-fx-bad{animation:g-fx-bad .5s ease-out}
.gpio-fx-fault{animation:g-fx-fault .6s steps(1,end) 2}
.gpio-complete{animation:g-fx-complete 1.1s ease-out}
@keyframes g-fx-good{0%{box-shadow:0 0 0 0 #32e58dcc}100%{box-shadow:0 0 0 16px #32e58d00}}
@keyframes g-fx-bad{0%,60%{box-shadow:0 0 0 0 #ff4d5fcc}30%{transform:translateX(-3px)}45%{transform:translateX(3px)}100%{box-shadow:0 0 0 14px #ff4d5f00;transform:none}}
@keyframes g-fx-fault{0%{border-color:var(--g-orange);background:#1c0d06ee}50%{border-color:#2a3448;background:#060b14e8}}
@keyframes g-fx-complete{0%{box-shadow:inset 0 0 0 0 #38d6c900}35%{box-shadow:inset 0 0 60px 0 #38d6c955}100%{box-shadow:inset 0 0 0 0 #38d6c900}}
@media(max-width:760px){.gpio-sign{left:.7rem;top:250px;bottom:auto;transform:none;width:min(232px,64%);display:flex;align-items:center;gap:.55rem;padding:.45rem .6rem;text-align:left}.gpio-sign small{font-size:.55rem;max-width:76px}.gpio-sign strong{margin:0;font-size:.92rem}.gpio-sign__leds{margin-left:auto;gap:.5rem}.gpio-led{width:12px;height:12px}.gpio-hud__status{flex-direction:column;align-items:flex-end;gap:.4rem}.gpio-sound{align-self:flex-end}}
@media(prefers-reduced-motion:reduce){
.gpio-sign,.gpio-sign strong,.gpio-led{transition:none}
.gpio-fx-good,.gpio-fx-bad,.gpio-fx-fault,.gpio-complete{animation:none}
.gpio-hotspot[data-error=true]{animation:none;border-color:var(--g-orange);box-shadow:0 0 0 9px #ff6b3522,0 0 26px #ff6b35}
.gpio-hotspot{transition:none}
}