html,body{margin:0;background:#F4EFE6;-webkit-font-smoothing:antialiased}
.sp{color:#1D1B18;font-family:Karla,system-ui,sans-serif}
.sp a{color:#1D1B18}.sp a:hover{color:#4F7BC0}
.sp button{font-family:'Space Mono',ui-monospace,monospace}
.sp-page{min-height:100vh;box-sizing:border-box;padding:20px 24px 28px;display:flex;flex-direction:column;gap:18px;align-items:center;user-select:none;-webkit-user-select:none}
.sp-page>*{width:100%;max-width:var(--w,640px)}
.sp-hd{display:flex;flex-wrap:nowrap;align-items:center;gap:14px 20px}
.sp-sy{display:flex;align-items:flex-end;gap:5px;height:34px;flex:none}.sp-sy i{display:block;height:34px}
.sp-hd h1{margin:0;font-size:clamp(24px,5vw,40px);line-height:1;font-weight:400;letter-spacing:-.04em}
.sp-m{font:13px 'Space Mono',ui-monospace,monospace;margin-top:6px}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px;font:13px 'Space Mono',monospace;min-height:44px}
.sp-chip{display:flex;align-items:center;gap:8px;border:2px solid #1D1B18;background:#fff;height:44px;box-sizing:border-box;padding:0 12px}
.sp-chip i{display:block;width:12px;height:12px}
.sp-chip.on{background:#1D1B18;color:#F4EFE6}
.sp-stage{position:relative}
.sp-stage canvas{display:block;width:100%;border:4px solid #1D1B18;box-sizing:border-box;touch-action:none}
.sp-ov{position:absolute;inset:4px;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.sp-ovb{background:#F4EFE6;border:2px solid #1D1B18;padding:20px;display:flex;flex-direction:column;gap:12px;max-width:340px}
.sp-ovb.inl{background:#FBBC0A;max-width:none;padding:14px 16px;gap:6px}
.sp-ovt{font-size:26px;letter-spacing:-.03em;line-height:1.1}.sp-ovb.inl .sp-ovt{font-size:24px}
.sp-ovx{font:13px/1.5 'Space Mono',monospace}
.sp-nm{display:flex;gap:8px}
.sp-in{flex:1;min-width:0;border:2px solid #1D1B18;border-radius:0;min-height:44px;box-sizing:border-box;padding:0 10px;background:#fff;color:#1D1B18;font:13px 'Space Mono',monospace}
.sp-b{border:2px solid #1D1B18;background:#1D1B18;color:#F4EFE6;border-radius:0;min-height:44px;box-sizing:border-box;padding:0 16px;font-size:13px;cursor:pointer}
.sp-b:hover{background:#4F7BC0;border-color:#4F7BC0}
.sp-b.alt{background:transparent;color:#1D1B18}.sp-b.alt:hover{background:#1D1B18;color:#F4EFE6;border-color:#1D1B18}
.sp-b.on{background:#1D1B18;color:#F4EFE6}.sp-b.on:hover{background:#4F7BC0;border-color:#4F7BC0}
.sp-ctl{display:grid;gap:8px}
.sp-pb{border:2px solid #1D1B18;background:#fff;color:#1D1B18;border-radius:0;min-height:56px;font-size:14px;cursor:pointer;touch-action:none}
.sp-pb.y{background:#FBBC0A}
.sp-hint{font:12px/1.5 'Space Mono',monospace;color:#5E584F}
.sp-home{font:13px 'Space Mono',monospace;min-height:44px;display:flex;align-items:center}
.sp-lbl{font:700 11px 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase}

/* Halle */
.sh-hall{background:#1D1B18;color:#F4EFE6;padding:24px 24px 0;display:flex;flex-direction:column;align-items:center}
.sh-hall .sp-hd{max-width:1100px}
.sh-hall h1{font-size:clamp(28px,6vw,52px)}
.sh-n1{animation:shNeon 7s linear infinite}.sh-n2{animation:shNeon2 5s linear infinite}
@keyframes shNeon{0%,18%,22%,25%,53%,57%,100%{opacity:1;text-shadow:0 0 6px rgba(244,239,230,.7),0 0 18px rgba(79,123,192,.8),0 0 42px rgba(79,123,192,.55)}20%,24%,55%{opacity:.35;text-shadow:none}}
@keyframes shNeon2{0%,60%,64%,100%{opacity:1;text-shadow:0 0 6px rgba(244,239,230,.7),0 0 18px rgba(232,68,52,.8),0 0 42px rgba(232,68,52,.55)}61%,63%{opacity:.25;text-shadow:none}}
@keyframes shBlink{0%,55%{opacity:1}56%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.sh-n1,.sh-n2,.sh-blink{animation:none!important}}
.sh-grid{width:100%;max-width:1100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:end;margin-top:36px}
.sh-m{width:100%;max-width:250px;justify-self:center;text-decoration:none;color:#F4EFE6!important;display:flex;flex-direction:column;transition:transform .15s}
.sh-m:hover{transform:translateY(-8px)}
.sh-m.soon{opacity:.5;pointer-events:none}
.sh-body{padding:12px 12px 0;display:flex;flex-direction:column;gap:10px}
.sh-mq{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;background:#1D1B18;padding:0 10px;font:700 13px 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.sh-mq i{display:block;width:10px;height:10px;border-radius:50%;flex:none}
.sh-bz{background:#1D1B18;padding:10px}
.sh-sc{aspect-ratio:4/3;background:#F4EFE6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sh-dk{height:54px;background:#1D1B18;margin:0 -12px;display:flex;align-items:center;justify-content:center;gap:16px}
.sh-dk i{display:block;border-radius:50%}
.sh-bs{height:30px;background:#2A2723}
.sh-floor{width:100%;height:14px;background:#F4EFE6}
.sh-tb{padding:32px 24px 40px;display:flex;flex-direction:column;align-items:center;background:#F4EFE6}
.sh-tbi{width:100%;max-width:1100px;display:flex;flex-wrap:wrap;gap:28px 48px}
.sh-col{flex:1 1 300px;display:flex;flex-direction:column;gap:12px}
.sh-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sh-tab{border:2px solid #1D1B18;background:transparent;color:#1D1B18;border-radius:0;height:44px;min-width:44px;box-sizing:border-box;padding:0 12px;font-size:13px;cursor:pointer}
.sh-tab.on{background:#1D1B18;color:#F4EFE6}
.sh-list{display:flex;flex-direction:column;border:2px solid #1D1B18;background:#fff}
.sh-lh{padding:10px 14px;font:700 12px 'Space Mono',monospace;border-bottom:2px solid #1D1B18;display:flex;justify-content:space-between}
.sh-li{padding:0 14px;min-height:44px;display:flex;align-items:center;gap:12px;font:13px 'Space Mono',monospace;border-top:1px solid rgba(29,27,24,.15)}
.sh-li:first-of-type{border-top:0}
.sh-li b{width:20px}.sh-li span{flex:1}.sh-li em{font-style:normal}
.sh-note{font:12px/1.5 'Space Mono',monospace;color:#5E584F}
@media (max-width:860px){.sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.sh-grid{grid-template-columns:1fr}.sh-m{max-width:none}.sh-hall{padding-left:14px;padding-right:14px}.sh-tb{padding-left:14px;padding-right:14px}.sp-page{padding-left:14px;padding-right:14px}}

/* Memory */
.mm-bar{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.mm-g{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
.mm-g .sp-lbl{margin-right:4px}
.mm-g .sp-b,.mm-bar>.sp-b{min-width:44px}
.mm-main{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;margin-top:14px}
.mm-left{flex:1 1 440px;max-width:640px;min-width:0;display:flex;flex-direction:column;gap:14px}
.mm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-c{padding:0;border:0;background:transparent;aspect-ratio:3/4;perspective:700px;cursor:pointer;display:block;width:100%}
.mm-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s}
.mm-in.up{transform:rotateY(180deg)}
.mm-f,.mm-k{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.mm-k{background:#1D1B18;border:2px solid #1D1B18}
.mm-f{transform:rotateY(180deg);background:#fff;border:2px solid #1D1B18;padding:6px}
.mm-f span{font-family:Karla,sans-serif;font-weight:500;font-size:clamp(12px,2.6vw,18px);line-height:1.1;text-align:center;overflow-wrap:anywhere;letter-spacing:-.01em}
.mm-right{flex:1 1 320px;min-width:260px;display:flex;flex-direction:column;gap:10px}
.mm-wk{width:100%;display:block;border:4px solid #1D1B18;box-sizing:border-box;background:#fff}
.mm-wk-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:13px 'Space Mono',monospace}
@keyframes mmPop{0%{transform:scale(.2) rotate(-25deg);opacity:0}70%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

/* Dreierreihe */
.dr-g{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;touch-action:none}
.dr-c{aspect-ratio:1;border:2px solid #1D1B18;background:#fff;border-radius:0;padding:0 0 18%;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
.dr-c svg{height:52%;display:block}
.dr-pop{position:absolute;transform:translate(-50%,-50%);pointer-events:none;border:2px solid #1D1B18;background:#FBBC0A;padding:2px 8px;font:700 18px 'Space Mono',monospace;animation:drFloat .9s ease-out forwards}
@keyframes drFloat{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}20%{transform:translate(-50%,-70%) scale(1.15);opacity:1}100%{transform:translate(-50%,-190%) scale(1);opacity:0}}

.sh-pw{width:100%;max-width:1100px;margin-top:32px;padding-top:16px;border-top:2px solid #1D1B18;font:12px 'Space Mono',monospace;color:#5E584F}
.sh-pw a{color:#1D1B18;text-decoration:underline}.sh-pw a:hover{color:#4F7BC0}
@keyframes shDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
.sh-dr{animation:shDrift 5s ease-in-out infinite}
.sh-ship{animation-name:shSpin;animation-timing-function:linear}
@keyframes shSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sh-dr{animation:none!important}}
a.sp-sy{text-decoration:none}

/* Automaten-Bildschirme animiert */
.sh-fl{animation:shFlip 4s ease-in-out infinite}.sh-fa{animation:shFa 4s linear infinite}.sh-fb{opacity:0;animation:shFb 4s linear infinite}
@keyframes shFlip{0%,20%,30%,70%,80%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(0)}}
@keyframes shFa{0%,24%,75%,100%{opacity:1}25%,74%{opacity:0}}
@keyframes shFb{0%,24%,75%,100%{opacity:0}25%,74%{opacity:1}}
.sh-a-bau i{animation:shHop 1.5s ease-in-out infinite}.sh-a-bau i:nth-child(2){animation-delay:.12s}.sh-a-bau i:nth-child(3){animation-delay:.24s}.sh-a-bau i:nth-child(4){animation-delay:.36s}
@keyframes shHop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-12px)}}
.sh-a-inv>div:nth-child(1){animation:shMarch 2.4s steps(6) infinite alternate}.sh-a-inv>div:nth-child(2){animation:shMarch 2.4s steps(6) infinite alternate-reverse}
@keyframes shMarch{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
.sh-gun{animation:shGun 3s ease-in-out infinite alternate}@keyframes shGun{from{transform:translateX(-46px)}to{transform:translateX(46px)}}
.sh-shot{position:absolute;left:12px;bottom:10px;width:6px;height:14px;background:#E84434;animation:shShot 1s linear infinite}
@keyframes shShot{from{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}
.sh-pipe{left:100%;animation:shPipe 3.2s linear infinite}.sh-pipe+.sh-pipe{animation-name:shPipe}
@keyframes shPipe{from{left:100%}to{left:-20%}}
.sh-bob{animation:shBob 1.2s ease-in-out infinite}@keyframes shBob{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}}
.sh-sl{animation:shSlide 2.6s ease-in-out infinite alternate}@keyframes shSlide{from{transform:translateX(-18px)}to{transform:translateX(18px)}}
.sh-w{animation:shWave 1s ease-in-out infinite}@keyframes shWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.sh-pp{animation:shPop 2.4s ease-in-out infinite}
@keyframes shPop{0%,55%{transform:scale(1);opacity:1}72%{transform:scale(1.3)}85%,95%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.sh-hop{animation:shHop 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sh-fl,.sh-fa,.sh-fb,.sh-a-bau i,.sh-a-inv>div,.sh-gun,.sh-shot,.sh-pipe,.sh-bob,.sh-sl,.sh-w,.sh-pp,.sh-hop{animation:none!important}.sh-fb{opacity:0}}