:root {
  --bg: #0a0e14; --fg: #e8eef4; --mut: #8a98a8; --line: #1e2935; --card: #121a24; --card2: #182230;
  --cc: #4cc9f0; --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --run: #16a34a;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--fg); }
body {
  font: 17px/1.4 ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; transition: background-color .2s ease;
}
#app {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto;
  padding: env(safe-area-inset-top) 16px calc(18px + env(safe-area-inset-bottom));
}
header.top { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
header .me { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 45%; }
header .core { background: var(--cc); color: #05070a; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
header .pts { color: var(--mut); font-variant-numeric: tabular-nums; }
main.scr { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
h1 { font-size: 26px; margin: 0; line-height: 1.15; }
h2 { font-size: 18px; margin: 6px 0 0; }
.c { text-align: center; }
.lead { color: var(--mut); margin: 0; }
.sub { color: var(--mut); font-size: 14px; }
.lvl { color: var(--cc); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.wait { color: var(--mut); text-align: center; margin-top: auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.card p { margin: 6px 0; }
.card.hot { border-color: var(--cc); box-shadow: 0 0 0 1px var(--cc) inset; }
.card.warn { border-color: var(--warn); color: #ffd28a; }
.card.sab { border-color: #a78bfa; color: #d7c9ff; }
.timer { align-self: flex-end; font-variant-numeric: tabular-nums; color: var(--mut); font-weight: 700; }
.logo { font: 900 54px/0.95 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; margin-top: 18px; letter-spacing: .02em; background: linear-gradient(90deg, #ff4d6d, #ffb703, #2ec4b6, #4cc9f0, #b388ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
input.name { font: inherit; font-size: 20px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--fg); width: 100%; -webkit-user-select: text; user-select: text; }
input.name:focus { outline: none; border-color: var(--cc); }
.emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.emo { font-size: 24px; padding: 6px 0; border-radius: 10px; border: 2px solid transparent; background: var(--card); }
.emo.sel { border-color: var(--cc); background: var(--card2); }
.btn {
  font: inherit; font-weight: 800; color: var(--fg); background: var(--card2); border: 2px solid var(--line); border-radius: 16px;
  padding: 14px 16px; cursor: pointer; transition: transform .05s, filter .1s; touch-action: manipulation;
}
.btn.down { transform: scale(.96); filter: brightness(1.25); }
.btn:disabled { opacity: .35; }
.btn.go { background: var(--cc); color: #05070a; border-color: transparent; }
.btn.big { font-size: 20px; padding: 18px; }
.btn.p { background: #1d4ed8; border-color: #3b82f6; color: #fff; }
.btn.v { background: #3f2a00; border-color: #a16207; color: #fde68a; }
.btn.v.on { background: var(--warn); color: #1a1000; border-color: transparent; animation: pulse 1s infinite; }
.btn.cpu { font-size: 34px; letter-spacing: .06em; min-height: 42vh; border-radius: 28px; }
.btn.cpu.burst { min-height: 48vh; background: radial-gradient(circle at 50% 40%, #1f3b57, #0f1d2b); border-color: var(--cc); font-size: 54px; }
.btn.cpu.burst.hit { background: radial-gradient(circle at 50% 40%, #22c55e, #0d5f2b); border-color: #86efac; }
.btn.cpu.burst.miss { background: radial-gradient(circle at 50% 40%, #7f1d1d, #3b0a0a); border-color: var(--bad); animation: shake .15s; }
.btn.cpu.go { background: #fff; color: #065f2a; border-color: transparent; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.btn.cpu.wake { background: #334155; color: #fff; min-height: 24vh; }
.big-emoji { font-size: 84px; text-align: center; line-height: 1; margin-top: 10px; }
.pid { text-align: center; font: 800 30px ui-monospace, SFMono-Regular, Menlo, monospace; }
.corebadge { align-self: center; background: var(--cc); color: #05070a; font-weight: 900; font-size: 22px; padding: 6px 18px; border-radius: 999px; }
.mates { text-align: center; color: var(--mut); margin: 0; }
.mates .mem { font-size: 26px; letter-spacing: 2px; }
.fact { color: var(--mut); font-size: 14px; text-align: center; border-top: 1px solid var(--line); padding-top: 10px; }
.howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.count { font: 900 160px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; margin: auto 0; color: var(--cc); }
.vq { display: flex; flex-direction: column; gap: 8px; }
.vopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vopt { font: inherit; text-align: left; padding: 12px 38px 12px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--fg); display: flex; flex-direction: column; gap: 2px; position: relative; }
.vopt small { color: var(--mut); font-size: 12px; }
.vopt .cnt { position: absolute; right: 10px; top: 10px; color: var(--cc); font-weight: 800; }
.vopt.sel { border-color: var(--cc); background: var(--card2); box-shadow: 0 0 0 2px var(--cc) inset; }
.vopt.lock { border-color: var(--warn); }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--card); border-radius: 14px; padding: 10px; text-align: center; border: 1px solid var(--line); }
.stat b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.stat small { color: var(--mut); font-size: 12px; }
.state { border-radius: 18px; padding: 18px; text-align: center; background: var(--card); border: 2px solid var(--line); }
.state b { font-size: 26px; display: block; }
.state div { color: var(--mut); margin-top: 4px; }
.state.run { background: #fff; color: #065f2a; border-color: transparent; }
.state.run div { color: #166534; }
.state.ready { border-color: #334155; }
.state.next { background: #fbbf24; color: #3a2600; border-color: transparent; }
.state.next div { color: #5c3d00; }
.state.blocked { background: #1e293b; border-color: #475569; }
.state.done { border-color: var(--ok); }
.state.dead { background: #450a0a; border-color: var(--bad); color: #fecaca; animation: pulse .8s infinite; }
.runner { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.runner.idle { border-color: var(--warn); color: #ffd28a; animation: pulse 1s infinite; }
.runner.mine { border-color: var(--ok); color: #bbf7d0; }
.bar { position: relative; height: 34px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--cc); opacity: .55; transition: width .1s linear; }
.bar span { position: relative; display: block; line-height: 32px; text-align: center; font-weight: 700; font-size: 14px; }
.bar.pat i { background: linear-gradient(90deg, var(--bad), var(--warn), var(--ok)); opacity: .7; }
.bar.slice i { background: #fff; opacity: .9; }
.bar.slice span { color: #065f2a; mix-blend-mode: normal; }
.bar.work i { background: var(--ok); }
.pos { text-align: center; font-weight: 800; font-size: 20px; }
.moans { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: auto; }
.btn.moan { font-size: 26px; padding: 10px 0; }
.moanbar { min-height: 30px; display: flex; flex-wrap: wrap; gap: 6px; }
.moanbar .mb { font-size: 22px; animation: pop .3s; }
.queue { display: flex; flex-direction: column; gap: 8px; }
.btn.qitem { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; text-align: left; align-items: center; padding: 10px 12px; column-gap: 8px; }
.qitem .qe { grid-row: span 2; font-size: 30px; }
.qitem .qb { font-size: 22px; color: var(--cc); grid-row: span 2; font-variant-numeric: tabular-nums; }
.qitem .qw { font-size: 12px; color: var(--mut); font-weight: 600; }
.qitem.sel { border-color: var(--cc); box-shadow: 0 0 0 2px var(--cc) inset; }
.qitem.ghost { opacity: .7; border-style: dashed; }
.reg { text-align: center; background: var(--card); border-radius: 14px; padding: 10px; border: 1px solid var(--line); }
.reg small { color: var(--mut); display: block; }
.reg b { font: 800 40px ui-monospace, SFMono-Regular, Menlo, monospace; }
.steps { display: grid; grid-template-columns: 1fr; gap: 10px; }
.btn.step { font-size: 22px; padding: 22px 12px; }
.btn.step.on { background: var(--cc); color: #05070a; border-color: transparent; }
.btn.step.busy { background: #334155; color: #cbd5e1; animation: pulse .6s infinite; opacity: 1; }
.ledw, .cpuw, .vgw, .col { display: flex; flex-direction: column; gap: 12px; }
.sem { text-align: center; border-radius: 16px; padding: 10px; border: 2px solid var(--line); }
.sem b { font: 900 46px ui-monospace, SFMono-Regular, Menlo, monospace; display: block; }
.sem small { color: var(--mut); }
.sem.ok { border-color: var(--ok); color: #86efac; }
.sem.zero { border-color: var(--warn); color: #fcd34d; }
.sem.neg { border-color: var(--bad); color: #fca5a5; }
.printers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prn { background: var(--card); border: 2px solid var(--line); border-radius: 14px; text-align: center; padding: 10px 4px; font-weight: 800; }
.prn small { display: block; font-size: 22px; font-weight: 400; }
.prn.busy { border-color: #475569; }
.prn.mine { border-color: var(--ok); background: #0c2e1a; }
.vg { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vg small { color: var(--mut); }
.vg b { font-size: 22px; flex: 1; }
.resrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn.res { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; min-height: 150px; justify-content: center; }
.btn.res .ri { font-size: 46px; }
.btn.res small { color: var(--mut); font-size: 12px; font-weight: 600; text-align: center; }
.btn.res.free { border-color: var(--cc); }
.btn.res.mine { border-color: var(--ok); background: #0c2e1a; opacity: 1; }
.btn.res.busy { border-color: #475569; }
.btn.res.waiting { border-color: var(--warn); animation: pulse 1s infinite; opacity: 1; }
.btn.res.denied { border-color: #a78bfa; opacity: 1; }
.btn.res.locked { opacity: .35; }
.dlvote { background: #450a0a; border: 2px solid var(--bad); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; color: #fecaca; }
.dlvote > b { font-size: 20px; }
.dlopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.dlopt { background: #7f1d1d; border-color: #b91c1c; color: #fff; display: flex; flex-direction: column; }
.btn.dlopt small { font-weight: 600; opacity: .8; }
.btn.dlopt.sel { background: #fff; color: #7f1d1d; }
.bosshead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bosshead b { font-size: 22px; }
.bosshead span { color: var(--mut); font-size: 14px; }
.cfg { font-size: 12px; }
.badges { display: flex; flex-direction: column; gap: 8px; }
.badge { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.badge .bi { font-size: 34px; }
.badge small { display: block; color: var(--mut); font-size: 13px; }
.note { background: var(--card); border-radius: 14px; padding: 10px 12px; border: 1px solid var(--line); }
.note p { margin: 4px 0 0; color: var(--mut); font-size: 14px; }
.offline { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bad); color: #fff; text-align: center; padding: 10px calc(10px + env(safe-area-inset-bottom)); font-weight: 800; z-index: 20; }
.pausebox { position: fixed; inset: 0; background: rgba(5,7,10,.82); display: flex; align-items: center; justify-content: center; font: 900 44px ui-monospace, Menlo, monospace; z-index: 15; }

/* Leuchtzustände: im Hörsaal sieht man das Quantum durch die Reihen wandern */
body.glow-run { background: #16a34a; }
body.glow-run header.top { border-color: rgba(255,255,255,.3); }
body.glow-run header .pts, body.glow-run .sub, body.glow-run .lvl, body.glow-run .timer { color: #dcfce7; }
body.glow-next { background: #b45309; }
body.glow-blocked { background: #0f172a; }
body.glow-dead, body.glow-shame { animation: redpulse .9s infinite; }
body.glow-alarm { background: #2a0a0a; }
body.glow-sched { background: #1e1036; }
body.glow-count { background: #0d1520; }

#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 30; }
#flash.on.turn { animation: fl .7s ease-out; background: #4ade80; }
#flash.on.go { animation: fl .6s ease-out; background: var(--cc); }
#flash.on.ok { animation: fl .5s ease-out; background: #86efac; }
#flash.on.end { animation: fl .8s ease-out; background: #fff; }
#flash.on.siren { animation: siren 1.4s linear; background: #ef4444; }
#flash.on.shame { animation: siren 1s linear; background: #f97316; }
#flash.on.boom { animation: fl 1s ease-out; background: #7f1d1d; }
#toast { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translate(-50%, -150%); background: #fff; color: #0a0e14; padding: 10px 16px; border-radius: 999px; font-weight: 800; z-index: 40; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
#toast.on { animation: toast 3.2s ease; }
@keyframes fl { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes siren { 0%, 50%, 100% { opacity: 0; } 25%, 75% { opacity: .7; } }
@keyframes redpulse { 0%, 100% { background: #3b0606; } 50% { background: #7f1d1d; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 33% { transform: translateX(-6px); } 66% { transform: translateX(6px); } }
@keyframes toast { 0% { transform: translate(-50%, -150%); } 10%, 85% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -150%); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }