*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#15181c;color:#e8eaed;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
button{font:inherit;cursor:pointer}
.hidden{display:none!important}

/* ---------- Seiten (Menü, Lobby, Bestenliste) ---------- */
.page{max-width:760px;margin:0 auto;padding:28px 18px 50px;position:relative}
.page h1{font-size:2.6rem;margin:0 0 4px;letter-spacing:.04em;text-shadow:0 0 24px #ff3b3b66,0 4px 0 #0008}
.page h1 span{color:#ff4d4d;text-shadow:0 0 18px #ff2a2a}
.page p.sub{margin:0 0 22px;color:#aab2bd}
.card{background:linear-gradient(160deg,#2a3038cc,#1b1f25cc);border:1px solid #343b44;border-radius:14px;padding:16px 18px;margin-bottom:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 28px #0008,inset 0 1px 0 #fff1}
.card h2{margin:0 0 10px;font-size:1.05rem;color:#ffd24d}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{min-width:46px;padding:10px 14px;border-radius:10px;border:2px solid #3d4651;background:#2a3038;color:#e8eaed;font-weight:700;font-size:1.05rem;box-shadow:0 3px 0 #1a1d21;transition:transform .08s,box-shadow .08s}
.chip:active{transform:translateY(3px);box-shadow:none}
.chip.on{background:#ffd24d;color:#222;border-color:#ffd24d}
.chip[disabled]{opacity:.45;cursor:default}
.check{display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:10px;background:#2a3038;border:2px solid #3d4651;font-size:.95rem}
.check input{width:18px;height:18px}
select,input[type=text]{padding:10px 12px;border-radius:10px;border:2px solid #3d4651;background:#2a3038;color:#e8eaed;font:inherit}
.big{display:block;width:100%;padding:16px;border:0;border-radius:14px;background:linear-gradient(#ff5a5a,#c81e1e);color:#fff;font-size:1.25rem;font-weight:800;letter-spacing:.06em;box-shadow:0 6px 0 #7d1111,0 12px 24px #0008;position:relative;overflow:hidden;animation:glowbtn 1.6s ease-in-out infinite alternate}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #7d1111}
.big[disabled]{filter:grayscale(.8) brightness(.6);animation:none;cursor:default}
.big.alt{background:linear-gradient(#4a90e2,#2457a8);box-shadow:0 6px 0 #17356a,0 12px 24px #0008;animation:none}
.big.alt:active{box-shadow:0 2px 0 #17356a}
.big::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,#fff6,transparent);animation:glint 3s ease-in-out infinite}
@keyframes glint{0%,60%{left:-80px}100%{left:110%}}
@keyframes glowbtn{from{box-shadow:0 6px 0 #7d1111,0 12px 24px #0008,0 0 14px #ff2a2a55}to{box-shadow:0 6px 0 #7d1111,0 12px 24px #0008,0 0 34px #ff2a2aaa}}
.stack{display:flex;flex-direction:column;gap:12px}
.muted{color:#aab2bd;font-size:.92rem}
ul.how{margin:0;padding-left:20px;line-height:1.55;color:#cfd5dd}
.linkbtn{background:none;border:0;color:#8fb8ff;text-decoration:underline;padding:4px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
.topbar .chip{min-width:0;padding:8px 14px}

body{background:
 radial-gradient(ellipse 70% 45% at 50% 0%,rgba(255,236,200,.13),transparent 70%),
 repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 2px,transparent 2px 6px),
 radial-gradient(ellipse at 50% 35%,#2c3139 0%,#14171b 62%,#07080a 100%) fixed;min-height:100vh}

/* Lobby */
.code{font:800 2.2rem/1 "Courier New",monospace;letter-spacing:.3em;color:#ffd24d;background:#0b0d0f;border:2px solid #3d4651;border-radius:10px;padding:10px 16px;display:inline-block}
.pl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#2a3038;border:2px solid #3d4651;margin-bottom:8px}
.pl .dot{width:10px;height:10px;border-radius:50%;background:#27e05a;box-shadow:0 0 8px #27e05a}
.pl.off .dot{background:#555;box-shadow:none}
.pl b{flex:1}
.tag{font-size:.78rem;padding:3px 8px;border-radius:20px;background:#3d4651;color:#e8eaed;letter-spacing:.04em}
.tag.host{background:#ffd24d;color:#222}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role{padding:14px;border-radius:12px;border:2px solid #3d4651;background:#2a3038;color:#e8eaed;text-align:left;line-height:1.35}
.role b{display:block;font-size:1.1rem;margin-bottom:3px}
.role small{color:#aab2bd}
.role.mine{border-color:#ffd24d;background:#3a3520}
.role.taken{opacity:.55;cursor:default}
@media (max-width:520px){.roles{grid-template-columns:1fr}}

/* Bestenliste */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.lbrow{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:#2a3038;border:2px solid #3d4651;margin-bottom:6px;text-align:left;width:100%;color:#e8eaed}
.lbrow .sets{flex:1;font-size:.92rem;line-height:1.3}
.lbrow .t{font:800 1.1rem "Courier New",monospace;color:#ffd24d}
.lbrow small{color:#aab2bd}
.lbrow.me{border-color:#27e05a;background:#1f3a28;box-shadow:0 0 14px #27e05a55}
.rk{width:34px;text-align:center;font-weight:800;color:#aab2bd}
.rk.g1{color:#ffd24d}.rk.g2{color:#d6dbe2}.rk.g3{color:#d08a4a}

/* Dialoge */
.modal{position:fixed;inset:0;z-index:60;background:#000b;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal .box{max-width:460px;width:100%;background:#20252b;border:2px solid #444;border-radius:18px;padding:22px;box-shadow:0 30px 60px #000c}
.modal h2{margin:0 0 14px;color:#ffd24d}
.sl-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sl-row span{min-width:96px}
.sl-row input[type=range]{flex:1;accent-color:#ffd24d}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;background:#3a1a1a;color:#ffd0d0;border:2px solid #ff5a5a;border-radius:12px;padding:10px 16px;max-width:90vw;box-shadow:0 10px 30px #000a}

/* ---------- Spielbildschirm ---------- */
#game{padding:8px 0 20px}
.case{position:relative;width:min(96vw,calc((100vh - 130px)*1.55),1100px);margin:6px auto 0;padding:2.4%;border-radius:20px}
.foam{background:#24272c;border-radius:10px;padding:2.2%;box-shadow:inset 0 5px 18px #000}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2%}
.slot{position:relative;aspect-ratio:1;border-radius:7px;overflow:hidden;background:#101215}
.slot .inner{position:absolute;left:0;top:0;width:200px;height:200px;transform-origin:0 0}
.mod,.blank{width:200px;height:200px;position:relative;border-radius:7px;border:2px solid #636a73;background:linear-gradient(135deg,#d3d7dd,#9ba2ac 55%,#c3c8cf);user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden}
.blank{background:linear-gradient(135deg,#8e949c,#6f757d)}
.mod::after,.blank::after{content:"";position:absolute;inset:0;pointer-events:none}
.led{position:absolute;left:91px;top:6px;width:18px;height:9px;border-radius:5px;background:#3a3f45;border:1px solid #222;z-index:5;transition:.2s}
.mod.done > *:not(.led){filter:saturate(.35) brightness(.9)}

.info{margin-top:2.2%;display:flex;flex-wrap:wrap;gap:2%;align-items:stretch;justify-content:space-between}
.info>div{background:#33373d;border:1px solid #1b1d21;border-radius:8px;padding:8px 10px;color:#e8eaed;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:.72rem;letter-spacing:.08em;color:#aab}
.serial b{font:700 1.35rem/1 "Courier New",monospace;letter-spacing:.2em;color:#111}
.serial i{display:block;width:100%;height:14px;background:repeating-linear-gradient(90deg,#111 0 2px,#f1efe4 2px 4px,#111 4px 5px,#f1efe4 5px 8px)}
.bats{display:flex;gap:6px}
.bat{width:30px;height:14px;border-radius:3px;background:linear-gradient(#e7b84b,#a97f1c);border:2px solid #222;position:relative}
.bat::after{content:"";position:absolute;right:-6px;top:3px;width:4px;height:6px;background:#222}
.port{width:62px;height:24px;border-radius:3px;background:#17191c;border:2px solid #8a9099;position:relative}
.port.par::after{content:"";position:absolute;inset:6px 5px;background:radial-gradient(circle,#c9a227 0 1.6px,transparent 2px) 0 0/8px 6px}
.port.ser{width:46px;border-radius:3px 3px 12px 12px}
.port.ser::after{content:"";position:absolute;inset:5px 5px;background:radial-gradient(circle,#c9a227 0 1.6px,transparent 2px) 0 0/8px 7px}
.car{width:58px;height:26px;border-radius:5px;border:2px solid #111;display:flex;align-items:center;justify-content:center;font:800 .95rem "Courier New",monospace;letter-spacing:.1em}
.car.an{background:#fff6c4;color:#111;box-shadow:0 0 14px #fff6c4}
.car.aus{background:#2b2d31;color:#555}
.ctl{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.ctl button{padding:8px 16px;border-radius:9px;border:1px solid #4a525c;background:#262b31;color:#cdd3da}
.ctl button.on{background:#ffd24d;color:#222;border-color:#ffd24d}

/* ---------- Timer-Modul ---------- */
.tm .clock{position:absolute;left:14px;right:14px;top:34px;height:70px;background:#0a0c0a;border:3px solid #555;border-radius:6px;display:flex;align-items:center;justify-content:center;
 font:700 54px/1 "Courier New",ui-monospace,monospace;color:#ff3b30;text-shadow:0 0 12px #ff3b30aa;letter-spacing:.04em}
.tm .clock.low{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
.tm .lamps{position:absolute;left:0;right:0;top:122px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 14px}
.tm .lamp{width:34px;height:34px;border-radius:50%;border:3px solid #666;background:#222;display:flex;align-items:center;justify-content:center;color:#444;font:900 22px/1 sans-serif}
.tm .lamp.on{background:#ff2a2a;color:#fff;border-color:#ffb0b0;box-shadow:0 0 16px #ff2a2a}
.tm .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:11px;color:#888;letter-spacing:.14em}

/* ---------- Kabel ---------- */
.wr .tl,.wr .tr{position:absolute;top:24px;bottom:16px;width:14px;background:linear-gradient(90deg,#4a4f56,#2c3035);border-radius:3px}
.wr .tl{left:10px}.wr .tr{right:10px}
.wire{position:absolute;left:24px;width:152px;cursor:pointer}
.wire .bar{position:absolute;left:0;right:0;top:50%;height:13px;margin-top:-6px;border-radius:7px;border:1px solid #0007}
.wire .bar.r{clip-path:inset(0 0 0 50%)}.wire .bar.l{clip-path:inset(0 50% 0 0)}
.wire .bar::after{content:"";position:absolute;left:0;right:0;top:2px;height:3px;background:#fff5;border-radius:3px}

/* ---------- Knopf ---------- */
.bt .bigbtn{position:absolute;left:22px;top:48px;width:104px;height:104px;border-radius:50%;border:5px solid #3a3f46;display:flex;align-items:center;justify-content:center;text-align:center;font:800 13px/1.1 sans-serif;letter-spacing:.04em;cursor:pointer;touch-action:none}
.bt .strip{position:absolute;right:26px;top:36px;width:26px;height:128px;border-radius:5px;background:#2b2e33;border:2px solid #111;transition:.15s}

/* ---------- Lichtfolge ---------- */
.sm .pad{position:absolute;width:60px;height:60px;border-radius:50%;border:3px solid #0007;opacity:.38;cursor:pointer;transition:opacity .08s;touch-action:manipulation}
.sm .st{position:absolute;left:0;right:0;top:92px;display:flex;gap:6px;justify-content:center}
.sm .st i{width:12px;height:12px;border-radius:50%;background:#444;border:1px solid #111}
.sm .st i.on{background:#27e05a;box-shadow:0 0 6px #27e05a}

/* ---------- Passwort ---------- */
.pw .col{position:absolute;top:26px;width:32px}
.pw .arr{width:32px;height:26px;border:1px solid #444;border-radius:5px;background:linear-gradient(#e9ecef,#aab0b8);font-size:14px;line-height:1;padding:0}
.pw .lt{margin:6px 0;height:44px;background:#0b1a0b;border:2px solid #444;border-radius:4px;color:#46ff6a;font:800 28px/40px "Courier New",monospace;text-align:center;text-shadow:0 0 8px #46ff6a99}
.pw .ok,.sw .ok{position:absolute;left:50px;top:156px;width:100px;height:28px;border-radius:7px;border:2px solid #333;background:linear-gradient(#58d46f,#1f9d3a);color:#032;font-weight:800;letter-spacing:.1em}

/* ---------- Symbole ---------- */
.sy .key{position:absolute;width:72px;height:72px;border-radius:8px;border:3px solid #555;background:linear-gradient(#f2eedf,#c9c3a8);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#111;touch-action:manipulation}
.sy .key svg{width:56px;height:56px}
.sy .key.ok{background:linear-gradient(#a8f0b8,#4cc468);border-color:#1a7a34}
.sy .key.bad{background:#ff8c8c;border-color:#b00}
.sy .key i{position:absolute;right:4px;top:4px;width:9px;height:9px;border-radius:50%;background:#bbb;border:1px solid #666}
.sy .key.ok i{background:#27e05a;box-shadow:0 0 6px #27e05a}

/* ---------- Kippschalter ---------- */
.sw .lg{position:absolute;top:24px;width:20px;height:20px;border-radius:50%;background:#2a2a2a;border:2px solid #111}
.sw .lg.on{background:#ffd24d;box-shadow:0 0 12px #ffd24d}
.sw .tg{position:absolute;top:56px;width:26px;height:88px;border-radius:13px;background:#44484e;border:2px solid #1a1c1f;cursor:pointer;touch-action:manipulation}
.sw .tg b{position:absolute;left:1px;width:20px;height:34px;border-radius:10px;background:linear-gradient(90deg,#e9ecef,#8a9099);border:1px solid #333;transition:.12s}
.sw .tg.u b{top:4px}.sw .tg.d b{top:46px}
.sw .ok{top:156px}

/* =====================================================================
   3D-Theme: Raum, Metall, Glanz, Tiefe, Animation
   ===================================================================== */
#game{perspective:1700px;perspective-origin:50% 35%;overflow:hidden;padding-bottom:30px}
.case{transform-style:preserve-3d;transform:rotateX(var(--rx,9deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;
 border-radius:24px;
 background:
  radial-gradient(circle at 13px 13px,#fff 0 1.5px,#6a7079 2.5px 4px,#1d1f22 4.6px,transparent 5.4px),
  radial-gradient(circle at calc(100% - 13px) 13px,#fff 0 1.5px,#6a7079 2.5px 4px,#1d1f22 4.6px,transparent 5.4px),
  radial-gradient(circle at 13px calc(100% - 13px),#fff 0 1.5px,#6a7079 2.5px 4px,#1d1f22 4.6px,transparent 5.4px),
  radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#fff 0 1.5px,#6a7079 2.5px 4px,#1d1f22 4.6px,transparent 5.4px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.06) 1px 2px),
  linear-gradient(115deg,#f9fafb 0%,#adb3bc 15%,#eff1f4 31%,#979ea8 52%,#eaecf0 70%,#a7adb6 86%,#dcdfe4 100%);
 box-shadow:0 2px 0 #fff inset,0 -3px 0 #6c737d inset,0 1px 0 #50565e,0 4px 0 #6b727b,0 7px 0 #4d535b,0 40px 50px -10px #000d,0 80px 90px -30px #000b,0 0 0 1px #2b2f35}
.case::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%) 0 0/260% 100%;animation:sheen 8s linear infinite;mix-blend-mode:soft-light}
@keyframes sheen{from{background-position:130% 0}to{background-position:-130% 0}}
.case.enter{animation:drop 1s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes drop{0%{opacity:0;translate:0 -90px;scale:1.12}60%{opacity:1}100%{opacity:1;translate:0 0;scale:1}}
.case.shake{animation:sh .55s}
@keyframes sh{15%{translate:-10px 4px}30%{translate:9px -5px}45%{translate:-7px -3px}60%{translate:6px 5px}75%{translate:-3px 2px}}
.foam{background:radial-gradient(circle,#343941 1px,transparent 1.6px) 0 0/7px 7px,linear-gradient(#1c1f23,#25282d);
 box-shadow:inset 0 10px 24px #000,inset 0 -2px 0 #fff2,0 1px 0 #fff8,0 -1px 0 #0006;border:2px solid #0b0c0e}
.slot{box-shadow:inset 0 0 0 2px #000,inset 0 10px 18px #000c;background:#0b0d0f;transform-style:preserve-3d}

.lid{position:absolute;inset:0;z-index:30;border-radius:22px;pointer-events:none;transform-origin:50% 0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,rgba(0,0,0,.06) 1px 2px),linear-gradient(120deg,#e2e5ea,#9aa1ab 30%,#d8dbe0 55%,#8d949e 80%,#c7cbd1);
 box-shadow:inset 0 0 0 4px #7c838d,inset 0 0 0 7px #dde0e5,0 14px 30px #000a}
.lid .hz{padding:3.2% 6%;border-radius:8px;background:repeating-linear-gradient(-45deg,#ffd000 0 14px,#111 14px 28px);box-shadow:0 4px 12px #0008}
.lid .hz b{display:block;padding:.35em 1em;background:#111;color:#ffd000;font:900 clamp(16px,3.6vw,38px)/1 "Arial Black",Impact,sans-serif;letter-spacing:.14em;text-align:center}
.lid .latch{position:absolute;bottom:-2px;width:11%;height:7%;border-radius:4px 4px 0 0;background:linear-gradient(#cfd3d9,#6d747d);box-shadow:inset 0 2px 0 #fff8,0 3px 6px #0008}
.lid .l1{left:18%}.lid .l2{right:18%}
.lid .handle{position:absolute;top:-1px;left:38%;width:24%;height:6%;border-radius:0 0 12px 12px;background:linear-gradient(#444,#111);box-shadow:inset 0 -3px 4px #fff3}
.lid.open{animation:lidopen 1.15s cubic-bezier(.55,0,.3,1) forwards}
@keyframes lidopen{0%{transform:rotateX(0);opacity:1}78%{transform:rotateX(-96deg);opacity:1}100%{transform:rotateX(-112deg);opacity:0;visibility:hidden}}

.mod,.blank{border:0;border-radius:6px;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,rgba(0,0,0,.07) 1px 2px),linear-gradient(135deg,#dfe3e8,#9aa2ac 48%,#c9cdd4 80%,#a9afb8);
 box-shadow:inset 0 2px 0 #fffb,inset 0 -3px 0 #0005,inset 2px 0 0 #fff6,inset -2px 0 0 #0004,0 0 0 2px #3a3f46,0 10px 16px #000b}
.blank{background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.07) 1px 2px),linear-gradient(135deg,#7b818a,#565b63)}
.mod{animation:rise .8s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--d,0)*120ms + 1.35s)}
@keyframes rise{0%{opacity:0;transform:translateY(46px) scale(.86);filter:brightness(2.2)}100%{opacity:1;transform:none;filter:none}}
.mod::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(115deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12) 100%)}
.mod::after,.blank::after{background:
 radial-gradient(circle at 10px 10px,#f2f2f2 0,#8a8a8a 2.5px,#2b2b2b 4.2px,transparent 5px),
 radial-gradient(circle at calc(100% - 10px) 10px,#f2f2f2 0,#8a8a8a 2.5px,#2b2b2b 4.2px,transparent 5px),
 radial-gradient(circle at 10px calc(100% - 10px),#f2f2f2 0,#8a8a8a 2.5px,#2b2b2b 4.2px,transparent 5px),
 radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#f2f2f2 0,#8a8a8a 2.5px,#2b2b2b 4.2px,transparent 5px)}
.led{height:9px;border-radius:5px;background:radial-gradient(#6d2a2a,#2a1010);box-shadow:inset 0 1px 2px #000,0 1px 0 #fff8}
.mod.done .led{background:radial-gradient(#b8ffcb,#27e05a 60%,#0a8a2c);box-shadow:0 0 14px 3px #27e05a;animation:okpulse 1.4s ease-in-out infinite alternate}
@keyframes okpulse{to{box-shadow:0 0 24px 7px #27e05a99}}
.mod.done{box-shadow:inset 0 2px 0 #fffb,inset 0 -3px 0 #0005,0 0 0 2px #27e05a,0 0 22px #27e05a66,0 10px 16px #000b}

.info>div{background:linear-gradient(#41464e,#262a30);border:0;box-shadow:inset 0 1px 0 #fff3,inset 0 -2px 0 #0008,0 0 0 2px #111,0 4px 8px #0006}
.serial{background:repeating-linear-gradient(0deg,#0000 0 2px,#00000008 2px 3px),linear-gradient(#f6f3e6,#e3dfcc)!important;color:#111!important;box-shadow:0 0 0 2px #222,0 4px 8px #0007!important;transform:rotate(-.8deg)}
.bat{background:linear-gradient(180deg,#fbe9a8,#e0aa33 40%,#8c6212);box-shadow:inset 0 2px 2px #fffa,inset 0 -3px 3px #0006,0 3px 4px #0008}
.port{box-shadow:inset 0 3px 6px #000,0 1px 0 #fff6}
.car.an{animation:carglow 1.8s ease-in-out infinite alternate}
@keyframes carglow{from{box-shadow:0 0 8px #fff6c4}to{box-shadow:0 0 22px 4px #fff6c4}}

.tm{background:linear-gradient(145deg,#3a3f46,#16181c);box-shadow:inset 0 2px 0 #fff3,inset 0 -3px 0 #000,0 0 0 2px #0a0b0d,0 10px 16px #000b}
.tm .clock{background:linear-gradient(#050605,#0d100d);box-shadow:inset 0 4px 10px #000,0 1px 0 #fff3;border:3px solid #4a4e55;overflow:hidden;font-variant-numeric:tabular-nums}
.tm .clock::before{content:"88:88";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,40,30,.09);text-shadow:none}
.tm .clock::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.2),transparent 45%);pointer-events:none}
.tm .lamp{background:radial-gradient(circle at 35% 30%,#666,#1b1b1b 70%);border:3px solid #7a7f87;box-shadow:inset 0 -4px 6px #000,0 2px 3px #0008}
.tm .lamp.on{background:radial-gradient(circle at 35% 30%,#ffc4b8,#ff2a2a 45%,#7d0000);border-color:#ffb0b0;animation:lamppulse .7s ease-in-out infinite alternate}
@keyframes lamppulse{from{box-shadow:0 0 12px #ff2a2a}to{box-shadow:0 0 28px 6px #ff2a2a}}

.wr .tl,.wr .tr{background:linear-gradient(90deg,#8b929c,#3a3f46 60%,#22252a);box-shadow:inset 0 1px 0 #fff6,0 3px 5px #0008}
.wire{filter:drop-shadow(0 4px 2px rgba(0,0,0,.55))}
.wire .bar{height:14px;margin-top:-7px;border:1px solid #0009;background-image:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 38%,rgba(0,0,0,.45) 100%);box-shadow:inset 0 -2px 3px #0004}
.wire .bar::after{top:2px;height:3px;background:#fff7}
.wire::before,.wire::after{content:"";position:absolute;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;z-index:2;background:radial-gradient(circle at 35% 30%,#ffe3b0,#c27c2c 55%,#5a3a10)}
.wire::before{left:-6px}.wire::after{right:-6px}
.wire:hover .bar{filter:brightness(1.18)}
.wire.cut .l{transition:transform .35s cubic-bezier(.3,1.6,.5,1);transform:translateX(-8px) rotate(-14deg);transform-origin:0 50%}
.wire.cut .r{transition:transform .35s cubic-bezier(.3,1.6,.5,1);transform:translateX(8px) rotate(14deg);transform-origin:100% 50%}

.bt .bigbtn{border:0;background-image:radial-gradient(circle at 34% 26%,rgba(255,255,255,.75),rgba(255,255,255,0) 42%),radial-gradient(circle at 50% 110%,rgba(0,0,0,.55),transparent 60%);
 box-shadow:0 0 0 6px #2b2f35,0 0 0 9px #8b929c,0 0 0 11px #3a3f46,0 16px 18px 4px #000a,inset 0 -10px 16px rgba(0,0,0,.45),inset 0 8px 14px rgba(255,255,255,.35);
 text-shadow:0 1px 2px #0008;transition:transform .08s,box-shadow .08s}
.bt .bigbtn.down{transform:translateY(6px) scale(.97);box-shadow:0 0 0 6px #2b2f35,0 0 0 9px #8b929c,0 0 0 11px #3a3f46,0 4px 6px 1px #000a,inset 0 -5px 10px rgba(0,0,0,.5),inset 0 4px 8px rgba(255,255,255,.2)}
.bt .strip{background:linear-gradient(90deg,#15171a,#2d3136);box-shadow:inset 0 2px 5px #000,0 1px 0 #fff6}

.sm .pad{opacity:.5;background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),rgba(255,255,255,0) 46%),radial-gradient(circle at 50% 120%,rgba(0,0,0,.5),transparent 60%);
 box-shadow:0 0 0 4px #3b4047,0 0 0 6px #8b929c,0 7px 8px 2px #0009,inset 0 -6px 10px #0006;transition:opacity .08s,transform .08s}
.sm .pad:active{transform:translateY(3px)}
.sm .pad.lit{opacity:1;box-shadow:0 0 0 4px #3b4047,0 0 0 6px #8b929c,0 0 34px 10px currentColor,inset 0 -6px 10px #0004}
.sm .st i{box-shadow:inset 0 1px 1px #000}

.pw .arr,.pw .ok,.sw .ok{box-shadow:0 3px 0 #5f666f,0 5px 5px #0007,inset 0 1px 0 #fff9;transition:transform .06s,box-shadow .06s}
.pw .arr:active,.pw .ok:active,.sw .ok:active{transform:translateY(3px);box-shadow:0 0 0 #5f666f,inset 0 1px 0 #fff6}
.pw .ok,.sw .ok{box-shadow:0 3px 0 #0b5a22,0 5px 6px #0008,inset 0 1px 0 #fff9}
.pw .ok:active,.sw .ok:active{box-shadow:0 0 0 #0b5a22}
.pw .lt{background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),linear-gradient(#0b1a0b,#061006);box-shadow:inset 0 3px 8px #000,0 1px 0 #fff6;position:relative;overflow:hidden}
.pw .lt::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.2),transparent 45%)}

.sy .key{box-shadow:0 7px 0 #7e775a,0 10px 12px #000a,inset 0 2px 0 #fffa,inset 0 -3px 5px #0003;transition:transform .07s,box-shadow .07s}
.sy .key:active,.sy .key.ok{transform:translateY(5px);box-shadow:0 2px 0 #7e775a,0 3px 5px #0008,inset 0 2px 0 #fff8}
.sy .key.ok{box-shadow:0 2px 0 #176b2e,0 0 18px #27e05a88,inset 0 2px 0 #fff8}

.sw .lg{background:radial-gradient(circle at 35% 30%,#555,#161616 70%);box-shadow:inset 0 -2px 3px #000,0 1px 0 #fff6}
.sw .lg.on{background:radial-gradient(circle at 35% 30%,#fff3b8,#ffd24d 50%,#b07a00);box-shadow:0 0 14px 3px #ffd24d99;animation:okpulse 1.6s ease-in-out infinite alternate}
.sw .tg{background:linear-gradient(90deg,#1a1c1f,#4d525a 50%,#1a1c1f);box-shadow:inset 0 4px 8px #000,0 1px 0 #fff7}
.sw .tg b{background:linear-gradient(90deg,#8e959f,#fafbfc 35%,#b6bcc4 60%,#6c737d);box-shadow:0 5px 5px #000a,inset 0 -3px 4px #0004;transition:top .18s cubic-bezier(.3,1.7,.5,1)}

/* Morse */
.mo .mlamp{position:absolute;left:72px;top:24px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6b5a30,#2a2010 70%);box-shadow:0 0 0 5px #3b4047,0 0 0 7px #8b929c,inset 0 -6px 10px #000a,0 6px 8px #0009;transition:background .04s,box-shadow .04s}
.mo .mlamp.on{background:radial-gradient(circle at 35% 30%,#fff7c8,#ffc933 50%,#b57400);box-shadow:0 0 0 5px #3b4047,0 0 0 7px #8b929c,0 0 36px 12px #ffc933}
.mo .mfreq{position:absolute;left:46px;top:100px;width:108px;height:34px;background:linear-gradient(#050805,#0d150d);border:2px solid #444;border-radius:4px;color:#46ff6a;font:800 15px/30px "Courier New",monospace;text-align:center;box-shadow:inset 0 3px 8px #000,0 1px 0 #fff6;text-shadow:0 0 8px #46ff6a99}
.mo .marr,.mz .dp,.sf .arr{border:1px solid #444;border-radius:6px;background:linear-gradient(#e9ecef,#aab0b8);box-shadow:0 3px 0 #5f666f,0 5px 5px #0007,inset 0 1px 0 #fff9;transition:transform .06s,box-shadow .06s;padding:0;font-size:14px;line-height:1}
.mo .marr{position:absolute;top:100px;width:32px;height:34px}
.mo .marr:active,.mz .dp:active,.sf .arr:active{transform:translateY(3px);box-shadow:0 0 0 #5f666f,inset 0 1px 0 #fff6}
.mo .ok,.sf .ok{position:absolute;left:50px;top:156px;width:100px;height:28px;border-radius:7px;border:2px solid #333;background:linear-gradient(#58d46f,#1f9d3a);color:#032;font-weight:800;letter-spacing:.1em;box-shadow:0 3px 0 #0b5a22,0 5px 6px #0008,inset 0 1px 0 #fff9;transition:transform .06s,box-shadow .06s}
.mo .ok:active,.sf .ok:active{transform:translateY(3px);box-shadow:0 0 0 #0b5a22}
/* Labyrinth */
.mz .mzg{position:absolute;left:40px;top:30px;width:120px;height:120px;background:radial-gradient(circle,#252a31,#14171b);border-radius:4px;box-shadow:inset 0 3px 8px #000,0 1px 0 #fff6}
.mz .mzg i{position:absolute;width:3px;height:3px;border-radius:50%;background:#5a6270}
.mz .mk{position:absolute;width:14px;height:14px;border-radius:50%;border:3px solid #27e05a;box-shadow:0 0 8px #27e05a88}
.mz .gl{position:absolute;width:18px;text-align:center;color:#ff3b30;font-size:15px;line-height:18px;text-decoration:none;text-shadow:0 0 8px #f00}
.mz .pl{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bcc);box-shadow:0 0 10px #fff;transition:left .12s,top .12s,background .1s;padding:0;border:0;margin:0;display:block}
.mz .pl.bump{background:#f33;box-shadow:0 0 16px #f00;animation:bumpa .35s}
@keyframes bumpa{25%{translate:-3px 0}50%{translate:3px 0}75%{translate:-2px 0}}
.mz .cl{position:absolute;width:20px;text-align:center;font:800 10px/12px sans-serif;font-style:normal;color:#2a2e34}
.mz .dp{position:absolute;top:158px;width:30px;height:30px}
/* Sicherungen */
.fz::before,.fz::after{content:"";position:absolute;left:8px;right:8px;height:9px;border-radius:3px;background:linear-gradient(#8b929c,#3a3f46);box-shadow:inset 0 1px 0 #fff6,0 2px 3px #0008}
.fz::before{top:26px}.fz::after{top:166px}
.fz .fuse{position:absolute;top:34px;width:28px;height:132px;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .35s;filter:drop-shadow(0 4px 3px #0008)}
.fz .fuse s{display:block;width:20px;height:14px;background:linear-gradient(90deg,#6b4a1e,#ffd890 40%,#a0702c);border-radius:3px}
.fz .tube{width:24px;flex:1;margin:-1px 0;border-radius:5px;border:2px solid #0006;background-image:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,0) 42%,rgba(0,0,0,.35));display:flex;align-items:center;justify-content:center}
.fz .tube b{writing-mode:vertical-rl;transform:rotate(180deg);font:800 13px sans-serif;color:#111;background:#fffe;padding:3px 1px;border-radius:2px}
.fz .fuse.pulled{transform:translateY(-70px) scale(.9);opacity:.2;pointer-events:none}
.fz .fuse.zap{animation:zap .4s}
@keyframes zap{20%,60%{translate:-3px 0;filter:brightness(2.2)}40%,80%{translate:3px 0}}
/* Tresor */
.sf .plate{position:absolute;left:36px;top:18px;width:128px;height:20px;border-radius:4px;background:#222;color:#ffd24d;font:800 11px/20px sans-serif;letter-spacing:.14em;text-align:center;box-shadow:inset 0 2px 4px #000,0 1px 0 #fff6}
.sf .plate b{font-size:14px}
.sf .col{position:absolute;top:44px;width:40px}
.sf .arr{width:40px;height:24px}
.sf .lt{margin:6px 0;height:46px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),linear-gradient(#0b1a0b,#061006);border:2px solid #444;border-radius:4px;color:#46ff6a;font:800 34px/42px "Courier New",monospace;text-align:center;text-shadow:0 0 8px #46ff6a99;box-shadow:inset 0 3px 8px #000,0 1px 0 #fff6}
.tm .lamps{gap:6px}.tm .lamp{width:28px;height:28px;font-size:18px}

/* Gedächtnis */
.mm .mdisp{position:absolute;left:60px;top:22px;width:80px;height:58px;background:linear-gradient(#050805,#0d150d);border:3px solid #444;border-radius:5px;color:#46ff6a;font:800 46px/52px "Courier New",monospace;text-align:center;text-shadow:0 0 10px #46ff6a99;box-shadow:inset 0 4px 10px #000,0 1px 0 #fff6}
.mm .mst{position:absolute;left:0;right:0;top:90px;display:flex;gap:8px;justify-content:center}
.mm .mst i{width:14px;height:8px;border-radius:4px;background:#3a3f45;border:1px solid #222}
.mm .mst i.on{background:#27e05a;box-shadow:0 0 8px #27e05a}
.mm .mkey{position:absolute;top:110px;width:40px;height:62px;border-radius:7px;border:2px solid #555;background:linear-gradient(#f2eedf,#c9c3a8);color:#111;font:800 24px sans-serif;box-shadow:0 7px 0 #7e775a,0 10px 12px #000a,inset 0 2px 0 #fffa;transition:transform .07s,box-shadow .07s;padding:0}
.mm .mkey:active{transform:translateY(5px);box-shadow:0 2px 0 #7e775a,0 3px 5px #0008}
/* Binärcode */
.bn .disp{position:absolute;left:46px;top:24px;width:108px;height:50px;background:linear-gradient(#050805,#0d150d);border:3px solid #444;border-radius:5px;color:#ff9f1a;font:800 40px/44px "Courier New",monospace;text-align:center;text-shadow:0 0 10px #ff9f1a99;box-shadow:inset 0 4px 10px #000,0 1px 0 #fff6}
.bn .bit{position:absolute;top:84px;width:21px;height:62px;cursor:pointer;touch-action:manipulation}
.bn .bit i{display:block;width:13px;height:13px;margin:0 auto 5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#161616 70%);box-shadow:inset 0 -2px 3px #000,0 1px 0 #fff6}
.bn .bit.on i{background:radial-gradient(circle at 35% 30%,#fff3b8,#ffd24d 50%,#b07a00);box-shadow:0 0 10px 2px #ffd24d99}
.bn .bit b{display:block;position:relative;width:21px;height:42px;border-radius:9px;background:linear-gradient(90deg,#1a1c1f,#4d525a 50%,#1a1c1f);box-shadow:inset 0 3px 6px #000,0 1px 0 #fff7}
.bn .bit b::after{content:"";position:absolute;left:2px;width:17px;height:18px;top:21px;border-radius:7px;background:linear-gradient(90deg,#8e959f,#fafbfc 40%,#6c737d);box-shadow:0 4px 4px #000a;transition:top .15s cubic-bezier(.3,1.7,.5,1)}
.bn .bit.on b::after{top:3px}
.bn .ok,.mx .ok{position:absolute;left:50px;top:156px;width:100px;height:28px;border-radius:7px;border:2px solid #333;background:linear-gradient(#58d46f,#1f9d3a);color:#032;font-weight:800;letter-spacing:.1em;box-shadow:0 3px 0 #0b5a22,0 5px 6px #0008,inset 0 1px 0 #fff9;transition:transform .06s,box-shadow .06s}
.bn .ok:active,.mx .ok:active{transform:translateY(3px);box-shadow:0 0 0 #0b5a22}
/* Mischpult */
.mx .bulb{position:absolute;left:78px;top:20px;width:44px;height:44px;border-radius:50%;background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),rgba(255,255,255,0) 45%)}
.mx .trk{position:absolute;top:74px;width:16px;height:72px;margin-left:0;border-radius:8px;background:repeating-linear-gradient(180deg,#0000 0 17px,#0007 17px 18px),linear-gradient(90deg,#15171a,#3a3f46);box-shadow:inset 0 3px 6px #000,0 1px 0 #fff7;touch-action:none;cursor:pointer}
.mx .trk b{position:absolute;left:-6px;width:28px;height:18px;border-radius:5px;background:linear-gradient(#f4f5f7,#8e959f);border:1px solid #333;box-shadow:0 4px 5px #000a;transition:top .12s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.mx .sl{position:absolute;top:148px;width:32px;text-align:center;font:800 13px sans-serif;font-style:normal;color:#2a2e34}
.mx .ok{top:166px;height:24px;font-size:12px}

/* Overlay, Alarm, Effekte */
#overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#000b;padding:20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadein .4s both;overflow:auto}
#overlay .box{max-width:480px;width:100%;text-align:center;background:#20252b;border:2px solid #444;border-radius:18px;padding:26px;box-shadow:0 30px 60px #000c,0 0 0 1px #fff2 inset;animation:pop .5s cubic-bezier(.2,1.3,.4,1) both}
#overlay h2{font-size:2.2rem;margin:0 0 8px}
#overlay.win h2{color:#4cf07a}#overlay.lose h2{color:#ff4d4d}
#overlay.win .box{box-shadow:0 0 60px #27e05a55,0 30px 60px #000c}
#overlay.lose .box{box-shadow:0 0 60px #ff2a2a66,0 30px 60px #000c}
#overlay p{color:#cfd5dd;line-height:1.5}
#overlay .row{justify-content:center;margin-top:14px}
#overlay .rank{display:inline-block;margin:6px 0;padding:8px 14px;border-radius:10px;background:#1f3a28;border:2px solid #27e05a;color:#b8ffcb;font-weight:700}
#overlay .codebox{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px 0;padding:8px 10px;border-radius:10px;background:#15181c;border:1px solid #3d4651}
#overlay .codebox b{font:800 1.2rem "Courier New",monospace;letter-spacing:.08em;color:#ffd24d;user-select:all}
@keyframes fadein{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.7) translateY(30px)}}
#flash{position:fixed;inset:0;pointer-events:none;background:#f22;opacity:0;z-index:40}
#flash.go{animation:fl .5s ease-out}
@keyframes fl{0%{opacity:.55}100%{opacity:0}}
#boom{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:45;background:radial-gradient(circle,#fff 0%,#fff3b0 12%,#ffb020 32%,#ff4a10 55%,#4a0800 100%)}
#boom.go{animation:bm 1.4s ease-out forwards}
@keyframes bm{0%{opacity:1;transform:scale(.3)}30%{opacity:1;transform:scale(1.2)}100%{opacity:.0;transform:scale(1.6)}}
#alarm{position:fixed;inset:0;pointer-events:none;z-index:35;opacity:0;box-shadow:inset 0 0 140px 40px rgba(255,0,0,.55)}
#alarm.on{animation:alarm 1s ease-in-out infinite}
@keyframes alarm{50%{opacity:1}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:48}
@media (max-width:640px){.slots{grid-template-columns:repeat(2,1fr)}.case{width:96vw}}

.case.instant .mod{animation:none}
.case.instant .lid{display:none}
/* ---------- Einsatzleitung (Experten-Ansicht) + PDF ---------- */
#expert{display:flex;flex-direction:column;height:100vh;height:100dvh}
.xbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 14px;background:#1b1f25;border-bottom:1px solid #343b44}
.xbar .lamps{display:flex;gap:6px}
.xbar .lamp{width:22px;height:22px;border-radius:50%;background:#222;border:2px solid #666}
.xbar .lamp.on{background:#ff2a2a;border-color:#ffb0b0;box-shadow:0 0 10px #ff2a2a}
.pdfwrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#2b2f35}
.pdfbar{display:flex;gap:8px;align-items:center;padding:6px 10px;background:#20252b;border-bottom:1px solid #343b44}
.pdfbar button{padding:6px 12px;border-radius:8px;border:1px solid #4a525c;background:#262b31;color:#cdd3da}
.pdfscroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px;text-align:center}
.pdfscroll canvas{display:block;margin:0 auto 10px;max-width:none;background:#fff;box-shadow:0 4px 14px #0008}
.pdfscroll iframe{width:100%;height:100%;border:0;background:#fff}
.pdfmsg{padding:30px 16px;color:#cfd5dd}
#solopdf{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);z-index:38;display:flex;flex-direction:column;box-shadow:-10px 0 40px #000a;transform:translateX(0);transition:transform .25s}
#solopdf.closed{transform:translateX(105%)}
#solopdf{width:min(640px,100vw)}

/* ---------- Anleitung (Seiten + Reiter) ---------- */
.mbar{display:flex;gap:8px;align-items:center;padding:6px 10px;background:#20252b;border-bottom:1px solid #343b44}
.mbar button{padding:5px 10px;border-radius:8px;border:1px solid #4a525c;background:#262b31;color:#cdd3da}
.mmain{display:flex;flex:1;min-height:0}
.mnav{width:158px;flex:none;overflow:auto;background:#1b1f25;border-right:1px solid #343b44;-webkit-overflow-scrolling:touch}
.mnav button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;padding:9px 10px;border:0;border-bottom:1px solid #2a3038;background:none;color:#cfd5dd;font-size:.9rem}
.mnav button i{font-style:normal;min-width:22px;height:22px;border-radius:11px;background:#3d4651;color:#e8eaed;font-size:.75rem;display:flex;align-items:center;justify-content:center}
.mnav button.on{background:#ffd24d;color:#222}.mnav button.on i{background:#222;color:#ffd24d}
.mpage{flex:1;overflow:auto;padding:14px 18px 40px;background:#f7f5ee;color:#1d1d1d;line-height:1.5;-webkit-overflow-scrolling:touch}
.mpage h3{margin:0 0 8px;font-size:1.5em;color:#8a1010;border-bottom:3px solid #8a1010;padding-bottom:4px}
.mpage h4{margin:14px 0 4px;font-size:1.05em;color:#333}
.mpage p{margin:6px 0}.mpage ol,.mpage ul{margin:6px 0;padding-left:1.4em}.mpage li{margin:3px 0}
.mnote{background:#fff3c4;border-left:5px solid #e0aa33;padding:7px 10px;border-radius:4px}
.mtw{overflow-x:auto;margin:8px 0}
.mpage table{border-collapse:collapse;font-size:.92em}
.mpage th,.mpage td{border:1px solid #bbb;padding:4px 9px;text-align:left;vertical-align:middle}
.mpage th{background:#e6e2d2}
.mpage .symtab td,.mpage .symtab th{padding:3px 5px}
.msvg{margin:10px 0;overflow-x:auto;text-align:center;background:#fffdf5;border:1px solid #e0d8bd;border-radius:10px;padding:8px}
.mhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:3px solid #8a1010;margin-bottom:12px;padding-bottom:4px}
.mhead h3{border:0!important;margin:0!important;padding:0!important}
.mcat{font-size:.82em;color:#7a6a3a;letter-spacing:.03em}
.mpage{background:#f4f1e6}
ol.steps{list-style:none;counter-reset:s;padding-left:0!important}
ol.steps li{counter-increment:s;position:relative;padding:7px 10px 7px 42px;margin:7px 0;background:#fffdf5;border:1px solid #e0d8bd;border-radius:8px}
ol.steps li::before{content:counter(s);position:absolute;left:9px;top:7px;width:24px;height:24px;border-radius:50%;background:#8a1010;color:#fff;font-weight:800;text-align:center;line-height:24px;font-size:.85em}
.mpage ul li::marker{color:#8a1010}
.mpage tr:nth-child(even) td{background:#faf6e6}
.mpage table{border-radius:8px;overflow:hidden;box-shadow:0 1px 4px #0002}
.mpage th{background:#8a1010;color:#fff;border-color:#8a1010}
.mnote::before{content:"💡 "}
.sketch{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 16px}
.skf{margin:0;text-align:center}
.skbox{width:236px;height:236px;padding:12px;border-radius:12px;background:radial-gradient(circle,#343941 1px,transparent 1.6px) 0 0/7px 7px,linear-gradient(#1c1f23,#25282d);box-shadow:inset 0 6px 16px #000,0 3px 8px #0004}
.skin{position:relative;width:200px;height:200px;transform:scale(1.1);transform-origin:0 0}
.skin .mod{animation:none}
.skf figcaption{font-size:.78em;color:#7a6a3a;margin-top:6px;max-width:236px}
@media (max-width:640px){.mmain{flex-direction:column}.mnav{width:auto;display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid #343b44}.mnav button{width:auto;white-space:nowrap;border-bottom:0;border-right:1px solid #2a3038}}

/* ---------- Koffer: zwei Hälften ---------- */
.half{transform-origin:50% 0}
.half.flipin{animation:flipin .45s cubic-bezier(.3,1.3,.5,1)}
@keyframes flipin{from{transform:rotateX(-75deg);opacity:.15}to{transform:none;opacity:1}}
.upper .foam{background:radial-gradient(circle,#2c3647 1px,transparent 1.6px) 0 0/7px 7px,linear-gradient(#18202b,#222c3a)}
.upper .mod{animation-delay:calc(var(--d,0)*70ms)}
.halfcap{text-align:center;font-size:.7rem;letter-spacing:.3em;color:#6a7480;margin-top:6px}
.flip{position:absolute;top:3px;left:50%;transform:translateX(-50%);z-index:40;padding:2px 16px;border-radius:0 0 10px 10px;border:0;background:linear-gradient(#e8eaee,#9aa1ab);color:#222;font-weight:800;font-size:.78rem;box-shadow:0 3px 6px #0006,inset 0 -2px 0 #0003}
.hud{display:flex;gap:18px;align-items:center;justify-content:center;margin:8px auto 0;padding:6px 16px;width:fit-content;max-width:96vw;background:#101215;border:2px solid #343b44;border-radius:12px}
.hclock{font:700 30px/1 "Courier New",monospace;color:#ff3b30;text-shadow:0 0 10px #ff3b30aa}
.hclock.low{animation:blink 1s steps(2) infinite}
.hlamps{display:flex;gap:6px}.hlamps i{width:16px;height:16px;border-radius:50%;background:#222;border:2px solid #666}.hlamps i.on{background:#ff2a2a;border-color:#ffb0b0;box-shadow:0 0 10px #ff2a2a}
.hstat{font-size:.78rem;color:#aab2bd}
.cgroup{width:100%;margin-bottom:8px}.cgh{margin-bottom:4px;color:#ffd24d}.cgh .linkbtn{font-size:.8rem}

/* ---------- Generische Module ---------- */
.gx{position:absolute;inset:0}
.gx>*{position:absolute}
.gdisp{background:linear-gradient(#050805,#0d150d);border:3px solid #444;border-radius:5px;text-align:center;font-family:"Courier New",monospace;font-weight:800;text-shadow:0 0 8px currentColor;box-shadow:inset 0 4px 10px #000,0 1px 0 #fff6;overflow:hidden;white-space:nowrap}
.gtxt{font-family:sans-serif;font-weight:800;white-space:nowrap;line-height:1}
.glamp{border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#161616 70%);box-shadow:inset 0 -2px 3px #000,0 1px 0 #fff6}
.glamp.on{background:radial-gradient(circle at 35% 30%,#fff,var(--lc) 55%,#000a);box-shadow:0 0 12px 3px var(--lc)}
.gsvg{pointer-events:none}.gsvg svg{display:block}
.gbtn{border:2px solid #555;border-radius:8px;background:linear-gradient(#f2eedf,#c9c3a8);color:#111;font-weight:800;padding:0;line-height:1;box-shadow:0 5px 0 #7e775a,0 8px 10px #000a,inset 0 2px 0 #fffa;transition:transform .07s,box-shadow .07s,filter .2s;touch-action:manipulation}
.gbtn.rnd{border-radius:50%}
.gbtn:active{transform:translateY(4px);box-shadow:0 1px 0 #7e775a,inset 0 2px 0 #fff8}
.gbtn.sel{outline:4px solid #ffd24d;outline-offset:1px}
.gbtn.done{filter:brightness(.62) saturate(.6);transform:translateY(4px);box-shadow:0 1px 0 #333;outline:3px solid #27e05a;outline-offset:-3px}
.gsub{border:2px solid #333;border-radius:7px;background:linear-gradient(#58d46f,#1f9d3a);color:#032;font-weight:800;letter-spacing:.1em;font-size:13px;padding:0;box-shadow:0 3px 0 #0b5a22,0 5px 6px #0008,inset 0 1px 0 #fff9;transition:transform .06s,box-shadow .06s}
.gsub:active{transform:translateY(3px);box-shadow:0 0 0 #0b5a22}
.gcyc .arr{display:block;width:100%;height:18px;border:1px solid #444;border-radius:5px;background:linear-gradient(#e9ecef,#aab0b8);font-size:12px;line-height:1;padding:0;box-shadow:0 3px 0 #5f666f,inset 0 1px 0 #fff9}
.gcyc .arr:active{transform:translateY(3px);box-shadow:none}
.gcyc .lt{margin:5px 0;height:30px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),linear-gradient(#0b1a0b,#061006);border:2px solid #444;border-radius:4px;color:#46ff6a;font:800 26px/26px "Courier New",monospace;text-align:center;text-shadow:0 0 8px #46ff6a99;box-shadow:inset 0 3px 8px #000;overflow:hidden;white-space:nowrap}
.gtog{width:26px;height:64px;border-radius:13px;background:linear-gradient(90deg,#1a1c1f,#4d525a 50%,#1a1c1f);box-shadow:inset 0 4px 8px #000,0 1px 0 #fff7;cursor:pointer;touch-action:manipulation}
.gtog b{position:absolute;left:1px;width:20px;height:26px;border-radius:10px;background:linear-gradient(90deg,#8e959f,#fafbfc 35%,#b6bcc4 60%,#6c737d);box-shadow:0 5px 5px #000a;transition:top .18s cubic-bezier(.3,1.7,.5,1)}
.gtog.u b{top:3px}.gtog.d b{top:33px}

/* ---------- Koffer mit echter Tiefe (Unterteil vorn, Deckel hinten) ---------- */
#game{perspective:none;overflow:visible;user-select:none;-webkit-user-select:none;touch-action:pan-y}
body{overflow-x:hidden}
.scene{position:relative;margin:14px auto 0;perspective:1800px;perspective-origin:50% 28%}
.shadow{position:absolute;left:3%;right:3%;bottom:-4%;height:10%;border-radius:50%;background:radial-gradient(ellipse,#000e 0%,#0000 72%);filter:blur(12px)}
.suit{position:relative;width:var(--W);height:var(--H);transform-style:preserve-3d;
 transform:rotateX(var(--rx,8deg)) rotateY(calc(var(--ry,0deg) + var(--rot,0deg)));transition:transform .55s cubic-bezier(.25,1.12,.4,1);cursor:grab}
.suit.drag{transition:transform .05s linear;cursor:grabbing}
.scene.enter{animation:drop 1s cubic-bezier(.2,.9,.25,1.05) both}
.suit{transition:none}
.suit.shake{animation:sh .55s}
.suit.instant .mod{animation:none}.suit.instant .lid{display:none}
.sface{position:absolute;inset:0;display:grid;grid-template-columns:var(--ls) 1fr var(--ls);grid-template-rows:var(--lt) var(--fh) var(--lb);border-radius:10px;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:calc(var(--W)/62);
 background:
  radial-gradient(circle at 13px 13px,#fff 0 1.5px,#6a7079 2.5px 4px,#1d1f22 4.6px,transparent 5.4px),
  radial-gradient(circle at calc(100% - 13px) 13px,#fff 0 1.5px,#6a7079 2.5px 4px,#1d1f22 4.6px,transparent 5.4px),
  radial-gradient(circle at 13px calc(100% - 13px),#fff 0 1.5px,#6a7079 2.5px 4px,#1d1f22 4.6px,transparent 5.4px),
  radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#fff 0 1.5px,#6a7079 2.5px 4px,#1d1f22 4.6px,transparent 5.4px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.06) 1px 2px),
  linear-gradient(115deg,#f9fafb 0%,#adb3bc 15%,#eff1f4 31%,#979ea8 52%,#eaecf0 70%,#a7adb6 86%,#dcdfe4 100%);
 box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #6c737d,0 0 0 1px #2b2f35}
.sface.front{transform:translateZ(calc(var(--D)/2));transform-style:preserve-3d}
.sface.back{transform:rotateY(180deg) translateZ(calc(var(--D)/2))}
.sface .lt{grid-column:1/-1;grid-row:1}.sface .ll{grid-column:1;grid-row:2}.sface .lr{grid-column:3;grid-row:2}.sface .lb{grid-column:1/-1;grid-row:3}
.sface .foam{grid-column:2;grid-row:2;padding:var(--pad);height:var(--fh);margin:0}
.sface .slots{grid-template-columns:repeat(var(--cols,4),1fr);gap:var(--gap)}
.sface .lid{border-radius:10px}
.halfcap{position:absolute;left:0;right:0;bottom:.3em;margin:0;text-align:center;font-size:.55em;letter-spacing:.35em;color:#6a7480}
.edge{position:absolute;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,rgba(0,0,0,.1) 1px 3px),linear-gradient(#b9bec6,#868d97 45%,#5b616a);box-shadow:inset 0 0 0 2px #3a3f46;backface-visibility:hidden}
.edge.top{left:0;top:calc(var(--H)/2 - var(--D)/2);width:var(--W);height:var(--D);transform:rotateX(90deg) translateZ(calc(var(--H)/2))}
.edge.bottom{left:0;top:calc(var(--H)/2 - var(--D)/2);width:var(--W);height:var(--D);transform:rotateX(-90deg) translateZ(calc(var(--H)/2));background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.12) 1px 3px),linear-gradient(#6c727b,#4a4f57 60%,#2f3338)}
.edge.left{top:0;left:calc(var(--W)/2 - var(--D)/2);width:var(--D);height:var(--H);transform:rotateY(-90deg) translateZ(calc(var(--W)/2));background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,rgba(0,0,0,.1) 1px 3px),linear-gradient(90deg,#9aa1ab,#6a717b 50%,#4a4f57)}
.edge.right{top:0;left:calc(var(--W)/2 - var(--D)/2);width:var(--D);height:var(--H);transform:rotateY(90deg) translateZ(calc(var(--W)/2));background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,rgba(0,0,0,.1) 1px 3px),linear-gradient(90deg,#4a4f57,#6a717b 50%,#9aa1ab)}
.edge.top::before{content:"";position:absolute;left:36%;width:28%;top:20%;bottom:20%;border-radius:12px;background:linear-gradient(#4a4a4a,#111);box-shadow:inset 0 2px 3px #fff5,0 2px 4px #0008}
.edge.bottom::before,.edge.bottom::after{content:"";position:absolute;top:22%;bottom:22%;width:9%;border-radius:4px;background:linear-gradient(#d6dae0,#7a818b);box-shadow:inset 0 2px 0 #fff8,0 2px 4px #0008}
.edge.bottom::before{left:16%}.edge.bottom::after{right:16%}
.edge.left::before,.edge.right::before{content:"";position:absolute;left:25%;right:25%;top:12%;height:12%;border-radius:4px;background:linear-gradient(90deg,#444,#999 50%,#444);box-shadow:0 1px 0 #fff4}
.edge.left::after,.edge.right::after{content:"";position:absolute;left:25%;right:25%;bottom:12%;height:12%;border-radius:4px;background:linear-gradient(90deg,#444,#999 50%,#444);box-shadow:0 1px 0 #fff4}
/* Kofferwand aus Flächen (siehe buildShell in client.js), Seiten nur flach (kein preserve-3d: Safari-sicher) */
.sface{border-radius:var(--rc,20px)}
.sface.front{transform-style:flat}
.slot{transform-style:flat}
.suit[data-face=back] .sface.front{visibility:hidden}
.suit[data-face=front] .sface.back{visibility:hidden}
.fc{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.3)}
.fc .hnd{position:absolute;left:36%;width:28%;top:16%;bottom:16%;border-radius:12px;background:linear-gradient(#555,#111);box-shadow:inset 0 2px 3px #fff5,0 2px 4px #0008}
.fc .ltc{position:absolute;top:20%;bottom:20%;width:9%;border-radius:4px;background:linear-gradient(#d6dae0,#7a818b);box-shadow:inset 0 2px 0 #fff8,0 2px 4px #0008}
.fc .ltc.l1{left:16%}.fc .ltc.l2{right:16%}
.fc .hng{position:absolute;left:22%;right:22%;height:12%;border-radius:4px;background:linear-gradient(90deg,#444,#aaa 50%,#444);box-shadow:0 1px 0 #fff4}
.fc .hng.h1{top:10%}.fc .hng.h2{bottom:10%}
/* Deckel öffnen: Perspektive direkt im Keyframe (die Seite selbst ist flach) */
.sface .lid.open{animation:lidopen2 1.15s cubic-bezier(.55,0,.3,1) forwards}
@keyframes lidopen2{0%{transform:perspective(1600px) rotateX(0);opacity:1}78%{transform:perspective(1600px) rotateX(-96deg);opacity:1}100%{transform:perspective(1600px) rotateX(-112deg);opacity:0;visibility:hidden}}
/* Module wirken eingelassen: aufgesetzte Kante um die Fächer und Schattenrand über jedem Modul */
.sface .foam{box-shadow:inset 0 14px 30px #000,inset 0 -2px 0 #fff2,0 0 0 3px #7a818b,0 0 0 6px #dfe2e7,0 3px 8px 4px #0006}
.slot{border-radius:9px;box-shadow:inset 0 0 0 2px #000,inset 0 10px 18px #000c,0 1px 0 #fff2}
.slot::after{content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;z-index:9;box-shadow:inset 0 0 0 3px #000b,inset 0 10px 14px -6px #000d,inset 8px 0 12px -8px #0009,inset 0 -2px 0 #fff2}
/* Versionsanzeige */
#ver{position:fixed;right:10px;bottom:6px;z-index:90;font:600 11px/1.2 ui-monospace,Menlo,monospace;color:#fff;opacity:.38;pointer-events:none;text-align:right;max-width:70vw}
#ver.new{opacity:1;color:#1a1200;background:#ffd24d;padding:5px 9px;border-radius:8px;pointer-events:auto;cursor:pointer;box-shadow:0 4px 14px #000a}
/* 3D-Batterien (echte Körper im Koffer, siehe build3dBatteries) */
.b3{position:absolute;width:0;height:0;transform-style:preserve-3d}
.suit[data-face=back] .b3.front{visibility:hidden}
.suit[data-face=front] .b3.back{visibility:hidden}
.b3 .bf{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.b3 .ec{position:absolute}
.b3 .b3s{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.b3 .bolt{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.b3d .bbody,.b3d .bcap{display:none}
/* Batterien: halb eingelassene Zylinder mit Glanz, Pol und Schatten (3D-Optik) */
.it.batit{background:none;box-shadow:none;padding:.15em;font-size:1.05em;filter:drop-shadow(0 .25em .25em rgba(0,0,0,.55))}
.b3d{position:relative;display:block;width:4.6em;height:1.9em}
.b3d .bgv{position:absolute;inset:-.28em -.4em -.1em;border-radius:1.2em;background:linear-gradient(#0d0e10,#1c1f23);box-shadow:inset 0 .35em .6em #000,inset 0 -.1em 0 #fff2,0 .08em 0 #fff5}
.b3d .bbody{position:absolute;left:0;right:.7em;top:-.05em;bottom:.45em;border-radius:1em .5em .5em 1em;
 background:linear-gradient(180deg,#fff7cf 0%,#ffd75a 14%,#f0b830 34%,#c8901c 62%,#7d5810 100%);
 box-shadow:0 .3em .5em #000c,inset 0 .12em .1em #fff9,inset .25em 0 .3em #fff4,inset -.25em 0 .3em #0006}
.b3d .bbody::before{content:"";position:absolute;left:34%;width:22%;top:0;bottom:0;background:linear-gradient(180deg,rgba(40,25,0,.55),rgba(40,25,0,.25))}
.b3d .bbody::after{content:"";position:absolute;left:8%;right:10%;top:.12em;height:.28em;border-radius:.2em;background:linear-gradient(#fff9,#fff0)}
.b3d .bcap{position:absolute;right:.05em;top:.3em;width:.8em;height:.8em;border-radius:.2em .45em .45em .2em;background:linear-gradient(180deg,#f3f5f8,#9aa1ab 55%,#5d636c);box-shadow:0 .2em .3em #000a,inset 0 .08em 0 #fff}
.b3d.v{width:1.9em;height:4.6em}
.b3d.v .bgv{inset:-.1em -.28em -.4em}
.b3d.v .bbody{left:-.05em;right:.45em;top:.7em;bottom:0;border-radius:1em 1em .5em .5em;
 background:linear-gradient(90deg,#fff7cf 0%,#ffd75a 14%,#f0b830 34%,#c8901c 62%,#7d5810 100%);box-shadow:.3em 0 .5em #000c,inset .12em 0 .1em #fff9,inset 0 .25em .3em #fff4,inset 0 -.25em .3em #0006}
.b3d.v .bbody::before{left:0;right:0;top:34%;bottom:auto;width:auto;height:22%;background:linear-gradient(90deg,rgba(40,25,0,.55),rgba(40,25,0,.25))}
.b3d.v .bbody::after{left:.12em;right:auto;top:8%;width:.28em;height:80%;background:linear-gradient(90deg,#fff9,#fff0)}
.b3d.v .bcap{right:auto;left:.55em;top:.05em;width:.8em;height:.8em;border-radius:.45em .45em .2em .2em;background:linear-gradient(90deg,#f3f5f8,#9aa1ab 55%,#5d636c)}
/* Nach dem Drehen ragt der Koffer über seinen Platz hinaus: Platz reservieren und Knöpfe nach vorn holen */
.scene{margin-bottom:5vh}
#game .ctl,#game .drag-hint{position:relative;z-index:80}
#game .ctl{margin-top:22px}
.drag-hint{text-align:center;color:#8d96a2;font-size:.85rem;margin:10px 0 0}
/* Ränder mit Seriennummer, Batterien, Anschlüssen, CAR-Lampe */
.lane{display:flex;align-items:center;justify-content:space-evenly;gap:.8em;padding:.3em .9em;min-width:0;min-height:0}
.lane.ll,.lane.lr{flex-direction:column;padding:.9em .3em}
.it{display:flex;flex-direction:column;align-items:center;gap:.3em;padding:.45em .7em;border-radius:.6em;color:#aab;font-size:.62em;letter-spacing:.08em;
 background:linear-gradient(#41464e,#262a30);box-shadow:inset 0 1px 0 #fff3,inset 0 -2px 0 #0008,0 0 0 2px #111,0 4px 8px #0006}
.it.serial{background:repeating-linear-gradient(0deg,#0000 0 2px,#00000008 2px 3px),linear-gradient(#f6f3e6,#e3dfcc);color:#111;box-shadow:0 0 0 2px #222,0 4px 8px #0007;transform:rotate(-.8deg)}
.it.serial b{font:700 2.1em/1 "Courier New",monospace;letter-spacing:.16em;color:#111}
.it.serial i{display:block;width:100%;height:1.3em;background:repeating-linear-gradient(90deg,#111 0 2px,#f1efe4 2px 4px,#111 4px 5px,#f1efe4 5px 8px)}
.it .bat{width:3.4em;height:1.6em;border-width:.15em}.it .bat::after{right:-.55em;top:.35em;width:.4em;height:.7em}
.it .bat.v{width:1.6em;height:3.4em}.it .bat.v::after{right:auto;left:.35em;top:-.55em;width:.7em;height:.4em}
.it{padding:.35em .55em}
.it .port{width:5.6em;height:2.2em}.it .port.ser{width:4em}
.it.v .port{width:2.2em;height:5.6em}.it.v .port.ser{width:2.2em;height:4em;border-radius:3px 12px 12px 3px}
.it .car{width:4.8em;height:2.2em;font-size:1.3em;border-width:.12em}
.it small,.it span{font-size:1em}

/* ---------- Anleitung: dunkel (Standard) und hell (Umschalter) ---------- */
.mpage{--ink:#dfe3e8;--sub:#aab2bd;--bg:#171b21;--bg2:#222831;--bg3:#2a313c;--line:#3b4451;--acc:#ffd24d;--red:#c8453d;--ok:#27e05a;--noteBg:#3a3320;--noteInk:#ffe9a8;
 background:var(--bg);color:var(--ink)}
.mpage.light{--ink:#1d1d1d;--sub:#7a6a3a;--bg:#f4f1e6;--bg2:#fffdf5;--bg3:#f1ecd8;--line:#d9d0b4;--acc:#8a1010;--red:#8a1010;--ok:#1a7a34;--noteBg:#fff3c4;--noteInk:#3a2f00}
.mpage h3{color:var(--acc)}.mpage h4{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.mhead{border-bottom-color:var(--red)}.mcat{color:var(--sub)}
ol.steps li{background:var(--bg2);border-color:var(--line)}ol.steps li::before{background:var(--red)}
.mpage ul li::marker{color:var(--acc)}
.mnote{background:var(--noteBg);color:var(--noteInk);border-left-color:var(--acc)}
.mpage th{background:var(--red);border-color:var(--red);color:#fff}
.mpage td{background:var(--bg2);border-color:var(--line)}
.mpage tr:nth-child(even) td{background:var(--bg3)}
.msvg{background:var(--bg2);border-color:var(--line);color:var(--ink)}
.skf figcaption{color:var(--sub)}
.dg text,.dv text,.dw text{fill:var(--ink);font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.dg .dq{fill:var(--bg3);stroke:var(--acc);stroke-width:2}
.dg .dres{fill:var(--bg3);stroke:var(--ok);stroke-width:2}
.dg .da{stroke:var(--ink);stroke-width:2;fill:none}.dg .dm{fill:var(--ink)}
.dg .dl,.dv .dl{fill:var(--acc)!important;font-weight:700}.dg .dh,.dv .dh,.dw .dh{fill:var(--acc)!important;font-weight:700}
.dv circle{fill:rgba(255,210,77,.14);stroke:var(--acc);stroke-width:2}
.dw path{stroke:var(--line);stroke-width:1.5}.dw .s1{fill:var(--bg2)}.dw .s2{fill:var(--bg3)}.dw .dc{fill:var(--bg);stroke:var(--acc);stroke-width:2}
.mbar .themebtn{min-width:34px}

/* ---------- Generische Module: Kabel, Drehregler, Scheiben, Hebel ---------- */
.gbar{border-radius:3px;background:linear-gradient(90deg,#8b929c,#3a3f46 60%,#22252a);box-shadow:inset 0 1px 0 #fff6,0 3px 5px #0008}
.gwire{height:24px;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.gwire .wb{position:absolute;left:0;right:30px;top:6px;height:12px;border-radius:6px;background:var(--wc);background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%,rgba(0,0,0,.4));border:1px solid #0009}
.gwire u{position:absolute;left:-4px;top:7px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe3b0,#c27c2c 55%,#5a3a10)}
.gwire b{position:absolute;right:0;top:1px;width:24px;height:22px;border-radius:6px;background:#f2eedf;color:#111;font:800 13px/22px sans-serif;text-align:center;border:1px solid #333}
.gwire:hover .wb{filter:brightness(1.2)}
.gwire.done .wb{background-image:linear-gradient(90deg,var(--wc) 0 40%,transparent 40% 58%,var(--wc) 58%);background-color:transparent;border-color:transparent;opacity:.55}
.gwire.done{cursor:default}
.gcurve{position:absolute;pointer-events:none}
.gcurve svg{display:block;overflow:visible}
.gcurve .cv{fill:none;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.gcurve .cvh{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
.gcurve.done .cv{stroke-dasharray:14 22;opacity:.5}.gcurve.done .cvh{pointer-events:none}
.gdial svg{display:block;overflow:visible}
.gdial .dring{fill:#d8dce2;stroke:#555;stroke-width:2;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.gdial .din{fill:#9aa1ab;stroke:#444;stroke-width:1.5}
.gdial .tk{stroke:#333;stroke-width:2}
.gdial .dtx{font:800 10px sans-serif;fill:#222;text-anchor:middle}.gdial .dtx.in{fill:#124}
.gdial .dptr{stroke:#c0281c;stroke-width:4;stroke-linecap:round}
.gdial .dmk{fill:#c0281c}
.gdial .rot{transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.gdial .dl,.gdial .dr{position:absolute;bottom:-26px;width:34px;height:22px;border:1px solid #444;border-radius:6px;background:linear-gradient(#e9ecef,#aab0b8);box-shadow:0 3px 0 #5f666f;padding:0;font-size:12px;line-height:1}
.gdial .dl{left:calc(50% - 38px)}.gdial .dr{left:calc(50% + 4px)}
.gdial.sm .dl,.gdial.sm .dr{width:24px}.gdial.sm .dl{left:calc(50% - 26px)}.gdial.sm .dr{left:calc(50% + 2px)}
.gdial .dl:active,.gdial .dr:active{transform:translateY(3px);box-shadow:none}
.glever{touch-action:none;cursor:pointer}
.glever .gl-groove{position:absolute;border-radius:8px;background:linear-gradient(90deg,#15171a,#3a3f46);box-shadow:inset 0 3px 6px #000,0 1px 0 #fff7}
.glever:not(.hz) .gl-groove{left:calc(50% - 5px);width:10px;top:0;bottom:0}
.glever.hz .gl-groove{top:calc(50% - 5px);height:10px;left:0;right:0}
.glever .gl-t{position:absolute;background:#333}
.glever:not(.hz) .gl-t{left:calc(50% + 9px);width:6px;height:2px}.glever.hz .gl-t{top:calc(50% + 9px);height:6px;width:2px}
.glever .gl-h{position:absolute;border-radius:5px;background:linear-gradient(#f4f5f7,#8e959f);border:1px solid #333;box-shadow:0 4px 5px #000a;transition:left .12s,bottom .12s}
.glever:not(.hz) .gl-h{left:calc(50% - 14px);width:28px;height:16px;margin-bottom:-8px}
.glever.hz .gl-h{top:calc(50% - 14px);height:28px;width:16px;margin-left:-8px}
.mpage{--bpbg:#0f2238;--bpink:#9fc9ff}
.mpage.light{--bpbg:#e8eff7;--bpink:#1f3d63}
.bpbox{width:244px;height:244px;padding:6px;border-radius:10px;border:1px solid var(--line);background:var(--bpbg);box-shadow:0 3px 10px #0004}
.bpsvg{display:block}
.bbg{fill:var(--bpbg)}.bgrid{stroke:var(--bpink);stroke-opacity:.16;stroke-width:.6;fill:none}
.bink{stroke:var(--bpink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bink .bf{fill:var(--bpink)}.bink .bd{stroke-dasharray:4 3;stroke-width:1}.bink .bk{stroke-width:2.4}
.bink .bn{fill:var(--bpbg);stroke:var(--bpink)}.bink .bt{fill:var(--bpink);stroke:none;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:700}
.bink .bz{stroke-width:1.1}.bink .bframe{stroke-dasharray:1 0;stroke-width:1.2;stroke-opacity:.5}
.skf figcaption{max-width:244px;line-height:1.35}