:root{--bg:#0f1318;--panel:#161c23;--line:#26303a;--txt:#dfe7ee;--dim:#8b98a5;--acc:#6fb9e8}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#18222e,var(--bg));color:var(--txt);font:14px/1.45 system-ui,'DejaVu Sans',sans-serif}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 6px}
h1{font-size:17px;margin:0}
.sub{font-size:12px;color:var(--dim);margin:3px 0 0}
.badge{font-size:15px;font-weight:700;background:var(--panel);border:1px solid var(--line);padding:8px 14px;border-radius:12px;white-space:nowrap}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 18px 12px}
.controls label{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px}
.controls b{min-width:20px;text-align:right}
input[type=range]{width:130px;accent-color:var(--acc)}
select{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px}
button{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:7px 12px;cursor:pointer;font-size:13px}
button:hover{border-color:var(--acc)}
button.active{background:#1d3a55;border-color:var(--acc)}

main{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:14px;padding:0 18px 22px;align-items:start}

/* ---------- Bühne: Geräte im Kreis, Steuergerät in der Mitte ---------- */
#buehne{display:flex;justify-content:center;min-width:0}
#kreis{position:relative;width:min(100%,calc(100vh - 178px));aspect-ratio:1/1;margin:0 auto}
#kreis::before{content:"";position:absolute;inset:4%;border:1px dashed #22303f;border-radius:50%}
#slots{position:absolute;inset:0}

.slot{position:absolute;transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:center}

/* Steuergerät (Basisstation) in der Mitte */
#zentrum{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(150px,30%,290px);background:linear-gradient(#2b333c,#1b2128);border:1px solid #4a5561;border-radius:18px;padding:14px 12px 12px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:2}
#zentrum .grill{width:72%;height:34px;border-radius:10px;background:#10151a radial-gradient(circle,#2f3a44 1.6px,transparent 1.9px) 0 0/9px 9px;border:1px solid #38424d}
#zentrum.talk .grill{animation:sprech .8s ease-out 2}
@keyframes sprech{0%{box-shadow:0 0 0 0 rgba(111,185,232,.55)}100%{box-shadow:0 0 0 16px rgba(111,185,232,0)}}
#zMask{display:none;font-size:10px;color:#8b98a5}
#zentrum.mask #zMask{display:block}
.z-title{font-size:13px;font-weight:700}
.z-sub{font-size:10px;color:var(--dim)}
#zPhase{font-size:14px;font-weight:700}
#zAkt{font-size:11px;color:#cfe3f7;max-height:64px;overflow:hidden}
.z-led{width:9px;height:9px;border-radius:50%;background:#2a3138;transition:.2s}

/* ---------- Gerät ---------- */
.device{position:relative;width:120px;background:linear-gradient(#3d454f,#222930);border:1px solid #4a5561;border-radius:18px;padding:20px 9px 9px;display:flex;flex-direction:column;gap:7px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.device .led{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#2a3138;transition:background .2s}
.device .led.on{background:var(--led);box-shadow:0 0 9px var(--led)}
.device .screen{min-height:106px;background:linear-gradient(#0e2138,#08121f);border-radius:10px;border:1px solid #22334a;padding:7px 6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-align:center;overflow:hidden}
.s-label{font-size:8px;letter-spacing:2px;color:#6fb9e8;text-transform:uppercase}
.s-text{font-size:10px;color:#a9c1da}
.s-big{font-size:14px;font-weight:700;color:#fff}
.s-num{font-size:24px;font-weight:800;color:#fff}
.s-hint{font-size:8px;color:#5b7fa6}
.s-nums{display:flex;align-items:center;gap:8px}
.arrow{font-size:10px;color:#5b7fa6}
.standby{opacity:.45}
.tone-wolf{color:#ff6b6b}.tone-dorf{color:#7ee08a}.tone-liebe{color:#ff8fd1}
.device .keys{display:flex;justify-content:center;gap:7px}
.device .keys span{width:24px;height:24px;border-radius:50%;background:#39414b;border:1px solid #586371;display:flex;align-items:center;justify-content:center;font-size:9px;color:#dfe7ee;transition:transform .1s,background .1s,border-color .1s}
.device .keys span.pressed{background:var(--acc);border-color:var(--acc);color:#08121f;transform:scale(1.2);box-shadow:0 0 10px rgba(111,185,232,.7)}
.device .name{font-size:10px;text-align:center;color:#97a6b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device .chip{align-self:center;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:#22303f;border:1px solid #35485c}
.chip.wolf{color:#ff8f8f;border-color:#6b2f2f;background:#2c1a1a}
.chip.dorf{color:#8fe0a0;border-color:#2f5b3a;background:#16281c}
.chip.paar{color:#ff9fd6;border-color:#6b2f55;background:#2c1a26}
.device.dead{filter:saturate(.35) brightness(.8)}
.device.wake{animation:vibr .4s linear 2;border-color:#4da3ff;box-shadow:0 0 18px rgba(77,163,255,.45)}
@keyframes vibr{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-2px)}}

/* Kompaktmodus bei vielen Spielern: nur die großen Elemente bleiben lesbar */
#kreis.kompakt .device .keys,
#kreis.kompakt .device .s-hint,
#kreis.kompakt .device .s-text{display:none}
#kreis.kompakt .device .screen{min-height:84px}

/* ---------- Rechte Spalte: Text + Log ---------- */
aside{display:flex;flex-direction:column;gap:12px;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.panel h2{font-size:12px;margin:0 0 8px;color:var(--acc);letter-spacing:1.5px;text-transform:uppercase}
.info{font-size:12px;color:var(--dim)}
.setup{font-size:11px;color:var(--dim);margin-top:4px}
#announce{background:#0e2138;border:1px solid #2b3f57;border-radius:10px;padding:10px;font-size:13px;min-height:46px;margin-top:8px}
#rollenliste{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;max-height:170px;overflow-y:auto}
.rl{font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);background:#101820}
.rl.wolf{color:#ff8f8f}.rl.dorf{color:#8fe0a0}.rl.paar{color:#ff9fd6}
.rl.tot{opacity:.45;text-decoration:line-through}
#journal{height:300px;overflow-y:auto;font:12px/1.5 ui-monospace,'DejaVu Sans Mono',monospace;display:flex;flex-direction:column;gap:2px}
.logline{color:#aeb9c4}
.logline.pub{color:#cfe3f7}
.logline.priv{color:#e3c67e}
.logline.death{color:#ff9f6b}

@media(max-width:1080px){main{grid-template-columns:1fr}#journal{height:180px}}